apostrophe 4.28.1 → 4.29.0

package/modules/@apostrophecms/recently-edited/ui/apos/composables/useRecentlyEditedBatch.js

@@ -0,0 +1,193 @@
+import { computed, ref } from 'vue';
+
+/**
+ * Manages batch selection and operations for the recently-edited
+ * document manager.
+ *
+ * @param {object} options
+ * @param {import('vue').Ref<object>} options.filterState - reactive filter state
+ * @param {import('vue').ComputedRef<object>} options.moduleOptions - module config
+ * @param {import('vue').Ref<Array>} options.items - current page items
+ * @param {Function} options.fetchPage - fetches a page of results
+ * @param {import('vue').ComputedRef<object>} options.moduleLabels - singular/plural
+ *  labels
+ * @param {Function} options.reload - triggers a page-1 reload
+ */
+export function useRecentlyEditedBatch({
+  filterState, items, fetchPage, moduleLabels, reload
+}) {
+  function getSelectedSingleValue(filterValue) {
+    if (Array.isArray(filterValue)) {
+      return filterValue.length === 1 ? filterValue[0] : null;
+    }
+    return filterValue || null;
+  }
+
+  function getSelectedTypeName() {
+    return getSelectedSingleValue(filterState.value._docType);
+  }
+
+  function getSelectedLocaleName() {
+    return getSelectedSingleValue(filterState.value._locale);
+  }
+
+  function getBatchModule(typeName) {
+    const pageModule = apos.modules['@apostrophecms/page'];
+    if (
+      typeName === '@apostrophecms/any-page-type' ||
+      pageModule?.validPageTypes?.includes(typeName)
+    ) {
+      return pageModule;
+    }
+    return apos.modules[typeName];
+  }
+
+  // Batch operations are available only when a single concrete type
+  // and locale are selected, making the list equivalent to a
+  // standard single-type manager.
+  const batchOperations = computed(() => {
+    const typeName = getSelectedTypeName();
+    const localeName = getSelectedLocaleName();
+    if (!typeName || !localeName) {
+      return [];
+    }
+    return getBatchModule(typeName)?.batchOperations || [];
+  });
+
+  // Map recently-edited filter state to the format batch operation
+  // `if` conditions expect (e.g. `{ archived: false }`).
+  const batchFilterValues = computed(() => ({
+    archived: filterState.value._status === 'archived'
+  }));
+
+  const checked = ref([]);
+  const allPiecesSelection = ref({
+    isSelected: false,
+    total: 0
+  });
+
+  const selectAllChoice = computed(() => {
+    const checkCount = checked.value.length;
+    const pageNotFullyChecked = items.value
+      .some(item => !checked.value.includes(item._id));
+    return {
+      value: 'checked',
+      indeterminate: checkCount > 0 && pageNotFullyChecked
+    };
+  });
+
+  const selectAllState = computed(() => {
+    if (checked.value.length && !selectAllChoice.value.indeterminate) {
+      return 'checked';
+    }
+    if (checked.value.length && selectAllChoice.value.indeterminate) {
+      return 'indeterminate';
+    }
+    return 'empty';
+  });
+
+  function selectAll() {
+    if (!checked.value.length) {
+      checked.value = items.value.map(item => item._id);
+      // With infinite scroll all items may already be loaded,
+      // so mark the full set as selected to show the banner.
+      if (items.value.length >= allPiecesSelection.value.total) {
+        allPiecesSelection.value.isSelected = true;
+      }
+      return;
+    }
+    allPiecesSelection.value.isSelected = false;
+    checked.value = [];
+  }
+
+  async function selectAllPieces() {
+    const response = await fetchPage(1, {
+      perPage: allPiecesSelection.value.total,
+      project: { _id: 1 },
+      lean: 1
+    });
+    const allIds = (response.results || []).map(item => item._id);
+    checked.value = allIds;
+    allPiecesSelection.value.isSelected = true;
+  }
+
+  function setAllPiecesSelection({
+    isSelected, total, docs
+  }) {
+    if (typeof isSelected === 'boolean') {
+      allPiecesSelection.value.isSelected = isSelected;
+    }
+    if (typeof total === 'number') {
+      allPiecesSelection.value.total = total;
+    }
+    if (docs) {
+      checked.value = docs.map(d => d._id || d);
+    }
+  }
+
+  async function handleBatchAction({
+    label, action, requestOptions = {}, messages
+  }) {
+    const typeName = getSelectedTypeName();
+    const batchModule = typeName && getBatchModule(typeName);
+    if (!action || !batchModule?.action) {
+      return;
+    }
+    try {
+      await apos.http.post(`${batchModule.action}/${action}`, {
+        body: {
+          ...requestOptions,
+          _ids: checked.value,
+          messages,
+          type: checked.value.length === 1
+            ? moduleLabels.value.singular
+            : moduleLabels.value.plural
+        }
+      });
+    } catch (error) {
+      apos.notify('apostrophe:errorBatchOperationNoti', {
+        interpolate: { operation: label },
+        type: 'danger'
+      });
+    }
+    allPiecesSelection.value.isSelected = false;
+    checked.value = [];
+    reload({ immediate: true });
+  }
+
+  async function fetchTotalCount() {
+    const { count } = await fetchPage(1, { count: 1 });
+    return count || 0;
+  }
+
+  // Refresh the select-all total count. Called by the orchestrator
+  // after page-1 results are applied when batch operations are available.
+  async function refreshTotalCount() {
+    if (!batchOperations.value.length) {
+      return;
+    }
+    try {
+      const total = await fetchTotalCount();
+      setAllPiecesSelection({
+        isSelected: false,
+        total
+      });
+    } catch {
+      // count fetch may fail if filters changed mid-flight.
+    }
+  }
+
+  return {
+    batchOperations,
+    batchFilterValues,
+    checked,
+    allPiecesSelection,
+    selectAllChoice,
+    selectAllState,
+    selectAll,
+    selectAllPieces,
+    setAllPiecesSelection,
+    handleBatchAction,
+    refreshTotalCount
+  };
+}

