@ngbplatform/ui 1.3.0

package/src/ngb/metadata/NgbFilterFieldControl.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import NgbInput from '../primitives/NgbInput.vue'
+import NgbLookup from '../primitives/NgbLookup.vue'
+import NgbMultiSelect from '../primitives/NgbMultiSelect.vue'
+import NgbSelect from '../primitives/NgbSelect.vue'
+import NgbSwitch from '../primitives/NgbSwitch.vue'
+import { filterInputType, filterPlaceholder, filterSelectOptions } from './filtering'
+import type { FilterFieldLike, FilterFieldState, FilterLookupItem } from './types'
+
+const props = withDefaults(defineProps<{
+  field: FilterFieldLike
+  state: FilterFieldState
+  lookupItems: FilterLookupItem[]
+  disabled?: boolean
+  selectEmptyLabel?: string
+  showOpen?: boolean
+  showClear?: boolean
+  allowIncludeDescendants?: boolean
+  includeDescendantsLabel?: string
+}>(), {
+  disabled: false,
+  selectEmptyLabel: 'Any',
+  showOpen: false,
+  showClear: false,
+  allowIncludeDescendants: false,
+  includeDescendantsLabel: 'Include descendants',
+})
+
+const emit = defineEmits<{
+  (e: 'lookup-query', query: string): void
+  (e: 'update:items', items: FilterLookupItem[]): void
+  (e: 'update:raw', value: string): void
+  (e: 'update:includeDescendants', value: boolean): void
+  (e: 'open'): void
+}>()
+
+const selectedItem = computed(() => props.state.items[0] ?? null)
+const isLookup = computed(() => !!props.field.lookup)
+const hasOptions = computed(() => (props.field.options?.length ?? 0) > 0)
+const shouldShowIncludeDescendants = computed(() =>
+  props.allowIncludeDescendants
+  && !!props.field.supportsIncludeDescendants
+  && props.state.items.length > 0)
+const selectOptions = computed(() => filterSelectOptions(props.field, props.selectEmptyLabel))
+const placeholder = computed(() => filterPlaceholder(props.field))
+const inputType = computed(() => filterInputType(props.field.dataType))
+</script>
+
+<template>
+  <div class="space-y-3">
+    <NgbMultiSelect
+      v-if="isLookup && field.isMulti"
+      :model-value="state.items"
+      :items="lookupItems"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      @query="emit('lookup-query', $event)"
+      @update:model-value="emit('update:items', $event as FilterLookupItem[])"
+    />
+
+    <NgbLookup
+      v-else-if="isLookup"
+      :model-value="selectedItem"
+      :items="lookupItems"
+      :disabled="disabled"
+      :show-open="showOpen"
+      :show-clear="showClear"
+      :placeholder="placeholder"
+      @query="emit('lookup-query', $event)"
+      @update:model-value="emit('update:items', $event ? [$event as FilterLookupItem] : [])"
+      @open="emit('open')"
+    />
+
+    <NgbSelect
+      v-else-if="hasOptions && !field.isMulti"
+      :model-value="state.raw"
+      :options="selectOptions"
+      :disabled="disabled"
+      @update:model-value="emit('update:raw', String($event ?? ''))"
+    />
+
+    <NgbInput
+      v-else
+      :model-value="state.raw"
+      :type="inputType"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      @update:model-value="emit('update:raw', String($event ?? ''))"
+    />
+
+    <div
+      v-if="shouldShowIncludeDescendants"
+      class="flex items-center justify-between gap-3 rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card px-3 py-2"
+    >
+      <div class="text-sm text-ngb-text">{{ includeDescendantsLabel }}</div>
+      <NgbSwitch
+        :model-value="!!state.includeDescendants"
+        :disabled="disabled"
+        @update:model-value="emit('update:includeDescendants', $event)"
+      />
+    </div>
+  </div>
+</template>

