@ngbplatform/ui 1.3.0

package/src/ngb/lookup/store.ts

@@ -0,0 +1,261 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { LookupItem } from '../metadata/types'
+import { isNonEmptyGuid, shortGuid } from '../utils/guid'
+import {
+  getConfiguredNgbLookup,
+  type LookupSearchOptions,
+  type LookupFrameworkConfig,
+  type ResolvedDocumentLookupItem,
+} from './config'
+
+export type UiLookupItem = LookupItem
+
+function normalizeDocumentTypes(documentTypes: string[]): string[] {
+  return Array.from(new Set(documentTypes.map((entry) => String(entry ?? '').trim()).filter((entry) => entry.length > 0)))
+}
+
+async function loadCoaItems(config: LookupFrameworkConfig, ids: string[]): Promise<LookupItem[]> {
+  if (ids.length === 0) return []
+  return await config.loadCoaItemsByIds(ids)
+}
+
+async function loadResolvedDocumentItems(
+  config: LookupFrameworkConfig,
+  documentTypes: string[],
+  ids: string[],
+): Promise<ResolvedDocumentLookupItem[]> {
+  if (documentTypes.length === 0 || ids.length === 0) return []
+  return await config.loadDocumentItemsByIds(documentTypes, ids)
+}
+
+async function searchResolvedDocumentItems(
+  config: LookupFrameworkConfig,
+  documentTypes: string[],
+  query: string,
+): Promise<ResolvedDocumentLookupItem[]> {
+  if (documentTypes.length === 0) return []
+  return await config.searchDocumentsAcrossTypes(documentTypes, query)
+}
+
+export const useLookupStore = defineStore('lookup', () => {
+  const catalogLabels = ref<Record<string, Record<string, string>>>({})
+  const coaLabels = ref<Record<string, string>>({})
+  const documentLabels = ref<Record<string, Record<string, string>>>({})
+
+  function mergeCatalogItems(catalogType: string, items: readonly LookupItem[]) {
+    const existing = catalogLabels.value[catalogType] ?? {}
+    const next = { ...existing }
+
+    for (const item of items) {
+      const id = String(item.id ?? '').trim()
+      const label = String(item.label ?? '').trim()
+      if (!id || !label) continue
+      next[id] = label
+    }
+
+    catalogLabels.value = { ...catalogLabels.value, [catalogType]: next }
+  }
+
+  function mergeDocumentItems(documentType: string, items: readonly LookupItem[]) {
+    const existing = documentLabels.value[documentType] ?? {}
+    const next = { ...existing }
+
+    for (const item of items) {
+      const id = String(item.id ?? '').trim()
+      const label = String(item.label ?? '').trim()
+      if (!id || !label) continue
+      next[id] = label
+    }
+
+    documentLabels.value = { ...documentLabels.value, [documentType]: next }
+  }
+
+  function mergeResolvedDocumentItems(items: readonly ResolvedDocumentLookupItem[]) {
+    for (const item of items) {
+      mergeDocumentItems(item.documentType, [item])
+    }
+  }
+
+  async function ensureCatalogLabels(catalogType: string, ids: string[]) {
+    const uniq = Array.from(new Set(ids.filter(isNonEmptyGuid)))
+    if (uniq.length === 0) return
+
+    const existing = catalogLabels.value[catalogType] ?? {}
+    const missing = uniq.filter((id) => !existing[id])
+    if (missing.length === 0) return
+
+    const config = getConfiguredNgbLookup()
+    const items = await config.loadCatalogItemsByIds(catalogType, missing)
+    mergeCatalogItems(catalogType, items)
+  }
+
+  function labelForCatalog(catalogType: string, id: unknown): string {
+    if (!isNonEmptyGuid(id)) return String(id ?? '—')
+    return catalogLabels.value[catalogType]?.[id] ?? shortGuid(id)
+  }
+
+  async function searchCatalog(
+    catalogType: string,
+    query: string,
+    options?: LookupSearchOptions,
+  ): Promise<UiLookupItem[]> {
+    const config = getConfiguredNgbLookup()
+    const items = await config.searchCatalog(catalogType, query, options)
+    mergeCatalogItems(catalogType, items)
+    return items.map((item) => ({ ...item }))
+  }
+
+  async function ensureCoaLabels(ids: string[]) {
+    const uniq = Array.from(new Set(ids.filter(isNonEmptyGuid)))
+    if (uniq.length === 0) return
+
+    const missing = uniq.filter((id) => !coaLabels.value[id])
+    if (missing.length === 0) return
+
+    const config = getConfiguredNgbLookup()
+    const items = await loadCoaItems(config, missing).catch(() => [])
+    const next = { ...coaLabels.value }
+
+    for (const item of items) {
+      const id = String(item.id ?? '').trim()
+      const label = String(item.label ?? '').trim()
+      if (!id || !label) continue
+      next[id] = label
+    }
+
+    for (const id of missing) {
+      if (!next[id]) {
+        next[id] = shortGuid(id)
+      }
+    }
+
+    coaLabels.value = next
+  }
+
+  function labelForCoa(id: unknown): string {
+    if (!isNonEmptyGuid(id)) return String(id ?? '—')
+    return coaLabels.value[id] ?? shortGuid(id)
+  }
+
+  async function searchCoa(query: string): Promise<UiLookupItem[]> {
+    const config = getConfiguredNgbLookup()
+    const items = await config.searchCoa(query)
+    const next = { ...coaLabels.value }
+
+    for (const item of items) {
+      const id = String(item.id ?? '').trim()
+      const label = String(item.label ?? '').trim()
+      if (!id || !label) continue
+      next[id] = label
+    }
+
+    coaLabels.value = next
+    return items.map((item) => ({ ...item }))
+  }
+
+  async function ensureAnyDocumentLabels(documentTypes: string[], ids: string[]) {
+    const types = normalizeDocumentTypes(documentTypes)
+    const uniq = Array.from(new Set(ids.filter(isNonEmptyGuid)))
+    if (types.length === 0 || uniq.length === 0) return
+
+    const missing = uniq.filter((id) => !types.some((documentType) => !!documentLabels.value[documentType]?.[id]))
+    if (missing.length === 0) return
+
+    const config = getConfiguredNgbLookup()
+    const items = await loadResolvedDocumentItems(config, types, missing).catch(() => [])
+    mergeResolvedDocumentItems(items)
+
+    const resolvedIds = new Set(items.map((item) => item.id))
+    const fallbackType = types[0]!
+
+    for (const id of missing) {
+      if (!resolvedIds.has(id)) {
+        mergeDocumentItems(fallbackType, [{ id, label: shortGuid(id) }])
+      }
+    }
+  }
+
+  async function ensureDocumentLabels(documentType: string, ids: string[]) {
+    const uniq = Array.from(new Set(ids.filter(isNonEmptyGuid)))
+    if (uniq.length === 0) return
+
+    const existing = documentLabels.value[documentType] ?? {}
+    const missing = uniq.filter((id) => !existing[id])
+    if (missing.length === 0) return
+
+    const config = getConfiguredNgbLookup()
+    const items = await loadResolvedDocumentItems(config, [documentType], missing).catch(() => [])
+    mergeResolvedDocumentItems(items)
+
+    const resolvedIds = new Set(items.map((item) => item.id))
+    for (const id of missing) {
+      if (!resolvedIds.has(id)) {
+        mergeDocumentItems(documentType, [{ id, label: shortGuid(id) }])
+      }
+    }
+  }
+
+  function labelForAnyDocument(documentTypes: string[], id: unknown): string {
+    if (!isNonEmptyGuid(id)) return String(id ?? '—')
+
+    for (const documentType of documentTypes) {
+      const label = documentLabels.value[documentType]?.[id]
+      if (label) return label
+    }
+
+    return shortGuid(id)
+  }
+
+  function labelForDocument(documentType: string, id: unknown): string {
+    if (!isNonEmptyGuid(id)) return String(id ?? '—')
+    return documentLabels.value[documentType]?.[id] ?? shortGuid(id)
+  }
+
+  async function searchDocuments(documentTypes: string[], query: string): Promise<UiLookupItem[]> {
+    const types = normalizeDocumentTypes(documentTypes)
+    if (types.length === 0) return []
+
+    const config = getConfiguredNgbLookup()
+    const items = await searchResolvedDocumentItems(config, types, query)
+    mergeResolvedDocumentItems(items)
+
+    const seen = new Set<string>()
+    const merged: UiLookupItem[] = []
+
+    for (const item of items) {
+      const id = String(item.id ?? '').trim()
+      if (!id || seen.has(id)) continue
+      seen.add(id)
+      merged.push({
+        id: item.id,
+        label: item.label,
+        meta: item.meta,
+      })
+    }
+
+    return merged
+  }
+
+  async function searchDocument(documentType: string, query: string): Promise<UiLookupItem[]> {
+    const config = getConfiguredNgbLookup()
+    const items = await config.searchDocument(documentType, query)
+    mergeDocumentItems(documentType, items)
+    return items.map((item) => ({ ...item }))
+  }
+
+  return {
+    ensureCatalogLabels,
+    searchCatalog,
+    labelForCatalog,
+    ensureCoaLabels,
+    searchCoa,
+    labelForCoa,
+    ensureAnyDocumentLabels,
+    ensureDocumentLabels,
+    searchDocuments,
+    searchDocument,
+    labelForAnyDocument,
+    labelForDocument,
+  }
+})

