@ngbplatform/ui 1.3.0

package/src/ngb/metadata/NgbMetadataDocumentListPage.vue

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import NgbBadge from '../primitives/NgbBadge.vue'
+import NgbEditorDiscardDialog from '../editor/NgbEditorDiscardDialog.vue'
+import { buildDocumentFullPageUrl, shouldOpenDocumentInFullPageByDefault } from '../editor/documentNavigation'
+import { isDocumentEditorDrawerQueryKey, useDocumentEditorDrawerState } from '../editor/useDocumentEditorDrawerState'
+import { useEditorDrawerState } from '../editor/useEditorDrawerState'
+import { useEntityEditorCommitHandlers } from '../editor/useEntityEditorCommitHandlers'
+import type { EntityEditorHandle } from '../editor/types'
+import { useLookupStore } from '../lookup/store'
+import NgbDocumentListFiltersDrawer from './NgbDocumentListFiltersDrawer.vue'
+import NgbDocumentPeriodFilter from './NgbDocumentPeriodFilter.vue'
+import NgbRecycleBinFilter from './NgbRecycleBinFilter.vue'
+import NgbRegisterPageLayout from './NgbRegisterPageLayout.vue'
+import type { MetadataDocumentListPageProps } from './routePages'
+import {
+  monthValueToDateOnlyEnd,
+  monthValueToDateOnlyStart,
+  useMonthPagedListQuery,
+} from './monthPagedListQuery'
+import { useMetadataStore } from './store'
+import { useMetadataListFilters } from './useMetadataListFilters'
+import {
+  useMetadataPageReloadKey,
+  useMetadataRegisterPageData,
+} from './useMetadataRegisterPageData'
+import { currentRouteBackTarget, navigateBack, withBackTarget } from '../router/backNavigation'
+import { normalizeSingleQueryValue } from '../router/queryParams'
+
+const props = withDefaults(defineProps<MetadataDocumentListPageProps>(), {
+  resolveLookupHint: null,
+  resolveTitle: null,
+  resolveStorageKey: null,
+  resolveWarning: null,
+  isCreateDisabled: null,
+  handleCreateOverride: null,
+  backTarget: '/',
+})
+
+const route = useRoute()
+const router = useRouter()
+const metaStore = useMetadataStore()
+const lookupStore = useLookupStore()
+
+const resolvedBackTarget = computed(() => String(props.backTarget ?? '').trim() || '/')
+const canBack = computed(() => route.path !== resolvedBackTarget.value)
+const documentType = computed(() => String(route.params.documentType ?? ''))
+
+const {
+  offset,
+  limit,
+  trashMode,
+  periodFromMonth,
+  periodToMonth,
+  nextPage,
+  prevPage,
+} = useMonthPagedListQuery({
+  route,
+  router,
+})
+
+const filterDrawerOpen = ref(false)
+
+const routeReloadKey = useMetadataPageReloadKey({
+  route,
+  entityTypeCode: documentType,
+  ignoreQueryKey: isDocumentEditorDrawerQueryKey,
+})
+
+const {
+  loading,
+  error,
+  metadata,
+  page,
+  listFilters,
+  hasListFilters,
+  columns,
+  rows,
+  load,
+} = useMetadataRegisterPageData({
+  route,
+  entityTypeCode: documentType,
+  reloadKey: routeReloadKey,
+  loadMetadata: (entityTypeCode) => metaStore.ensureDocumentType(entityTypeCode),
+  loadPage: async ({ entityTypeCode, metadata }) => {
+    const listFilterParams = Object.fromEntries(
+      (metadata.list?.filters ?? [])
+        .map((field) => [field.key, normalizeSingleQueryValue(route.query[field.key])] as const)
+        .filter((entry) => entry[1].length > 0),
+    )
+
+    return await props.loadPage({
+      documentType: entityTypeCode,
+      metadata,
+      offset: offset.value,
+      limit: limit.value,
+      search: String(route.query.search ?? '') || undefined,
+      trashMode: trashMode.value,
+      periodFrom: monthValueToDateOnlyStart(periodFromMonth.value) ?? null,
+      periodTo: monthValueToDateOnlyEnd(periodToMonth.value) ?? null,
+      listFilters: listFilterParams,
+    })
+  },
+  lookupStore,
+  resolveLookupHint: props.resolveLookupHint
+    ? ({ entityTypeCode, fieldKey, lookup }) => props.resolveLookupHint?.({ entityTypeCode, fieldKey, lookup }) ?? null
+    : undefined,
+})
+
+const preferFullPage = computed(() => shouldOpenDocumentInFullPageByDefault(metadata.value))
+const resolvedTitle = computed(() => {
+  if (!metadata.value) return `Documents: ${documentType.value}`
+  return props.resolveTitle?.(documentType.value, metadata.value.displayName) ?? metadata.value.displayName
+})
+const resolvedStorageKey = computed(() =>
+  String(props.resolveStorageKey?.(documentType.value) ?? '').trim() || `ngb:document:${documentType.value}`,
+)
+const resolvedWarning = computed(() => props.resolveWarning?.(documentType.value, metadata.value) ?? null)
+const createDisabled = computed(() => metadata.value?.capabilities?.canCreate === false
+  || (props.isCreateDisabled?.(documentType.value, metadata.value) ?? false),
+)
+
+const {
+  filterDraft,
+  lookupItemsByFilterKey,
+  activeFilterBadges,
+  hasActiveFilters,
+  canUndoFilters,
+  handleLookupQuery,
+  handleItemsUpdate,
+  handleValueUpdate,
+  undo,
+} = useMetadataListFilters({
+  route,
+  router,
+  entityTypeCode: documentType,
+  filters: listFilters,
+  lookupStore,
+  resolveLookupHint: ({ entityTypeCode, field }) =>
+    props.resolveLookupHint?.({
+      entityTypeCode,
+      fieldKey: field.key,
+      lookup: field.lookup,
+    }) ?? null,
+})
+
+const {
+  isPanelOpen,
+  currentEditorId,
+  initialFields,
+  initialParts,
+  expandTo,
+  openCreateDrawer,
+  openEditDrawer,
+  reopenCreatedDocument,
+  closeDrawer,
+} = useDocumentEditorDrawerState({
+  route,
+  router,
+  documentType,
+})
+
+const editorRef = ref<EntityEditorHandle | null>(null)
+const {
+  editorFlags,
+  discardOpen,
+  requestDiscard,
+  handleEditorFlags,
+  discardConfirm,
+  discardCancel,
+  beforeCloseDrawer,
+} = useEditorDrawerState()
+
+async function requestDrawerReplacement(): Promise<boolean> {
+  if (!isPanelOpen.value || !editorFlags.value.isDirty) return true
+  return await requestDiscard()
+}
+
+async function openCreateDefault() {
+  if (preferFullPage.value) {
+    await router.push(
+      withBackTarget(
+        buildDocumentFullPageUrl(documentType.value),
+        currentRouteBackTarget(route),
+      ),
+    )
+    return
+  }
+
+  if (isPanelOpen.value && !currentEditorId.value) return
+  if (!await requestDrawerReplacement()) return
+  openCreateDrawer()
+}
+
+async function openEdit(id: string) {
+  if (preferFullPage.value) {
+    void router.push(
+      withBackTarget(
+        buildDocumentFullPageUrl(documentType.value, id),
+        currentRouteBackTarget(route),
+      ),
+    )
+    return
+  }
+
+  if (currentEditorId.value === id) return
+  if (!await requestDrawerReplacement()) return
+  openEditDrawer(id)
+}
+
+const {
+  handleCreated,
+  handleSaved,
+  handleChanged,
+  handleDeleted,
+} = useEntityEditorCommitHandlers({
+  reload: load,
+  closeDrawer,
+  closeOnCreated: false,
+  closeOnSaved: false,
+  closeOnChanged: ({ reason }) => reason === 'markForDeletion' || reason === 'unmarkForDeletion',
+  onCreated: async ({ id }) => {
+    reopenCreatedDocument(id)
+  },
+})
+
+watch(
+  () => documentType.value,
+  () => {
+    filterDrawerOpen.value = false
+  },
+)
+
+async function createNew() {
+  const handled = await props.handleCreateOverride?.({
+    documentType: documentType.value,
+    metadata: metadata.value,
+    preferFullPage: preferFullPage.value,
+    route,
+    router,
+    openCreateDrawer,
+    openFullPage: async () => {
+      await router.push(
+        withBackTarget(
+          buildDocumentFullPageUrl(documentType.value),
+          currentRouteBackTarget(route),
+        ),
+      )
+    },
+  })
+
+  if (handled) return
+  await openCreateDefault()
+}
+</script>
+
+<template>
+  <NgbRegisterPageLayout
+    :title="resolvedTitle"
+    :can-back="canBack"
+    :items-count="page ? page.items.length : null"
+    :total="page?.total ?? null"
+    :loading="loading"
+    :error="error"
+    :warning="resolvedWarning"
+    :disable-create="createDisabled"
+    :disable-filter="!hasListFilters"
+    :filter-active="hasActiveFilters"
+    :disable-prev="offset === 0"
+    :disable-next="(page?.items?.length ?? 0) < limit"
+    :columns="columns"
+    :rows="rows"
+    :storage-key="resolvedStorageKey"
+    :drawer-open="isPanelOpen"
+    drawer-title=""
+    drawer-hide-header
+    drawer-flush-body
+    :before-close="beforeCloseDrawer"
+    @back="navigateBack(router, route, resolvedBackTarget)"
+    @refresh="load"
+    @create="() => void createNew()"
+    @filter="filterDrawerOpen = true"
+    @prev="prevPage"
+    @next="nextPage"
+    @rowActivate="openEdit"
+    @update:drawerOpen="(value) => (!value ? closeDrawer() : null)"
+  >
+    <template #filters>
+      <NgbDocumentPeriodFilter
+        :from-month="periodFromMonth"
+        :to-month="periodToMonth"
+        :disabled="loading"
+        @update:from-month="periodFromMonth = $event"
+        @update:to-month="periodToMonth = $event"
+      />
+      <NgbRecycleBinFilter v-model="trashMode" :disabled="loading" />
+    </template>
+
+    <template #beforeGrid>
+      <div v-if="activeFilterBadges.length > 0" class="mb-4 flex flex-wrap items-center gap-2">
+        <NgbBadge v-for="badge in activeFilterBadges" :key="badge.key" tone="neutral">
+          {{ badge.text }}
+        </NgbBadge>
+      </div>
+    </template>
+
+    <template #filterDrawer>
+      <NgbDocumentListFiltersDrawer
+        :open="filterDrawerOpen"
+        :filters="listFilters"
+        :values="filterDraft"
+        :lookup-items-by-key="lookupItemsByFilterKey"
+        :can-undo="canUndoFilters"
+        :disabled="loading"
+        @update:open="filterDrawerOpen = $event"
+        @lookup-query="handleLookupQuery"
+        @update:items="handleItemsUpdate"
+        @update:value="handleValueUpdate"
+        @undo="undo"
+      />
+    </template>
+
+    <template #drawerContent>
+      <component
+        :is="editorComponent"
+        ref="editorRef"
+        v-if="isPanelOpen"
+        kind="document"
+        :type-code="documentType"
+        :id="currentEditorId"
+        mode="drawer"
+        :initial-fields="initialFields"
+        :initial-parts="initialParts"
+        :expand-to="expandTo"
+        :navigate-on-create="false"
+        @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/NgbMetadataFieldRenderer.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import NgbCheckbox from '../primitives/NgbCheckbox.vue'
+import NgbDatePicker from '../primitives/NgbDatePicker.vue'
+import NgbInput from '../primitives/NgbInput.vue'
+import NgbSelect from '../primitives/NgbSelect.vue'
+import { dataTypeKind } from './dataTypes'
+import { isReferenceValue } from './entityModel'
+import { resolveFieldRendererState } from './fieldRendererState'
+import type { EntityFormModel, FieldMetadata, MetadataFormBehavior } from './types'
+import NgbMetadataLookupControl from './NgbMetadataLookupControl.vue'
+
+const props = defineProps<{
+  field: FieldMetadata
+  model: EntityFormModel
+  modelValue: unknown
+  entityTypeCode: string
+  readonly?: boolean
+  disabled?: boolean
+  behavior?: MetadataFormBehavior
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: unknown): void
+}>()
+
+const rendererState = computed(() => resolveFieldRendererState({
+  entityTypeCode: props.entityTypeCode,
+  model: props.model,
+  field: props.field,
+  modelValue: props.modelValue,
+  behavior: props.behavior,
+}))
+
+function update(value: unknown) {
+  emit('update:modelValue', value)
+}
+
+const hasRef = computed(() => isReferenceValue(props.modelValue))
+const refDisplay = computed(() => (isReferenceValue(props.modelValue) ? props.modelValue.display : null))
+
+function normalizeSelectValue(value: unknown): unknown {
+  if (dataTypeKind(props.field.dataType) !== 'Int32') return value
+  if (typeof value === 'number') return Math.trunc(value)
+  if (typeof value !== 'string') return value
+
+  const parsed = Number.parseInt(value, 10)
+  return Number.isFinite(parsed) ? parsed : value
+}
+
+const selectOptions = computed(() =>
+  (rendererState.value.fieldOptions ?? []).map((option) => ({
+    ...option,
+    value: normalizeSelectValue(option.value),
+  })),
+)
+
+const selectValue = computed(() => normalizeSelectValue(props.modelValue))
+</script>
+
+<template>
+  <div class="w-full">
+    <NgbSelect
+      v-if="rendererState.mode === 'select' && rendererState.fieldOptions"
+      :model-value="selectValue ?? null"
+      :options="selectOptions"
+      :disabled="disabled || readonly"
+      @update:modelValue="update"
+    />
+
+    <NgbMetadataLookupControl
+      v-else-if="rendererState.mode === 'lookup' && rendererState.hint"
+      :hint="rendererState.hint"
+      :model-value="modelValue"
+      :disabled="disabled"
+      :readonly="readonly"
+      :behavior="behavior"
+      @update:modelValue="update"
+    />
+
+    <NgbCheckbox
+      v-else-if="rendererState.mode === 'checkbox'"
+      :model-value="!!modelValue"
+      :disabled="disabled || readonly"
+      @update:modelValue="update"
+    />
+
+    <textarea
+      v-else-if="rendererState.mode === 'textarea'"
+      class="min-h-[96px] w-full rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card px-3 py-2 text-sm text-ngb-text placeholder:text-ngb-muted/70 ngb-focus"
+      :value="modelValue ?? ''"
+      :readonly="readonly"
+      :disabled="disabled"
+      @input="update(($event.target as HTMLTextAreaElement).value)"
+    />
+
+    <NgbInput
+      v-else-if="rendererState.mode === 'reference-display' && hasRef"
+      type="text"
+      :model-value="refDisplay ?? ''"
+      :title="refDisplay ?? ''"
+      :disabled="true"
+      :readonly="true"
+    />
+
+    <NgbDatePicker
+      v-else-if="rendererState.mode === 'date'"
+      :model-value="(modelValue as string | null | undefined) ?? null"
+      :disabled="disabled || readonly"
+      @update:modelValue="update"
+    />
+
+    <NgbInput
+      v-else
+      :type="rendererState.inputType"
+      :model-value="modelValue ?? ''"
+      :disabled="disabled"
+      :readonly="readonly"
+      @update:modelValue="update"
+    />
+
+    <div v-if="field.helpText" class="mt-1 text-xs text-ngb-muted">{{ field.helpText }}</div>
+  </div>
+</template>

