feat(UI): modal that shows process query

src/renderer/components/BaseConfirmModal.vue

@@ -24,7 +24,7 @@
                <slot name="body" />
             </div>
          </div>
-         <div class="modal-footer">
+         <div v-if="!hideFooter" class="modal-footer">
             <button
                class="btn btn-primary mr-2"
                @click.stop="confirmModal"
@@ -51,6 +51,10 @@ export default {
          validator: prop => ['small', 'medium', '400', 'large'].includes(prop),
          default: 'small'
       },
+      hideFooter: {
+         type: Boolean,
+         default: false
+      },
       confirmText: String,
       cancelText: String
    },

src/renderer/components/BaseVirtualScroll.vue

@@ -41,14 +41,16 @@ export default {
          localScrollElement: null
       };
    },
+   watch: {
+      scrollElement () {
+         this.setScrollElement();
+      }
+   },
    mounted () {
-      this._checkScrollPosition = this.checkScrollPosition.bind(this);
-      this.localScrollElement = this.scrollElement ? this.scrollElement : this.$el;
-      this.updateWindow();
-      this.localScrollElement.addEventListener('scroll', this._checkScrollPosition);
+      this.setScrollElement();
    },
    beforeDestroy () {
-      this.localScrollElement.removeEventListener('scroll', this._checkScrollPosition);
+      this.localScrollElement.removeEventListener('scroll', this.checkScrollPosition);
    },
    methods: {
       checkScrollPosition (e) {
@@ -58,7 +60,7 @@ export default {
             this.updateWindow(e);
          }, 200);
       },
-      updateWindow (e) {
+      updateWindow () {
          const visibleItemsCount = Math.ceil(this.visibleHeight / this.itemHeight);
          const totalScrollHeight = this.items.length * this.itemHeight;
          const offset = 50;
@@ -74,6 +76,14 @@ export default {
 
          this.topHeight = firstCutIndex * this.itemHeight;
          this.bottomHeight = totalScrollHeight - this.visibleItems.length * this.itemHeight - this.topHeight;
+      },
+      setScrollElement () {
+         if (this.localScrollElement)
+            this.localScrollElement.removeEventListener('scroll', this.checkScrollPosition);
+
+         this.localScrollElement = this.scrollElement ? this.scrollElement : this.$el;
+         this.updateWindow();
+         this.localScrollElement.addEventListener('scroll', this.checkScrollPosition);
       }
    }
 };

src/renderer/components/ModalProcessesList.vue

@@ -1,7 +1,7 @@
 <template>
    <div class="modal active">
       <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0">
+      <div class="modal-container p-0 pb-4">
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
@@ -34,7 +34,7 @@
                         type="range"
                         min="0"
                         max="30"
-                        step="1"
+                        step="0.5"
                         @change="setRefreshInterval"
                      >
                   </div>
@@ -42,12 +42,16 @@
             </div>
             <div class="workspace-query-info">
                <div v-if="sortedResults.length">
-                  {{ $t('word.results') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
+                  {{ $t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
                </div>
             </div>
          </div>
-         <div ref="tableWrapper" class="modal-body py-0">
-            <div class="vscroll workspace-query-results" :style="{'height': resultsSize+'px'}">
+         <div class="modal-body py-0 workspace-query-results">
+            <div
+               ref="tableWrapper"
+               class="vscroll"
+               :style="{'height': resultsSize+'px'}"
+            >
                <div ref="table" class="table table-hover">
                   <div class="thead">
                      <div class="tr">
@@ -84,18 +88,13 @@
                            class="process-row"
                            :row="row"
                            @contextmenu="contextMenu"
-                           @show-info="showInfoModal"
+                           @stop-refresh="stopRefresh"
                         />
                      </template>
                   </BaseVirtualScroll>
                </div>
             </div>
          </div>
-         <div class="modal-footer text-light">
-            <button class="btn btn-link" @click.stop="closeModal">
-               {{ $t('word.close') }}
-            </button>
-         </div>
       </div>
    </div>
 </template>
@@ -213,7 +212,7 @@ export default {
       },
       resizeResults () {
          if (this.$refs.resultTable) {
-            const el = this.$refs.tableWrapper;
+            const el = this.$refs.tableWrapper.parentElement;
 
             if (el) {
                const size = el.offsetHeight;
@@ -241,7 +240,7 @@ export default {
          this.currentSort = '';
          this.currentSortDir = 'asc';
       },
-      showInfoModal () {
+      stopRefresh () {
          this.autorefreshTimer = 0;
          this.clearRefresh();
       },

src/renderer/components/ProcessesListRow.vue

@@ -18,23 +18,26 @@
          </template>
       </div>
       <ConfirmModal
-         v-if="isTextareaEditor"
+         v-if="isInfoModal"
          :confirm-text="$t('word.update')"
+         :cancel-text="$t('word.close')"
          size="medium"
-         @hide="hideEditorModal"
+         :hide-footer="true"
+         @hide="hideInfoModal"
       >
          <template :slot="'header'">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.edit') }} "{{ editingField }}"
+               <i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ $t('message.processInfo') }}
             </div>
          </template>
          <div :slot="'body'">
-            <div class="mb-2">
+            <div>
                <div>
                   <TextEditor
-                     :value.sync="editingContent"
+                     :value="row.info"
                      editor-class="textarea-editor"
                      :mode="editorMode"
+                     :read-only="true"
                   />
                </div>
             </div>
@@ -56,7 +59,7 @@ export default {
    filters: {
       cutText (val) {
          if (typeof val !== 'string') return val;
-         return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
+         return val.length > 250 ? `${val.substring(0, 250)}[...]` : val;
       }
    },
    props: {
@@ -65,7 +68,7 @@ export default {
    data () {
       return {
          isInlineEditor: {},
-         isTextareaEditor: false,
+         isInfoModal: false,
          editorMode: 'sql'
       };
    },
@@ -90,9 +93,13 @@ export default {
             this.$emit('contextmenu', event, payload);
          }
       },
+      hideInfoModal () {
+         this.isInfoModal = false;
+      },
       dblClick (col) {
          if (col !== 'info') return;
-         this.$emit('show-info', col);
+         this.$emit('stop-refresh');
+         this.isInfoModal = true;
       },
       onKey (e) {
          e.stopPropagation();

src/renderer/i18n/en-US.js

@@ -99,7 +99,8 @@ module.exports = {
       copy: 'Copy',
       paste: 'Paste',
       tools: 'Tools',
-      variables: 'Variables'
+      variables: 'Variables',
+      processes: 'Processes'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -197,6 +198,7 @@ module.exports = {
       includeBetaUpdates: 'Include beta updates',
       setNull: 'Set NULL',
       processesList: 'Processes list',
+      processInfo: 'Process info',
       manageUsers: 'Manage users'
    },
    faker: {

src/renderer/scss/_data-types.scss

@@ -30,6 +30,7 @@
     "double": $number-color,
     "decimal": $number-color,
     "bigint": $number-color,
+    "newdecimal": $number-color,
     "datetime": $date-color,
     "date": $date-color,
     "time": $date-color,