changes

app/components/pos/ProductCard.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { remove } from "es-toolkit";
+
+const props = defineProps({
+  imei: Object,
+});
+const { $copyToClipboard, $numtoString, $snackbar } = useNuxtApp();
+const store = useStore();
+function removeFromCart() {
+  remove(store.selectedImeis, (imeiRec) => imeiRec.id === props.imei.id);
+  $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
+}
+</script>
+
+<template>
+  <div class="card m-0">
+    <div class="card-content p-4 is-flex is-gap-3 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="imei.variant__image__path" />
+            </figure>
+          </div>
+          <div class="media-content">
+            <p class="font-bold fs-15">{{ imei.variant__product__name }}</p>
+            <p class="fs-13">
+              <span>{{ imei.variant__ram__code }}</span>
+              <span> • </span>
+              <span>{{ imei.variant__internal_storage__code }}</span>
+              <span> • </span>
+              <span>{{ imei.variant__color__name }}</span>
+            </p>
+            <div class="fs-13 is-flex is-gap-0.5 is-align-items-center">
+              <span class="is-family-monospace">IMEI: {{ imei.imei }}</span>
+              <button
+                class="button is-small size-7 p-0 is-primary is-light is-rounded"
+                @click="$copyToClipboard(imei.imei)"
+              >
+                <span class="icon">
+                  <Icon
+                    name="material-symbols:content-copy-outline-rounded"
+                    :size="14"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <p class="has-text-primary-50 font-semibold">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
+      </div>
+      <div>
+        <button
+          @click="removeFromCart"
+          class="button is-danger is-light"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:delete-outline-rounded"
+              :size="18"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>