package/modules/@apostrophecms/recently-edited/ui/apos/composables/useRecentlyEditedData.js

@@ -0,0 +1,276 @@
+import {
+  computed, inject, ref, watch
+} from 'vue';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
+import { useRecentlyEditedFilters } from './useRecentlyEditedFilters.js';
+import { useRecentlyEditedFetch } from './useRecentlyEditedFetch.js';
+import { useRecentlyEditedBatch } from './useRecentlyEditedBatch.js';
+
+/**
+ * Orchestrates filter state, data fetching, batch operations and
+ * cross-composable wiring for the recently-edited document manager.
+ *
+ * @param {string} moduleName
+ * @param {Object} [initialFilters={}] - Optional initial filter values.
+ *  When provided (non-empty), fully replaces the default filter state.
+ *  Values should be arrays; coerced to scalar/array based on filter inputType.
+ */
+export function useRecentlyEditedData(moduleName, initialFilters = {}) {
+  const $t = inject('i18n');
+  const modalStore = useModalStore();
+
+  // --- Module-level setup ---
+
+  const moduleOptions = computed(() => apos.modules[moduleName]);
+  const managerFilters = computed(() => moduleOptions.value.filters || []);
+  const choiceFilterNames = computed(() => managerFilters.value.map(f => f.name));
+  const moduleLabels = computed(() => ({
+    singular: moduleOptions.value.label,
+    plural: moduleOptions.value.pluralLabel
+  }));
+  const searchQuery = ref('');
+
+  // --- Compose sub-composables ---
+
+  const {
+    filterState,
+    hasActiveFilters,
+    updateFilters,
+    clearFilter,
+    clearAllFilters
+  } = useRecentlyEditedFilters(managerFilters, initialFilters);
+
+  const {
+    items,
+    currentPage,
+    totalPages,
+    isLoading,
+    isLoadingMore,
+    filterChoices,
+    reload,
+    loadMore,
+    fetchPage,
+    cancel: fetchCancel
+  } = useRecentlyEditedFetch({
+    moduleOptions,
+    filterState,
+    searchQuery,
+    choiceFilterNames
+  });
+
+  const {
+    batchOperations,
+    batchFilterValues,
+    checked,
+    allPiecesSelection,
+    selectAllState,
+    selectAll,
+    selectAllPieces,
+    setAllPiecesSelection,
+    handleBatchAction,
+    refreshTotalCount
+  } = useRecentlyEditedBatch({
+    filterState,
+    moduleOptions,
+    items,
+    fetchPage,
+    moduleLabels,
+    reload
+  });
+
+  // --- Cross-composable wiring ---
+
+  // Reload on filter changes. Determine which multiselect filters
+  // changed so their choices are excluded from the API request.
+  watch(filterState, (next, prev) => {
+    const excludeChoices = managerFilters.value
+      .filter(f => f.inputType === 'checkbox')
+      .filter(f => !arraysEqual(next[f.name], prev?.[f.name]))
+      .map(f => f.name);
+    checked.value = [];
+    reload({ excludeChoices });
+  }, { deep: true });
+
+  // Sync locale filter → modal store locale, so apos.http auto-appends
+  // the correct aposLocale to all requests (including child modals).
+  watch(() => filterState.value._locale, (newLocale) => {
+    const id = modalStore.activeModal?.id;
+    if (!id) {
+      return;
+    }
+    const multiLocale = Object.keys(apos.i18n.locales || {}).length > 1;
+    const effectiveLocale = Array.isArray(newLocale)
+      ? (newLocale.length === 1 ? newLocale[0] : null)
+      : newLocale;
+    modalStore.updateModalData(id, {
+      locale: effectiveLocale || apos.i18n.locale,
+      crossLocale: multiLocale && !effectiveLocale
+    });
+  }, { immediate: true });
+
+  // Refresh batch total count after each page-1 reload completes.
+  watch(isLoading, (loading) => {
+    if (!loading) {
+      refreshTotalCount();
+    }
+  });
+
+  // --- Computed properties ---
+
+  const crossLocale = computed(() => {
+    const locale = filterState.value._locale;
+    if (Object.keys(apos.i18n.locales || {}).length <= 1) {
+      return false;
+    }
+    if (Array.isArray(locale)) {
+      return locale.length !== 1;
+    }
+    return !locale;
+  });
+
+  const emptyDisplay = computed(() => {
+    const hasSearch = !!searchQuery.value;
+    if (hasActiveFilters.value || hasSearch) {
+      return {
+        icon: 'magnify-icon',
+        title: hasSearch
+          ? 'apostrophe:recentlyEditedEmptySearched'
+          : 'apostrophe:recentlyEditedEmptyFiltered',
+        message: hasSearch
+          ? 'apostrophe:recentlyEditedEmptySearchedHint'
+          : 'apostrophe:recentlyEditedEmptyFilteredHint'
+      };
+    }
+    return {
+      icon: 'file-document-multiple-outline-icon',
+      title: {
+        key: 'apostrophe:recentlyEditedEmpty',
+        count: moduleOptions.value.rollingWindowDays || 30
+      }
+    };
+  });
+
+  const activeFilterTags = computed(() => {
+    const tags = [];
+    for (const [ name, value ] of Object.entries(filterState.value)) {
+      if (value === null || value === undefined || value === '') {
+        continue;
+      }
+      const filter = managerFilters.value.find(f => f.name === name);
+      const filterLabel = filter?.label || name;
+      const choices = filterChoices.value[name];
+
+      // Array values (checkbox/combo): one tag per selected item.
+      if (Array.isArray(value)) {
+        if (!value.length) {
+          continue;
+        }
+        for (const v of value) {
+          const choice = choices?.find(c => c.value === v);
+          tags.push({
+            name,
+            value: v,
+            label: filterLabel,
+            valueLabel: translateLabel(choice?.label ?? v)
+          });
+        }
+        continue;
+      }
+
+      // Scalar values (select/radio).
+      const choice = choices?.find(c => c.value === value);
+      tags.push({
+        name,
+        label: filterLabel,
+        valueLabel: translateLabel(choice?.label ?? value)
+      });
+    }
+    return tags;
+  });
+
+  // --- Actions ---
+
+  function onContentChanged() {
+    reload({ immediate: true });
+  }
+
+  function onSearch(query) {
+    searchQuery.value = query;
+    checked.value = [];
+    reload();
+  }
+
+  const hasActiveSearch = computed(() => !!searchQuery.value);
+
+  function clearSearch() {
+    searchQuery.value = '';
+    checked.value = [];
+    reload();
+  }
+
+  function cancel() {
+    fetchCancel();
+  }
+
+  // --- Helpers ---
+
+  function translateLabel(label) {
+    if (label && typeof label === 'object') {
+      return $t(label);
+    }
+    if (typeof label === 'string' && label.length) {
+      return $t(label);
+    }
+    return label;
+  }
+
+  return {
+    moduleOptions,
+    managerFilters,
+    moduleLabels,
+    emptyDisplay,
+    items,
+    currentPage,
+    totalPages,
+    isLoading,
+    isLoadingMore,
+    filterChoices,
+    searchQuery,
+    filterState,
+    activeFilterTags,
+    crossLocale,
+    reload,
+    loadMore,
+    updateFilters,
+    clearFilter,
+    clearAllFilters,
+    hasActiveFilters,
+    hasActiveSearch,
+    clearSearch,
+    onContentChanged,
+    onSearch,
+    cancel,
+    batchOperations,
+    batchFilterValues,
+    checked,
+    allPiecesSelection,
+    selectAllState,
+    selectAll,
+    selectAllPieces,
+    setAllPiecesSelection,
+    handleBatchAction
+  };
+}
+
+// Shallow array comparison (order-insensitive, value-based).
+function arraysEqual(a, b) {
+  if (!Array.isArray(a) || !Array.isArray(b)) {
+    return a === b;
+  }
+  if (a.length !== b.length) {
+    return false;
+  }
+  const sortedA = [ ...a ].sort();
+  const sortedB = [ ...b ].sort();
+  return sortedA.every((v, i) => v === sortedB[i]);
+}

