apostrophe 3.4.1 → 3.8.0

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

@@ -19,10 +19,10 @@
     </template>
     <template #primaryControls>
       <AposContextMenu
-        v-if="moreMenu.menu.length"
-        :button="moreMenu.button"
-        :menu="moreMenu.menu"
-        @item-clicked="moreMenuHandler"
+        v-if="utilityOperations.menu.length"
+        :button="utilityOperations.button"
+        :menu="utilityOperations.menu"
+        @item-clicked="utilityOperationsHandler"
       />
       <AposButton
         v-if="relationshipField"
@@ -66,19 +66,33 @@
             :selected-state="selectAllState"
             :total-pages="totalPages"
             :current-page="currentPage"
-            :filters="moduleOptions.filters"
             :filter-choices="filterChoices"
             :filter-values="filterValues"
+            :filters="moduleOptions.filters"
             :labels="moduleLabels"
+            :displayed-items="items.length"
+            :is-relationship="!!relationshipField"
+            :checked-count="checked.length"
+            :batch-operations="moduleOptions.batchOperations"
             @select-click="selectAll"
             @search="search"
             @page-change="updatePage"
             @filter="filter"
+            @batch="handleBatchAction"
             :options="{
-              disableUnchecked: maxReached(),
-              hideSelectAll: !relationshipField
+              disableUnchecked: maxReached()
             }"
           />
+          <AposDocsManagerSelectBox
+            :selected-state="selectAllState"
+            :module-labels="moduleLabels"
+            :filter-values="filterValues"
+            :checked-ids="checked"
+            :all-pieces-selection="allPiecesSelection"
+            :displayed-items="items.length"
+            @select-all="selectAllPieces"
+            @set-all-pieces-selection="setAllPiecesSelection"
+          />
         </template>
         <template #bodyMain>
           <AposDocsManagerDisplay
@@ -90,7 +104,6 @@
             :options="{
               ...moduleOptions,
               disableUnchecked: maxReached(),
-              hideCheckboxes: !relationshipField,
               disableUnpublished: disableUnpublished,
               manuallyPublished: manuallyPublished
             }"
