#127 fix copy to clipboard

src/components/LoadingDialog.vue

@@ -1,14 +1,15 @@
 <template>
   <modal
-    :modalId="name"
+    v-model="show"
     class="dialog"
     :clickToClose="false"
     :contentTransition="{ name: 'loading-dialog' }"
     :overlayTransition="{ name: 'loading-dialog' }"
+    @update:modelValue="$emit('update:modelValue', $event)"
   >
     <div class="dialog-header">
       {{ title }}
-      <close-icon :disabled="loading" @click="$emit('cancel')" />
+      <close-icon :disabled="loading" @click="cancel" />
     </div>
     <div class="dialog-body">
       <div v-if="loading" class="loading-dialog-body">
@@ -28,7 +29,7 @@
         class="secondary"
         type="button"
         :disabled="loading"
-        @click="$emit('cancel')"
+        @click="cancel"
       >
         Cancel
       </button>
@@ -52,24 +53,33 @@ export default {
   name: 'LoadingDialog',
   components: { LoadingIndicator, CloseIcon },
   props: {
+    modelValue: Boolean,
     loadingMsg: String,
     successMsg: String,
     actionBtnName: String,
-    name: String,
     title: String,
     loading: Boolean
   },
-  emits: ['cancel', 'action'],
+  data() {
+    return {
+      show: this.modelValue
+    }
+  },
+  emits: ['cancel', 'action', 'update:modelValue'],
   watch: {
+    modelValue() {
+      this.show = this.modelValue
+    },
     loading() {
       if (this.loading) {
-        this.$modal.show(this.name)
+        this.$emit('update:modelValue', true)
       }
     }
   },
   methods: {
     cancel() {
       this.$emit('cancel')
+      this.$emit('update:modelValue', false)
     }
   }
 }

src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -161,11 +161,8 @@ export default {
         'text/html'
       )
     },
-    async prepareCopy(type = 'png') {
-      return await chartHelper.getImageDataUrl(
-        this.$refs.plotlyEditor.$el,
-        type
-      )
+    prepareCopy(type = 'png') {
+      return chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
     }
   }
 }

src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue

@@ -72,10 +72,10 @@
     </side-tool-bar>
 
     <loading-dialog
+      v-model="showLoadingDialog"
       loadingMsg="Rendering the visualisation..."
       successMsg="Image is ready"
       actionBtnName="Copy"
-      name="prepareCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"
       @action="copyToClipboard"
@@ -85,8 +85,8 @@
 </template>
 
 <script>
-import Chart from './Chart'
-import Pivot from './Pivot'
+import Chart from './Chart/index.vue'
+import Pivot from './Pivot/index.vue'
 import SideToolBar from '../SideToolBar'
 import IconButton from '@/components/IconButton'
 import ChartIcon from '@/components/svg/chart'
@@ -96,7 +96,7 @@ import ExportToSvgIcon from '@/components/svg/exportToSvg'
 import PngIcon from '@/components/svg/png'
 import ClipboardIcon from '@/components/svg/clipboard'
 import cIo from '@/lib/utils/clipboardIo'
-import loadingDialog from '@/components/LoadingDialog'
+import loadingDialog from '@/components/LoadingDialog.vue'
 import time from '@/lib/utils/time'
 import events from '@/lib/utils/events'
 
@@ -129,7 +129,8 @@ export default {
       loadingImage: false,
       copyingImage: false,
       preparingCopy: false,
-      dataToCopy: null
+      dataToCopy: null,
+      showLoadingDialog: false
     }
   },
   computed: {
@@ -170,14 +171,13 @@ export default {
     async prepareCopy() {
       if ('ClipboardItem' in window) {
         this.preparingCopy = true
-        this.$modal.show('prepareCopy')
+        this.showLoadingDialog = true
         const t0 = performance.now()
 
         await time.sleep(0)
         this.dataToCopy = await this.$refs.viewComponent.prepareCopy()
         const t1 = performance.now()
         if (t1 - t0 < 950) {
-          this.$modal.hide('prepareCopy')
           this.copyToClipboard()
         } else {
           this.preparingCopy = false
@@ -190,14 +190,13 @@ export default {
         )
       }
     },
-    async copyToClipboard() {
+    copyToClipboard() {
       cIo.copyImage(this.dataToCopy)
-      this.$modal.hide('prepareCopy')
+      this.showLoadingDialog = false
       this.exportSignal('clipboard')
     },
     cancelCopy() {
       this.dataToCopy = null
-      this.$modal.hide('prepareCopy')
     },
 
     saveAsSvg() {

src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue

@@ -80,10 +80,10 @@
     </side-tool-bar>
 
     <loading-dialog
+      v-model="showLoadingDialog"
       loadingMsg="Building CSV..."
       successMsg="CSV is ready"
       actionBtnName="Copy"
-      name="prepareCSVCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"
       @action="copyToClipboard"
@@ -190,7 +190,8 @@ export default {
       viewRecord: false,
       defaultPage: 1,
       defaultSelectedCell: null,
-      enableTeleport: this.$store.state.isWorkspaceVisible
+      enableTeleport: this.$store.state.isWorkspaceVisible,
+      showLoadingDialog: false
     }
   },
   computed: {
@@ -264,14 +265,13 @@ export default {
 
       if ('ClipboardItem' in window) {
         this.preparingCopy = true
-        this.$modal.show('prepareCSVCopy')
+        this.showLoadingDialog = true
         const t0 = performance.now()
 
         await time.sleep(0)
         this.dataToCopy = csv.serialize(this.result)
         const t1 = performance.now()
         if (t1 - t0 < 950) {
-          this.$modal.hide('prepareCSVCopy')
           this.copyToClipboard()
         } else {
           this.preparingCopy = false
@@ -287,12 +287,11 @@ export default {
 
     copyToClipboard() {
       cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
-      this.$modal.hide('prepareCSVCopy')
+      this.showLoadingDialog = false
     },
 
     cancelCopy() {
       this.dataToCopy = null
-      this.$modal.hide('prepareCSVCopy')
     },
 
     toggleViewValuePanel() {