feat: new trigger function tabs

src/renderer/components/Workspace.vue

@@ -15,28 +15,6 @@
             draggable=".tab-draggable"
             @mouseover.native="addWheelEvent"
          >
-            <!-- <li
-               v-if="schemaChild && isSettingSupported"
-               class="tab-item"
-               :class="{'active': selectedTab === 'prop'}"
-               @click="selectTab({uid: workspace.uid, tab: 'prop'})"
-            >
-               <a class="tab-link">
-                  <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
-                  <span :title="schemaChild">{{ $t('word.settings').toUpperCase() }}: {{ schemaChild }}</span>
-               </a>
-            </li>
-            <li
-               v-if="workspace.breadcrumbs.table || workspace.breadcrumbs.view"
-               class="tab-item"
-               :class="{'active': selectedTab === 'data'}"
-               @click="selectTab({uid: workspace.uid, tab: 'data'})"
-            >
-               <a class="tab-link">
-                  <i class="mdi mdi-18px mr-1" :class="workspace.breadcrumbs.table ? 'mdi-table' : 'mdi-table-eye'" />
-                  <span :title="schemaChild">{{ $t('word.data').toUpperCase() }}: {{ schemaChild }}</span>
-               </a>
-            </li> -->
             <li
                v-for="(tab, i) of draggableTabs"
                :key="i"
@@ -150,6 +128,39 @@
                      />
                   </span>
                </a>
+
+               <a
+                  v-else-if="tab.type === 'temp-trigger-function-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-function-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
@@ -199,12 +210,6 @@
             </li>
          </Draggable>
          <!--
-         <WorkspacePropsTabTrigger
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.trigger"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :trigger="workspace.breadcrumbs.trigger"
-         />
          <WorkspacePropsTabRoutine
             v-show="selectedTab === 'prop' && workspace.breadcrumbs.procedure"
             :is-selected="selectedTab === 'prop'"
@@ -217,12 +222,6 @@
             :connection="connection"
             :function="workspace.breadcrumbs.function"
          />
-         <WorkspacePropsTabTriggerFunction
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.triggerFunction"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :function="workspace.breadcrumbs.triggerFunction"
-         />
          <WorkspacePropsTabScheduler
             v-show="selectedTab === 'prop' && workspace.breadcrumbs.scheduler"
             :is-selected="selectedTab === 'prop'"
@@ -271,6 +270,14 @@
                :trigger="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspacePropsTabTriggerFunction
+               v-else-if="['temp-trigger-function-props', 'trigger-function-props'].includes(tab.type)"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :function="tab.elementName"
+               :schema="tab.schema"
+            />
          </template>
       </div>
       <WorkspaceEditConnectionPanel v-else :connection="connection" />
@@ -300,9 +307,9 @@ import WorkspaceTableTab from '@/components/WorkspaceTableTab';
 import WorkspacePropsTab from '@/components/WorkspacePropsTab';
 import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
 import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
+import WorkspacePropsTabTriggerFunction from '@/components/WorkspacePropsTabTriggerFunction';
 // import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
 // import WorkspacePropsTabFunction from '@/components/WorkspacePropsTabFunction';
-// import WorkspacePropsTabTriggerFunction from '@/components/WorkspacePropsTabTriggerFunction';
 // import WorkspacePropsTabScheduler from '@/components/WorkspacePropsTabScheduler';
 import ModalProcessesList from '@/components/ModalProcessesList';
 import ModalDiscardChanges from '@/components/ModalDiscardChanges';
