@jskit-ai/users-web 0.1.80 → 0.1.82

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

@@ -163,9 +163,29 @@ function useAddEdit({
   );
   const loadError = operationScope.loadError(endpointResource.loadError);
   const isLoading = operationScope.isLoading(endpointResource.isLoading);
+  const canRetryLoad = computed(() => Boolean(readEnabled !== false && endpointResource?.reload));
+
+  async function refresh() {
+    if (!canRetryLoad.value) {
+      return null;
+    }
+
+    return endpointResource.reload();
+  }
+
   setupOperationErrorReporting({
     source: `${placementSource}.load`,
-    loadError
+    loadError,
+    dedupeWindowMs: 0,
+    loadActionFactory: () => canRetryLoad.value
+      ? {
+        label: "Retry",
+        dismissOnRun: true,
+        handler() {
+          void refresh();
+        }
+      }
+      : null
   });
 
   return proxyRefs({
@@ -177,13 +197,14 @@ function useAddEdit({
     isRefetching,
     isFieldLocked,
     isSubmitDisabled,
+    canRetryLoad,
     isLoading,
     isSaving: addEdit.saving,
     fieldErrors: addEdit.fieldErrors,
     message: addEdit.message,
     messageType: addEdit.messageType,
     submit: addEdit.submit,
-    refresh: endpointResource.reload,
+    refresh,
     resource: endpointResource,
     recordId: addEditUiRuntime.recordId,
     listUrl: addEditUiRuntime.listUrl,

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

@@ -1,7 +1,10 @@
 import { computed, unref } from "vue";
 import { useRoute } from "vue-router";
 import { resolveCrudJsonApiTransport } from "../crud/crudJsonApiTransportSupport.js";
-import { resolveLookupFieldDisplayValue } from "../crud/crudLookupFieldLabelSupport.js";
+import {
+  resolveLookupFieldDisplayValue,
+  resolveRecordTitle
+} from "../crud/crudLookupFieldLabelSupport.js";
 import { resolveCrudBoundValues } from "../crud/crudBindingSupport.js";
 import { resolveCrudListParentDescriptor } from "../internal/crudListParentTitleSupport.js";
 import {
@@ -81,6 +84,7 @@ function useCrudList({
   });
 
   records.resolveFieldDisplay = resolveLookupFieldDisplayValue;
+  records.resolveRecordTitle = resolveRecordTitle;
   return records;
 }
 

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

@@ -97,6 +97,7 @@ function useView({
     readMethod,
     readQuery: requestQueryRuntime.requestQuery,
     transport,
+    refreshOnPull: true,
     fallbackLoadError
   });
 

package/src/client/composables/runtime/operationUiHelpers.js

@@ -12,8 +12,8 @@ function setupOperationErrorReporting({
   notFoundError = null,
   loadActionFactory = null,
   notFoundActionFactory = null,
-  loadChannel = "banner",
-  notFoundChannel = "banner",
+  loadChannel = "",
+  notFoundChannel = "",
   loadSeverity = "error",
   notFoundSeverity = "warning",
   dedupeWindowMs = 2000
@@ -27,7 +27,8 @@ function setupOperationErrorReporting({
 
   function watchMessage(value, {
     kind = "load",
-    channel = "banner",
+    channel = "",
+    intent = "resource-load",
     severity = "error",
     actionFactory = null
   } = {}) {
@@ -60,6 +61,7 @@ function setupOperationErrorReporting({
         const reportResult = runtime.report({
           source: normalizedSource,
           message: nextMessage,
+          intent,
           severity,
           channel,
           action,
@@ -83,6 +85,7 @@ function setupOperationErrorReporting({
     watchMessage(loadError, {
       kind: "load",
       channel: loadChannel,
+      intent: "resource-load",
       severity: loadSeverity,
       actionFactory: loadActionFactory
     });
@@ -92,6 +95,7 @@ function setupOperationErrorReporting({
     watchMessage(notFoundError, {
       kind: "not-found",
       channel: notFoundChannel,
+      intent: "resource-load",
       severity: notFoundSeverity,
       actionFactory: notFoundActionFactory
     });

package/src/client/composables/runtime/useEndpointResource.js

@@ -4,7 +4,10 @@ import { usersWebHttpClient } from "../../lib/httpClient.js";
 import { asPlainObject } from "../support/scopeHelpers.js";
 import { resolveEnabledRef, resolveTextRef } from "../support/refValueHelpers.js";
 import { toQueryErrorMessage } from "../support/errorMessageHelpers.js";
-import { hasResolvedQueryData } from "../support/resourceLoadStateHelpers.js";
+import {
+  hasResolvedQueryData,
+  mergeQueryMeta
+} from "../support/resourceLoadStateHelpers.js";
 
 function buildEndpointReadRequestOptions({
   method = "GET",
@@ -67,6 +70,7 @@ function useEndpointResource({
   writeMethod = "PATCH",
   readQuery = null,
   transport = null,
+  refreshOnPull = false,
   queryOptions = null,
   mutationOptions = null,
   fallbackLoadError = "Unable to load resource.",
@@ -96,7 +100,13 @@ function useEndpointResource({
       });
     },
     enabled: queryEnabled,
-    ...(asPlainObject(queryOptions))
+    ...(refreshOnPull
+      ? mergeQueryMeta(asPlainObject(queryOptions), {
+        jskit: {
+          refreshOnPull: true
+        }
+      })
+      : asPlainObject(queryOptions))
   });
 
   const mutation = useMutation({

package/src/client/composables/runtime/useUiFeedback.js

@@ -5,8 +5,8 @@ import { toUiErrorMessage } from "../support/errorMessageHelpers.js";
 function useUiFeedback({
   initialType = "success",
   source = "users-web.ui-feedback",
-  successChannel = "snackbar",
-  errorChannel = "banner",
+  successChannel = "",
+  errorChannel = "",
   dedupeWindowMs = 2000
 } = {}) {
   const message = ref("");
@@ -55,6 +55,7 @@ function useUiFeedback({
     errorRuntime.report({
       source: normalizedSource,
       message: normalizedMessage,
+      intent: "action-feedback",
       severity: "success",
       channel: successChannel,
       dedupeKey: `${normalizedSource}:success:${normalizedMessage}`,
@@ -73,6 +74,7 @@ function useUiFeedback({
       source: normalizedSource,
       message: message.value,
       cause: errorValue || null,
+      intent: "action-feedback",
       severity: "error",
       channel: errorChannel,
       dedupeKey: `${normalizedSource}:error:${message.value}`,

package/src/client/composables/support/resourceLoadStateHelpers.js

@@ -7,4 +7,36 @@ function hasResolvedQueryData({ query = null, data = null } = {}) {
   return querySucceeded || hasDataPayload;
 }
 
-export { hasResolvedQueryData };
+function mergeQueryMeta(queryOptions = null, meta = {}) {
+  const sourceOptions =
+    queryOptions && typeof queryOptions === "object" && !Array.isArray(queryOptions) ? queryOptions : {};
+  const sourceMeta =
+    sourceOptions.meta && typeof sourceOptions.meta === "object" && !Array.isArray(sourceOptions.meta)
+      ? sourceOptions.meta
+      : {};
+  const sourceJskitMeta =
+    sourceMeta.jskit && typeof sourceMeta.jskit === "object" && !Array.isArray(sourceMeta.jskit)
+      ? sourceMeta.jskit
+      : {};
+  const nextJskitMeta =
+    meta.jskit && typeof meta.jskit === "object" && !Array.isArray(meta.jskit)
+      ? meta.jskit
+      : {};
+
+  return {
+    ...sourceOptions,
+    meta: {
+      ...sourceMeta,
+      ...meta,
+      jskit: {
+        ...sourceJskitMeta,
+        ...nextJskitMeta
+      }
+    }
+  };
+}
+
+export {
+  hasResolvedQueryData,
+  mergeQueryMeta
+};

package/src/client/composables/useAccountSettingsRuntime.js

@@ -127,7 +127,7 @@ function useAccountSettingsRuntime() {
   function reportAccountFeedback({
     message,
     severity = "error",
-    channel = "banner",
+    channel = "",
     dedupeKey = ""
   } = {}) {
     const normalizedMessage = String(message || "").trim();
@@ -138,6 +138,7 @@ function useAccountSettingsRuntime() {
     errorRuntime.report({
       source: "users-web.account-settings-runtime",
       message: normalizedMessage,
+      intent: "action-feedback",
       severity,
       channel,
       dedupeKey: dedupeKey || `users-web.account-settings-runtime:${severity}:${normalizedMessage}`,
@@ -301,6 +302,12 @@ function useAccountSettingsRuntime() {
 
   const loadingSettings = computed(() => Boolean(settingsView.isLoading));
   const refreshingSettings = computed(() => Boolean(settingsView.isRefetching));
+  const settingsLoadError = computed(() => String(settingsView.loadError || "").trim());
+
+  async function refreshSettings() {
+    return settingsView.refresh();
+  }
+
   async function submitProfile() {
     await profileAddEdit.submit();
   }
@@ -384,6 +391,8 @@ function useAccountSettingsRuntime() {
     backNavigationTarget,
     loadingSettings,
     refreshingSettings,
+    settingsLoadError,
+    refreshSettings,
     profile,
     preferences,
     notifications

package/src/client/composables/useCrudAddEditScreen.js

@@ -0,0 +1,88 @@
+import { computed, unref } from "vue";
+import { useRoute } from "vue-router";
+import { useCrudAddEdit } from "./records/useCrudAddEdit.js";
+
+function normalizeProvidedScreen(screen = null) {
+  return screen && typeof screen === "object" && !Array.isArray(screen)
+    ? screen
+    : null;
+}
+
+function useCrudAddEditScreen({
+  screen = null,
+  mode = "new",
+  title = "",
+  subtitle = "",
+  saveLabel = "Save",
+  cancelTo = "",
+  resource = null,
+  operationName = "",
+  formFields = [],
+  addEditOptions = {},
+  saveSuccess = {},
+  fieldBinding = null,
+  createModel = null,
+  buildPayload = null,
+  mapPayloadToModel = null,
+  input = null,
+  preserveCancelQuery = false
+} = {}) {
+  const providedScreen = normalizeProvidedScreen(screen);
+  if (providedScreen) {
+    return providedScreen;
+  }
+
+  const route = useRoute();
+  const formRuntime = useCrudAddEdit({
+    resource,
+    operationName,
+    formFields,
+    addEditOptions,
+    saveSuccess,
+    fieldBinding,
+    createModel,
+    buildPayload,
+    mapPayloadToModel,
+    input
+  });
+  const resolvedMode = computed(() => String(unref(mode) || "new").trim() || "new");
+  const resolvedTitle = computed(() => String(unref(title) || "").trim());
+  const resolvedSubtitle = computed(() => String(unref(subtitle) || "").trim());
+  const resolvedSaveLabel = computed(() => String(unref(saveLabel) || "Save").trim() || "Save");
+  const resolvedCancelTo = computed(() => unref(cancelTo));
+
+  function resolveCancelTo(target = resolvedCancelTo.value) {
+    const resolvedTarget = unref(target);
+    if (!resolvedTarget) {
+      return "";
+    }
+
+    if (typeof resolvedTarget === "string") {
+      const resolvedPath = formRuntime.addEdit.resolveParams(resolvedTarget);
+      if (!preserveCancelQuery || !resolvedPath) {
+        return resolvedPath;
+      }
+      return {
+        path: resolvedPath,
+        query: route.query
+      };
+    }
+
+    return resolvedTarget;
+  }
+
+  return Object.freeze({
+    mode: resolvedMode,
+    title: resolvedTitle,
+    subtitle: resolvedSubtitle,
+    saveLabel: resolvedSaveLabel,
+    cancelTo: resolvedCancelTo,
+    formRuntime,
+    addEdit: formRuntime.addEdit,
+    formState: formRuntime.form,
+    resolveFieldErrors: formRuntime.resolveFieldErrors,
+    resolveCancelTo
+  });
+}
+
+export { useCrudAddEditScreen };

package/src/client/composables/useCrudListBulkActions.js

@@ -0,0 +1,147 @@
+import { computed, ref } from "vue";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import { defineCrudListBulkActions } from "../bulkActions.js";
+
+function normalizeSelectedId(value = "") {
+  return normalizeText(value);
+}
+
+function resolveActionKey(actionOrKey = "") {
+  return normalizeText(
+    actionOrKey && typeof actionOrKey === "object"
+      ? actionOrKey.key
+      : actionOrKey
+  );
+}
+
+function useCrudListBulkActions(actions = [], {
+  resolveRecordId = null,
+  resolveContext = null
+} = {}) {
+  const normalizedActions = defineCrudListBulkActions(actions);
+  const selectedIds = ref([]);
+  const selectedRecordMap = new Map();
+  const executingActionKey = ref("");
+
+  const selectedCount = computed(() => selectedIds.value.length);
+  const hasSelection = computed(() => selectedCount.value > 0);
+  const hasActions = computed(() => normalizedActions.length > 0);
+
+  function getRecordId(record = {}, index = 0) {
+    const resolvedId = typeof resolveRecordId === "function"
+      ? resolveRecordId(record, index)
+      : record?.id ?? record?.attributes?.id ?? index;
+    return normalizeSelectedId(resolvedId);
+  }
+
+  function setRecordSelected(record = {}, index = 0, selected = true) {
+    const recordId = getRecordId(record, index);
+    if (!recordId) {
+      return;
+    }
+
+    const nextIds = new Set(selectedIds.value);
+    if (selected) {
+      nextIds.add(recordId);
+      selectedRecordMap.set(recordId, record);
+    } else {
+      nextIds.delete(recordId);
+      selectedRecordMap.delete(recordId);
+    }
+
+    selectedIds.value = Array.from(nextIds);
+  }
+
+  function isRecordSelected(record = {}, index = 0) {
+    const recordId = getRecordId(record, index);
+    return recordId ? selectedIds.value.includes(recordId) : false;
+  }
+
+  function setVisibleSelected(records = [], selected = true) {
+    for (const [index, record] of (Array.isArray(records) ? records : []).entries()) {
+      setRecordSelected(record, index, selected);
+    }
+  }
+
+  function allVisibleSelected(records = []) {
+    const visibleRecords = Array.isArray(records) ? records : [];
+    return visibleRecords.length > 0 && visibleRecords.every((record, index) => isRecordSelected(record, index));
+  }
+
+  function someVisibleSelected(records = []) {
+    return (Array.isArray(records) ? records : []).some((record, index) => isRecordSelected(record, index));
+  }
+
+  function clearSelection() {
+    selectedIds.value = [];
+    selectedRecordMap.clear();
+  }
+
+  function findAction(actionOrKey = "") {
+    const actionKey = resolveActionKey(actionOrKey);
+    return normalizedActions.find((action) => action.key === actionKey) || null;
+  }
+
+  function isActionExecuting(actionOrKey = "") {
+    const actionKey = resolveActionKey(actionOrKey);
+    return Boolean(actionKey && executingActionKey.value === actionKey);
+  }
+
+  function isActionDisabled(actionOrKey = "") {
+    const action = findAction(actionOrKey);
+    if (!action || !hasSelection.value || executingActionKey.value) {
+      return true;
+    }
+    if (typeof action.disabled === "function") {
+      return Boolean(action.disabled({
+        selectedIds: selectedIds.value.slice(),
+        selectedRecords: Array.from(selectedRecordMap.values()),
+        action
+      }));
+    }
+    return Boolean(action.disabled);
+  }
+
+  async function execute(actionOrKey = "") {
+    const action = findAction(actionOrKey);
+    if (!action || typeof action.run !== "function" || isActionDisabled(action)) {
+      return null;
+    }
+
+    executingActionKey.value = action.key;
+    try {
+      const baseContext = typeof resolveContext === "function" ? resolveContext() : {};
+      return await action.run({
+        ...(baseContext && typeof baseContext === "object" && !Array.isArray(baseContext) ? baseContext : {}),
+        action,
+        ids: selectedIds.value.slice(),
+        selectedIds: selectedIds.value.slice(),
+        selectedRecords: Array.from(selectedRecordMap.values()),
+        clearSelection
+      });
+    } finally {
+      executingActionKey.value = "";
+    }
+  }
+
+  return Object.freeze({
+    actions: normalizedActions,
+    selectedIds,
+    selectedCount,
+    hasActions,
+    hasSelection,
+    executingActionKey,
+    setRecordSelected,
+    isRecordSelected,
+    setVisibleSelected,
+    allVisibleSelected,
+    someVisibleSelected,
+    clearSelection,
+    findAction,
+    isActionDisabled,
+    isActionExecuting,
+    execute
+  });
+}
+
+export { useCrudListBulkActions };

package/src/client/composables/useCrudListScreen.js

@@ -0,0 +1,107 @@
+import { computed } from "vue";
+import { useCrudList } from "./records/useCrudList.js";
+import { useCrudListBulkActions } from "./useCrudListBulkActions.js";
+import { useCrudListFilters } from "./useCrudListFilters.js";
+
+function formatCrudListCardValue(value) {
+  if (value === null || value === undefined || value === "") {
+    return "-";
+  }
+  if (value === true) {
+    return "Yes";
+  }
+  if (value === false) {
+    return "No";
+  }
+  return value;
+}
+
+function useCrudListScreen({
+  adapter = null,
+  resource = null,
+  resourceNamespace = "resource",
+  apiSuffix = "",
+  recordIdParam = "recordId",
+  recordIdSelector = null,
+  titleFallbackFieldKey = "",
+  viewUrlTemplate = "",
+  editUrlTemplate = "",
+  newUrlTemplate = "",
+  recordChangedEvents = [],
+  listFilters = {},
+  listBulkActions = [],
+  routeQueryBlacklist = Object.freeze(["include", "cursor", "limit"]),
+  fallbackLoadError = "Unable to load records."
+} = {}) {
+  const filterRuntime = useCrudListFilters(listFilters);
+  const normalizedRecordChangedEvents = Array.isArray(recordChangedEvents)
+    ? recordChangedEvents
+    : [];
+  const normalizedResourceNamespace = String(resourceNamespace || "resource").trim() || "resource";
+  const records = useCrudList({
+    adapter: adapter || undefined,
+    resource,
+    apiSuffix,
+    queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
+      "ui-generator",
+      normalizedResourceNamespace,
+      "list",
+      String(surfaceId || ""),
+      String(workspaceSlug || "")
+    ],
+    search: {
+      enabled: true,
+      mode: "query"
+    },
+    queryParams: filterRuntime.queryParams,
+    syncToRoute: {
+      enabled: true,
+      mode: "replace",
+      search: true,
+      queryParams: true,
+      queryParamBlacklist: routeQueryBlacklist
+    },
+    placementSource: `ui-generator.${normalizedResourceNamespace}.list`,
+    fallbackLoadError,
+    recordIdParam,
+    recordIdSelector,
+    viewUrlTemplate,
+    editUrlTemplate,
+    realtime: normalizedRecordChangedEvents.length > 0
+      ? {
+          events: normalizedRecordChangedEvents
+        }
+      : null
+  });
+  const bulkActions = useCrudListBulkActions(listBulkActions, {
+    resolveRecordId: (record, index) => records.resolveRowKey(record, index),
+    resolveContext: () => ({
+      records,
+      reload: records.reload
+    })
+  });
+  const listPrimaryAction = computed(() =>
+    newUrlTemplate ? records.resolveParams(newUrlTemplate) : ""
+  );
+
+  function resolveRecordTitle(record) {
+    return records.resolveRecordTitle(record, {
+      fallbackKey: titleFallbackFieldKey,
+      defaultValue: "Record"
+    });
+  }
+
+  return Object.freeze({
+    records,
+    listFilters,
+    filterRuntime,
+    bulkActions,
+    listPrimaryAction,
+    hasViewUrl: Boolean(viewUrlTemplate),
+    hasEditUrl: Boolean(editUrlTemplate),
+    resolveRecordTitle,
+    formatListCardValue: formatCrudListCardValue
+  });
+}
+
+export { useCrudListScreen };

package/src/client/composables/useCrudViewScreen.js

@@ -0,0 +1,67 @@
+import { computed, unref } from "vue";
+import { useRoute } from "vue-router";
+import { useCrudView } from "./records/useCrudView.js";
+
+function useCrudViewScreen({
+  adapter = null,
+  resource = null,
+  resourceNamespace = "resource",
+  apiUrlTemplate = "",
+  recordIdParam = "recordId",
+  titleFallbackFieldKey = "",
+  listUrlTemplate = "",
+  editUrlTemplate = "",
+  recordChangedEvent = "",
+  fallbackLoadError = "Unable to load record.",
+  notFoundMessage = "Record not found."
+} = {}) {
+  const route = useRoute();
+  const normalizedResourceNamespace = String(resourceNamespace || "resource").trim() || "resource";
+  const view = useCrudView({
+    adapter: adapter || undefined,
+    resource,
+    apiUrlTemplate,
+    recordIdParam,
+    includeRecordIdInQueryKey: true,
+    queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
+      "ui-generator",
+      normalizedResourceNamespace,
+      "view",
+      String(surfaceId || ""),
+      String(workspaceSlug || "")
+    ],
+    placementSource: `ui-generator.${normalizedResourceNamespace}.view`,
+    fallbackLoadError,
+    notFoundMessage,
+    listUrlTemplate,
+    editUrlTemplate,
+    realtime: recordChangedEvent
+      ? {
+          event: recordChangedEvent
+        }
+      : null
+  });
+  const recordTitle = computed(() =>
+    view.resolveRecordTitle(view.record, {
+      fallbackKey: titleFallbackFieldKey,
+      defaultValue: "Record"
+    })
+  );
+
+  function resolveRouteLocation(urlTemplate = "") {
+    const path = view.resolveParams(unref(urlTemplate));
+    return path ? { path, query: route.query } : null;
+  }
+
+  const listLocation = computed(() => resolveRouteLocation(listUrlTemplate));
+  const editLocation = computed(() => resolveRouteLocation(editUrlTemplate));
+
+  return Object.freeze({
+    view,
+    recordTitle,
+    listLocation,
+    editLocation
+  });
+}
+
+export { useCrudViewScreen };

package/src/client/composables/usePagedCollection.js

@@ -3,6 +3,7 @@ import { useInfiniteQuery, useQueryClient } from "@tanstack/vue-query";
 import { asPlainObject } from "./support/scopeHelpers.js";
 import { resolveEnabledRef } from "./support/refValueHelpers.js";
 import { toQueryErrorMessage } from "./support/errorMessageHelpers.js";
+import { mergeQueryMeta } from "./support/resourceLoadStateHelpers.js";
 
 function defaultSelectItems(page) {
   return Array.isArray(page?.items) ? page.items : [];
@@ -83,7 +84,11 @@ function usePagedCollection({
     queryFn,
     getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
       getNextPageParam(lastPage, allPages, lastPageParam, allPageParams),
-    ...(asPlainObject(queryOptions))
+    ...mergeQueryMeta(asPlainObject(queryOptions), {
+      jskit: {
+        refreshOnPull: true
+      }
+    })
   });
 
   const pages = computed(() => {