apostrophe 4.28.0 → 4.29.0

package/modules/@apostrophecms/recently-edited/ui/apos/components/AposRecentlyEditedFilters.vue

@@ -0,0 +1,287 @@
+<template>
+  <AposContextMenu
+    :button="button"
+    menu-placement="bottom-end"
+    identifier="recently-edited-filter-menu"
+  >
+    <div
+      class="apos-recently-edited-filters"
+      data-apos-test="recently-edited-filters"
+    >
+      <div class="apos-recently-edited-filters__header">
+        <h3 class="apos-recently-edited-filters__title">
+          {{ $t('apostrophe:recentlyEditedFilters') }}
+        </h3>
+        <button
+          type="button"
+          class="apos-recently-edited-filters__clear"
+          data-apos-test="recently-edited-filter-reset"
+          @click="clearFilters"
+        >
+          {{ $t('apostrophe:recentlyEditedResetFilters') }}
+        </button>
+      </div>
+      <div
+        v-for="filterSet in filterSets"
+        :key="filterSet.key"
+        class="apos-recently-edited-filters__row"
+        :data-apos-test="'recently-edited-filter-' + filterSet.name"
+      >
+        <component
+          :is="COMPONENT_MAP[filterSet.field.type] || COMPONENT_MAP.select"
+          :field="filterSet.field"
+          :model-value="filterSet.value"
+          :status="filterSet.status"
+          :modifiers="['small', 'inline']"
+          :add-label="filterSet.addLabel"
+          :no-blur-emit="true"
+          @update:model-value="updateFilter(filterSet.name, $event)"
+        />
+      </div>
+    </div>
+  </AposContextMenu>
+</template>
+
+<script setup>
+import {
+  computed, inject, ref, watch
+} from 'vue';
+
+const $t = inject('i18n');
+
+const COMPONENT_MAP = {
+  select: 'AposInputSelect',
+  radio: 'AposInputSelect',
+  combo: 'AposRecentlyEditedCombo'
+};
+
+const props = defineProps({
+  filters: {
+    type: Array,
+    default: () => []
+  },
+  filterChoices: {
+    type: Object,
+    default: () => ({})
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const emit = defineEmits([ 'update:modelValue' ]);
+
+const SORTED_FILTERS = new Set([ '_editedBy', '_docType' ]);
+
+const currentUser = computed(() => apos?.login?.user || apos?.user || null);
+
+const button = computed(() => ({
+  label: 'apostrophe:filter',
+  icon: 'tune-icon',
+  modifiers: [ 'small' ],
+  type: 'outline'
+}));
+
+// Per-filter generation: only remount the specific filter whose
+// choices changed, rather than fingerprinting all choices at once.
+const generationMap = ref({});
+
+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);
+}
+
+watch(() => props.filterChoices, (next, prev) => {
+  for (const name of Object.keys(next || {})) {
+    if (choicesChanged(next[name], prev?.[name])) {
+      generationMap.value[name] = (generationMap.value[name] || 0) + 1;
+    }
+  }
+}, { deep: true });
+
+// AposFilterMenu-style filterSets: creates fresh { data: value }
+// wrappers per evaluation — no persistent reactive objects needed.
+const filterSets = computed(() => {
+  return props.filters.map(filter => ({
+    name: filter.name,
+    key: `${generationMap.value[filter.name] || 0}:${filter.name}`,
+    field: {
+      name: filter.name,
+      type: isCheckboxFilter(filter) ? 'combo' : 'select',
+      label: filter.label,
+      choices: getChoices(filter),
+      def: filter.def
+    },
+    addLabel: isCheckboxFilter(filter) ? 'apostrophe:recentlyEditedAddFilter' : undefined,
+    value: {
+      data: props.modelValue[filter.name] ?? filterDefault(filter)
+    },
+    status: {}
+  }));
+});
+
+function getChoices(filter) {
+  const choices = props.filterChoices[filter.name];
+  if (!choices) {
+    // Combo renders nothing when choices are empty.
+    if (isCheckboxFilter(filter)) {
+      return [];
+    }
+    return [
+      {
+        label: 'apostrophe:filterMenuLoadingChoices',
+        value: null
+      }
+    ];
+  }
+
+  const mappedChoices = choices.map(choice => ({
+    ...choice,
+    label: formatChoiceLabel(filter.name, choice)
+  }));
+
+  // Sort dynamic-choices filters by translated label so the order
+  // is meaningful regardless of i18n key names. Static-choices
+  // filters (_status, _action, etc.) keep their intentional order.
+  if (SORTED_FILTERS.has(filter.name)) {
+    const currentUserId = currentUser.value?._id;
+    mappedChoices.sort((a, b) => {
+      if (a.value === null) {
+        return -1;
+      }
+      if (b.value === null) {
+        return 1;
+      }
+      // Pin current user right after "Any" for _editedBy.
+      if (filter.name === '_editedBy' && currentUserId) {
+        if (String(a.value) === String(currentUserId)) {
+          return -1;
+        }
+        if (String(b.value) === String(currentUserId)) {
+          return 1;
+        }
+      }
+      return String(a.label).localeCompare(String(b.label));
+    });
+  }
+
+  if (isCheckboxFilter(filter)) {
+    return mappedChoices;
+  }
+
+  if (mappedChoices.find(choice => choice.value === null)) {
+    return mappedChoices;
+  }
+
+  return [
+    {
+      label: 'apostrophe:any',
+      value: null
+    },
+    ...mappedChoices
+  ];
+}
+
+function formatChoiceLabel(name, choice) {
+  if (
+    name === '_editedBy' &&
+    choice?.value &&
+    currentUser.value?._id &&
+    String(choice.value) === String(currentUser.value._id)
+  ) {
+    const currentUserLabel = currentUser.value.title || currentUser.value.username;
+    return $t('apostrophe:recentlyEditedCurrentUser', {
+      user: currentUserLabel
+    });
+  }
+
+  if (choice.label && typeof choice.label === 'object') {
+    return $t(choice.label);
+  }
+
+  if (typeof choice.label === 'string' && choice.label.length) {
+    return $t(choice.label);
+  }
+
+  return choice.label;
+}
+
+function updateFilter(name, value) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [name]: value.data
+  });
+}
+
+function clearFilters() {
+  emit('update:modelValue', props.filters.reduce((acc, filter) => {
+    acc[filter.name] = filterDefault(filter);
+    return acc;
+  }, {}));
+}
+
+function isCheckboxFilter(filter) {
+  return (filter.inputType || 'select') === 'checkbox';
+}
+
+function filterDefault(filter) {
+  if (filter.def !== undefined) {
+    return filter.def;
+  }
+  return isCheckboxFilter(filter) ? [] : null;
+}
+</script>
+
+<style lang="scss" scoped>
+.apos-recently-edited-filters {
+  width: 340px;
+  padding: 10px 14px 12px;
+}
+
+.apos-recently-edited-filters__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--a-base-9);
+}
+
+.apos-recently-edited-filters__title {
+  @include type-large;
+
+  & {
+    margin: 0;
+    font-weight: var(--a-weight-bold);
+  }
+}
+
+.apos-recently-edited-filters__clear {
+  @include type-base;
+
+  & {
+    border: 0;
+    color: var(--a-primary);
+    background: transparent;
+    cursor: pointer;
+  }
+}
+
+.apos-recently-edited-filters__row {
+  margin-bottom: 6px;
+}
+
+.apos-recently-edited-filters__row:last-child {
+  margin-bottom: 0;
+}
+
+.apos-recently-edited-filters :deep(.apos-field--inline .apos-input-wrapper) {
+  flex: 0 0 60%;
+}
+</style>

