feat: new create function tabs

package.json

@@ -109,7 +109,7 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.15.0",
+    "@babel/eslint-parser": "^7.15.4",
     "cross-env": "^7.0.2",
     "electron": "^14.0.0",
     "electron-builder": "^22.11.7",
@@ -122,7 +122,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^7.17.0",
-    "sass": "^1.38.2",
+    "sass": "^1.39.0",
     "sass-loader": "^10.2.0",
     "standard-version": "^9.3.1",
     "stylelint": "^13.13.1",

src/main/libs/clients/MySQLClient.js

@@ -955,10 +955,12 @@ export class MySQLClient extends AntaresCore {
     * @memberof MySQLClient
     */
    async createFunction (params) {
-      const parameters = params.parameters.reduce((acc, curr) => {
+      const parameters = 'parameters' in params
+         ? params.parameters.reduce((acc, curr) => {
             acc.push(`\`${curr.name}\` ${curr.type}${curr.length ? `(${curr.length})` : ''}`);
             return acc;
-      }, []).join(',');
+         }, []).join(',')
+         : '';
 
       const body = params.returns ? params.sql : 'BEGIN\n  RETURN 0;\nEND';
 

src/main/libs/clients/PostgreSQLClient.js

@@ -758,7 +758,7 @@ export class PostgreSQLClient extends AntaresCore {
    async createRoutine (routine) {
       const parameters = 'parameters' in routine
          ? routine.parameters.reduce((acc, curr) => {
-            acc.push(`${curr.context} ${curr.name} ${curr.type}${curr.length ? `(${curr.length})` : ''}`);
+            acc.push(`${curr.context} ${curr.name} ${curr.type}`);
             return acc;
          }, []).join(',')
          : '';
@@ -887,7 +887,7 @@ export class PostgreSQLClient extends AntaresCore {
    async createFunction (func) {
       const parameters = 'parameters' in func
          ? func.parameters.reduce((acc, curr) => {
-            acc.push(`${curr.context} ${curr.name || ''} ${curr.type}${curr.length ? `(${curr.length})` : ''}`);
+            acc.push(`${curr.context} ${curr.name || ''} ${curr.type}`);
             return acc;
          }, []).join(',')
          : '';

src/renderer/components/Workspace.vue

@@ -170,6 +170,23 @@
                   </span>
                </a>
 
+               <a
+                  v-else-if="tab.type === 'new-function'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newFunction') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
                <a
                   v-else-if="tab.type.includes('temp-')"
                   class="tab-link"
@@ -344,6 +361,15 @@
                :routine="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspaceTabNewFunction
+               v-else-if="tab.type === 'new-function'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
             <WorkspaceTabPropsFunction
                v-else-if="['temp-function-props', 'function-props'].includes(tab.type)"
                :key="tab.uid"
@@ -391,6 +417,7 @@ import WorkspaceTabNewTable from '@/components/WorkspaceTabNewTable';
 import WorkspaceTabNewView from '@/components/WorkspaceTabNewView';
 import WorkspaceTabNewTrigger from '@/components/WorkspaceTabNewTrigger';
 import WorkspaceTabNewRoutine from '@/components/WorkspaceTabNewRoutine';
+import WorkspaceTabNewFunction from '@/components/WorkspaceTabNewFunction';
 
 import WorkspaceTabPropsTable from '@/components/WorkspaceTabPropsTable';
 import WorkspaceTabPropsView from '@/components/WorkspaceTabPropsView';
@@ -419,6 +446,7 @@ export default {
       WorkspaceTabPropsTrigger,
       WorkspaceTabPropsTriggerFunction,
       WorkspaceTabNewRoutine,
+      WorkspaceTabNewFunction,
       WorkspaceTabPropsRoutine,
       WorkspaceTabPropsFunction,
       WorkspaceTabPropsScheduler,

src/renderer/components/WorkspaceExploreBar.vue

@@ -88,7 +88,7 @@
          @open-create-view-tab="openCreateElementTab('view')"
          @open-create-trigger-tab="openCreateElementTab('trigger')"
          @open-create-routine-tab="openCreateElementTab('routine')"
-         @show-create-function-modal="showCreateFunctionModal"
+         @open-create-function-tab="openCreateElementTab('function')"
          @show-create-trigger-function-modal="showCreateTriggerFunctionModal"
          @show-create-scheduler-modal="showCreateSchedulerModal"
          @reload="refresh"
@@ -118,7 +118,7 @@
          :context-event="miscContextEvent"
          @open-create-trigger-tab="openCreateElementTab('trigger')"
          @open-create-routine-tab="openCreateElementTab('routine')"
-         @show-create-function-modal="showCreateFunctionModal"
+         @open-create-function-tab="openCreateElementTab('function')"
          @show-create-trigger-function-modal="showCreateTriggerFunctionModal"
          @show-create-scheduler-modal="showCreateSchedulerModal"
          @close-context="closeMiscFolderContext"

src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue

@@ -20,7 +20,7 @@
       <div
          v-if="selectedMisc === 'function'"
          class="context-element"
-         @click="$emit('show-create-function-modal')"
+         @click="$emit('open-create-function-tab')"
       >
          <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box text-light pr-1" /> {{ $t('message.createNewFunction') }}</span>
       </div>

src/renderer/components/WorkspaceExploreBarSchemaContext.vue

@@ -38,7 +38,7 @@
             <div
                v-if="workspace.customizations.functionAdd"
                class="context-element"
-               @click="showCreateFunctionModal"
+               @click="openCreateFunctionTab"
             >
                <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ $tc('word.function', 1) }}</span>
             </div>
@@ -144,8 +144,8 @@ export default {
       openCreateRoutineTab () {
          this.$emit('open-create-routine-tab');
       },
-      showCreateFunctionModal () {
+      openCreateFunctionTab () {
-         this.$emit('show-create-function-modal');
+         this.$emit('open-create-function-tab');
       },
       showCreateTriggerFunctionModal () {
          this.$emit('show-create-trigger-function-modal');

src/renderer/components/WorkspaceTabNewFunction.vue

@@ -0,0 +1,397 @@
+<template>
+   <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">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  title="CTRL+S"
+                  @click="saveChanges"
+               >
+                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <span>{{ $t('word.save') }}</span>
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <span>{{ $t('word.clear') }}</span>
+               </button>
+
+               <div class="divider-vert py-3" />
+
+               <button class="btn btn-dark btn-sm" @click="showParamsModal">
+                  <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
+                  <span>{{ $t('word.parameters') }}</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">
+         <div class="columns">
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.name') }}
+                  </label>
+                  <input
+                     ref="firstInput"
+                     v-model="localFunction.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div v-if="customizations.languages" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.language') }}
+                  </label>
+                  <select v-model="localFunction.language" class="form-select">
+                     <option v-for="language in customizations.languages" :key="language">
+                        {{ language }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.definer" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.definer') }}
+                  </label>
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localFunction.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.returns') }}
+                  </label>
+                  <div class="input-group">
+                     <select
+                        v-model="localFunction.returns"
+                        class="form-select text-uppercase"
+                        style="max-width: 150px;"
+                     >
+                        <option v-if="localFunction.returns === 'VOID'">
+                           VOID
+                        </option>
+                        <optgroup
+                           v-for="group in workspace.dataTypes"
+                           :key="group.group"
+                           :label="group.group"
+                        >
+                           <option
+                              v-for="type in group.types"
+                              :key="type.name"
+                              :selected="localFunction.returns === type.name"
+                              :value="type.name"
+                           >
+                              {{ type.name }}
+                           </option>
+                        </optgroup>
+                     </select>
+                     <input
+                        v-if="customizations.parametersLength"
+                        v-model="localFunction.returnsLength"
+                        style="max-width: 150px;"
+                        class="form-input"
+                        type="number"
+                        min="0"
+                        :placeholder="$t('word.length')"
+                     >
+                  </div>
+               </div>
+            </div>
+            <div v-if="customizations.comment" class="column">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.comment') }}
+                  </label>
+                  <input
+                     v-model="localFunction.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('message.sqlSecurity') }}
+                  </label>
+                  <select v-model="localFunction.security" class="form-select">
+                     <option>DEFINER</option>
+                     <option>INVOKER</option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.functionDataAccess" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('message.dataAccess') }}
+                  </label>
+                  <select v-model="localFunction.dataAccess" class="form-select">
+                     <option>CONTAINS SQL</option>
+                     <option>NO SQL</option>
+                     <option>READS SQL DATA</option>
+                     <option>MODIFIES SQL DATA</option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.functionDeterministic" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label d-invisible">.</label>
+                  <label class="form-checkbox form-inline">
+                     <input v-model="localFunction.deterministic" type="checkbox"><i class="form-icon" /> {{ $t('word.deterministic') }}
+                  </label>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="workspace-query-results column col-12 mt-2 p-relative">
+         <BaseLoader v-if="isLoading" />
+         <label class="form-label ml-2">{{ $t('message.functionBody') }}</label>
+         <QueryEditor
+            v-show="isSelected"
+            ref="queryEditor"
+            :value.sync="localFunction.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+      <WorkspaceTabPropsFunctionParamsModal
+         v-if="isParamsModal"
+         :local-parameters="localFunction.parameters"
+         :workspace="workspace"
+         :func="localFunction.name"
+         @hide="hideParamsModal"
+         @parameters-update="parametersUpdate"
+      />
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
+import QueryEditor from '@/components/QueryEditor';
+import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal';
+import Functions from '@/ipc-api/Functions';
+
+export default {
+   name: 'WorkspaceTabNewFunction',
+   components: {
+      BaseLoader,
+      QueryEditor,
+      WorkspaceTabPropsFunctionParamsModal
+   },
+   props: {
+      connection: Object,
+      tab: Object,
+      isSelected: Boolean,
+      schema: String
+   },
+   data () {
+      return {
+         isLoading: false,
+         isSaving: false,
+         isParamsModal: false,
+         originalFunction: {},
+         localFunction: {},
+         lastFunction: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      customizations () {
+         return this.workspace.customizations;
+      },
+      tabUid () {
+         return this.$vnode.key;
+      },
+      isChanged () {
+         return JSON.stringify(this.originalFunction) !== JSON.stringify(this.localFunction);
+      },
+      isDefinerInUsers () {
+         return this.originalFunction
+            ? this.workspace.users.some(user => this.originalFunction.definer === `\`${user.name}\`@\`${user.host}\``)
+            : true;
+      },
+      schemaTables () {
+         const schemaTables = this.workspace.structure
+            .filter(schema => schema.name === this.schema)
+            .map(schema => schema.tables);
+
+         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      }
+   },
+   watch: {
+      isSelected (val) {
+         if (val)
+            this.changeBreadcrumbs({ schema: this.schema });
+      },
+      isChanged (val) {
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+      }
+   },
+   created () {
+      this.originalFunction = {
+         sql: this.customizations.procedureSql,
+         language: this.customizations.languages ? this.customizations.languages[0] : null,
+         name: '',
+         definer: '',
+         comment: '',
+         security: 'DEFINER',
+         dataAccess: 'CONTAINS SQL',
+         deterministic: false,
+         returns: this.workspace.dataTypes.length ? this.workspace.dataTypes[0].types[0].name : null
+      };
+
+      this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
+
+      setTimeout(() => {
+         this.resizeQueryEditor();
+      }, 50);
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      if (this.isSelected)
+         this.changeBreadcrumbs({ schema: this.schema });
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 100);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab',
+         renameTabs: 'workspaces/renameTabs'
+      }),
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            ...this.localFunction
+         };
+
+         try {
+            const { status, response } = await Functions.createFunction(params);
+
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
+
+               this.newTab({
+                  uid: this.connection.uid,
+                  schema: this.schema,
+                  elementName: this.localFunction.name,
+                  elementType: 'function',
+                  type: 'function-props'
+               });
+
+               this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+               this.changeBreadcrumbs({ schema: this.schema, function: this.localFunction.name });
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isSaving = false;
+      },
+      clearChanges () {
+         this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
+         this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
+      },
+      resizeQueryEditor () {
+         if (this.$refs.queryEditor) {
+            const footer = document.getElementById('footer');
+            const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
+            this.editorHeight = size;
+            this.$refs.queryEditor.editor.resize();
+         }
+      },
+      optionsUpdate (options) {
+         this.localFunction = options;
+      },
+      parametersUpdate (parameters) {
+         this.localFunction = { ...this.localFunction, parameters };
+      },
+      showParamsModal () {
+         this.isParamsModal = true;
+      },
+      hideParamsModal () {
+         this.isParamsModal = false;
+      },
+      showAskParamsModal () {
+         this.isAskingParameters = true;
+      },
+      hideAskParamsModal () {
+         this.isAskingParameters = false;
+      },
+      onKey (e) {
+         if (this.isSelected) {
+            e.stopPropagation();
+            if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
+               if (this.isChanged)
+                  this.saveChanges();
+            }
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceTabNewRoutine.vue

@@ -223,7 +223,7 @@ export default {
       }
    },
    watch: {
-      async isSelected (val) {
+      isSelected (val) {
          if (val)
             this.changeBreadcrumbs({ schema: this.schema });
       },

src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue

@@ -176,7 +176,7 @@ import { uidGen } from 'common/libs/uidGen';
 import ConfirmModal from '@/components/BaseConfirmModal';
 
 export default {
-   name: 'WorkspaceTabPropsRoutineParamsModal',
+   name: 'WorkspaceTabPropsFunctionParamsModal',
    components: {
       ConfirmModal
    },
@@ -242,7 +242,7 @@ export default {
             name: `Param${this.i++}`,
             type: 'INT',
             context: 'IN',
-            length: 10
+            length: ''
          }];
 
          if (this.parametersProxy.length === 1)

src/renderer/components/WorkspaceTabPropsTableRow.vue

@@ -606,7 +606,7 @@ export default {
   min-height: auto;
 
   .form-icon {
-    top: 0.15rem;
+    top: -0.65rem;
     left: calc(50% - 8px);
   }
 }

src/renderer/i18n/en-US.js

@@ -235,7 +235,8 @@ module.exports = {
       newTable: 'New table',
       newView: 'New view',
       newTrigger: 'New trigger',
-      newRoutine: 'New routine'
+      newRoutine: 'New routine',
+      newFunction: 'New function'
    },
    faker: {
       address: 'Address',