Add support for page duplication

client/web/compose/src/components/Admin/EditorToolbar.vue

@@ -51,13 +51,14 @@
         <b-button
           v-if="!hideClone"
           data-test-id="button-clone"
+          :title="cloneTooltip"
           :disabled="disableClone || processing"
           variant="light"
           size="lg"
           class="ml-2"
           @click="$emit('clone')"
         >
-          {{ $t('label.clone') }}
+          {{ $t('label.saveAsCopy') }}
         </b-button>
         <b-button
           v-if="!hideSave"
@@ -128,7 +129,6 @@ export default {
     },
     disableClone: {
       type: Boolean,
-      required: false,
       default: false,
     },
     deleteTooltip: {
@@ -136,6 +136,10 @@ export default {
       required: false,
       default: '',
     },
+    cloneTooltip: {
+      type: String,
+      default: '',
+    },
   },
 }
 </script>

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -151,10 +151,12 @@
         :back-link="{name: 'admin.pages'}"
         :hide-delete="hideDelete"
         :hide-save="!page.canUpdatePage"
-        hide-clone
+        :disable-clone="disableClone"
+        :clone-tooltip="cloneTooltip"
         @save="handleSave()"
         @delete="handleDeletePage"
         @saveAndClose="handleSave({ closeOnSuccess: true })"
+        @clone="handleClone()"
       >
         <b-button
           v-if="page.canUpdatePage"
@@ -315,6 +317,14 @@ export default {
     showDeleteDropdown () {
       return this.hasChildren && this.page.canDeletePage && !this.page.deletedAt
     },
+
+    disableClone () {
+      return !!this.module
+    },
+
+    cloneTooltip () {
+      return this.disableClone ? this.$t('tooltip.saveAsCopy') : ''
+    },
   },
 
   watch: {
@@ -342,6 +352,7 @@ export default {
       updatePage: 'page/update',
       deletePage: 'page/delete',
       updatePageSet: 'page/updateSet',
+      createPage: 'page/create',
     }),
 
     addBlock (block, index = undefined) {
@@ -462,6 +473,23 @@ export default {
 
       return true
     },
+
+    handleClone () {
+      let page = this.page.clone()
+      page = {
+        ...page,
+        pageID: NoID,
+        title: this.$t('copyOf', { title: this.page.title }),
+        handle: '',
+      }
+
+      const { namespaceID = NoID } = this.namespace
+      this.createPage({ namespaceID, ...page })
+        .then(({ pageID }) => {
+          this.$router.push({ name: 'admin.pages.builder', params: { pageID } })
+        })
+        .catch(this.toastErrorHandler(this.$t('notification:page.cloneFailed')))
+    },
   },
 }
 </script>

client/web/compose/src/views/Admin/Pages/Edit.vue

@@ -132,9 +132,9 @@
       <editor-toolbar
         :back-link="{ name: 'admin.pages' }"
         :hide-delete="hideDelete"
-        hide-clone
         :hide-save="!page.canUpdatePage"
         :disable-save="disableSave"
+        @clone="handleClone()"
         @delete="handleDeletePage"
         @save="handleSave()"
         @saveAndClose="handleSave({ closeOnSuccess: true })"
@@ -259,6 +259,7 @@ export default {
       findPageByID: 'page/findByID',
       updatePage: 'page/update',
       deletePage: 'page/delete',
+      createPage: 'page/create',
     }),
 
     handleSave ({ closeOnSuccess = false } = {}) {
@@ -282,6 +283,25 @@ export default {
         this.$router.push({ name: 'admin.pages' })
       }).catch(this.toastErrorHandler(this.$t('notification:page.deleteFailed')))
     },
+
+    handleClone () {
+      let page = this.page.clone()
+      page = {
+        ...page,
+        pageID: NoID,
+        title: this.$t('copyOf', { title: this.page.title }),
+        handle: '',
+      }
+
+      const { namespaceID = NoID } = this.namespace
+      this.createPage({ namespaceID, ...page })
+        .then(page => {
+          this.page = new compose.Page(page)
+          const { pageID = '' } = page
+          this.$router.push({ name: 'admin.pages.edit', params: { pageID } })
+        })
+        .catch(this.toastErrorHandler(this.$t('notification:page.cloneFailed')))
+    },
   },
 }
 </script>

locale/en/corteza-webapp-compose/general.yaml

@@ -63,6 +63,7 @@ label:
   sensitive: Sensitive
   save: Save
   saveAndClose: Save and close
+  saveAsCopy: Save as copy
   status: Status
   timeHour: '{{t}}h'
   timeMinute: '{{t}}min'

locale/en/corteza-webapp-compose/notification.yaml

@@ -68,6 +68,7 @@ namespace:
   importFailed: Namespace failed to import
 page:
   createFailed: Could not create a page
+  cloneFailed: Could not clone this page
   deleteFailed: Could not delete this page
   loadFailed: Could not load the page tree
   noPages: No pages found

locale/en/corteza-webapp-compose/page.yaml

@@ -12,6 +12,7 @@ block:
     title: Add new block
     invalid-handle-characters: Should be at least 2 characters long and start with a letter. Can contain only letters, numbers, dashes, underscores and dots
 changeBlock: Change existing block
+copyOf: "Copy of {{title}}"
 build:
   addBlock: Add block
   selectBlockTitle: Select type of the new block
@@ -47,6 +48,7 @@ tooltip:
   edit:
     page: Edit page
     block: Edit block
+  saveAsCopy: Cannot duplicate record page
 view: View
 visible: Visible
 delete: