feat: functions creation

src/renderer/components/ModalNewFunction.vue

@@ -0,0 +1,184 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="400"
+      @confirm="confirmNewFunction"
+      @hide="$emit('close')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-plus mr-1" /> {{ $t('message.createNewRoutine') }}
+         </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
+                     ref="firstInput"
+                     v-model="localFunction.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.definer') }}
+               </label>
+               <div class="column">
+                  <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="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.returns') }}
+               </label>
+               <div class="column">
+                  <div class="input-group">
+                     <select
+                        v-model="localFunction.returns"
+                        class="form-select text-uppercase"
+                        style="width: 0;"
+                     >
+                        <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-model="localFunction.returnsLength"
+                        class="form-input"
+                        type="number"
+                        min="0"
+                     >
+                  </div>
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.comment') }}
+               </label>
+               <div class="column">
+                  <input
+                     v-model="localFunction.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('message.sqlSecurity') }}
+               </label>
+               <div class="column">
+                  <select v-model="localFunction.security" class="form-select">
+                     <option>DEFINER</option>
+                     <option>INVOKER</option>
+                  </select>
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('message.dataAccess') }}
+               </label>
+               <div class="column">
+                  <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 class="form-group">
+               <div class="col-4" />
+               <div class="column">
+                  <label class="form-checkbox form-inline">
+                     <input v-model="localFunction.deterministic" type="checkbox"><i class="form-icon" /> {{ $t('word.deterministic') }}
+                  </label>
+               </div>
+            </div>
+         </form>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'ModalNewFunction',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      workspace: Object
+   },
+   data () {
+      return {
+         localFunction: {
+            definer: '',
+            sql: 'BEGIN\r\n    RETURN NULL;\r\nEND',
+            parameters: [],
+            name: '',
+            comment: '',
+            returns: 'INT',
+            returnsLength: 10,
+            security: 'DEFINER',
+            deterministic: false,
+            dataAccess: 'CONTAINS SQL'
+         },
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      }
+   },
+   mounted () {
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmNewFunction () {
+         this.$emit('open-create-function-editor', this.localFunction);
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceExploreBar.vue

@@ -73,6 +73,12 @@
          @close="hideCreateRoutineModal"
          @open-create-routine-editor="openCreateRoutineEditor"
       />
+      <ModalNewFunction
+         v-if="isNewFunctionModal"
+         :workspace="workspace"
+         @close="hideCreateFunctionModal"
+         @open-create-function-editor="openCreateFunctionEditor"
+      />
       <DatabaseContext
          v-if="isDatabaseContext"
          :selected-database="selectedDatabase"
@@ -82,6 +88,7 @@
          @show-create-view-modal="showCreateViewModal"
          @show-create-trigger-modal="showCreateTriggerModal"
          @show-create-routine-modal="showCreateRoutineModal"
+         @show-create-function-modal="showCreateFunctionModal"
          @reload="refresh"
       />
       <TableContext
@@ -109,6 +116,7 @@ import Tables from '@/ipc-api/Tables';
 import Views from '@/ipc-api/Views';
 import Triggers from '@/ipc-api/Triggers';
 import Routines from '@/ipc-api/Routines';
+import Functions from '@/ipc-api/Functions';
 
 import WorkspaceConnectPanel from '@/components/WorkspaceConnectPanel';
 import WorkspaceExploreBarDatabase from '@/components/WorkspaceExploreBarDatabase';
@@ -120,6 +128,7 @@ import ModalNewTable from '@/components/ModalNewTable';
 import ModalNewView from '@/components/ModalNewView';
 import ModalNewTrigger from '@/components/ModalNewTrigger';
 import ModalNewRoutine from '@/components/ModalNewRoutine';
+import ModalNewFunction from '@/components/ModalNewFunction';
 
 export default {
    name: 'WorkspaceExploreBar',
@@ -133,7 +142,8 @@ export default {
       ModalNewTable,
       ModalNewView,
       ModalNewTrigger,
-      ModalNewRoutine
+      ModalNewRoutine,
+      ModalNewFunction
    },
    props: {
       connection: Object,
@@ -148,6 +158,7 @@ export default {
          isNewViewModal: false,
          isNewTriggerModal: false,
          isNewRoutineModal: false,
+         isNewFunctionModal: false,
 
          localWidth: null,
          isDatabaseContext: false,
@@ -344,6 +355,29 @@ export default {
          }
          else
             this.addNotification({ status: 'error', message: response });
+      },
+      showCreateFunctionModal () {
+         this.closeDatabaseContext();
+         this.isNewFunctionModal = true;
+      },
+      hideCreateFunctionModal () {
+         this.isNewFunctionModal = false;
+      },
+      async openCreateFunctionEditor (payload) {
+         const params = {
+            uid: this.connection.uid,
+            ...payload
+         };
+
+         const { status, response } = await Functions.createFunction(params);
+
+         if (status === 'success') {
+            await this.refresh();
+            this.changeBreadcrumbs({ schema: this.selectedDatabase, function: payload.name });
+            this.selectTab({ uid: this.workspace.uid, tab: 'prop' });
+         }
+         else
+            this.addNotification({ status: 'error', message: response });
       }
    }
 };

src/renderer/components/WorkspaceExploreBarDatabaseContext.vue

@@ -19,7 +19,7 @@
             <div class="context-element" @click="showCreateRoutineModal">
                <span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle pr-1" /> {{ $tc('word.storedRoutine', 1) }}</span>
             </div>
-            <div class="context-element disabled" @click="false">
+            <div class="context-element" @click="showCreateFunctionModal">
                <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ $tc('word.function', 1) }}</span>
             </div>
             <div class="context-element disabled" @click="false">
@@ -108,6 +108,9 @@ export default {
       showCreateRoutineModal () {
          this.$emit('show-create-routine-modal');
       },
+      showCreateFunctionModal () {
+         this.$emit('show-create-function-modal');
+      },
       showDeleteModal () {
          this.isDeleteModal = true;
       },