package/src/ngb/metadata/NgbDocumentListFiltersDrawer.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import NgbDrawer from '../components/NgbDrawer.vue'
+import NgbFormLayout from '../components/forms/NgbFormLayout.vue'
+import NgbFormRow from '../components/forms/NgbFormRow.vue'
+import NgbIcon from '../primitives/NgbIcon.vue'
+import type { FilterFieldState, FilterLookupItem, ListFilterField } from './types'
+import NgbFilterFieldControl from './NgbFilterFieldControl.vue'
+
+const props = defineProps<{
+  open: boolean
+  filters: ListFilterField[]
+  values: Record<string, FilterFieldState>
+  lookupItemsByKey: Record<string, FilterLookupItem[]>
+  canUndo: boolean
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'lookup-query', payload: { key: string; query: string }): void
+  (e: 'update:items', payload: { key: string; items: FilterLookupItem[] }): void
+  (e: 'update:value', payload: { key: string; value: string }): void
+  (e: 'undo'): void
+}>()
+
+function stateFor(key: string): FilterFieldState {
+  return props.values[key] ?? { raw: '', items: [] }
+}
+</script>
+
+<template>
+  <NgbDrawer
+    :open="open"
+    title="Filter"
+    subtitle="Define criteria to refine results"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #actions>
+      <button
+        type="button"
+        class="ngb-iconbtn"
+        title="Undo"
+        :disabled="disabled || !canUndo"
+        @click="emit('undo')"
+      >
+        <NgbIcon name="undo" />
+      </button>
+    </template>
+
+    <NgbFormLayout v-if="filters.length > 0">
+      <NgbFormRow
+        v-for="field in filters"
+        :key="field.key"
+        :label="field.label"
+        :hint="field.description ?? undefined"
+        dense
+      >
+        <NgbFilterFieldControl
+          :field="field"
+          :state="stateFor(field.key)"
+          :lookup-items="lookupItemsByKey[field.key] ?? []"
+          :disabled="disabled"
+          select-empty-label="Any"
+          @lookup-query="emit('lookup-query', { key: field.key, query: $event })"
+          @update:items="emit('update:items', { key: field.key, items: $event as FilterLookupItem[] })"
+          @update:raw="emit('update:value', { key: field.key, value: $event })"
+        />
+      </NgbFormRow>
+    </NgbFormLayout>
+
+    <div
+      v-else
+      class="rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-bg px-3 py-2 text-sm text-ngb-muted"
+    >
+      No filters available.
+    </div>
+  </NgbDrawer>
+</template>

