From 3c743913db01911f93441f3d79c7cfc7df2fda74 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <162551568+Methapon-Frappet@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:45:24 +0700
Subject: [PATCH] refactor: urgent quotation ui (#61)

---
 src/components/05_quotation/QuotationCard.vue | 64 +++++++++++--------
 src/components/BadgeComponent.vue             | 13 +++-
 2 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index 2d2e30bd..328481b8 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -32,27 +32,29 @@ defineEmits<{
 </script>
 <template>
   <div
-    class="surface-1 rounded q-pa-xs quo-card bordered"
+    class="surface-1 rounded q-pa-sm quo-card bordered"
     :class="{ 'urgent-card': urgent }"
   >
     <!-- SEC: header -->
     <header class="row items-center no-wrap">
-      <q-img src="/images/quotation-avatar-border.png" width="2rem" />
-
-      <div class="column q-ml-sm relative-position" style="font-size: 12px">
-        <span>
-          {{ $t('general.itemNo', { msg: $t('quotation.title') }) }}
-        </span>
-        <span
-          class="text-caption row items-center"
-          :class="urgent ? 'code' : 'app-text-muted'"
-        >
-          {{ code }}
-        </span>
+      <div v-if="urgent" class="q-mr-sm" style="font-size: 90%">
+        <BadgeComponent
+          icon="mdi-fire"
+          :title="$t('general.urgent2')"
+          hsla-color="--gray-1-hsl"
+          hsla-background="--red-8-hsl"
+          solid
+        />
       </div>
-      <div v-if="urgent" class="tag q-px-xs q-ml-sm">
-        <q-icon name="mdi-fire" size="12px" />
-        <span>{{ $t('general.urgent2') }}</span>
+      <div class="q-mr-sm" style="font-size: 90%">
+        <BadgeComponent
+          :title="status"
+          hsla-color="--blue-6-hsl"
+          hsla-background="--blue-0-hsl"
+          hsla-border="--blue-1-hsl"
+          :border="urgent"
+          solid
+        />
       </div>
 
       <nav class="col text-right">
@@ -88,20 +90,30 @@ defineEmits<{
       </nav>
     </header>
 
-    <div class="ellipsis q-px-sm q-py-sm">
-      {{ title || '-' }}
+    <div class="ellipsis q-px-xs">
+      <b>{{ title || '-' }}</b>
+      <q-tooltip anchor="bottom start" self="top left">
+        {{ title || '-' }}
+      </q-tooltip>
+    </div>
+    <div
+      class="ellipsis q-px-xs q-mb-sm"
+      style="color: hsla(var(--gray-8-hsl) / 0.7); font-size: 80%"
+    >
+      {{ code || '-' }}
       <q-tooltip anchor="bottom start" self="top left">
         {{ title || '-' }}
       </q-tooltip>
     </div>
 
     <!-- SEC: body -->
-    <section class="surface-1 rounded q-px-sm">
-      <article class="row no-wrap q-py-sm items-center" style="font-size: 90%">
-        <span class="app-text-muted q-pr-sm">{{ $t('general.status') }} :</span>
-        <BadgeComponent :title="status" hsla-color="--blue-6-hsl" />
-      </article>
-      <q-separator />
+    <section
+      class="rounded q-px-sm"
+      :class="{
+        'surface-1': urgent,
+        'surface-2': !urgent,
+      }"
+    >
       <article class="row q-py-sm">
         <div class="col-4 app-text-muted q-pr-sm">
           {{ $t('quotation.customerName') }}
@@ -178,8 +190,8 @@ span {
 }
 
 .urgent-card {
-  background-color: hsla(var(--red-3-hsl) / 0.2) !important;
-  border: 1px solid var(--red-6) !important;
+  background-color: hsla(var(--red-7-hsl) / 0.07) !important;
+  border: 0.5px solid var(--red-6) !important;
 
   .code {
     color: var(--red-6);
diff --git a/src/components/BadgeComponent.vue b/src/components/BadgeComponent.vue
index 23177ca2..393cd9c0 100644
--- a/src/components/BadgeComponent.vue
+++ b/src/components/BadgeComponent.vue
@@ -5,13 +5,24 @@ defineProps<{
   title?: string;
   titleI18n?: string;
   hslaColor?: string;
+  hslaBackground?: string;
+  hslaBorder?: string;
+  border?: boolean;
+  solid?: boolean;
+  transparency?: number;
 }>();
 </script>
 
 <template>
   <div
     class="rounded q-px-sm flex-center"
-    :style="`color: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.8);  background: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.1); `"
+    :style="{
+      color: `hsla(var(${hslaColor || '--green-6-hsl'}) / 1)`,
+      background: `hsla(var(${hslaBackground || hslaColor || '--green-6-hsl'}) / ${solid ? 1 : 0.15})`,
+      border: border
+        ? `0.5px solid hsla(var(${hslaBorder || hslaBackground || hslaColor || '--green-6-hsl'}) / ${solid ? 1 : 0.15})`
+        : undefined,
+    }"
   >
     <Icon :icon="icon || 'mdi-circle-medium'" style="margin-right: 0.25rem" />
     {{ title || (!!titleI18n ? $t(titleI18n) : '-') }}