feat(UI): run routines/functions from settings tab

src/renderer/components/ModalAskParameters.vue

@@ -0,0 +1,102 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.run')"
+      :cancel-text="$t('word.cancel')"
+      size="400"
+      @confirm="runRoutine"
+      @hide="closeModal"
+   >
+      <template slot="header">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-play mr-1" /> {{ $t('word.parameters') }}: {{ localRoutine.name }}
+         </div>
+      </template>
+      <div slot="body">
+         <div class="content">
+            <form class="form-horizontal">
+               <div
+                  v-for="(parameter, i) in localRoutine.parameters"
+                  :key="parameter._id"
+                  class="form-group"
+               >
+                  <div class="col-3">
+                     <label class="form-label">{{ parameter.name }}</label>
+                  </div>
+                  <div class="col-9">
+                     <div class="input-group">
+                        <input
+                           :ref="i === 0 ? 'firstInput' : ''"
+                           v-model="values[parameter.name]"
+                           class="form-input"
+                           type="text"
+                        >
+                        <span class="input-group-addon field-type" :class="`type-${parameter.type.toLowerCase()}`">
+                           {{ parameter.type }} {{ parameter.length | wrapNumber }}
+                        </span>
+                     </div>
+                  </div>
+               </div>
+            </form>
+         </div>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'ModalAskParameters',
+   components: {
+      ConfirmModal
+   },
+   filters: {
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
+      }
+   },
+   props: {
+      localRoutine: Object
+   },
+   data () {
+      return {
+         values: {}
+      };
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+
+      setTimeout(() => {
+         this.$refs.firstInput[0].focus();
+      }, 20);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      runRoutine () {
+         const valArr = Object.keys(this.values).reduce((acc, curr) => {
+            const value = isNaN(this.values[curr]) ? `"${this.values[curr]}"` : this.values[curr];
+            acc.push(value);
+            return acc;
+         }, []);
+         this.$emit('confirm', valArr);
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .field-type {
+    font-size: 0.6rem;
+  }
+</style>

src/renderer/components/WorkspacePropsTabFunction.vue

@@ -25,9 +25,9 @@
                <div class="divider-vert py-3" />
 
                <button
-                  class="btn btn-dark btn-sm disabled"
+                  class="btn btn-dark btn-sm"
                   :disabled="isChanged"
-                  @click="false"
+                  @click="runFunctionCheck"
                >
                   <span>{{ $t('word.run') }}</span>
                   <i class="mdi mdi-24px mdi-play ml-1" />
@@ -70,6 +70,12 @@
          @hide="hideParamsModal"
          @parameters-update="parametersUpdate"
       />
+      <ModalAskParameters
+         v-if="isAskingParameters"
+         :local-routine="localFunction"
+         @confirm="runFunction"
+         @close="hideAskParamsModal"
+      />
    </div>
 </template>
 
@@ -80,6 +86,7 @@ import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspacePropsFunctionOptionsModal from '@/components/WorkspacePropsFunctionOptionsModal';
 import WorkspacePropsFunctionParamsModal from '@/components/WorkspacePropsFunctionParamsModal';
+import ModalAskParameters from '@/components/ModalAskParameters';
 import Functions from '@/ipc-api/Functions';
 
 export default {
@@ -88,7 +95,8 @@ export default {
       BaseLoader,
       QueryEditor,
       WorkspacePropsFunctionOptionsModal,
-      WorkspacePropsFunctionParamsModal
+      WorkspacePropsFunctionParamsModal,
+      ModalAskParameters
    },
    props: {
       connection: Object,
@@ -101,6 +109,7 @@ export default {
          isSaving: false,
          isOptionsModal: false,
          isParamsModal: false,
+         isAskingParameters: false,
          originalFunction: null,
          localFunction: { sql: '' },
          lastFunction: null,
@@ -166,7 +175,8 @@ export default {
          addNotification: 'notifications/addNotification',
          refreshStructure: 'workspaces/refreshStructure',
          setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         newTab: 'workspaces/newTab'
       }),
       async getFunctionData () {
          if (!this.function) return;
@@ -257,6 +267,31 @@ export default {
       parametersUpdate (parameters) {
          this.localFunction = { ...this.localFunction, parameters };
       },
+      runFunctionCheck () {
+         if (this.localFunction.parameters.length)
+            this.showAskParamsModal();
+         else
+            this.runFunction();
+      },
+      runFunction (params) {
+         if (!params) params = [];
+
+         let sql;
+         switch (this.connection.client) { // TODO: move in a better place
+            case 'maria':
+            case 'mysql':
+            case 'pg':
+               sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`;
+               break;
+            case 'mssql':
+               sql = `SELECT ${this.originalFunction.name} ${params.join(',')}`;
+               break;
+            default:
+               sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`;
+         }
+
+         this.newTab({ uid: this.connection.uid, content: sql, autorun: true });
+      },
       showOptionsModal () {
          this.isOptionsModal = true;
       },
@@ -268,6 +303,12 @@ export default {
       },
       hideParamsModal () {
          this.isParamsModal = false;
+      },
+      showAskParamsModal () {
+         this.isAskingParameters = true;
+      },
+      hideAskParamsModal () {
+         this.isAskingParameters = false;
       }
    }
 };

src/renderer/components/WorkspacePropsTabRoutine.vue

@@ -25,9 +25,9 @@
                <div class="divider-vert py-3" />
 
                <button
-                  class="btn btn-dark btn-sm disabled"
+                  class="btn btn-dark btn-sm"
                   :disabled="isChanged"
-                  @click="runRoutine"
+                  @click="runRoutineCheck"
                >
                   <span>{{ $t('word.run') }}</span>
                   <i class="mdi mdi-24px mdi-play ml-1" />
@@ -70,6 +70,12 @@
          @hide="hideParamsModal"
          @parameters-update="parametersUpdate"
       />
+      <ModalAskParameters
+         v-if="isAskingParameters"
+         :local-routine="localRoutine"
+         @confirm="runRoutine"
+         @close="hideAskParamsModal"
+      />
    </div>
 </template>
 
@@ -80,6 +86,7 @@ import QueryEditor from '@/components/QueryEditor';
 import BaseLoader from '@/components/BaseLoader';
 import WorkspacePropsRoutineOptionsModal from '@/components/WorkspacePropsRoutineOptionsModal';
 import WorkspacePropsRoutineParamsModal from '@/components/WorkspacePropsRoutineParamsModal';
+import ModalAskParameters from '@/components/ModalAskParameters';
 import Routines from '@/ipc-api/Routines';
 
 export default {
@@ -88,7 +95,8 @@ export default {
       QueryEditor,
       BaseLoader,
       WorkspacePropsRoutineOptionsModal,
-      WorkspacePropsRoutineParamsModal
+      WorkspacePropsRoutineParamsModal,
+      ModalAskParameters
    },
    props: {
       connection: Object,
@@ -101,6 +109,7 @@ export default {
          isSaving: false,
          isOptionsModal: false,
          isParamsModal: false,
+         isAskingParameters: false,
          originalRoutine: null,
          localRoutine: { sql: '' },
          lastRoutine: null,
@@ -257,22 +266,30 @@ export default {
       parametersUpdate (parameters) {
          this.localRoutine = { ...this.localRoutine, parameters };
       },
-      runRoutine () { // TODO: create ask for params modal
+      runRoutineCheck () {
+         if (this.localRoutine.parameters.length)
+            this.showAskParamsModal();
+         else
+            this.runRoutine();
+      },
+      runRoutine (params) {
+         if (!params) params = [];
+
          let sql;
          switch (this.connection.client) { // TODO: move in a better place
             case 'maria':
             case 'mysql':
             case 'pg':
-               sql = `CALL \`${this.originalRoutine.name}\` ()`;
+               sql = `CALL \`${this.originalRoutine.name}\` (${params.join(',')})`;
                break;
             case 'mssql':
-               sql = `EXEC ${this.originalRoutine.name}`;
+               sql = `EXEC ${this.originalRoutine.name} ${params.join(',')}`;
                break;
             default:
-               sql = `CALL \`${this.originalRoutine.name}\` ()`;
+               sql = `CALL \`${this.originalRoutine.name}\` (${params.join(',')})`;
          }
 
-         this.newTab({ uid: this.connection.uid, content: sql, autorun: !this.originalRoutine.parameters.length });
+         this.newTab({ uid: this.connection.uid, content: sql, autorun: true });
       },
       showOptionsModal () {
          this.isOptionsModal = true;
@@ -285,6 +302,12 @@ export default {
       },
       hideParamsModal () {
          this.isParamsModal = false;
+      },
+      showAskParamsModal () {
+         this.isAskingParameters = true;
+      },
+      hideAskParamsModal () {
+         this.isAskingParameters = false;
       }
    }
 };