@@ -319,9 +326,9 @@ export default {
       WorkspacePropsTab,
       WorkspacePropsTabView,
       WorkspacePropsTabTrigger,
+      WorkspacePropsTabTriggerFunction,
       // WorkspacePropsTabRoutine,
       // WorkspacePropsTabFunction,
-      // WorkspacePropsTabTriggerFunction,
       // WorkspacePropsTabScheduler,
       ModalProcessesList,
       ModalDiscardChanges
@@ -402,7 +409,8 @@ export default {
          const permanentTabs = {
             table: 'data',
             view: 'data',
-            trigger: 'trigger-props'
+            trigger: 'trigger-props',
+            triggerFunction: 'trigger-function-props'
          };
 
          this.newTab({

src/renderer/components/WorkspaceEmptyState.vue

@@ -16,13 +16,21 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 export default {
    name: 'WorkspaceEmptyState',
    computed: {
       ...mapGetters({
          applicationTheme: 'settings/getApplicationTheme'
       })
+   },
+   created () {
+      this.changeBreadcrumbs({});
+   },
+   methods: {
+      ...mapActions({
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+      })
    }
 };
 </script>

src/renderer/components/WorkspaceExploreBarSchema.vue

@@ -121,7 +121,8 @@
                            :key="`${func.name}-${i}`"
                            class="menu-item"
                            :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name}"
-                           @click="setBreadcrumbs({schema: database.name, triggerFunction: func.name})"
+                           @click="selectMisc({schema: database.name, misc: func, type: 'triggerFunction'})"
+                           @dblclick="openMiscPermanentTab({schema: database.name, misc: func, type: 'triggerFunction'})"
                            @contextmenu.prevent="showMiscContext($event, {...func, type: 'triggerFunction'})"
                         >
                            <a class="table-name">
@@ -288,7 +289,8 @@ export default {
       },
       selectMisc ({ schema, misc, type }) {
          const miscTempTabs = {
-            trigger: 'temp-trigger-props'
+            trigger: 'temp-trigger-props',
+            triggerFunction: 'temp-trigger-function-props'
          };
 
          this.newTab({
@@ -307,7 +309,8 @@ export default {
       },
       openMiscPermanentTab ({ schema, misc, type }) {
          const miscTabs = {
-            trigger: 'trigger-props'
+            trigger: 'trigger-props',
+            triggerFunction: 'trigger-function-props'
          };
 
          this.newTab({

src/renderer/components/WorkspacePropsTabTriggerFunction.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">
@@ -80,11 +80,12 @@ export default {
    },
    props: {
       connection: Object,
-      function: String
+      function: String,
+      isSelected: Boolean,
+      schema: String
    },
    data () {
       return {
-         tabUid: 'prop',
          isLoading: false,
          isSaving: false,
          isOptionsModal: false,
@@ -105,11 +106,8 @@ export default {
       workspace () {
          return this.getWorkspace(this.connection.uid);
       },
-      isSelected () {
-         return this.workspace.selected_tab === 'prop' && this.selectedWorkspace === this.workspace.uid && this.function;
-      },
-      schema () {
-         return this.workspace.breadcrumbs.schema;
+      tabUid () {
+         return this.$vnode.key;
       },
       isChanged () {
          return JSON.stringify(this.originalFunction) !== JSON.stringify(this.localFunction);
@@ -128,6 +126,13 @@ export default {
       }
    },
    watch: {
+      async schema () {
+         if (this.isSelected) {
+            await this.getFunctionData();
+            this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
+            this.lastFunction = this.function;
+         }
+      },
       async function () {
          if (this.isSelected) {
             await this.getFunctionData();
@@ -136,26 +141,28 @@ export default {
          }
       },
       async isSelected (val) {
-         if (val && this.lastFunction !== this.function) {
-            await this.getFunctionData();
-            this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
-            this.lastFunction = this.function;
+         if (val) {
+            this.changeBreadcrumbs({ schema: this.schema, triggerFunction: this.function });
+
+            if (this.lastFunction !== this.function)
+               await this.getFunctionData();
          }
       },
       isChanged (val) {
-         if (this.isSelected && this.lastFunction === this.function && this.function !== null)
-            this.setUnsavedChanges(val);
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
       }
    },
+   async created () {
+      await this.getFunctionData();
+      this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
+      window.addEventListener('keydown', this.onKey);
+   },
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
    },
    destroyed () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   created () {
-      window.addEventListener('keydown', this.onKey);
-   },
    beforeDestroy () {
       window.removeEventListener('keydown', this.onKey);
    },
@@ -163,15 +170,17 @@ export default {
       ...mapActions({
          addNotification: 'notifications/addNotification',
          refreshStructure: 'workspaces/refreshStructure',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         renameTabs: 'workspaces/renameTabs',
+         newTab: 'workspaces/newTab',
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         newTab: 'workspaces/newTab'
+         setUnsavedChanges: 'workspaces/setUnsavedChanges'
       }),
       async getFunctionData () {
          if (!this.function) return;
 
          this.isLoading = true;
          this.localFunction = { sql: '' };
+         this.lastFunction = this.function;
 
          const params = {
             uid: this.connection.uid,
@@ -223,8 +232,15 @@ export default {
                await this.refreshStructure(this.connection.uid);
 
                if (oldName !== this.localFunction.name) {
-                  this.setUnsavedChanges(false);
-                  this.changeBreadcrumbs({ schema: this.schema, function: this.localFunction.name });
+                  this.renameTabs({
+                     uid: this.connection.uid,
+                     schema: this.schema,
+                     elementName: oldName,
+                     elementNewName: this.localFunction.name,
+                     elementType: 'triggerFunction'
+                  });
+
+                  this.changeBreadcrumbs({ schema: this.schema, triggerFunction: this.localFunction.name });
                }
 
                this.getFunctionData();

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

@@ -596,27 +596,28 @@ export default {
                }
             }
                break;
-            case 'temp-trigger-props': {
+            case 'temp-trigger-props':
+            case 'temp-trigger-function-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))
+                     [type, type.replace('temp-', '')].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;
+                  const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type.includes('temp-')) : false;
                   if (tempTabs && tempTabs.length) { // if temp tab already opened
                      for (const tab of tempTabs) {
                         if (tab.isChanged) {
                            commit('REPLACE_TAB', { // make permanent a temp table with unsaved changes
                               uid,
                               tab: tab.uid,
-                              type: 'trigger-props',
+                              type: tab.type.replace('temp-', ''),
                               schema: tab.schema,
                               elementName: tab.elementName,
                               elementType: tab.elementType
@@ -638,13 +639,14 @@ export default {
                }
             }
                break;
-            case 'trigger-props': {
+            case 'trigger-props':
+            case 'trigger-function-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))
+                     [`temp-${type}`, type].includes(tab.type))
                   : false;
 
                if (existentTab) {