package/src/ngb/metadata/NgbMetadataCatalogEditPage.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { buildCatalogCompactPageUrl, buildCatalogListUrl } from '../editor/catalogNavigation'
+import type { MetadataCatalogEditPageProps } from './routePages'
+import { normalizeEntityEditorIdRouteParam, normalizeRequiredRouteParam } from '../router/routeParams'
+
+const props = withDefaults(defineProps<MetadataCatalogEditPageProps>(), {
+  canBack: true,
+  resolveCompactTo: null,
+  resolveCloseTo: null,
+})
+
+const route = useRoute()
+
+const catalogType = computed(() => normalizeRequiredRouteParam(route.params.catalogType))
+const idParam = computed(() => normalizeEntityEditorIdRouteParam(route.params.id))
+
+const compactTo = computed(() => {
+  if (!catalogType.value) return null
+  return props.resolveCompactTo?.(catalogType.value, idParam.value) ?? buildCatalogCompactPageUrl(catalogType.value, idParam.value)
+})
+
+const closeTo = computed(() => {
+  if (!catalogType.value) return '/'
+  return props.resolveCloseTo?.(catalogType.value) ?? buildCatalogListUrl(catalogType.value)
+})
+</script>
+
+<template>
+  <component
+    :is="editorComponent"
+    kind="catalog"
+    :type-code="catalogType"
+    :id="idParam"
+    mode="page"
+    :can-back="canBack"
+    :compact-to="compactTo"
+    :close-to="closeTo"
+  />
+</template>

