2024-06-03 12:41:26 +00:00
|
|
|
<!--
|
|
|
|
//
|
|
|
|
// Copyright © 2023 Hardcore Engineering Inc.
|
|
|
|
//
|
|
|
|
-->
|
|
|
|
<script lang="ts">
|
|
|
|
import { Class, Doc, DocumentQuery, Ref, Space, WithLookup } from '@hcengineering/core'
|
2024-07-25 15:16:08 +00:00
|
|
|
import { translate } from '@hcengineering/platform'
|
|
|
|
import type { IntlString, Asset } from '@hcengineering/platform'
|
2024-08-09 04:49:40 +00:00
|
|
|
import {
|
|
|
|
IModeSelector,
|
|
|
|
SearchInput,
|
|
|
|
ModeSelector,
|
|
|
|
themeStore,
|
|
|
|
Header,
|
|
|
|
Breadcrumb,
|
|
|
|
HeaderAdaptive
|
|
|
|
} from '@hcengineering/ui'
|
2024-06-03 12:41:26 +00:00
|
|
|
import { ViewOptions, Viewlet, ViewletPreference } from '@hcengineering/view'
|
|
|
|
|
|
|
|
import FilterBar from './filter/FilterBar.svelte'
|
|
|
|
import FilterButton from './filter/FilterButton.svelte'
|
|
|
|
import ViewletSelector from './ViewletSelector.svelte'
|
|
|
|
import ViewletSettingButton from './ViewletSettingButton.svelte'
|
|
|
|
|
|
|
|
export let viewletQuery: DocumentQuery<Viewlet>
|
|
|
|
export let viewlet: WithLookup<Viewlet> | undefined
|
|
|
|
export let viewOptions: ViewOptions | undefined
|
|
|
|
export let preference: ViewletPreference | undefined
|
|
|
|
export let loading = true
|
|
|
|
export let _class: Ref<Class<Doc>>
|
|
|
|
export let title: IntlString
|
2024-07-25 15:16:08 +00:00
|
|
|
export let icon: Asset | undefined = undefined
|
2024-06-03 12:41:26 +00:00
|
|
|
export let search: string = ''
|
|
|
|
export let query: DocumentQuery<Doc>
|
|
|
|
export let modeSelectorProps: IModeSelector | undefined = undefined
|
|
|
|
export let space: Ref<Space> | undefined = undefined
|
|
|
|
export let resultQuery: DocumentQuery<Doc>
|
2024-08-09 04:49:40 +00:00
|
|
|
export let adaptive: HeaderAdaptive = 'default'
|
2024-07-25 15:16:08 +00:00
|
|
|
export let hideActions: boolean = false
|
2024-06-03 12:41:26 +00:00
|
|
|
|
|
|
|
let label = ''
|
|
|
|
let searchQuery: DocumentQuery<Doc> = { ...query }
|
|
|
|
resultQuery = search === '' ? { ...query } : { ...query, $search: search }
|
|
|
|
|
|
|
|
$: if (!label && title) {
|
|
|
|
translate(title, {}, $themeStore.language).then((res) => {
|
|
|
|
label = res
|
|
|
|
})
|
|
|
|
}
|
|
|
|
$: searchQuery = search === '' ? { ...query } : { ...query, $search: search }
|
2024-07-25 15:16:08 +00:00
|
|
|
|
|
|
|
$: hideExtra = modeSelectorProps === undefined && $$slots.extra === undefined
|
2024-06-03 12:41:26 +00:00
|
|
|
</script>
|
|
|
|
|
2024-07-25 15:16:08 +00:00
|
|
|
<Header {adaptive} {hideActions} {hideExtra} overflowExtra>
|
|
|
|
<svelte:fragment slot="beforeTitle">
|
2024-06-03 12:41:26 +00:00
|
|
|
<ViewletSelector bind:viewlet bind:preference bind:loading {viewletQuery} />
|
|
|
|
<ViewletSettingButton bind:viewlet bind:viewOptions />
|
2024-07-25 15:16:08 +00:00
|
|
|
<slot name="header-tools" />
|
|
|
|
</svelte:fragment>
|
|
|
|
|
|
|
|
<Breadcrumb {icon} title={label} size={'large'} isCurrent />
|
|
|
|
|
|
|
|
<svelte:fragment slot="search">
|
|
|
|
<SearchInput bind:value={search} collapsed />
|
|
|
|
<FilterButton {_class} />
|
|
|
|
</svelte:fragment>
|
|
|
|
<svelte:fragment slot="actions">
|
|
|
|
<slot name="actions" />
|
|
|
|
</svelte:fragment>
|
|
|
|
<svelte:fragment slot="extra">
|
2024-06-03 12:41:26 +00:00
|
|
|
<slot name="extra" />
|
2024-07-25 15:16:08 +00:00
|
|
|
{#if modeSelectorProps !== undefined}
|
|
|
|
<ModeSelector kind={'subtle'} props={modeSelectorProps} />
|
|
|
|
{/if}
|
|
|
|
</svelte:fragment>
|
|
|
|
</Header>
|
2024-06-03 12:41:26 +00:00
|
|
|
<FilterBar {_class} query={searchQuery} {space} {viewOptions} on:change={(e) => (resultQuery = { ...e.detail })} />
|