changes

app/components/pos/ChooseIMEIModal.vue

@@ -0,0 +1,135 @@
+<script setup>
+import AddIMEIForm from "@/components/imports/AddIMEIForm.vue";
+import ImportData from "@/components/parameter/ImportData.vue";
+import { remove } from "es-toolkit";
+
+const props = defineProps({
+  variant: Object,
+});
+const store = useStore();
+const { $getdata } = useNuxtApp();
+const emit = defineEmits(["close"]);
+
+const isLoading = ref(false);
+const imeis = ref([]);
+const selectedImeis = ref([]);
+
+function toggleSelected(imeiRec) {
+  if (
+    store.selectedImeis.find((i) => i.imei === imeiRec.imei) ||
+    selectedImeis.value.find((i) => i.imei === imeiRec.imei)
+  ) {
+    remove(selectedImeis.value, (i) => i.imei === imeiRec.imei);
+  } else {
+    selectedImeis.value.push(imeiRec);
+  }
+}
+
+function addToCart() {
+  store.selectedImeis = [...store.selectedImeis, ...selectedImeis.value];
+  emit("close");
+}
+
+async function fetchImeis() {
+  isLoading.value = true;
+  const imeisFetched = await $getdata("IMEI", {
+    filter: { variant: props.variant.id },
+  });
+
+  imeis.value = imeisFetched;
+  isLoading.value = false;
+}
+onMounted(fetchImeis);
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="is-flex is-justify-content-center"
+  >
+    <Icon
+      name="svg-spinners:90-ring"
+      :size="26"
+      class="has-text-grey-light"
+    />
+  </div>
+  <div v-else-if="imeis.length === 0">
+    <p class="mt-6 mb-8 has-text-centered">Sản phẩm không có IMEI nào.</p>
+    <div class="block">
+      <AddIMEIForm
+        :variant="variant"
+        @created="fetchImeis"
+      />
+    </div>
+    <div class="block">
+      <ImportData
+        code="imeis"
+        @close="fetchImeis"
+      />
+    </div>
+  </div>
+  <template v-else>
+    <table class="table is-hoverable is-fullwidth mb-2 fs-13">
+      <thead>
+        <tr>
+          <th></th>
+          <th>STT</th>
+          <th>IMEI</th>
+          <th>Trạng thái</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(imeiRec, i) in imeis"
+          :key="imeiRec.id"
+          class="is-clickable"
+          :class="
+            (store.selectedImeis.find((i) => i.imei === imeiRec.imei) ||
+              selectedImeis.find((i) => i.imei === imeiRec.imei)) &&
+            'is-selected'
+          "
+          @click="toggleSelected(imeiRec)"
+        >
+          <td class="is-narrow">
+            <label class="checkbox">
+              <input
+                type="checkbox"
+                :checked="
+                  store.selectedImeis.find((i) => i.imei === imeiRec.imei) ||
+                  selectedImeis.find((i) => i.imei === imeiRec.imei)
+                "
+              />
+            </label>
+          </td>
+          <td class="is-narrow">{{ i + 1 }}</td>
+          <td class="is-family-monospace">{{ imeiRec.imei }}</td>
+          <td>{{ imeiRec.deleted ? "Không có sẵn" : "Có sẵn" }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="is-flex is-justify-content-end">
+      <button
+        @click="addToCart"
+        class="button is-primary"
+        :disabled="selectedImeis.length === 0"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:add-rounded"
+            :size="18"
+          />
+        </span>
+        <span>
+          <span>Thêm vào giỏ</span>
+          <span v-if="selectedImeis.length > 0"> ({{ selectedImeis.length }})</span>
+        </span>
+      </button>
+    </div>
+  </template>
+</template>
+<style scoped>
+.table tr.is-selected {
+  --bulma-table-row-active-background-color: var(--bulma-primary-95);
+  color: inherit;
+}
+</style>