package/modules/@apostrophecms/recently-edited/ui/apos/components/AposRecentlyEditedIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <AposButton
+    icon="recently-edited-icon"
+    type="subtle"
+    data-apos-test="recently-edited-icon"
+    :modifiers="['small', 'no-motion']"
+    :tooltip="$t('apostrophe:recentlyEditedDocuments')"
+    :icon-only="true"
+    @click="open"
+  />
+</template>
+<script setup>
+function open() {
+  apos.bus.$emit('admin-menu-click', '@apostrophecms/recently-edited:manager');
+}
+</script>

package/modules/@apostrophecms/recently-edited/ui/apos/components/AposRecentlyEditedManager.vue

@@ -0,0 +1,346 @@
+<template>
+  <AposModal
+    :modal="modal"
+    :modal-title="{ key: 'apostrophe:recentlyEditedDocuments' }"
+    class="apos-recently-edited-manager"
+    data-apos-test="recently-edited-manager"
+    @esc="close"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+  >
+    <template #secondaryControls>
+      <AposButton
+        type="default"
+        label="apostrophe:exit"
+        @click="close"
+      />
+    </template>
+    <template #main>
+      <AposModalBody>
+        <template #bodyHeader>
+          <AposDocsManagerToolbar
+            ref="toolbarRef"
+            :selected-state="selectAllState"
+            :total-pages="0"
+            :current-page="currentPage"
+            :labels="moduleLabels"
+            :displayed-items="items.length"
+            :checked-count="checked.length"
+            :batch-operations="batchOperations"
+            :filter-values="batchFilterValues"
+            :module-name="moduleName"
+            :search-placeholder="$t('apostrophe:recentlyEditedSearchDocuments')"
+            :options="{ noPager: true }"
+            @search="onSearch"
+            @select-click="selectAll"
+            @batch="handleBatchAction"
+          />
+          <AposDocsManagerSelectBox
+            v-if="batchOperations.length"
+            :selected-state="selectAllState"
+            :module-labels="moduleLabels"
+            :checked-ids="checked"
+            :all-pieces-selection="allPiecesSelection"
+            :displayed-items="items.length"
+            @select-all="selectAllPieces"
+            @set-all-pieces-selection="setAllPiecesSelection"
+          />
+          <div class="apos-recently-edited__filters-bar">
+            <div
+              v-if="isLoading"
+              class="apos-recently-edited__loading-spinner-container"
+              data-apos-test="recently-edited-spinner"
+            >
+              <AposSpinner class="apos-recently-edited__spinner" />
+            </div>
+            <div
+              v-if="activeFilterTags.length"
+              class="apos-recently-edited__active-filters"
+            >
+              <AposRecentlyEditedFilterTag
+                v-for="tag in activeFilterTags"
+                :key="`${tag.name}:${tag.value ?? 'none'}`"
+                :tag="tag"
+                @clear="clearFilter"
+              />
+            </div>
+            <AposRecentlyEditedFilters
+              :filters="managerFilters"
+              :filter-choices="filterChoices"
+              :model-value="filterState"
+              @update:model-value="updateFilters"
+            />
+          </div>
+        </template>
+        <template #bodyMain>
+          <AposDocsManagerDisplay
+            v-if="items.length > 0"
+            v-model:checked="checked"
+            :items="items"
+            :headers="headers"
+            :options="displayOptions"
+            @open="editDoc"
+          />
+          <div
+            v-else-if="!isLoading"
+            class="apos-pieces-manager__empty"
+            data-apos-test="recently-edited-empty"
+          >
+            <AposEmptyState :empty-state="emptyDisplay" />
+            <div
+              v-if="hasActiveSearch || hasActiveFilters"
+              class="apos-recently-edited__clear-actions"
+            >
+              <button
+                v-if="hasActiveSearch"
+                type="button"
+                class="apos-recently-edited__clear-all"
+                data-apos-test="recently-edited-clear-search"
+                @click="handleClearSearch"
+              >
+                {{ $t('apostrophe:recentlyEditedClearSearch') }}
+              </button>
+              <button
+                v-if="hasActiveFilters"
+                type="button"
+                class="apos-recently-edited__clear-all"
+                data-apos-test="recently-edited-clear-filters"
+                @click="clearAllFilters"
+              >
+                {{ $t('apostrophe:recentlyEditedClearAllFilters') }}
+              </button>
+            </div>
+          </div>
+          <div
+            ref="scrollSentinel"
+            class="apos-recently-edited__sentinel"
+            data-apos-test="recently-edited-sentinel"
+          />
+          <div
+            v-if="isLoadingMore"
+            class="apos-recently-edited__loading"
+            data-apos-test="recently-edited-loading-more"
+          >
+            {{ $t('apostrophe:loadingMore') }}
+          </div>
+        </template>
+      </AposModalBody>
+    </template>
+  </AposModal>
+</template>
+
+<script setup>
+import {
+  computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch
+} from 'vue';
+import { useInfiniteScroll } from 'Modules/@apostrophecms/ui/composables/useInfiniteScroll.js';
+import { useRecentlyEditedData } from '../composables/useRecentlyEditedData.js';
+
+const props = defineProps({
+  moduleName: {
+    type: String,
+    required: true
+  },
+  initialFilters: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const modal = ref({
+  active: false,
+  showModal: false,
+  type: 'overlay'
+});
+
+const scrollSentinel = ref(null);
+const toolbarRef = ref(null);
+
+const {
+  moduleOptions,
+  managerFilters,
+  moduleLabels,
+  emptyDisplay,
+  items,
+  currentPage,
+  isLoading,
+  isLoadingMore,
+  filterChoices,
+  filterState,
+  activeFilterTags,
+  crossLocale,
+  reload,
+  loadMore,
+  updateFilters,
+  clearFilter,
+  clearAllFilters,
+  hasActiveFilters,
+  hasActiveSearch,
+  clearSearch,
+  onContentChanged,
+  onSearch,
+  cancel,
+  batchOperations,
+  batchFilterValues,
+  checked,
+  allPiecesSelection,
+  selectAllState,
+  selectAll,
+  selectAllPieces,
+  setAllPiecesSelection,
+  handleBatchAction
+} = useRecentlyEditedData(props.moduleName, props.initialFilters);
+
+const {
+  start: startScroll, stop: stopScroll, recheck
+} = useInfiniteScroll(
+  scrollSentinel,
+  loadMore,
+  {
+    rootMargin: '100px',
+    // Use the modal's actual scroll container, not the viewport.
+    root: '.apos-modal__main'
+  }
+);
+
+// After items change (page-1 reload or loadMore append), re-check
+// sentinel visibility. Without this, IntersectionObserver won't fire
+// again if the sentinel remained visible (e.g. low perPage and tall viewport).
+watch(items, () => {
+  nextTick(() => recheck());
+});
+
+const displayOptions = computed(() => ({
+  ...moduleOptions.value,
+  crossLocale: crossLocale.value,
+  batchOperations: batchOperations.value
+}));
+
+const headers = moduleOptions.value.columns || [];
+
+async function editDoc(item) {
+  if (!item._edit) {
+    return;
+  }
+  const docModuleName = item.slug?.startsWith('/')
+    ? '@apostrophecms/page'
+    : item.type;
+  if (!apos.modules[docModuleName]) {
+    return;
+  }
+  const editorComponent = apos.modules[docModuleName]?.components?.editorModal || 'AposDocEditor';
+  const docLocale = item.aposLocale?.split(':')[0];
+
+  await apos.modal.execute(editorComponent, {
+    moduleName: docModuleName,
+    docId: item._id,
+    locale: docLocale
+  });
+}
+
+function handleClearSearch() {
+  clearSearch();
+  if (toolbarRef.value) {
+    toolbarRef.value.searchField.value = { data: '' };
+  }
+}
+
+async function close() {
+  modal.value.showModal = false;
+}
+
+onMounted(async () => {
+  modal.value.active = true;
+  await reload({ immediate: true });
+  startScroll();
+  apos.bus.$on('content-changed', onContentChanged);
+  apos.bus.$on('command-menu-manager-close', close);
+});
+
+onBeforeUnmount(() => {
+  cancel();
+  stopScroll();
+});
+
+onUnmounted(() => {
+  apos.bus.$off('content-changed', onContentChanged);
+  apos.bus.$off('command-menu-manager-close', close);
+});
+</script>
+
+<style lang="scss" scoped>
+
+.apos-pieces-manager__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.apos-recently-edited__sentinel {
+  height: 1px;
+}
+
+.apos-recently-edited__loading {
+  padding: 10px 20px;
+  color: var(--a-base-4);
+  font-size: var(--a-type-small);
+  text-align: center;
+}
+
+.apos-recently-edited__filters-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 12px;
+}
+
+.apos-recently-edited__loading-spinner-container {
+  z-index: $z-index-admin-bar;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  transition: opacity 300ms ease;
+  background-color: var(--a-background-overlay);
+}
+
+.apos-recently-edited__active-filters {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.apos-recently-edited__clear-actions {
+  display: flex;
+  gap: 16px;
+  margin-top: 10px;
+}
+
+.apos-recently-edited__clear-all {
+  @include type-base;
+
+  & {
+    padding: 0;
+    border: none;
+    color: var(--a-primary);
+    background: none;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  &:hover {
+    color: var(--a-primary-hover);
+  }
+}
+
+</style>