apostrophe 3.7.0 → 3.8.0

package/modules/@apostrophecms/modal/ui/apos/components/AposDocsManagerToolbar.vue

@@ -2,26 +2,46 @@
   <AposModalToolbar class-name="apos-manager-toolbar">
     <template #leftControls>
       <AposButton
-        v-if="!options.hideSelectAll"
-        label="apostrophe:select" :icon-only="true"
-        :icon="checkboxIcon" type="outline"
+        v-if="displayedItems"
+        label="apostrophe:select"
+        type="outline"
+        text-color="var(--a-primary)"
+        :icon-only="true"
+        :icon="checkboxIcon"
         @click="$emit('select-click')"
       />
-      <!-- TODO: Return this delete button when batch updates are added.
-        When we do that though, we should do it like we handle the other
-        batch operation events, not with extra event plumbing
-        percolating everywhere. We can still achieve a custom button
-        without that. -->
-      <!-- <AposButton
-        label="apostrophe:delete" @click="$emit('archive-click')"
-        :icon-only="true" icon="delete-icon"
-        type="outline"
-      /> -->
-      <!-- <AposContextMenu
-        :button="more.button"
-        :menu="more.menu"
-        @item-clicked="managerAction"
-      /> -->
+      <div
+        v-for="{
+          action,
+          label,
+          icon,
+          operations,
+          ...rest
+        } in activeOperations"
+        :key="action"
+      >
+        <AposButton
+          v-if="!operations"
+          :label="label"
+          :icon-only="true"
+          :icon="icon"
+          :disabled="!checkedCount"
+          type="outline"
+          @click="confirmOperation({ action, label, ...rest })"
+        />
+        <AposContextMenu
+          v-else
+          :button="{
+            label,
+            icon,
+            iconOnly: true,
+            type: 'outline'
+          }"
+          :disabled="!checkedCount"
+          :menu="operations"
+          @item-clicked="(a) => beginGroupedOperation(a, operations)"
+        />
+      </div>
     </template>
     <template #rightControls>
       <AposPager
@@ -30,7 +50,7 @@
         :total-pages="totalPages" :current-page="currentPage"
       />
       <AposFilterMenu
-        v-if="filters.length > 0"
+        v-if="filters.length"
         :filters="filters"
         :choices="filterChoices"
         :values="filterValues"
@@ -57,27 +77,19 @@ export default {
     },
     applyTags: {
       type: Array,
-      default () {
-        return [];
-      }
-    },
-    filters: {
-      type: Array,
-      default () {
-        return [];
-      }
+      default: () => []
     },
     filterChoices: {
       type: Object,
-      default () {
-        return {};
-      }
+      default: () => ({})
     },
     filterValues: {
       type: Object,
-      default () {
-        return {};
-      }
+      default: () => ({})
+    },
+    filters: {
+      type: Array,
+      default: () => []
     },
     totalPages: {
       type: Number,
@@ -87,42 +99,40 @@ export default {
       type: Number,
       default: 1
     },
+    isRelationship: {
+      type: Boolean,
+      default: false
+    },
     labels: {
       type: Object,
-      default () {
-        return {};
-      }
+      default: () => ({})
     },
     options: {
       type: Object,
-      default () {
-        return {};
-      }
+      default: () => ({})
+    },
+    batchOperations: {
+      type: Array,
+      default: () => []
+    },
+    displayedItems: {
+      type: Number,
+      required: true
+    },
+    checkedCount: {
+      type: Number,
+      required: true
     }
   },
   emits: [
     'select-click',
     'filter',
     'search',
-    'page-change'
+    'page-change',
+    'batch'
   ],
   data() {
     return {
-      // TODO: Uncomment to return this when batch updates are added.
-      // more: {
-      //   button: {
-      //     label: 'apostrophe:moreOperations',
-      //     iconOnly: true,
-      //     icon: 'dots-vertical-icon',
-      //     type: 'outline'
-      //   },
-      //   menu: [
-      //     {
-      //       label: 'Unpublish All',
-      //       action: 'unpublish-all'
-      //     }
-      //   ]
-      // },
       searchField: {
         field: {
           name: 'search',
@@ -135,7 +145,8 @@ export default {
         },
         status: {},
         value: { data: '' }
-      }
+      },
+      activeOperations: []
     };
   },
   computed: {
@@ -149,9 +160,52 @@ export default {
       }
     }
   },
