changes
This commit is contained in:
Viet An
@@ -6,27 +6,26 @@
|
||||
to=".modal-card:has(.confirm) .modal-card-foot"
|
||||
>
|
||||
<div class="field is-grouped w-full is-align-items-center">
|
||||
<div class="control is-expanded">
|
||||
<div class="buttons">
|
||||
<button
|
||||
class="button is-primary has-text-white"
|
||||
@click="confirm"
|
||||
>
|
||||
Đồng ý
|
||||
</button>
|
||||
<button
|
||||
class="button is-white"
|
||||
@click="cancel"
|
||||
>
|
||||
Hủy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<CountDown
|
||||
v-if="duration"
|
||||
:duration="duration"
|
||||
@close="cancel"
|
||||
/>
|
||||
<div class="ml-auto buttons">
|
||||
<button
|
||||
class="button is-white"
|
||||
@click="cancel"
|
||||
>
|
||||
Hủy
|
||||
</button>
|
||||
<button
|
||||
ref="confirmBtn"
|
||||
class="button is-primary has-text-white"
|
||||
@click="confirm"
|
||||
>
|
||||
Đồng ý
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
@@ -49,4 +48,9 @@ function confirm() {
|
||||
emit("modalevent", { name: "confirm" });
|
||||
cancel();
|
||||
}
|
||||
|
||||
const confirmBtn = useTemplateRef("confirmBtn");
|
||||
onMounted(() => {
|
||||
confirmBtn.value.focus();
|
||||
});
|
||||
</script>
|
||||
|
||||
71
app/components/pos/CartItem.vue
Normal file
71
app/components/pos/CartItem.vue
Normal file
@@ -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>
|
||||
@@ -15,23 +15,54 @@ 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)
|
||||
) {
|
||||
if (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];
|
||||
/*
|
||||
insert into cart with customer =
|
||||
*/
|
||||
$snackbar(`Thêm ${selectedImeis.value.length} sản phẩm vào giỏ hàng`, "Success");
|
||||
emit("close");
|
||||
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() {
|
||||
@@ -40,7 +71,11 @@ async function fetchImeis() {
|
||||
filter: { variant: props.variant.id },
|
||||
});
|
||||
|
||||
imeis.value = imeisFetched.filter((imeiRec) => !store.selectedImeis.find((i) => i.imei === imeiRec.imei));
|
||||
imeis.value = imeisFetched.filter((imeiRec) => {
|
||||
const alreadyInCart = cartItems.value.find((cartItem) => cartItem.imei === imeiRec.id);
|
||||
return !alreadyInCart;
|
||||
});
|
||||
|
||||
isLoading.value = false;
|
||||
}
|
||||
onMounted(fetchImeis);
|
||||
@@ -111,7 +146,7 @@ onMounted(fetchImeis);
|
||||
<div class="is-flex is-justify-content-end">
|
||||
<button
|
||||
@click="addToCart"
|
||||
class="button is-primary"
|
||||
:class="['button is-primary', isAdding && 'is-loading']"
|
||||
:disabled="selectedImeis.length === 0"
|
||||
>
|
||||
<span class="icon">
|
||||
|
||||
@@ -1,14 +1,40 @@
|
||||
<script setup>
|
||||
import { isNil } from "es-toolkit";
|
||||
import Address from "~/components/pos/Address.vue";
|
||||
import ProductCard from "~/components/pos/ProductCard.vue";
|
||||
import CartItem from "~/components/pos/CartItem.vue";
|
||||
import SearchBox from "~/components/SearchBox.vue";
|
||||
|
||||
const store = useStore();
|
||||
const { $getdata, $numtoString } = useNuxtApp();
|
||||
const cart = ref();
|
||||
const cartItems = ref();
|
||||
|
||||
function openModal() {
|
||||
store.showmodal = {
|
||||
async function getCart() {
|
||||
console.count("getCart");
|
||||
const cartFetched = await $getdata("Cart", {
|
||||
filter: { customer: store.customer },
|
||||
first: true,
|
||||
});
|
||||
cart.value = cartFetched;
|
||||
|
||||
const cartItemsFetched = await $getdata("Cart_Item", {
|
||||
filter: {
|
||||
cart: cartFetched.id,
|
||||
},
|
||||
});
|
||||
cartItems.value = cartItemsFetched;
|
||||
|
||||
console.log("cartFetched", cartFetched);
|
||||
console.log("cartItemsFetched", cartItemsFetched);
|
||||
}
|
||||
|
||||
provide("cartItems", cartItems);
|
||||
provide("getCart", getCart);
|
||||
onMounted(getCart);
|
||||
|
||||
const showProductSelectionModal = ref();
|
||||
function openProductSelectionModal() {
|
||||
showProductSelectionModal.value = {
|
||||
component: "pos/ProductSelection",
|
||||
title: "Chọn sản phẩm",
|
||||
width: "85%",
|
||||
@@ -24,7 +50,8 @@ const orderInfo = ref({
|
||||
});
|
||||
const addresses = ref([]);
|
||||
const subtotal = computed(() => {
|
||||
return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
|
||||
return 0;
|
||||
// return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
|
||||
});
|
||||
|
||||
async function getAddresses() {
|
||||
@@ -68,7 +95,7 @@ function openConfirmModal() {
|
||||
<div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-8']">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<div class="block is-flex is-justify-content-space-between">
|
||||
<p class="icon-text fs-16 font-semibold mb-4">
|
||||
<span class="icon">
|
||||
<Icon
|
||||
@@ -79,7 +106,7 @@ function openConfirmModal() {
|
||||
<span>Giỏ hàng</span>
|
||||
</p>
|
||||
<button
|
||||
@click="openModal"
|
||||
@click="openProductSelectionModal"
|
||||
class="button is-primary"
|
||||
>
|
||||
<span class="icon">
|
||||
@@ -92,14 +119,13 @@ function openConfirmModal() {
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="store.selectedImeis.length > 0"
|
||||
v-if="cartItems"
|
||||
class="is-flex is-flex-direction-column is-gap-1"
|
||||
>
|
||||
<ProductCard
|
||||
v-for="imei in store.selectedImeis"
|
||||
:key="imei.id"
|
||||
:imei="imei"
|
||||
deleteable
|
||||
<CartItem
|
||||
v-for="cartItem in cartItems"
|
||||
:key="cartItem.id"
|
||||
:cartItem="cartItem"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
@@ -253,7 +279,8 @@ function openConfirmModal() {
|
||||
<tr>
|
||||
<td>
|
||||
<span>Tạm tính</span>
|
||||
<span> ({{ store.selectedImeis.length }} sản phẩm)</span>
|
||||
<span> ({{ 0 }} sản phẩm)</span>
|
||||
<!-- <span> ({{ store.selectedImeis.length }} sản phẩm)</span> -->
|
||||
</td>
|
||||
<td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
|
||||
</tr>
|
||||
@@ -278,6 +305,11 @@ function openConfirmModal() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-if="showProductSelectionModal"
|
||||
v-bind="showProductSelectionModal"
|
||||
@close="showProductSelectionModal = undefined"
|
||||
/>
|
||||
<Modal
|
||||
v-if="showConfirmModal"
|
||||
v-bind="showConfirmModal"
|
||||
|
||||
Reference in New Issue
Block a user