feat(UI): better real-time import stats

package.json

@@ -110,6 +110,7 @@
     "@turf/helpers": "^6.5.0",
     "@vscode/vscode-languagedetection": "^1.0.21",
     "ace-builds": "^1.4.13",
+    "async": "^3.2.3",
     "better-sqlite3": "^7.4.4",
     "electron-log": "^4.4.1",
     "electron-store": "^8.0.1",

src/main/ipc-handlers/schema.js

@@ -288,6 +288,9 @@ export default connections => {
                   case 'import-progress':
                      event.sender.send('import-progress', payload);
                      break;
+                  case 'query-error':
+                     event.sender.send('query-error', payload);
+                     break;
                   case 'end':
                      importer.kill();
                      importer = null;

src/main/workers/importer.js

@@ -55,6 +55,13 @@ process.on('message', async ({ type, dbConfig, options }) => {
          });
       });
 
+      importer.on('query-error', state => {
+         process.send({
+            type: 'query-error',
+            payload: state
+         });
+      });
+
       importer.run();
    }
    else if (type === 'cancel')

src/renderer/components/ModalImportSchema.vue

@@ -13,12 +13,21 @@
          </div>
          <div class="modal-body pb-0">
             {{ sqlFile }}
+            <div v-if="queryErrors.length > 0" class="mt-2">
+               <label>{{ $tc('message.importQueryErrors', queryErrors.length) }}</label>
+               <textarea
+                  v-model="formattedQueryErrors"
+                  class="form-input"
+                  rows="5"
+                  readonly
+               />
+            </div>
          </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 }}
+                     {{ progressPercentage }}% - {{ progressStatus }} - {{ $tc('message.executedQueries', queryCount) }}
                   </span>
                   <progress
                      class="progress d-block"
@@ -29,7 +38,7 @@
             </div>
             <div class="column col-auto px-0">
                <button class="btn btn-link" @click.stop="closeModal">
-                  {{ $t('word.cancel') }}
+                  {{ completed ? $t('word.close') : $t('word.cancel') }}
                </button>
             </div>
          </div>
@@ -40,6 +49,7 @@
 <script>
 import { ipcRenderer } from 'electron';
 import { mapActions, mapGetters } from 'vuex';
+import moment from 'moment';
 import Schema from '@/ipc-api/Schema';
 
 export default {
@@ -53,7 +63,10 @@ export default {
          sqlFile: '',
          isImporting: false,
          progressPercentage: 0,
-         progressStatus: 'Reading'
+         queryCount: 0,
+         completed: false,
+         progressStatus: 'Reading',
+         queryErrors: []
       };
    },
    computed: {
@@ -63,16 +76,23 @@ export default {
       }),
       currentWorkspace () {
          return this.getWorkspace(this.selectedWorkspace);
+      },
+      formattedQueryErrors () {
+         return this.queryErrors.map(err =>
+            `Time: ${moment(err.time).format('HH:mm:ss.S')} (${err.time})\nError: ${err.message}`
+         ).join('\n\n');
       }
    },
    async created () {
       window.addEventListener('keydown', this.onKey);
 
       ipcRenderer.on('import-progress', this.updateProgress);
+      ipcRenderer.on('query-error', this.handleQueryError);
    },
    beforeDestroy () {
       window.removeEventListener('keydown', this.onKey);
       ipcRenderer.off('import-progress', this.updateProgress);
+      ipcRenderer.off('query-error', this.handleQueryError);
    },
    methods: {
       ...mapActions({
@@ -92,6 +112,7 @@ export default {
          };
 
          try {
+            this.completed = false;
             const { status, response } = await Schema.import(params);
             if (status === 'success')
                this.progressStatus = response.cancelled ? this.$t('word.aborted') : this.$t('word.completed');
@@ -99,6 +120,7 @@ export default {
                this.progressStatus = response;
                this.addNotification({ status: 'error', message: response });
             }
+            this.completed = true;
          }
          catch (err) {
             this.addNotification({ status: 'error', message: err.stack });
@@ -108,6 +130,10 @@ export default {
       },
       updateProgress (event, state) {
          this.progressPercentage = Number(state.percentage).toFixed(1);
+         this.queryCount = Number(state.queryCount);
+      },
+      handleQueryError (event, err) {
+         this.queryErrors.push(err);
       },
       async closeModal () {
          let willClose = true;

src/renderer/i18n/en-US.js

@@ -279,7 +279,9 @@ module.exports = {
       commitMode: 'Commit mode',
       autoCommit: 'Auto commit',
       manualCommit: 'Manual commit',
-      actionSuccessful: '{action} successful'
+      actionSuccessful: '{action} successful',
+      importQueryErrors: 'Warning: {n} error has accurrend | Warning: {n} errors occurred',
+      executedQueries: '{n} query executed | {n} queries executed'
    },
    faker: {
       address: 'Address',

src/renderer/i18n/it-IT.js

@@ -271,7 +271,9 @@ module.exports = {
       killProcess: 'Uccidi processo',
       closeTab: 'Chiudi tab',
       goToDownloadPage: 'Vai alla pagina di download',
-      readOnlyMode: 'Modalità sola lettura'
+      readOnlyMode: 'Modalità sola lettura',
+      importQueryErrors: 'Attenzione: si è verificato un errore | Attenzione si sono verificati {n} errori',
+      executedQueries: '{n} query eseguite | {n} query eseguite'
    },
    faker: {
       address: 'Indirizzo',