package/src/ngb/metadata/NgbMetadataCatalogListPage.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import NgbEditorDiscardDialog from '../editor/NgbEditorDiscardDialog.vue'
+import NgbEntityEditorDrawerActions from '../editor/NgbEntityEditorDrawerActions.vue'
+import { buildCatalogFullPageUrl } from '../editor/catalogNavigation'
+import { useEditorDrawerState } from '../editor/useEditorDrawerState'
+import { useEntityEditorCommitHandlers } from '../editor/useEntityEditorCommitHandlers'
+import type { EntityEditorHandle } from '../editor/types'
+import { useRouteQueryEditorDrawer } from '../editor/useRouteQueryEditorDrawer'
+import NgbRecycleBinFilter from './NgbRecycleBinFilter.vue'
+import NgbRegisterPageLayout from './NgbRegisterPageLayout.vue'
+import type { MetadataCatalogListPageProps } from './routePages'
+import { useMetadataPageReloadKey, useMetadataRegisterPageData } from './useMetadataRegisterPageData'
+import { useMetadataStore } from './store'
+import { navigateBack } from '../router/backNavigation'
+import { normalizeTrashMode, pushCleanRouteQuery, type QueryTrashMode } from '../router/queryParams'
+
+const props = withDefaults(defineProps<MetadataCatalogListPageProps>(), {
+  resolveTitle: null,
+  resolveStorageKey: null,
+  resolveDrawerExtraActions: null,
+  handleDrawerExtraAction: null,
+  backTarget: '/',
+})
+
+const route = useRoute()
+const router = useRouter()
+const metaStore = useMetadataStore()
+
+const resolvedBackTarget = computed(() => String(props.backTarget ?? '').trim() || '/')
+const canBack = computed(() => route.path !== resolvedBackTarget.value)
+const catalogType = computed(() => String(route.params.catalogType ?? ''))
+const offset = computed(() => Number(route.query.offset ?? 0) || 0)
+const limit = computed(() => Number(route.query.limit ?? 50) || 50)
+
+const trashMode = computed<QueryTrashMode>({
+  get() {
+    return normalizeTrashMode(route.query.trash)
+  },
+  set(value) {
+    void pushCleanRouteQuery(route, router, {
+      trash: value,
+      offset: 0,
+    })
+  },
+})
+
+function isCatalogEditorDrawerQueryKey(key: string): boolean {
+  return key === 'panel' || key === 'id'
+}
+
+const routeReloadKey = useMetadataPageReloadKey({
+  route,
+  entityTypeCode: catalogType,
+  ignoreQueryKey: isCatalogEditorDrawerQueryKey,
+})
+
+const {
+  loading,
+  error,
+  metadata,
+  page,
+  columns,
+  rows,
+  load,
+} = useMetadataRegisterPageData({
+  route,
+  entityTypeCode: catalogType,
+  reloadKey: routeReloadKey,
+  loadMetadata: (entityTypeCode) => metaStore.ensureCatalogType(entityTypeCode),
+  loadPage: ({ entityTypeCode }) =>
+    props.loadPage({
+      catalogType: entityTypeCode,
+      offset: offset.value,
+      limit: limit.value,
+      search: String(route.query.search ?? '') || undefined,
+      trashMode: trashMode.value,
+    }),
+})
+
+const resolvedTitle = computed(() => {
+  if (!metadata.value) return `Catalog: ${catalogType.value}`
+  return props.resolveTitle?.(catalogType.value, metadata.value.displayName) ?? metadata.value.displayName
+})
+
+const resolvedStorageKey = computed(() =>
+  String(props.resolveStorageKey?.(catalogType.value) ?? '').trim() || `ngb:catalog:${catalogType.value}`,
+)
+
+const editorRef = ref<EntityEditorHandle | null>(null)
+const {
+  drawerTitle,
+  drawerSubtitle,
+  editorFlags,
+  discardOpen,
+  handleEditorFlags,
+  handleEditorState,
+  resetDrawerHeading,
+  requestDiscard,
+  discardConfirm,
+  discardCancel,
+  beforeCloseDrawer,
+} = useEditorDrawerState()
+
+const {
+  panelMode,
+  currentId,
+  isPanelOpen,
+  openCreateDrawer: openRouteCreateDrawer,
+  openEditDrawer: openRouteEditDrawer,
+  closeDrawer: closeRouteDrawer,
+} = useRouteQueryEditorDrawer({
+  route,
+  router,
+  onBeforeOpen: async (_next, current) => {
+    if (current.mode === null || !editorFlags.value.isDirty) return true
+    return await requestDiscard()
+  },
+  onBeforeClose: async (current) => {
+    if (current.mode === null || !editorFlags.value.isDirty) return true
+    return await requestDiscard()
+  },
+})
+
+async function openCreateDrawer() {
+  await openRouteCreateDrawer({
+    onCommit: () => {
+      resetDrawerHeading()
+    },
+  })
+}
+
+async function openEditDrawer(id: string) {
+  await openRouteEditDrawer(id, {
+    onCommit: () => {
+      resetDrawerHeading()
+    },
+  })
+}
+
+async function closeDrawer() {
+  await closeRouteDrawer()
+}
+
+const {
+  handleCreated,
+  handleSaved,
+  handleChanged,
+  handleDeleted,
+} = useEntityEditorCommitHandlers({
+  reload: load,
+  closeDrawer,
+})
+
+function nextPage() {
+  void pushCleanRouteQuery(route, router, { offset: offset.value + limit.value })
+}
+
+function prevPage() {
+  void pushCleanRouteQuery(route, router, { offset: Math.max(0, offset.value - limit.value) })
+}
+
+const resolvedDrawerExtraActions = computed(() =>
+  props.resolveDrawerExtraActions?.({
+    editorFlags: editorFlags.value,
+  }) ?? [],
+)
+
+async function handleDrawerAction(action: string) {
+  switch (action) {
+    case 'expand':
+      editorRef.value?.openFullPage()
+      return
+    case 'share':
+      void editorRef.value?.copyShareLink()
+      return
+    case 'audit':
+      editorRef.value?.openAuditLog()
+      return
+    case 'mark':
+      editorRef.value?.toggleMarkForDeletion()
+      return
+    case 'save':
+      void editorRef.value?.save()
+      return
+    default:
+      await props.handleDrawerExtraAction?.({
+        action,
+        editor: editorRef.value,
+      })
+  }
+}
+
+const expandTo = computed(() => {
+  if (panelMode.value === 'new') return buildCatalogFullPageUrl(catalogType.value)
+  if (currentId.value) return buildCatalogFullPageUrl(catalogType.value, currentId.value)
+  return null
+})
+</script>
+
+<template>
+  <NgbRegisterPageLayout
+    :title="resolvedTitle"
+    :can-back="canBack"
+    :items-count="page ? page.items.length : null"
+    :total="page?.total ?? null"
+    :loading="loading"
+    :error="error"
+    :show-filter="false"
+    :disable-create="metadata?.capabilities?.canCreate === false"
+    :disable-prev="offset === 0"
+    :disable-next="(page?.items?.length ?? 0) < limit"
+    :columns="columns"
+    :rows="rows"
+    :storage-key="resolvedStorageKey"
+    :drawer-open="isPanelOpen"
+    :drawer-title="drawerTitle || (panelMode === 'new' ? `New ${metadata?.displayName ?? 'Record'}` : metadata?.displayName ?? 'Edit')"
+    :drawer-subtitle="drawerSubtitle"
+    :before-close="beforeCloseDrawer"
+    @back="navigateBack(router, route, resolvedBackTarget)"
+    @refresh="load"
+    @create="() => void openCreateDrawer()"
+    @prev="prevPage"
+    @next="nextPage"
+    @rowActivate="(id) => void openEditDrawer(String(id))"
+    @update:drawerOpen="(value) => (!value ? void closeDrawer() : null)"
+  >
+    <template #filters>
+      <NgbRecycleBinFilter v-model="trashMode" :disabled="loading" />
+    </template>
+
+    <template #drawerActions>
+      <NgbEntityEditorDrawerActions
+        :flags="editorFlags"
+        :extra-actions="resolvedDrawerExtraActions"
+        @action="(action) => void handleDrawerAction(action)"
+      />
+    </template>
+
+    <template #drawerContent>
+      <component
+        :is="editorComponent"
+        ref="editorRef"
+        v-if="isPanelOpen"
+        kind="catalog"
+        :type-code="catalogType"
+        :id="currentId"
+        mode="drawer"
+        :expand-to="expandTo"
+        :navigate-on-create="false"
+        @state="handleEditorState"
+        @flags="handleEditorFlags"
+        @created="handleCreated"
+        @saved="handleSaved"
+        @changed="handleChanged"
+        @deleted="handleDeleted"
+        @close="closeDrawer"
+      />
+    </template>
+  </NgbRegisterPageLayout>
+
+  <NgbEditorDiscardDialog
+    :open="discardOpen"
+    @cancel="discardCancel"
+    @confirm="discardConfirm"
+  />
+</template>

