web/app/components/pos/ChooseIMEIModal.vue

<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, $insertapi, $snackbar } = useNuxtApp();
const emit = defineEmits(["close"]);

const isLoading = ref(false);
const imeis = ref([]);
const selectedImeis = ref([]);

function toggleSelected(imeiRec) {
  if (selectedImeis.value.find((i) => i.imei === imeiRec.imei)) {
    remove(selectedImeis.value, (i) => i.imei === imeiRec.imei);
  } else {
    selectedImeis.value.push(imeiRec);
  }
}

const cartItems = inject("cartItems");
const getCart = inject("getCart");
const isAdding = ref(false);
async function addToCart() {
  try {
    isAdding.value = true;
    console.log("store.customer", store.customer);
    let cart = await $getdata("Cart", {
      filter: { customer: store.customer },
      first: true,
    });

    if (!cart) {
      const newCart = await $insertapi("Cart", {
        data: { customer: store.customer },
        notify: false,
      });

      cart = newCart;
    }

    const cartItemsPayload = selectedImeis.value.map((imeiRec) => ({
      cart: cart.id,
      imei: imeiRec.id,
      quantity: 1,
      total_price: imeiRec.variant__price,
    }));
    const newCartItems = await $insertapi("Cart_Item", {
      data: cartItemsPayload,
      notify: false,
    });

    $snackbar(`Đã thêm ${newCartItems.length} sản phẩm vào giỏ hàng`, "Success");
    getCart();
    emit("close");
  } catch (error) {
    console.error(error);
    $snackbar("Đã có lỗi khi thêm sản phẩm vào giỏ hàng", "Error");
  } finally {
    isAdding.value = false;
  }
}

async function fetchImeis() {
  isLoading.value = true;
  const imeisFetched = await $getdata("IMEI", {
    filter: { variant: props.variant.id },
  });

  imeis.value = imeisFetched.filter((imeiRec) => {
    const alreadyInCart = cartItems.value.find((cartItem) => cartItem.imei === imeiRec.id);
    return !alreadyInCart;
  });

  isLoading.value = false;
}
onMounted(fetchImeis);
</script>

<template>
  <div
    v-if="isLoading"
    class="is-flex is-justify-content-center"
  >
    <Icon
      name="svg-spinners:180-ring-with-bg"
      :size="26"
      class="has-text-primary"
    />
  </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 có sẵn 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="selectedImeis.find((i) => i.imei === imeiRec.imei) && 'is-selected'"
          @click="toggleSelected(imeiRec)"
        >
          <td class="is-narrow">
            <label class="checkbox">
              <input
                type="checkbox"
                :checked="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>
            <span :class="['tag is-light', imeiRec.deleted ? 'is-danger' : 'is-success']">{{
              imeiRec.deleted ? "Không có sẵn" : "Có sẵn"
            }}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="is-flex is-justify-content-end">
      <button
        @click="addToCart"
        :class="['button is-primary', isAdding && 'is-loading']"
        :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>