From b3ad260791367ebaa3bb71a3311302e1f133e044 Mon Sep 17 00:00:00 2001
From: Hanan Askarim <askarimmm.hanan@gmail.com>
Date: Mon, 19 Aug 2024 15:16:31 +0700
Subject: [PATCH] fix slicing verification

---
 .../components/detailPatient.vue              | 260 +++++++++---------
 .../components/listPatient.vue                |  75 +++--
 result-verification/components/mainVerif.vue  |   8 +-
 .../components/searchPatient.vue              | 223 +++++++--------
 result-verification/modules/verification.js   |   4 +
 5 files changed, 285 insertions(+), 285 deletions(-)

diff --git a/result-verification/components/detailPatient.vue b/result-verification/components/detailPatient.vue
index ef15737..eddc3ef 100644
--- a/result-verification/components/detailPatient.vue
+++ b/result-verification/components/detailPatient.vue
@@ -1,136 +1,136 @@
 <template>
     <div>
-        <v-row>
-            <v-col cols="12">
-                <v-container class="bg-white rounded-lg">
-
-                    <v-row class="pb-5">
-                        <v-col cols="2">
-                            <v-menu
-                                v-model="menu"
-                                :close-on-content-click="false"
-                                transition="scale-transition"
-                                offset-y
-                                min-width="auto"
-                                max-width="290px"
-                            >
-                                <template v-slot:activator="{ props  }">
-                                <v-text-field
-                                    :model-value="formatDate()"
-                                    label="Tanggal Mulai"
-                                    prepend-inner-icon="mdi-calendar"
-                                    hide-details
-                                    readonly
-                                    variant="outlined"
-                                    v-bind="props"
-                                ></v-text-field>
-                                </template>
-                                <v-date-picker
-                                hide-header
-                                show-adjacent-months
-                                rounded="lg"
-                                color="primary"
-                                v-model="date"
-                                @update:modelValue="menu=false"
-                                ></v-date-picker>
-                            </v-menu>
-                        </v-col>
-                        <v-col cols="4">
-                            <v-text-field 
-                                label="No Reg / Nama / Jenis Kelamin" 
-                                variant="outlined"
-                                hide-details
-                            ></v-text-field>
-                        </v-col>
-                        <v-col cols="3">
-                            <v-text-field 
-                                label="DOB / Umur" 
-                                variant="outlined"
-                                hide-details
-                            ></v-text-field>
-                        </v-col>
-                        <v-col cols="3">
-                            <v-text-field 
-                                label="Pengirim" 
-                                variant="outlined"
-                                hide-details
-                            ></v-text-field>
-                        </v-col>
-                    </v-row>
-
-                    <v-data-table
-                        :headers="headers"
-                        :items="xdetails"
-                        return-object
-                        hide-default-footer
+        <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="2">
+                    <v-menu
+                        v-model="menu"
+                        :close-on-content-click="false"
+                        transition="scale-transition"
+                        offset-y
+                        min-width="auto"
+                        max-width="290px"
                     >
-                        <template v-slot:item="{ item }">
-                            <tr>
-                                <td class="text-left" v-if="item.is_result == 'N'" colspan="8">
-                                    <p class="font-weight-medium">{{ item.t_testname }}</p>
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    <p class="font-weight-medium">{{ item.t_testname }}</p>
-                                </td>
-                                <td class="text-left">
-                                    
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    <p>{{ item.result_flag }}</p>
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    {{ item.normal_note }}
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    {{ item.unit_name }}
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    {{ item.methode_name }}
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    {{ item.note }}
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    <div class="d-flex justify-center">
-                                        <v-btn fab 
-                                            variant="tonal"
-                                            small
-                                            color="error"
-                                            class="bg-error-lighten ma-0 float-left">
-                                            <iconify-icon
-                                                style="font-size: 2rem;"
-                                                icon="fluent:dismiss-24-regular"
-                                            ></iconify-icon>
-                                        </v-btn>    
-                                        <v-btn fab 
-                                            variant="tonal"
-                                            small 
-                                            color="success" 
-                                            class="bg-success-lighten ml-1 ma-0 float-left">
-                                            <iconify-icon
-                                                style="font-size: 2rem;"
-                                                icon="fluent:checkmark-24-regular"
-                                            ></iconify-icon>
-                                        </v-btn> 
-                                    </div>
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    <div class="d-flex">
-                                        <v-sheet class="font-weight-medium ma-1 pa-1">VR</v-sheet>
-                                        <v-sheet class="font-weight-medium ma-1 pa-1">VL</v-sheet>
-                                    </div>
-                                </td>
-                            </tr>
+                        <template v-slot:activator="{ props  }">
+                        <v-text-field
+                            :model-value="formatDate()"
+                            label="Tanggal Mulai"
+                            prepend-inner-icon="mdi-calendar"
+                            hide-details
+                            readonly
+                            variant="outlined"
+                            v-bind="props"
+                        ></v-text-field>
                         </template>
