feat: initial mysql import support

src/renderer/components/ModalImportSchema.vue

@@ -0,0 +1,142 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay" @click.stop="closeModal" />
+      <div class="modal-container p-0">
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-database-arrow-up mr-1" />
+                  <span class="cut-text">{{ $t('message.importSchema') }}</span>
+               </div>
+            </div>
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+         </div>
+         <div class="modal-body pb-0">
+            {{ sqlFile }}
+         </div>
+         <div class="modal-footer columns">
+            <div class="column col modal-progress-wrapper text-left">
+               <div class="import-progress">
+                  <span class="progress-status">
+                     {{ progressPercentage }}% - {{ progressStatus }}
+                  </span>
+                  <progress
+                     class="progress d-block"
+                     :value="progressPercentage"
+                     max="100"
+                  />
+               </div>
+            </div>
+            <div class="column col-auto px-0">
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ $t('word.cancel') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { ipcRenderer } from 'electron';
+import { mapActions, mapGetters } from 'vuex';
+import Schema from '@/ipc-api/Schema';
+
+export default {
+   name: 'ModalImportSchema',
+
+   props: {
+      selectedSchema: String
+   },
+   data () {
+      return {
+         sqlFile: '',
+         isImporting: false,
+         progressPercentage: 0,
+         progressStatus: 'Reading'
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      currentWorkspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      }
+   },
+   async created () {
+      window.addEventListener('keydown', this.onKey);
+
+      ipcRenderer.on('import-progress', this.updateProgress);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+      ipcRenderer.off('import-progress', this.updateProgress);
+   },
+   methods: {
+      ...mapActions({
+         refreshSchema: 'workspaces/refreshSchema'
+      }),
+      async startImport (sqlFile) {
+         this.isImporting = true;
+         this.sqlFile = sqlFile;
+
+         const { uid, client } = this.currentWorkspace;
+         const params = {
+            uid,
+            type: client,
+            file: sqlFile
+         };
+
+         const result = await Schema.import(params);
+         console.log(result);
+
+         this.isImporting = false;
+      },
+      updateProgress (event, state) {
+         this.progressPercentage = Number(state.percentage).toFixed(1);
+      },
+      async closeModal () {
+         let willClose = true;
+         if (this.isImporting) {
+            willClose = false;
+            const { response } = await Schema.abortImport();
+            willClose = response.willAbort;
+         }
+
+         if (willClose)
+            this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.modal {
+
+   .modal-container {
+      max-width: 800px;
+   }
+
+   .modal-body {
+      max-height: 60vh;
+      display: flex;
+      flex-direction: column;
+   }
+
+   .modal-footer {
+      display: flex;
+   }
+}
+
+.progress-status {
+   font-style: italic;
+   font-size: 80%;
+}
+</style>