From 4db0987dd26e1611bf4e8eeb82f58015f0a1d1ab Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 8 Nov 2024 10:42:47 +0700
Subject: [PATCH] feat: add table urgent display

---
 .../05_quotation/TableQuotation.vue           | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index 012a51f9..4c23fcb7 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -68,7 +68,7 @@ defineEmits<{
     </template>
 
     <template v-slot:body="props">
-      <q-tr>
+      <q-tr :class="{ urgent: props.row.urgent }">
         <q-td v-if="visibleColumns.includes('order')">
           {{ props.rowIndex + 1 }}
         </q-td>
@@ -147,4 +147,35 @@ defineEmits<{
   </q-table>
 </template>
 
-<style scoped></style>
+<style scoped>
+.q-table tr.urgent {
+  background: hsla(var(--red-6-hsl) / 0.03);
+}
+
+.q-table tr.urgent td:first-child {
+  &::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 5%;
+    bottom: 5%;
+    background: var(--red-8);
+    width: 4px;
+    border-radius: 99rem;
+    animation: blink 1s infinite;
+  }
+}
+
+@keyframes blink {
+  0% {
+    background: var(--red-8);
+  }
+  50% {
+    background: var(--red-3);
+  }
+  100% {
+    background: var(--red-8);
+  }
+}
+</style>