-                    </v-data-table>
+                        <v-date-picker
+                        hide-header
+                        show-adjacent-months
+                        rounded="lg"
+                        color="primary"
+                        v-model="date"
+                        @update:modelValue="menu=false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-col>
+                <v-col cols="5">
+                    <v-text-field 
+                        label="No Reg / Nama / Jenis Kelamin" 
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field 
+                        label="DOB / Umur" 
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+                <v-col cols="2.5">
+                    <v-text-field 
+                        label="Pengirim" 
+                        variant="outlined"
+                        hide-details
+                    ></v-text-field>
+                </v-col>
+            </v-row>
 
-                </v-container>
-            </v-col>
-        </v-row>
+            <v-data-table
+                :headers="headers"
+                :items="xdetails"
+                return-object
+                hide-default-footer
+                class="pt-5"
+            >
+
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td class="text-left" v-if="item.is_result == 'N'" colspan="8">
+                            <p class="font-weight-medium">{{ item.t_testname }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <p class="font-weight-medium">{{ item.t_testname }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <p>{{ item.result_flag }}</p>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.normal_note }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.unit_name }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.methode_name }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            {{ item.note }}
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <div class="d-flex justify-center">
+                                <div
+                                    class="pointer bg-error-lighten"
+                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        class="text-error"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:dismiss-24-regular"
+                                    ></iconify-icon>
+                                </div>
+                                <div
+                                    class="pointer bg-success-lighten ml-2"
+                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                    <iconify-icon
+                                        class="text-success"
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:checkmark-24-regular"
+                                    ></iconify-icon>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
     </div>
 </template>
     
 <style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th,
+    .v-table .v-table__wrapper > table > thead > tr > th {
+        border-bottom: dashed 1px #EEEEEE;
+    }
+
 </style>
     
 <script type="module">
@@ -144,7 +144,7 @@
                         align: 'start',
                         key: 'name',
                         sortable: false,
-                        width: "10%",
+                        width: "15%",
                         title: "NAMA PEMERIKSAAN",
                         class: "bg-secondary-lighten font-weight-bold",
                     },
@@ -160,7 +160,7 @@
                         align: 'start',
                         key: 'name', 
                         sortable: false,
-                        width: "5%",
+                        width: "10%",
                         title: "FLAG",
                         class: "bg-secondary-lighten font-weight-bold",
                     },
@@ -204,14 +204,6 @@
                         title: "VALIDASI",
                         class: "bg-secondary-lighten font-weight-bold",
                     },
-                    { 
-                        align: 'start',
-                        key: 'name', 
-                        sortable: false,
-                        width: "10%",
-                        title: "MR",
-                        class: "bg-secondary-lighten font-weight-bold",
-                    },
                 ],
             };
         },
diff --git a/result-verification/components/listPatient.vue b/result-verification/components/listPatient.vue
index d00eaf5..81ae880 100644
--- a/result-verification/components/listPatient.vue
+++ b/result-verification/components/listPatient.vue
@@ -1,47 +1,46 @@
 <template>
     <div>
-        <v-row>
-            <v-col cols="12">
-                <v-container class="bg-white rounded-lg">
+        <v-container class="bg-white rounded-lg" fluid>
 
-                    <v-data-table
-                        :headers="headers"
-                        :items="xpatients"
-                        return-object
-                        hide-default-footer
-                    >
-                        <template v-slot:top>
-                            <v-toolbar flat class="bg-secondary-lighten">
-                                <v-toolbar-title>{{ $t('message.toolbalTitle') }}</v-toolbar-title>
-                            </v-toolbar>
-                        </template>
+            <v-data-table
+                :headers="headers"
+                :items="xpatients"
+                return-object
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:top>
+                    <v-toolbar flat class="bg-secondary-lighten rounded-lg">
+                        <v-toolbar-title class="text-black font-weight-bold">{{ $t('message.toolbalTitle') }}</v-toolbar-title>
+                    </v-toolbar>
+                </template>
 
