@jskit-ai/http-web 0.1.1

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

@@ -0,0 +1,146 @@
+import { computed, proxyRefs, ref, watch } from "vue";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import {
+  defineCrudListFilters,
+  CRUD_LIST_FILTER_TYPE_RECORD_ID,
+  CRUD_LIST_FILTER_TYPE_RECORD_ID_MANY
+} from "@jskit-ai/resource-crud-core/shared/crudListFilters";
+import { useList } from "./records/useList.js";
+import {
+  normalizeLookupQueryKeyPrefix,
+  normalizeLookupLabelResolverMap,
+  normalizeLookupRequestQueryParamsMap,
+  resolveLookupSelectedValues,
+  createLookupOptionsFromItems,
+  mergeSelectedLookupOptions,
+  resolveLookupOptionLabel
+} from "./internal/crudListFilterLookupSupport.js";
+import { inferCrudLookupJsonApiTransport } from "./crud/crudJsonApiTransportSupport.js";
+
+function useCrudListFilterLookups(
+  definitions = {},
+  {
+    values = {},
+    adapter = null,
+    recordIdParam = "recordId",
+    queryKeyPrefix = [],
+    placementSourcePrefix = "",
+    requestQueryParams = {},
+    labelResolvers = {}
+  } = {}
+) {
+  const filters = defineCrudListFilters(definitions);
+  const filterEntries = Object.values(filters);
+  const normalizedQueryKeyPrefix = normalizeLookupQueryKeyPrefix(queryKeyPrefix);
+  const normalizedPlacementSourcePrefix = normalizeText(placementSourcePrefix);
+  const normalizedLabelResolvers = normalizeLookupLabelResolverMap(labelResolvers);
+  const normalizedRequestQueryParams = normalizeLookupRequestQueryParamsMap(requestQueryParams);
+  const lookups = {};
+
+  for (const filter of filterEntries) {
+    if (
+      filter.type !== CRUD_LIST_FILTER_TYPE_RECORD_ID &&
+      filter.type !== CRUD_LIST_FILTER_TYPE_RECORD_ID_MANY
+    ) {
+      continue;
+    }
+    if (!filter.lookup?.apiSuffix) {
+      continue;
+    }
+    const transport = inferCrudLookupJsonApiTransport({
+      apiPath: filter.lookup.apiSuffix
+    });
+
+    const runtime = useList({
+      adapter: adapter || undefined,
+      apiSuffix: filter.lookup.apiSuffix,
+      ...(transport ? { transport } : {}),
+      queryKeyFactory: (surfaceId = "", scopeParamValue = "") => [
+        ...normalizedQueryKeyPrefix,
+        filter.key,
+        String(surfaceId || ""),
+        String(scopeParamValue || "")
+      ],
+      search: {
+        enabled: true,
+        mode: "query"
+      },
+      ...(Object.hasOwn(normalizedRequestQueryParams, filter.key)
+        ? { requestQueryParams: normalizedRequestQueryParams[filter.key] }
+        : {}),
+      placementSource: normalizedPlacementSourcePrefix
+        ? `${normalizedPlacementSourcePrefix}.${filter.key}`
+        : `crud.list-filter.lookup.${filter.key}`,
+      fallbackLoadError: `Unable to load filter options (${filter.lookup.apiSuffix}).`,
+      recordIdParam,
+      recordIdSelector: (item = {}) => item[filter.lookup.valueKey || "id"],
+      viewUrlTemplate: "",
+      editUrlTemplate: ""
+    });
+
+    const cachedOptions = ref(new Map());
+    const selectedValues = computed(() => resolveLookupSelectedValues(filter, values?.[filter.key]));
+    const currentOptions = computed(() => createLookupOptionsFromItems(
+      Array.isArray(runtime.items) ? runtime.items : [],
+      filter,
+      normalizedLabelResolvers[filter.key]
+    ));
+    const options = computed(() => {
+      return mergeSelectedLookupOptions(
+        currentOptions.value,
+        selectedValues.value,
+        cachedOptions.value
+      );
+    });
+
+    watch(currentOptions, (nextOptions) => {
+      const nextCache = new Map(cachedOptions.value);
+      for (const option of nextOptions) {
+        nextCache.set(option.value, option);
+      }
+      cachedOptions.value = nextCache;
+    }, { immediate: true });
+
+    lookups[filter.key] = proxyRefs({
+      filter,
+      options,
+      searchQuery: computed(() => String(runtime.searchQuery || "")),
+      isLoading: computed(() => {
+        return Boolean(runtime.isInitialLoading || runtime.isFetching || runtime.isRefetching || runtime.isSearchDebouncing);
+      }),
+      resolveLabel(value, fallback = filter.label || "Option") {
+        return resolveLookupOptionLabel(options.value, cachedOptions.value, value, fallback);
+      },
+      setSearch(value = "") {
+        runtime.searchQuery = normalizeText(value);
+      }
+    });
+  }
+
+  function resolveLookup(filterKey = "") {
+    return lookups[normalizeText(filterKey)] || null;
+  }
+
+  return Object.freeze({
+    lookups: Object.freeze(lookups),
+    resolveLookup,
+    resolveLookupItems(filterKey = "") {
+      return resolveLookup(filterKey)?.options || [];
+    },
+    resolveLookupLoading(filterKey = "") {
+      return Boolean(resolveLookup(filterKey)?.isLoading);
+    },
+    resolveLookupSearch(filterKey = "") {
+      return String(resolveLookup(filterKey)?.searchQuery || "");
+    },
+    setLookupSearch(filterKey = "", value = "") {
+      resolveLookup(filterKey)?.setSearch(value);
+    },
+    resolveLookupLabel(filterKey = "", value = "", fallback = "Option") {
+      return resolveLookup(filterKey)?.resolveLabel(value, fallback)
+        || resolveLookupOptionLabel([], new Map(), value, fallback);
+    }
+  });
+}
+
+export { useCrudListFilterLookups };

