Merge branch 'feat/db-import-export' of https://github.com/toriphes/antares into pr/toriphes/129

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>

src/renderer/components/WorkspaceExploreBarSchemaContext.vue

@@ -65,6 +65,13 @@
       >
          <span class="d-flex"><i class="mdi mdi-18px mdi-database-arrow-down text-light pr-1" /> {{ $t('word.export') }}</span>
       </div>
+      <div
+         v-if="workspace.customizations.schemaImport"
+         class="context-element"
+         @click="initImport"
+      >
+         <span class="d-flex"><i class="mdi mdi-18px mdi-database-arrow-up text-light pr-1" /> {{ $t('word.import') }}</span>
+      </div>
       <div
          v-if="workspace.customizations.schemaEdit"
          class="context-element"
@@ -107,6 +114,12 @@
          :selected-schema="selectedSchema"
          @close="hideExportSchemaModal"
       />
+      <ModalImportSchema
+         v-if="isImportSchemaModal"
+         ref="importModalRef"
+         :selected-schema="selectedSchema"
+         @close="hideImportSchemaModal"
+      />
    </BaseContextMenu>
 </template>
 
@@ -116,7 +129,9 @@ import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import ModalEditSchema from '@/components/ModalEditSchema';
 import ModalExportSchema from '@/components/ModalExportSchema';
+import ModalImportSchema from '@/components/ModalImportSchema';
 import Schema from '@/ipc-api/Schema';
+import Application from '@/ipc-api/Application';
 
 export default {
    name: 'WorkspaceExploreBarSchemaContext',
@@ -124,7 +139,8 @@ export default {
       BaseContextMenu,
       ConfirmModal,
       ModalEditSchema,
-      ModalExportSchema
+      ModalExportSchema,
+      ModalImportSchema
    },
    props: {
       contextEvent: MouseEvent,
@@ -134,7 +150,8 @@ export default {
       return {
          isDeleteModal: false,
          isEditModal: false,
-         isExportSchemaModal: false
+         isExportSchemaModal: false,
+         isImportSchemaModal: false
       };
    },
    computed: {
@@ -191,6 +208,22 @@ export default {
       hideExportSchemaModal () {
          this.isExportSchemaModal = false;
       },
+      showImportSchemaModal () {
+         this.isImportSchemaModal = true;
+      },
+      hideImportSchemaModal () {
+         this.isImportSchemaModal = false;
+      },
+      async initImport () {
+         const result = await Application.showOpenDialog({ properties: ['openFile'], filters: [{ name: 'SQL', extensions: ['sql'] }] });
+         if (result && !result.canceled) {
+            const file = result.filePaths[0];
+            this.showImportSchemaModal();
+            this.$nextTick(() => {
+               this.$refs.importModalRef.startImport(file);
+            });
+         }
+      },
       closeContext () {
          this.$emit('close-context');
       },