changes

app/components/pos/CartItem.vue

@@ -0,0 +1,71 @@
+<script setup>
+const props = defineProps({
+  cartItem: Object,
+});
+const { $deleteapi, $numtoString, $snackbar } = useNuxtApp();
+const showConfirmModal = ref();
+
+function openConfirmModal() {
+  showConfirmModal.value = {
+    component: "dialog/Confirm",
+    width: "500px",
+    height: "auto",
+    vbind: {
+      content: `Bạn xác nhận xoá sản phẩm <b>${props.cartItem.imei__variant__product__name}</b> khỏi giỏ hàng?`,
+      onModalevent: removeFromCart,
+    },
+  };
+}
+
+const getCart = inject("getCart");
+async function removeFromCart() {
+  await $deleteapi("Cart_Item", props.cartItem.id);
+  $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
+  getCart();
+}
+</script>
+
+<template>
+  <div class="card m-0">
+    <div class="card-content p-4 is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
+      <div class="is-flex is-gap-4 is-justify-content-space-between is-align-items-center is-flex-grow-1">
+        <div class="media m-0">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img :src="cartItem.imei__variant__image__path" />
+            </figure>
+          </div>
+          <div class="media-content">
+            <p class="font-semibold fs-15">{{ cartItem.imei__variant__product__name }}</p>
+            <p class="fs-13 has-text-grey">
+              <span>{{ cartItem.imei__variant__ram__code }}</span>
+              <span> • </span>
+              <span>{{ cartItem.imei__variant__internal_storage__code }}</span>
+              <span> • </span>
+              <span>{{ cartItem.imei__variant__color__name }}</span>
+            </p>
+          </div>
+        </div>
+        <p class="has-text-primary-50 font-medium">
+          {{ $numtoString(cartItem.imei__variant__price, { hasUnit: true }) }}
+        </p>
+      </div>
+      <button
+        @click="openConfirmModal"
+        class="button is-danger is-light"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:delete-outline-rounded"
+            :size="18"
+          />
+        </span>
+      </button>
+    </div>
+    <Modal
+      v-if="showConfirmModal"
+      v-bind="showConfirmModal"
+      @close="showConfirmModal = undefined"
+    />
+  </div>
+</template>