From 1d698dbca4ab6471d5d11ca7420ed504d10cf92d Mon Sep 17 00:00:00 2001
From: adibwp <sas.adibwp@gmail.com>
Date: Tue, 20 Aug 2024 17:58:02 +0700
Subject: [PATCH] add button detail func mockup

---
 specimen-collection/components/left.vue   |  2 +-
 specimen-collection/components/right.vue  | 55 ++++++++++++++++-------
 specimen-collection/modules/collection.js | 10 ++++-
 3 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/specimen-collection/components/left.vue b/specimen-collection/components/left.vue
index 6c977a7..973be3d 100644
--- a/specimen-collection/components/left.vue
+++ b/specimen-collection/components/left.vue
@@ -59,7 +59,7 @@ export default {
             headers: [
                 {
                     title: this.$t('message.tablePatient.date'),
-                    align: "left",
+                    align: "start",
                     sortable: false,
                     key: "date",
                     width: "15%",
diff --git a/specimen-collection/components/right.vue b/specimen-collection/components/right.vue
index dbef363..606b4a6 100644
--- a/specimen-collection/components/right.vue
+++ b/specimen-collection/components/right.vue
@@ -4,7 +4,7 @@
             <div class="bg-primary-lighten rounded-lg pa-5">
                 <v-row>
                     <v-col cols="2">
-                        <div class="rounded-lg bg-secondary-lighten" style="width: 100px; height: 100px;">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
                             <!-- placeholder photo -->
                         </div>
                     </v-col>
@@ -27,6 +27,7 @@
                             style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                             class="rounded-lg bg-secondary-lighten pa-2 pointer"
                             @click="setCall(selected)"
+                            v-show="selected.doneCall !== 'Y'"
                         >
                             <iconify-icon
                                 class="text-secondary-darken"
@@ -113,15 +114,17 @@
                             <div
                                 style="display: flex; align-items: center; justify-content: center;"
                                 class="rounded-lg pa-2"
+                                v-if="selected.doneCall === 'Y'"
                             >
                                 <div
                                     class="pointer"
                                     style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
                                 >
                                     <iconify-icon
-                                        class="text-grey"
+                                        :class="{'text-error': item.requirement === 'N'}"
                                         style="font-size: 1.5rem;"
-                                        icon="fluent:dismiss-24-regular"
+                                        icon="fluent:dismiss-12-filled"
+                                        @click="setReq(item, 'N')"
                                     ></iconify-icon>
                                 </div>
                                 <div
@@ -129,26 +132,31 @@
                                     style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
                                 >
                                     <iconify-icon
-                                        class="text-grey"
-                                        style="font-size: 1.5rem;"
-                                        icon="fluent:checkmark-24-regular"
+                                        :class="{'text-success': item.requirement === 'Y'}"
+                                        style="font-size: 2rem;"
+                                        icon="fluent:checkmark-12-filled"
+                                        @click="setReq(item, 'Y')"
                                     ></iconify-icon>
                                 </div>
                             </div>
+                            <p v-else style="font-size: 1.5rem;">-</p>
                         </td>
-                        <td align="center" class="py-1">
-                            <div class="bg-warning rounded-lg pa-1 text-white">
-                                06-08-2024 14:17
-                            </div>
-                            <div class="bg-grey-lighten-5 rounded-lg pa-1 mt-1">
-                                00-00-0000 00:00
+                        <td align="center">
+                            <div v-if="selected.doneCall === 'Y'" class="py-1">
+                                <div class="bg-warning rounded-lg pa-1 text-white">
+                                    {{ formatDate(item.sDate) }}
+                                </div>
+                                <div :class="['rounded-lg rounded-lg pa-1 mt-1', { 'bg-grey-lighten-5': !item.eDate, 'bg-success': item.eDate }]">
+                                    {{ item.eDate === "" ? '00-00-0000 00:00': formatDate(item.eDate) }}
+                                </div>
                             </div>
+                            <p v-else style="font-size: 1.5rem;">-</p>
                         </td>
                     </tr>
                 </template>
             </v-data-table>
             <div class="ml-3">
-                <v-chip v-for="y in details.jenis" class="mr-2 mt-2" color="primary">{{  y }}</v-chip>
+                <v-chip v-for="y in details.jenis" class="mr-2 mt-2" :color="selected.doneCall === 'Y' ? 'success' : 'primary'">{{ y }}</v-chip>
             </div>
         </v-container>
         <v-container class="bg-white rounded-lg mt-5" fluid>
@@ -221,6 +229,9 @@
             details: {
                 get() {
                     return this.$store.state.collection.details;
+                },
+                set(data) {
+                    this.$store.commit("")
                 }
             },
             pemeriksaan() {
@@ -237,9 +248,21 @@
                 }
             },
             setCall(data) {
-                data.status = "Call";
-                this.selected = data;
-            }
+                if (data.status == "New") {
+                    data.status = "Call";    
+                } else if (data.status == "Call") {
+                    data.doneCall = "Y";
+                }
+            },
+            setReq(data, status) {
+                data.requirement = status;
+                data.eDate= new Date();
+            },
+            formatDate(date) {
+                if (!date) return null;
+
+                return moment(date).format("DD-MM-YYYY HH:mm");
+            },
         },
     }
 </script>
diff --git a/specimen-collection/modules/collection.js b/specimen-collection/modules/collection.js
index dd81ea7..a444d16 100644
--- a/specimen-collection/modules/collection.js
+++ b/specimen-collection/modules/collection.js
@@ -10,6 +10,7 @@ const store = {
                     kelpelanggan: "PASIEN MANDIRI",
                     nama: "Tn. Alpha",
                     status: "New",
+                    doneCall: "N",
                 },
                 {
                     tanggal: "31-07-2024",
@@ -17,6 +18,7 @@ const store = {
                     kelpelanggan: "PASIEN KLINISI",
                     nama: "Tn. Beta",
                     status: "New",
+                    doneCall: "N",
                 },
                 {
                     tanggal: "30-07-2024",
@@ -24,6 +26,7 @@ const store = {
                     kelpelanggan: "PASIEN KLINISI",
                     nama: "Tn. Gamma",
                     status: "New",
+                    doneCall: "N",
                 },
             ],
             selected_patients: {
@@ -39,15 +42,20 @@ const store = {
                     {
                         specimen: "EDTA Rutin",
                         barcode: "055000035LSE1A",
+                        requirement: "",
+                        sDate: new Date(),
+                        eDate: "",
                     },
                     {
                         specimen: "EDTA Rutin",
                         barcode: "0550000AA223FF",
+                        requirement: "",
+                        sDate: new Date(),
+                        eDate: "",
                     },
                 ],
                 jenis: ["DARAH", "SWAB/SEKRET" ]
             },
-
             pemeriksaan: [
                 "Hematologi Lengkap", "Golongan Darah Rhesus", "Kultur Usap Tenggorokan (Vitek)",
             ]