package/src/ngb/metadata/NgbMetadataDocumentEditPage.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { buildEntityFallbackCloseTarget } from '../editor/documentNavigation'
+import { buildDocumentCompactPageUrl } from '../editor/documentNavigation'
+import { resolveCompactDocumentSourceTarget } from '../editor/documentNavigation'
+import { readDocumentCopyDraft } from '../editor/documentCopyDraft'
+import type { MetadataDocumentEditPageProps } from './routePages'
+import type { EntityFormModel, RecordPayload } from './types'
+import { normalizeEntityEditorIdRouteParam, normalizeRequiredRouteParam } from '../router/routeParams'
+
+const props = withDefaults(defineProps<MetadataDocumentEditPageProps>(), {
+  canBack: true,
+  resolveCompactTo: null,
+  resolveCloseTo: null,
+})
+
+const route = useRoute()
+
+function normalizeQueryString(value: unknown): string | null {
+  if (Array.isArray(value)) return normalizeQueryString(value[0])
+  const normalized = String(value ?? '').trim()
+  return normalized || null
+}
+
+const documentType = computed(() => normalizeRequiredRouteParam(route.params.documentType))
+const idParam = computed(() => normalizeEntityEditorIdRouteParam(route.params.id))
+
+const compactTo = computed(() => {
+  if (!documentType.value) return null
+
+  const fallbackCompactTarget =
+    props.resolveCompactTo?.(documentType.value, idParam.value)
+    ?? buildDocumentCompactPageUrl(documentType.value, idParam.value)
+
+  return resolveCompactDocumentSourceTarget(route, fallbackCompactTarget) ?? fallbackCompactTarget
+})
+
+const closeTo = computed(() => {
+  if (!documentType.value) return '/'
+  return props.resolveCloseTo?.(documentType.value) ?? buildEntityFallbackCloseTarget('document', documentType.value)
+})
+
+const copyDraftToken = computed(() => (!idParam.value ? normalizeQueryString(route.query.copyDraft) : null))
+const copyDraftSnapshot = computed(() =>
+  (!idParam.value && documentType.value)
+    ? readDocumentCopyDraft(copyDraftToken.value, documentType.value)
+    : null,
+)
+const initialFields = computed<EntityFormModel | null>(() => copyDraftSnapshot.value?.fields ?? null)
+const initialParts = computed<RecordPayload['parts'] | null>(() => copyDraftSnapshot.value?.parts ?? null)
+</script>
+
+<template>
+  <component
+    :is="editorComponent"
+    kind="document"
+    :type-code="documentType"
+    :id="idParam"
+    mode="page"
+    :can-back="canBack"
+    :initial-fields="initialFields"
+    :initial-parts="initialParts"
+    :compact-to="compactTo"
+    :close-to="closeTo"
+  />
+</template>