2023.9.x feature clone report

client/web/reporter/src/components/EditorToolbar.vue

@@ -28,16 +28,27 @@
         size="lg"
         size-confirm="lg"
         variant="danger"
-        :disabled="deleteDisabled || processingDelete"
+        :disabled="deleteDisabled || processingDelete || processing"
         :processing="processingDelete"
         :text="$t('general:label.delete')"
         :borderless="false"
         @confirmed="$emit('delete')"
       />
 
+      <c-button-submit
+        data-test-id="button-clone"
+        :disabled="cloneDisabled || processingClone || processing"
+        :processing="processingClone"
+        variant="light"
+        :text="$t('general:label.clone')"
+        class="text-nowrap"
+        size="lg"
+        @submit="$emit('clone')"
+      />
+
       <c-button-submit
         data-test-id="button-save"
-        :disabled="saveDisabled || processing"
+        :disabled="saveDisabled || processingSave || processing"
         :processing="processingSave"
         :text="$t('general:label.save')"
         size="lg"
@@ -79,6 +90,10 @@ export default {
       type: Boolean,
     },
 
+    cloneDisabled: {
+      type: Boolean,
+    },
+
     processing: {
       type: Boolean,
     },
@@ -91,6 +106,10 @@ export default {
       type: Boolean,
       required: false,
     },
+
+    processingClone: {
+      type: Boolean,
+    },
   },
 }
 </script>

client/web/reporter/src/components/ReportSidebar.vue

@@ -72,7 +72,7 @@ export default {
 
       return reports.map(({ reportID, handle, meta: { name = '' } }) => {
         return {
-          page: { pageID: reportID, name: 'report.view', title: name || handle },
+          page: { pageID: reportID, name: this.$route.name, title: name || handle },
           params: { reportID },
         }
       })
@@ -90,6 +90,14 @@ export default {
     },
   },
 
+  created () {
+    this.$root.$on('refetch:reports', this.fetchReports)
+  },
+
+  beforeDestroy () {
+    this.$root.$off('refetch:reports', this.fetchReports)
+  },
+
   methods: {
     fetchReports () {
       this.$SystemAPI.reportList()

client/web/reporter/src/components/faIcons.js

@@ -48,6 +48,7 @@ import {
   faQuestion,
   faEllipsisV,
   faTools,
+  faClone,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -112,4 +113,5 @@ library.add(
   faQuestion,
   faEllipsisV,
   faTools,
+  faClone,
 )

client/web/reporter/src/components/index.js

@@ -53,3 +53,4 @@ Vue.component('c-permissions-button', components.CPermissionsButton)
 Vue.component('c-input-confirm', components.CInputConfirm)
 Vue.component('c-button-submit', components.CButtonSubmit)
 Vue.component('c-input-select', components.CInputSelect)
+Vue.component('c-form-table-wrapper', components.CFormTableWrapper)

client/web/reporter/src/mixins/report.js

@@ -6,6 +6,7 @@ export default {
       processing: false,
       processingSave: false,
       processingDelete: false,
+      processingClone: false,
       report: undefined,
     }
   },
@@ -21,7 +22,9 @@ export default {
         })
         .catch(this.toastErrorHandler(this.$t('notification:report.fetchFailed')))
         .finally(() => {
-          this.processing = false
+          setTimeout(() => {
+            this.processing = false
+          }, 400)
         })
     },
 
@@ -90,5 +93,29 @@ export default {
           this.processingDelete = false
         })
     },
+
+    handleClone (report) {
+      this.processing = true
+      this.processingClone = true
+      const { meta, sources, blocks, scenarios, labels } = report
+      const cloneSuffix = `${meta.name} (${this.$t('general:cloneSuffix')})`
+      let name = meta.name
+
+      if (!this.initialReportState || this.initialReportState.meta.name === name) {
+        name = cloneSuffix
+      }
+
+      return this.$SystemAPI.reportCreate({ handle: '', meta: { ...meta, name }, sources, blocks, scenarios, labels })
+        .then(report => {
+          report = new system.Report(report)
+          this.toastSuccess(this.$t('notification:report.created'))
+          return report
+        })
+        .catch(this.toastErrorHandler(this.$t('notification:report.createFailed')))
+        .finally(() => {
+          this.processing = false
+          this.processingClone = false
+        })
+    },
   },
 }

client/web/reporter/src/views/Report/Builder.vue

@@ -2,7 +2,10 @@
   <div
     class="d-flex overflow-auto p-2 w-100"
   >
-    <portal to="topbar-title">
+    <portal
+      v-if="!fetchingReport"
+      to="topbar-title"
+    >
       {{ pageTitle }}
     </portal>
 
@@ -13,10 +16,10 @@
           :options="scenarioOptions"
           :get-option-key="getOptionKey"
           :placeholder="$t('builder:pick-scenario')"
+          :disabled="processing || fetchingReport"
           size="sm"
           @input="refreshReport()"
         />
-
         <b-input-group-append>
           <b-button
             v-b-tooltip.noninteractive.hover="{ title: $t('builder:tooltip.configure-scenarios'), container: '#body' }"
@@ -41,7 +44,6 @@
       >
         {{ $t('builder:datasources.label') }}
       </b-button>
-
       <b-button-group
         size="sm"
       >
@@ -72,8 +74,15 @@
       </b-button-group>
     </portal>
 
+    <div
+      v-if="fetchingReport"
+      class="d-flex align-items-center justify-content-center w-100 h-100"
+    >
+      <b-spinner />
+    </div>
+
     <grid