package/src/client/composables/useCrudListFilters.js

@@ -0,0 +1,339 @@
+import { computed, reactive } from "vue";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import {
+  defineCrudListFilters,
+  createCrudListFilterEmptyValue,
+  createCrudListFilterInitialValue,
+  isCrudListFilterMultiValue,
+  isCrudListFilterStructuredValue,
+  normalizeCrudListFilterUiValue,
+  areCrudListFilterUiValuesEqual,
+  listCrudListFilterChipValues,
+  formatCrudListFilterDefaultChipLabel,
+  formatCrudListFilterQueryValue,
+  parseCrudListFilterQueryValue,
+  resolveCrudListFilterOptionLabel,
+  INVALID_CRUD_LIST_FILTER_QUERY_VALUE,
+  CRUD_LIST_FILTER_TYPE_FLAG
+} from "@jskit-ai/resource-crud-core/shared/crudListFilters";
+import { formatCrudListDateFilterChipLabel } from "../support/crudListDateFilterSupport.js";
+
+function normalizeFunctionMap(value = {}) {
+  const source = value && typeof value === "object" && !Array.isArray(value)
+    ? value
+    : {};
+  const normalized = {};
+
+  for (const [key, entry] of Object.entries(source)) {
+    const normalizedKey = normalizeText(key);
+    if (!normalizedKey || typeof entry !== "function") {
+      continue;
+    }
+
+    normalized[normalizedKey] = entry;
+  }
+
+  return Object.freeze(normalized);
+}
+
+function normalizePresetEntries(presets = []) {
+  const source = Array.isArray(presets) ? presets : [];
+  const normalized = [];
+  const seenKeys = new Set();
+
+  for (const rawPreset of source) {
+    if (!rawPreset || typeof rawPreset !== "object" || Array.isArray(rawPreset)) {
+      continue;
+    }
+
+    const key = normalizeText(rawPreset.key);
+    const label = normalizeText(rawPreset.label);
+    if (!key || !label || seenKeys.has(key)) {
+      continue;
+    }
+    seenKeys.add(key);
+
+    const values = rawPreset.values && typeof rawPreset.values === "object" && !Array.isArray(rawPreset.values)
+      ? rawPreset.values
+      : {};
+    const resolveValues = typeof rawPreset.resolveValues === "function"
+      ? rawPreset.resolveValues
+      : null;
+
+    normalized.push(Object.freeze({
+      key,
+      label,
+      values,
+      resolveValues
+    }));
+  }
+
+  return Object.freeze(normalized);
+}
+
+function resolvePresetValues(preset = {}, { values = {}, filters = {} } = {}) {
+  const rawValues = typeof preset.resolveValues === "function"
+    ? preset.resolveValues({
+        values,
+        filters,
+        presetKey: preset.key,
+        preset
+      })
+    : preset.values;
+
+  return rawValues && typeof rawValues === "object" && !Array.isArray(rawValues)
+    ? rawValues
+    : {};
+}
+
+function createRuntimeFilterValue(filter = {}) {
+  const initialValue = createCrudListFilterInitialValue(filter);
+  return isCrudListFilterStructuredValue(filter)
+    ? reactive(initialValue)
+    : initialValue;
+}
+
+function assignFilterValue(values, filter = {}, rawValue) {
+  const normalizedValue = normalizeCrudListFilterUiValue(filter, rawValue);
+
+  if (!isCrudListFilterStructuredValue(filter)) {
+    values[filter.key] = normalizedValue;
+    return;
+  }
+
+  if (values[filter.key] && typeof values[filter.key] === "object" && !Array.isArray(values[filter.key])) {
+    Object.assign(values[filter.key], normalizedValue);
+    return;
+  }
+
+  values[filter.key] = reactive(normalizedValue);
+}
+
+function resetFilterValue(values, filter = {}) {
+  assignFilterValue(values, filter, createCrudListFilterEmptyValue(filter));
+}
+
+function applyPresetFilterValue(values, filter = {}, rawValue) {
+  assignFilterValue(values, filter, rawValue);
+}
+
+function createQueryParams(values, filterEntries = []) {
+  const queryParams = {};
+
+  for (const filter of filterEntries) {
+    queryParams[filter.queryKey] = computed({
+      get() {
+        return formatCrudListFilterQueryValue(
+          filter,
+          normalizeCrudListFilterUiValue(filter, values[filter.key])
+        );
+      },
+      set(nextValue) {
+        assignFilterValue(values, filter, nextValue);
+      }
+    });
+  }
+
+  return Object.freeze(queryParams);
+}
+
+function resolveFilterRouteValue(filter, routeValue, { initial = false } = {}) {
+  if (routeValue === undefined) {
+    return initial
+      ? createCrudListFilterInitialValue(filter)
+      : createCrudListFilterEmptyValue(filter);
+  }
+
+  const parsedValue = parseCrudListFilterQueryValue(filter, routeValue);
+  return parsedValue === INVALID_CRUD_LIST_FILTER_QUERY_VALUE
+    ? createCrudListFilterInitialValue(filter)
+    : parsedValue;
+}
+
+function createRouteQueryValueResolvers(filterEntries = []) {
+  return Object.freeze(Object.fromEntries(
+    filterEntries.map((filter) => [
+      filter.queryKey,
+      (routeValue, context) => resolveFilterRouteValue(filter, routeValue, context)
+    ])
+  ));
+}
+
+function resolveAtomicValueLabel(filter = {}, value = "", labelResolvers = {}) {
+  const customResolver = labelResolvers[filter.key];
+  if (typeof customResolver === "function") {
+    const customLabel = normalizeText(customResolver(value, filter));
+    if (customLabel) {
+      return customLabel;
+    }
+  }
+
+  return resolveCrudListFilterOptionLabel(filter, value, {
+    fallback: String(value || "")
+  });
+}
+
+function formatDefaultChipLabel(filter = {}, chipValue, labelResolvers = {}) {
+  return formatCrudListDateFilterChipLabel(filter, chipValue)
+    || formatCrudListFilterDefaultChipLabel(filter, chipValue, {
+      resolveAtomicValue(value) {
+        return resolveAtomicValueLabel(filter, value, labelResolvers);
+      }
+    });
+}
+
+function useCrudListFilters(definitions = {}, { labelResolvers = {}, chipLabels = {}, presets = [] } = {}) {
+  const filters = defineCrudListFilters(definitions);
+  const filterEntries = Object.values(filters);
+  const normalizedLabelResolvers = normalizeFunctionMap(labelResolvers);
+  const normalizedChipLabels = normalizeFunctionMap(chipLabels);
+  const normalizedPresets = normalizePresetEntries(presets);
+  const values = reactive({});
+  const options = {};
+
+  for (const filter of filterEntries) {
+    values[filter.key] = createRuntimeFilterValue(filter);
+    if (Array.isArray(filter.options) && filter.options.length > 0) {
+      options[filter.key] = filter.options;
+    }
+  }
+
+  const queryParams = createQueryParams(values, filterEntries);
+  const routeQueryValueResolvers = createRouteQueryValueResolvers(filterEntries);
+
+  const activeChips = computed(() => {
+    const chips = [];
+
+    for (const filter of filterEntries) {
+      const customChipLabel = normalizedChipLabels[filter.key];
+      const chipValues = listCrudListFilterChipValues(filter, values[filter.key]);
+
+      for (const chipValue of chipValues) {
+        chips.push({
+          id: isCrudListFilterMultiValue(filter) ? `${filter.key}:${chipValue}` : filter.key,
+          filterKey: filter.key,
+          ...(isCrudListFilterMultiValue(filter) ? { value: chipValue } : {}),
+          label: normalizeText(customChipLabel?.(chipValue, filter, values))
+            || normalizeText(filter.chipLabel?.(chipValue, filter, values))
+            || formatDefaultChipLabel(filter, chipValue, normalizedLabelResolvers)
+        });
+      }
+    }
+
+    return chips;
+  });
+
+  const hasActiveFilters = computed(() => activeChips.value.length > 0);
+
+  function clearFilter(filterKey = "") {
+    const filter = filters[normalizeText(filterKey)];
+    if (!filter) {
+      return;
+    }
+
+    resetFilterValue(values, filter);
+  }
+
+  function clearFilters() {
+    for (const filter of filterEntries) {
+      resetFilterValue(values, filter);
+    }
+  }
+
+  function clearChip(chip = {}) {
+    const filter = filters[normalizeText(chip.filterKey)];
+    if (!filter) {
+      return;
+    }
+
+    if (isCrudListFilterMultiValue(filter)) {
+      assignFilterValue(
+        values,
+        filter,
+        (Array.isArray(values[filter.key]) ? values[filter.key] : [])
+          .filter((entry) => entry !== chip.value)
+      );
+      return;
+    }
+
+    resetFilterValue(values, filter);
+  }
+
+  function toggle(filterKey = "") {
+    const filter = filters[normalizeText(filterKey)];
+    if (!filter || filter.type !== CRUD_LIST_FILTER_TYPE_FLAG) {
+      return;
+    }
+
+    values[filter.key] = !values[filter.key];
+  }
+
+  function applyPreset(presetKey = "", { mode = "replace" } = {}) {
+    const preset = normalizedPresets.find((entry) => entry.key === normalizeText(presetKey));
+    if (!preset) {
+      return;
+    }
+
+    const presetValues = resolvePresetValues(preset, {
+      values,
+      filters
+    });
+
+    if (mode !== "merge") {
+      clearFilters();
+    }
+
+    for (const filter of filterEntries) {
+      if (!Object.hasOwn(presetValues, filter.key)) {
+        continue;
+      }
+
+      applyPresetFilterValue(values, filter, presetValues[filter.key]);
+    }
+  }
+
+  function matchesPreset(presetKey = "") {
+    const preset = normalizedPresets.find((entry) => entry.key === normalizeText(presetKey));
+    if (!preset) {
+      return false;
+    }
+
+    const presetValues = resolvePresetValues(preset, {
+      values,
+      filters
+    });
+    let matchedFilter = false;
+
+    for (const filter of filterEntries) {
+      if (!Object.hasOwn(presetValues, filter.key)) {
+        continue;
+      }
+
+      matchedFilter = true;
+      if (!areCrudListFilterUiValuesEqual(filter, values[filter.key], presetValues[filter.key])) {
+        return false;
+      }
+    }
+
+    return matchedFilter;
+  }
+
+  return Object.freeze({
+    filters,
+    values,
+    queryParams,
+    routeQueryValueResolvers,
+    options: Object.freeze(options),
+    presets: normalizedPresets,
+    activeChips,
+    hasActiveFilters,
+    clearFilter,
+    clearFilters,
+    clearChip,
+    toggle,
+    applyPreset,
+    matchesPreset
+  });
+}
+
+export { useCrudListFilters };