apostrophe 4.4.2 → 4.5.0

package/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -50,45 +50,50 @@
       </AposModalRail>
     </template>
     <template #main>
-      <AposModalBody>
+      <AposLoadingBlock v-if="isFirstLoading" />
+      <AposModalBody v-else>
         <template #bodyHeader>
           <AposDocsManagerToolbar
             :selected-state="selectAllState"
             :total-pages="totalPages"
             :current-page="currentPage"
             :filters="toolbarFilters"
+            :filter-values="filterValues"
             :labels="moduleLabels"
             :disable="relationshipErrors === 'min'"
             :displayed-items="items.length"
             :checked="checked"
             :checked-count="checked.length"
             :module-name="moduleName"
-            @page-change="updatePage"
+            :options="{noPager: true}"
             @select-click="selectClick"
             @search="search"
             @filter="filter"
           />
         </template>
         <template #bodyMain>
+          <AposLoadingBlock v-if="isLoading" />
           <AposMediaManagerDisplay
+            v-else
             ref="display"
-            :checked="checked"
+            v-model:checked="checked"
             :accept="accept"
             :items="items"
             :module-options="moduleOptions"
             :max-reached="maxReached()"
+            :is-last-page="isLastPage"
             :options="{
-              disableUnchecked: maxReached(),
               hideCheckboxes: !relationshipField
             }"
-            @update:checked="setCheckedDocs"
+            :relationship-field="relationshipField"
+            :is-scroll-loading="isScrollLoading"
             @edit="updateEditing"
             @select="select"
             @select-series="selectSeries"
             @select-another="selectAnother"
-            @upload-started="uploading = true"
             @upload-complete="completeUploading"
             @create-placeholder="createPlaceholder"
+            @set-load-ref="setLoadRef"
           />
         </template>
       </AposModalBody>
@@ -102,16 +107,14 @@
           <AposMediaManagerEditor
             v-show="editing"
             :media="editing"
-            :selected="selected"
             :is-modified="isModified"
             :module-labels="moduleLabels"
             @back="updateEditing(null)"
-            @saved="updateMedia"
             @modified="editorModified"
           />
           <AposMediaManagerSelections
             v-show="!editing"
-            :items="selected"
+            :items="checkedDocs"
             @clear="clearSelected"
             @edit="updateEditing"
           />
@@ -122,9 +125,12 @@
 </template>
 
 <script>
