Fix clone processing for compose resources

client/web/compose/src/mixins/pages.js

@@ -82,6 +82,7 @@ export default {
             })
           })
         }).then(({ pageID }) => {
+          this.toastSuccess(this.$t('notification:page.saved'))
           this.$router.push({ name: this.$route.name, params: { pageID } })
         })
         .catch(this.toastErrorHandler(this.$t('notification:page.cloneFailed')))

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

@@ -415,6 +415,7 @@
       <editor-toolbar
         :processing="processing"
         :processing-save="processingSave"
+        :processing-clone="processingClone"
         :processing-save-and-close="processingSaveAndClose"
         :processing-delete="processingDelete"
         :hide-delete="hideDelete"
@@ -501,6 +502,7 @@ export default {
       initialChartState: undefined,
       processing: false,
       processingSave: false,
+      processingClone: false,
       processingSaveAndClose: false,
       processingDelete: false,
 
@@ -767,15 +769,21 @@ export default {
       this.processing = false
     },
 
-    handleSave ({ closeOnSuccess = false, chart = this.chart } = {}) {
-      this.processing = true
+    handleSave ({ chart = this.chart, closeOnSuccess = false, isClone = false } = {}) {
+      const toggleProcessing = () => {
+        this.processing = !this.processing
 
-      if (closeOnSuccess) {
-        this.processingSaveAndClose = true
-      } else {
-        this.processingSave = true
+        if (closeOnSuccess) {
+          this.processingSaveAndClose = !this.processingSaveAndClose
+        } else if (isClone) {
+          this.processingClone = !this.processingClone
+        } else {
+          this.processingSave = !this.processingSave
+        }
       }
 
+      toggleProcessing()
+
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
@@ -786,9 +794,10 @@ export default {
 
       if (chart.chartID === NoID) {
         this.createChart(c).then(({ chartID }) => {
-          this.toastSuccess(this.$t('notification:chart.saved'))
           this.chart = chartConstructor(chart)
           this.initialChartState = cloneDeep(chartConstructor(this.chart))
+
+          this.toastSuccess(this.$t('notification:chart.saved'))
           if (closeOnSuccess) {
             this.redirect()
           } else {
@@ -797,18 +806,13 @@ export default {
         })
           .catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
           .finally(() => {
-            this.processing = false
-
-            if (closeOnSuccess) {
-              this.processingSaveAndClose = false
-            } else {
-              this.processingSave = false
-            }
+            toggleProcessing()
           })
       } else {
         this.updateChart(c).then((chart) => {
           this.chart = chartConstructor(chart)
           this.initialChartState = cloneDeep(chartConstructor(chart))
+
           this.toastSuccess(this.$t('notification:chart.saved'))
           if (closeOnSuccess) {
             this.redirect()
@@ -816,13 +820,7 @@ export default {
         })
           .catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
           .finally(() => {
-            this.processing = false
-
-            if (closeOnSuccess) {
-              this.processingSaveAndClose = false
-            } else {
-              this.processingSave = false
-            }
+            toggleProcessing()
           })
       }
     },
@@ -848,7 +846,7 @@ export default {
       chart.name = `${this.chart.name} (copy)`
       chart.handle = this.chart.handle ? `${this.chart.handle}_copy` : ''
 
-      this.handleSave({ chart })
+      this.handleSave({ chart, isClone: true })
     },
 
     redirect () {

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

@@ -431,6 +431,7 @@
       <editor-toolbar
         :processing="processing"
         :processing-save="processingSave"
+        :processing-clone="processingClone"
         :processing-save-and-close="processingSaveAndClose"
         :processing-delete="processingDelete"
         :hide-delete="hideDelete"
@@ -439,8 +440,8 @@
         :disable-save="disableSave"
         @delete="handleDelete"
         @save="handleSave()"
-        @saveAndClose="handleSave({ closeOnSuccess: true })"
         @clone="handleClone"
+        @saveAndClose="handleSave({ closeOnSuccess: true })"
         @back="$router.push(previousPage || { name: 'admin.modules' })"
       />
     </portal>
@@ -527,6 +528,7 @@ export default {
       hasRecords: true,
       processing: false,
       processingSave: false,
+      processingClone: false,
       processingSaveAndClose: false,
       processingDelete: false,
 
@@ -734,20 +736,27 @@ export default {
       this.module.config = { ...this.module.config, ...changes }
     },
 
-    handleSave ({ closeOnSuccess = false, module = this.module } = {}) {
+    handleSave ({ module = this.module, closeOnSuccess = false, isClone = false } = {}) {
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
        */
       const resourceTranslationLanguage = this.currentLanguage
-      this.processing = true
 
-      if (closeOnSuccess) {
-        this.processingSaveAndClose = true
-      } else {
-        this.processingSave = true
+      const toggleProcessing = () => {
+        this.processing = !this.processing
+
+        if (closeOnSuccess) {
+          this.processingSaveAndClose = !this.processingSaveAndClose
+        } else if (isClone) {
+          this.processingClone = !this.processingClone
+        } else {
+          this.processingSave = !this.processingSave
+        }
       }
 
+      toggleProcessing()
+
       if (module.moduleID === NoID) {
         // Filter out record fields that reference this not yet created module
         let fields = []
@@ -786,13 +795,7 @@ export default {
           }
         }).catch(this.toastErrorHandler(this.$t('notification:module.saveFailed')))
           .finally(() => {
-            this.processing = false
-
-            if (closeOnSuccess) {
-              this.processingSaveAndClose = false
-            } else {
-              this.processingSave = false
-            }
+            toggleProcessing()
           })
       } else {
         this.updateModule({ ...module, resourceTranslationLanguage }).then(module => {
@@ -801,17 +804,11 @@ export default {
 
           this.toastSuccess(this.$t('notification:module.saved'))
           if (closeOnSuccess) {
-            this.$router.push({ name: 'admin.modules' })
+            this.$router.push(this.previousPage || { name: 'admin.modules' })
           }
         }).catch(this.toastErrorHandler(this.$t('notification:module.saveFailed')))
           .finally(() => {
-            this.processing = false
-
-            if (closeOnSuccess) {
-              this.processingSaveAndClose = false
-            } else {
-              this.processingSave = false
-            }
+            toggleProcessing()
           })
       }
     },
@@ -913,7 +910,7 @@ export default {
       module.name = `${this.module.name} (copy)`
       module.handle = this.module.handle ? `${this.module.handle}_copy` : ''
 
-      this.handleSave({ module })
+      this.handleSave({ module, isClone: true })
     },
 
     async fetchConnection (connectionID) {

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

@@ -1293,12 +1293,14 @@ export default {
     },
 
     handleSave ({ closeOnSuccess = false } = {}) {
-      this.processing = true
+      const toggleProcessing = () => {
+        this.processing = !this.processing
 
-      if (closeOnSuccess) {
-        this.processingSaveAndClose = true
-      } else {
-        this.processingSave = true
+        if (closeOnSuccess) {
+          this.processingSaveAndClose = !this.processingSaveAndClose
+        } else {
+          this.processingSave = !this.processingSave
+        }
       }
 
       /**
@@ -1306,6 +1308,8 @@ export default {
        * instructs store layer to add content-language header to the API request
        */
       const resourceTranslationLanguage = this.currentLanguage
+
+      toggleProcessing()
       const { namespaceID } = this.namespace
 
       return this.saveIcon().then(icon => {
@@ -1325,13 +1329,7 @@ export default {
             this.$router.push(this.previousPage || { name: 'admin.pages' })
           }
         }).finally(() => {
-          this.processing = false
-
-          if (closeOnSuccess) {
-            this.processingSaveAndClose = false
-          } else {
-            this.processingSave = false
-          }
+          toggleProcessing()
         }).catch(this.toastErrorHandler(this.$t('notification:page.saveFailed')))
     },