Add save as copy to module and chart resources

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

@@ -417,10 +417,11 @@
         :processing-delete="processingDelete"
         :hide-delete="hideDelete"
         :hide-save="hideSave"
-        hide-clone
+        :hide-clone="!isEdit"
         :disable-save="disableSave"
         @delete="handleDelete()"
         @save="handleSave()"
+        @clone="handleClone()"
         @saveAndClose="handleSave({ closeOnSuccess: true })"
         @back="$router.push(previousPage || { name: 'admin.charts' })"
       />
@@ -677,6 +678,7 @@ export default {
 
         if (chartID === NoID) {
           let c = new compose.Chart({ namespaceID: this.namespace.namespaceID })
+
           switch (this.category) {
             case 'gauge':
               c = new compose.GaugeChart(c)
@@ -762,7 +764,7 @@ export default {
       this.processing = false
     },
 
-    handleSave ({ closeOnSuccess = false } = {}) {
+    handleSave ({ closeOnSuccess = false, chart = this.chart } = {}) {
       this.processing = true
 
       if (closeOnSuccess) {
@@ -777,9 +779,9 @@ export default {
        */
       const resourceTranslationLanguage = this.currentLanguage
 
-      const c = Object.assign({}, this.chart, resourceTranslationLanguage)
+      const c = Object.assign({}, chart, resourceTranslationLanguage)
 
-      if (this.chart.chartID === NoID) {
+      if (chart.chartID === NoID) {
         this.createChart(c).then(({ chartID }) => {
           this.toastSuccess(this.$t('notification:chart.saved'))
           this.initialChartState = cloneDeep(chartConstructor(this.chart))
@@ -836,6 +838,15 @@ export default {
         })
     },
 
+    handleClone () {
+      const chart = this.chart.clone()
+      chart.chartID = NoID
+      chart.name = `${this.chart.name} (copy)`
+      chart.handle = this.chart.handle ? `${this.chart.handle}_copy` : ''
+
+      this.handleSave({ chart })
+    },
+
     redirect () {
       this.$router.push(this.previousPage || { name: 'admin.charts' })
     },

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

@@ -443,12 +443,13 @@
         :processing-save-and-close="processingSaveAndClose"
         :processing-delete="processingDelete"
         :hide-delete="hideDelete"
-        hide-clone
+        :hide-clone="!isEdit"
         :hide-save="hideSave"
         :disable-save="disableSave"
         @delete="handleDelete"
         @save="handleSave()"
         @saveAndClose="handleSave({ closeOnSuccess: true })"
+        @clone="handleClone"
         @back="$router.push(previousPage || { name: 'admin.modules' })"
       />
     </portal>
@@ -667,6 +668,7 @@ export default {
             { fields: [new compose.ModuleFieldString({ fieldID: NoID, name: this.$t('general.placeholder.sample') })] },
             this.namespace,
           )
+
           this.initialModuleState = this.module.clone()
         } else {
           const params = {
@@ -770,7 +772,7 @@ export default {
       this.module.config = { ...this.module.config, ...changes }
     },
 
-    handleSave ({ closeOnSuccess = false } = {}) {
+    handleSave ({ closeOnSuccess = false, module = this.module } = {}) {
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
@@ -784,11 +786,11 @@ export default {
         this.processingSave = true
       }
 
-      if (!this.isEdit) {
+      if (module.moduleID === NoID) {
         // Filter out record fields that reference this not yet created module
         let fields = []
         const toBeUpdatedFields = []
-        this.module.fields.forEach(f => {
+        module.fields.forEach(f => {
           if (f.kind === 'Record' && f.options.moduleID === '-1') {
             toBeUpdatedFields.push(f)
           } else {
@@ -798,7 +800,7 @@ export default {
 
         // If such fields exist , after module is created add fields, map moduleID and update module
         // Unfortunately this ruins the initial field order, but we can improve this later
-        this.createModule({ ...this.module, fields, resourceTranslationLanguage }).then(async module => {
+        this.createModule({ ...module, fields, resourceTranslationLanguage }).then(async module => {
           if (toBeUpdatedFields.length) {
             fields = [
               ...module.fields,
@@ -831,7 +833,7 @@ export default {
             }
           })
       } else {
-        this.updateModule({ ...this.module, resourceTranslationLanguage }).then(module => {
+        this.updateModule({ ...module, resourceTranslationLanguage }).then(module => {
           this.module = new compose.Module({ ...module }, this.namespace)
           this.initialModuleState = this.module.clone()
 
@@ -873,6 +875,15 @@ export default {
         })
     },
 
+    handleClone () {
+      const module = this.module.clone()
+      module.moduleID = NoID
+      module.name = `${this.module.name} (copy)`
+      module.handle = this.module.handle ? `${this.module.handle}_copy` : ''
+
+      this.handleSave({ module })
+    },
+
     async fetchConnection (connectionID) {
       if (connectionID && connectionID !== NoID) {
         this.$SystemAPI.dalConnectionRead({ connectionID })

lib/js/src/compose/types/chart/base.ts

@@ -389,6 +389,10 @@ export class BaseChart {
   get resourceType (): string {
     return 'compose:chart'
   }
+
+  clone (): BaseChart {
+    return new BaseChart(JSON.parse(JSON.stringify(this)))
+  }
 }
 
 export { chartUtil } from './util'