refactor: improved structure for table options modal

src/renderer/components/WorkspacePropsOptionsModal.vue

@@ -0,0 +1,126 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="400"
+      @confirm="confirmOptionsChange"
+      @hide="$emit('hide')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-cogs mr-1" /> {{ $t('word.options') }} "{{ table }}"
+         </div>
+      </template>
+      <div :slot="'body'">
+         <form class="form-horizontal">
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.name') }}
+               </label>
+               <div class="column">
+                  <input
+                     v-model="optionsProxy.name"
+                     class="form-input"
+                     :class="{'is-error': !isTableNameValid}"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.comment') }}
+               </label>
+               <div class="column">
+                  <input
+                     v-model="optionsProxy.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.autoIncrement') }}
+               </label>
+               <div class="column">
+                  <input
+                     v-model="optionsProxy.autoIncrement"
+                     class="form-input"
+                     type="number"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.collation') }}
+               </label>
+               <div class="column">
+                  <select v-model="optionsProxy.collation" class="form-select">
+                     <option
+                        v-for="collation in workspace.collations"
+                        :key="collation.id"
+                        :value="collation.collation"
+                     >
+                        {{ collation.collation }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.engine') }}
+               </label>
+               <div class="column">
+                  <select v-model="optionsProxy.engine" class="form-select">
+                     <option
+                        v-for="engine in workspace.engines"
+                        :key="engine.name"
+                        :value="engine.name"
+                     >
+                        {{ engine.name }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+         </form>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspacePropsOptionsModal',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      localOptions: Object,
+      tableOptions: Object,
+      table: String,
+      workspace: Object
+   },
+   data () {
+      return {
+         optionsProxy: {},
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      isTableNameValid () {
+         return this.optionsProxy.name !== '';
+      }
+   },
+   created () {
+      this.optionsProxy = JSON.parse(JSON.stringify(this.localOptions));
+   },
+   methods: {
+      confirmOptionsChange () {
+         if (!this.isTableNameValid)
+            this.optionsProxy.name = this.localOptions.name;
+
+         this.$emit('options-update', this.optionsProxy);
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTab.vue

@@ -32,7 +32,7 @@
                   <span>{{ $t('word.add') }}</span>
                   <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
                </button>
-               <button class="btn btn-dark btn-sm">
+               <button class="btn btn-dark btn-sm" :title="$t('message.manageIndexes')">
                   <span>{{ $t('word.indexes') }}</span>
                   <i class="mdi mdi-24px mdi-key mdi-rotate-45 ml-1" />
                </button>
@@ -61,92 +61,15 @@
             @remove-field="removeField"
          />
       </div>
-      <ConfirmModal
+      <WorkspacePropsOptionsModal
          v-if="isOptionsModal"
-         :confirm-text="$t('word.confirm')"
+         :local-options="localOptions"
-         size="400"
+         :table-options="tableOptions"
-         @confirm="confirmOptionsChange"
+         :table="table"
+         :workspace="workspace"
          @hide="hideOptionsModal"
-      >
+         @options-update="optionsUpdate"
-         <template :slot="'header'">
+      />
-            <div class="d-flex">
-               <i class="mdi mdi-24px mdi-cogs mr-1" /> {{ $t('word.options') }} "{{ table }}"
-            </div>
-         </template>
-         <div :slot="'body'">
-            <form class="form-horizontal">
-               <div class="form-group">
-                  <label class="form-label col-4">
-                     {{ $t('word.name') }}
-                  </label>
-                  <div class="column">
-                     <input
-                        v-model="localOptions.name"
-                        class="form-input"
-                        :class="{'is-error': !isTableNameValid}"
-                        type="text"
-                     >
-                  </div>
-               </div>
-               <div class="form-group">
-                  <label class="form-label col-4">
-                     {{ $t('word.comment') }}
-                  </label>
-                  <div class="column">
-                     <input
-                        v-model="localOptions.comment"
-                        class="form-input"
-                        type="text"
-                     >
-                  </div>
-               </div>
-               <div class="form-group">
-                  <label class="form-label col-4">
-                     {{ $t('word.autoIncrement') }}
-                  </label>
-                  <div class="column">
-                     <input
-                        v-model="localOptions.autoIncrement"
-                        class="form-input"
-                        type="number"
-                     >
-                  </div>
-               </div>
-               <div class="form-group">
-                  <label class="form-label col-4">
-                     {{ $t('word.collation') }}
-                  </label>
-                  <div class="column">
-                     <select v-model="localOptions.collation" class="form-select">
-                        <option
-                           v-for="collation in workspace.collations"
-                           :key="collation.id"
-                           :value="collation.collation"
-                        >
-                           {{ collation.collation }}
-                        </option>
-                     </select>
-                  </div>
-               </div>
-               <div class="form-group">
-                  <label class="form-label col-4">
-                     {{ $t('word.engine') }}
-                  </label>
-                  <div class="column">
-                     <select v-model="localOptions.engine" class="form-select">
-                        <option
-                           v-for="engine in workspace.engines"
-                           :key="engine.name"
-                           :value="engine.name"
-                        >
-                           {{ engine.name }}
-                        </option>
-                     </select>
-                  </div>
-               </div>
-            </form>
-         </div>
-      </ConfirmModal>
    </div>
 </template>
 
@@ -155,13 +78,13 @@ import { mapGetters, mapActions } from 'vuex';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
 import WorkspacePropsTable from '@/components/WorkspacePropsTable';
-import ConfirmModal from '@/components/BaseConfirmModal';
+import WorkspacePropsOptionsModal from '@/components/WorkspacePropsOptionsModal';
 
 export default {
    name: 'WorkspacePropsTab',
    components: {
       WorkspacePropsTable,
-      ConfirmModal
+      WorkspacePropsOptionsModal
    },
    props: {
       connection: Object,
@@ -181,7 +104,7 @@ export default {
          localKeyUsage: [],
          originalIndexes: [],
          localIndexes: [],
-         localOptions: [],
+         localOptions: {},
          lastTable: null
       };
    },
@@ -210,9 +133,6 @@ export default {
          return JSON.stringify(this.originalFields) !== JSON.stringify(this.localFields) ||
             JSON.stringify(this.originalKeyUsage) !== JSON.stringify(this.localKeyUsage) ||
             JSON.stringify(this.tableOptions) !== JSON.stringify(this.localOptions);
-      },
-      isTableNameValid () {
-         return this.localOptions.name !== '';
       }
    },
    watch: {
@@ -385,27 +305,14 @@ export default {
       removeField (uid) {
          this.localFields = this.localFields.filter(field => field._id !== uid);
       },
-      showAddModal () {
-         this.isAddModal = true;
-      },
-      hideAddModal () {
-         this.isAddModal = false;
-      },
       showOptionsModal () {
          this.isOptionsModal = true;
       },
       hideOptionsModal () {
-         if (this.isOptionsChanging && !this.isTableNameValid) {
-            this.isOptionsChanging = false;
-            return;
-         }
-
          this.isOptionsModal = false;
-         if (!this.isOptionsChanging) this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
-         this.isOptionsChanging = false;
       },
-      confirmOptionsChange () {
+      optionsUpdate (options) {
-         this.isOptionsChanging = true;
+         this.localOptions = options;
       }
    }
 };

src/renderer/i18n/en-US.js

@@ -101,7 +101,9 @@ module.exports = {
       zeroFill: 'Zero fill',
       customValue: 'Custom value',
       onUpdate: 'On update',
-      deleteField: 'Delete field'
+      deleteField: 'Delete field',
+      createNewIndex: 'Create new index',
+      addToIndex: 'Add to index'
    },
    // Date and Time
    short: {