Mamalizz-dev
97 lines
2.7 KiB
Vue
97 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useDeleteCartAll from "~/composables/api/orders/useDeleteCartAll";
|
|
import { useToast } from "~/composables/global/useToast";
|
|
import { QUERY_KEYS } from "~/constants";
|
|
|
|
// state
|
|
|
|
const { $queryClient: queryClient } = useNuxtApp();
|
|
const router = useRouter();
|
|
const { addToast } = useToast();
|
|
|
|
const isShow = ref(false);
|
|
|
|
// queries
|
|
|
|
const { mutateAsync: deleteCartAll, isPending: deleteCartAllIsPending } =
|
|
useDeleteCartAll();
|
|
|
|
// methods
|
|
|
|
const handleSubmit = () => {
|
|
deleteCartAll(undefined, {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
|
|
isShow.value = false;
|
|
addToast({
|
|
message: "سبد با موفقیت حذف شد",
|
|
options: {
|
|
status: "success",
|
|
},
|
|
});
|
|
},
|
|
onError: () => {
|
|
addToast({
|
|
message: "خطایی در حذف سبد رخ داد",
|
|
options: {
|
|
status: "error",
|
|
},
|
|
});
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Modal
|
|
v-model="isShow"
|
|
title="حذف اقلام"
|
|
icon="ci:bi-trash"
|
|
contectClass="!w-[90vw] lg:!w-[35vw]"
|
|
@close="isShow = false"
|
|
>
|
|
<template #trigger>
|
|
<Button
|
|
class="rounded-full shrink-0 whitespace-pre max-lg:text-[10px]! max-lg:py-1"
|
|
size="md"
|
|
>
|
|
حذف همه
|
|
</Button>
|
|
</template>
|
|
|
|
<template #content>
|
|
<div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
|
|
<p>آیا از حذف تمام محصولات از سبد خرید اطمینان دارید؟</p>
|
|
<p>این فرایند غیر قابل بازگشت است</p>
|
|
</div>
|
|
|
|
<div class="py-6 border-t border-slate-200 flex gap-3">
|
|
<Button
|
|
@click="handleSubmit"
|
|
class="rounded-full px-10"
|
|
size="md"
|
|
>
|
|
<Icon
|
|
v-if="deleteCartAllIsPending"
|
|
name="ci:svg-spinners-3-dots-bounce"
|
|
/>
|
|
<span v-else>بله</span>
|
|
</Button>
|
|
<DialogClose aria-label="Close">
|
|
<Button
|
|
variant="outlined"
|
|
class="rounded-full px-10"
|
|
size="md"
|
|
>
|
|
انصراف
|
|
</Button>
|
|
</DialogClose>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style scoped></style>
|