Feat: List Patient

list-patient/components/barcodeDialog.vue

@@ -0,0 +1,166 @@
+<template>
+  <v-dialog v-model="menuBarcode" width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3 elevation-6">
+        <v-card-title>
+          {{ $t("message.barcode.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text class="pt-5">
+        <v-data-table
+          :headers="headers"
+          :items="printItem"
+          hide-default-footer
+          height="200"
+        >
+          <template v-slot:headers="{ columns }">
+            <tr>
+              <template v-for="column in columns" :key="column.key">
+                <td
+                  :class="[
+                    'bg-primary-lighten',
+                    column.class,
+                    { 'd-flex justify-center': column.key === 'checkbox' },
+                  ]"
+                  :style="{ minWidth: column.width, textAlign: column.align }"
+                >
+                  <template v-if="column.key === 'checkbox'">
+                    <v-checkbox
+                      v-model="allSelected"
+                      color="primary"
+                      :indeterminate="someSelected"
+                      @update:modelValue="selectAll(!allSelected)"
+                    ></v-checkbox>
+                  </template>
+                  <template v-else>
+                    <span>{{ column.title }}</span>
+                  </template>
+                </td>
+              </template>
+            </tr>
+          </template>
+          <template v-slot:item="{ item }">
+            <tr>
+              <td class="d-flex justify-center">
+                <v-checkbox
+                  v-model="selected"
+                  color="primary"
+                  :value="item"
+                  @update:modelValue="onSomeSelected()"
+                ></v-checkbox>
+              </td>
+              <td>
+                <p class="font-weight-medium">{{ item.specimen }}</p>
+              </td>
+              <td>
+                <p class="font-weight-medium">{{ item.barcode }}</p>
+              </td>
+              <td>
+                <p class="w-100 d-flex justify-center cursor-pointer">
+                  <iconify-icon
+                    style="font-size: 1.5rem; color: #00bcd4"
+                    icon="fluent:print-48-regular"
+                  ></iconify-icon>
+                </p>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </v-card-text>
+
+      <v-card-actions class="d-flex justify-space-between px-7">
+        <v-btn
+          :text="$t('message.barcode.close')"
+          variant="text"
+          class="text-error"
+          @click="onCloseMenuBarcode()"
+        ></v-btn>
+        <div>
+          <v-btn
+            :text="$t('message.barcode.printRobo')"
+            variant="flat"
+            class="bg-info text-white"
+            @click="onCloseMenuBarcode()"
+          ></v-btn>
+          <v-btn
+            :text="$t('message.barcode.printSelected')"
+            variant="flat"
+            class="bg-secondary-darken text-white"
+            @click="onCloseMenuBarcode()"
+          ></v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "BarcodeDialog",
+  data() {
+    return {
+      selected: [],
+      allSelected: false,
+      someSelected: false,
+      headers: [
+        {
+          title: "",
+          key: "checkbox",
+          align: "center",
+          sortable: false,
+          width: "10%",
+          class: "",
+        },
+        {
+          title: this.$t("message.barcode.specimen"),
+          key: "specimen",
+          align: "start",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.barcode.barcode"),
+          key: "barcode",
+          align: "start",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.barcode.action"),
+          key: "action",
+          align: "center",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+      ],
+    };
+  },
+  computed: {
+    menuBarcode() {
+      return this.$store.state.collection.menuBarcode;
+    },
+    printItem() {
+      return this.$store.state.collection.printItem;
+    },
+  },
+  methods: {
+    onCloseMenuBarcode() {
+      this.$store.commit("setMenuBarcode", false);
+    },
+    selectAll(boolean) {
+      if (!boolean) this.selected = this.printItem;
+      else this.selected = [];
+    },
+    onSomeSelected() {
+      this.someSelected =
+        this.selected.length !== 0 &&
+        this.selected.length !== this.printItem.length;
+      if (this.selected.length === this.printItem.length)
+        this.allSelected = true;
+    },
+  },
+};
+</script>