@jskit-ai/http-web 0.1.1

package/src/client/composables/records/useCrudAddEdit.js

@@ -0,0 +1,227 @@
+import { computed, proxyRefs, reactive, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { resolveCrudJsonApiTransport } from "../crud/crudJsonApiTransportSupport.js";
+import { resolveCrudHttpClient } from "../crud/crudHttpClientSupport.js";
+import { useAddEdit } from "./useAddEdit.js";
+import {
+  resolveCrudBoundValues,
+} from "../crud/crudBindingSupport.js";
+import { resolveOperationRealtimeOptions } from "../useRealtimeQueryInvalidation.js";
+import {
+  normalizeCrudFormFields,
+  createCrudFormModel,
+  buildCrudFormPayload,
+  applyCrudPayloadToForm,
+  resolveCrudRouteBoundFieldValues,
+  resolveCrudFieldErrors
+} from "../crud/crudSchemaFormHelpers.js";
+import { hasResolvedQueryData } from "../support/resourceLoadStateHelpers.js";
+
+function normalizeFieldErrorKeys(keys = []) {
+  return Array.isArray(keys)
+    ? keys.map((entry) => String(entry || "").trim()).filter(Boolean)
+    : [];
+}
+
+function normalizeSaveSuccessOptions(options = {}) {
+  const source = asPlainObject(options);
+  const invalidateQueryKey = Array.isArray(source.invalidateQueryKey)
+    ? source.invalidateQueryKey
+    : null;
+  const listUrlTemplate = String(source.listUrlTemplate || "").trim();
+  const navigateToView = source.navigateToView !== false;
+  const navigateToList = source.navigateToList !== false;
+
+  return Object.freeze({
+    invalidateQueryKey,
+    listUrlTemplate,
+    navigateToView,
+    navigateToList
+  });
+}
+
+function useCrudAddEdit({
+  resource = null,
+  operationName = "",
+  formFields = [],
+  addEditOptions = {},
+  saveSuccess = {},
+  fieldBinding = null,
+  createModel = null,
+  buildPayload = null,
+  mapPayloadToModel = null,
+  input = null
+} = {}) {
+  const router = useRouter();
+  const route = useRoute();
+  const normalizedFields = normalizeCrudFormFields(formFields);
+  const normalizedAddEditOptions = asPlainObject(addEditOptions);
+  const resolvedResource = normalizedAddEditOptions.resource || resource;
+  const resolvedTransport = resolveCrudJsonApiTransport(
+    normalizedAddEditOptions.transport,
+    resolvedResource,
+    {
+      mode: "add-edit",
+      operationName
+    }
+  );
+  const resolvedRealtime = resolveOperationRealtimeOptions({
+    realtime: normalizedAddEditOptions.realtime,
+    fallbackRealtime: resolvedResource?.operations?.[operationName]?.realtime ||
+      resolvedResource?.operations?.list?.realtime ||
+      null
+  });
+  const saveSuccessOptions = normalizeSaveSuccessOptions(saveSuccess);
+  const defaultFieldErrorKeys = normalizedFields.map((field) => field.key);
+  const providedFieldErrorKeys = normalizeFieldErrorKeys(normalizedAddEditOptions.fieldErrorKeys);
+  const fieldErrorKeys = providedFieldErrorKeys.length > 0 ? providedFieldErrorKeys : defaultFieldErrorKeys;
+  const providedModel = normalizedAddEditOptions.model;
+  const hasProvidedModel = Boolean(providedModel && typeof providedModel === "object" && !Array.isArray(providedModel));
+  const defaultModel = typeof createModel === "function"
+    ? 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 applyBoundFieldValues(target = {}) {
+    Object.assign(target, boundFieldValues.value);
+    return target;
+  }
+
+  watch(
+    boundFieldValues,
+    () => {
+      applyBoundFieldValues(form);
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  const inputOverride = input || normalizedAddEditOptions.input || null;
+  const buildPayloadOverride = typeof buildPayload === "function"
+    ? buildPayload
+    : (typeof normalizedAddEditOptions.buildRawPayload === "function" ? normalizedAddEditOptions.buildRawPayload : null);
+  const mapPayloadToModelOverride = typeof mapPayloadToModel === "function"
+    ? mapPayloadToModel
+    : (typeof normalizedAddEditOptions.mapLoadedToModel === "function" ? normalizedAddEditOptions.mapLoadedToModel : null);
+  const onSaveSuccessOverride = typeof normalizedAddEditOptions.onSaveSuccess === "function"
+    ? normalizedAddEditOptions.onSaveSuccess
+    : null;
+  const shouldApplyDefaultMapPayload = normalizedAddEditOptions.readEnabled !== false;
+  const resolvedInput = inputOverride || resolvedResource?.operations?.[operationName]?.body || null;
+
+  function resolveBuildRawPayload(model = {}, context = {}) {
+    const payload = buildPayloadOverride
+      ? buildPayloadOverride(model, {
+          ...context,
+          fields: normalizedFields
+        })
+      : buildCrudFormPayload(normalizedFields, model);
+    applyBoundFieldValues(payload);
+
+    return payload;
+  }
+
+  const effectiveMapLoadedToModel = mapPayloadToModelOverride
+    ? (model = {}, payload = {}, context = {}) => {
+        mapPayloadToModelOverride(model, payload, {
+          ...context,
+          fields: normalizedFields
+        });
+        applyBoundFieldValues(model);
+      }
+    : (shouldApplyDefaultMapPayload
+        ? (model = {}, payload = {}) => {
+            applyCrudPayloadToForm(normalizedFields, model, payload);
+            applyBoundFieldValues(model);
+          }
+        : undefined);
+
+  let addEditRuntime = null;
+
+  async function handleSaveSuccess(payload, context = {}) {
+    if (onSaveSuccessOverride) {
+      await onSaveSuccessOverride(payload, context);
+      return;
+    }
+
+    const queryClient = context?.queryClient;
+    if (queryClient && saveSuccessOptions.invalidateQueryKey?.length > 0) {
+      await queryClient.invalidateQueries({
+        queryKey: saveSuccessOptions.invalidateQueryKey
+      });
+    }
+
+    if (saveSuccessOptions.navigateToView) {
+      const viewUrl = addEditRuntime?.resolveSavedViewUrl(payload) ||
+        addEditRuntime?.resolveViewUrl(addEditRuntime?.recordId);
+      if (viewUrl) {
+        await router.push(viewUrl);
+        return;
+      }
+    }
+
+    if (!saveSuccessOptions.navigateToList) {
+      return;
+    }
+
+    const listUrlTemplate = saveSuccessOptions.listUrlTemplate ||
+      String(normalizedAddEditOptions.listUrlTemplate || "").trim();
+    const listUrl = addEditRuntime?.resolveParams(listUrlTemplate);
+    if (listUrl) {
+      await router.push(listUrl);
+    }
+  }
+
+  const addEdit = useAddEdit({
+    ...normalizedAddEditOptions,
+    resource: resolvedResource,
+    client: resolveCrudHttpClient(resolvedResource, {
+      client: normalizedAddEditOptions.client
+    }),
+    transport: resolvedTransport,
+    model: form,
+    fieldErrorKeys,
+    input: resolvedInput,
+    buildRawPayload: resolveBuildRawPayload,
+    mapLoadedToModel: effectiveMapLoadedToModel,
+    realtime: resolvedRealtime,
+    onSaveSuccess: handleSaveSuccess
+  });
+  addEditRuntime = addEdit;
+
+  function resolveFieldErrors(fieldKey = "") {
+    return resolveCrudFieldErrors(addEdit.fieldErrors, fieldKey);
+  }
+
+  const showFormSkeleton = computed(() => {
+    const hasResolvedData = hasResolvedQueryData({
+      query: addEdit?.resource?.query,
+      data: addEdit?.resource?.data
+    });
+
+    return Boolean(addEdit.isInitialLoading) && !hasResolvedData;
+  });
+
+  return proxyRefs({
+    formFields: normalizedFields,
+    fieldErrorKeys,
+    form,
+    addEdit,
+    showFormSkeleton,
+    resolveFieldErrors
+  });
+}
+
+export { useCrudAddEdit };

package/src/client/composables/records/useCrudList.js

@@ -0,0 +1,101 @@
+import { computed, unref } from "vue";
+import { useRoute } from "vue-router";
+import { resolveCrudJsonApiTransport } from "../crud/crudJsonApiTransportSupport.js";
+import { resolveCrudHttpClient } from "../crud/crudHttpClientSupport.js";
+import {
+  resolveLookupFieldDisplayValue,
+  resolveRecordTitle
+} from "../crud/crudLookupFieldLabelSupport.js";
+import { resolveCrudBoundValues } from "../crud/crudBindingSupport.js";
+import { resolveCrudListParentDescriptor } from "../internal/crudListParentTitleSupport.js";
+import {
+  resolveRouteParamsSource,
+  toRouteParamValue
+} from "../support/routeTemplateHelpers.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { resolveOperationRealtimeOptions } from "../useRealtimeQueryInvalidation.js";
+import { useList } from "./useList.js";
+
+function resolveRequestQueryParamsInput(requestQueryParams, context = {}) {
+  if (typeof requestQueryParams === "function") {
+    return asPlainObject(requestQueryParams(context));
+  }
+
+  return asPlainObject(unref(requestQueryParams));
+}
+
+function resolveCrudParentRequestQueryParams({ resource = {}, route = null, recordIdParam = "recordId" } = {}) {
+  const descriptor = resolveCrudListParentDescriptor({
+    resource,
+    route,
+    recordIdParam
+  });
+  if (!descriptor?.fieldKey || !descriptor?.routeParamKey) {
+    return {};
+  }
+
+  const routeParams = resolveRouteParamsSource(route?.params || {});
+  const routeParamValue = toRouteParamValue(routeParams[descriptor.routeParamKey]);
+  if (!routeParamValue) {
+    return {};
+  }
+
+  return {
+    [descriptor.fieldKey]: routeParamValue
+  };
+}
+
+function useCrudList({
+  resource = null,
+  requestQueryParams = null,
+  parentBinding = null,
+  recordIdParam = "recordId",
+  route = null,
+  realtime = undefined,
+  ...listOptions
+} = {}) {
+  const sourceRoute = route && typeof route === "object" ? route : useRoute();
+  const boundParentRequestQueryParams = computed(() => {
+    return resolveCrudBoundValues({
+      binding: parentBinding,
+      routeValues: resolveCrudParentRequestQueryParams({
+        resource,
+        route: sourceRoute,
+        recordIdParam
+      }),
+      context: Object.freeze({
+        route: sourceRoute,
+        resource,
+        recordIdParam
+      })
+    });
+  });
+  const records = useList({
+    ...listOptions,
+    client: resolveCrudHttpClient(resource, {
+      client: listOptions.client
+    }),
+    transport: resolveCrudJsonApiTransport(listOptions.transport, resource, {
+      mode: "list"
+    }),
+    realtime: resolveOperationRealtimeOptions({
+      realtime,
+      fallbackRealtime: resource?.operations?.list?.realtime || null
+    }),
+    recordIdParam,
+    requestQueryParams(context = {}) {
+      const baseRequestQueryParams = resolveRequestQueryParamsInput(requestQueryParams, context);
+
+      return {
+        ...baseRequestQueryParams,
+        ...boundParentRequestQueryParams.value
+      };
+    }
+  });
+
+  records.resolveFieldDisplay = resolveLookupFieldDisplayValue;
+  records.resolveRecordTitle = resolveRecordTitle;
+  return records;
+}
+
+export { useCrudList };

package/src/client/composables/records/useCrudView.js

@@ -0,0 +1,47 @@
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import {
+  resolveCrudJsonApiTransport
+} from "../crud/crudJsonApiTransportSupport.js";
+import { resolveCrudHttpClient } from "../crud/crudHttpClientSupport.js";
+import {
+  resolveLookupFieldDisplayValue,
+  resolveRecordTitle
+} from "../crud/crudLookupFieldLabelSupport.js";
+import { resolveCrudBoundValues } from "../crud/crudBindingSupport.js";
+import { asPlainObject } from "../support/scopeHelpers.js";
+import { useView } from "./useView.js";
+
+function useCrudView({
+  resource = null,
+  paramBinding = null,
+  route = null,
+  ...viewOptions
+} = {}) {
+  const sourceRoute = route && typeof route === "object" ? route : useRoute();
+  const boundRouteParams = computed(() => {
+    return resolveCrudBoundValues({
+      binding: paramBinding,
+      routeValues: asPlainObject(sourceRoute?.params || {}),
+      context: Object.freeze({
+        route: sourceRoute
+      })
+    });
+  });
+  const view = useView({
+    ...viewOptions,
+    resource,
+    client: resolveCrudHttpClient(resource, {
+      client: viewOptions.client
+    }),
+    transport: resolveCrudJsonApiTransport(viewOptions.transport, resource, {
+      mode: "view"
+    }),
+    routeParams: boundRouteParams
+  });
+  view.resolveFieldDisplay = resolveLookupFieldDisplayValue;
+  view.resolveRecordTitle = resolveRecordTitle;
+  return view;
+}
+
+export { useCrudView };