-                        <template v-slot:item="{ item }">
-                            <tr>
-                                <td v-bind:class="{'blue-lighten-5':isSelected(item)}" @click="selectMe(item)">
-                                    <div>
-                                        <p class="mt-2 mb-2">{{ item.noreg }}</p>
-                                        <p class="mb-2" >
-                                            <v-chip label size="small">
-                                            {{ item.orderdate }}
-                                            </v-chip>
-                                        </p>
-                                    </div>
-                                </td>
-                                <td v-bind:class="{'blue-lighten-5':isSelected(item)}" @click="selectMe(item)">
-                                    <p>{{ item.name }}</p>
-                                </td>
-                            </tr>
-                        </template>
-                    </v-data-table>
-                </v-container>
-            </v-col>
-        </v-row>
+                <template v-slot:item="{ item }">
+                    <tr v-bind:class="{'bg-primary-lighten':isSelected(item)}" @click="selectMe(item)">
+                        <td>
+                            <div>
+                                <p class="mt-2 mb-2">{{ item.noreg }}</p>
+                                <p class="mb-2" >
+                                    <v-chip label size="small">
+                                    {{ item.orderdate }}
+                                    </v-chip>
+                                </p>
+                            </div>
+                        </td>
+                        <td>
+                            <p>{{ item.name }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
     </div>
 </template>
     
 <style scoped>
-
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
 </style>
     
 <script type="module">
@@ -86,8 +85,8 @@
             isSelected(p) {
                 return p.id == this.$store.state.verification.selected_patient.id
             },
-            selectMe(c) {
-                console.log(c)
+            selectMe(data) {
+                this.$store.commit("verification/setSelectedPatient", data)
             }
         },
         wacth: {
diff --git a/result-verification/components/mainVerif.vue b/result-verification/components/mainVerif.vue
index a0632d1..fa53ba3 100644
--- a/result-verification/components/mainVerif.vue
+++ b/result-verification/components/mainVerif.vue
@@ -3,14 +3,12 @@
         <one-navbar></one-navbar>
         <v-main>
             <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+                <search-component></search-component>
                 <v-row>
-                    <v-col cols="12" md="12" sm="12" xs="12">
-                        <search-component></search-component>
-                    </v-col>
-                    <v-col cols="12" md="4" sm="12" xs="12">
+                    <v-col cols="12" md="3" sm="12" xs="12" class="mt-5">
                         <list-patient-component></list-patient-component>
                     </v-col>
-                    <v-col cols="12" md="8" sm="12" xs="12">
+                    <v-col cols="12" md="9" sm="12" xs="12" class="mt-5">
                         <detail-patient-component></detail-patient-component>
                     </v-col>
                 </v-row>
diff --git a/result-verification/components/searchPatient.vue b/result-verification/components/searchPatient.vue
index 3a34d8f..1e22941 100644
--- a/result-verification/components/searchPatient.vue
+++ b/result-verification/components/searchPatient.vue
@@ -1,116 +1,115 @@
 <template>
   <div>
-    <v-row>
-      <v-col cols="12">
-        <v-card class="bg-white rounded-lg pa-5">
-          <v-row>
-            <v-col cols="2">
-              <v-menu
-                v-model="menuStartDate"
-                :close-on-content-click="false"
-                transition="scale-transition"
-                offset-y
-                min-width="auto"
-                max-width="290px"
-              >
-                <template v-slot:activator="{ props  }">
-                  <v-text-field
-                    :model-value="formatDate()"
-                    label="Tanggal Mulai"
-                    prepend-inner-icon="mdi-calendar"
-                    hide-details
-                    readonly
-                    variant="outlined"
-                    v-bind="props"
-                  ></v-text-field>
-                </template>
-                <v-date-picker
-                  hide-header
-                  show-adjacent-months
-                  rounded="lg"
-                  color="primary"
-                  v-model="date"
-                  @update:modelValue="menuStartDate=false"
-                ></v-date-picker>
-              </v-menu>
-            </v-col>
-            <v-col cols="2">
-              <v-menu
-                v-model="menuEndDate"
-                :close-on-content-click="false"
-                transition="scale-transition"
-                offset-y
-                min-width="auto"
-                max-width="290px"
-              >
-                <template v-slot:activator="{ props  }">
-                  <v-text-field
-                    :model-value="formatDate()"
-                    label="Tanggal Selesai"
-                    prepend-inner-icon="mdi-calendar"
-                    hide-details
-                    readonly
-                    variant="outlined"
-                    v-bind="props"
-                  ></v-text-field>
-                </template>
-                <v-date-picker
-                  hide-header
-                  show-adjacent-months
-                  rounded="lg"
-                  color="primary"
-                  v-model="date"
-                  @update:modelValue="menuEndDate=false"
-                ></v-date-picker>
-              </v-menu>
-            </v-col>
-            <v-col cols="3">
-              <v-text-field 
-                label="No Reg / Nama" 
-                variant="outlined"
+    <v-container class="bg-white rounded-lg" fluid>
+      <v-row>
+        <v-col cols="3">
+          <div class="d-flex align-center ga-2">
+          <v-menu
+            v-model="menuStartDate"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+            max-width="290px"
+          >
+            <template v-slot:activator="{ props  }">
+              <v-text-field
+                :model-value="formatDate()"
+                label="Tanggal Mulai"
+                prepend-inner-icon="mdi-calendar"
                 hide-details
-                append-inner-icon="mdi-magnify"
+                readonly
+                variant="outlined"
+                v-bind="props"
               ></v-text-field>
-            </v-col>
-            <v-col cols="3">
-              <v-autocomplete
-                label="Grup Pemeriksaan"
-                variant="outlined"
+            </template>
+            <v-date-picker
+              hide-header
+              show-adjacent-months
+              rounded="lg"
+              color="primary"
+              v-model="date"
+              @update:modelValue="menuStartDate=false"
+            ></v-date-picker>
+          </v-menu>
+          <v-menu
+            v-model="menuEndDate"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+            max-width="290px"
+          >
+            <template v-slot:activator="{ props  }">
+              <v-text-field
+                :model-value="formatDate()"
+                label="Tanggal Selesai"
+                prepend-inner-icon="mdi-calendar"
                 hide-details
-                menu-icon="mdi-chevron-down"
-                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
-              ></v-autocomplete>
-            </v-col>
-            <v-col cols="2">
-              <div style="height: 100%;">
-                <v-row class="pt-3 justify-space-between">
-                  <div
-                    style="height: 100%;"
-                    class="rounded-lg bg-primary pa-2 mr-2 h-100"
-                  >
-                    <iconify-icon
-                      style="font-size: 2rem;"
-                      icon="fluent:search-20-regular"
-                    ></iconify-icon>
-                  </div>
-                  <div
-                    class="pt-3 pa-3"
-                  >
-                    <v-btn
-                      class="bg-primary-lighten"
-                      variant="tonal"
-                      color="primary"
-                    >
-                    HISTORY
-                  </v-btn>
-                  </div>
-                </v-row>
+                readonly
+                variant="outlined"
+                v-bind="props"
+              ></v-text-field>
+            </template>
+            <v-date-picker
+              hide-header
+              show-adjacent-months
+              rounded="lg"
+              color="primary"
+              v-model="date"
+              @update:modelValue="menuEndDate=false"
+            ></v-date-picker>
+          </v-menu>
+          </div>
+        </v-col>
+        <v-col cols="2.5">
+          <v-text-field 
+            label="No Reg / Nama" 
+            variant="outlined"
+            hide-details
+            append-inner-icon="mdi-magnify"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="2.5">
+          <v-autocomplete
+            label="Grup Pemeriksaan"
+            variant="outlined"
+            hide-details
+            menu-icon="mdi-chevron-down"
+            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+          ></v-autocomplete>
+        </v-col>
+        <v-col cols="1">
+            <v-btn 
+                variant="flat"
+                small
+                style="height: 100%;"
+                class="bg-primary rounded-lg">
+                <iconify-icon
+                    style="font-size: 2rem;"
+                    icon="fluent:search-20-regular"
+                ></iconify-icon>
+            </v-btn>
+          </v-col>
+        <v-col cols="3">
+          <div style="height: 100%;">
+            <v-row class="pt-3 justify-end">
+              <div
+                class="pt-3 pa-3"
+              >
+                <v-btn
+                  class="bg-primary-lighten"
+                  variant="tonal"
+                  color="primary"
+                >
+                HISTORY
+              </v-btn>
               </div>
-            </v-col>
-          </v-row>
-        </v-card>
-      </v-col>
-    </v-row>
+            </v-row>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
     
@@ -129,7 +128,15 @@
         };
     },
     computed: {
-
+      date: {
+          get() {
+              return this.$store.state.verification.date;
+          },
+          set(val) {
+              console.log(val)
+              this.$store.commit("verification/setDate", val);
+          },
+      },
     },
     methods: {
       formatDate() {
diff --git a/result-verification/modules/verification.js b/result-verification/modules/verification.js
index b298bf8..cee331a 100644
--- a/result-verification/modules/verification.js
+++ b/result-verification/modules/verification.js
@@ -3,6 +3,7 @@ const store = {
     namespaced: true,
     state() {
         return {
+            date: new Date(),
             patients: [
                 {
                     id: 1,
@@ -2078,6 +2079,9 @@ const store = {
         };
     },
     mutations: {
+        setDate(state, data) {
+            state.date = data;
+        },
         setPatients(state, data)  {
             state.patients = data
         },