@antelopejs/dms 0.9.8 → 0.11.0

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

@@ -16,11 +16,27 @@ import type { ArrayOrNested } from "@nuxt/ui/runtime/types/utils.js";
 
 import { refDebounced } from "@vueuse/core";
 import DmsForm from "../Form.vue";
+import { dmsOwnDrawer } from "../../../build/composables/containers/context";
 import { FIELD_TRIGGER_ICON } from "../../../build/utils/fieldTrigger";
+import { unlabeledRelationIds } from "../../../build/composables/data-types/relationValue";
+import {
+  notFoundRelationIds,
+  useRelationRows,
+} from "../../../build/composables/data-types/relationRows";
 import type { FormProps } from "../../../composables/form/types";
+import { sameFormValue } from "../../../build/composables/unsaved-changes/formValue";
+import { FORM_ENTRY_CONTEXT_KEY } from "../../../build/composables/form/formEntryContext";
+import {
+  type RelationFilterBy,
+  relationFilterParams,
+  resolveRelationPick,
+} from "../../../build/composables/data-types/relationFilter";
 
 const SEARCH_DEBOUNCE_MS = 200;
-const ADD_NEW_VALUE = "__dms_relation_add_new__";
+// How long the menu's content gets to leave the page before the add form opens
+// anyway, and the beat its focus return takes once it has.
+const MENU_CLOSE_MAX_MS = 1000;
+const MENU_FOCUS_SETTLE_MS = 60;
 
 /** Title and description of the drawer a relation picker's "add" opens. */
 interface RelationAddFormTexts {
@@ -38,6 +54,11 @@ interface RelationProps extends SelectMenuProps<T, "value", M> {
     avatar?: string;
     disabled?: string;
   };
+  /**
+   * Lists only the related rows whose `field` equals the value of the form
+   * field `from`; ignored outside a form (a filter's picker).
+   */
+  filterBy?: RelationFilterBy;
   addForm?: { componentName: string; options?: FormProps };
   addPermissionIds?: string[];
   /**
@@ -63,33 +84,24 @@ const forwardedProps = computed(() => {
     addForm: ______,
     addPermissionIds: _______,
     addFormTexts: ________,
+    filterBy: _________,
     ...rest
   } = props;
   return rest as SelectMenuProps<T, "value", M>;
 });
-const forwarded = useForwardPropsEmits(forwardedProps, emits);
+const forwardedPropsEmits = useForwardPropsEmits(forwardedProps, emits);
+// The picks go through `handleUpdateModelValue` alone, which deselects a value
+// picked again: forwarded as well, the form got the pick it had undone.
+const forwarded = computed(() => {
+  const { "onUpdate:modelValue": _, ...rest } = forwardedPropsEmits.value as {
+    "onUpdate:modelValue"?: unknown;
+  };
+  return rest as typeof forwardedPropsEmits.value;
+});
 
 type ModelValue = SelectMenuEmits<T, "value", M>["update:modelValue"][0];
 
-function isAddNewValue(value: unknown): boolean {
-  if (value === ADD_NEW_VALUE) return true;
-  if (Array.isArray(value)) return value.includes(ADD_NEW_VALUE);
-  return false;
-}
-
 function handleUpdateModelValue(value: ModelValue) {
-  if (isAddNewValue(value)) {
-    openAddDrawer();
-    if (Array.isArray(value)) {
-      emits(
-        "update:modelValue",
-        (value as unknown[]).filter((v) => v !== ADD_NEW_VALUE) as ModelValue,
-      );
-    } else {
-      emits("update:modelValue", props.modelValue as ModelValue);
-    }
-    return;
-  }
   const shouldDeselect =
     props.deselectable && !props.multiple && value === props.modelValue;
   emits(
@@ -103,7 +115,23 @@ const instanceId = useId();
 const searchTerm = ref("");
 const searchTermDebounced = refDebounced(searchTerm, SEARCH_DEBOUNCE_MS);
 
+// The form this picker fills, whose `filterBy.from` field narrows it.
+const formContext = inject(FORM_ENTRY_CONTEXT_KEY, null);
+const filterSourceValue = computed(() =>
+  props.filterBy && formContext
+    ? formContext.state.value[props.filterBy.from]
+    : undefined,
+);
+const filterParams = computed(() =>
+  relationFilterParams(props.filterBy, filterSourceValue.value),
+);
+// A string, so a recomputed but equal filter does not search again.
+const filterKey = computed(() => JSON.stringify(filterParams.value));
+// The source value the record loaded with, which its loaded pick matches.
+const loadedFilterSource = filterSourceValue.value;
+
 const { $authFetch } = useAuthFetch();
+const { readRelationRows } = useRelationRows();
 const toast = useToast();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
@@ -118,6 +146,9 @@ const addContainerId = `relation-add-${useId()}`;
 // unwrapped item is an unbounded type for the checker. The list is always
 // replaced, never mutated in place.
 const locallyAddedItems: Ref<SelectMenuItem[]> = shallowRef([]);
+// The rows of the ids the value holds, read from the `select` route when the
+// form's data answers the ids rather than the joined rows.
+const valueItems: Ref<SelectMenuItem[]> = shallowRef([]);
 
 const canAdd = computed(
   () =>
@@ -197,6 +228,7 @@ async function fetchRelationItems(): Promise<RelationItems> {
   const data = await $authFetch<RelationResponse>(url, {
     params: {
       search: searchTermDebounced.value || undefined,
+      ...filterParams.value,
     },
     onRequestError: ({ error }: { error: Error }) => {
       toast.add({
@@ -234,7 +266,7 @@ const { data, status, execute } = await useDmsAsyncData(
   {
     lazy: true,
     immediate: false,
-    watch: [searchTermDebounced],
+    watch: [searchTermDebounced, filterKey],
     // Options to pick from, not the page's data.
     refreshOnPageRefresh: false,
   },
@@ -246,6 +278,8 @@ function isMappableObject(value: unknown): value is Record<string, string> {
 
 const initialItems = computed(() => {
   if (!props.initialValue) return [];
+  // The loaded row matched the loaded source value, not another one.
+  if (!sameFormValue(filterSourceValue.value, loadedFilterSource)) return [];
 
   const values = Array.isArray(props.initialValue)
     ? props.initialValue
@@ -254,42 +288,28 @@ const initialItems = computed(() => {
   return values.filter(isMappableObject).map(mapData);
 });
 
+function itemValue(item: SelectMenuItem): unknown {
+  return typeof item === "object" && item !== null && "value" in item
+    ? item.value
+    : item;
+}
+
 const mergedItems = computed<SelectMenuItem[]>(() => {
   const searchResults = data.value?.results || [];
   const initial = initialItems.value || [];
   const added = locallyAddedItems.value;
 
   const merged: SelectMenuItem[] = [...initial, ...added];
-  const existingValues = new Set(
-    merged.map((item) =>
-      typeof item === "object" && item !== null && "value" in item
-        ? item.value
-        : item,
-    ),
-  );
-
-  searchResults.forEach((item) => {
-    const itemValue =
-      typeof item === "object" && item !== null && "value" in item
-        ? item.value
-        : item;
+  const existingValues = new Set(merged.map(itemValue));
 
-    if (!existingValues.has(itemValue)) {
+  [...valueItems.value, ...searchResults].forEach((item) => {
+    const value = itemValue(item);
+    if (!existingValues.has(value)) {
+      existingValues.add(value);
       merged.push(item);
     }
   });
 
-  if (canAdd.value) {
-    if (merged.length > 0) {
-      merged.push({ type: "separator" });
-    }
-    merged.push({
-      label: t("dms.form.relation.add_new"),
-      value: ADD_NEW_VALUE,
-      icon: "i-ph-plus",
-    });
-  }
-
   return merged;
 });
 
@@ -326,34 +346,156 @@ watch(
   { immediate: true },
 );
 
+// The pick as the form holds it, read alongside the source field: a record
+// loading both values changes them in the same tick.
+const pickValue = computed(() =>
+  formContext && props.id
+    ? formContext.state.value[props.id]
+    : props.modelValue,
+);
+let pickSource = loadedFilterSource;
+
+// A pick made for another value of the source field is void once it changes.
+watch(
+  [filterSourceValue, pickValue],
+  ([source, pick], [prevSource, prevPick]) => {
+    if (!props.filterBy || !formContext) return;
+    const outcome = resolveRelationPick({
+      source,
+      pick,
+      previousSource: prevSource,
+      previousPick: prevPick,
+      pickSource,
+    });
+    pickSource = outcome.pickSource;
+    if (!outcome.shouldClear) return;
+    emits("update:modelValue", (props.multiple ? [] : undefined) as ModelValue);
+  },
+);
+
+const isMenuOpen = ref(false);
+
+const slots = useSlots();
+// `content-bottom` is filled below, after the add entry.
+const forwardedSlotNames = computed(() =>
+  Object.keys(slots).filter((name) => name !== "content-bottom"),
+);
+
+const labeledIds = computed(
+  () => new Set(mergedItems.value.map((item) => String(itemValue(item)))),
+);
+// Asked once each: an id the route does not answer (deleted, out of reach)
+// keeps showing as is rather than being asked again.
+const requestedIds = new Set<string>();
+
+// The ids the route did not answer (deleted, out of reach), shown as "Not
+// found" with the id on hover.
+const notFoundIds: Ref<ReadonlySet<string>> = shallowRef(new Set());
+
+async function loadValueItems(ids: string[]) {
+  for (const id of ids) requestedIds.add(id);
+  const source = { searchUrl: props.searchUrl, keyMapping: props.keyMapping };
+  const rows = await readRelationRows(source, ids);
+  const missing = notFoundRelationIds(source, ids, rows);
+  if (!rows.length && !missing.length) return;
+  notFoundIds.value = new Set([...notFoundIds.value, ...missing]);
+  valueItems.value = [
+    ...valueItems.value,
+    ...rows.map((item) => mapData(item as Record<string, string>)),
+    // Kept pickable, so the value can still be deselected.
+    ...missing.map((id) => ({
+      label: t("dms.form.relation.not_found"),
+      value: id,
+    })),
+  ];
+}
+
+const notFoundTitle = computed(() => {
+  const ids = [props.modelValue]
+    .flat()
+    .map(String)
+    .filter((id) => notFoundIds.value.has(id));
+  return ids.length ? ids.join(", ") : undefined;
+});
+
+// The picker shows a value through its item: an id no item carries yet is
+// labelled (and given its avatar) from its row before the picker is opened.
+onMounted(() => {
+  watch(
+    () =>
+      unlabeledRelationIds(props.modelValue, labeledIds.value).filter(
+        (id) => !requestedIds.has(id),
+      ),
+    (ids) => {
+      if (ids.length > 0) void loadValueItems(ids);
+    },
+    { immediate: true },
+  );
+});
+
 function onOpen(isOpen: boolean) {
+  isMenuOpen.value = isOpen;
   if (isOpen && !data.value?.results?.length) {
     execute();
   }
 }
 
+const addEntryRef = useTemplateRef<HTMLElement>("addEntry");
+
+function waitForDetached(element: HTMLElement | null): Promise<void> {
+  const startedAt = performance.now();
+  return new Promise((resolve) => {
+    const check = () => {
+      if (
+        !element?.isConnected ||
+        performance.now() - startedAt > MENU_CLOSE_MAX_MS
+      ) {
+        resolve();
+        return;
+      }
+      requestAnimationFrame(check);
+    };
+    check();
+  });
+}
+
+/**
+ * Opens the add form once the menu has left the page: its content animates
+ * out, then hands the focus back to the field, and a drawer opened before
+ * that took the focus leaving it for a click outside and closed at once.
+ */
+async function openAddDrawerOnceClosed(): Promise<void> {
+  const menuContent = addEntryRef.value;
+  isMenuOpen.value = false;
+  await waitForDetached(menuContent);
+  await new Promise((resolve) => setTimeout(resolve, MENU_FOCUS_SETTLE_MS));
+  openAddDrawer();
+}
+
 function openAddDrawer() {
   const formOptions = addFormOptions.value;
   if (!formOptions) return;
-  const drawer = openDrawer({
-    title: props.addFormTexts?.displayName
-      ? processI18n(props.addFormTexts.displayName)
-      : t("dms.table.new_item"),
-    description: props.addFormTexts?.description
-      ? processI18n(props.addFormTexts.description)
-      : t("dms.table.new_item_description"),
-    direction: "bottom",
-    containerId: addContainerId,
-    component: DmsForm,
-    componentOptions: {
-      ...formOptions,
-      onSuccessCallback: (response: unknown, formData: unknown) => {
-        clearGuards(addContainerId);
-        drawer.close();
-        handleAddSuccess(response, formData);
+  const drawer = openDrawer(
+    dmsOwnDrawer({
+      title: props.addFormTexts?.displayName
+        ? processI18n(props.addFormTexts.displayName)
+        : t("dms.table.new_item"),
+      description: props.addFormTexts?.description
+        ? processI18n(props.addFormTexts.description)
+        : t("dms.table.new_item_description"),
+      direction: "bottom",
+      containerId: addContainerId,
+      component: DmsForm,
+      componentOptions: {
+        ...formOptions,
+        onSuccessCallback: (response: unknown, formData: unknown) => {
+          clearGuards(addContainerId);
+          drawer.close();
+          handleAddSuccess(response, formData);
+        },
       },
-    },
-  });
+    }),
+  );
 }
 
 function extractInsertedId(response: unknown): string | undefined {
@@ -428,20 +570,39 @@ const addFormOptions = computed(() => {
     v-model:search-term="searchTerm"
     :trailing-icon="props.trailingIcon ?? FIELD_TRIGGER_ICON"
     :model-value="props.modelValue"
+    :open="isMenuOpen"
     :items="displayItems as T"
     :loading="status === 'pending'"
     value-key="value"
     :portal="false"
     :ignore-filter="true"
     :ui="{ content: 'z-50' }"
+    :aria-label="t('dms.a11y.show_options')"
+    :title="notFoundTitle"
     @update:open="onOpen"
     @update:model-value="handleUpdateModelValue"
   >
-    <template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+    <template v-for="name in forwardedSlotNames" :key="name" #[name]="slotData">
       <slot
         :name="name as keyof SelectMenuSlots<T, 'value', M>"
         v-bind="slotData ?? {}"
       />
     </template>
+    <!-- The add entry is no item: picked, it became the field's value. -->
+    <template v-if="canAdd || $slots['content-bottom']" #content-bottom>
+      <div v-if="canAdd" ref="addEntry" class="border-default border-t p-1">
+        <UButton
+          :label="t('dms.form.relation.add_new')"
+          icon="i-ph-plus"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          block
+          class="justify-start"
+          @click="openAddDrawerOnceClosed"
+        />
+      </div>
+      <slot name="content-bottom" />
+    </template>
   </USelectMenu>
 </template>

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

@@ -6,6 +6,7 @@ import {
   useFormField,
 } from "@nuxt/ui/composables/useFormField";
 import { resolveDmsComponent } from "../../../composables/resolveDmsComponent";
+import DmsRepeaterTable from "./RepeaterTable.vue";
 
 /** A field of the rows: one column. */
 interface RepeaterColumn {
@@ -72,21 +73,43 @@ const FLUID_COLUMN = "minmax(0,1fr)";
 const COLUMN_WIDTHS: Record<string, string> = { boolean: "20px" };
 const HANDLE_COLUMN = "20px";
 const REMOVE_COLUMN = "28px";
+
+/** The columns of a row: the handle, the given cell columns, the remove button. */
+function rowTemplate(cellColumns: string[]): string {
+  return [props.sortable ? HANDLE_COLUMN : "", ...cellColumns, REMOVE_COLUMN]
+    .filter(Boolean)
+    .join(" ");
+}
+
+// Below 480px of the field's own width (a drawer, a phone), columns side by
+// side would each be a few characters wide: each row stacks its cells in one
+// column instead, a labelled field under another, as a card, and the column
+// heads hide.
+const STACKED_HIDDEN_CLASS = "@max-[30rem]:hidden";
+const STACKED_ROW_CLASSES = {
+  row: "@max-[30rem]:grid-cols-(--dms-repeater-stacked-columns) @max-[30rem]:items-start @max-[30rem]:rounded-md @max-[30rem]:border @max-[30rem]:border-default @max-[30rem]:p-2.5",
+  // Side by side, each cell is a column of the row itself.
+  cells: "contents @max-[30rem]:grid @max-[30rem]:min-w-0 @max-[30rem]:gap-2.5",
+  cell: "grid min-w-0 gap-1",
+  label: `${EYEBROW_CLASS} text-dimmed hidden truncate @max-[30rem]:block`,
+};
 const gridTemplate = computed(() => ({
-  gridTemplateColumns: [
-    props.sortable ? HANDLE_COLUMN : "",
-    ...props.columns.map(
+  "--dms-repeater-columns": rowTemplate(
+    props.columns.map(
       (column) => COLUMN_WIDTHS[column.type ?? ""] ?? FLUID_COLUMN,
     ),
-    REMOVE_COLUMN,
-  ]
-    .filter(Boolean)
-    .join(" "),
+  ),
+  "--dms-repeater-stacked-columns": rowTemplate([FLUID_COLUMN]),
 }));
 
-function emitRows(next: RepeaterRow[]): void {
+/**
+ * Sets the rows; `shouldValidate: false` leaves the form's validation alone: a row
+ * just added is empty, and is only checked once filled or on submit, never
+ * flagged "required" the moment it appears.
+ */
+function emitRows(next: RepeaterRow[], shouldValidate = true): void {
   model.value = next;
-  emitFormChange();
+  if (shouldValidate) emitFormChange();
 }
 
 function setCell(index: number, column: string, value: unknown): void {
@@ -99,7 +122,7 @@ function setCell(index: number, column: string, value: unknown): void {
 
 function addRow(): void {
   rowKeys.value.push(nextKey++);
-  emitRows([...rows.value, {}]);
+  emitRows([...rows.value, {}], false);
 }
 
 function removeRow(index: number): void {
@@ -176,10 +199,21 @@ const hasHeaders = computed(() => props.columns.some((column) => column.label));
 </script>
 
 <template>
-  <div :id="props.id" class="grid gap-1.5" role="group">
+  <!-- Read-only, the rows are values to read, not controls: a table. -->
+  <DmsRepeaterTable
+    v-if="props.disabled"
+    :id="props.id"
+    :columns="props.columns"
+    :rows="rows"
+  />
+  <div v-else :id="props.id" class="@container grid gap-1.5" role="group">
     <div
       v-if="hasHeaders && rows.length"
-      :class="[EYEBROW_CLASS, 'text-dimmed grid items-end gap-2']"
+      :class="[
+        EYEBROW_CLASS,
+        'text-dimmed grid grid-cols-(--dms-repeater-columns) items-end gap-2',
+        STACKED_HIDDEN_CLASS,
+      ]"
       :style="gridTemplate"
       aria-hidden="true"
     >
@@ -193,8 +227,11 @@ const hasHeaders = computed(() => props.columns.some((column) => column.label));
     <div
       v-for="(row, index) in rows"
       :key="rowKeys[index]"
-      class="grid items-center gap-2"
-      :class="draggedIndex === index && 'opacity-50'"
+      :class="[
+        'grid grid-cols-(--dms-repeater-columns) items-center gap-2',
+        STACKED_ROW_CLASSES.row,
+        draggedIndex === index && 'opacity-50',
+      ]"
       :style="gridTemplate"
       @dragover.prevent
       @drop.prevent="onDrop(index)"
@@ -212,22 +249,35 @@ const hasHeaders = computed(() => props.columns.some((column) => column.label));
       >
         <UIcon name="i-ph-dots-six-vertical" class="size-4" />
       </button>
-      <Component
-        :is="cellComponent(column)"
-        v-for="column in props.columns"
-        :id="cellName(index, column.id)"
-        :key="column.id"
-        :model-value="row[column.id]"
-        size="sm"
-        class="w-full min-w-0"
-        :disabled="props.disabled"
-        :aria-label="column.label"
-        :aria-invalid="isCellInvalid(index, column.id) || undefined"
-        :color="isCellInvalid(index, column.id) ? 'error' : undefined"
-        :highlight="isCellInvalid(index, column.id) || undefined"
-        v-bind="column.component.options || {}"
-        @update:model-value="setCell(index, column.id, $event)"
-      />
+      <div :class="STACKED_ROW_CLASSES.cells">
+        <div
+          v-for="column in props.columns"
+          :key="column.id"
+          :class="STACKED_ROW_CLASSES.cell"
+        >
+          <span
+            v-if="column.label"
+            :class="STACKED_ROW_CLASSES.label"
+            aria-hidden="true"
+          >
+            {{ column.label }}
+          </span>
+          <Component
+            :is="cellComponent(column)"
+            :id="cellName(index, column.id)"
+            :model-value="row[column.id]"
+            size="sm"
+            class="w-full min-w-0"
+            :disabled="props.disabled"
+            :aria-label="column.label"
+            :aria-invalid="isCellInvalid(index, column.id) || undefined"
+            :color="isCellInvalid(index, column.id) ? 'error' : undefined"
+            :highlight="isCellInvalid(index, column.id) || undefined"
+            v-bind="column.component.options || {}"
+            @update:model-value="setCell(index, column.id, $event)"
+          />
+        </div>
+      </div>
       <UButton
         icon="i-ph-x"
         color="neutral"