447 queryconsole tab bug (#448)

* fixes console and query tabs * change v-if to v-show in commit/rollback block
commandprompt · Aug 13, 2024 · 00e50f5 · 00e50f5
1 parent df001de
commit 00e50f5
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 44 deletions.
diff --git a/pgmanage/app/static/assets/js/pgmanage_frontend/src/components/CancelSQLButton.vue b/pgmanage/app/static/assets/js/pgmanage_frontend/src/components/CancelSQLButton.vue
@@ -14,6 +14,7 @@ export default {
     tabId: String,
     connId: String,
   },
+  emits: ['cancelled'],
   methods: {
     cancelSQL() {
       let tab = tabsStore.getSelectedSecondaryTab(this.connId);

diff --git a/pgmanage/app/static/assets/js/pgmanage_frontend/src/components/ConsoleTab.vue b/pgmanage/app/static/assets/js/pgmanage_frontend/src/components/ConsoleTab.vue
@@ -65,18 +65,16 @@
         <CancelButton v-if="executingState && longQuery" :tab-id="tabId" :conn-id="connId"
           @cancelled="cancelConsoleTab()" />
 
-        <div>
-          <p class="m-0 h6" v-if="cancelled">
-            <b>Cancelled</b>
-          </p>
-          <p v-else-if="queryStartTime && queryDuration" class="m-0 h6 me-2">
-            <b>Start time:</b> {{ queryStartTime.format() }}<br/>
-            <b>Duration:</b> {{ queryDuration }}
-          </p>
-          <p v-else-if="queryStartTime" class="m-0 h6 me-2">
-            <b>Start time:</b> {{ queryStartTime.format() }}
-          </p>
-        </div>
+        <p class="m-0 h6" v-if="cancelled">
+          <b>Cancelled</b>
+        </p>
+        <p v-else-if="queryStartTime && queryDuration" class="m-0 h6 me-2">
+          <b>Start time:</b> {{ queryStartTime.format() }}<br/>
+          <b>Duration:</b> {{ queryDuration }}
+        </p>
+        <p v-else-if="queryStartTime" class="m-0 h6 me-2">
+          <b>Start time:</b> {{ queryStartTime.format() }}
+        </p>
       </div>
       <!--FIXME: add proper editor height recalculation-->
         <QueryEditor ref="editor" class="custom-editor me-2" :read-only="readOnlyEditor" :tab-id="tabId" tab-mode="console"

diff --git a/pgmanage/app/static/assets/js/pgmanage_frontend/src/components/QueryTab.vue b/pgmanage/app/static/assets/js/pgmanage_frontend/src/components/QueryTab.vue
@@ -71,47 +71,41 @@
           </template>
 
           <!-- Query ACTIONS BUTTONS-->
-          <template v-if="showFetchButtons">
-            <button class="btn btn-sm btn-secondary" title="Fetch More"
-              @click="querySQL(queryModes.FETCH_MORE)">
-              Fetch More
-            </button>
-            <BlockSizeSelector v-model="blockSize"/>
-          </template>
+          <button v-show="showFetchButtons" class="btn btn-sm btn-secondary" title="Fetch More"
+            @click="querySQL(queryModes.FETCH_MORE)">
+            Fetch More
+          </button>
+          <BlockSizeSelector v-show="showFetchButtons" v-model="blockSize"/>
 
-          <button class="btn btn-sm btn-secondary" title="Fetch All" v-if="showFetchButtons"
+          <button class="btn btn-sm btn-secondary" title="Fetch All" v-show="showFetchButtons"
             @click="querySQL(queryModes.FETCH_ALL)">
             Fetch all
           </button>
 
-          <template v-if="activeTransaction">
-            <button class="btn btn-sm btn-primary" title="Commit"
-              @click="querySQL(queryModes.COMMIT)">
-              Commit
-            </button>
+          <button v-show="activeTransaction" class="btn btn-sm btn-primary" title="Commit"
+            @click="querySQL(queryModes.COMMIT)">
+            Commit
+          </button>
 
-            <button class="btn btn-sm btn-secondary" title="Rollback"
-              @click="querySQL(queryModes.ROLLBACK)">
-              Rollback
-            </button>
-          </template>
+          <button v-show="activeTransaction" class="btn btn-sm btn-secondary" title="Rollback"
+            @click="querySQL(queryModes.ROLLBACK)">
+            Rollback
+          </button>
 
-          <CancelButton v-if="executingState && longQuery" :tab-id="tabId" :conn-id="connId"
+          <CancelButton v-show="executingState && longQuery" :tab-id="tabId" :conn-id="connId"
             @cancelled="cancelSQLTab()" />
 
-          <!-- QUERY INFO DIV-->
-          <div>
-            <p class="m-0 h6" v-if="cancelled">
-              <b>Cancelled</b>
-            </p>
-            <p v-else-if="queryStartTime && queryDuration" class="h6 m-0  me-2">
-              <b>Start time:</b> {{ queryStartTime.format() }}<br/>
-              <b>Duration:</b> {{ queryDuration }}
-            </p>
-            <p v-else-if="queryStartTime" class=" m-0 h6">
-              <b>Start time:</b> {{ queryStartTime.format() }}
-            </p>
-          </div>
+          <!-- QUERY INFO-->
+          <p class="m-0 h6" v-show="cancelled">
+            <b>Cancelled</b>
+          </p>
+          <p v-show="showStartTimeAndDuration" class="h6 m-0  me-2">
+            <b>Start time:</b> {{ formattedStartTime }}<br/>
+            <b>Duration:</b> {{ queryDuration }}
+          </p>
+          <p v-show="showStartTime" class=" m-0 h6">
+            <b>Start time:</b> {{ formattedStartTime }}
+          </p>
 
           <!-- EXPORT BUTTON with SELECT OPTIONS -->
           <button class="btn btn-square btn-primary ms-auto" title="Export Data" @click="exportData()">
@@ -230,6 +224,18 @@ export default {
     },
     fileSaveDisabled() {
       return !this.editorContent;
+    },
+    hasChanges() {
+      return this.activeTransaction || this.executingState || (!!this.lastQuery && this.lastQuery !== this.editorContent);
+    },
+    showStartTimeAndDuration() {
+      return !this.cancelled && this.queryStartTime && this.queryDuration;
+    },
+    showStartTime() {
+      return !this.cancelled && this.queryStartTime && !this.queryDuration;
+    },
+    formattedStartTime() {
+      return this.queryStartTime ? this.queryStartTime.format() : '';
     }
   },
   mounted() {