refactor: update QueryHeader component to new requests

app/src/components/QueryHeader.vue

@@ -1,108 +1,88 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useStore } from 'vuex'
+import { computed, toRefs } from 'vue'
 
-import type { Obj } from '@/types/commons'
+import type { APIRequest } from '@/composables/useRequests'
+import { STATUS_VARIANT } from '@/composables/useRequests'
 
-const props = withDefaults(
-  defineProps<{
-    request: Obj
-    statusSize?: string
-    showTime?: boolean
-    showError?: boolean
-  }>(),
-  {
-    statusSize: '',
-    showTime: false,
-    showError: false,
-  },
+const props = defineProps<{
+  request: APIRequest
+  type: 'overlay' | 'history'
+}>()
+
+const emit = defineEmits<{ showError: [id: string] }>()
+
+const statusVariant = computed(() => STATUS_VARIANT[props.request.status])
+const { errors, warnings } = toRefs(
+  props.request.action || { errors: 0, warnings: 0 },
 )
-
-const store = useStore()
-
-const color = computed(() => {
-  const statuses = {
-    pending: 'primary',
-    success: 'success',
-    warning: 'warning',
-    error: 'danger',
-  }
-  return statuses[props.request.status]
+const hour = computed(() => {
+  return new Date(props.request.date).toLocaleTimeString()
 })
-
-const errorsCount = computed(() => {
-  return props.request.messages.filter(({ type }) => type === 'danger').length
-})
-
-const warningsCount = computed(() => {
-  return props.request.messages.filter(({ type }) => type === 'warning').length
-})
-
-function reviewError() {
-  store.dispatch('REVIEW_ERROR', props.request)
-}
-
-function hour(date: Date) {
-  return new Date(date).toLocaleTimeString()
-}
 </script>
 
 <template>
-  <div class="query-header w-100">
-    <!-- STATUS -->
+  <div class="query-header d-flex align-items-center w-100">
     <span
       class="status"
-      :class="['bg-' + color, statusSize]"
-      :aria-label="$t('api.query_status.' + request.status)"
+      :class="[`bg-${statusVariant}`, type]"
+      :aria-label="$t(`api.query_status.${request.status}`)"
     />
 
-    <!-- REQUEST DESCRIPTION -->
-    <strong class="request-desc">
+    <!-- tabindex 0 on title for focus-trap when no tabable elements -->
+    <strong :tabindex="type === 'overlay' ? 0 : undefined">
       {{ request.humanRoute }}
     </strong>
 
-    <div v-if="request.errors || request.warnings">
-      <!-- WEBSOCKET ERRORS COUNT -->
-      <span class="count" v-if="request.errors">
-        {{ request.errors }}<YIcon iname="bug" class="text-danger ms-1" />
+    <div v-if="errors || warnings">
+      <span v-if="errors" class="ms-2">
+        {{ errors }}<YIcon iname="bug" class="text-danger ms-1" />
       </span>
-      <!-- WEBSOCKET WARNINGS COUNT -->
-      <span class="count" v-if="request.warnings">
-        {{ request.warnings
-        }}<YIcon iname="warning" class="text-warning ms-1" />
+      <span v-if="warnings" class="ms-2">
+        {{ warnings }}<YIcon iname="warning" class="text-warning ms-1" />
       </span>
     </div>
 
-    <!-- VIEW ERROR BUTTON -->
-    <BButton
-      v-if="showError && request.error"
-      size="sm"
-      pill
-      class="error-btn ms-auto py-0"
-      variant="danger"
-      @click="reviewError"
-    >
-      <small v-t="'api_error.view_error'" />
-    </BButton>
+    <template v-if="type === 'history'">
+      <BButton
+        v-if="request.err"
+        size="sm"
+        pill
+        class="error-btn ms-auto py-0"
+        variant="danger"
+        @click.stop="emit('showError', request.id)"
+      >
+        <small v-t="'api_error.view_error'" />
+      </BButton>
 
-    <!-- TIME DISPLAY -->
-    <time
-      v-if="showTime"
-      :datetime="hour(request.date)"
-      :class="request.error ? 'ms-2' : 'ms-auto'"
-    >
-      {{ hour(request.date) }}
-    </time>
+      <time :datetime="hour" :class="request.err ? 'ms-2' : 'ms-auto'">
+        {{ hour }}
+      </time>
+    </template>
   </div>
 </template>
 
 <style lang="scss" scoped>
-div {
-  display: flex;
-  align-items: center;
+.query-header {
   font-size: $font-size-sm;
 }
 
+.status {
+  display: inline-block;
+  border-radius: 50%;
+
+  &.history {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-right: 0.5rem;
+  }
+
+  &.overlay {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+}
+
 .error-btn {
   height: 1.25rem;
   display: flex;
@@ -111,35 +91,8 @@ div {
   min-width: 70px;
 }
 
-.status {
-  display: inline-block;
-  border-radius: 50%;
-  width: 0.75rem;
-  min-width: 0.75rem;
-  height: 0.75rem;
-  margin-right: 0.25rem;
-
-  &.lg {
-    width: 1rem;
-    height: 1rem;
-    margin-right: 0.5rem;
-  }
-}
-
 time {
-  min-width: 3.5rem;
+  min-width: 3rem;
   text-align: right;
 }
-
-.count {
-  display: flex;
-  align-items: center;
-  margin-left: 0.5rem;
-}
-
-@include media-breakpoint-down(sm) {
-  .xs-hide .request-desc {
-    display: none;
-  }
-}
 </style>