package/src/ngb/metadata/NgbMetadataLookupControl.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import NgbLookup from '../primitives/NgbLookup.vue'
+import { resolveNgbMetadataFormBehavior } from './config'
+import { isReferenceValue, tryExtractReferenceId } from './entityModel'
+import type { LookupHint, LookupItem, MetadataFormBehavior } from './types'
+
+const props = defineProps<{
+  hint: LookupHint
+  modelValue: unknown
+  readonly?: boolean
+  disabled?: boolean
+  behavior?: MetadataFormBehavior
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: unknown): void
+}>()
+
+const router = useRouter()
+const route = useRoute()
+
+const behavior = computed(() => resolveNgbMetadataFormBehavior(props.behavior))
+const lookupItems = ref<LookupItem[]>([])
+const lookupValueId = computed(() => tryExtractReferenceId(props.modelValue))
+const canOpenLookup = computed(() => !!lookupValueId.value && !!behavior.value.buildLookupTargetUrl)
+
+const selectedItem = computed((): LookupItem | null => {
+  const value = props.modelValue
+  if (!value) return null
+
+  if (isReferenceValue(value)) {
+    return { id: value.id, label: value.display }
+  }
+
+  const id = tryExtractReferenceId(value)
+  return id ? { id, label: id } : null
+})
+
+const canClearLookup = computed(() => !props.readonly && !props.disabled && !!selectedItem.value)
+
+async function onLookupQuery(queryText: string) {
+  const query = queryText.trim()
+  if (!query || !behavior.value.searchLookup) {
+    lookupItems.value = []
+    return
+  }
+
+  lookupItems.value = await behavior.value.searchLookup({
+    hint: props.hint,
+    query,
+  })
+}
+
+function onLookupSelect(value: LookupItem | null) {
+  if (!value) {
+    emit('update:modelValue', null)
+    return
+  }
+
+  emit('update:modelValue', { id: value.id, display: value.label })
+}
+
+async function openLookupValue() {
+  if (!behavior.value.buildLookupTargetUrl) return
+
+  const target = await behavior.value.buildLookupTargetUrl({
+    hint: props.hint,
+    value: lookupValueId.value,
+    routeFullPath: route.fullPath,
+  })
+
+  if (!target) return
+  await router.push(target)
+}
+</script>
+
+<template>
+  <NgbLookup
+    :model-value="selectedItem"
+    :items="lookupItems"
+    :disabled="disabled"
+    :readonly="readonly"
+    :show-open="canOpenLookup"
+    :show-clear="canClearLookup"
+    placeholder="Type to search…"
+    @update:modelValue="onLookupSelect"
+    @query="onLookupQuery"
+    @open="void openLookupValue()"
+  />
+</template>

