merge with frontend

.gitignore

@@ -1 +1,3 @@
-.idea
+.idea
+.DS_Store
+.vscode

frontend/components/cart/delivery/AddressModal.vue

@@ -40,7 +40,7 @@ const addressData = ref({
     address: address.value?.address ?? "",
     name: address.value?.name ?? "",
     phone: address.value?.phone ?? "",
-    for_me: !isEditing.value ? address.value?.for_me ?? "بله" : address.value?.for_me == true ? "بله" : "خیر",
+    for_me: !isEditing.value ? (address.value?.for_me ?? "بله") : address.value?.for_me == true ? "بله" : "خیر",
     is_main: address.value?.is_main ?? false,
 });
 
@@ -128,7 +128,7 @@ const handleSubmit = async () => {
                         },
                     });
                 },
-            }
+            },
         );
     }
 };
@@ -137,12 +137,12 @@ watch(
     () => [addressData.value.for_me, isShow.value],
     ([newValue, newValue2]) => {
         if (!isEditing.value) {
-            addressData.value.phone = newValue == "بله" && newValue2 ? account.value?.phone ?? "" : "";
+            addressData.value.phone = newValue == "بله" && newValue2 ? (account.value?.phone ?? "") : "";
         }
     },
     {
         immediate: true,
-    }
+    },
 );
 </script>
 