+  mounted () {
+    this.computeActiveOperations();
+  },
   methods: {
+    computeActiveOperations () {
+      if (this.isRelationship) {
+        this.activeOperations = [];
+        return;
+      }
+
+      this.activeOperations = this.batchOperations
+        .map(({ operations, ...rest }) => {
+          if (!operations) {
+            return {
+              ...rest,
+              operations
+            };
+          }
+
+          return {
+            operations: operations.filter((op) => this.isOperationActive(op)),
+            ...rest
+          };
+        }).filter((operation) => {
+          if (operation.operations && !operation.operations.length) {
+            return false;
+          }
+
+          return this.isOperationActive(operation);
+        });
+    },
+    isOperationActive (operation) {
+      return Object.entries(operation.if || {})
+        .every(([ filter, val ]) => {
+          if (Array.isArray(val)) {
+            return val.includes(this.filterValues[filter]);
+          }
+
+          return this.filterValues[filter] === val;
+        });
+    },
     filter(filter, value) {
       this.$emit('filter', filter, value.data);
+      if (this.filterValues[filter] !== value) {
+        this.computeActiveOperations();
+      }
     },
     search(value, force) {
       if ((force && !value) || value.data === '') {
@@ -165,12 +219,48 @@ export default {
 
       this.$emit('search', value.data);
     },
-    managerAction(action) {
-      // TODO: flesh this out.
-      console.info('ACTION: ', action);
-    },
     registerPageChange(pageNum) {
       this.$emit('page-change', pageNum);
+    },
+    async beginGroupedOperation(action, operations) {
+      const operation = operations.find(o => o.action === action);
+
+      await this.confirmOperation(operation);
+    },
+    async confirmOperation ({
+      modalOptions = {}, action, operations, label, ...rest
+    }) {
+      const {
+        title = label,
+        description = '',
+        confirmationButton = 'apostrophe:affirmativeLabel',
+        form
+      } = action && operations
+        ? (operations.find((op) => op.action === action)).modalOptions
+        : modalOptions;
+
+      const interpolations = {
+        count: this.checkedCount,
+        type: this.checkedCount === 1
+          ? this.$t(this.labels.singular)
+          : this.$t(this.labels.plural)
+      };
+
+      const confirmed = await apos.confirm({
+        heading: this.$t(title, interpolations),
+        description: this.$t(description, interpolations),
+        affirmativeLabel: confirmationButton,
+        localize: false,
+        ...form && form
+      });
+
+      if (confirmed) {
+        this.$emit('batch', {
+          label,
+          action,
+          ...rest
+        });
+      }
     }
   }
 };

package/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue

@@ -27,7 +27,11 @@
           <p v-if="content.description" class="apos-confirm__description">
             {{ localize(content.description) }}
           </p>
-          <Component v-if="content.body" :is="content.body.component" v-bind="content.body.props" />
+          <Component
+            v-if="content.body"
+            :is="content.body.component"
+            v-bind="content.body.props"
+          />
           <div v-if="content.form" class="apos-confirm__schema">
             <AposSchema
               v-if="formValues"
@@ -143,11 +147,9 @@ export default {
       this.$emit('modal-result', false);
     },
     localize(s) {
-      if (this.options.localize === false) {
-        return s;
-      } else {
-        return this.$t(s, this.options.interpolate || {});
-      }
+      return this.options.localize === false
+        ? s
+        : this.$t(s, this.options.interpolate || {});
     }
   }
 };

package/modules/@apostrophecms/modal/ui/apos/mixins/AposDocsManagerMixin.js