package/modules/@apostrophecms/recently-edited/ui/apos/composables/useRecentlyEditedFetch.js

@@ -0,0 +1,199 @@
+import {
+  computed, inject, ref
+} from 'vue';
+import { debounceAsync, asyncTaskQueue } from 'Modules/@apostrophecms/ui/utils';
+
+const DEBOUNCE_TIMEOUT = 300;
+
+/**
+ * Manages data fetching and pagination for the recently-edited document manager.
+ *
+ * Uses two separate concurrency mechanisms:
+ * - `debounceAsync` coalesces page-1 reloads (used by `reload()`)
+ * - `asyncTaskQueue` serializes loadMore requests only
+ *
+ * @param {object} options
+ * @param {import('vue').ComputedRef<object>} options.moduleOptions
+ * @param {import('vue').Ref<object>} options.filterState
+ * @param {import('vue').Ref<string>} options.searchQuery
+ * @param {import('vue').ComputedRef<string[]>} options.choiceFilterNames
+ */
+export function useRecentlyEditedFetch({
+  moduleOptions, filterState, searchQuery, choiceFilterNames
+}) {
+  const $t = inject('i18n');
+
+  const items = ref([]);
+  const currentPage = ref(1);
+  const totalPages = ref(1);
+  const isLoading = ref(false);
+  const loadMorePending = ref(0);
+  const isLoadingMore = computed(() => loadMorePending.value > 0);
+  const filterChoices = ref({});
+
+  // Generation counter: incremented on every reload so that
+  // in-flight loadMore() calls from a stale dataset are discarded.
+  let generation = 0;
+  // Multiselect filter names to exclude from the choices request
+  // parameter during the next page-1 fetch.
+  let pendingExcludeChoices = [];
+
+  // Serial queue for loadMore calls, ensuring they are processed
+  // one at a time in order.
+  const queue = asyncTaskQueue();
+
+  function formatLocale(aposLocale) {
+    const code = aposLocale?.split(':')[0];
+    const label = apos.i18n.locales[code]?.label;
+    return label ? `${label} (${code})` : code;
+  }
+
+  function enrichItem(item) {
+    const typeConfig = moduleOptions.value.managedTypes
+      ?.find(type => type.name === item.type);
+    return {
+      ...item,
+      title: item.title || $t(typeConfig?.label || item.type),
+      _lastEditor: item.updatedBy?.title || item.updatedBy?.username || '',
+      _localeLabel: formatLocale(item.aposLocale)
+    };
+  }
+
+  async function fetchPage(page = 1, overrides = {}) {
+    const qs = {
+      page,
+      ...overrides
+    };
+    for (const [ key, val ] of Object.entries(filterState.value)) {
+      if (val != null && val !== '' && !(Array.isArray(val) && !val.length)) {
+        qs[key] = val;
+      }
+    }
+    if (searchQuery.value) {
+      qs.autocomplete = searchQuery.value;
+    }
+    if (!overrides.perPage && page === 1 && choiceFilterNames.value.length) {
+      const requestChoices = choiceFilterNames.value
+        .filter(n => !pendingExcludeChoices.includes(n));
+      if (requestChoices.length) {
+        qs.choices = requestChoices;
+      }
+    }
+    return apos.http.get(moduleOptions.value.action, {
+      qs,
+      draft: true
+    });
+  }
+
+  function applyPage1Results(response) {
+    items.value = (response.results || []).map(enrichItem);
+    currentPage.value = response.currentPage;
+    totalPages.value = response.pages;
+    // Merge only keys present in the response — excluded multiselect
+    // filters retain their previous choices.
+    const incoming = response.choices || {};
+    const prev = filterChoices.value;
+    const merged = { ...prev };
+    for (const [ key, val ] of Object.entries(incoming)) {
+      if (choicesChanged(val, merged[key])) {
+        merged[key] = preserveSelectedChoices(key, val, prev[key]);
+      }
+    }
+    filterChoices.value = merged;
+    isLoading.value = false;
+  }
+
+  // When the server returns narrowed choices that no longer include a
+  // currently-selected value, keep that choice entry (with its label)
+  // so that dropdowns, combo pills, and filter tags remain functional.
+  function preserveSelectedChoices(filterName, incoming, previous) {
+    const selected = filterState.value[filterName];
+    if (selected == null || !Array.isArray(previous)) {
+      return incoming;
+    }
+    const selectedValues = Array.isArray(selected) ? selected : [ selected ];
+    if (!selectedValues.length) {
+      return incoming;
+    }
+    const incomingValues = new Set((incoming || []).map(c => c.value));
+    const missing = selectedValues
+      .filter(v => !incomingValues.has(v))
+      .map(v => previous.find(c => c.value === v))
+      .filter(Boolean);
+    if (!missing.length) {
+      return incoming;
+    }
+    return [ ...incoming, ...missing ];
+  }
+
+  const debouncedFetch = debounceAsync(
+    () => fetchPage(1),
+    DEBOUNCE_TIMEOUT,
+    { onSuccess: applyPage1Results }
+  );
+
+  function reload({ immediate = false, excludeChoices = [] } = {}) {
+    generation++;
+    queue.clear();
+    pendingExcludeChoices = excludeChoices;
+    isLoading.value = true;
+    return immediate ? debouncedFetch.skipDelay() : debouncedFetch();
+  }
+
+  function loadMore() {
+    loadMorePending.value++;
+    const gen = generation;
+    // Queue will reject pending request if another loadMore is in progress,
+    // so we catch and ignore errors.
+    queue.add(async () => {
+      if (gen !== generation) {
+        return;
+      }
+      if (currentPage.value >= totalPages.value) {
+        return;
+      }
+      const response = await fetchPage(currentPage.value + 1);
+      if (gen !== generation) {
+        return;
+      }
+      items.value = [
+        ...items.value,
+        ...(response.results || []).map(enrichItem)
+      ];
+      currentPage.value = response.currentPage;
+      totalPages.value = response.pages;
+    })
+      .catch(() => {})
+      .finally(() => {
+        loadMorePending.value--;
+      });
+  }
+
+  function cancel() {
+    debouncedFetch.cancel();
+    queue.clear();
+  }
+
+  return {
+    items,
+    currentPage,
+    totalPages,
+    isLoading,
+    isLoadingMore,
+    filterChoices,
+    reload,
+    loadMore,
+    fetchPage,
+    cancel
+  };
+}
+
+function choicesChanged(a, b) {
+  if (!Array.isArray(a) || !Array.isArray(b)) {
+    return a !== b;
+  }
+  if (a.length !== b.length) {
+    return true;
+  }
+  return a.some((choice, i) => choice.value !== b[i]?.value);
+}