@ngbplatform/ui 1.3.0

package/src/ngb/editor/useEntityEditorHeaderActions.ts

@@ -0,0 +1,253 @@
+import { computed, type ComputedRef } from 'vue';
+
+import type {
+  DocumentHeaderActionGroup,
+  DocumentHeaderActionItem,
+  DocumentHeaderActionKey,
+  EditorKind,
+  EditorMode,
+} from './types';
+
+type ActionHandler = () => void | Promise<void>;
+
+type UseEntityEditorHeaderActionsArgs = {
+  kind: ComputedRef<EditorKind>;
+  mode: ComputedRef<EditorMode>;
+  compactTo: ComputedRef<string | null>;
+  expandTo: ComputedRef<string | null>;
+  currentId: ComputedRef<string | null>;
+  loading: ComputedRef<boolean>;
+  saving: ComputedRef<boolean>;
+  isNew: ComputedRef<boolean>;
+  isMarkedForDeletion: ComputedRef<boolean>;
+  canSave: ComputedRef<boolean>;
+  canPost: ComputedRef<boolean>;
+  canUnpost: ComputedRef<boolean>;
+  canMarkForDeletion: ComputedRef<boolean>;
+  canUnmarkForDeletion: ComputedRef<boolean>;
+  canOpenEffectsPage: ComputedRef<boolean>;
+  canOpenDocumentFlowPage: ComputedRef<boolean>;
+  canPrintDocument: ComputedRef<boolean>;
+  canOpenAudit: ComputedRef<boolean>;
+  canShareLink: ComputedRef<boolean>;
+  onOpenCompactPage: ActionHandler;
+  onOpenFullPage: ActionHandler;
+  onCopyDocument: ActionHandler;
+  onPrintDocument: ActionHandler;
+  onToggleMarkForDeletion: ActionHandler;
+  onSave: ActionHandler;
+  onTogglePost: ActionHandler;
+  onOpenEffectsPage: ActionHandler;
+  onOpenDocumentFlowPage: ActionHandler;
+  onOpenAuditLog: ActionHandler;
+  onCopyShareLink: ActionHandler;
+  extraPrimaryActions?: ComputedRef<DocumentHeaderActionItem[]>;
+  extraMoreActionGroups?: ComputedRef<DocumentHeaderActionGroup[]>;
+  extraActionHandlers?: Record<string, ActionHandler>;
+  onUnhandledAction?: (action: string) => void | Promise<void>;
+};
+
+function runAction(handler: ActionHandler | undefined): void {
+  if (!handler) return;
+  void Promise.resolve(handler());
+}
+
+function mergeActionGroups(
+  baseGroups: DocumentHeaderActionGroup[],
+  extraGroups: DocumentHeaderActionGroup[],
+): DocumentHeaderActionGroup[] {
+  if (extraGroups.length === 0) return baseGroups;
+
+  const order = baseGroups.map((group) => group.key);
+  const merged = new Map<string, DocumentHeaderActionGroup>(
+    baseGroups.map((group) => [group.key, { ...group, items: [...group.items] }]),
+  );
+
+  for (const group of extraGroups) {
+    const existing = merged.get(group.key);
+    if (existing) {
+      existing.items.push(...group.items);
+      continue;
+    }
+
+    order.push(group.key);
+    merged.set(group.key, { ...group, items: [...group.items] });
+  }
+
+  return order.map((key) => merged.get(key)!);
+}
+
+export function useEntityEditorHeaderActions(args: UseEntityEditorHeaderActionsArgs) {
+  const documentPrimaryActions = computed<DocumentHeaderActionItem[]>(() => {
+    if (args.kind.value !== 'document') return [];
+
+    const actions: DocumentHeaderActionItem[] = [];
+
+    if (args.mode.value === 'page' && args.compactTo.value) {
+      actions.push({
+        key: 'openCompactPage',
+        title: 'Open compact page',
+        icon: 'panel-right',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    if (args.mode.value === 'drawer' && args.expandTo.value) {
+      actions.push({
+        key: 'openFullPage',
+        title: 'Open full page',
+        icon: 'open-in-new',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    if (args.canMarkForDeletion.value || args.canUnmarkForDeletion.value) {
+      actions.push({
+        key: 'toggleMarkForDeletion',
+        title: args.canUnmarkForDeletion.value ? 'Unmark for deletion' : 'Mark for deletion',
+        icon: args.canUnmarkForDeletion.value ? 'trash-restore' : 'trash',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    actions.push({
+      key: 'save',
+      title: !args.isNew.value && args.isMarkedForDeletion.value ? 'Restore to edit' : 'Save',
+      icon: 'save',
+      disabled: args.loading.value || args.saving.value || !args.canSave.value,
+    });
+
+    if (args.canPost.value || args.canUnpost.value) {
+      actions.push({
+        key: 'togglePost',
+        title: args.canUnpost.value ? 'Unpost' : 'Post',
+        icon: args.canUnpost.value ? 'undo' : 'check',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    return [...actions, ...(args.extraPrimaryActions?.value ?? [])];
+  });
+
+  const documentMoreActionGroups = computed<DocumentHeaderActionGroup[]>(() => {
+    if (args.kind.value !== 'document') return [];
+
+    const groups: DocumentHeaderActionGroup[] = [];
+    const createActions: DocumentHeaderActionItem[] = [];
+    const relatedViews: DocumentHeaderActionItem[] = [];
+    const outputActions: DocumentHeaderActionItem[] = [];
+    const historyAndShare: DocumentHeaderActionItem[] = [];
+
+    if (args.currentId.value) {
+      createActions.push({
+        key: 'copyDocument',
+        title: 'Copy',
+        icon: 'copy',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    if (createActions.length > 0) groups.push({ key: 'create', label: 'Create', items: createActions });
+
+    if (args.canOpenEffectsPage.value) {
+      relatedViews.push({
+        key: 'openEffectsPage',
+        title: 'Accounting entries / effects',
+        icon: 'effects-flow',
+        disabled: !args.canOpenEffectsPage.value,
+      });
+    }
+
+    if (args.canOpenDocumentFlowPage.value) {
+      relatedViews.push({
+        key: 'openDocumentFlowPage',
+        title: 'Document flow',
+        icon: 'document-flow',
+        disabled: !args.canOpenDocumentFlowPage.value,
+      });
+    }
+
+    if (relatedViews.length > 0) groups.push({ key: 'related-views', label: 'Related views', items: relatedViews });
+
+    if (args.canPrintDocument.value) {
+      outputActions.push({
+        key: 'printDocument',
+        title: 'Print',
+        icon: 'printer',
+        disabled: !args.canPrintDocument.value,
+      });
+    }
+
+    if (outputActions.length > 0) groups.push({ key: 'output', label: 'Output', items: outputActions });
+
+    if (args.canOpenAudit.value) {
+      historyAndShare.push({
+        key: 'openAuditLog',
+        title: 'Audit log',
+        icon: 'history',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    if (args.canShareLink.value) {
+      historyAndShare.push({
+        key: 'copyShareLink',
+        title: 'Share link',
+        icon: 'share',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    if (historyAndShare.length > 0) {
+      groups.push({ key: 'history-and-share', label: 'History & share', items: historyAndShare });
+    }
+
+    return mergeActionGroups(groups, args.extraMoreActionGroups?.value ?? []);
+  });
+
+  function handleDocumentHeaderAction(action: string) {
+    switch (action as DocumentHeaderActionKey) {
+      case 'openCompactPage':
+        runAction(args.onOpenCompactPage);
+        return;
+      case 'openFullPage':
+        runAction(args.onOpenFullPage);
+        return;
+      case 'copyDocument':
+        runAction(args.onCopyDocument);
+        return;
+      case 'printDocument':
+        runAction(args.onPrintDocument);
+        return;
+      case 'toggleMarkForDeletion':
+        runAction(args.onToggleMarkForDeletion);
+        return;
+      case 'save':
+        runAction(args.onSave);
+        return;
+      case 'togglePost':
+        runAction(args.onTogglePost);
+        return;
+      case 'openEffectsPage':
+        runAction(args.onOpenEffectsPage);
+        return;
+      case 'openDocumentFlowPage':
+        runAction(args.onOpenDocumentFlowPage);
+        return;
+      case 'openAuditLog':
+        runAction(args.onOpenAuditLog);
+        return;
+      case 'copyShareLink':
+        runAction(args.onCopyShareLink);
+        return;
+      default:
+        runAction(args.extraActionHandlers?.[action] ?? (args.onUnhandledAction ? () => args.onUnhandledAction?.(action) : undefined));
+    }
+  }
+
+  return {
+    documentPrimaryActions,
+    documentMoreActionGroups,
+    handleDocumentHeaderAction,
+  };
+}

package/src/ngb/editor/useEntityEditorLeaveGuard.ts

@@ -0,0 +1,66 @@
+import { ref, type ComputedRef, type Ref } from 'vue';
+import type { Router } from 'vue-router';
+
+const DRAWER_CLOSE_SENTINEL = '__ngb_drawer_close__';
+
+export type UseEntityEditorLeaveGuardArgs = {
+  isDirty: ComputedRef<boolean>;
+  loading: Ref<boolean>;
+  saving: Ref<boolean>;
+  router: Router;
+  onClose: () => void;
+};
+
+export function useEntityEditorLeaveGuard(args: UseEntityEditorLeaveGuardArgs) {
+  const leaveOpen = ref(false);
+  const leaveTo = ref<string | null>(null);
+
+  function requestNavigate(to: string | null | undefined) {
+    if (!to) return;
+
+    if (args.isDirty.value && !args.loading.value && !args.saving.value) {
+      leaveTo.value = to;
+      leaveOpen.value = true;
+      return;
+    }
+
+    void args.router.push(to);
+  }
+
+  function requestClose() {
+    if (args.isDirty.value && !args.loading.value && !args.saving.value) {
+      leaveTo.value = DRAWER_CLOSE_SENTINEL;
+      leaveOpen.value = true;
+      return;
+    }
+
+    args.onClose();
+  }
+
+  function confirmLeave() {
+    const target = leaveTo.value;
+    leaveTo.value = null;
+    leaveOpen.value = false;
+
+    if (!target) return;
+    if (target === DRAWER_CLOSE_SENTINEL) {
+      args.onClose();
+      return;
+    }
+
+    void args.router.push(target);
+  }
+
+  function cancelLeave() {
+    leaveTo.value = null;
+    leaveOpen.value = false;
+  }
+
+  return {
+    leaveOpen,
+    requestNavigate,
+    requestClose,
+    confirmLeave,
+    cancelLeave,
+  };
+}

package/src/ngb/editor/useEntityEditorNavigationActions.ts

@@ -0,0 +1,235 @@
+import { computed, ref, type ComputedRef, type Ref } from 'vue';
+import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
+
+import { copyAppLink } from '../router/shareLink';
+import { buildPathWithQuery, currentRouteBackTarget, withBackTarget } from '../router/backNavigation';
+import { clonePlainData } from '../utils/clone';
+import type { ToastApi } from '../primitives/toast';
+import type {
+  CatalogTypeMetadata,
+  DocumentTypeMetadata,
+  EntityFormModel,
+  RecordFields,
+  RecordPayload,
+} from '../metadata/types';
+import {
+  buildCatalogCompactPageUrl,
+} from './catalogNavigation';
+import {
+  buildDocumentCompactPageUrl,
+  buildDocumentEffectsPageUrl,
+  buildDocumentFlowPageUrl,
+  buildDocumentFullPageUrl,
+  buildDocumentPrintPageUrl,
+  buildEntityFallbackCloseTarget,
+  listFormFields,
+  resolveCompactDocumentSourceTarget,
+  shouldOpenDocumentInFullPageByDefault,
+} from './documentNavigation';
+import { saveDocumentCopyDraft } from './documentCopyDraft';
+import type { EditorKind, EditorMode } from './types';
+
+type UseEntityEditorNavigationActionsArgs = {
+  kind: ComputedRef<EditorKind>;
+  typeCode: ComputedRef<string>;
+  mode: ComputedRef<EditorMode>;
+  compactTo: ComputedRef<string | null>;
+  expandTo: ComputedRef<string | null>;
+  closeTo: ComputedRef<string | null>;
+  currentId: Ref<string | null>;
+  metadata: ComputedRef<CatalogTypeMetadata | DocumentTypeMetadata | null>;
+  docMeta: Ref<DocumentTypeMetadata | null>;
+  model: Ref<EntityFormModel>;
+  loading: Ref<boolean>;
+  saving: Ref<boolean>;
+  canOpenAudit: ComputedRef<boolean>;
+  canPrintDocument: ComputedRef<boolean>;
+  canOpenDocumentFlowPage: ComputedRef<boolean>;
+  canOpenEffectsPage: ComputedRef<boolean>;
+  requestNavigate: (to: string | null | undefined) => void;
+  requestClose: () => void;
+  router: Router;
+  route: RouteLocationNormalizedLoaded;
+  toasts: Pick<ToastApi, 'push'>;
+  buildCopyParts?: () => RecordPayload['parts'] | null;
+};
+
+export function useEntityEditorNavigationActions(args: UseEntityEditorNavigationActionsArgs) {
+  const auditOpen = ref(false);
+  const currentRouteTarget = computed(() => currentRouteBackTarget(args.route));
+
+  const fallbackCloseTarget = computed(() =>
+    buildEntityFallbackCloseTarget(args.kind.value, args.typeCode.value),
+  );
+
+  const shareLinkTarget = computed(() => {
+    if (!args.currentId.value) return null;
+
+    if (args.kind.value === 'catalog') {
+      return buildCatalogCompactPageUrl(args.typeCode.value, args.currentId.value);
+    }
+
+    if (shouldOpenDocumentInFullPageByDefault(args.docMeta.value)) {
+      return buildDocumentFullPageUrl(args.typeCode.value, args.currentId.value);
+    }
+
+    return buildDocumentCompactPageUrl(args.typeCode.value, args.currentId.value);
+  });
+
+  const drawerBackTarget = computed(() => {
+    if (args.mode.value !== 'drawer') return currentRouteTarget.value;
+
+    return buildPathWithQuery(currentRouteTarget.value, {
+      panel: args.currentId.value ? 'edit' : 'new',
+      id: args.currentId.value,
+    });
+  });
+
+  const relatedViewBackTarget = computed(() => {
+    if (args.kind.value !== 'document') {
+      return args.mode.value === 'drawer' ? drawerBackTarget.value : currentRouteTarget.value;
+    }
+
+    if (args.mode.value !== 'page') {
+      return drawerBackTarget.value;
+    }
+
+    return resolveCompactDocumentSourceTarget(args.route, args.compactTo.value)
+      ?? currentRouteTarget.value;
+  });
+
+  async function copyShareLink() {
+    const target = shareLinkTarget.value;
+    if (!target) return;
+    await copyAppLink(args.router, args.toasts, target);
+  }
+
+  function buildDocumentCopyFields(): RecordFields {
+    const result: RecordFields = {};
+    const formFields = args.metadata.value?.form
+      ? listFormFields(args.metadata.value.form).filter((field) => !field?.isReadOnly)
+      : Object.keys(args.model.value).map((key) => ({ key, isReadOnly: false }));
+
+    for (const field of formFields) {
+      const key = String(field?.key ?? '').trim();
+      if (!key || key === 'display' || key === 'number') continue;
+      if (!(key in args.model.value)) continue;
+      result[key] = clonePlainData(args.model.value[key]) as RecordFields[string];
+    }
+
+    return result;
+  }
+
+  function buildDocumentCopyTarget(token: string): string {
+    if (args.mode.value === 'drawer') {
+      return `${buildDocumentCompactPageUrl(args.typeCode.value)}&copyDraft=${encodeURIComponent(token)}`;
+    }
+
+    return `${buildDocumentFullPageUrl(args.typeCode.value)}?copyDraft=${encodeURIComponent(token)}`;
+  }
+
+  function copyDocument() {
+    if (args.kind.value !== 'document') return;
+    if (!args.currentId.value || args.loading.value || args.saving.value) return;
+
+    const token = saveDocumentCopyDraft({
+      documentType: args.typeCode.value,
+      fields: buildDocumentCopyFields(),
+      parts: args.buildCopyParts?.() ?? null,
+    });
+
+    if (!token) {
+      args.toasts.push({
+        title: 'Could not copy',
+        message: 'The document copy could not be prepared.',
+        tone: 'danger',
+      });
+      return;
+    }
+
+    args.requestNavigate(buildDocumentCopyTarget(token));
+  }
+
+  function openDocumentPrintPage() {
+    if (!args.canPrintDocument.value || !args.currentId.value) return;
+
+    const target = withBackTarget(
+      buildDocumentPrintPageUrl(args.typeCode.value, args.currentId.value, { autoPrint: true }),
+      relatedViewBackTarget.value,
+    );
+
+    args.requestNavigate(target);
+  }
+
+  function openAuditLog() {
+    if (!args.canOpenAudit.value) return;
+    auditOpen.value = true;
+  }
+
+  function closeAuditLog() {
+    auditOpen.value = false;
+  }
+
+  function openDocumentEffectsPage() {
+    if (!args.canOpenEffectsPage.value || !args.currentId.value) return;
+    void args.router.push(
+      withBackTarget(
+        buildDocumentEffectsPageUrl(args.typeCode.value, args.currentId.value),
+        relatedViewBackTarget.value,
+      ),
+    );
+  }
+
+  function openDocumentFlowPage() {
+    if (!args.canOpenDocumentFlowPage.value || !args.currentId.value) return;
+    void args.router.push(
+      withBackTarget(
+        buildDocumentFlowPageUrl(args.typeCode.value, args.currentId.value),
+        relatedViewBackTarget.value,
+      ),
+    );
+  }
+
+  function openFullPage() {
+    const target = args.expandTo.value;
+    if (!target) {
+      args.requestNavigate(target);
+      return;
+    }
+
+    if (args.mode.value === 'drawer') {
+      args.requestNavigate(withBackTarget(target, drawerBackTarget.value));
+      return;
+    }
+
+    args.requestNavigate(target);
+  }
+
+  function openCompactPage() {
+    args.requestNavigate(args.compactTo.value);
+  }
+
+  function closePage() {
+    if (args.mode.value === 'drawer') {
+      args.requestClose();
+      return;
+    }
+
+    args.requestNavigate(args.closeTo.value ?? fallbackCloseTarget.value);
+  }
+
+  return {
+    auditOpen,
+    fallbackCloseTarget,
+    copyShareLink,
+    copyDocument,
+    openDocumentPrintPage,
+    openAuditLog,
+    closeAuditLog,
+    openDocumentEffectsPage,
+    openDocumentFlowPage,
+    openFullPage,
+    openCompactPage,
+    closePage,
+  };
+}

package/src/ngb/editor/useEntityEditorOutputs.ts

@@ -0,0 +1,59 @@
+import { computed, watch, type ComputedRef } from 'vue';
+
+import type { EntityEditorFlags } from './types';
+
+type UseEntityEditorOutputsArgs = {
+  emit: {
+    (event: 'state', value: { title: string; subtitle?: string }): void;
+    (event: 'flags', value: EntityEditorFlags): void;
+  };
+  title: ComputedRef<string>;
+  subtitle: ComputedRef<string | undefined>;
+  isDirty: ComputedRef<boolean>;
+  loading: ComputedRef<boolean>;
+  saving: ComputedRef<boolean>;
+  canExpand: ComputedRef<boolean>;
+  canDelete: ComputedRef<boolean>;
+  canMarkForDeletion: ComputedRef<boolean>;
+  canUnmarkForDeletion: ComputedRef<boolean>;
+  canPost: ComputedRef<boolean>;
+  canUnpost: ComputedRef<boolean>;
+  canOpenAudit: ComputedRef<boolean>;
+  canShareLink: ComputedRef<boolean>;
+  canSave: ComputedRef<boolean>;
+  extraFlags?: ComputedRef<Record<string, boolean | undefined> | null | undefined>;
+};
+
+export function useEntityEditorOutputs(args: UseEntityEditorOutputsArgs) {
+  const flags = computed<EntityEditorFlags>(() => ({
+    canSave: !!args.canSave.value,
+    isDirty: !!args.isDirty.value,
+    loading: !!args.loading.value,
+    saving: !!args.saving.value,
+    canExpand: !!args.canExpand.value,
+    canDelete: !!args.canDelete.value,
+    canMarkForDeletion: !!args.canMarkForDeletion.value,
+    canUnmarkForDeletion: !!args.canUnmarkForDeletion.value,
+    canPost: !!args.canPost.value,
+    canUnpost: !!args.canUnpost.value,
+    canShowAudit: !!args.canOpenAudit.value,
+    canShareLink: !!args.canShareLink.value,
+    extras: args.extraFlags?.value ? { ...args.extraFlags.value } : undefined,
+  }));
+
+  watch(
+    () => [args.title.value, args.subtitle.value] as const,
+    () => args.emit('state', { title: args.title.value, subtitle: args.subtitle.value }),
+    { immediate: true },
+  );
+
+  watch(
+    flags,
+    (value) => args.emit('flags', value),
+    { immediate: true },
+  );
+
+  return {
+    flags,
+  };
+}

package/src/ngb/editor/useEntityEditorPageActions.ts

@@ -0,0 +1,57 @@
+import { computed } from 'vue';
+
+import type { EntityHeaderIconAction } from './types';
+import type { UseEntityEditorPageActionsArgs } from './extensions';
+
+export function useEntityEditorPageActions(args: UseEntityEditorPageActionsArgs) {
+  return computed<EntityHeaderIconAction[]>(() => {
+    if (args.kind.value === 'document' || args.mode.value !== 'page') return [];
+
+    const actions: EntityHeaderIconAction[] = [];
+
+    if (args.compactTo.value) {
+      actions.push({
+        key: 'openCompactPage',
+        title: 'Open compact page',
+        icon: 'panel-right',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    if (args.canShareLink.value) {
+      actions.push({
+        key: 'copyShareLink',
+        title: 'Share link',
+        icon: 'share',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    if (args.canOpenAudit.value) {
+      actions.push({
+        key: 'openAuditLog',
+        title: 'Audit log',
+        icon: 'history',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    if (args.canMarkForDeletion.value || args.canUnmarkForDeletion.value) {
+      actions.push({
+        key: 'toggleMarkForDeletion',
+        title: args.canUnmarkForDeletion.value ? 'Unmark for deletion' : 'Mark for deletion',
+        icon: args.canUnmarkForDeletion.value ? 'trash-restore' : 'trash',
+        disabled: args.loading.value || args.saving.value,
+      });
+    }
+
+    actions.push({
+      key: 'save',
+      title: !args.isNew.value && args.isMarkedForDeletion.value ? 'Restore to edit' : 'Save',
+      icon: 'save',
+      disabled: args.loading.value || args.saving.value || !args.canSave.value,
+    });
+
+    return [...actions, ...(args.extraActions?.value ?? [])];
+  });
+}