-      v-if="report && canRead && showReport"
+      v-if="report && canRead && showReport && !fetchingReport"
       :blocks.sync="reportBlocks"
       editable
       @item-updated="onBlockUpdated"
@@ -97,7 +106,6 @@
                 class="text-warning"
               />
             </div>
-
             <b-button-group>
               <b-button
                 v-b-tooltip.noninteractive.hover="{ title: $t('builder:tooltip.add.displayElement'), container: '#body' }"
@@ -109,7 +117,6 @@
                   :icon="['fas', 'plus']"
                 />
               </b-button>
-
               <b-button
                 v-b-tooltip.noninteractive.hover="{ title: $t('builder:tooltip.edit.block'), container: '#body' }"
                 variant="outline-light"
@@ -121,7 +128,6 @@
                 />
               </b-button>
             </b-button-group>
-
             <c-input-confirm
               :tooltip="$t('builder:tooltip.delete.block')"
               show-icon
@@ -130,7 +136,6 @@
               @confirmed="deleteBlock(index)"
             />
           </div>
-
           <block
             v-if="block"
             :index="index"
@@ -142,7 +147,6 @@
         </div>
       </template>
     </grid>
-
     <b-modal
       :title="$t('builder:block.configuration')"
       :ok-title="$t('builder:save-button')"
@@ -176,7 +180,6 @@
               :placeholder="$t('builder:block.title')"
             />
           </b-form-group>
-
           <b-form-group
             :label="$t('builder:description')"
             label-class="text-primary"
@@ -186,7 +189,6 @@
               :placeholder="$t('builder:block.description')"
             />
           </b-form-group>
-
           <b-form-group
             :label="$t('builder:layout')"
             label-class="text-primary"
@@ -199,7 +201,6 @@
             />
           </b-form-group>
         </b-tab>
-
         <b-tab
           :active="!!currentBlock.elements.length"
           :title="$t('builder:elements')"
@@ -218,9 +219,7 @@
                 :icon="['fas', 'bars']"
                 class="text-secondary grab"
               />
-            </template>
-
-            <template #configurator>
+            </template>            <template #configurator>
               <display-element-configurator
                 v-if="currentDisplayElement"
                 :display-element.sync="currentDisplayElement"
@@ -233,7 +232,6 @@
         </b-tab>
       </b-tabs>
     </b-modal>
-
     <b-modal
       v-model="datasources.showConfigurator"
       :title="$t('builder:datasources.label')"
@@ -261,7 +259,6 @@
             {{ datasourceLabel(step, datasources.currentIndex) }}
           </span>
         </template>
-
         <template #configurator>
           <component
             :is="getDatasourceComponent(datasources.tempItems[datasources.currentIndex])"
@@ -273,7 +270,6 @@
           />
         </template>
       </configurator>
-
       <template #modal-footer>
         <c-button-submit
           data-test-id="button-save"
@@ -284,7 +280,6 @@
         />
       </template>
     </b-modal>
-
     <b-modal
       v-model="displayElements.showSelector"
       size="lg"
@@ -299,7 +294,6 @@
         @select="addDisplayElement"
       />
     </b-modal>
-
     <b-modal
       v-model="datasources.showSelector"
       size="lg"
@@ -315,7 +309,6 @@
         @select="addDatasource"
       />
     </b-modal>
-
     <b-modal
       v-model="scenarios.showConfigurator"
       size="xl"
@@ -342,7 +335,6 @@
             {{ label }}
           </span>
         </template>
-
         <template #configurator>
           <scenario-configurator
             v-if="currentScenario"
@@ -353,7 +345,6 @@
         </template>
       </configurator>
     </b-modal>
-
     <portal to="report-toolbar">
       <editor-toolbar
         :back-link="{ name: 'report.list' }"
@@ -362,12 +353,15 @@
         :processing="processing"
         :processing-save="processingSave"
         :processing-delete="processingDelete"
+        :processing-clone="processingClone"
+        @clone="handleReportCloning"
         @delete="handleDelete"
         @save="handleReportSave"
       >
         <b-button
           variant="light"
           size="lg"
+          :disabled="processing"
           @click="createBlock"
         >
           <font-awesome-icon
@@ -427,6 +421,8 @@ export default {
       processing: false,
       processingSave: false,
       processingDelete: false,
+      processingClone: false,
+      fetchingReport: false,
 
       showReport: true,
 
@@ -665,15 +661,23 @@ export default {
       handler (reportID) {
         this.unsavedBlocks.clear()
         this.scenarios.selected = undefined
-
+        this.reportBlocks = []
+        this.report = undefined
         if (reportID) {
           this.processing = true
+          this.fetchingReport = true
 
           this.fetchReport(this.reportID)
             .then(() => {
               this.mapBlocks()
-            }).finally(() => {
-              this.processing = false
+            }).catch(() => {
+              this.toastErrorHandler(this.$t('notification:report.loadFailed'))
+            })
+            .finally(() => {
+              setTimeout(() => {
+                this.fetchingReport = false
+                this.processing = false
+              }, 400)
             })
         }
       },
@@ -853,6 +857,13 @@ export default {
         })
     },
 
+    handleReportCloning () {
+      this.handleClone(this.report).then(({ reportID }) => {
+        this.$root.$emit('refetch:reports')
+        this.$router.push({ name: 'report.builder', params: { reportID } })
+      })
+    },
+
     mapBlocks () {
       this.reportBlocks = this.report.blocks.map(({ xywh, ...p }, i) => {
         const [x, y, w, h] = xywh