refactor: migration to pinia

antares-sql · Apr 29, 2022 · 0d52282 · 0d52282
1 parent e9dedfa
commit 0d52282
Show file tree

Hide file tree

Showing 75 changed files with 2,079 additions and 1,814 deletions.
diff --git a/scripts/devtoolsInstaller.js b/scripts/devtoolsInstaller.js
@@ -40,6 +40,7 @@ const downloadFile = url => {
       await downloadFile(fileUrl);
       await unzip(filePath, destFolder);
       fs.unlinkSync(filePath);
+      fs.unlinkSync(`${destFolder}/package.json`);// <- Avoid to display annoyng npm script in vscode
    }
    catch (error) {
       console.log(error);

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -26,11 +26,13 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-import { mapGetters } from 'vuex';
 import { storeToRefs } from 'pinia';
 import { ipcRenderer } from 'electron';
 import { Menu, getCurrentWindow } from '@electron/remote';
 import { useApplicationStore } from '@/stores/application';
+import { useConnectionsStore } from '@/stores/connections';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import TheSettingBar from '@/components/TheSettingBar';
 
 export default {
@@ -48,30 +50,32 @@ export default {
    },
    setup () {
       const applicationStore = useApplicationStore();
+      const connectionsStore = useConnectionsStore();
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
+
       const {
          isLoading,
          isSettingModal,
          isScratchpad
       } = storeToRefs(applicationStore);
+      const { connections } = storeToRefs(connectionsStore);
+      const { applicationTheme, disableBlur } = storeToRefs(settingsStore);
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
       const { checkVersionUpdate } = applicationStore;
 
       return {
-         applicationStore,
          isLoading,
          isSettingModal,
          isScratchpad,
-         checkVersionUpdate
+         checkVersionUpdate,
+         connections,
+         applicationTheme,
+         disableBlur,
+         selectedWorkspace
       };
    },
-   computed: {
-      ...mapGetters({
-         connections: 'connections/getConnections',
-         applicationTheme: 'settings/getApplicationTheme',
-         disableBlur: 'settings/getDisableBlur',
-         selectedWorkspace: 'workspaces/getSelected'
-      })
-   },
    mounted () {
       ipcRenderer.send('check-for-updates');
       this.checkVersionUpdate();

diff --git a/src/renderer/components/BaseTextEditor.vue b/src/renderer/components/BaseTextEditor.vue
@@ -12,7 +12,8 @@
 <script>
 import * as ace from 'ace-builds';
 import 'ace-builds/webpack-resolver';
-import { mapGetters } from 'vuex';
+import { storeToRefs } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
 import { uidGen } from 'common/libs/uidGen';
 
 export default {
@@ -27,20 +28,29 @@ export default {
       height: { type: Number, default: 200 }
    },
    emits: ['update:modelValue'],
+   setup () {
+      const settingsStore = useSettingsStore();
+
+      const {
+         editorTheme,
+         editorFontSize,
+         autoComplete,
+         lineWrap
+      } = storeToRefs(settingsStore);
+
+      return {
+         editorTheme,
+         editorFontSize,
+         autoComplete,
+         lineWrap
+      };
+   },
    data () {
       return {
          editor: null,
-         id: null
+         id: uidGen()
       };
    },
-   computed: {
-      ...mapGetters({
-         editorTheme: 'settings/getEditorTheme',
-         editorFontSize: 'settings/getEditorFontSize',
-         autoComplete: 'settings/getAutoComplete',
-         lineWrap: 'settings/getLineWrap'
-      })
-   },
    watch: {
       mode () {
          if (this.editor)
@@ -78,9 +88,6 @@ export default {
          }
       }
    },
-   created () {
-      this.id = uidGen('E');
-   },
    mounted () {
       this.editor = ace.edit(`editor-${this.id}`, {
          mode: `ace/mode/${this.mode}`,

diff --git a/src/renderer/components/BaseUploadInput.vue b/src/renderer/components/BaseUploadInput.vue
@@ -4,10 +4,10 @@
          <i class="mdi mdi-folder-open mr-1" />{{ message }}
       </span>
       <span class="text-ellipsis file-uploader-value">
-         {{ lastPart(value) }}
+         {{ lastPart(modelValue) }}
       </span>
       <i
-         v-if="value.length"
+         v-if="modelValue.length"
          class="file-uploader-reset mdi mdi-close"
          @click.prevent="clear"
       />
@@ -30,7 +30,7 @@ export default {
          default: 'Browse',
          type: String
       },
-      value: {
+      modelValue: {
          default: '',
          type: String
       }

diff --git a/src/renderer/components/FakerSelect.vue b/src/renderer/components/FakerSelect.vue
@@ -105,7 +105,6 @@
 </template>
 
 <script>
-import { VueMaskDirective } from 'v-mask';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
 import BaseUploadInput from '@/components/BaseUploadInput';
 import ForeignKeySelect from '@/components/ForeignKeySelect';
@@ -117,9 +116,6 @@ export default {
       ForeignKeySelect,
       BaseUploadInput
    },
-   directives: {
-      mask: VueMaskDirective
-   },
    props: {
       type: String,
       field: Object,

diff --git a/src/renderer/components/ForeignKeySelect.vue b/src/renderer/components/ForeignKeySelect.vue
@@ -22,8 +22,10 @@
 
 <script>
 import Tables from '@/ipc-api/Tables';
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import { TEXT, LONG_TEXT } from 'common/fieldTypes';
+import { storeToRefs } from 'pinia';
 export default {
    name: 'ForeignKeySelect',
    props: {
@@ -35,15 +37,20 @@ export default {
       }
    },
    emits: ['update:modelValue', 'blur'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      return { addNotification, selectedWorkspace };
+   },
    data () {
       return {
          foreignList: []
       };
    },
    computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected'
-      }),
       isValidDefault () {
          if (!this.foreignList.length) return true;
          if (this.modelValue === null) return false;
@@ -88,9 +95,6 @@ export default {
       }
    },
    methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
       onChange () {
          this.$emit('update:modelValue', this.$refs.editField.value);
       },

diff --git a/src/renderer/components/ModalEditSchema.vue b/src/renderer/components/ModalEditSchema.vue
@@ -68,15 +68,32 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Schema from '@/ipc-api/Schema';
+import { storeToRefs } from 'pinia';
 
 export default {
    name: 'ModalEditSchema',
    props: {
       selectedSchema: String
    },
    emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, getDatabaseVariable } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getDatabaseVariable
+      };
+   },
    data () {
       return {
          database: {
@@ -87,11 +104,6 @@ export default {
       };
    },
    computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         getDatabaseVariable: 'workspaces/getDatabaseVariable'
-      }),
       collations () {
          return this.getWorkspace(this.selectedWorkspace).collations;
       },
@@ -131,9 +143,6 @@ export default {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
       async updateSchema () {
          if (this.database.collation !== this.database.prevCollation) {
             try {

diff --git a/src/renderer/components/ModalExportSchema.vue b/src/renderer/components/ModalExportSchema.vue
@@ -271,19 +271,39 @@
 
 <script>
 import { ipcRenderer } from 'electron';
-import { mapActions, mapGetters } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import moment from 'moment';
 import customizations from 'common/customizations';
 import Application from '@/ipc-api/Application';
 import Schema from '@/ipc-api/Schema';
 
 export default {
    name: 'ModalExportSchema',
-
    props: {
       selectedSchema: String
    },
    emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         getDatabaseVariable,
+         refreshSchema
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getDatabaseVariable,
+         refreshSchema
+      };
+   },
    data () {
       return {
          isExporting: false,
@@ -301,11 +321,6 @@ export default {
       };
    },
    computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         getDatabaseVariable: 'workspaces/getDatabaseVariable'
-      }),
       currentWorkspace () {
          return this.getWorkspace(this.selectedWorkspace);
       },
@@ -370,10 +385,6 @@ export default {
       ipcRenderer.off('export-progress', this.updateProgress);
    },
    methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshSchema: 'workspaces/refreshSchema'
-      }),
       async startExport () {
          this.isExporting = true;
          const { uid, client } = this.currentWorkspace;

diff --git a/src/renderer/components/ModalFakerRows.vue b/src/renderer/components/ModalFakerRows.vue
@@ -188,7 +188,8 @@
 <script>
 import moment from 'moment';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Tables from '@/ipc-api/Tables';
 import FakerSelect from '@/components/FakerSelect';
 
@@ -203,6 +204,21 @@ export default {
       keyUsage: Array
    },
    emits: ['reload', 'hide'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, getWorkspaceTab } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getWorkspaceTab
+      };
+   },
    data () {
       return {
          localRow: {},
@@ -213,11 +229,6 @@ export default {
       };
    },
    computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         getWorkspaceTab: 'workspaces/getWorkspaceTab'
-      }),
       workspace () {
          return this.getWorkspace(this.selectedWorkspace);
       },
@@ -288,9 +299,6 @@ export default {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
       typeClass (type) {
          if (type)
             return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;