feat: new trigger setting tabs

src/renderer/components/Workspace.vue

@@ -62,7 +62,7 @@
                <a
                   v-else-if="tab.type === 'temp-data'"
                   class="tab-link"
-                  @dblclick="openAsDataTab(tab)"
+                  @dblclick="openAsPermanentTab(tab)"
                >
                   <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
                   <span :title="`${$t('word.data').toUpperCase()}: ${tab.elementType}`">
@@ -118,6 +118,39 @@
                      />
                   </span>
                </a>
+
+               <a
+                  v-else-if="tab.type === 'temp-trigger-props'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+                  @dblclick="openAsPermanentTab(tab)"
+               >
+                  <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${tab.elementType}`">
+                     <span class=" text-italic">{{ tab.elementName }}</span>
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'trigger-props'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${tab.elementType}`">
+                     {{ tab.elementName }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
             </li>
             <li slot="header" class="tab-item dropdown tools-dropdown">
                <a
@@ -230,6 +263,14 @@
                :view="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspacePropsTabTrigger
+               v-else-if="['temp-trigger-props', 'trigger-props'].includes(tab.type)"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
          </template>
       </div>
       <WorkspaceEditConnectionPanel v-else :connection="connection" />
@@ -257,7 +298,7 @@ import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
 import WorkspaceTableTab from '@/components/WorkspaceTableTab';
 import WorkspacePropsTab from '@/components/WorkspacePropsTab';
 import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
-// import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
+import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
 // import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
 // import WorkspacePropsTabFunction from '@/components/WorkspacePropsTabFunction';
 // import WorkspacePropsTabTriggerFunction from '@/components/WorkspacePropsTabTriggerFunction';
@@ -275,7 +316,7 @@ export default {
       WorkspaceTableTab,
       WorkspacePropsTab,
       WorkspacePropsTabView,
-      // WorkspacePropsTabTrigger,
+      WorkspacePropsTabTrigger,
       // WorkspacePropsTabRoutine,
       // WorkspacePropsTabFunction,
       // WorkspacePropsTabTriggerFunction,
@@ -355,8 +396,20 @@ export default {
       addQueryTab () {
          this.newTab({ uid: this.connection.uid, type: 'query' });
       },
-      openAsDataTab (tab) {
+      openAsPermanentTab (tab) {
-         this.newTab({ uid: this.connection.uid, schema: tab.schema, elementName: tab.elementName, type: 'data', elementType: tab.elementType });
+         const permanentTabs = {
+            table: 'data',
+            view: 'data',
+            trigger: 'trigger-props'
+         };
+
+         this.newTab({
+            uid: this.connection.uid,
+            schema: tab.schema,
+            elementName: tab.elementName,
+            type: permanentTabs[tab.elementType],
+            elementType: tab.elementType
+         });
       },
       closeTab (tab, force) {
          this.unsavedTab = null;
@@ -410,7 +463,6 @@ export default {
       }
 
       .tab-item {
-        max-width: 12rem;
         width: fit-content;
         flex: initial;
 

src/renderer/components/WorkspaceExploreBar.vue

@@ -123,6 +123,7 @@
       <MiscContext
          v-if="isMiscContext"
          :selected-misc="selectedMisc"
+         :selected-schema="selectedSchema"
          :context-event="miscContextEvent"
          @close-context="closeMiscContext"
          @reload="refresh"
@@ -130,6 +131,7 @@
       <MiscFolderContext
          v-if="isMiscFolderContext"
          :selected-misc="selectedMisc"
+         :selected-schema="selectedSchema"
          :context-event="miscContextEvent"
          @show-create-trigger-modal="showCreateTriggerModal"
          @show-create-routine-modal="showCreateRoutineModal"
@@ -347,11 +349,13 @@ export default {
       },
       openMiscContext (payload) {
          this.selectedMisc = payload.misc;
+         this.selectedSchema = payload.schema;
          this.miscContextEvent = payload.event;
          this.isMiscContext = true;
       },
       openMiscFolderContext (payload) {
          this.selectedMisc = payload.type;
+         this.selectedSchema = payload.schema;
          this.miscContextEvent = payload.event;
          this.isMiscFolderContext = true;
       },
@@ -384,7 +388,7 @@ export default {
                uid: this.workspace.uid,
                schema: this.selectedSchema,
                elementName: payload.name,
-               elementType: 'ciew',
+               elementType: 'view',
                type: 'view-props'
             });
          }
@@ -411,7 +415,14 @@ export default {
             await this.refresh();
             const triggerName = this.customizations.triggerTableInName ? `${payload.table}.${payload.name}` : payload.name;
             this.changeBreadcrumbs({ schema: this.selectedSchema, trigger: triggerName });
-            this.selectTab({ uid: this.workspace.uid, tab: 'prop' });
+
+            this.newTab({
+               uid: this.workspace.uid,
+               schema: this.selectedSchema,
+               elementName: triggerName,
+               elementType: 'trigger',
+               type: 'trigger-props'
+            });
          }
          else
             this.addNotification({ status: 'error', message: response });

src/renderer/components/WorkspaceExploreBarMiscContext.vue

@@ -59,7 +59,8 @@ export default {
    },
    props: {
       contextEvent: MouseEvent,
-      selectedMisc: Object
+      selectedMisc: Object,
+      selectedSchema: String
    },
    data () {
       return {
@@ -97,6 +98,7 @@ export default {
       ...mapActions({
          addNotification: 'notifications/addNotification',
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         removeTabs: 'workspaces/removeTabs',
          newTab: 'workspaces/newTab'
       }),
       showCreateTableModal () {
@@ -153,7 +155,12 @@ export default {
             const { status, response } = res;
 
             if (status === 'success') {
-               this.changeBreadcrumbs({ [this.selectedMisc.type]: null });
+               this.removeTabs({
+                  uid: this.selectedWorkspace,
+                  elementName: this.selectedMisc.name,
+                  elementType: this.selectedMisc.type,
+                  schema: this.selectedSchema
+               });
 
                this.closeContext();
                this.$emit('reload');

src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue

@@ -52,7 +52,8 @@ export default {
    },
    props: {
       contextEvent: MouseEvent,
-      selectedMisc: String
+      selectedMisc: String,
+      selectedSchema: String
    },
    data () {
       return {

src/renderer/components/WorkspaceExploreBarSchema.vue

@@ -56,7 +56,8 @@
                            :key="trigger.name"
                            class="menu-item"
                            :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name}"
-                           @click="setBreadcrumbs({schema: database.name, trigger: trigger.name})"
+                           @click="selectMisc({schema: database.name, misc: trigger, type: 'trigger'})"
+                           @dblclick="openMiscPermanentTab({schema: database.name, misc: trigger, type: 'trigger'})"
                            @contextmenu.prevent="showMiscContext($event, {...trigger, type: 'trigger'})"
                         >
                            <a class="table-name">
@@ -285,10 +286,33 @@ export default {
          this.newTab({ uid: this.connection.uid, elementName: table.name, schema: this.database.name, type: 'temp-data', elementType: table.type });
          this.setBreadcrumbs({ schema, [table.type]: table.name });
       },
+      selectMisc ({ schema, misc, type }) {
+         const miscTempTabs = {
+            trigger: 'temp-trigger-props'
+         };
+
+         this.newTab({
+            uid: this.connection.uid,
+            elementName: misc.name,
+            schema: this.database.name,
+            type: miscTempTabs[type],
+            elementType: type
+         });
+
+         this.setBreadcrumbs({ schema, [type]: misc.name });
+      },
       openDataTab ({ schema, table }) {
          this.newTab({ uid: this.connection.uid, elementName: table.name, schema: this.database.name, type: 'data', elementType: table.type });
          this.setBreadcrumbs({ schema, [table.type]: table.name });
       },
+      openMiscPermanentTab ({ schema, misc, type }) {
+         const miscTabs = {
+            trigger: 'trigger-props'
+         };
+
+         this.newTab({ uid: this.connection.uid, elementName: misc.name, schema: this.database.name, type: miscTabs[type], elementType: type });
+         this.setBreadcrumbs({ schema, [type]: misc.name });
+      },
       showSchemaContext (event, schema) {
          this.selectSchema(schema);
          this.$emit('show-schema-context', { event, schema });
@@ -298,12 +322,12 @@ export default {
       },
       showMiscContext (event, misc) {
          this.setBreadcrumbs({ schema: this.database.name, [misc.type]: misc.name });
-         this.$emit('show-misc-context', { event, misc });
+         this.$emit('show-misc-context', { event, schema: this.database.name, misc });
       },
       showMiscFolderContext (event, type) {
          this.selectSchema(this.database.name);
          this.setBreadcrumbs({ schema: this.database.name, type });
-         this.$emit('show-misc-folder-context', { event, type });
+         this.$emit('show-misc-folder-context', { event, schema: this.database.name, type });
       },
       piePercentage (val) {
          const perc = val / this.maxSize * 100;

src/renderer/components/WorkspacePropsTab.vue

@@ -224,7 +224,6 @@ export default {
          addNotification: 'notifications/addNotification',
          refreshStructure: 'workspaces/refreshStructure',
          setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         newTab: 'workspaces/newTab',
          renameTabs: 'workspaces/renameTabs',
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
       }),

src/renderer/components/WorkspacePropsTabTrigger.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="workspace-query-tab column col-12 columns col-gapless">
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
       <div class="workspace-query-runner column col-12">
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
@@ -23,6 +23,11 @@
                   <span>{{ $t('word.clear') }}</span>
                </button>
             </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="$t('word.schema')">
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+               </div>
+            </div>
          </div>
       </div>
       <div class="container">
@@ -139,11 +144,12 @@ export default {
    },
    props: {
       connection: Object,
-      trigger: String
+      trigger: String,
+      isSelected: Boolean,
+      schema: String
    },
    data () {
       return {
-         tabUid: 'prop',
          isLoading: false,
          isSaving: false,
          originalTrigger: null,
@@ -162,15 +168,12 @@ export default {
       workspace () {
          return this.getWorkspace(this.connection.uid);
       },
+      tabUid () {
+         return this.$vnode.key;
+      },
       customizations () {
          return this.workspace.customizations;
       },
-      isSelected () {
-         return this.workspace.selected_tab === 'prop' && this.selectedWorkspace === this.workspace.uid && this.trigger;
-      },
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      },
       isChanged () {
          return JSON.stringify(this.originalTrigger) !== JSON.stringify(this.localTrigger);
       },
@@ -186,6 +189,13 @@ export default {
       }
    },
    watch: {
+      async schema () {
+         if (this.isSelected) {
+            await this.getTriggerData();
+            this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
+            this.lastTrigger = this.trigger;
+         }
+      },
       async trigger () {
          if (this.isSelected) {
             await this.getTriggerData();
@@ -194,16 +204,33 @@ export default {
          }
       },
       async isSelected (val) {
-         if (val && this.lastTrigger !== this.trigger) {
+         if (val) {
-            await this.getTriggerData();
+            this.changeBreadcrumbs({ schema: this.schema, trigger: this.trigger });
-            this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
+
-            this.lastTrigger = this.trigger;
+            if (this.lastTrigger !== this.trigger)
+               this.getTriggerData();
          }
       },
-      isChanged (val) {
+      isChanged (val, oldVal) {
-         if (this.isSelected && this.lastTrigger === this.trigger && this.trigger !== null)
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
-            this.setUnsavedChanges(val);
+
+         if (val && !oldVal) {
+            const triggerName = this.customizations.triggerTableInName ? `${this.originalTrigger.table}.${this.originalTrigger.name}` : this.originalTrigger.name;
+
+            this.newTab({
+               uid: this.connection.uid,
+               elementName: triggerName,
+               schema: this.schema,
+               type: 'trigger-props',
+               elementType: 'trigger'
+            });
          }
+      }
+   },
+   async created () {
+      await this.getTriggerData();
+      this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
+      window.addEventListener('keydown', this.onKey);
    },
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
@@ -211,9 +238,6 @@ export default {
    destroyed () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   created () {
-      window.addEventListener('keydown', this.onKey);
-   },
    beforeDestroy () {
       window.removeEventListener('keydown', this.onKey);
    },
@@ -221,8 +245,10 @@ export default {
       ...mapActions({
          addNotification: 'notifications/addNotification',
          refreshStructure: 'workspaces/refreshStructure',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         renameTabs: 'workspaces/renameTabs',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+         newTab: 'workspaces/newTab',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges'
       }),
       async getTriggerData () {
          if (!this.trigger) return;
@@ -233,6 +259,7 @@ export default {
 
          this.localTrigger = { sql: '' };
          this.isLoading = true;
+         this.lastTrigger = this.trigger;
 
          const params = {
             uid: this.connection.uid,
@@ -289,13 +316,21 @@ export default {
             const { status, response } = await Triggers.alterTrigger(params);
 
             if (status === 'success') {
-               const oldName = this.originalTrigger.name;
-
                await this.refreshStructure(this.connection.uid);
 
-               if (oldName !== this.localTrigger.name) {
+               if (this.originalTrigger.name !== this.localTrigger.name) {
                   this.setUnsavedChanges(false);
                   const triggerName = this.customizations.triggerTableInName ? `${this.localTrigger.table}.${this.localTrigger.name}` : this.localTrigger.name;
+                  const triggerOldName = this.customizations.triggerTableInName ? `${this.originalTrigger.table}.${this.originalTrigger.name}` : this.originalTrigger.name;
+
+                  this.renameTabs({
+                     uid: this.connection.uid,
+                     schema: this.schema,
+                     elementName: triggerOldName,
+                     elementNewName: triggerName,
+                     elementType: 'trigger'
+                  });
+
                   this.changeBreadcrumbs({ schema: this.schema, trigger: triggerName });
                }
 

src/renderer/store/modules/workspaces.store.js

@@ -323,9 +323,6 @@ export default {
                return workspace;
          });
       },
-      // SET_UNSAVED_DISCARD_MODAL (state, val) {
-      //    state.is_unsaved_discard_modal = !!val;
-      // },
       SET_PENDING_BREADCRUMBS (state, payload) {
          state.pending_breadcrumbs = payload;
       },
@@ -503,8 +500,6 @@ export default {
 
          if (getters.getWorkspace(uid).tabs.length < 3)
             dispatch('newTab', { uid, type: 'query' });
-
-         dispatch('setUnsavedChanges', false);
       },
       changeBreadcrumbs ({ commit, getters }, payload) {
          const breadcrumbsObj = {
@@ -539,7 +534,8 @@ export default {
          let tabUid;
          const workspaceTabs = state.workspaces.find(workspace => workspace.uid === uid);
 
-         if (type === 'temp-data') {
+         switch (type) {
+            case 'temp-data': {
                const existentTab = workspaceTabs
                   ? workspaceTabs.tabs.find(tab =>
                      tab.schema === schema &&
@@ -565,7 +561,8 @@ export default {
                   }
                }
             }
-         else if (type === 'data') {
+               break;
+            case 'data': {
                const existentTab = workspaceTabs
                   ? workspaceTabs.tabs.find(tab =>
                      tab.schema === schema &&
@@ -583,7 +580,8 @@ export default {
                   commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
                }
             }
-         else if (type === 'table-props') {
+               break;
+            case 'table-props': {
                const existentTab = workspaceTabs
                   ? workspaceTabs.tabs.find(tab =>
                      tab.elementName === elementName &&
@@ -599,11 +597,59 @@ export default {
                   tabUid = uidGen('T');
                   commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
                }
+            }
+               break;
+            case 'temp-trigger-props': {
+               const existentTab = workspaceTabs
+                  ? workspaceTabs.tabs.find(tab =>
+                     tab.schema === schema &&
+                        tab.elementName === elementName &&
+                        tab.elementType === elementType &&
+                        ['temp-trigger-props', 'trigger-props'].includes(tab.type))
+                  : false;
+
+               if (existentTab) { // if tab exists
+                  tabUid = existentTab.uid;
+               }
+               else {
+                  const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type === 'temp-trigger-props') : false;
+                  if (tempTabs && tempTabs.length) { // if temp tab already opened
+                     for (const tab of tempTabs) {
+                        commit('REPLACE_TAB', { uid, tab: tab.uid, type, schema, elementName, elementType });
+                        tabUid = tab.uid;
+                     }
                   }
                   else {
                      tabUid = uidGen('T');
                      commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
                   }
+               }
+            }
+               break;
+            case 'trigger-props': {
+               const existentTab = workspaceTabs
+                  ? workspaceTabs.tabs.find(tab =>
+                     tab.schema === schema &&
+                     tab.elementName === elementName &&
+                     tab.elementType === elementType &&
+                     ['temp-trigger-props', 'trigger-props'].includes(tab.type))
+                  : false;
+
+               if (existentTab) {
+                  commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, elementName, elementType });
+                  tabUid = existentTab.uid;
+               }
+               else {
+                  tabUid = uidGen('T');
+                  commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
+               }
+            }
+               break;
+            default:
+               tabUid = uidGen('T');
+               commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
+               break;
+         }
 
          commit('SELECT_TAB', { uid, tab: tabUid });
       },