@jskit-ai/users-web 0.1.36 → 0.1.38

package/src/client/composables/{crudLookupFieldRuntime.js → crud/crudLookupFieldRuntime.js}

@@ -5,12 +5,13 @@ import {
   normalizeCrudLookupContainerKey,
   resolveCrudLookupApiPathFromNamespace
 } from "@jskit-ai/kernel/shared/support/crudLookup";
-import { useList } from "./useList.js";
+import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface/registry";
+import { useList } from "../records/useList.js";
 import {
   resolveLookupItemLabel,
   resolveLookupFieldDisplayValue
 } from "./crudLookupFieldLabelSupport.js";
-import { asPlainObject } from "./scopeHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
 
 function normalizeQueryKeyPrefix(value) {
   const source = Array.isArray(value) ? value : [];
@@ -66,7 +67,8 @@ function createSelectedLookupItem(selectedValue, selectedRecord = {}, entry = {}
   const label = displayValue == null || displayValue === "" ? value : displayValue;
   return {
     value,
-    label: String(label ?? "")
+    label: String(label ?? ""),
+    record: hydratedLookup
   };
 }
 
@@ -108,12 +110,14 @@ function createCrudLookupFieldRuntime({
       defaultValue: defaultLookupContainerKey,
       context: `createCrudLookupFieldRuntime formFields["${key}"].relation.containerKey`
     });
+    const relationSurfaceId = normalizeSurfaceId(rawRelation.surfaceId);
     if (!valueKey) {
       continue;
     }
 
     const runtime = useList({
       adapter: adapter || undefined,
+      ...(relationSurfaceId ? { surfaceId: relationSurfaceId } : {}),
       apiSuffix: apiPath,
       queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
         ...normalizedQueryKeyPrefix,
@@ -146,6 +150,7 @@ function createCrudLookupFieldRuntime({
         kind: "lookup",
         namespace,
         ...(explicitApiPath ? { apiPath: explicitApiPath } : {}),
+        ...(relationSurfaceId ? { surfaceId: relationSurfaceId } : {}),
         containerKey: relationLookupContainerKey,
         valueKey,
         ...(labelKey ? { labelKey } : {})
@@ -161,12 +166,14 @@ function createCrudLookupFieldRuntime({
     }
 
     const items = (Array.isArray(entry.runtime.items) ? entry.runtime.items : []).map((item = {}) => {
+      const sourceRecord = asPlainObject(item);
       const value = normalizeLookupValue(item?.[entry.valueKey]);
       const resolvedLabel = resolveLookupItemLabel(item, entry.labelKey);
       const label = resolvedLabel || value;
       return {
         value,
-        label: String(label ?? "")
+        label: String(label ?? ""),
+        record: sourceRecord
       };
     });
 

package/src/client/composables/{crudSchemaFormHelpers.js → crud/crudSchemaFormHelpers.js}

@@ -1,6 +1,24 @@
 import { validateOperationSection } from "@jskit-ai/http-runtime/shared/validators/operationValidation";
-import { asPlainObject } from "./scopeHelpers.js";
-import { toRouteParamValue } from "./routeTemplateHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { toRouteParamValue } from "../support/routeTemplateHelpers.js";
+
+const EMPTY_FIELD_ERROR_LIST = Object.freeze([]);
+const fieldErrorListCache = new Map();
+
+function resolveStableFieldErrorList(fieldKey, message) {
+  if (!message) {
+    return EMPTY_FIELD_ERROR_LIST;
+  }
+
+  const cacheKey = `${fieldKey}::${message}`;
+  if (fieldErrorListCache.has(cacheKey)) {
+    return fieldErrorListCache.get(cacheKey);
+  }
+
+  const nextValue = Object.freeze([message]);
+  fieldErrorListCache.set(cacheKey, nextValue);
+  return nextValue;
+}
 
 function normalizeCrudFormFields(fields = []) {
   const normalizedFields = [];
@@ -26,6 +44,84 @@ function resolveFormFieldType(field = {}) {
   return String(field.type || "").trim().toLowerCase();
 }
 
+function resolveFormFieldFormat(field = {}) {
+  return String(field.format || "").trim().toLowerCase();
+}
+
+function padDateTimePart(value) {
+  return String(value).padStart(2, "0");
+}
+
+function normalizeTimeWhitespace(value) {
+  return String(value ?? "").replaceAll(/\s+/gu, " ").trim();
+}
+
+function toTimeInputValue(value) {
+  const normalized = normalizeTimeWhitespace(value);
+  if (!normalized) {
+    return "";
+  }
+
+  const twentyFourHourMatch = normalized.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/u);
+  if (twentyFourHourMatch) {
+    const hours = Number(twentyFourHourMatch[1]);
+    const minutes = Number(twentyFourHourMatch[2]);
+    if (hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59) {
+      return `${padDateTimePart(hours)}:${padDateTimePart(minutes)}`;
+    }
+    return normalized;
+  }
+
+  const meridiemMatch = normalized.match(/^(\d{1,2}):(\d{2})\s*([ap]\.?m\.?)$/iu);
+  if (!meridiemMatch) {
+    return normalized;
+  }
+
+  const rawHours = Number(meridiemMatch[1]);
+  const minutes = Number(meridiemMatch[2]);
+  if (rawHours < 1 || rawHours > 12 || minutes < 0 || minutes > 59) {
+    return normalized;
+  }
+
+  let hours = rawHours % 12;
+  if (String(meridiemMatch[3] || "").toLowerCase().startsWith("p")) {
+    hours += 12;
+  }
+
+  return `${padDateTimePart(hours)}:${padDateTimePart(minutes)}`;
+}
+
+function toDateTimeLocalInputValue(value) {
+  if (value == null || value === "") {
+    return "";
+  }
+
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return String(value);
+  }
+
+  return [
+    date.getFullYear(),
+    padDateTimePart(date.getMonth() + 1),
+    padDateTimePart(date.getDate())
+  ].join("-") + `T${padDateTimePart(date.getHours())}:${padDateTimePart(date.getMinutes())}`;
+}
+
+function toIsoUtcDateTimeValue(value) {
+  const normalized = String(value ?? "").trim();
+  if (!normalized) {
+    return "";
+  }
+
+  const date = new Date(normalized);
+  if (Number.isNaN(date.getTime())) {
+    return normalized;
+  }
+
+  return date.toISOString();
+}
+
 function resolveFormFieldInitialValue(field = {}) {
   if (Object.prototype.hasOwnProperty.call(field, "initialValue")) {
     return field.initialValue;
@@ -42,6 +138,23 @@ function resolveFormFieldInitialValue(field = {}) {
   return "";
 }
 
+function shouldSerializeClearedFieldAsNull(field = {}) {
+  if (field?.nullable !== true) {
+    return false;
+  }
+
+  const fieldType = resolveFormFieldType(field);
+  const fieldFormat = resolveFormFieldFormat(field);
+
+  return (
+    fieldType === "integer" ||
+    fieldType === "number" ||
+    fieldFormat === "date" ||
+    fieldFormat === "date-time" ||
+    fieldFormat === "time"
+  );
+}
+
 function createCrudFormModel(fields = []) {
   const model = {};
   for (const field of normalizeCrudFormFields(fields)) {
@@ -58,6 +171,8 @@ function buildCrudFormPayload(fields = [], model = {}) {
   for (const field of normalizeCrudFormFields(fields)) {
     const fieldKey = field.key;
     const fieldType = resolveFormFieldType(field);
+    const fieldFormat = resolveFormFieldFormat(field);
+    const clearAsNull = shouldSerializeClearedFieldAsNull(field);
     const rawValue = sourceModel[fieldKey];
 
     if (fieldType === "boolean") {
@@ -68,6 +183,9 @@ function buildCrudFormPayload(fields = [], model = {}) {
     if (fieldType === "integer" || fieldType === "number") {
       const normalizedValue = String(rawValue ?? "").trim();
       if (!normalizedValue) {
+        if (clearAsNull) {
+          payload[fieldKey] = null;
+        }
         continue;
       }
 
@@ -79,6 +197,48 @@ function buildCrudFormPayload(fields = [], model = {}) {
     }
 
     if (rawValue == null) {
+      if (clearAsNull) {
+        payload[fieldKey] = null;
+      }
+      continue;
+    }
+
+    if (fieldFormat === "date") {
+      const normalizedValue = String(rawValue).trim();
+      if (!normalizedValue) {
+        if (clearAsNull) {
+          payload[fieldKey] = null;
+        }
+        continue;
+      }
+
+      payload[fieldKey] = normalizedValue;
+      continue;
+    }
+
+    if (fieldFormat === "date-time") {
+      const normalizedValue = toIsoUtcDateTimeValue(rawValue);
+      if (!normalizedValue) {
+        if (clearAsNull) {
+          payload[fieldKey] = null;
+        }
+        continue;
+      }
+
+      payload[fieldKey] = normalizedValue;
+      continue;
+    }
+
+    if (fieldFormat === "time") {
+      const normalizedValue = toTimeInputValue(rawValue);
+      if (!normalizedValue) {
+        if (clearAsNull) {
+          payload[fieldKey] = null;
+        }
+        continue;
+      }
+
+      payload[fieldKey] = normalizedValue;
       continue;
     }
 
@@ -94,6 +254,7 @@ function applyCrudPayloadToForm(fields = [], model = {}, payload = {}) {
   for (const field of normalizeCrudFormFields(fields)) {
     const fieldKey = field.key;
     const fieldType = resolveFormFieldType(field);
+    const fieldFormat = resolveFormFieldFormat(field);
     const rawValue = sourcePayload[fieldKey];
 
     if (fieldType === "boolean") {
@@ -106,6 +267,16 @@ function applyCrudPayloadToForm(fields = [], model = {}, payload = {}) {
       continue;
     }
 
+    if (fieldFormat === "date-time") {
+      targetModel[fieldKey] = toDateTimeLocalInputValue(rawValue);
+      continue;
+    }
+
+    if (fieldFormat === "time") {
+      targetModel[fieldKey] = toTimeInputValue(rawValue);
+      continue;
+    }
+
     targetModel[fieldKey] = rawValue == null ? "" : String(rawValue);
   }
 }
@@ -150,11 +321,12 @@ function resolveCrudFieldErrors(fieldErrors = {}, fieldKey = "") {
 
   const source = asPlainObject(fieldErrors);
   const message = String(source[key] || "").trim();
+
   if (!message) {
-    return [];
+    return resolveStableFieldErrorList(key, "");
   }
 
-  return [message];
+  return resolveStableFieldErrorList(key, message);
 }
 
 function parseCrudResourceOperationInput({
@@ -167,12 +339,13 @@ function parseCrudResourceOperationInput({
   const operations = asPlainObject(asPlainObject(resource).operations);
   const operation = asPlainObject(operations[normalizedOperationName]);
 
-  return validateOperationSection({
+  const parsed = validateOperationSection({
     operation,
     section: "bodyValidator",
     value: rawPayload,
     context
   });
+  return parsed;
 }
 
 export {

package/src/client/composables/internal/crudListParentTitleSupport.js

@@ -0,0 +1,168 @@
+import {
+  normalizeCrudLookupContainerKey,
+  resolveCrudLookupApiPathFromNamespace,
+  resolveCrudLookupFieldKeyFromRouteParam
+} from "@jskit-ai/kernel/shared/support/crudLookup";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import { resolveLookupFieldDisplayValue, resolveRecordTitle } from "../crud/crudLookupFieldLabelSupport.js";
+import { resolveRouteParamNamesInOrder, toRouteParamValue } from "../support/routeTemplateHelpers.js";
+
+function singularizeLabel(value = "") {
+  const normalizedValue = normalizeText(value);
+  if (!normalizedValue) {
+    return "";
+  }
+  if (normalizedValue.endsWith("ies")) {
+    return `${normalizedValue.slice(0, -3)}y`;
+  }
+  if (normalizedValue.endsWith("s") && !normalizedValue.endsWith("ss")) {
+    return normalizedValue.slice(0, -1);
+  }
+  return normalizedValue;
+}
+
+function toTitleLabel(value = "") {
+  const normalizedValue = normalizeText(value)
+    .replace(/Id$/u, "")
+    .replace(/[_-]+/gu, " ")
+    .replace(/([a-z0-9])([A-Z])/gu, "$1 $2")
+    .trim();
+  if (!normalizedValue) {
+    return "";
+  }
+
+  return normalizedValue
+    .split(/\s+/u)
+    .filter(Boolean)
+    .map((entry) => entry.charAt(0).toUpperCase() + entry.slice(1))
+    .join(" ");
+}
+
+function resolveEntityLabel(routeParamKey = "", relationNamespace = "") {
+  const routeLabel = singularizeLabel(toTitleLabel(routeParamKey));
+  if (routeLabel) {
+    return routeLabel;
+  }
+
+  const namespaceLabel = singularizeLabel(toTitleLabel(relationNamespace));
+  if (namespaceLabel) {
+    return namespaceLabel;
+  }
+
+  return "Record";
+}
+
+function resolveLookupFieldMeta(resource = {}, fieldKey = "") {
+  const normalizedFieldKey = normalizeText(fieldKey);
+  if (!normalizedFieldKey) {
+    return null;
+  }
+
+  const entries = Array.isArray(resource?.fieldMeta) ? resource.fieldMeta : [];
+  for (const entry of entries) {
+    if (normalizeText(entry?.key) !== normalizedFieldKey) {
+      continue;
+    }
+
+    const relation = entry?.relation;
+    if (!relation || normalizeText(relation.kind).toLowerCase() !== "lookup") {
+      return null;
+    }
+
+    return entry;
+  }
+
+  return null;
+}
+
+function resolveCrudListParentDescriptor({ resource = {}, route = null, recordIdParam = "recordId" } = {}) {
+  const orderedRouteParamNames = resolveRouteParamNamesInOrder(route);
+  if (orderedRouteParamNames.length < 1) {
+    return null;
+  }
+
+  const normalizedRecordIdParam = normalizeText(recordIdParam) || "recordId";
+  for (const routeParamKey of [...orderedRouteParamNames].reverse()) {
+    if (routeParamKey === "workspaceSlug" || routeParamKey === normalizedRecordIdParam) {
+      continue;
+    }
+
+    const fieldKey = resolveCrudLookupFieldKeyFromRouteParam(resource, routeParamKey);
+    if (!fieldKey) {
+      continue;
+    }
+
+    const fieldMeta = resolveLookupFieldMeta(resource, fieldKey);
+    if (!fieldMeta) {
+      continue;
+    }
+
+    const relation = fieldMeta.relation || {};
+    const relationNamespace = normalizeText(relation.namespace);
+    const containerKey = normalizeCrudLookupContainerKey(relation.containerKey, {
+      defaultValue: resource?.contract?.lookup?.containerKey || "lookups"
+    });
+
+    return Object.freeze({
+      fieldKey,
+      routeParamKey,
+      relationNamespace,
+      entityLabel: resolveEntityLabel(routeParamKey, relationNamespace),
+      labelKey: normalizeText(relation.labelKey),
+      fieldDescriptor: Object.freeze({
+        key: fieldKey,
+        relation: Object.freeze({
+          kind: "lookup",
+          valueKey: normalizeText(relation.valueKey) || "id",
+          labelKey: normalizeText(relation.labelKey),
+          containerKey
+        })
+      }),
+      apiUrlTemplate: relationNamespace
+        ? `${resolveCrudLookupApiPathFromNamespace(relationNamespace)}/:${routeParamKey}`
+        : ""
+    });
+  }
+
+  return null;
+}
+
+function resolveCrudListParentTitleFromItems(items = [], descriptor = null) {
+  const sourceItems = Array.isArray(items) ? items : [];
+  if (!descriptor?.fieldDescriptor) {
+    return "";
+  }
+
+  for (const item of sourceItems) {
+    const resolvedTitle = normalizeText(resolveLookupFieldDisplayValue(item, descriptor.fieldDescriptor));
+    if (resolvedTitle) {
+      return resolvedTitle;
+    }
+  }
+
+  return "";
+}
+
+function resolveCrudListParentRecordTitle(record = {}, descriptor = null) {
+  const resolvedTitle = resolveRecordTitle(record, {
+    fallbackKey: normalizeText(descriptor?.labelKey),
+    defaultValue: ""
+  });
+  if (resolvedTitle && resolvedTitle !== "-") {
+    return resolvedTitle;
+  }
+
+  const entityLabel = normalizeText(descriptor?.entityLabel) || "Record";
+  const recordId = toRouteParamValue(record?.id);
+  if (recordId) {
+    return `${entityLabel} #${recordId}`;
+  }
+
+  return "";
+}
+
+export {
+  resolveCrudListParentDescriptor,
+  resolveCrudListParentRecordTitle,
+  resolveCrudListParentTitleFromItems
+};

package/src/client/composables/internal/useOperationScope.js

@@ -7,7 +7,7 @@ import {
   resolvePermissionAccess,
   resolveEnabled,
   resolveQueryKey
-} from "../scopeHelpers.js";
+} from "../support/scopeHelpers.js";
 
 function normalizePermissionSets(permissionSets = {}) {
   const source = permissionSets && typeof permissionSets === "object" && !Array.isArray(permissionSets)

package/src/client/composables/{useAddEdit.js → records/useAddEdit.js}

@@ -1,19 +1,20 @@
 import { computed, proxyRefs } from "vue";
 import { useRoute } from "vue-router";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
-import { useAddEditCore } from "./useAddEditCore.js";
-import { useEndpointResource } from "./useEndpointResource.js";
-import { resolveOperationAdapter } from "./operationAdapters.js";
-import { createAddEditUiRuntime } from "./addEditUiRuntime.js";
-import { useUiFeedback } from "./useUiFeedback.js";
-import { useFieldErrorBag } from "./useFieldErrorBag.js";
+import { useAddEditCore } from "../runtime/useAddEditCore.js";
+import { useEndpointResource } from "../runtime/useEndpointResource.js";
+import { resolveOperationAdapter } from "../runtime/operationAdapters.js";
+import { createAddEditUiRuntime } from "../runtime/addEditUiRuntime.js";
+import { useUiFeedback } from "../runtime/useUiFeedback.js";
+import { useFieldErrorBag } from "../runtime/useFieldErrorBag.js";
 import {
   setupRouteChangeCleanup,
   setupOperationErrorReporting
-} from "./operationUiHelpers.js";
+} from "../runtime/operationUiHelpers.js";
 import {
   resolveResourceMessages
-} from "./scopeHelpers.js";
+} from "../support/scopeHelpers.js";
+import { resolveRouteParamNamesInOrder } from "../support/routeTemplateHelpers.js";
 
 function useAddEdit({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
@@ -53,6 +54,7 @@ function useAddEdit({
   const addEditUiRuntime = createAddEditUiRuntime({
     recordIdParam,
     routeParams: routeParams ?? computed(() => route?.params || {}),
+    routeParamNames: computed(() => resolveRouteParamNamesInOrder(route)),
     routePath: computed(() => route?.path || ""),
     routeRecordId,
     apiUrlTemplate,
@@ -134,6 +136,12 @@ function useAddEdit({
   const isInitialLoading = operationScope.isLoading(endpointResource.isInitialLoading);
   const isFetching = operationScope.isLoading(endpointResource.isFetching);
   const isRefetching = computed(() => Boolean(isFetching.value && !isInitialLoading.value));
+  const isFieldLocked = computed(() =>
+    Boolean(!canSave.value || addEdit.saving.value || isRefetching.value)
+  );
+  const isSubmitDisabled = computed(() =>
+    Boolean(isInitialLoading.value || isRefetching.value || !canSave.value)
+  );
   const loadError = operationScope.loadError(endpointResource.loadError);
   const isLoading = operationScope.isLoading(endpointResource.isLoading);
   setupOperationErrorReporting({
@@ -148,6 +156,8 @@ function useAddEdit({
     isInitialLoading,
     isFetching,
     isRefetching,
+    isFieldLocked,
+    isSubmitDisabled,
     isLoading,
     isSaving: addEdit.saving,
     fieldErrors: addEdit.fieldErrors,

package/src/client/composables/{useCrudSchemaForm.js → records/useCrudAddEdit.js}

@@ -1,17 +1,20 @@
 import { computed, proxyRefs, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { asPlainObject } from "./scopeHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
 import { useAddEdit } from "./useAddEdit.js";
+import {
+  resolveCrudBoundValues,
+} from "../crud/crudBindingSupport.js";
 import {
   normalizeCrudFormFields,
   createCrudFormModel,
   buildCrudFormPayload,
   applyCrudPayloadToForm,
-  applyCrudRouteBoundFieldValues,
+  resolveCrudRouteBoundFieldValues,
   resolveCrudFieldErrors,
   parseCrudResourceOperationInput
-} from "./crudSchemaFormHelpers.js";
-import { hasResolvedQueryData } from "./resourceLoadStateHelpers.js";
+} from "../crud/crudSchemaFormHelpers.js";
+import { hasResolvedQueryData } from "../support/resourceLoadStateHelpers.js";
 
 function normalizeFieldErrorKeys(keys = []) {
   return Array.isArray(keys)
@@ -36,12 +39,13 @@ function normalizeSaveSuccessOptions(options = {}) {
   });
 }
 
-function useCrudSchemaForm({
+function useCrudAddEdit({
   resource = null,
   operationName = "",
   formFields = [],
   addEditOptions = {},
   saveSuccess = {},
+  fieldBinding = null,
   createModel = null,
   buildPayload = null,
   mapPayloadToModel = null,
@@ -61,18 +65,31 @@ function useCrudSchemaForm({
     ? asPlainObject(createModel(normalizedFields))
     : createCrudFormModel(normalizedFields);
   const form = hasProvidedModel ? providedModel : reactive(defaultModel);
+  const boundFieldValues = computed(() => {
+    return resolveCrudBoundValues({
+      binding: fieldBinding,
+      routeValues: resolveCrudRouteBoundFieldValues(normalizedFields, route?.params || {}),
+      context: Object.freeze({
+        route,
+        fields: normalizedFields
+      })
+    });
+  });
 
-  function applyRouteBoundValues(target = {}) {
-    return applyCrudRouteBoundFieldValues(normalizedFields, target, route?.params || {});
+  function applyBoundFieldValues(target = {}) {
+    Object.assign(target, boundFieldValues.value);
+    return target;
   }
 
-  applyRouteBoundValues(form);
   watch(
-    () => route?.params,
+    boundFieldValues,
     () => {
-      applyRouteBoundValues(form);
+      applyBoundFieldValues(form);
     },
-    { deep: true }
+    {
+      immediate: true,
+      deep: true
+    }
   );
   const parseInputOverride = typeof parseInput === "function"
     ? parseInput
@@ -109,7 +126,7 @@ function useCrudSchemaForm({
           fields: normalizedFields
         })
       : buildCrudFormPayload(normalizedFields, model);
-    applyRouteBoundValues(payload);
+    applyBoundFieldValues(payload);
 
     return payload;
   }
@@ -120,12 +137,12 @@ function useCrudSchemaForm({
           ...context,
           fields: normalizedFields
         });
-        applyRouteBoundValues(model);
+        applyBoundFieldValues(model);
       }
     : (shouldApplyDefaultMapPayload
         ? (model = {}, payload = {}) => {
             applyCrudPayloadToForm(normalizedFields, model, payload);
-            applyRouteBoundValues(model);
+            applyBoundFieldValues(model);
           }
         : undefined);
 
@@ -200,4 +217,4 @@ function useCrudSchemaForm({
   });
 }
 
-export { useCrudSchemaForm };
+export { useCrudAddEdit };