package/src/ngb/metadata/NgbRecycleBinFilter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { QueryTrashMode } from '../router/queryParams'
+
+type RecycleBinMode = QueryTrashMode
+
+const props = defineProps<{
+  modelValue: RecycleBinMode
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: RecycleBinMode): void
+}>()
+
+type Option = { key: RecycleBinMode; label: string }
+const options: Option[] = [
+  { key: 'active', label: 'Active' },
+  { key: 'deleted', label: 'Deleted' },
+  { key: 'all', label: 'All' },
+]
+
+function pick(v: RecycleBinMode) {
+  if (props.disabled) return
+  if (v === props.modelValue) return
+  emit('update:modelValue', v)
+}
+
+function btnClass(v: RecycleBinMode) {
+  const isActive = v === props.modelValue
+  return [
+    'px-2.5 py-1 text-xs font-medium ngb-focus',
+    isActive
+      ? 'bg-[var(--ngb-row-selected)] text-ngb-text'
+      : 'text-ngb-muted hover:bg-[var(--ngb-row-hover)]',
+    props.disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
+  ].join(' ')
+}
+</script>
+
+<template>
+  <div class="inline-flex items-center overflow-hidden rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card">
+    <button
+      v-for="opt in options"
+      :key="opt.key"
+      type="button"
+      :class="btnClass(opt.key)"
+      :disabled="!!disabled"
+      @click="pick(opt.key)"
+    >
+      {{ opt.label }}
+    </button>
+  </div>
+</template>