package/src/ngb/metadata/NgbDocumentPeriodFilter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import NgbMonthPicker from '../primitives/NgbMonthPicker.vue'
+import { normalizeMonthValue } from '../utils/dateValues'
+
+const props = defineProps<{
+  fromMonth: string
+  toMonth: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:fromMonth', value: string): void
+  (e: 'update:toMonth', value: string): void
+}>()
+
+function updateFrom(value: string | null) {
+  emit('update:fromMonth', value ?? '')
+}
+
+function updateTo(value: string | null) {
+  emit('update:toMonth', value ?? '')
+}
+</script>
+
+<template>
+  <div class="relative inline-flex h-[26px] items-stretch rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card text-xs shadow-card">
+    <div class="w-[9rem]">
+      <NgbMonthPicker
+        :model-value="normalizeMonthValue(props.fromMonth)"
+        placeholder="Start month"
+        grouped
+        display-format="short"
+        :disabled="!!props.disabled"
+        @update:model-value="updateFrom"
+      />
+    </div>
+
+    <div class="w-px self-stretch bg-ngb-border" />
+    <div class="flex items-center px-2 text-[11px] text-ngb-muted select-none">-</div>
+    <div class="w-px self-stretch bg-ngb-border" />
+
+    <div class="w-[9rem]">
+      <NgbMonthPicker
+        :model-value="normalizeMonthValue(props.toMonth)"
+        placeholder="End month"
+        grouped
+        display-format="short"
+        :disabled="!!props.disabled"
+        @update:model-value="updateTo"
+      />
+    </div>
+  </div>
+</template>

