@jskit-ai/users-web 0.1.81 → 0.1.83

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/useCrudAddEdit.js

@@ -6,6 +6,7 @@ import { useAddEdit } from "./useAddEdit.js";
 import {
   resolveCrudBoundValues,
 } from "../crud/crudBindingSupport.js";
+import { resolveOperationRealtimeOptions } from "../useRealtimeQueryInvalidation.js";
 import {
   normalizeCrudFormFields,
   createCrudFormModel,
@@ -64,6 +65,12 @@ function useCrudAddEdit({
       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);
@@ -185,6 +192,7 @@ function useCrudAddEdit({
     input: resolvedInput,
     buildRawPayload: resolveBuildRawPayload,
     mapLoadedToModel: effectiveMapLoadedToModel,
+    realtime: resolvedRealtime,
     onSaveSuccess: handleSaveSuccess
   });
   addEditRuntime = addEdit;

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 {
@@ -9,6 +12,7 @@ import {
   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 = {}) {
@@ -46,6 +50,7 @@ function useCrudList({
   parentBinding = null,
   recordIdParam = "recordId",
   route = null,
+  realtime = undefined,
   ...listOptions
 } = {}) {
   const sourceRoute = route && typeof route === "object" ? route : useRoute();
@@ -69,6 +74,10 @@ function useCrudList({
     transport: resolveCrudJsonApiTransport(listOptions.transport, resource, {
       mode: "list"
     }),
+    realtime: resolveOperationRealtimeOptions({
+      realtime,
+      fallbackRealtime: resource?.operations?.list?.realtime || null
+    }),
     recordIdParam,
     requestQueryParams(context = {}) {
       const baseRequestQueryParams = resolveRequestQueryParamsInput(requestQueryParams, context);
@@ -81,6 +90,7 @@ function useCrudList({
   });
 
   records.resolveFieldDisplay = resolveLookupFieldDisplayValue;
+  records.resolveRecordTitle = resolveRecordTitle;
   return records;
 }
 

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

@@ -29,6 +29,7 @@ function useCrudView({
   });
   const view = useView({
     ...viewOptions,
+    resource,
     transport: resolveCrudJsonApiTransport(viewOptions.transport, resource, {
       mode: "view"
     }),

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

@@ -8,6 +8,7 @@ import { setupOperationErrorReporting } from "../runtime/operationUiHelpers.js";
 import { createViewUiRuntime } from "../runtime/viewUiRuntime.js";
 import { createRequestQueryRuntime } from "../support/requestQueryRuntimeSupport.js";
 import { resolveRouteParamNamesInOrder } from "../support/routeTemplateHelpers.js";
+import { resolveOperationRealtimeOptions } from "../useRealtimeQueryInvalidation.js";
 
 function useView({
   ownershipFilter = ROUTE_VISIBILITY_WORKSPACE,
@@ -33,7 +34,7 @@ function useView({
   listUrlTemplate = "",
   editUrlTemplate = "",
   includeRecordIdInQueryKey = false,
-  realtime = null,
+  realtime = undefined,
   adapter = null
 } = {}) {
   const route = useRoute();
@@ -63,7 +64,12 @@ function useView({
     permissionSets: {
       view: viewPermissions
     },
-    realtime
+    realtime: resolveOperationRealtimeOptions({
+      realtime,
+      fallbackRealtime: resource?.operations?.view?.realtime ||
+        resource?.operations?.list?.realtime ||
+        null
+    })
   });
   const queryParamsContext = computed(() => {
     return Object.freeze({
@@ -97,6 +103,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,11 @@ 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 { useOperationRealtime } from "../useRealtimeQueryInvalidation.js";
+import {
+  hasResolvedQueryData,
+  mergeQueryMeta
+} from "../support/resourceLoadStateHelpers.js";
 
 function buildEndpointReadRequestOptions({
   method = "GET",
@@ -67,6 +71,8 @@ function useEndpointResource({
   writeMethod = "PATCH",
   readQuery = null,
   transport = null,
+  refreshOnPull = false,
+  realtime = null,
   queryOptions = null,
   mutationOptions = null,
   fallbackLoadError = "Unable to load resource.",
@@ -96,7 +102,18 @@ function useEndpointResource({
       });
     },
     enabled: queryEnabled,
-    ...(asPlainObject(queryOptions))
+    ...(refreshOnPull
+      ? mergeQueryMeta(asPlainObject(queryOptions), {
+        jskit: {
+          refreshOnPull: true
+        }
+      })
+      : asPlainObject(queryOptions))
+  });
+  const realtimeBinding = useOperationRealtime({
+    realtime,
+    queryKey,
+    enabled: queryEnabled
   });
 
   const mutation = useMutation({
@@ -158,6 +175,7 @@ function useEndpointResource({
     isSaving,
     loadError,
     saveError,
+    realtime: realtimeBinding,
     reload,
     save
   });

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 };