PRO-6436: Add export batch operation for pages (#78)

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Adds
 
 * Singletons can now be imported through `contextOperations` since they have no manager modal and thus, no `utilityOperation` available.
+* Pages can be exported via an Export batch operation.
 
 ### Fixes
 

lib/handlers.js

@@ -40,8 +40,12 @@ module.exports = (self) => {
         const importOperation = {
           action: 'import-export-import',
           context: 'update',
+          replaces: true,
           label: 'aposImportExport:import',
           modal: 'AposImportModal',
+          props: {
+            action: 'import-export-import'
+          },
           if: { $and: excludedImportTypes },
           conditions: [ 'canEdit' ]
         };

modules/@apostrophecms/import-export-page/index.js

@@ -21,7 +21,32 @@ module.exports = {
       }
     };
   },
+  batchOperations(self) {
+    if (self.options.importExport?.export === false) {
+      return {};
+    }
 
+    return {
+      add: {
+        'import-export-export-batch': {
+          label: 'aposImportExport:export',
+          messages: {
+            progress: 'aposImportExport:exporting',
+            completed: 'aposImportExport:exported',
+            icon: 'database-export-icon',
+            resultsEventName: 'import-export-export-download'
+          },
+          modal: 'AposExportModal'
+        }
+      },
+      group: {
+        more: {
+          icon: 'dots-vertical-icon',
+          operations: [ 'import-export-export-batch' ]
+        }
+      }
+    };
+  },
   apiRoutes(self) {
     return {
       post: {
@@ -40,6 +65,17 @@ module.exports = {
 
             return self.apos.modules['@apostrophecms/import-export'].export(req, self);
           }
+        },
+        importExportExportBatch(req) {
+          // Add the pages label to req.body for notifications.
+          // Should be done before calling the job's `run` method.
+          req.body.type = req.t('apostrophe:pages');
+
+          return self.apos.modules['@apostrophecms/job'].run(
+            req,
+            (req, reporting) => self.apos.modules['@apostrophecms/import-export']
+              .export(req, self, reporting)
+          );
         }
       }
     };

ui/apos/components/AposExportModal.vue

@@ -149,6 +149,10 @@ export default {
       type: Array,
       default: () => []
     },
+    checkedTypes: {
+      type: Array,
+      default: () => []
+    },
     doc: {
       type: Object,
       default: null
@@ -204,6 +208,11 @@ export default {
         label: format.label,
         value: format.name
       }));
+    },
+    checkedTypesComputed() {
+      return this.moduleName === '@apostrophecms/page' && !this.type
+        ? [ ...new Set(this.checkedTypes) ]
+        : [ this.type ];
     }
   },
 
@@ -229,7 +238,7 @@ export default {
       this.relatedTypes = await apos.http.get('/api/v1/@apostrophecms/import-export/related', {
         busy: true,
         qs: {
-          types: [ this.type ]
+          types: this.checkedTypesComputed
         }
       });
       this.checkedRelatedTypes = this.relatedTypes;

ui/apos/components/AposImportModal.vue

@@ -12,7 +12,7 @@
       <AposModalBody>
         <template #bodyMain>
           <h2 class="apos-import__heading">
-            {{ $t('aposImportExport:import', { type: $t(labels.plural) }) }}
+            {{ $t('aposImportExport:import', { type: moduleLabel }) }}
           </h2>
           <!-- eslint-disable vue/no-v-html -->
           <p
@@ -42,7 +42,7 @@
             <AposButton
               class="apos-import__btn"
               icon="apos-import-export-upload-icon"
-              :label="$t('aposImportExport:import', { type: $t(labels.plural) })"
+              :label="$t('aposImportExport:import', { type: moduleLabel })"
               type="primary"
               :disabled="!selectedFile"
               @click="runImport"
@@ -57,9 +57,15 @@
 <script>
 export default {
   props: {
+    // The Manager context menu items send moduleAction
     moduleAction: {
       type: String,
-      required: true
+      default: ''
+    },
+    // The Editor context menu items send moduleName
+    moduleName: {
+      type: String,
+      default: ''
     },
     action: {
       type: String,
@@ -88,6 +94,15 @@ export default {
   },
 
   computed: {
+    moduleLabel() {
+      // Indicates this is an Editor context menu item action.
+      if (this.moduleAction) {
+        return this.$t(this.labels.plural);
+      }
+      // Use the module label, fallback to the plural label (which is most
+      // likely empty).
+      return this.$t(apos.modules[this.moduleName]?.label ?? this.labels.plural);
+    },
     formats() {
       return apos.modules['@apostrophecms/import-export'].formats;
     },
@@ -100,6 +115,12 @@ export default {
       return this.formats
         .map(format => format.allowedExtension)
         .join(',');
+    },
+    universalModuleAction() {
+      if (this.moduleAction) {
+        return this.moduleAction;
+      }
+      return apos.modules[this.moduleName]?.action;
     }
   },
 
@@ -122,12 +143,20 @@ export default {
     cancel () {
       this.modal.showModal = false;
     },
-    async runImport () {
+    async runImport() {
+      if (!this.universalModuleAction) {
+        console.error('AposImportModal: No module action found');
+        apos.notify('aposImportExport:importFailed', {
+          type: 'danger',
+          dismiss: true
+        });
+        return;
+      }
       const formData = new FormData();
       formData.append('file', this.selectedFile);
 
       apos.bus.$emit('import-export-import-started');
-      apos.http.post(`${this.moduleAction}/${this.action}`, {
+      apos.http.post(`${this.universalModuleAction}/${this.action}`, {
         body: formData
       }).catch(() => {
         apos.notify('aposImportExport:importFailed', {