Merge branch 'feat/export-connections' of https://github.com/antares-sql/antares into develop

src/renderer/components/BaseUploadInput.vue

@@ -16,6 +16,7 @@
             :id="`id_${id}`"
             class="file-uploader-input"
             type="file"
+            :accept="accept"
             @change="$emit('change', $event)"
          >
       </form>
@@ -33,6 +34,10 @@ defineProps({
       default: 'Browse',
       type: String
    },
+   accept: {
+      default: '',
+      type: String
+   },
    modelValue: {
       default: '',
       type: String

src/renderer/components/ModalConnectionAppearance.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-brush-variant mr-1" />
-                     <span class="cut-text">{{ t('connection.editConnectionAppearance') }}</span>
+                     <span class="cut-text">{{ t('application.editConnectionAppearance') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />

src/renderer/components/ModalExportSchema.vue

@@ -26,7 +26,7 @@
                               type="text"
                               required
                               readonly
-                              :placeholder="t('database.schemaName')"
+                              @click.prevent="openPathDialog"
                            >
                            <button
                               type="button"
@@ -251,7 +251,7 @@
                   </div>
                </div>
                <div class="column col-auto px-0">
-                  <button class="btn btn-link" @click.stop="closeModal">
+                  <button class="btn btn-link mr-2" @click.stop="closeModal">
                      {{ t('general.close') }}
                   </button>
                   <button

src/renderer/components/ModalSettings.vue

@@ -37,6 +37,13 @@
                         >
                            <a class="tab-link">{{ t('application.shortcuts') }}</a>
                         </li>
+                        <li
+                           class="tab-item c-hand"
+                           :class="{'active': selectedTab === 'data'}"
+                           @click="selectTab('data')"
+                        >
+                           <a class="tab-link">{{ t('application.data') }}</a>
+                        </li>
                         <li
                            v-if="updateStatus !== 'disabled'"
                            class="tab-item c-hand"
@@ -366,6 +373,9 @@
                   <div v-show="selectedTab === 'shortcuts'" class="panel-body py-4">
                      <ModalSettingsShortcuts />
                   </div>
+                  <div v-show="selectedTab === 'data'" class="panel-body py-4">
+                     <ModalSettingsData />
+                  </div>
                   <div v-show="selectedTab === 'update'" class="panel-body py-4">
                      <ModalSettingsUpdate />
                   </div>
@@ -411,6 +421,7 @@ import { localesNames } from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate.vue';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.vue';
 import ModalSettingsShortcuts from '@/components/ModalSettingsShortcuts.vue';
+import ModalSettingsData from '@/components/ModalSettingsData.vue';
 import BaseTextEditor from '@/components/BaseTextEditor.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { AvailableLocale } from '@/i18n';
@@ -648,10 +659,14 @@ onBeforeUnmount(() => {
     .modal-body {
       overflow: hidden;
 
-      .tab-link {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+      .tab-item {
+         max-width: 20%;
+
+         .tab-link {
+           overflow: hidden;
+           white-space: nowrap;
+           text-overflow: ellipsis;
+         }
       }
 
       .panel-body {

src/renderer/components/ModalSettingsData.vue

@@ -0,0 +1,60 @@
+<template>
+   <div class="container">
+      <div class="columns">
+         <div class="column col-12 h6 text-uppercase mb-2">
+            {{ t('application.exportData') }}
+         </div>
+         <div class="column col-12">
+            {{ t('application.exportDataExplanation') }}
+         </div>
+         <div class="column col-12 text-right">
+            <button
+               class="btn btn-primary d-inline-flex"
+               @click="isExportModal=true"
+            >
+               <i class="mdi mdi-tray-arrow-up mdi-24px pr-2" />
+               <span>{{ t('application.exportData') }}</span>
+            </button>
+         </div>
+      </div>
+
+      <div class="columns mt-4 mb-2">
+         <div class="column col-12 h6 text-uppercase mb-2 mt-4">
+            {{ t('application.importData') }}
+         </div>
+         <div class="column col-12">
+            {{ t('application.importDataExplanation') }}
+         </div>
+         <div class="column col-12 text-right">
+            <button
+               class="btn btn-dark d-inline-flex ml-auto"
+               @click="isImportModal=true"
+            >
+               <i class="mdi mdi-tray-arrow-down mdi-24px pr-2" />
+               <span>{{ t('application.importData') }}</span>
+            </button>
+         </div>
+      </div>
+      <ModalSettingsDataExport
+         v-if="isExportModal"
+         @close="isExportModal = false"
+      />
+      <ModalSettingsDataImport
+         v-if="isImportModal"
+         @close="isImportModal = false"
+      />
+   </div>
+</template>
+<script setup lang="ts">
+// import { useApplicationStore } from '@/stores/application';
+import ModalSettingsDataExport from '@/components/ModalSettingsDataExport.vue';
+import ModalSettingsDataImport from '@/components/ModalSettingsDataImport.vue';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const isExportModal = ref(false);
+const isImportModal = ref(false);
+
+</script>

src/renderer/components/ModalSettingsDataExport.vue

@@ -0,0 +1,331 @@
+<template>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div ref="trapRef" 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-tray-arrow-up mr-1" /> {{ t('application.exportData') }}
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="columns export-options">
+                  <div class="column col-8 left">
+                     <div class="workspace-query-results" :style="'min-height: 300px;'">
+                        <div ref="table" class="table table-hover">
+                           <div class="thead">
+                              <div class="tr text-center">
+                                 <div class="th no-border" :style="'width:50%'" />
+                                 <div class="th no-border" />
+                                 <div class="th no-border">
+                                    <label
+                                       class="form-checkbox m-0 px-2 form-inline"
+                                       @click.prevent="toggleAllConnections()"
+                                    >
+                                       <input
+                                          type="checkbox"
+                                          :indeterminate="includeConnectionStatus === 2"
+                                          :checked="!!includeConnectionStatus"
+                                       >
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                              </div>
+                              <div class="tr">
+                                 <div class="th">
+                                    <div class="table-column-title">
+                                       <span>{{ t('connection.connectionName') }}</span>
+                                    </div>
+                                 </div>
+                                 <div class="th">
+                                    <div class="table-column-title">
+                                       <span>{{ t('connection.client') }}</span>
+                                    </div>
+                                 </div>
+                                 <div class="th text-center">
+                                    <div class="table-column-title">
+                                       <span>{{ t('general.include') }}</span>
+                                    </div>
+                                 </div>
+                              </div>
+                           </div>
+
+                           <div class="tbody">
+                              <div
+                                 v-for="(item, i) in connections"
+                                 :key="i"
+                                 class="tr"
+                              >
+                                 <div class="td">
+                                    {{ getConnectionName(item.uid) }}
+                                 </div>
+                                 <div class="td">
+                                    {{ item.client }}
+                                 </div>
+                                 <div class="td text-center">
+                                    <label class="form-checkbox m-0 px-2 form-inline">
+                                       <input v-model="connectionToggles[item.uid]" type="checkbox">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                              </div>
+                           </div>
+                        </div>
+                     </div>
+                  </div>
+                  <div class="column col-4">
+                     <h5 class="h5">
+                        {{ t('general.options') }}
+                     </h5>
+                     <label class="form-checkbox">
+                        <input v-model="options.includes.passwords" type="checkbox">
+                        <i class="form-icon" />
+                        {{ t(`application.includeConnectionPasswords`) }}
+                     </label>
+                     <label class="form-checkbox">
+                        <input v-model="options.includes.folders" type="checkbox">
+                        <i class="form-icon" />
+                        {{ t(`application.includeFolders`) }}
+                     </label>
+                     <div class="h6 mt-4 mb-2">
+                        {{ t('application.encryptionPassword') }}
+                     </div>
+                     <fieldset class="form-group" :class="{'has-error': isPasswordError}">
+                        <div class="input-group">
+                           <input
+                              ref="passkey"
+                              v-model="options.passkey"
+                              :type="isPasswordVisible ? 'text' : 'password'"
+                              class="form-input"
+                              :placeholder="t('application.required')"
+                           >
+                           <button
+                              type="button"
+                              class="btn btn-link input-group-addon"
+                              @click="isPasswordVisible = !isPasswordVisible"
+                           >
+                              <i v-if="isPasswordVisible" class="mdi mdi-eye px-1" />
+                              <i v-else class="mdi mdi-eye-off px-1" />
+                           </button>
+                        </div>
+                        <span v-if="isPasswordError" class="form-input-hint">
+                           {{ t('application.encryptionPasswordError') }}
+                        </span>
+                     </fieldset>
+                  </div>
+               </div>
+            </div>
+            <div class="modal-footer">
+               <button class="btn btn-link mr-2" @click.stop="closeModal">
+                  {{ t('general.close') }}
+               </button>
+               <button
+                  class="btn btn-primary mr-2"
+                  autofocus
+                  @click.prevent="exportData()"
+               >
+                  {{ t('database.export') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, Ref, ref } from 'vue';
+import * as moment from 'moment';
+import { useI18n } from 'vue-i18n';
+import { useFocusTrap } from '@/composables/useFocusTrap';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
+import { unproxify } from '@/libs/unproxify';
+import { uidGen } from 'common/libs/uidGen';
+import { storeToRefs } from 'pinia';
+import { encrypt } from 'common/libs/encrypter';
+import { ConnectionParams } from 'common/interfaces/antares';
+
+const { t } = useI18n();
+const emit = defineEmits(['close']);
+
+const { trapRef } = useFocusTrap();
+
+const { getConnectionName } = useConnectionsStore();
+const { connectionsOrder, connections } = storeToRefs(useConnectionsStore());
+const localConnections = unproxify<ConnectionParams[]>(connections.value);
+const localConnectionsOrder = unproxify<SidebarElement[]>(connectionsOrder.value);
+
+const isPasswordVisible = ref(false);
+const isPasswordError = ref(false);
+const connectionToggles: Ref<{[k:string]: boolean}> = ref({});
+const options = ref({
+   passkey: '',
+   includes: {
+      passwords: true,
+      folders: true
+   }
+});
+const filename = computed(() => {
+   const date = moment().format('YYYY-MM-DD');
+   return `backup_${date}`;
+});
+const includeConnectionStatus = computed(() => {
+   if (Object.values(connectionToggles.value).every(item => item)) return 1;
+   else if (Object.values(connectionToggles.value).some(item => item)) return 2;
+   else return 0;
+});
+
+const exportData = () => {
+   if (options.value.passkey.length < 8)
+      isPasswordError.value = true;
+   else {
+      isPasswordError.value = false;
+      const connectionsToInclude: string[] = [];
+      const connectionsUidMap = new Map<string, string>();
+      for (const cUid in connectionToggles.value)
+         if (connectionToggles.value[cUid]) connectionsToInclude.push(cUid);
+
+      let filteredConnections = unproxify<typeof localConnections>(localConnections.filter(conn => connectionsToInclude.includes(conn.uid)));
+      filteredConnections = filteredConnections.map(c => {
+         const newUid = uidGen('C');
+         connectionsUidMap.set(c.uid, newUid);
+         c.uid = newUid;
+         return c;
+      });
+
+      if (!options.value.includes.passwords) { // Remove passwords and set ask:true
+         filteredConnections.map(c => {
+            if (c.password) {
+               c.password = '';
+               c.ask = true;
+            }
+            return c;
+         });
+      }
+
+      let filteredOrders = [];
+      for (const [oldVal, newVal] of connectionsUidMap) {
+         const connOrder = unproxify(localConnectionsOrder.find(c => c.uid === oldVal));
+         connOrder.uid = newVal;
+         filteredOrders.push(connOrder);
+      }
+
+      if (options.value.includes.folders) { // Includes folders
+         const oldConnUids = Array.from(connectionsUidMap.keys());
+         const newConnUids = Array.from(connectionsUidMap.values());
+         const foldersToInclude = unproxify(localConnectionsOrder).filter(f => (
+            f.isFolder && oldConnUids.some(uid => f.connections.includes(uid))
+         )).map(f => {
+            f.uid = uidGen('F');
+            f.connections = f.connections
+               .map(fc => connectionsUidMap.get(fc))
+               .filter(fc => newConnUids.includes(fc));
+            return f;
+         });
+
+         filteredOrders = [...filteredOrders, ...foldersToInclude];
+      }
+
+      const exportObj = encrypt(JSON.stringify({
+         connections: filteredConnections,
+         connectionsOrder: filteredOrders
+      }), options.value.passkey);
+
+      // console.log(exportObj, JSON.parse(decrypt(exportObj, options.value.passkey)));
+
+      const blobContent = Buffer.from(JSON.stringify(exportObj), 'utf-8').toString('hex');
+      const file = new Blob([blobContent], { type: 'application/octet-stream' });
+      const downloadLink = document.createElement('a');
+      downloadLink.download = `${filename.value}.antares`;
+      downloadLink.href = window.URL.createObjectURL(file);
+      downloadLink.style.display = 'none';
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      downloadLink.remove();
+
+      closeModal();
+   }
+};
+
+const closeModal = () => {
+   emit('close');
+};
+
+const onKey = (e: KeyboardEvent) => {
+   e.stopPropagation();
+   if (e.key === 'Escape')
+      closeModal();
+};
+
+const toggleAllConnections = () => {
+   if (includeConnectionStatus.value !== 1) {
+      connectionToggles.value = localConnections.reduce((acc, curr) => {
+         acc[curr.uid] = true;
+         return acc;
+      }, {} as {[k:string]: boolean});
+   }
+   else {
+      connectionToggles.value = localConnections.reduce((acc, curr) => {
+         acc[curr.uid] = false;
+         return acc;
+      }, {} as {[k:string]: boolean});
+   }
+};
+
+connectionToggles.value = localConnections.reduce((acc, curr) => {
+   acc[curr.uid] = true;
+   return acc;
+}, {} as {[k:string]: boolean});
+
+window.addEventListener('keydown', onKey);
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
+
+</script>
+
+<style lang="scss" scoped>
+.export-options {
+  flex: 1;
+  overflow: hidden;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+}
+
+.workspace-query-results {
+  flex: 1 0 1px;
+
+  .table {
+    width: 100% !important;
+  }
+
+  .form-checkbox {
+    min-height: 0.8rem;
+    padding: 0;
+
+    .form-icon {
+      top: 0.1rem;
+    }
+  }
+}
+
+.modal {
+  .modal-container {
+    max-width: 800px;
+  }
+
+  .modal-body {
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+</style>

src/renderer/components/ModalSettingsDataImport.vue

@@ -0,0 +1,263 @@
+<template>
+   <Teleport to="#window-content">
+      <div class="modal modal-sm active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div ref="trapRef" 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-tray-arrow-down mr-1" /> {{ t('application.importData') }}
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="mb-2">
+                  <div class="h6 mb-2">
+                     {{ t('application.choseFile') }}
+                  </div>
+                  <BaseUploadInput
+                     :model-value="filePath"
+                     :message="t('general.browse')"
+                     accept=".antares"
+                     @clear="filePath = ''"
+                     @change="filesChange($event)"
+                  />
+               </div>
+               <div class="mb-2">
+                  <div class="h6 mb-2">
+                     {{ t('application.password') }}
+                  </div>
+                  <fieldset class="form-group" :class="{'has-error': isPasswordError}">
+                     <div class="input-group">
+                        <input
+                           ref="passkey"
+                           v-model="options.passkey"
+                           :type="isPasswordVisible ? 'text' : 'password'"
+                           class="form-input"
+                           :placeholder="t('application.required')"
+                        >
+                        <button
+                           type="button"
+                           class="btn btn-link input-group-addon"
+                           @click="isPasswordVisible = !isPasswordVisible"
+                        >
+                           <i v-if="isPasswordVisible" class="mdi mdi-eye px-1" />
+                           <i v-else class="mdi mdi-eye-off px-1" />
+                        </button>
+                     </div>
+                     <span v-if="isPasswordError" class="form-input-hint">
+                        {{ t('application.encryptionPasswordError') }}
+                     </span>
+                  </fieldset>
+               </div>
+               <div class="mb-2">
+                  <label class="form-checkbox">
+                     <input v-model="options.ignoreDuplicates" type="checkbox">
+                     <i class="form-icon" />
+                     {{ t(`application.ignoreDuplicates`) }}
+                  </label>
+               </div>
+            </div>
+            <div class="modal-footer">
+               <button
+                  class="btn btn-link mr-2"
+                  @click.stop="closeModal"
+               >
+                  {{ t('general.close') }}
+               </button>
+               <button
+                  class="btn btn-primary mr-2"
+                  :disabled="!filePath"
+                  @click.prevent="importData()"
+               >
+                  {{ t('database.import') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseUploadInput from '@/components/BaseUploadInput.vue';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
+import { unproxify } from '@/libs/unproxify';
+import { storeToRefs } from 'pinia';
+import { decrypt } from 'common/libs/encrypter';
+import { useNotificationsStore } from '@/stores/notifications';
+import { ConnectionParams } from 'common/interfaces/antares';
+
+const { t } = useI18n();
+const emit = defineEmits(['close']);
+
+const { addNotification } = useNotificationsStore();
+
+const connectionsStore = useConnectionsStore();
+const { importConnections } = connectionsStore;
+const { connections } = storeToRefs(connectionsStore);
+
+const filePath = ref('');
+const fileContent = ref(null);
+const isPasswordVisible = ref(false);
+const isPasswordError = ref(false);
+const options = ref({
+   passkey: '',
+   ignoreDuplicates: true
+});
+
+const closeModal = () => {
+   emit('close');
+};
+
+const filesChange = ({ target } : {target: HTMLInputElement }) => {
+   const { files } = target;
+   if (!files.length) return;
+
+   const reader = new FileReader();
+   reader.readAsText(files[0]);
+   reader.onload = () => {
+      fileContent.value = reader.result;
+      filePath.value = files[0].path;
+   };
+};
+
+const importData = () => {
+   if (options.value.passkey.length < 8)
+      isPasswordError.value = true;
+   else {
+      try {
+         const hash = JSON.parse(Buffer.from(fileContent.value, 'hex').toString('utf-8'));
+
+         try {
+            const importObj: {
+               connections: ConnectionParams[];
+               connectionsOrder: SidebarElement[];
+            } = JSON.parse(decrypt(hash, options.value.passkey));
+
+            if (options.value.ignoreDuplicates) {
+               const actualConnections = unproxify(connections.value).map(c => {
+                  delete c.uid;
+
+                  delete c.name;
+                  delete c.password;
+                  delete c.ask;
+
+                  delete c.key;
+                  delete c.cert;
+                  delete c.ca;
+
+                  delete c.sshKey;
+
+                  return JSON.stringify(c);
+               });
+
+               const incomingConnections = unproxify<ConnectionParams[]>(importObj.connections).map(c => {
+                  const uid = c.uid;
+                  delete c.uid;
+
+                  delete c.name;
+                  delete c.password;
+                  delete c.ask;
+
+                  delete c.key;
+                  delete c.cert;
+                  delete c.ca;
+
+                  delete c.sshKey;
+
+                  return { uid, jsonString: JSON.stringify(c) };
+               });
+
+               const newConnectionsUid = incomingConnections
+                  .filter(c => !actualConnections.includes(c.jsonString))
+                  .reduce((acc, cur) => {
+                     acc.push(cur.uid);
+                     return acc;
+                  }, [] as string[]);
+
+               importObj.connections = importObj.connections.filter(c => newConnectionsUid.includes(c.uid));
+               importObj.connectionsOrder = importObj.connectionsOrder
+                  .filter(c => newConnectionsUid
+                     .includes(c.uid) ||
+                     (c.isFolder && c.connections.every(c => newConnectionsUid.includes(c))));
+            }
+
+            importConnections(importObj);
+
+            addNotification({
+               status: 'success',
+               message: t('application.dataImportSuccess')
+            });
+            closeModal();
+         }
+         catch (error) {
+            addNotification({
+               status: 'error',
+               message: t('application.wrongImportPassword')
+            });
+         }
+      }
+      catch (error) {
+         addNotification({
+            status: 'error',
+            message: t('application.wrongFileFormat')
+         });
+      }
+   }
+};
+
+const onKey = (e: KeyboardEvent) => {
+   e.stopPropagation();
+   if (e.key === 'Escape')
+      closeModal();
+};
+
+window.addEventListener('keydown', onKey);
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
+
+</script>
+
+<style lang="scss" scoped>
+.export-options {
+  flex: 1;
+  overflow: hidden;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+}
+
+.workspace-query-results {
+  flex: 1 0 1px;
+
+  .table {
+    width: 100% !important;
+  }
+
+  .form-checkbox {
+    min-height: 0.8rem;
+    padding: 0;
+
+    .form-icon {
+      top: 0.1rem;
+    }
+  }
+}
+
+.modal {
+  .modal-body {
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+</style>