@@ -136,7 +149,7 @@ export default {
       filterValues: {},
       queryExtras: {},
       holdQueries: false,
-      moreMenu: {
+      utilityOperations: {
         button: {
           label: 'apostrophe:moreOperations',
           iconOnly: true,
@@ -145,7 +158,11 @@ export default {
         },
         menu: []
       },
-      filterChoices: {}
+      filterChoices: {},
+      allPiecesSelection: {
+        isSelected: false,
+        total: 0
+      }
     };
   },
   computed: {
@@ -190,6 +207,16 @@ export default {
     },
     disableUnpublished() {
       return this.relationshipField && apos.modules[this.relationshipField.withType].localized;
+    },
+    selectAllChoice() {
+      const checkCount = this.checked.length;
+      const pageNotFullyChecked = this.items
+        .some((item) => !this.checked.includes(item._id));
+
+      return {
+        value: 'checked',
+        indeterminate: checkCount && pageNotFullyChecked
+      };
     }
   },
   created() {
@@ -206,14 +233,10 @@ export default {
     this.headers = this.computeHeaders();
     // Get the data. This will be more complex in actuality.
     this.modal.active = true;
-    this.getPieces();
-    if (this.relationshipField && this.moduleOptions.canEdit) {
-      // Add computed singular label to context menu
-      this.moreMenu.menu.unshift({
-        action: 'new',
-        label: `New ${this.moduleLabels.singular}`
-      });
-    }
+    this.setUtilityOperations();
+    await this.getPieces();
+    await this.getAllPiecesTotal();
+
     apos.bus.$on('content-changed', this.getPieces);
   },
   destroyed() {
@@ -221,10 +244,13 @@ export default {
     apos.bus.$off('content-changed', this.getPieces);
   },
   methods: {
-    moreMenuHandler(action) {
+    utilityOperationsHandler(action) {
       if (action === 'new') {
         this.create();
+        return;
       }
+
+      this.handleUtilityOperation(action);
     },
     setCheckedDocs(checked) {
       this.checkedDocs = checked;
@@ -235,6 +261,29 @@ export default {
     async create() {
       await this.edit(null);
     },
+    async handleUtilityOperation(action) {
+      const operation = this.utilityOperations.menu
+        .find((op) => op.action === action);
+
+      if (!operation) {
+        return;
+      }
+
+      const {
+        modal, ...modalOptions
+      } = operation.modalOptions || {};
+
+      if (modal) {
+        await apos.modal.execute(modal, {
+          moduleAction: this.moduleOptions.action,
+          action,
+          labels: this.moduleLabels,
+          messages: operation.messages,
+          ...modalOptions
+        });
+      }
+    },
+
     // If pieceOrId is null, a new piece is created
     async edit(pieceOrId) {
       let piece;
@@ -268,42 +317,68 @@ export default {
     async finishSaved() {
       await this.getPieces();
     },
-    async getPieces () {
-      if (this.holdQueries) {
-        return;
-      }
-
-      this.holdQueries = true;
-
-      const qs = {
+    async request (mergeOptions) {
+      const options = {
         ...this.filterValues,
-        page: this.currentPage,
         ...this.queryExtras,
-        // Also fetch published docs as _publishedDoc subproperties
+        ...mergeOptions,
         withPublished: 1
       };
 
       // Avoid undefined properties.
-      for (const prop in qs) {
-        if (qs[prop] === undefined) {
-          delete qs[prop];
-        };
+      const qs = Object.entries(options)
+        .reduce((acc, [ key, val ]) => ({
+          ...acc,
+          ...val !== undefined && { [key]: val }
+        }), {});
+
+      return apos.http.get(this.moduleOptions.action, {
+        qs,
+        busy: true,
+        draft: true
+      });
+    },
+    async getPieces () {
+      if (this.holdQueries) {
+        return;
       }
 
-      const getResponse = await apos.http.get(
-        this.moduleOptions.action, {
-          busy: true,
-          qs,
-          draft: true
-        }
-      );
+      this.holdQueries = true;
+
+      const {
+        currentPage, pages, results, choices
+      } = await this.request({
+        page: this.currentPage
+      });
 
-      this.currentPage = getResponse.currentPage;
-      this.totalPages = getResponse.pages;
-      this.items = getResponse.results;
-      this.filterChoices = getResponse.choices;
+      this.currentPage = currentPage;
+      this.totalPages = pages;
+      this.items = results;
+      this.filterChoices = choices;
       this.holdQueries = false;
     },
+    async getAllPiecesTotal () {
+      const { count: total } = await this.request({ count: 1 });
+
+      this.setAllPiecesSelection({
+        isSelected: false,
+        total
+      });
+    },
+    async selectAllPieces () {
+      const { results: docs } = await this.request({
+        project: {
+          _id: 1
+        },
+        attachments: false,
+        perPage: this.allPiecesSelection.total
+      });
+
+      this.setAllPiecesSelection({
+        isSelected: true,
+        docs
+      });
+    },
     updatePage(num) {
       if (num) {
         this.currentPage = num;
@@ -322,6 +397,7 @@ export default {
       this.currentPage = 1;
 
       await this.getPieces();
+      await this.getAllPiecesTotal();
     },
     async filter(filter, value) {
       if (this.filterValues[filter] === value) {
@@ -331,10 +407,12 @@ export default {
       this.filterValues[filter] = value;
       this.currentPage = 1;
 
-      this.getPieces();
+      await this.getPieces();
+      await this.getAllPiecesTotal();
       this.headers = this.computeHeaders();
-    },
 
+      this.setCheckedDocs([]);
+    },
     shortcutNew(event) {
       const interesting = (event.keyCode === 78 || event.keyCode === 67); // C(reate) or N(ew)
       const topModal = apos.modal.stack[apos.modal.stack.length - 1] ? apos.modal.stack[apos.modal.stack.length - 1].id : null;
@@ -346,7 +424,6 @@ export default {
         this.create();
       }
     },
-
     bindShortcuts() {
       window.addEventListener('keydown', this.shortcutNew);
     },
@@ -373,6 +450,61 @@ export default {
           _fields: result
         });
       }
+    },
+    setAllPiecesSelection ({
+      isSelected, total, docs
+    }) {
+      if (typeof isSelected === 'boolean') {
+        this.allPiecesSelection.isSelected = isSelected;
+      }
+
+      if (typeof total === 'number') {
+        this.allPiecesSelection.total = total;
+      }
+
+      if (docs) {
+        this.setCheckedDocs(docs);
+      }
+    },
+    async handleBatchAction({
+      label, action, requestOptions = {}, messages
+    }) {
+      if (action) {
+        try {
+          await apos.http.post(`${this.moduleOptions.action}/${action}`, {
+            body: {
+              ...requestOptions,
+              _ids: this.checked,
+              messages: messages,
+              type: this.checked.length === 1 ? this.moduleLabels.singular
+                : this.moduleLabels.plural
+            }
+          });
+        } catch (error) {
+          apos.notify('Batch operation {{ operation }} failed.', {
+            interpolate: { operation: label },
+            type: 'danger'
+          });
+        }
+      }
+    },
+    setUtilityOperations () {
+      const { utilityOperations } = this.moduleOptions;
+
+      const newPiece = {
+        action: 'new',
+        label: {
+          key: 'apostrophe:newDocType',
+          type: this.$t(this.moduleLabels.singular)
+        }
+      };
+
+      this.utilityOperations.menu = [
+        ...this.relationshipField && this.moduleOptions.canEdit
+          ? [ newPiece ] : [],
+        ...this.utilityOperations.menu,
+        ...(!this.relationshipField && Array.isArray(utilityOperations) && utilityOperations) || []
+      ];
     }
   }
 };

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

@@ -4,7 +4,6 @@
       <tr>
         <th
           class="apos-table__header"
-          v-if="!options.hideCheckboxes"
         />
         <th
           v-for="header in headers" scope="col"
@@ -26,7 +25,7 @@
         <th class="apos-table__header" key="contextMenu">
           <component
             :is="getEl({})"
-            class="apos-table__header-label is-hidden"
+            class="apos-table__header-label apos-is-hidden"
           >
             {{ $t('apostrophe:moreOperations') }}
           </component>
@@ -41,7 +40,6 @@
       >
         <td
           class="apos-table__cell"
-          v-if="!options.hideCheckboxes"
         >
           <AposCheckbox
             v-if="item._id"

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

@@ -0,0 +1,138 @@
+<template>
+  <transition
+    name="collapse"
+    :duration="300"
+  >
+    <div
+      v-if="selectedState === 'checked' || allPiecesSelection.isSelected"
+      class="apos-select-box"
+    >
+      <div class="apos-select-box__content">
+        <p class="apos-select-box__text">
+          {{ selectBoxMessage }}
+          <button
+            v-if="!allPiecesSelection.isSelected"
+            class="apos-select-box__select-all"
+            @click="$emit('select-all')"
+          >
+            {{ selectBoxMessageButton }}
+          </button>
+          <button
+            v-else
+            class="apos-select-box__select-all"
+            @click="clearSelection"
+          >
+            {{ $t('apostrophe:clearSelection') }}.
+          </button>
+        </p>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    selectedState: {
+      type: String,
+      required: true
+    },
+    moduleLabels: {
+      type: Object,
+      required: true
+    },
+    checkedIds: {
+      type: Array,
+      required: true
+    },
+    allPiecesSelection: {
+      type: Object,
+      required: true
+    },
+    displayedItems: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: [ 'select-all', 'clear-select', 'set-all-pieces-selection' ],
+  computed: {
+    selectBoxMessage () {
+      const checkedCount = this.checkedIds.length;
+      const showAllWord = (checkedCount === this.allPiecesSelection.total) &&
+        checkedCount !== 1;
+
+      const translationKey = this.allPiecesSelection.isSelected
+        ? showAllWord
+          ? 'apostrophe:selectBoxMessageAllSelected'
+          : 'apostrophe:selectBoxMessageSelected'
+        : checkedCount > this.displayedItems
+          ? 'apostrophe:selectBoxMessage'
+          : 'apostrophe:selectBoxMessagePage';
+
+      return this.$t(translationKey, {
+        num: this.checkedIds.length,
+        label: this.getLabel(this.checkedIds.length)
+      });
+    },
+    selectBoxMessageButton () {
+      const translationKey = this.allPiecesSelection.total === 1
+        ? 'apostrophe:selectBoxMessageButton'
+        : 'apostrophe:selectBoxMessageAllButton';
+
+      return this.$t(translationKey, {
+        num: this.allPiecesSelection.total,
+        label: this.getLabel(this.allPiecesSelection.total)
+      });
+    }
+  },
+  methods: {
+    getLabel(number) {
+      return number === 1
+        ? this.$t(this.moduleLabels.singular).toLowerCase()
+        : this.$t(this.moduleLabels.plural).toLowerCase();
+    },
+    clearSelection () {
+      this.$emit('set-all-pieces-selection', {
+        isSelected: false,
+        docs: []
+      });
+    }
+  }
+};
+</script>
+<style lang='scss' scoped>
+  .apos-select-box {
+    box-sizing: border-box;
+    overflow: hidden;
+    height: 5rem;
+    transition: all 0.3s linear;
+
+    &.collapse-enter, &.collapse-leave-to {
+      height: 0;
+    }
+
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--a-base-9);
+      margin-top: 1rem;
+      color: var(--a-text-primary);
+    }
+
+    &__text {
+      @include type-large;
+    }
+
+    &__select-all {
+      color: var(--a-primary);
+      cursor: pointer;
+      margin-left: 0.4rem;
+      border: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+</style>

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

@@ -26,9 +26,8 @@
       </AposContextMenuDialog>
     </bubble-menu>
     <div class="apos-rich-text-editor__editor" :class="editorModifiers">
-      <editor-content :editor="editor" :class="moduleOptions.className" />
+      <editor-content :editor="editor" :class="editorOptions.className" />
     </div>
-    <!-- Using actual DOM element rather than :after to ease localization -->
     <div class="apos-rich-text-editor__editor_after" :class="editorModifiers">
       {{ $t('apostrophe:emptyRichTextWidget') }}
     </div>
@@ -103,11 +102,27 @@ export default {
 
       activeOptions.styles = this.enhanceStyles(activeOptions.styles || this.defaultOptions.styles);
 
+      activeOptions.className = (activeOptions.className !== undefined)
+        ? activeOptions.className : this.moduleOptions.className;
+
       return activeOptions;
     },
-
+    autofocus() {
+      // Only true for a new rich text widget
+      return !this.stripPlaceholderBrs(this.value.content).length;
+    },
     initialContent() {
-      return this.stripPlaceholderBrs(this.value.content);
+      const content = this.stripPlaceholderBrs(this.value.content);
+      if (!content.length) {
+        // If we don't supply a valid instance of the first style, then
+        // the text align control will not work until the user manually
+        // applies a style or refreshes the page
+        const defaultStyle = this.editorOptions.styles.find(style => style.def);
+        const _class = defaultStyle.class ? ` class="${defaultStyle.class}"` : '';
+        return `<${defaultStyle.tag}${_class}></${defaultStyle.tag}>`;
+      } else {
+        return content;
+      }
     },
     toolbar() {
       return this.editorOptions.toolbar;
@@ -136,7 +151,7 @@ export default {
     aposTiptapExtensions() {
       return (apos.tiptapExtensions || [])
         .map(extension => extension({
-          styles: this.editorOptions.styles,
+          styles: this.editorOptions.styles.map(this.localizeStyle),
           types: this.tiptapTypes
         }));
     }
@@ -153,7 +168,7 @@ export default {
   mounted() {
     this.editor = new Editor({
       content: this.initialContent,
-      autofocus: !this.initialContent,
+      autofocus: this.autofocus,
       onUpdate: this.editorUpdate,
       extensions: [
         StarterKit,
@@ -217,7 +232,6 @@ export default {
     // commands and parameters used internally.
     enhanceStyles(styles) {
       const self = this;
-      const enhanced = [];
       (styles || []).forEach(style => {
         style.options = {};
         for (const key in self.tiptapTextCommands) {
@@ -242,9 +256,7 @@ export default {
           style.options.class = style.class;
         }
 
-        if (style.type) {
-          enhanced.push(style);
-        } else {
+        if (!style.type) {
           apos.notify('apostrophe:richTextStyleConfigWarning', {
             type: 'warning',
             dismiss: true,
@@ -256,7 +268,27 @@ export default {
           });
         }
       });
+
+      // ensure a default so we can rely on it throughout
+      const hasDefault = !!styles.find(style => style.def);
+      if (!hasDefault && styles.length) {
+        // If no dev set default, use the first paragraph we can find
+        if (styles.filter(style => style.type === 'paragraph').length) {
+          styles.filter(style => style.type === 'paragraph')[0].def = true;
+        } else {
+          // Otherwise, set the first style
+          styles[0].def = true;
+        }
+      }
       return styles;
+    },
+    localizeStyle(style) {
+      style.label = this.$t(style.label);
+
+      return {
+        ...style,
+        label: this.$t(style.label)
+      };
     }
   }
 };

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

@@ -52,6 +52,9 @@ export default {
         const style = styles[i];
         if (this.editor.isActive(style.type, (style.options || {}))) {
           return i;
+        } else if (this.editor.state.selection.$head.parent.type.name === 'defaultNode' && style.def) {
+          // Look deeper to see if custom defaultNode is active
+          return i;
         }
       }
       return 0;

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Classes.js

@@ -25,9 +25,7 @@ export default (options) => {
                 const tag = element.tagName.toLowerCase();
                 // This tag is not configured
                 if (!allow[tag]) {
-                  return {
-                    class: null
-                  };
+                  return null;
                 }
                 const classes = (element.getAttribute('class') || '')
                   .split(' ')
@@ -36,13 +34,11 @@ export default (options) => {
                 // If no valid classes for this parse, default to the
                 // the first setting for this tag (including null for tags defined without classes).
                 // else, remove classes.
-                return {
-                  class: classes.length
-                    ? classes.join(' ')
-                    : (
-                      allow[tag].length ? allow[tag][0] : null
-                    )
-                };
+                return classes.length
+                  ? classes.join(' ')
+                  : (
+                    allow[tag].length ? allow[tag][0] : null
+                  );
               }
             }
           }