@@ -56,25 +56,20 @@ export default {
     sort(action) {
       this.$emit('sort', action);
     },
-    selectAllValue() {
-      return this.checked.length > 0 ? { data: [ 'checked' ] } : { data: [] };
-    },
     selectAllChoice() {
       const checkCount = this.checked.length;
       const itemCount = (this.items && this.items.length) || 0;
 
-      return checkCount > 0 && checkCount !== itemCount ? {
+      return {
         value: 'checked',
-        indeterminate: true
-      } : {
-        value: 'checked'
+        indeterminate: checkCount > 0 && checkCount !== itemCount
       };
     },
     selectAllState() {
-      if (this.selectAllValue.data.length && !this.selectAllChoice.indeterminate) {
+      if (this.checked.length && !this.selectAllChoice.indeterminate) {
         return 'checked';
       }
-      if (this.selectAllValue.data.length && this.selectAllChoice.indeterminate) {
+      if (this.checked.length && this.selectAllChoice.indeterminate) {
         return 'indeterminate';
       }
       return 'empty';
@@ -122,22 +117,24 @@ export default {
     selectAll() {
       if (!this.checked.length) {
         this.items.forEach((item) => {
-          const relationshipsMaxed = this.relationshipField && this.maxReached();
+          const relationshipsMaxedOrUnpublished = this.relationshipField &&
+          (this.maxReached() || !item.lastPublishedAt);
 
-          if (relationshipsMaxed || !item.lastPublishedAt) {
+          if (relationshipsMaxedOrUnpublished) {
             return;
           }
 
           this.checked.push(item._id);
         });
+
         return;
       }
 
-      if (this.checked.length <= this.items.length) {
-        this.checked.forEach((id) => {
-          this.checked = this.checked.filter(item => item !== id);
-        });
+      if (this.allPiecesSelection) {
+        this.allPiecesSelection.isSelected = false;
       }
+
+      this.checked = [];
     },
     iconSize(header) {
       if (header.icon) {

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

@@ -160,6 +160,40 @@ module.exports = {
       return self.db.deleteMany({ _id });
     }
   }),
+  apiRoutes(self) {
+    return {
+      post: {
+        // Clear a registered event on a notification to prevent it from
+        // emitting twice. Returns `true` if the event was found and cleared.
+        // Returns `false` if not found (because it was already cleared).
+        ':_id/clear-event': async function (req) {
+          const lockId = `clear-event-${req.params._id}`;
+
+          let response;
+          try {
+            await self.apos.lock.lock(lockId);
+
+            response = await self.db.updateOne({
+              _id: req.params._id,
+              event: {
+                $ne: null
+              }
+            }, {
+              $set: {
+                event: null
+              }
+            });
+          } catch (error) {
+            throw self.apos.error('notfound');
+          } finally {
+            await self.apos.lock.unlock(lockId);
+          }
+
+          return response.result.nModified > 0;
+        }
+      }
+    };
+  },
   methods(self) {
     return {
       getBrowserData(req) {
@@ -189,6 +223,19 @@ module.exports = {
       // apos bus event of the given `name` with the provided `data` object. Currently
       // `'event'` is the only supported value for `type`.
       //
+      // `options.return` will return the notification object. This is not
+      // done otherwise to minimize risk of leaking MongoDB metadata to the
+      // browser.
+      //
+      // `options.icon`, set to an active Vue Materials Icons icon name, will
+      // set an icon on the notification.
+      //
+      // `options.job` can be set to an object with properties related to an
+      // Apostrophe Job (from the @apostrophecms/job module) for the
+      // notification to track the job's progress. These can include the job
+      // `_id` and, for the 'completed' stage, the job `action`,
+      // e.g., 'archive'.
+      //
       // Throws an error if there is no `req.user`.
       //
       // `interpolate` may contain an object with properties to be
@@ -203,6 +250,8 @@ module.exports = {
       // the application, as in a command line task.
 
       async trigger(req, message, options = {}, interpolate = {}) {
+        const { return: returnId, ...copiedOptions } = options;
+
         if (typeof req === 'string') {
           // String was passed, assume it is a user _id
           req = { user: { _id: req } };
@@ -219,19 +268,23 @@ module.exports = {
           createdAt: new Date(),
           userId: req.user._id,
           message,
+          icon: options.icon,
           interpolate: interpolate || options.interpolate || {},
           // Defaults to true, otherwise launder as boolean
-          localize: has(req.body, 'localize') ? self.apos.launder.boolean(req.body.localize) : true
+          localize: has(req.body, 'localize')
+            ? self.apos.launder.boolean(req.body.localize) : true,
+          job: options.job || null,
+          event: options.event
         };
 
-        if (options.dismiss === true) {
-          options.dismiss = 5;
+        if (copiedOptions.dismiss === true) {
+          copiedOptions.dismiss = 5;
         }
 
-        Object.assign(notification, options);
+        Object.assign(notification, copiedOptions);
 
-        // We await here rather than returning because we
-        // expressly do not want to leak mongodb metadata to the browser
+        // We await here rather than returning because we expressly do not
+        // want to leak mongodb metadata to the browser
         await self.db.updateOne(
           notification,
           {
@@ -243,8 +296,55 @@ module.exports = {
             upsert: true
           }
         );
+
+        if (returnId) {
+          return {
+            noteId: notification._id
+          };
+        }
       },
 
+      // The dismiss method accepts the following arguments:
+      // - req: A valid req.
+      // - noteId: The _id of an active notification.
+      // - delay: An optional integer of milliseconds to pause before the
+      //   notification actually dismisses.
+      async dismiss (req, noteId, delay) {
+        if (!req.user) {
+          throw self.apos.error('forbidden');
+        }
+
+        await pause(delay);
+
+        try {
+          await self.db.updateOne(
+            {
+              _id: noteId
+            },
+            {
+              $set: {
+                dismissed: true
+              },
+              $currentDate: {
+                updatedAt: true
+              }
+            }, {
+              upsert: true
+            }
+          );
+        } catch (error) {
+          // Most likely the ID did not belong to an actual notification.
+          throw self.apos.error('invalid');
+        }
+
+        async function pause (delay) {
+          if (!delay) {
+            return;
+          }
+
+          return new Promise((resolve) => setTimeout(resolve, delay));
+        }
+      },
       // Resolves with an object with `notifications` and `dismissed`
       // properties.
       //
@@ -256,8 +356,16 @@ module.exports = {
         try {
           const results = await self.db.find({
             userId: req.user._id,
-            ...(options.modifiedOnOrSince && { updatedAt: { $gte: new Date(options.modifiedOnOrSince) } }),
-            ...(options.seenIds && { _id: { $nin: options.seenIds } })
+            ...(options.modifiedOnOrSince && {
+              updatedAt: {
+                $gte: new Date(options.modifiedOnOrSince)
+              }
+            }),
+            ...(options.seenIds && {
+              _id: {
+                $nin: options.seenIds
+              }
+            })
           }).sort({ createdAt: 1 }).toArray();
 
           const notifications = results.filter(result => !result.dismissed);