feat: re-use SnapshotList in queue dialog

usnistgov · Dec 30, 2024 · 2cd0bb8 · 2cd0bb8
1 parent ce75bca
commit 2cd0bb8
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 114 deletions.
diff --git a/src/frontend/src/components/SnapshotList.vue b/src/frontend/src/components/SnapshotList.vue
@@ -3,15 +3,19 @@
     :rows="snapshots"
     :columns="columns"
     v-model:selected="selected"
-    title="Snapshots"
+    :title="props.maxHeight ? '' : 'Snapshots'"
     :hideCreateBtn="true"
     :hideDeleteBtn="true"
     :hideEditBtn="true"
     :hideSearch="true"
     :disableRadio="true"
     rowKey="snapshot"
     :showAll="true"
-    style="margin-top: 0; height: calc(100vh - 50px);"
+    :style="{ 
+      marginTop: '0', 
+      maxHeight: props.maxHeight ? props.maxHeight + 'px' : '',
+      height: props.maxHeight ? '' : 'calc(100vh - 50px)'
+    }"
   >
     <template #body-cell-timestamp="props">
       {{
@@ -43,6 +47,8 @@ import TableComponent from '@/components/TableComponent.vue'
 import { ref, watch } from 'vue'
 import * as api from '@/services/dataApi'
 
+const props = defineProps(['showDialogHistory', 'type', 'id', 'maxHeight'])
+
 const store = useLoginStore()
 const route = useRoute()
 
@@ -54,9 +60,16 @@ async function getSnapshots() {
     const res = await api.getSnapshots(route.meta.type, route.params.id)
     snapshots.value = res.data.data.reverse()
     console.log('snapshots = ', snapshots.value)
-    // selectedSnapshot.value = snapshots.value[0]
-    // selectedSnapshotIndex.value = 0
-    // loadSnapshot(snapshots.value[0], 0)
+  } catch(err) {
+    console.warn(err)
+  }
+}
+
+async function getDialogSnapshots() {
+  try {
+    const res = await api.getSnapshots(props.type, props.id)
+    snapshots.value = res.data.data.reverse()
+    console.log('snapshots = ', snapshots.value)
   } catch(err) {
     console.warn(err)
   }
@@ -70,6 +83,14 @@ watch(() => store.showRightDrawer, (history) => {
   }
 })
 
+watch(() => props.showDialogHistory, (history) => {
+  if(history) {
+    getDialogSnapshots()
+  } else {
+    store.selectedSnapshot = null
+  }
+})
+
 watch(selected, (newVal) => {
   if(newVal.length > 0) {
     store.selectedSnapshot = newVal[0]

diff --git a/src/frontend/src/dialogs/QueueDialog.vue b/src/frontend/src/dialogs/QueueDialog.vue
@@ -13,9 +13,10 @@
         {{editQueue ? 'Edit Queue' : 'Register Queue'}}
       </label>
     </template>
-    <div class="row no-wrap">
+    <div class="row">
       <!-- this is the form col -->
-      <div 
+      <div
+        class="col-auto" 
         style="width: 500px;"
         :style="{ 
           pointerEvents: history ? 'none' : 'auto', 
@@ -72,66 +73,24 @@
         <!-- <q-inner-loading :showing="history" size="0px" /> -->
       </div>
       <!-- this is the history col -->
-      <q-card 
-        v-if="history" 
-        style="width: 240px; max-height: 263px; overflow: auto;"
-        flat
-        bordered
-        class="q-ml-sm col"
-      >
-        <q-list bordered separator>
-          <q-item
-            v-for="(snapshot, i) in snapshots"
-            tag="label" 
-            v-ripple
-            dense
-            clickable
-            @click="loadSnapshot(snapshot, i)"
-            @keydown="keydown"
-            :class="`${getSelectedColor(selectedSnapshotIndex === i)} cursor-pointer` " 
-          >
-            <!-- <q-item-section avatar>
-              <q-radio
-                v-model="selectedSnapshot"
-                :val="snapshot"
-                @update:model-value="loadSnapshot(snapshot)"
-              />
-            </q-item-section> -->
-            <q-item-section>
-              <q-item-label>
-                {{
-                  new Intl.DateTimeFormat('en-US', { 
-                    year: '2-digit', 
-                    month: '2-digit', 
-                    day: '2-digit', 
-                    hour: 'numeric', 
-                    minute: 'numeric', 
-                    hour12: true 
-                  }).format(new Date(snapshot.snapshotCreatedOn))
-                }}
-                <q-chip
-                  v-if="snapshot.latestSnapshot"
-                  label="latest"
-                  size="md"
-                  dense
-                  color="orange"
-                  text-color="white"
-                />
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
+       <!-- TODO: figure out how to make this not stretch the height without explicitly specifying maxHeight   -->
+      <SnapshotList 
+        v-show="history"
+        :showDialogHistory="history"
+        type="queues"
+        :id="props.editQueue.id"
+        maxHeight="264"
+        class="q-ml-md"
+      />
     </div>
   </DialogComponent>
 </template>
 
 <script setup>
-  import { ref, watch, computed } from 'vue'
+  import { ref, watch } from 'vue'
   import DialogComponent from './DialogComponent.vue'
   import { useLoginStore } from '@/stores/LoginStore.ts'
-  import * as api from '@/services/dataApi'
-  import { useQuasar } from 'quasar'
+  import SnapshotList from '../components/SnapshotList.vue'
 
   const store = useLoginStore()
 
@@ -148,13 +107,6 @@
   const group = ref('')
   const description = ref('')
 
-  function loadSnapshot(snapshot, index) {
-    selectedSnapshotIndex.value = index
-    name.value = snapshot.name
-    group.value = snapshot.group
-    description.value = snapshot.description
-  }
-
   watch(showDialog, (newVal) => {
     if(newVal) {
       name.value = props.editQueue.name
@@ -165,7 +117,6 @@
       name.value = ''
       description.value = ''
       history.value = false
-      snapshots.value = []
     }
   })
 
@@ -189,57 +140,16 @@
 
   const history = ref(false)
 
-  const snapshots = ref([])
-  const selectedSnapshot = ref()
-  const selectedSnapshotIndex = ref()
-
-  async function getSnapshots() {
-    try {
-      const res = await api.getSnapshots('queues', props.editQueue.id)
-      snapshots.value = res.data.data.reverse()
-      selectedSnapshot.value = snapshots.value[0]
-      selectedSnapshotIndex.value = 0
-      loadSnapshot(snapshots.value[0], 0)
-    } catch(err) {
-      console.warn(err)
-    }
-  }
-
-  watch(history, (newVal) => {
+  watch(() => store.selectedSnapshot, (newVal) => {
     if(newVal) {
-      getSnapshots()
+      name.value = newVal.name
+      group.value = newVal.group
+      description.value = newVal.description
     } else {
-      selectedSnapshotIndex.value = 0
       name.value = props.editQueue.name
-      description.value = props.editQueue.description
       group.value = props.editQueue.group
+      description.value = props.editQueue.description
     }
   })
 
-  const $q = useQuasar()
-
-  const darkMode = computed(() => {
-    if($q.dark.mode === 'auto') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches
-    }
-    return $q.dark.mode
-  })
-
-  function getSelectedColor(selected) {
-    if(darkMode.value && selected) return 'bg-deep-purple-10'
-    else if(selected) return 'bg-blue-grey-2'
-  }
-
-  function keydown(event) {
-    if(event.key === 'ArrowUp' && selectedSnapshotIndex.value > 0) {
-      const newIndex = selectedSnapshotIndex.value - 1
-      loadSnapshot(snapshots.value[newIndex], newIndex)
-    }
-    else if(event.key === 'ArrowDown' && selectedSnapshotIndex.value < snapshots.value.length - 1) {
-      const newIndex = selectedSnapshotIndex.value + 1
-      loadSnapshot(snapshots.value[newIndex], newIndex)
-    }
-  }
-
-
 </script>