Display the total number of the items in the queue on ItemView.vue

simonsobs · May 29, 2024 · 3b4280b · 3b4280b
1 parent 978a2b4
commit 3b4280b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/queue/view/ItemView.vue b/src/components/queue/view/ItemView.vue
@@ -2,7 +2,10 @@
   <div style="block-size: 100%; inline-size: 100%">
     <div class="g-container">
       <div class="g-top">
-        <div><span class="font-weight-bold">Order:</span> {{ item.order }}</div>
+        <div>
+          <span class="font-weight-bold">Order:</span>
+          {{ item.order }} / {{ nItems }}
+        </div>
         <div><span class="font-weight-bold">Name:</span> {{ item?.name }}</div>
         <div>
           <span class="font-weight-bold">Created at:</span> {{ item?.createdAt }}
@@ -23,6 +26,7 @@ import type { Item } from "../items";
 import Editor from "./Editor.vue";
 interface Props {
   item: Item;
+  nItems: number;
 }
 defineProps<Props>();
 </script>

diff --git a/src/components/queue/view/ViewDialog.vue b/src/components/queue/view/ViewDialog.vue
@@ -16,7 +16,7 @@
         ></v-btn>
       </div>
       <div class="g-content">
-        <item-view :item="item"> </item-view>
+        <item-view :item="item" :n-items="nItems"> </item-view>
       </div>
       <div class="g-bottom d-flex" v-if="!mobile">
         <v-spacer></v-spacer>
@@ -62,7 +62,10 @@ const loading = ref<boolean>(false);
 const dialogError = ref<boolean>(false);
 const error = ref<CombinedError>();
 
-const { deleteItem } = useItems();
+const { items, deleteItem } = useItems();
+
+const nItems = computed(() => items.value?.length ?? 0);
+
 async function onDeleteConfirmed() {
   loading.value = true;
   const result = await deleteItem(item.value);