Make non-expandable pres. tasks a div

artefactual-sdps · Jan 24, 2025 · 073fb90 · 073fb90
1 parent 8f6c16d
commit 073fb90
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 69 deletions.
diff --git a/dashboard/src/components/PreservationActionCollapse.vue b/dashboard/src/components/PreservationActionCollapse.vue
@@ -40,6 +40,15 @@ onMounted(() => {
 });
 
 let expandCounter = ref<number>(0);
+
+const toggleCard = (card: TaskCard, ev: Event) => {
+  if (!card.more) {
+    return;
+  }
+
+  card.isOpen = !card.isOpen;
+  ev.preventDefault();
+};
 </script>
 
 <template>
@@ -87,8 +96,19 @@ let expandCounter = ref<number>(0);
           v-model:expandCounter="expandCounter"
           v-if="authStore.checkAttributes(['package:review'])"
         />
-        <div v-for="(task, index) in tasks" :key="action.id" class="mb-2 card">
-          <PreservationTask :task="task" />
+        <div v-for="card in tasks" :key="action.id" class="mb-2 card">
+          <button
+            v-if="card.more"
+            class="card-body"
+            :aria-controls="'note-' + card.index + '-more'"
+            aria-label="Toggle display of additional notes"
+            @click="toggleCard(card, $event)"
+          >
+            <PreservationTask :task="card" />
+          </button>
+          <div v-else class="card-body">
+            <PreservationTask :task="card" />
+          </div>
         </div>
       </div>
     </div>

diff --git a/dashboard/src/components/PreservationTask.vue b/dashboard/src/components/PreservationTask.vue
@@ -20,80 +20,57 @@ const { task: card } = toRefs(props);
 const isComplete = (task: EnduroPackagePreservationTask) => {
   return task.status == "done" || task.status == "error";
 };
-
-const toggleCard = (card: TaskCard, ev: Event) => {
-  if (!card.more) {
-    return;
-  }
-
-  card.isOpen = !card.isOpen;
-  ev.preventDefault();
-};
 </script>
 
 <template>
-  <button
-    :class="{ 'card-body': true, disabled: !task.more }"
-    :aria-controls="'note-' + card.index + '-more'"
-    aria-label="Toggle display of additional notes"
-    :aria-disabled="!task.more"
-    @click="toggleCard(task, $event)"
-  >
-    <div class="d-flex flex-row align-start gap-3">
-      <div class="fd-flex">
-        <span
-          class="fs-6 badge rounded-pill border border-primary text-primary"
-        >
-          {{ card.index }}
-        </span>
-      </div>
-      <div class="d-flex flex-column flex-grow-1 align-content-stretch min-w-0">
-        <div class="d-flex flex-wrap pt-1">
-          <div class="me-auto text-truncate fw-bold">
-            {{ card.name }}
-          </div>
-          <div class="me-3">
-            <span
-              v-if="
-                !isComplete(card) && $filters.formatDateTime(card.startedAt)
-              "
-            >
-              Started:
-              {{ $filters.formatDateTime(card.startedAt) }}
-            </span>
-            <span
-              v-if="
-                isComplete(card) && $filters.formatDateTime(card.completedAt)
-              "
-            >
-              Completed:
-              {{ $filters.formatDateTime(card.completedAt) }}
-            </span>
-          </div>
+  <div class="d-flex flex-row align-start gap-3">
+    <div class="fd-flex">
+      <span class="fs-6 badge rounded-pill border border-primary text-primary">
+        {{ card.index }}
+      </span>
+    </div>
+    <div class="d-flex flex-column flex-grow-1 align-content-stretch min-w-0">
+      <div class="d-flex flex-wrap pt-1">
+        <div class="me-auto text-truncate fw-bold">
+          {{ card.name }}
         </div>
-        <div class="d-flex flex-row gap-4">
-          <div class="flex-grow-1 line-break text-start">
-            {{ card.note }}
-            <Transition name="fade">
-              <p v-show="card.isOpen" :id="'note-' + card.index + '-more'">
-                {{ card.more }}
-              </p>
-            </Transition>
-          </div>
+        <div class="me-3">
+          <span
+            v-if="!isComplete(card) && $filters.formatDateTime(card.startedAt)"
+          >
+            Started:
+            {{ $filters.formatDateTime(card.startedAt) }}
+          </span>
+          <span
+            v-if="isComplete(card) && $filters.formatDateTime(card.completedAt)"
+          >
+            Completed:
+            {{ $filters.formatDateTime(card.completedAt) }}
+          </span>
         </div>
       </div>
-      <div class="d-flex flex-column pt-1">
-        <div>
-          <StatusBadge :status="card.status" />
-        </div>
-        <div class="align-self-end">
-          <IconChevronDown
-            v-if="card.more"
-            :class="card.isOpen ? 'expander open' : 'expander closed'"
-            :alt="card.isOpen ? 'Collapse note' : 'Expand note'"
-          />
+      <div class="d-flex flex-row gap-4">
+        <div class="flex-grow-1 line-break text-start">
+          {{ card.note }}
+          <Transition name="fade">
+            <p v-show="card.isOpen" :id="'note-' + card.index + '-more'">
+              {{ card.more }}
+            </p>
+          </Transition>
         </div>
       </div>
     </div>
-  </button>
+    <div class="d-flex flex-column pt-1">
+      <div>
+        <StatusBadge :status="card.status" />
+      </div>
+      <div class="align-self-end">
+        <IconChevronDown
+          v-if="card.more"
+          :class="card.isOpen ? 'expander open' : 'expander closed'"
+          :alt="card.isOpen ? 'Collapse note' : 'Expand note'"
+        />
+      </div>
+    </div>
+  </div>
 </template>