Modal export: add section for page's children

apostrophecms · Aug 10, 2023 · 7b02796 · 7b02796
1 parent 70a4183
commit 7b02796
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 29 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -6,6 +6,7 @@
   "exportModalSettingsLabel": "Export Settings",
   "exportModalDocumentFormat": "Document Format",
   "exportModalIncludeRelated": "Include related documents",
+  "exportModalIncludeChildren": "Include children of this page",
   "exportModalIncludeRelatedSettings": "Related Documents Settings",
   "exportModalNoRelatedTypes": "No Related Types"
 }
diff --git a/index.js b/index.js
@@ -27,12 +27,12 @@ module.exports = {
             throw self.apos.error('forbidden');
           }
 
-          const moduleName = self.apos.launder.string(req.query.moduleName);
-          if (!moduleName) {
+          const type = self.apos.launder.string(req.query.type);
+          if (!type) {
             throw self.apos.error('invalid');
           }
 
-          const { schema = [] } = self.apos.modules[moduleName];
+          const { schema = [] } = self.apos.modules[type];
           const relatedTypes = schema.flatMap(searchRelationships).filter(Boolean);
 
           return [ ...new Set(relatedTypes) ];

diff --git a/ui/apos/components/AposExportModal.vue b/ui/apos/components/AposExportModal.vue
@@ -25,17 +25,31 @@
               {{ $t('aposImportExport:exportModalSettingsLabel') }}
             </div>
             <div class="apos-export__separator" />
-            <div class="apos-export__settings-row apos-export__settings-row--red-colored">
+
+            <div class="apos-export__settings-row">
               <div>{{ $t('aposImportExport:exportModalDocumentFormat') }}</div>
               <AposContextMenu
                 disabled
                 :button="{
                   label: 'ZIP',
                   icon: 'chevron-down-icon',
-                  modifiers: ['icon-right', 'disabled', 'export-format']
+                  modifiers: ['icon-right', 'disabled']
                 }"
               />
             </div>
+
+            <div
+              v-if="moduleName === '@apostrophecms/page'"
+              class="apos-export__settings-row"
+            >
+              <div>{{ $t('aposImportExport:exportModalIncludeChildren') }}</div>
+              <AposToggle
+                v-model="relatedChildrenDisabled"
+                class="apos-export__toggle"
+                @toggle="toggleRelatedChildren"
+              />
+            </div>
+
             <div class="apos-export__settings-row">
               <div>{{ $t('aposImportExport:exportModalIncludeRelated') }}</div>
               <AposToggle
@@ -128,8 +142,10 @@ export default {
       },
       formValues: null,
       relatedDocumentsDisabled: true,
+      relatedChildrenDisabled: true,
       relatedTypes: null,
-      checkedRelatedTypes: []
+      checkedRelatedTypes: [],
+      type: this.moduleName
     };
   },
 
@@ -152,6 +168,10 @@ export default {
 
   async mounted() {
     this.modal.active = true;
+
+    if (this.type === '@apostrophecms/page') {
+      this.type = this.$attrs.doc?.type;
+    }
   },
 
   methods: {
@@ -174,11 +194,14 @@ export default {
         this.relatedTypes = await window.apos.http.get('/api/v1/@apostrophecms/import-export/related', {
           busy: true,
           qs: {
-            moduleName: this.moduleName
+            type: this.type
           }
         });
       }
     },
+    toggleRelatedChildren() {
+      this.relatedChildrenDisabled = !this.relatedChildrenDisabled;
+    },
     checkRelatedTypes(evt) {
       if (evt.target.checked) {
         this.checkedRelatedTypes.push(evt.target.value);
@@ -233,12 +256,6 @@ export default {
   align-items: baseline;
 }
 
-::v-deep .apos-button.apos-button--export-format {
-  background-color: var(--a-danger);
-  color: var(--a-text-primary);
-  border: 1px solid var(--a-text-primary);
-}
-
 ::v-deep .apos-toggle__slider {
   display: flex;
 }
@@ -282,22 +299,6 @@ export default {
   width: 100%;
 }
 
-.apos-export__settings-row--red-colored {
-  background-color: var(--a-danger);
-  opacity: 0.5;
-  position: relative;
-
-  &::before {
-    content: "";
-    background-color: var(--a-danger);
-    position: absolute;
-    height: 100%;
-    width: 110%;
-    left: -5%;
-    z-index: -1;
-  }
-}
-
 .apos-export__settings-row--column {
   flex-direction: column;
   gap: 20px;