apostrophe 4.6.1 → 4.7.0

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -84,7 +84,7 @@
               disableUnchecked: maxReached()
             }"
             @select-click="selectAll"
-            @search="onSearch"
+            @search="onSearchDebounced"
             @page-change="updatePage"
             @filter="filter"
             @batch="handleBatchAction"
@@ -129,7 +129,7 @@ import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsMa
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
 import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
   name: 'AposDocsManager',
@@ -229,7 +229,9 @@ export default {
   },
   created() {
     const DEBOUNCE_TIMEOUT = 500;
-    this.onSearch = debounce(this.search, DEBOUNCE_TIMEOUT);
+    this.onSearchDebounced = debounceAsync(this.onSearch, DEBOUNCE_TIMEOUT, {
+      onSuccess: this.search
+    });
 
     this.moduleOptions.filters.forEach(filter => {
       this.filterValues[filter.name] = filter.def;
@@ -244,14 +246,17 @@ export default {
     this.headers = this.computeHeaders();
     // Get the data. This will be more complex in actuality.
     this.modal.active = true;
-    await this.getPieces();
-    await this.getAllPiecesTotal();
+    await this.managePieces();
+    await this.manageAllPiecesTotal();
     this.modal.triggerFocusRefresh++;
 
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-create-new', this.create);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
+  onBeforeUnmount() {
+    this.onSearchDebounced.cancel();
+  },
   unmounted() {
     this.destroyShortcuts();
     apos.bus.$off('content-changed', this.onContentChanged);
@@ -262,7 +267,6 @@ export default {
     async create() {
       await this.edit(null);
     },
-
     // If pieceOrId is null, a new piece is created
     async edit(pieceOrId) {
       let piece;
@@ -294,9 +298,9 @@ export default {
       });
     },
     async finishSaved() {
-      await this.getPieces();
+      await this.managePieces();
     },
-    async request (mergeOptions) {
+    async request(mergeOptions) {
       const options = {
         ...this.filterValues,
         ...this.queryExtras,
@@ -325,31 +329,65 @@ export default {
         draft: true
       });
     },
-    async getPieces () {
-      if (this.holdQueries) {
-        return;
-      }
-
-      this.holdQueries = true;
-
+    async requestPieces(page = 1, mergeOptions = {}) {
       const {
         currentPage, pages, results, choices
       } = await this.request({
+        ...mergeOptions,
         ...(
           this.moduleOptions.managerApiProjection &&
           { project: this.moduleOptions.managerApiProjection }
         ),
-        page: this.currentPage
+        page
       });
 
-      this.currentPage = currentPage;
-      this.totalPages = pages;
-      this.items = results;
-      this.filterChoices = choices;
-      this.holdQueries = false;
+      return {
+        currentPage,
+        pages,
+        results,
+        choices
+      };
     },
-    async getAllPiecesTotal () {
+    async requestAllPiecesTotal() {
       const { count: total } = await this.request({ count: 1 });
+      return total;
+    },
+    async requestData(page = 1, mergeOptions = {}) {
+      const pieces = await this.requestPieces(page, mergeOptions);
+      const total = await this.requestAllPiecesTotal();
+
+      return {
+        ...pieces,
+        total
+      };
+    },
+    setPieces(data) {
+      this.currentPage = data.currentPage;
+      this.totalPages = data.pages;
+      this.items = data.results;
+      this.filterChoices = data.choices;
+    },
+    async managePieces () {
+      if (this.holdQueries) {
+        return;
+      }
+
+      this.holdQueries = true;
+
+      const {
+        currentPage, pages, results, choices
+      } = await this.requestPieces(this.currentPage);
+
+      this.setPieces({
+        currentPage,
+        pages,
+        results,
+        choices
+      });
+      this.holdQueries = false;
+    },
+    async manageAllPiecesTotal () {
+      const total = await this.requestAllPiecesTotal();
 
       this.setAllPiecesSelection({
         isSelected: false,
@@ -372,25 +410,44 @@ export default {
         docs
       });
     },
-    updatePage(num) {
+    async updatePage(num) {
       if (num) {
         this.currentPage = num;
-        this.getPieces();
+        await this.managePieces();
       }
     },
-    async search(query) {
+    // A stateless search handler, only requesting the data.
+    // It's meant to be debounced and used in conjunction with the search
+    // method that actually updates the state.
+    async onSearch(query) {
+      const queryExtras = { ...this.queryExtras };
       if (query) {
-        this.queryExtras.autocomplete = query;
+        queryExtras.autocomplete = query;
       } else if ('autocomplete' in this.queryExtras) {
-        delete this.queryExtras.autocomplete;
+        queryExtras.autocomplete = undefined;
       } else {
+        return {};
+      }
+      const { total, ...pieces } = await this.requestData(1, queryExtras);
+
+      return {
+        pieces,
+        total
+      };
+    },
+    async search({ pieces, total }) {
+      // Most probably due to empty/invalid query.
+      if (!pieces) {
         return;
       }
 
       this.currentPage = 1;
 
-      await this.getPieces();
-      await this.getAllPiecesTotal();
+      this.setPieces(pieces);
+      this.setAllPiecesSelection({
+        isSelected: false,
+        total
+      });
     },
     async filter(filter, value) {
       if (this.filterValues[filter] === value) {
@@ -400,8 +457,8 @@ export default {
       this.filterValues[filter] = value;
       this.currentPage = 1;
 
-      await this.getPieces();
-      await this.getAllPiecesTotal();
+      await this.managePieces();
+      await this.manageAllPiecesTotal();
       this.headers = this.computeHeaders();
 
       this.setCheckedDocs([]);
@@ -477,8 +534,8 @@ export default {
             }
           });
           if (action === 'archive') {
-            await this.getPieces();
-            this.getAllPiecesTotal();
+            await this.managePieces();
+            await this.manageAllPiecesTotal();
             this.checked = [];
           }
         } catch (error) {
@@ -496,15 +553,14 @@ export default {
         return item._id;
       });
     },
-
     async onContentChanged({ doc, action }) {
       if (
         !doc ||
         !doc.aposLocale ||
         doc.aposLocale.split(':')[0] === this.modalData.locale
       ) {
-        await this.getPieces();
-        this.getAllPiecesTotal();
+        await this.managePieces();
+        await this.manageAllPiecesTotal();
         if (action === 'archive') {
           this.checked = this.checked.filter(checkedId => doc._id !== checkedId);
         }

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -852,9 +852,11 @@ function traverseNextNode(node) {
   .apos-rich-text-editor__editor {
     @include apos-transition();
 
-    position: relative;
-    border-radius: var(--a-border-radius);
-    background-color: transparent;
+    & {
+      position: relative;
+      border-radius: var(--a-border-radius);
+      background-color: transparent;
+    }
   }
 
   .apos-rich-text-editor__editor :deep([data-tippy-root]) {
@@ -874,20 +876,22 @@ function traverseNextNode(node) {
   .apos-rich-text-editor__editor_after {
     @include type-small;
 
-    position: absolute;
-    inset: 0;
-    display: block;
-    width: 200px;
-    height: 10px;
-    margin: auto;
-    color: var(--a-primary-transparent-50);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    text-align: center;
+    & {
+      position: absolute;
+      inset: 0;
+      display: block;
+      width: 200px;
+      height: 10px;
+      margin: auto;
+      color: var(--a-primary-transparent-50);
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      text-align: center;
+    }
 
     &.apos-is-visually-empty {
       opacity: 1;
@@ -953,13 +957,15 @@ function traverseNextNode(node) {
   .apos-rich-text-insert-menu-item {
     @include apos-transition();
 
-    all: unset;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 12px;
-    padding: 14px 16px;
-    border-bottom: 1px solid var(--a-base-9);
+    & {
+      all: unset;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--a-base-9);
+    }
 
     &:last-of-type {
       border-bottom: none;

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapDivider.vue

@@ -21,7 +21,9 @@ export default {
   .apos-rich-text-editor__control--divider {
     @include type-help;
 
-    padding: 10px;
-    opacity: 0.3;
+    & {
+      padding: 10px;
+      opacity: 0.3;
+    }
   }
 </style>

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue

@@ -251,7 +251,8 @@ export default {
         this.docFields.data.href = '';
         try {
           const doc = await apos.http.get(`/api/v1/@apostrophecms/doc/${matches[1]}`, {
-            busy: true
+            busy: true,
+            draft: true
           });
           this.docFields.data.linkTo = doc.slug.startsWith('/') ? '@apostrophecms/any-page-type' : doc.type;
           this.docFields.data[`_${this.docFields.data.linkTo}`] = [ doc ];

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapMarks.vue

@@ -219,9 +219,11 @@ export default {
     .apos-marks-control__button {
       @include apos-button-reset();
 
-      display: block;
-      width: 100%;
-      padding: $spacing-base;
+      & {
+        display: block;
+        width: 100%;
+        padding: $spacing-base;
+      }
     }
   }
 

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapStyles.vue

@@ -157,9 +157,11 @@ export default {
     @include apos-button-reset();
     @include apos-transition();
 
-    height: 100%;
-    padding: 0 $spacing-half;
-    font-size: var(--a-type-smaller);
+    & {
+      height: 100%;
+      padding: 0 $spacing-half;
+      font-size: var(--a-type-smaller);
+    }
 
     &:focus, &:active {
       outline: none;

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapTable.vue

@@ -143,12 +143,15 @@ export default {
 <style lang="scss" scoped>
   // "If another select el is needed for the rich-text toolbar these styles should be made global."
   // ... And here we are, but first let's see if we decide to rebuild this UI without the menu. -Tom
+
   .apos-tiptap-control--select {
     @include apos-button-reset();
     @include type-small;
 
-    height: 100%;
-    padding: 0 15px 0 10px;
+    & {
+      height: 100%;
+      padding: 0 15px 0 10px;
+    }
 
     &:focus, &:active {
       background-color: var(--a-base-9);

package/modules/@apostrophecms/schema/index.js

@@ -599,7 +599,8 @@ module.exports = {
       // set error class names, etc. If the error is not a string, it is a
       // database error etc. and should not be displayed in the browser directly.
 
-      async convert(req, schema, data, destination) {
+      async convert(req, schema, data, destination, { fetchRelationships = true } = {}) {
+        const options = { fetchRelationships };
         if (Array.isArray(req)) {
           throw new Error('convert invoked without a req, do you have one in your context?');
         }
@@ -629,7 +630,8 @@ module.exports = {
                   required: isRequired
                 },
                 data,
-                destination
+                destination,
+                options
               );
             } catch (error) {
               if (Array.isArray(error)) {
@@ -1039,7 +1041,7 @@ module.exports = {
 
         const handlers = {
           arrayItem: (field, object) => {
-            if (!can(field)) {
+            if (!object || !can(field)) {
               return;
             }
 
@@ -1048,7 +1050,7 @@ module.exports = {
             object.scopedArrayName = field.scopedArrayName;
           },
           object: (field, object) => {
-            if (!can(field)) {
+            if (!object || !can(field)) {
               return;
             }
 
@@ -1056,7 +1058,7 @@ module.exports = {
             object.scopedObjectName = field.scopedObjectName;
           },
           relationship: (field, doc) => {
-            if (!can(field)) {
+            if (!Array.isArray(doc[field.name]) || !can(field)) {
               return;
             }
 
@@ -1076,6 +1078,25 @@ module.exports = {
         self.apos.doc.walkByMetaType(doc, handlers);
       },
 
+      simulateRelationshipsFromStorage(req, doc) {
+        const handlers = {
+          relationship: (field, object) => {
+            const manager = self.apos.doc.getManager(field.withType);
+            const setId = (id) => manager.options.localized !== false
+              ? `${id}:${doc.aposLocale}`
+              : id;
+
+            const itemIds = object[field.idsStorage] || [];
+            object[field.name] = itemIds.map(id => ({
+              _id: setId(id),
+              _fields: object[field.fieldsStorage]?.[id] || {}
+            }));
+          }
+        };
+
+        self.apos.doc.walkByMetaType(doc, handlers);
+      },
+
       // Add a new field type. The `type` object may contain the following properties:
       //
       // ### `name`

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -10,7 +10,8 @@ const dateRegex = /^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
 module.exports = (self) => {
   self.addFieldType({
     name: 'area',
-    async convert(req, field, data, destination) {
+    async convert(req, field, data, destination, { fetchRelationships = true } = {}) {
+      const options = { fetchRelationships };
       const _id = self.apos.launder.id(data[field.name] && data[field.name]._id) || self.apos.util.generateId();
       if (typeof data[field.name] === 'string') {
         destination[field.name] = self.apos.area.fromPlaintext(data[field.name]);
@@ -34,7 +35,7 @@ module.exports = (self) => {
         // Always recover graciously and import something reasonable, like an empty area
         items = [];
       }
-      items = await self.apos.area.sanitizeItems(req, items, field.options || {});
+      items = await self.apos.area.sanitizeItems(req, items, field.options, options);
       destination[field.name] = {
         _id,
         items,
@@ -775,7 +776,8 @@ module.exports = (self) => {
 
   self.addFieldType({
     name: 'array',
-    async convert(req, field, data, destination) {
+    async convert(req, field, data, destination, { fetchRelationships = true } = {}) {
+      const options = { fetchRelationships };
       const schema = field.schema;
       data = data[field.name];
       if (!Array.isArray(data)) {
@@ -796,7 +798,7 @@ module.exports = (self) => {
         result.metaType = 'arrayItem';
         result.scopedArrayName = field.scopedArrayName;
         try {
-          await self.convert(req, schema, datum, result);
+          await self.convert(req, schema, datum, result, options);
         } catch (e) {
           if (Array.isArray(e)) {
             for (const error of e) {
@@ -876,7 +878,8 @@ module.exports = (self) => {
 
   self.addFieldType({
     name: 'object',
-    async convert(req, field, data, destination) {
+    async convert(req, field, data, destination, { fetchRelationships = true } = {}) {
+      const options = { fetchRelationships };
       data = data[field.name];
       const schema = field.schema;
       const errors = [];
@@ -888,7 +891,7 @@ module.exports = (self) => {
         data = {};
       }
       try {
-        await self.convert(req, schema, data, result);
+        await self.convert(req, schema, data, result, options);
       } catch (e) {
         if (Array.isArray(e)) {
           for (const error of e) {
@@ -972,7 +975,8 @@ module.exports = (self) => {
     // properties is handled at a lower level in a beforeSave
     // handler of the doc-type module.
 
-    async convert(req, field, data, destination) {
+    async convert(req, field, data, destination, { fetchRelationships = true } = {}) {
+      const options = { fetchRelationships };
       const manager = self.apos.doc.getManager(field.withType);
       if (!manager) {
         throw Error('relationship with type ' + field.withType + ' unrecognized');
@@ -991,6 +995,31 @@ module.exports = (self) => {
       if (field.max && field.max < input.length) {
         throw self.apos.error('max', `Maximum ${field.withType} required reached.`);
       }
+      if (fetchRelationships === false) {
+        destination[field.name] = [];
+
+        for (const relation of input) {
+          if (typeof relation === 'string') {
+            destination[field.name].push({
+              _id: self.apos.launder.id(relation),
+              _fields: {}
+            });
+            continue;
+          }
+
+          const _fields = {};
+          if (field.schema?.length) {
+            await self.convert(req, field.schema, relation._fields || {}, _fields, options);
+          }
+
+          destination[field.name].push({
+            _id: self.apos.launder.id(relation._id),
+            _fields
+          });
+        }
+        return;
+      }
+
       const ids = [];
       const titlesOrIds = [];
       for (const item of input) {
@@ -1034,9 +1063,13 @@ module.exports = (self) => {
           const result = results.find(doc => (doc._id === item._id));
           if (result) {
             if (field.schema) {
-              result._fields = { ...(destination[field.name]?.find?.(doc => doc._id === item._id)?._fields || {}) };
+              result._fields = {
+                ...(destination[field.name]
+                  ?.find?.(doc => doc._id === item._id)
+                  ?._fields || {})
+              };
               if (item && ((typeof item._fields === 'object'))) {
-                await self.convert(req, field.schema, item._fields || {}, result._fields);
+                await self.convert(req, field.schema, item._fields || {}, result._fields, options);
               }
             }
             actualDocs.push(result);

package/modules/@apostrophecms/schema/ui/apos/components/AposInputColor.vue

@@ -61,8 +61,10 @@ export default {
   .apos-color__info {
     @include type-base;
 
-    margin-left: 15px;
-    color: var(--a-text-primary);
+    & {
+      margin-left: 15px;
+      color: var(--a-text-primary);
+    }
   }
 </style>
 

package/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue

@@ -65,8 +65,10 @@ export default {
   .apos-input-wrapper {
     @include type-base;
 
-    display: flex;
-    place-content: flex-start space-between;
+    & {
+      display: flex;
+      place-content: flex-start space-between;
+    }
   }
 
   .apos-range__value {
@@ -97,8 +99,10 @@ export default {
   .apos-range__scale {
     @include type-small;
 
-    color: var(--a-base-4);
-    transition: color 500ms ease;
+    & {
+      color: var(--a-base-4);
+      transition: color 500ms ease;
+    }
   }
 
   // adapted from http://danielstern.ca/range.css/#/

package/modules/@apostrophecms/schema/ui/apos/components/AposInputRelationship.vue

@@ -126,9 +126,11 @@ export default {
   .apos-field__min-size {
     @include type-help;
 
-    display: flex;
-    flex-grow: 1;
-    margin-bottom: $spacing-base;
-    font-weight: var(--a-weight-bold);
+    & {
+      display: flex;
+      flex-grow: 1;
+      margin-bottom: $spacing-base;
+      font-weight: var(--a-weight-bold);
+    }
   }
 </style>

package/modules/@apostrophecms/schema/ui/apos/components/AposInputSlug.vue

@@ -54,9 +54,11 @@ export default {
   .apos-input-wrapper--with-prefix {
     @include apos-input();
 
-    display: flex;
-    align-items: center;
-    color: var(--a-base-4);
+    & {
+      display: flex;
+      align-items: center;
+      color: var(--a-base-4);
+    }
 
     .apos-input {
       padding-left: 0;