+import { debounce } from 'Modules/@apostrophecms/ui/utils';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsManagerMixin';
-import cuid from 'cuid';
+import { createId } from '@paralleldrive/cuid2';
+
+const DEBOUNCE_TIMEOUT = 500;
 
 export default {
   mixins: [ AposModifiedMixin, AposDocsManagerMixin ],
@@ -138,6 +144,10 @@ export default {
   data() {
     return {
       items: [],
+      isFirstLoading: true,
+      isLoading: false,
+      isScrollLoading: false,
+      loadRef: null,
       totalPages: 1,
       currentPage: 1,
       tagList: [],
@@ -149,14 +159,22 @@ export default {
       },
       editing: undefined,
       modified: false,
-      uploading: false,
       lastSelected: null,
       emptyDisplay: {
         title: 'apostrophe:noMediaFound',
         message: 'apostrophe:uploadedMediaPlaceholder',
         emoji: '🖼'
       },
-      cancelDescription: 'apostrophe:discardImageChangesPrompt'
+      cancelDescription: 'apostrophe:discardImageChangesPrompt',
+      debouncedGetMedia: debounce(this.getMedia, DEBOUNCE_TIMEOUT),
+      loadObserver: new IntersectionObserver(
+        this.handleIntersect,
+        {
+          root: null,
+          rootMargin: '30px',
+          threshold: 0
+        }
+      )
     };
   },
   computed: {
@@ -197,9 +215,6 @@ export default {
         pluralLabel: this.moduleOptions.pluralLabel
       };
     },
-    selected() {
-      return this.items.filter(item => this.checked.includes(item._id));
-    },
     accept() {
       return this.moduleOptions.schema.find(field => field.name === 'attachment').accept;
     },
@@ -223,20 +238,46 @@ export default {
           typeLabel: this.$t(this.moduleLabels.pluralLabel)
         };
       }
+    },
+    isLastPage() {
+      return this.totalPages > 1 && this.currentPage === this.totalPages;
     }
   },
   watch: {
     async checked (newVal, oldVal) {
+      this.lastSelected = newVal.at(-1);
       if (newVal.length > 1 || newVal.length === 0) {
-        if (!await this.updateEditing(null)) {
+        if (
+          !this.checked.includes(this.editing?._id) &&
+          oldVal.includes(this.editing?._id) &&
+          !await this.updateEditing(null)
+        ) {
           this.checked = oldVal;
         }
+
+        if (this.modified === false) {
+          await this.updateEditing(null);
+        }
+
+        return;
+      }
+
+      await this.updateEditing(newVal.at(0));
+    },
+    isLastPage(newVal) {
+      if (newVal) {
+        this.disconnectObserver();
       }
     }
   },
+  created() {
+    this.setDefaultFilters();
+  },
   async mounted() {
     this.modal.active = true;
     await this.getMedia({ tags: true });
+    this.isFirstLoading = false;
+
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
@@ -245,12 +286,17 @@ export default {
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
   methods: {
+    setDefaultFilters() {
+      this.moduleOptions.filters.forEach(filter => {
+        this.filterValues[filter.name] = filter.def;
+      });
+    },
     // Update our current idea of whether the doc in the right hand rail
     // has been modified (via event from the editor)
     editorModified (val) {
       this.modified = val;
     },
-    async getMedia (options) {
+    async getMedia (options = {}) {
       const qs = {
         ...this.filterValues,
         page: this.currentPage,
@@ -279,13 +325,12 @@ export default {
       }
       const apiResponse = (await apos.http.get(
         this.moduleOptions.action, {
-          busy: true,
           qs,
           draft: true
         }
       ));
 
-      if (options && options.tags) {
+      if (options.tags) {
         if (filtered) {
           // We never filter the tag list because they are presented like folders,
           // and folders don't disappear when empty. So we need to make a
@@ -307,28 +352,33 @@ export default {
 
       this.currentPage = apiResponse.currentPage;
       this.totalPages = apiResponse.pages;
-      this.items = apiResponse.results;
+      for (const image of apiResponse.results) {
+        this.items.push(image);
+      }
     },
-    async updateMedia () {
+    async refetchMedia(opts) {
+      this.isLoading = true;
+      this.currentPage = 1;
+      this.items = [];
+      await this.getMedia(opts);
+      this.isLoading = false;
+      this.modified = false;
       this.updateEditing(null);
-      await this.getMedia();
     },
     async filter(name, value) {
       this.filterValues[name] = value;
-      this.currentPage = 1;
-
-      this.updateEditing(null);
-      await this.getMedia();
+      this.refetchMedia();
     },
     createPlaceholder(dimensions) {
       this.items.unshift({
-        _id: cuid(),
+        _id: createId(),
         title: 'placeholder image',
         dimensions
       });
     },
     async completeUploading (imgIds) {
-      this.uploading = false;
+      this.currentPage = 1;
+      this.items = [];
       await this.getMedia();
 
       if (Array.isArray(imgIds) && imgIds.length && this.items.length === 0) {
@@ -347,7 +397,8 @@ export default {
         return;
       }
       if (Array.isArray(imgIds) && imgIds.length) {
-        this.concatCheckedDocs(imgIds);
+        const checked = this.checked.concat(imgIds);
+        this.checked = checked.slice(0, this.relationshipField?.max || checked.length);
 
         // If we're currently editing one, don't interrupt that by replacing it.
         if (!this.editing && imgIds.length === 1) {
@@ -357,7 +408,6 @@ export default {
     },
     clearSelected() {
       this.checked = [];
-      this.editing = undefined;
     },
     async updateEditing(id) {
       const item = this.items.find(item => item._id === id);
@@ -385,85 +435,180 @@ export default {
     // select setters
     select(id) {
       if (this.checked.includes(id)) {
-        this.setCheckedDocs([]);
+        this.updateEditing(id);
+      } else if (this.relationshipField && (this.relationshipField.max > 1 || !this.relationshipField.max)) {
+        this.selectAnother(id);
       } else {
-        const item = this.items.find(item => item._id === id);
-        if (item) {
-          this.setCheckedDocs([ item ]);
-        }
+        this.checked = [ id ];
       }
-      this.updateEditing(id);
-      this.lastSelected = id;
     },
     selectAnother(id) {
+      if (this.relationshipField?.max === 1) {
+        this.select(id);
+        return;
+      }
       if (this.checked.includes(id)) {
-        this.removeCheckedDoc(id);
+        this.checked = this.checked.filter(checkedId => checkedId !== id);
       } else {
-        this.addCheckedDoc(id);
+        this.checked = [ ...this.checked, id ];
       }
-
-      this.lastSelected = id;
-      this.editing = undefined;
     },
-
     selectSeries(id) {
-      if (!this.lastSelected) {
+      if (!this.lastSelected || this.relationshipField?.max === 1) {
         this.select(id);
         return;
       }
 
-      let beginIndex = this.items.findIndex(item => item._id === this.lastSelected);
-      let endIndex = this.items.findIndex(item => item._id === id);
+      const beginIndex = this.items.findIndex(item => item._id === this.lastSelected);
+      const endIndex = this.items.findIndex(item => item._id === id);
       const direction = beginIndex > endIndex ? -1 : 1;
 
-      if (direction < 0) {
-        [ beginIndex, endIndex ] = [ endIndex, beginIndex ];
-      } else {
-        endIndex++;
-      }
-
-      const sliced = this.items.slice(beginIndex, endIndex);
-      // always want to check, never toggle
-      sliced.forEach(item => {
-        if (!this.checked.includes(item._id)) {
-          this.addCheckedDoc(item._id);
-        }
-      });
+      const start = direction < 0 ? endIndex : beginIndex;
+      const end = direction < 0 ? beginIndex : endIndex + 1;
+      const imgIds = this.items
+        .slice(start, end)
+        .map(item => item._id)
+        .filter(_id => !this.checked.includes(_id));
 
-      this.lastSelected = sliced[sliced.length - 1]._id;
-      this.editing = undefined;
+      const checked = this.checked.concat(imgIds);
+      this.checked = checked.slice(0, this.relationshipField?.max || checked.length);
     },
 
     // Toolbar handlers
-    selectClick() {
-      this.selectAll();
-      this.editing = undefined;
-    },
-    async updatePage(num) {
-      if (num) {
-        this.currentPage = num;
-        await this.getMedia();
+    async selectClick() {
+      if (await this.updateEditing(null)) {
+        this.selectAll();
       }
     },
     archiveClick() {
       this.$emit('archive', this.checked);
     },
 
-    async search(query) {
-      this.filter('autocomplete', query);
+    async search(value) {
+      this.filterValues.autocomplete = value;
+      this.currentPage = 1;
+      this.items = [];
+      this.isLoading = true;
+      await this.debouncedGetMedia();
+      this.isLoading = false;
     },
 
-    async onContentChanged() {
-      await this.getMedia({ tags: true });
+    async onContentChanged({ action, doc }) {
+      if (doc.type !== '@apostrophecms/image' || ![ 'archive', 'update' ].includes(action)) {
+        return;
+      }
+
+      this.modified = false;
+      if (action === 'archive') {
+        this.removeStateDoc(doc);
+      }
+      if (action === 'update') {
+        this.updateStateDoc(doc);
+      }
+
+      await this.updateEditing(null);
+    },
+
+    updateStateDoc(doc) {
+      const index = this.items.findIndex(item => item._id === doc._id);
+      const checkedIndex = this.checkedDocs
+        .findIndex(checkedDoc => checkedDoc._id === doc._id);
+      if (index !== -1) {
+        this.items[index] = doc;
+      }
+      if (checkedIndex !== -1) {
+        this.checkedDocs[checkedIndex] = doc;
+      }
+    },
+
+    removeStateDoc(doc) {
+      const index = this.items.findIndex(item => item._id === doc._id);
+      const checkedIndex = this.checked.findIndex(checkedId => checkedId === doc._id);
+      const checkedDocsIndex = this.checkedDocs.findIndex(({ _id }) => _id === doc._id);
+
+      if (index !== -1) {
+        this.items.splice(index, 1);
+      }
+      if (checkedIndex !== -1) {
+        this.checked.splice(checkedIndex, 1);
+      }
+      if (checkedDocsIndex !== -1) {
+        this.checkedDocs.splice(checkedDocsIndex, 1);
+      }
+    },
+
+    async handleIntersect(entries) {
+      for (const entry of entries) {
+        if (
+          entry.isIntersecting &&
+          this.currentPage < this.totalPages &&
+          !this.isFirstLoading &&
+          this.items.length
+        ) {
+          this.currentPage++;
+          this.isScrollLoading = true;
+          await this.$nextTick();
+          this.loadRef.scrollIntoView({
+            behavior: 'smooth'
+          });
+          await this.getMedia();
+          this.isScrollLoading = false;
+        }
+      }
+    },
+    observeLoadRef() {
+      if (this.totalPages < 2) {
+        return;
+      }
+
+      this.loadObserver.observe(this.loadRef);
+    },
+
+    disconnectObserver() {
+      if (this.loadObserver) {
+        this.loadObserver.disconnect();
+      }
+    },
+
+    setLoadRef(ref) {
+      this.loadRef = ref;
+      this.disconnectObserver();
+      if (ref) {
+        this.observeLoadRef();
+      }
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.apos-media-manager :deep(.apos-media-manager-toolbar) {
-  z-index: $z-index-manager-toolbar;
-  position: relative;
+.apos-media-manager {
+  :deep(.apos-modal__body) {
+    padding: 0;
+  }
+
+  :deep(.apos-modal__body-inner) {
+    overflow: hidden;
+    height: 100%;
+  }
+
+  :deep(.apos-modal__body-header) {
+    padding: $spacing-double $spacing-double 20px;
+
+    @include media-up(lap) {
+      padding: $spacing-quadruple $spacing-quadruple 20px;
+    }
+  }
+
+  :deep(.apos-modal__body-main) {
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 0 $spacing-double 20px;
+
+    @include media-up(lap) {
+      padding: 0 $spacing-quadruple 20px;
+    }
+  }
 }
 
 .apos-media-manager__empty {