feature slicing menu elektromedis record verification

elektromedis-record-verification/components/left.vue

@@ -0,0 +1,229 @@
+<template>
+    <div>
+      <v-row>
+        <v-col cols="12">
+          <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="3">
+                    <v-text-field
+                        :label="$t('message.left.noreg')"
+                        variant="outlined"
+                        hide-details
+                        append-inner-icon="mdi-magnify"
+                        ></v-text-field
+                    >
+                </v-col>
+                <v-col cols="3">
+                        <v-autocomplete
+                        :label="$t('message.left.station')"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+                        ></v-autocomplete>
+                </v-col>
+                <v-col cols="5"></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-row>
+          </v-container>
+        </v-col>
+        <v-col cols="12">
+          <v-container class="bg-white rounded-lg" fluid>
+            <v-data-table
+              :items="xpatients"
+              :headers="headers"
+              return-object
+              hide-default-footer
+            >
+              <template
+                v-slot:item="{ item }"
+              >
+                <tr>
+                  <td class="text-center">
+                    <p class="font-weight-medium mt-2 mb-1">{{ item.noreg }}</p>
+                    <p class="mb-2">
+                        <v-chip class="ma-1" size="small" label>
+                            {{ item.orderdate }}
+                        </v-chip>
+                    </p>
+                  </td>
+                  <td class="text-left">
+                    <p>{{ item.name }}</p>
+                  </td>
+                  <td class="text-left">
+                    <p>{{ item.test }}</p>
+                    <p>{{ item.doctorname }}</p>
+                  </td>
+                  <td class="text-center">
+                    <div class="d-flex justify-center">
+                        <div
+                            class="pointer"
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                        >
+                            <iconify-icon
+                                class="text-primary"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:edit-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            class="pointer"
+                            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"
+                            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>
+                  <td class="text-center">
+                    <div class="d-flex justify-center">
+                        <div
+                            class="pointer"
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                        >
+                            <iconify-icon
+                                class="text-grey"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:arrow-hook-up-left-24-regular"
+                            ></iconify-icon>
+                        </div>
+                        <div
+                            class="pointer"
+                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
+                        >
+                            <iconify-icon
+                                class="text-green"
+                                style="font-size: 1.5rem;"
+                                icon="fluent:checkmark-starburst-24-regular"
+                            ></iconify-icon>
+                        </div>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </v-data-table>
+          </v-container>
+        </v-col>
+      </v-row>
+    </div>
+  </template>
+  
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>
+
+  <script type="module">
+    export default {
+      name: "LeftComponent",
+      components: {},
+      mounted() {},
+      data() {
+        return {
+          menu: false,
+          visible: false,
+          headers: [
+            {
+              title: this.$t('message.left.table.noreg'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "15%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.left.table.name'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "25%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.left.table.test'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "25%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.left.table.requirement'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "25%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.left.table.action'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "10%",
+              class: "font-weight-bold",
+            }
+          ],
+        };
+      },
+      computed: {
+        // Akses state dari store
+        xpatients() {
+            return this.$store.state.patient.patients
+        },
+        selected_patient: {
+            get() {
+                return this.$store.state.patient.selected_patient
+            },
+            set(val) {
+                this.$store.commit("patient/setSelectedPatient", val)
+            }
+        }
+      },
+      methods: {
+        // Dispatch action ke store
+        formatDate() {
+          if (!this.date) return null;
+  
+          return moment(this.date).format("DD-MM-YYYY");
+        },
+        deFormatedDate(date) {
+          if (!date) return null;
+  
+          const [day, month, year] = date.split("-");
+          return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+        },
+        increment() {
+          this.$store.dispatch("increment");
+        },
+      },
+    };
+  </script>
+  
+  <style scoped></style>
+  

elektromedis-record-verification/components/main.vue

@@ -0,0 +1,68 @@
+<template>
+    <v-app id="inspire">
+      <one-navbar></one-navbar>
+      <v-main>
+        <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+          <v-row>
+            <v-col cols="12" md="8" sm="12" xs="12">
+              <one-left></one-left>
+            </v-col>
+            <v-col cols="12" md="4" sm="12" xs="12">
+              <one-right></one-right>
+            </v-col>
+          </v-row>
+        </div>
+      </v-main>
+    </v-app>
+  </template>
+  
+  <script type="module">
+    import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+    import LeftComponent from "./left.vue";
+    import RightComponent from "./right.vue";
+    export default {
+      name: "Specimen",
+      components: {
+        "one-navbar": NavbarComponent,
+        "one-left": LeftComponent,
+        "one-right": RightComponent,
+      },
+      mounted() {},
+      data() {
+        return {
+          visible: false,
+        };
+      },
+      computed: {
+        // Akses state dari store
+        count() {
+          return this.$store.state.login.count;
+        },
+        email: {
+          get() {
+            return this.$store.state.login.email;
+          },
+          set(val) {
+            this.$store.commit("login/setEmail", val);
+          },
+        },
+        password: {
+          get() {
+            return this.$store.state.login.password;
+          },
+          set(val) {
+            this.$store.commit("login/setPassword", val);
+          },
+        },
+      },
+      methods: {
+        // Dispatch action ke store
+        increment() {
+          this.$store.dispatch("increment");
+        },
+      },
+    };
+  </script>
+  
+  <style scoped></style>
+  

elektromedis-record-verification/components/right.vue

@@ -0,0 +1,170 @@
+<template>
+    <div>
+      <v-row>
+        <v-col cols="12">
+          <v-container class="bg-white rounded-lg" fluid>
+            <v-row>
+                <v-col cols="5">
+                    <v-text-field
+                        :label="$t('message.right.noreg')"
+                        variant="outlined"
+                        hide-details
+                        append-inner-icon="mdi-magnify"
+                        ></v-text-field
+                    >
+                </v-col>
+                <v-col cols="5">
+                        <v-autocomplete
+                        :label="$t('message.right.station')"
+                        variant="outlined"
+                        hide-details
+                        menu-icon="mdi-chevron-down"
+                        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+                        ></v-autocomplete>
+                </v-col>
+                <v-col cols="2">
+                    <v-btn 
+                        variant="flat"
+                        small
+                        style="height: 100%;"
+                        class="bg-primary rounded-lg">
+                        <iconify-icon
+                            style="font-size: 2rem;"
+                            icon="fluent:send-24-regular"
+                        ></iconify-icon>
+                    </v-btn>
+                </v-col>
+            </v-row>
+          </v-container>
+        </v-col>
+        <v-col cols="12">
+          <v-container class="bg-white rounded-lg" fluid>
+            <v-data-table
+                v-model="selectedItems"
+                :items="xpatientright"
+                :headers="headers"
+                return-object
+                hide-default-footer
+            >
+              <template
+                v-slot:item="{ item, isSelected, toggleSelect, internalItem }"
+              >
+                <tr>
+                    <td class="px-2">
+                        <v-checkbox-btn
+                        :model-value="isSelected(internalItem)"
+                        color="primary"
+                        @update:model-value="toggleSelect(internalItem)"
+                        ></v-checkbox-btn>
+                    </td>
+                  <td class="text-center">
+                    <p class="font-weight-medium mt-2 mb-1">{{ item.noreg }}</p>
+                    <p class="mb-2">
+                        <v-chip class="ma-1" size="small" label>
+                            {{ item.orderdate }}
+                        </v-chip>
+                    </p>
+                  </td>
+                  <td class="text-center">
+                    <p>{{ item.name }}</p>
+                  </td>
+                  <td class="text-center">
+                    <p>{{ item.test }}</p>
+                  </td>
+                </tr>
+              </template>
+            </v-data-table>
+          </v-container>
+        </v-col>
+      </v-row>
+    </div>
+  </template>
+  
+<style scoped>
+    .pointer {
+        cursor: pointer;
+    }
+</style>
+
+  <script type="module">
+    export default {
+      name: "RightComponent",
+      components: {},
+      mounted() {},
+      data() {
+        return {
+          menu: false,
+          visible: false,
+          selectedItems: [],
+          headers: [
+            {
+              title: "",
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "15%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.right.table.noreg'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "25%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.right.table.name'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "30%",
+              class: "font-weight-bold",
+            },
+            {
+              title: this.$t('message.right.table.test'),
+              align: "center",
+              sortable: false,
+              key: "name",
+              width: "30%",
+              class: "font-weight-bold",
+            }
+          ],
+        };
+      },
+      computed: {
+        // Akses state dari store
+        xpatientright() {
+            return this.$store.state.patient.patientright
+        },
+        selected_patientright: {
+            get() {
+                return this.$store.state.patient.selected_patientright
+            },
+            set(val) {
+                this.$store.commit("patient/setSelectedPatientRight", val)
+            }
+        }
+      },
+      methods: {
+        // Dispatch action ke store
+        formatDate() {
+          if (!this.date) return null;
+  
+          return moment(this.date).format("DD-MM-YYYY");
+        },
+        deFormatedDate(date) {
+          if (!date) return null;
+  
+          const [day, month, year] = date.split("-");
+          return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+        },
+        increment() {
+          this.$store.dispatch("increment");
+        },
+      },
+    };
+  </script>
+  
+  <style scoped></style>
+  

elektromedis-record-verification/index.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WESTONE</title>
+    <!-- Vuetify CSS -->
+    <link href="../css/vuetify.css" rel="stylesheet" />
+    <!-- Local Stylesheet for Fonts -->
+    <link rel="stylesheet" href="../css/styles.css" />
+    <link href="../css/materialdesignicon.css" rel="stylesheet" />
+    <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- Moment -->
+    <script src="../libraries/moment.js"></script>
+    <!-- Vue.js -->
+    <!-- DEV -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- PROD -->
+    <!-- <script src="../libraries/vue3.4.36.global.prod.js"></script> -->
+    <!-- Vuex -->
+    <script src="../libraries/vuex.js"></script>
+    <!-- Vuetify -->
+    <script src="../libraries/vuetify3.js"></script>
+    <!-- vue-i18n -->
+    <script src="../libraries/vue-i18n.global.js"></script>
+    <!-- Axios -->
+    <script src="../libraries/axios.js"></script>
+
+    <script src="../globalscript/theme.js"></script>
+    <!-- loader single file component -->
+    <script src="../libraries/vue3-sfc-loader.js"></script>
+    <script src="./language.js"></script>
+
+    <script type="module">
+      const { loadModule } = window["vue3-sfc-loader"];
+
+      import patient from "./modules/patient.js";
+      import system from "../globalstore/globalstore.js";
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          patient: patient,
+        },
+      });
+      const options = {
+        moduleCache: {
+          vue: Vue,
+        },
+        getFile(url) {
+          return fetch(url).then((response) =>
+            response.ok ? response.text() : Promise.reject(response)
+          );
+        },
+        addStyle(textContent) {
+          const style = document.createElement("style");
+          style.textContent = textContent;
+          const ref = document.head.getElementsByTagName("style")[0] || null;
+          document.head.insertBefore(style, ref);
+        },
+      };
+      // Locale messages
+      const messages = CustomMessages;
+
+      // Get the browser's preferred language
+      const browserLocale = navigator.language || navigator.languages[0];
+
+      // Initialize vue-i18n
+      const i18n = VueI18n.createI18n({
+        locale: browserLocale.startsWith("id") ? "id" : "en", // Set locale based on browser setting
+        fallbackLocale: "en", // Set fallback locale
+        messages, // Set locale messages
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {};
+        },
+
+        template: `
+            <main-verif-component></main-verif-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-verif-component": "./components/main.vue",
+      };
+      Promise.all(
+        Object.entries(components).map(([name, path]) => {
+          return loadModule(path, options).then((component) => {
+            app.component(name, component);
+          });
+        })
+      )
+        .then(() => {
+          app.mount("#app");
+        })
+        .catch((error) => {
+          console.error("Error loading components:", error);
+        });
+    </script>
+  </body>
+</html>

elektromedis-record-verification/language.js

@@ -0,0 +1,50 @@
+var CustomMessages = {
+    en: {
+        message: {
+            left: {
+                noreg: "No. Reg/Name",
+                station: "Station",
+                table: {
+                    noreg: "NO REG",
+                    name: "NAME",
+                    test: "TEST",
+                    requirement: "REQUIREMENT",
+                    action: "ACTION"
+                }
+            },
+            right: {
+                noreg: "No. Reg/Name",
+                station: "Station",
+                table: {
+                    noreg: "NO REG",
+                    name: "NAME",
+                    test: "TEST"
+                }
+            }
+        },
+    },
+    id: {
+        message: {
+            left: {
+                noreg: "No. Reg/Nama",
+                station: "Stasiun",
+                table: {
+                    noreg: "NO REG",
+                    name: "NAMA",
+                    test: "PEMERIKSAAN",
+                    requirement: "PERSYARATAN",
+                    action: "ACTION"
+                }
+            },
+            right: {
+                noreg: "No. Reg/Nama",
+                station: "Stasiun",
+                table: {
+                    noreg: "NO REG",
+                    name: "NAMA",
+                    test: "PEMERIKSAAN"
+                }
+            }
+        },
+    },
+};

elektromedis-record-verification/modules/patient.js

@@ -0,0 +1,62 @@
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            date: new Date(),
+            patients: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02",
+                    test: "ECG",
+                    doctorname: "-"
+                },
+                {
+                    id: 2,
+                    name: "Tn. YACOBA",
+                    noreg: "055000036LA",
+                    orderdate: "01-08-2024 15:10",
+                    test: "EKG",
+                    doctorname: "A. A. AYU KUSUMAYANTI, dr."
+                }
+            ],
+            selected_patient: {},
+            patientright: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02",
+                    test: "ECG",
+                    doctorname: "-",
+                    flag: true
+                },
+            ],
+            selected_patientright: {},
+
+        };
+    },
+    mutations: {
+        setDate(state, data) {
+            state.date = data;
+        },
+        setPatients(state, data)  {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        },
+        setPatientRight(state, data)  {
+            state.patientright = data
+        },
+        setSelectedPatientRight(state, data) {
+            state.selected_patientright = data
+        },
+    },
+    actions: {
+
+    }
+};
+export default store