@antelopejs/dms 0.9.8 → 0.11.0

package/frontend-vue/layers/dms-ui/app/components/form/Form.vue

@@ -8,6 +8,7 @@ import type {
 import type { FormField } from "../../composables/form/types/field";
 import {
   cloneFormValue,
+  fieldValuesOfSubmitDefaults,
   type FormServerFieldError,
   formShowsActions,
   isAcceptanceField,
@@ -18,6 +19,7 @@ import {
   type FormValidator,
 } from "../../composables/form/types/validation";
 import { FORM_FIELD_LOADING_KEY } from "../../composables/form/types/field-loading";
+import { FORM_FIELD_SAVED_KEY } from "../../composables/form/types/field-saved";
 import {
   FORM_HANDLE_KEY,
   linkedFieldId,
@@ -42,6 +44,7 @@ import {
   fieldErrorPattern,
 } from "../../build/composables/form/formEntryContext";
 import {
+  CONTAINER_LAYOUT_CLASSES,
   FORM_LAYOUT_CLASSES,
   FORM_SURFACE_CLASSES,
   type FormSurface,
@@ -58,7 +61,15 @@ import {
   sectionState,
 } from "../../build/composables/form/formSections";
 import { FORM_CONTROL_ERRORS_KEY } from "../../build/composables/form/formControlErrors";
+import {
+  changedServerErrorFields,
+  keptServerErrors,
+  serverErrorValue,
+  type KeptServerError,
+  type PlacedServerError,
+} from "../../build/composables/form/serverFieldErrors";
 import { useInstantForm } from "../../build/composables/form/useInstantForm";
+import { fieldSavedMarker } from "../../build/composables/form/fieldSaved";
 import { useInstantSaveHeader } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
 import DmsFormEntries from "../../build/components/form/FormEntries.vue";
 import DmsFormErrorSummary from "../../build/components/form/FormErrorSummary.vue";
@@ -70,6 +81,8 @@ import {
 } from "../../build/composables/form/formRecordLoad";
 import DmsFormRequiredLegend from "./FormRequiredLegend.vue";
 import DmsFormSections from "../../build/components/form/FormSections.vue";
+import { scrollWithin } from "../../build/utils/scrollWithin";
+import { isHiddenOnCreate } from "../../build/composables/form/createFormFields";
 
 const REALTIME_PRESENCE_FLAG = "_presence=1";
 const REALTIME_ACQUIRE_PATH = "/api/realtime/acquire";
@@ -97,10 +110,11 @@ const FormWrapper =
 
 const { processI18n, processApiMessage } = useTranslation();
 
-// Server errors stay on their field until its value changes (UForm only
-// re-validates a field once it was left, and its schema knows nothing of
-// them): the value each field's were raised against, by field id.
-const serverErrorValues = new Map<string, string>();
+// Server errors stay on their field until its value changes or the form is
+// saved, whatever re-validates the field in between: UForm's `validate`
+// answers them with its schema's (see `keptServerErrors`). Each one shown,
+// with the value it was raised against, by field id.
+const serverErrors = new Map<string, KeptServerError>();
 
 /** The control of a field, by its id, inside this form only. */
 function fieldControl(name: string | undefined): HTMLElement | null {
@@ -171,13 +185,14 @@ async function focusField(name: string | undefined): Promise<void> {
     target.focus();
     return;
   }
-  row?.scrollIntoView({ block: "center" });
+  if (row) scrollWithin(row, { block: "center" });
 }
 
 /** Brings a field into view and focuses it: a link's anchor, a field's request. */
 async function revealField(fieldId: string): Promise<void> {
   await formSettled();
-  fieldRow(fieldId)?.scrollIntoView({ block: "center" });
+  const row = fieldRow(fieldId);
+  if (row) scrollWithin(row, { block: "center" });
   await focusField(fieldId);
 }
 
@@ -193,14 +208,19 @@ function showFieldErrors(errors: FormServerFieldError[]): boolean {
   // instant form) replaces its own only.
   if (!isInstant) {
     target.setErrors([]);
-    serverErrorValues.clear();
+    serverErrors.clear();
   }
   for (const error of errors) placeServerError(target, error);
   const shown = errors.filter(
     (error) => target.getErrors(fieldErrorPattern(error.name)).length,
   );
   for (const error of shown) {
-    serverErrorValues.set(error.name, JSON.stringify(state.value[error.name]));
+    serverErrors.set(error.name, {
+      value: serverErrorValue(state.value[error.name]),
+      errors: target
+        .getErrors(fieldErrorPattern(error.name))
+        .map(({ name, message }: PlacedServerError) => ({ name, message })),
+    });
   }
   showsErrorSummary.value = shown.length > 0;
   void focusField(target.errors[0]?.name);
@@ -229,7 +249,9 @@ function onValidationError(event: { errors: Array<{ name?: string }> }): void {
 }
 
 // Once a submit is refused, the form lists what to fix above its fields
-// until it is saved.
+// until it is saved. The last fix empties the list, not the place it holds:
+// the fields, and the submit button with them, would move up under the
+// pointer on its way to it, and the click would land beside it.
 const showsErrorSummary = ref(false);
 
 const {
@@ -251,20 +273,33 @@ const {
   isFieldGroup,
   submitSucceeded,
   resolvedFetchUrl,
+  createsRecord,
+  effectiveSubmitDefaults,
 } = useForm(props, { showFieldErrors, onSaved: markFormClean });
 
 watch(
   state,
   (current) => {
-    for (const [name, value] of serverErrorValues) {
-      if (JSON.stringify(current[name]) === value) continue;
-      serverErrorValues.delete(name);
+    for (const name of changedServerErrorFields(serverErrors, current)) {
+      serverErrors.delete(name);
       form.value?.clear(fieldErrorPattern(name));
     }
   },
   { deep: true },
 );
 
+// UForm is busy while it validates a submit: the kept errors stay out of it.
+const validateServerErrors = (current: Record<string, unknown>) =>
+  keptServerErrors(serverErrors, current, !!form.value?.loading);
+
+/** A saved form: what the server refused before no longer stands. */
+function clearServerErrors(): void {
+  for (const name of serverErrors.keys()) {
+    form.value?.clear(fieldErrorPattern(name));
+  }
+  serverErrors.clear();
+}
+
 const allFieldIds = computed(() => toValue(allFields).map((field) => field.id));
 
 const showActions = computed(() => formShowsActions(props, toValue(allFields)));
@@ -291,6 +326,7 @@ const localizedSchema = computed(() => {
     id: field.id,
     type: field.type,
     localized: field.localized,
+    fallbackLocale: field.fallbackLocale,
     required: isFieldRequired(field),
     acceptance: isAcceptanceField(field),
   }));
@@ -335,7 +371,7 @@ watch(
       const previous = fieldValueSnapshots.get(field.id);
       fieldValueSnapshots.set(field.id, snapshot);
       if (previous === undefined || previous === snapshot) continue;
-      if (!form.value || serverErrorValues.has(field.id)) continue;
+      if (!form.value || serverErrors.has(field.id)) continue;
       const pattern = fieldErrorPattern(field.id);
       if (!form.value.getErrors(pattern).length) continue;
       void form.value.validate({ name: errorNames(field), silent: true });
@@ -346,10 +382,12 @@ watch(
 
 const { t, locale, locales } = useI18n();
 
+// A new row is created, not "changes" saved.
+const DEFAULT_SUBMIT_LABEL = createsRecord
+  ? "dms.button.create"
+  : "dms.button.save_changes";
 const submitButtonLabel = computed(() =>
-  props.submitLabel
-    ? processI18n(props.submitLabel)
-    : t("dms.button.save_changes"),
+  props.submitLabel ? processI18n(props.submitLabel) : t(DEFAULT_SUBMIT_LABEL),
 );
 
 watch(disabledFields, (newDisabled, oldDisabled) => {
@@ -413,6 +451,7 @@ onMounted(() => {
 function markFormClean(): void {
   isTouched = false;
   showsErrorSummary.value = false;
+  clearServerErrors();
   formDirty.markClean();
   instantSave?.start();
 }
@@ -441,11 +480,20 @@ const isDirty = computed(
 
 useUnsavedChanges({ dirty: isDirty, containerId, element: form });
 
-// A form offers Cancel while clean when it has somewhere to go back to: its
-// drawer or modal, or `backTo` on a page. An action form (send, invite, run)
-// saves from its footer band, never from the floating bar.
+// A form offers Cancel when it has somewhere to go back to: its drawer or
+// modal, `backTo` on a page, or the page of the app the user came from. An
+// action form (send, invite, run) saves from its footer band, never from the
+// floating bar.
 const isActionForm = props.kind === "action";
-const canCancel = inFormContainer || !!container || !!props.backTo;
+// Read once mounted: the server renders no history.
+const cameFromAppPage = ref(false);
+onMounted(() => {
+  cameFromAppPage.value = !!previousAppPage();
+});
+const canCancel = computed(
+  () =>
+    inFormContainer || !!container || !!props.backTo || cameFromAppPage.value,
+);
 const usesSaveBar = saveMode === "bar" && !inFormContainer && !isActionForm;
 
 /** Validates one field alone: whether it holds no error. */
@@ -479,19 +527,30 @@ const hasChangeableFields = computed(() =>
 const router = useDmsRouter();
 const route = useDmsRoute();
 /**
- * Cancel, with nothing to save: closes the drawer or modal, or leaves a page
- * form for the page the user came from (its list, when opened from one), or
- * its `backTo` when the form was opened directly.
+ * The page of the app this one was reached from, which the router records
+ * in the history entry: none for a page opened from a link outside the app,
+ * a bookmark or a new tab, where going back would leave the app.
+ */
+function previousAppPage(): string | undefined {
+  const back = (window.history.state as { back?: unknown } | null)?.back;
+  return typeof back === "string" ? back : undefined;
+}
+
+/**
+ * Cancel: drops what was changed, then closes the drawer or modal, or leaves
+ * a page form for the page of the app the user came from (its list, when
+ * opened from one), or its `backTo` when the form was opened directly.
+ * Discarding first means leaving never asks about changes the user just chose
+ * to drop.
  */
 function cancelForm(): void {
+  if (isDirty.value) discardChanges();
   if (container) {
     void container.close();
     return;
   }
-  const navigation = (window as { navigation?: { canGoBack?: boolean } })
-    .navigation;
-  if (navigation?.canGoBack ?? window.history.length > 1) {
-    window.history.back();
+  if (previousAppPage()) {
+    router.back();
     return;
   }
   if (props.backTo) void router.push(pageLink(props.backTo));
@@ -537,6 +596,15 @@ provide(FORM_HANDLE_KEY, {
   revealField,
 });
 provide(FORM_FIELD_LOADING_KEY, setFieldLoading);
+provide(
+  FORM_FIELD_SAVED_KEY,
+  fieldSavedMarker({
+    hasField: (id) => toValue(allFields).some((field) => field.id === id),
+    initialValues,
+    dirty: formDirty,
+    instantSave,
+  }),
+);
 provide(FORM_CONTENT_LANGUAGE_KEY, "*");
 
 allFields.value.forEach((field) => {
@@ -547,6 +615,15 @@ allFields.value.forEach((field) => {
   ) as FormFieldValue;
 });
 
+// A field the form submits a default under (the parent a table is filtered
+// on) holds it from the start: it shows, and a mandatory one is filled.
+for (const [id, value] of Object.entries(
+  fieldValuesOfSubmitDefaults(allFields.value, effectiveSubmitDefaults.value),
+)) {
+  state.value[id] = cloneFormValue(value);
+  initialValues.value[id] = cloneFormValue(value) as FormFieldValue;
+}
+
 let recordLoad: FormRecordLoad | undefined;
 if (props.fetchUrl) {
   // Keyed on the record too: the load outlives a drawer or modal, and the
@@ -648,7 +725,10 @@ function layoutClasses(inSectionCard: boolean) {
   if ((inSectionCard || inSection) && isHorizontal) {
     return SECTION_LAYOUT_CLASSES;
   }
-  return FORM_LAYOUT_CLASSES[isHorizontal ? "horizontal" : "vertical"];
+  const orientation = isHorizontal ? "horizontal" : "vertical";
+  return inFormContainer
+    ? CONTAINER_LAYOUT_CLASSES[orientation]
+    : FORM_LAYOUT_CLASSES[orientation];
 }
 
 function isFieldDisabled(field: FormField): boolean {
@@ -657,7 +737,8 @@ function isFieldDisabled(field: FormField): boolean {
 }
 
 function isFieldHidden(field: FormField): boolean {
-  return hiddenFields.value?.has(field.id) ?? false;
+  if (hiddenFields.value?.has(field.id)) return true;
+  return createsRecord && isHiddenOnCreate(field, state.value[field.id]);
 }
 
 function isFieldRequired(field: FormField): boolean {
@@ -684,7 +765,10 @@ provide(FORM_ENTRY_CONTEXT_KEY, {
   isFieldHidden,
   isFieldDisabled,
   isFieldRequired,
-  showsChanges: !isInstant && !isActionForm,
+  isReadOnly: computed(() => !hasChangeableFields.value),
+  // A new row has no earlier value to compare with: "Changed · was empty"
+  // on every field it fills would say nothing.
+  showsChanges: !isInstant && !isActionForm && !createsRecord,
   isFieldChanged: (fieldId) => changedFieldIds.value.has(fieldId),
   baselineValue: (fieldId) => formDirty.baseline.value[fieldId],
   fieldSaveState: (fieldId) => instantSave?.states[fieldId] ?? "idle",
@@ -739,10 +823,6 @@ const sectionOfField = computed(() => {
   return owners;
 });
 
-watch(invalidFields, (invalid) => {
-  if (invalid.size === 0) showsErrorSummary.value = false;
-});
-
 // One entry per row to fix: the unlabelled fields of a group share its
 // label, and its first invalid field stands for them.
 const errorSummaryItems = computed(() => {
@@ -916,6 +996,7 @@ onUnmounted(async () => {
       ref="form"
       :state
       :schema="localizedSchema"
+      :validate="validateServerErrors"
       :disabled="allFields.every((field) => field.disabled)"
       @submit="onSubmit"
       @error="onValidationError"
@@ -963,7 +1044,7 @@ onUnmounted(async () => {
         />
 
         <DmsFormErrorSummary
-          v-if="errorSummaryItems.length"
+          v-if="showsErrorSummary"
           :items="errorSummaryItems"
           :class="hasSections ? 'mb-5' : 'mt-4'"
           @select="focusField"
@@ -1014,7 +1095,9 @@ onUnmounted(async () => {
         :saving="loading || isAnyFieldLoading"
         :changes="changedFieldLabels"
         :form="formElementId"
-        :save-label="usesSaveBar ? props.submitLabel : submitButtonLabel"
+        :save-label="
+          usesSaveBar && !createsRecord ? props.submitLabel : submitButtonLabel
+        "
         :cancellable="canCancel"
         :resettable="hasChangeableFields"
         :class="usesSaveBar ? 'mx-3' : surfaceClasses.foot"

package/frontend-vue/layers/dms-ui/app/components/form/components/Cascader.vue

@@ -6,7 +6,10 @@ import {
   findCascaderNode,
   formatCascaderPath,
   isCascaderNodeSelectable,
+  readCascaderAncestry,
   resolveCascaderKeyMapping,
+  buildCascaderPathLabels,
+  CASCADER_PATH_SEPARATOR,
   searchCascaderTree,
   type CascaderKeyMapping,
   type CascaderNode,
@@ -18,6 +21,7 @@ import {
   FIELD_TRIGGER_INVALID_CLASS,
   FIELD_TRIGGER_UI,
 } from "../../../build/utils/fieldTrigger";
+import { useRelationRows } from "../../../build/composables/data-types/relationRows";
 
 interface CascaderProps {
   searchUrl: string;
@@ -88,6 +92,36 @@ const { data, status, execute } = await useDmsAsyncData(
 );
 
 const keyMapping = computed(() => resolveCascaderKeyMapping(props.keyMapping));
+const selectedValues = computed<string[]>(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.map(String);
+  }
+  return props.modelValue ? [String(props.modelValue)] : [];
+});
+
+// The picked rows and their ancestors, read by `?ids=` level by level: the
+// field names its value before the menu is opened, whatever the tree's size.
+const { readRelationRows } = useRelationRows();
+const { data: ancestry } = await useDmsAsyncData(
+  () => `cascader-value-${instanceId}-${selectedValues.value.join(",")}`,
+  () =>
+    selectedValues.value.length > 0
+      ? readCascaderAncestry(
+          (ids) =>
+            readRelationRows(
+              {
+                searchUrl: props.searchUrl,
+                keyMapping: { value: keyMapping.value.value },
+              },
+              ids,
+            ),
+          keyMapping.value,
+          selectedValues.value,
+        )
+      : Promise.resolve(undefined),
+  // The field's label, not the page's data.
+  { lazy: true, refreshOnPageRefresh: false },
+);
 const rows = computed(() => data.value?.results ?? []);
 const isPartial = computed(
   () => (data.value?.total ?? 0) > rows.value.length && rows.value.length > 0,
@@ -100,12 +134,6 @@ const selectionRules = computed(() => ({
   maxDepth: props.maxDepth,
 }));
 
-const selectedValues = computed<string[]>(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.map(String);
-  }
-  return props.modelValue ? [String(props.modelValue)] : [];
-});
 const selectedSet = computed(() => new Set(selectedValues.value));
 
 const open = ref(false);
@@ -134,14 +162,11 @@ const columns = computed<CascaderNode[][]>(() => {
   return result;
 });
 
-function initialValueLabel(): string | undefined {
-  const source = Array.isArray(props.initialValue)
-    ? props.initialValue[0]
-    : props.initialValue;
-  if (!source || typeof source !== "object") return undefined;
-  const label = (source as Record<string, unknown>)[keyMapping.value.label];
-  return label === undefined || label === null ? undefined : String(label);
-}
+/** The picked id no row answers (deleted, out of reach), if it is one. */
+const notFoundValue = computed(() => {
+  const value = selectedValues.value[0];
+  return value && ancestry.value?.notFound.includes(value) ? value : undefined;
+});
 
 const triggerLabel = computed(() => {
   if (selectedValues.value.length === 0) return "";
@@ -151,9 +176,15 @@ const triggerLabel = computed(() => {
     });
   }
   const value = selectedValues.value[0]!;
+  if (notFoundValue.value) return t("dms.form.relation.not_found");
   const node = findCascaderNode(roots.value, value);
   if (node) return formatCascaderPath(node);
-  return initialValueLabel() ?? value;
+  const path = buildCascaderPathLabels(
+    ancestry.value?.rows ?? [],
+    keyMapping.value,
+    value,
+  );
+  return path.length > 0 ? path.join(CASCADER_PATH_SEPARATOR) : value;
 });
 
 const placeholderLabel = computed(() =>
@@ -339,12 +370,6 @@ watch(searchTerm, () => {
   };
 });
 
-onMounted(() => {
-  if (selectedValues.value.length > 0 || props.initialValue) {
-    void execute();
-  }
-});
-
 function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
   return [
     "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",
@@ -383,7 +408,13 @@ function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
         :aria-label="placeholderLabel"
         v-bind="ariaAttrs"
       >
-        <span v-if="triggerLabel" class="truncate">{{ triggerLabel }}</span>
+        <span
+          v-if="triggerLabel"
+          :class="['truncate', notFoundValue && 'text-muted']"
+          :title="notFoundValue ?? triggerLabel"
+        >
+          {{ triggerLabel }}
+        </span>
         <span v-else class="text-dimmed truncate">{{ placeholderLabel }}</span>
       </UButton>
 

package/frontend-vue/layers/dms-ui/app/components/form/components/DatePicker.vue

@@ -176,7 +176,21 @@ function trackRangePick(value: unknown): void {
   if (!isHalfPicked) report(undefined);
 }
 
+const isPickerOpen = ref(false);
+
+/**
+ * Whether a pick completes the field: a day, or a range's end. A multiple
+ * picker stays open for the next day, a range for its end.
+ */
+function isPickComplete(value: unknown): boolean {
+  if (!value || props.multiple) return false;
+  if (!props.range) return true;
+  const ends = value as Partial<StrictDateRange>;
+  return !!ends.start && !!ends.end;
+}
+
 function onPickerToggle(open: boolean): void {
+  isPickerOpen.value = open;
   if (open) return;
   if (props.range && isHalfPicked) report(RANGE_INCOMPLETE);
   emitFormBlur();
@@ -214,6 +228,10 @@ const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
   if (event === "update:modelValue" && props.range) trackRangePick(value);
   // After the update: the field re-validates its new value.
   if (event === "update:modelValue") emitFormChange();
+  // The day picked, the calendar closes, as it does when left.
+  if (event === "update:modelValue" && isPickComplete(value)) {
+    onPickerToggle(false);
+  }
 };
 
 function forwardEmit(event: EmitEvent, value: EmitValue): void {
@@ -286,10 +304,11 @@ const label = computed(() => {
 </script>
 
 <template>
-  <UPopover @update:open="onPickerToggle">
+  <UPopover :open="isPickerOpen" @update:open="onPickerToggle">
     <UButton
       :id="props.id"
       :label="label ?? t('dms.form.select_date')"
+      :title="label"
       :ui="{
         ...FIELD_TRIGGER_UI,
         label: label ? 'truncate text-highlighted' : 'truncate text-dimmed',

package/frontend-vue/layers/dms-ui/app/components/form/components/Display.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import { isVNode } from "vue";
+import { NUMERIC_TYPE_IDS } from "../../../build/composables/data-types/useColumnValueRenderer";
 
 interface DisplayProps {
   modelValue?: unknown;
   type?: string;
   loading?: boolean;
+  /** The field's label, which names the value where it is not text (an image). */
+  label?: string;
+  /** The record the value belongs to, read as a grid cell reads its row. */
+  row?: Record<string, unknown>;
 }
 
 const props = defineProps<DisplayProps>();
@@ -33,10 +38,16 @@ const formattedValue = computed(() => {
   if (isEmptyValue(props.modelValue)) return EMPTY_FALLBACK;
   const formatter = dataType.value?.formatter?.default;
   if (!formatter) return String(props.modelValue);
-  return formatter(props.modelValue, locale.value, options);
+  const formatterOptions = props.label
+    ? { ...options, fieldLabel: props.label }
+    : options;
+  return formatter(props.modelValue, locale.value, formatterOptions, props.row);
 });
 
 const isVNodeValue = computed(() => isVNode(formattedValue.value));
+// Amounts read in tabular figures, so a read-only list's amounts and the
+// totals under it line up in one font.
+const isNumeric = computed(() => NUMERIC_TYPE_IDS.has(props.type ?? ""));
 </script>
 
 <template>
@@ -56,6 +67,7 @@ const isVNodeValue = computed(() => isVNode(formattedValue.value));
   <div
     v-else
     class="text-default flex min-h-9 items-center py-1.5 text-sm"
+    :class="isNumeric && 'tabular-nums'"
     :title="typeof formattedValue === 'string' ? formattedValue : undefined"
   >
     <component :is="formattedValue" v-if="isVNodeValue" />

package/frontend-vue/layers/dms-ui/app/components/form/components/Image.vue

@@ -536,7 +536,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div @paste="onPaste">
+  <!-- A size container: the preview sits beside its details once the field
+    itself has room (a drawer, a form column), not the window. -->
+  <div class="@container" @paste="onPaste">
     <input
       ref="fileInput"
       type="file"
@@ -740,9 +742,12 @@ onBeforeUnmount(() => {
         </span>
       </button>
 
-      <div v-else class="flex flex-col gap-4 sm:flex-row sm:items-stretch">
+      <div
+        v-else
+        class="flex flex-col gap-4 @min-[480px]:flex-row @min-[480px]:items-stretch"
+      >
         <div
-          class="group relative aspect-[4/3] w-full flex-none overflow-hidden rounded-xl shadow-sm sm:w-58"
+          class="group relative aspect-[4/3] w-full flex-none overflow-hidden rounded-xl shadow-sm @min-[480px]:w-58"
           :class="{
             'ring-primary ring-2': isDraggingOver,
             'ring-error ring-2': !isDraggingOver && invalid,