package/src/ngb/metadata/NgbEntityForm.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import NgbFormLayout from '../components/forms/NgbFormLayout.vue'
+import NgbFormSection from '../components/forms/NgbFormSection.vue'
+import { defaultFindDisplayField } from './entityForm'
+import { resolveNgbMetadataFormBehavior } from './config'
+import { useValidationFocus } from './useValidationFocus'
+import type { EntityFormModel, FieldMetadata, FormMetadata, MetadataFormBehavior } from './types'
+import NgbEntityFormFieldsBlock from './NgbEntityFormFieldsBlock.vue'
+
+const props = defineProps<{
+  form: FormMetadata
+  model: EntityFormModel
+  entityTypeCode: string
+  status?: number
+  forceReadonly?: boolean
+  presentation?: 'sections' | 'flat'
+  errors?: Record<string, string | string[] | null> | null
+  behavior?: MetadataFormBehavior
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const behavior = computed(() => resolveNgbMetadataFormBehavior(props.behavior))
+const displayField = computed<FieldMetadata | null>(() =>
+  behavior.value.findDisplayField?.(props.form) ?? defaultFindDisplayField(props.form),
+)
+const presentation = computed(() => props.presentation ?? 'sections')
+const sections = computed(() => props.form?.sections ?? [])
+const flatRows = computed(() => sections.value.flatMap((section) => section.rows ?? []))
+const validationFocus = useValidationFocus(rootRef, { attribute: 'data-validation-key' })
+
+function scrollToField(key: string): boolean {
+  return validationFocus.scrollTo(key)
+}
+
+function focusField(key: string): boolean {
+  return validationFocus.focus(key)
+}
+
+function focusFirstError(keys: string[]): boolean {
+  for (const key of keys) {
+    if (focusField(key)) return true
+  }
+  return false
+}
+
+defineExpose({
+  scrollToField,
+  focusField,
+  focusFirstError,
+})
+</script>
+
+<template>
+  <div ref="rootRef">
+    <NgbFormLayout v-if="presentation === 'sections'">
+      <NgbFormSection v-for="(section, sectionIndex) in sections" :key="sectionIndex" :title="section.title">
+        <NgbEntityFormFieldsBlock
+          :rows="section.rows ?? []"
+          :display-field="sectionIndex === 0 ? displayField : null"
+          :model="model"
+          :entity-type-code="entityTypeCode"
+          :status="status"
+          :force-readonly="forceReadonly"
+          :errors="errors"
+          :behavior="behavior.value"
+        />
+      </NgbFormSection>
+    </NgbFormLayout>
+
+    <div v-else class="space-y-3">
+      <NgbEntityFormFieldsBlock
+        :rows="flatRows"
+        :display-field="displayField"
+        :model="model"
+        :entity-type-code="entityTypeCode"
+        :status="status"
+        :force-readonly="forceReadonly"
+        :errors="errors"
+        :behavior="behavior.value"
+      />
+    </div>
+  </div>
+</template>

package/src/ngb/metadata/NgbEntityFormFieldsBlock.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import NgbFormRow from '../components/forms/NgbFormRow.vue'
+import { defaultIsFieldHidden, defaultIsFieldReadonly } from './entityForm'
+import { resolveNgbMetadataFormBehavior } from './config'
+import type { EntityFormModel, FieldMetadata, MetadataFormBehavior } from './types'
+import NgbMetadataFieldRenderer from './NgbMetadataFieldRenderer.vue'
+
+type FormRowDescriptor = {
+  fields?: FieldMetadata[] | null
+}
+
+const props = defineProps<{
+  rows: FormRowDescriptor[]
+  model: EntityFormModel
+  entityTypeCode: string
+  status?: number
+  forceReadonly?: boolean
+  displayField?: FieldMetadata | null
+  errors?: Record<string, string | string[] | null> | null
+  behavior?: MetadataFormBehavior
+}>()
+
+const behavior = computed(() => resolveNgbMetadataFormBehavior(props.behavior))
+const isDocumentEntity = computed(() => props.status !== undefined)
+
+function isReadonlyField(field: FieldMetadata): boolean {
+  const args = {
+    entityTypeCode: props.entityTypeCode,
+    model: props.model,
+    field,
+    status: props.status,
+    forceReadonly: props.forceReadonly,
+  }
+
+  return behavior.value.isFieldReadonly?.(args) ?? defaultIsFieldReadonly(args)
+}
+
+function isHiddenField(field: FieldMetadata): boolean {
+  const args = {
+    entityTypeCode: props.entityTypeCode,
+    model: props.model,
+    field,
+    isDocumentEntity: isDocumentEntity.value,
+  }
+
+  return behavior.value.isFieldHidden?.(args) ?? defaultIsFieldHidden(args)
+}
+
+function isDisplayField(field: FieldMetadata): boolean {
+  return field.key === 'display'
+}
+
+function firstFieldError(key: string): string | undefined {
+  const value = props.errors?.[key]
+  if (Array.isArray(value)) return value.find((entry) => typeof entry === 'string' && entry.trim().length > 0)
+  if (typeof value === 'string' && value.trim().length > 0) return value
+  return undefined
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div
+      v-if="displayField && !isHiddenField(displayField)"
+      :data-validation-key="displayField.key"
+    >
+      <NgbFormRow
+        :label="displayField.label"
+        :hint="displayField.helpText || (displayField.isRequired ? 'Required' : undefined)"
+        :error="firstFieldError(displayField.key)"
+      >
+        <NgbMetadataFieldRenderer
+          :field="displayField"
+          :model="model"
+          :entity-type-code="entityTypeCode"
+          :model-value="model[displayField.key]"
+          :readonly="isReadonlyField(displayField)"
+          :behavior="behavior.value"
+          @update:modelValue="model[displayField.key] = $event"
+        />
+      </NgbFormRow>
+    </div>
+
+    <template v-for="(row, rowIndex) in rows" :key="rowIndex">
+      <template v-for="(field, fieldIndex) in row.fields ?? []" :key="`${field.key}:${fieldIndex}`">
+        <div
+          v-if="!isDisplayField(field) && !isHiddenField(field)"
+          :data-validation-key="field.key"
+        >
+          <NgbFormRow
+            :label="field.label"
+            :hint="field.helpText || (field.isRequired ? 'Required' : undefined)"
+            :error="firstFieldError(field.key)"
+          >
+            <NgbMetadataFieldRenderer
+              :field="field"
+              :model="model"
+              :entity-type-code="entityTypeCode"
+              :model-value="model[field.key]"
+              :readonly="isReadonlyField(field)"
+              :behavior="behavior.value"
+              @update:modelValue="model[field.key] = $event"
+            />
+          </NgbFormRow>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>

package/src/ngb/metadata/NgbEntityListPageHeader.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import NgbIcon from '../primitives/NgbIcon.vue'
+import NgbPageHeader from '../site/NgbPageHeader.vue'
+
+const props = withDefaults(defineProps<{
+  title: string
+  canBack?: boolean
+  itemsCount?: number | null
+  total?: number | null
+  loading?: boolean
+  disableCreate?: boolean
+  showFilter?: boolean
+  disableFilter?: boolean
+  filterActive?: boolean
+  disablePrev?: boolean
+  disableNext?: boolean
+}>(), {
+  showFilter: true,
+})
+
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'refresh'): void
+  (e: 'create'): void
+  (e: 'filter'): void
+  (e: 'prev'): void
+  (e: 'next'): void
+}>()
+
+const slots = useSlots()
+const hasFilters = computed(() => !!slots.filters)
+const showCount = computed(() => props.itemsCount !== null && props.itemsCount !== undefined)
+const subtitle = computed(() => {
+  if (!showCount.value) return undefined
+  const left = String(props.itemsCount)
+  const right = props.total != null ? ` / ${props.total}` : ''
+  return `${left}${right}`
+})
+</script>
+
+<template>
+  <NgbPageHeader :title="title" :can-back="!!canBack" @back="emit('back')">
+    <template #secondary>
+      <div v-if="subtitle" class="text-xs text-ngb-muted truncate">{{ subtitle }}</div>
+    </template>
+    <template #actions>
+      <div class="flex items-center gap-1.5">
+        <slot name="filters" />
+
+        <div v-if="hasFilters" class="w-px h-5 bg-ngb-border mx-1" />
+
+        <button class="ngb-iconbtn" title="Create" :disabled="!!disableCreate" @click="emit('create')">
+          <NgbIcon name="plus" />
+        </button>
+
+        <button
+          v-if="props.showFilter !== false"
+          :class="['ngb-iconbtn', props.filterActive ? 'bg-ngb-bg text-ngb-text' : '']"
+          title="Filter"
+          :disabled="!!disableFilter"
+          :aria-pressed="props.filterActive ? 'true' : 'false'"
+          @click="emit('filter')"
+        >
+          <NgbIcon name="filter" />
+        </button>
+
+        <button class="ngb-iconbtn" title="Refresh" :disabled="!!loading" @click="emit('refresh')">
+          <NgbIcon name="refresh" />
+        </button>
+        <button class="ngb-iconbtn" title="Previous" :disabled="!!disablePrev" @click="emit('prev')">
+          <NgbIcon name="arrow-left" />
+        </button>
+        <button class="ngb-iconbtn" title="Next" :disabled="!!disableNext" @click="emit('next')">
+          <NgbIcon name="arrow-right" />
+        </button>
+      </div>
+    </template>
+  </NgbPageHeader>
+</template>