coba add store

specimen-collection/components/left.vue

@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
+                <h3 class="primary-lighten">PASIEN</h3>
+            </div>
+            <v-data-table
+                v-model="selected_patients"
+                :items="patients"
+                :headers="headers"
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:item="{ item }">
+                    <tr @click="selectItem(item)" v-bind:class="{'bg-primary-lighten':isItemSelected(item)}">
+                        <td>
+                            <p class="font-weight-medium">{{ item.tanggal }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.noreg }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.kelpelanggan }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.nama }}</p>
+                        </td>
+                        <td>
+                            <p class="font-weight-medium">{{ item.status }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "leftcomp",
+    components: {},
+    mounted() {
+        
+    },
+    data() {
+        return {
+            menu: false,
+            visible: false,
+            selectedItems: [],
+            headers: [
+                {
+                    title: "TANGGAL",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "NO. REG",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "KEL. PELANGGAN",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "NAMA",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: "STATUS",
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "20%",
+                    class: "font-weight-bold",
+                },
+            ],
+        };
+    },
+    computed: {
+        patients() {
+            return this.$store.state.collection.patients
+        },
+        selected_patients: {
+            get() {
+                return this.$store.state.collection.selected_patients
+            },
+            set(data) {
+                this.$store.commit("setSelectedPatients", data)
+            }
+        }
+    },
+    methods: {
+        selectItem(data) {
+            this.$store.commit("setSelectedPatients", data);
+        },
+        isItemSelected(data) {
+            return data.noreg === this.$store.state.collection.selected_patients.noreg
+        }
+    },
+};
+</script>
+
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>