From 08e181f3ce73bfaaa8f614c9787c110f6b231975 Mon Sep 17 00:00:00 2001
From: Hanan Askarim <askarimmm.hanan@gmail.com>
Date: Mon, 19 Aug 2024 15:44:22 +0700
Subject: [PATCH] fix slicing result entry

---
 result-entry/components/detailPatient.vue | 252 ++++++++++-----------
 result-entry/components/listPatient.vue   |  75 ++++---
 result-entry/components/mainEntry.vue     |   8 +-
 result-entry/components/searchPatient.vue | 256 +++++++++++-----------
 4 files changed, 293 insertions(+), 298 deletions(-)

diff --git a/result-entry/components/detailPatient.vue b/result-entry/components/detailPatient.vue
index b824794..7a6fd99 100644
--- a/result-entry/components/detailPatient.vue
+++ b/result-entry/components/detailPatient.vue
@@ -1,136 +1,138 @@
 <template>
     <div>
-        <v-row>
-            <v-col cols="12">
-                <v-container class="bg-white rounded-lg">
+        <v-container class="bg-white rounded-lg" fluid>
 
-                    <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-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" v-if="item.is_result == 'Y'">
-                                    <div class="pt-3 pb-3">
-                                        <v-text-field 
-                                            density="compact"
-                                            label="" 
-                                            variant="outlined"
-                                            hide-details
-                                            auto-grow
-                                        ></v-text-field>
-                                    </div>
-                                </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'">
-                                    <div class="d-flex justify-space-between">
-                                        <div>
-                                            {{ item.methode_name }}
-                                        </div>
-                                        <v-btn
-                                            variant="text"
-                                            small
-                                            color="primary"
-                                            class="bg-primary-lightens ma-0 float-left">
-                                            <iconify-icon
-                                                style="font-size: 2rem;"
-                                                icon="fluent:edit-20-regular"
-                                            ></iconify-icon>
-                                        </v-btn>
-                                    </div>
-                                </td>
-                                <td class="text-left" v-if="item.is_result == 'Y'">
-                                    <div class="pt-3 pb-3">
-                                        <v-text-field 
-                                            density="compact"
-                                            label="" 
-                                            variant="outlined"
-                                            hide-details
-                                            auto-grow
-                                        ></v-text-field>
-                                    </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'">
+                            <div class="pt-3 pb-3">
+                                <v-text-field 
+                                    density="compact"
+                                    label="" 
+                                    variant="outlined"
+                                    hide-details
+                                    auto-grow
+                                ></v-text-field>
+                            </div>
+                        </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'">
+                            <div class="d-flex justify-space-between align-center">
+                                <div>
+                                    {{ item.methode_name }}
+                                </div>
+                                <v-btn
+                                    variant="text"
+                                    small
+                                    color="primary"
+                                    class="bg-primary-lightens ma-0 float-left">
+                                    <iconify-icon
+                                        style="font-size: 1.5rem;"
+                                        icon="fluent:edit-20-regular"
+                                    ></iconify-icon>
+                                </v-btn>
+                            </div>
+                        </td>
+                        <td class="text-left" v-if="item.is_result == 'Y'">
+                            <div class="pt-3 pb-3">
+                                <v-text-field 
+                                    density="compact"
+                                    label="" 
+                                    variant="outlined"
+                                    hide-details
+                                    auto-grow
+                                ></v-text-field>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+
+        </v-container>
     </div>
 </template>
     
 <style scoped>
+    .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">
@@ -168,7 +170,7 @@
                         align: 'start',
                         key: 'name', 
                         sortable: false,
-                        width: "15%",
+                        width: "10%",
                         title: "NILAI NORMAL",
                         class: "bg-secondary-lighten font-weight-bold",
                     },
@@ -184,7 +186,7 @@
                         align: 'start',
                         key: 'name', 
                         sortable: false,
-                        width: "15%",
+                        width: "20%",
                         title: "METODE",
                         class: "bg-secondary-lighten font-weight-bold",
                     },
diff --git a/result-entry/components/listPatient.vue b/result-entry/components/listPatient.vue
index 2231771..68f91cb 100644
--- a/result-entry/components/listPatient.vue
+++ b/result-entry/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.entry.selected_patient.id
             },
-            selectMe(c) {
-                console.log(c)
+            selectMe(data) {
+                this.$store.commit("entry/setSelectedPatient", data)
             }
         },
         wacth: {
diff --git a/result-entry/components/mainEntry.vue b/result-entry/components/mainEntry.vue
index dd8f1a4..c2c5e77 100644
--- a/result-entry/components/mainEntry.vue
+++ b/result-entry/components/mainEntry.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-entry/components/searchPatient.vue b/result-entry/components/searchPatient.vue
index 13b7154..12586da 100644
--- a/result-entry/components/searchPatient.vue
+++ b/result-entry/components/searchPatient.vue
@@ -1,143 +1,139 @@
 <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="2">
-                <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">
-                <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"
+      <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
+                    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-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>
+            </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">
+                <v-btn fab 
+                    variant="tonal"
                     small
-                    style="height: 100%;"
-                    class="bg-primary rounded-lg">
+                    style="height: auto;"
+                    color="secondary"
+                    class="bg-secondary-lighten rounded-lg mr-2">
                     <iconify-icon
                         style="font-size: 2rem;"
-                        icon="fluent:search-20-regular"
+                        icon="fluent:notepad-person-24-regular"
                     ></iconify-icon>
                 </v-btn>
-              </v-col>
-              <v-col cols="3">
-                <div style="height: 100%;">
-                  <v-row class="pt-3 justify-end">
-                    <v-btn fab 
-                        variant="tonal"
-                        small
-                        style="height: auto;"
-                        color="secondary"
-                        class="bg-secondary-lighten rounded-lg mr-2">
-                        <iconify-icon
-                            style="font-size: 2rem;"
-                            icon="fluent:notepad-person-24-regular"
-                        ></iconify-icon>
-                    </v-btn>
 
-                    <div
-                      class="pt-3 pa-3"
+                <div
+                  class="pt-3 pa-3"
+                >
+                    <v-btn
+                        small
+                        class="bg-primary-lighten"
+                        variant="tonal"
+                        color="primary"
                     >
-                        <v-btn
-                            small
-                            class="bg-primary-lighten"
-                            variant="tonal"
-                            color="primary"
-                        >
-                            HISTORY
-                        </v-btn>
-                    </div>
-                    <div
-                      class="pt-3 pa-3"
-                    >
-                        <v-btn
-                            variant="flat"
-                            small
-                            class="bg-primary text-white"
-                        >
-                            SIMPAN
-                        </v-btn>
-                    </div>
-                  </v-row>
+                        HISTORY
+                    </v-btn>
                 </div>
-              </v-col>
-            </v-row>
-          </v-card>
-        </v-col>
-      </v-row>
+                <div
+                  class="pt-3 pa-3"
+                >
+                    <v-btn
+                        variant="flat"
+                        small
+                        class="bg-primary text-white"
+                    >
+                        SIMPAN
+                    </v-btn>
+                </div>
+              </v-row>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
     </div>
   </template>