@@ -283,6 +283,9 @@ watch(
                     >
                         به عنوان آدرس پیش فرض ثبت شود؟
                     </label>
+
+                    <!-- {{ address?.is_main }} -->
+
                     <Switch
                         id="is_main"
                         v-model="addressData.is_main"

frontend/components/global/Switch.vue

@@ -22,7 +22,7 @@ const emit = defineEmits<Emits>();
 // computed
 
 const value = computed({
-    get: () => (modelValue.value == "true" ? true : false),
+    get: () => modelValue.value,
     set: (value) => {
         emit("update:modelValue", value);
     },

frontend/components/profile/index/ProfilePictureModal.vue

@@ -12,7 +12,7 @@ type Props = {
 };
 
 type Emits = {
-    "update:modelValue": [value: File];
+    "update:modelValue": [value: File | null];
     "update:isShow": [value: boolean];
 };
 
@@ -59,8 +59,7 @@ const { isPending: updateAccountIsPending } = useUpdateAccount();
 // computed
 
 const currentProfile = computed({
-    get: () =>
+    get: () => (!!modelValue.value ? URL.createObjectURL(modelValue.value) : null),
-        !!modelValue.value ? URL.createObjectURL(modelValue.value) : null,
     set: (value: File) => emit("update:modelValue", value),
 });
 
@@ -81,6 +80,15 @@ onFileDialogChange((files: any) => {
     emit("update:modelValue", file);
     resetFileDialog();
 });
+
+const resetAvatarFile = async () => {
+    const response = await fetch("/img/default-avatar.jpeg");
+    const blob = await response.blob();
+    const file = new File([blob], "default-avatar.jpeg", { type: blob.type });
+
+    emit("update:modelValue", file);
+    resetFileDialog();
+};
 </script>
 
 <template>
@@ -92,19 +100,17 @@ onFileDialogChange((files: any) => {
         contectClass="w-full max-lg:container lg:!w-[30vw]"
     >
         <template #trigger>
-            <button
+            <button class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0">
-                class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
+                <Icon
-            >
+                    name="bi:pencil"
-                <Icon name="bi:pencil" class="**:fill-slate-100" size="12" />
+                    class="**:fill-slate-100"
+                    size="12"
+                />
             </button>
         </template>
         <template #content>
-            <div
+            <div class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4">
-                class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
+                <div class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]">
-            >
-                <div
-                    class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]"
-                >
                     <button
                         v-for="(avatar, index) in avatars"
                         :key="index"
@@ -143,18 +149,33 @@ onFileDialogChange((files: any) => {
                         class="!size-24 lg:!size-32"
                         iconClass="!text-xl lg:!text-2xl"
                     />
-                    <Button
+                    <div class="flex items-center gap-4">
-                        class="rounded-full w-[8rem]"
+                        <Button
-                        @click="openFileDialog"
+                            class="rounded-full w-[8rem] bg-red-500"
-                        :loading="updateAccountIsPending"
+                            @click="resetAvatarFile"
-                        size="md"
+                            :loading="updateAccountIsPending"
-                    >
+                            size="md"
-                        <Icon
+                        >
-                            v-if="updateAccountIsPending"
+                            <Icon
-                            name="svg-spinners:3-dots-bounce"
+                                v-if="updateAccountIsPending"
-                        />
+                                name="bi:trash"
-                        <span v-else>آپلود عکس شما</span>
+                            />
-                    </Button>
+                            <span v-else>حذف عکس</span>
+                        </Button>
+
+                        <Button
+                            class="rounded-full w-[8rem]"
+                            @click="openFileDialog"
+                            :loading="updateAccountIsPending"
+                            size="md"
+                        >
+                            <Icon
+                                v-if="updateAccountIsPending"
+                                name="svg-spinners:3-dots-bounce"
+                            />
+                            <span v-else>آپلود عکس شما</span>
+                        </Button>
+                    </div>
                 </div>
             </div>
         </template>

frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // imports
 
-import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
+import useDownloadInvoice from "~/composables/api/orders/useDownloadInvoice";
 
 // types
 
@@ -15,15 +15,13 @@ const props = defineProps<Props>();
 
 const { data } = toRefs(props);
 
-// computed
+// states
 
-const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
+const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(data.value.id));
 </script>
 
 <template>
-    <tr
+    <tr class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200">
-        class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200"
-    >
         <td
             scope="row"
             class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
@@ -31,10 +29,8 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
         >
             {{ data.order_id ? `${data.order_id}#` : "--" }}
         </td>
-        <td
+        <td class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0">
-            class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
+            {{ data.created_at ?? "--" }}
-        >
-            {{ data.created_at ? createdTimeAgo : "--" }}
         </td>
         <td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
             {{ data.count ? data.count : "--" }}
@@ -46,40 +42,35 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
             <div
                 class="w-max rounded-full py-1.5 px-3 text-xs border"
                 :class="{
-                    'text-warning-600 bg-warning-100 border-warning-600': [
+                    'text-warning-600 bg-warning-100 border-warning-600': ['ADMIN_PENDING', 'PENDING'].includes(
-                        'ADMIN_PENDING',
+                        data.status,
-                        'PENDING',
+                    ),
-                    ].includes(data.status),
+                    'text-success-600 bg-success-100 border-success-600': ['POSTED', 'RECEIVED'].includes(data.status),
-                    'text-success-600 bg-success-100 border-success-600': [
+                    'text-danger-600 bg-danger-100 border-danger-600': ['CANCELED', 'REFUND'].includes(data.status),
-                        'POSTED',
-                        'RECEIVED',
-                    ].includes(data.status),
-                    'text-danger-600 bg-danger-100 border-danger-600': [
-                        'CANCELED',
-                        'REFUND',
-                    ].includes(data.status),
                 }"
             >
                 {{ data.verbose_status ? data.verbose_status : "--" }}
             </div>
         </td>
         <td class="w-1/12 px-6 py-6 shrink-0">
-            <NuxtLink
+            <button
-                :to="{
+                @click="!downloadIsLoading ? downloadFn() : undefined"
-                    name: 'profile-purchases-and-orders-id',
+                :disabled="downloadIsLoading"
-                    params: { id: data.id },
+                class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
-                }"
             >
-                <button
+                <Icon
-                    class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
+                    v-if="downloadIsLoading"
-                >
+                    name="svg-spinners:3-dots-fade"
-                    <Icon
+                    class="**:stroke-black"
-                        name="ci:eye-open"
+                    size="20"
-                        class="**:stroke-black"
+                />
-                        size="20"
+                <Icon
-                    />
+                    v-else
-                </button>
+                    name="ci:download"
-            </NuxtLink>
+                    class="**:stroke-black"
+                    size="20"
+                />
+            </button>
         </td>
     </tr>
 </template>

frontend/composables/api/orders/useDownloadInvoice.ts

@@ -0,0 +1,59 @@
+// imports
+
+import { API_ENDPOINTS } from "~/constants";
+import { useQuery } from "@tanstack/vue-query";
+
+const useDownloadInvoice = (transactionId: string) => {
+    // state
+
+    const { $queryClient: queryClient, $axios: axios } = useNuxtApp();
+
+    const enabled = ref(false);
+
+    // methods
+
+    const download = () => {
+        if (!enabled.value) enabled.value = true;
+        queryClient.invalidateQueries({
+            queryKey: ["download-invoice", transactionId],
+        });
+    };
+
+    // query
+
+    const handleDownloadInvoice = async () => {
+        const { data } = await axios.get<Blob>(`${API_ENDPOINTS.orders.cart.download_invoice}/${transactionId}`, {
+            responseType: "blob",
+        });
+        return data;
+    };
+
+    const { data: file, isLoading } = useQuery({
+        queryKey: ["download-invoice", transactionId],
+        queryFn: () => handleDownloadInvoice(),
+        enabled,
+        refetchOnWindowFocus: false,
+    });
+
+    // watch
+
+    whenever(file, () => {
+        if (!!file.value) {
+            const url = URL.createObjectURL(file.value);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "invoice.pdf";
+            link.click();
+            URL.revokeObjectURL(url);
+
+            enabled.value = false;
+        }
+    });
+
+    return {
+        downloadIsLoading: isLoading,
+        downloadFn: download,
+    };
+};
+
+export default useDownloadInvoice;

frontend/constants/index.ts

@@ -56,6 +56,7 @@ export const API_ENDPOINTS = {
     orders: {
         get_all: "/order/all",
         cart: {
+            download_invoice: "/order/invoice",
             get_all: "/order/cart",
             delete_one: "/order/cart/item",
             delete_all: "/order/cart/all",

frontend/pages/profile/purchases-and-orders/[id].vue

@@ -1,5 +0,0 @@
-<template>
-    <div></div>
-</template>
-
-<script setup lang="ts"></script>

frontend/pages/profile/purchases-and-orders/index.vue

@@ -94,8 +94,8 @@ const paginationData = computed(() => {
 // methods
 
 const clearFilters = () => {
-    sort.value = "";
+    sort.value = undefined;
-    status.value = "";
+    status.value = undefined;
 };
 </script>