heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

Browse Source
This commit is contained in:
marzban-dev
2025-04-16 23:27:43 +03:30
parent 117caf32e2 e28a0b4cef
commit 1f9128db1d
21 changed files with 201 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/cart/delivery/AddressItem.vue
+9 -4
View File
@@ -10,11 +10,14 @@ import { QUERY_KEYS } from "~/constants";
type Props = {
address?: Address;
isSelected?: boolean;
selectable?: boolean;
};
// props
defineProps<Props>();
withDefaults(defineProps<Props>(), {
selectable: true,
});
// emit
@@ -63,7 +66,9 @@ const handleDeleteAddress = (id: number) => {
<template>
<button
@click.prevent="!!address ? emit('select', address) : null"
@click.prevent="
!!address && selectable ? emit('select', address) : null
"
:class="
isSelected
? 'border-transparent ring-2 ring-offset-2 ring-blue-500'
@@ -76,7 +81,7 @@ const handleDeleteAddress = (id: number) => {
</div>
<span class="flex items-center justify-between w-full gap-3">
<div
class="flex items-center gap-3 lg:text-[1.125rem] font-semibold text-slate-900"
class="flex items-center gap-3 max-lg:text-sm font-semibold text-slate-900"
>
{{ !!address ? address.name : "آدرس" }}
<span
@@ -101,7 +106,7 @@ const handleDeleteAddress = (id: number) => {
>
<div class="w-full lg:w-9/12 overflow-hidden">
<div
class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-sm text-slate-700"
class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-xs lg:text-sm text-slate-700"
>
{{
!!address
frontend/components/cart/delivery/AddressModal.vue
+1 -1
View File
@@ -138,7 +138,7 @@ watch(
:variant="!!address ? 'ghost' : 'solid'"
:class="!!address ? '!bg-transparent !underline' : ''"
>
<span class="whitespace-pre">
<span class="whitespace-pre max-lg:text-xs">
{{ !!address ? "ویرایش" : "افزودن آدرس" }}
</span>
</Button>
frontend/components/global/Avatar.vue
+1 -2
View File
@@ -44,8 +44,7 @@ const { isLoading } = useImage({ src: src.value ?? "" });
<div class="size-full rounded-full flex-center">
<Icon
name="ci:profile"
size="16"
class="**:stroke-black"
class="**:stroke-black text-lg"
:class="iconClass"
/>
</div>
frontend/components/global/Modal.vue
+1 -1
View File
@@ -77,7 +77,7 @@ const isShow = computed({
/>
</DialogClose>
<DialogTitle
class="typo-sub-h-xl font-semibold flex items-center gap-3"
class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3"
>
{{ title }}
<Icon
frontend/components/profile/global/LogoutModal.vue
+6 -4
View File
@@ -53,18 +53,20 @@ const handleSubmit = () => {
<template #content>
<div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
<p class="leading-[175%]">
<p class="leading-[175%] text-xs lg:text-sm">
با خارج شدن از حساب کاربری، دسترسی شما به برخی از امکانات
محدود خواهد شد. اگر قصد دارید دوباره وارد شوید، می‌توانید از
همان اطلاعات حساب خود استفاده کنید.
</p>
<p>ما همیشه منتظر بازگشت شما هستیم! 😊</p>
<p class="text-xs lg:text-sm">
ما همیشه منتظر بازگشت شما هستیم! 😊
</p>
</div>
<div class="py-6 border-t border-slate-200 flex gap-3">
<Button
@click="handleSubmit"
class="rounded-full px-10"
class="rounded-full px-5 lg:px-10"
size="md"
>
<Icon
@@ -76,7 +78,7 @@ const handleSubmit = () => {
<DialogClose aria-label="Close">
<Button
variant="outlined"
class="rounded-full px-10"
class="rounded-full px-5 lg:px-10"
size="md"
>
نه فعلا هستم
frontend/components/profile/global/ProfilePageTitle.vue
+1 -1
View File
@@ -23,7 +23,7 @@ const toggleSidebar = inject("toggleSidebar");
<button class="flex-center lg:hidden" @click="toggleSidebar">
<Icon name="bi:chevron-right" size="18" class="**:fill-black" />
</button>
<p class="font-semibold lg:text-lg text-black">
<p class="font-semibold text-sm lg:text-lg text-black">
{{ title }}
</p>
</div>
frontend/components/profile/global/ProfileSection.vue
+2 -2
View File
@@ -22,9 +22,9 @@ withDefaults(defineProps<Props>(), {
}"
>
<div
class="w-full flex items-center justify-between h-[2rem] lg:h-[3rem] px-5"
class="w-full flex items-center justify-between h-[2rem] lg:h-[3rem] lg:px-5"
>
<span class="typo-sub-h-md lg:typo-sub-h-lg">{{ title }}</span>
<span class="text-sm lg:text-lg">{{ title }}</span>
<slot name="button" />
</div>
</div>
frontend/components/profile/global/ProfileSidebar.vue
+5 -3
View File
@@ -116,14 +116,14 @@ const toggleSidebar = inject("toggleSidebar");
? 'bg-black text-slate-100 **:fill-slate-100'
: '**:fill-black hover:bg-gray-200'
"
class="flex items-center justify-between transition-all rounded-lg py-4 px-3"
class="flex items-center justify-between transition-all rounded-lg py-3.5 lg:py-4 px-3"
@click="toggleSidebar"
>
<span class="flex-center gap-3">
<div class="size-5 flex-center">
<Icon :name="link.icon" />
</div>
<span class="text-sm">{{ link.title }}</span>
<span class="text-xs lg:text-sm">{{ link.title }}</span>
</span>
<Icon name="bi:chevron-left" class="transition-all" />
@@ -141,7 +141,9 @@ const toggleSidebar = inject("toggleSidebar");
class="**:fill-danger-500"
/>
</div>
<span class="text-sm"> خروج از حساب </span>
<span class="text-xs lg:text-sm">
خروج از حساب
</span>
</span>
<Icon
frontend/components/profile/index/ProfilePictureModal.vue
+57 -50
View File
@@ -84,7 +84,13 @@ onFileDialogChange((files: any) => {
</script>
<template>
<Modal v-model="visible" title="عکس پروفایل" icon="bi:image" iconSize="20">
<Modal
v-model="visible"
title="عکس پروفایل"
icon="bi:image"
iconSize="20"
contectClass="w-full max-lg:container lg:!w-[30vw]"
>
<template #trigger>
<button
class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
@@ -93,61 +99,62 @@ onFileDialogChange((files: any) => {
</button>
</template>
<template #content>
<div class="w-max">
<div
class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
>
<div
class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]"
>
<div
class="flex items-center justify-between w-full flex-wrap gap-4 max-w-[500px]"
<button
v-for="(avatar, index) in avatars"
:key="index"
class="size-16 lg:size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
>
<button
v-for="(avatar, index) in avatars"
:key="index"
class="size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
>
<Avatar
:src="avatar"
:alt="`avatar-${index}`"
class="size-full"
/>
</button>
</div>
<Avatar
:src="avatar"
:alt="`avatar-${index}`"
class="size-full"
/>
</button>
</div>
<div
class="w-full flex-center gap-4 max-w-[500px] flex-wrap"
<div class="w-full flex-center gap-4 max-w-[500px] flex-wrap">
<button
class="size-6 lg:size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
</div>
<div class="w-full flex-col-center gap-5">
<Avatar
:src="currentProfile"
alt=""
class="!size-24 lg:!size-32"
iconClass="!text-xl lg:!text-2xl"
/>
<Button
class="rounded-full w-[8rem]"
@click="openFileDialog"
:loading="updateAccountIsPending"
size="md"
>
<button
class="size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
<Icon
v-if="updateAccountIsPending"
name="svg-spinners:3-dots-bounce"
/>
<button
class="size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
</div>
<div class="w-full flex-col-center gap-5">
<Avatar :src="currentProfile" alt="" class="!size-32" />
<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>
<span v-else>آپلود عکس شما</span>
</Button>
</div>
</div>
</template>
frontend/components/profile/notifications/notification.vue
+6 -4
View File
@@ -6,14 +6,16 @@
>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3">
<Icon name="bi:info-circle" size="20" />
<h3 class="typo-sub-h-md font-semibold">تغییر وضعیت سفارش</h3>
<Icon name="bi:info-circle" class="lg:text-lg" />
<h3 class="max-lg:text-sm font-semibold">تغییر وضعیت سفارش</h3>
|
<span class="typo-p-xs text-cyan-500 font-semibold">
<span class="text-xs text-cyan-500 font-semibold">
۲۳ تیر
</span>
</div>
<p class="typo-p-sm text-slate-700 text-justify">
<p
class="text-xs lg:text-sm leading-[175%] text-slate-700 text-justify"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue
+9 -7
View File
@@ -26,21 +26,23 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
>
<td
scope="row"
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap"
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
:class="data.order_id ? 'text-cyan-500' : 'text-black'"
>
{{ data.order_id ? `${data.order_id}#` : "--" }}
</td>
<td class="w-3/12 px-6 py-6">
<td
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
>
{{ data.created_at ? createdTimeAgo : "--" }}
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
{{ data.count ? data.count : "--" }}
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
{{ data.final_price ? data.final_price : "--" }}
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 whitespace-pre shrink-0">
<div
class="w-max rounded-full py-1.5 px-3 text-xs border"
:class="{
@@ -61,7 +63,7 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
{{ data.verbose_status ? data.verbose_status : "--" }}
</div>
</td>
<td class="w-1/12 px-6 py-6">
<td class="w-1/12 px-6 py-6 shrink-0">
<NuxtLink
:to="{
name: 'profile-purchases-and-orders-id',
@@ -69,7 +71,7 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
}"
>
<button
class="size-10 flex-center border border-slate-200 rounded-md"
class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
>
<Icon
name="ci:eye-open"
frontend/components/profile/purchases-and-orders/index/PurchasesTableRowLoading.vue
+6 -6
View File
@@ -6,23 +6,23 @@
>
<td
scope="row"
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap text-black"
class="w-3/12 px-6 py-6 shrink-0 font-medium whitespace-nowrap text-black"
>
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-3/12 px-6 py-6">
<td class="w-3/12 px-6 py-6 shrink-0">
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 shrink-0">
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 shrink-0">
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 shrink-0">
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-1/12 px-6 py-6">
<td class="w-1/12 px-6 py-6 shrink-0">
<Skeleton class="!size-10 !rounded-sm" />
</td>
</tr>
frontend/components/profile/tickets/index/TicketsTableRow.vue
+7 -5
View File
@@ -27,14 +27,16 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
>
<td
scope="row"
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap text-black"
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
>
{{ data.ticket_category ? data.ticket_category : "--" }}
</td>
<td class="w-3/12 px-6 py-6">
{{ data.subject ? data.subject : "--" }}
</td>
<td class="w-3/12 px-6 py-6 flex flex-col gap-3 text-sm">
<td
class="w-3/12 px-6 py-6 flex flex-col gap-3 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
>
<span class="w-full whitespace-pre">
ایجاد : {{ data.created_at ? createdTimeAgo : "--" }}
</span>
@@ -42,7 +44,7 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
بروزرسانی : {{ data.updated_at ? updatedTimeAgo : "--" }}
</span>
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
<div
class="w-max rounded-full py-1.5 px-3 text-xs border"
:class="{
@@ -57,12 +59,12 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
{{ data.status ? data.status : "--" }}
</div>
</td>
<td class="w-1/12 px-6 py-6">
<td class="w-1/12 px-6 py-6 shrink-0">
<NuxtLink
:to="{ name: 'profile-tickets-id', params: { id: data.id } }"
>
<button
class="size-10 flex-center border border-slate-200 rounded-md"
class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
>
<Icon
name="ci:eye-open"
frontend/layouts/Profile.vue
+3 -3
View File
@@ -35,9 +35,9 @@ provide("toggleSidebar", toggleSidebar);
watch(
() => isSidebarShow.value,
(nv) => {
console.log(nv);
isScrollLocked.value = nv ? true : false;
if (isMobile.value) {
isScrollLocked.value = nv ? true : false;
}
},
{
immediate: true,
frontend/nuxt.config.ts
+4 -4
View File
@@ -23,10 +23,10 @@ export default defineNuxtConfig({
name: "fade",
mode: "out-in",
},
layoutTransition: {
name: "fade",
mode: "out-in",
},
// layoutTransition: {
// name: "fade",
// mode: "out-in",
// },
},
postcss: {
frontend/pages/profile/addresses.vue
+1
View File
@@ -64,6 +64,7 @@ const handleSelectAddress = (address: Address) => {
:key="index"
:address="address"
@select="handleSelectAddress"
:selectable="false"
:isSelected="address.id == selectedAddress?.id"
/>
</ul>
frontend/pages/profile/index.vue
+1 -1
View File
@@ -196,7 +196,7 @@ const handleSubmit = (withValidation: boolean) => {
{{ account?.last_name }}</span
>
<span
class="typo-sub-h-xs lg:typo-sub-h-sm font-light text-slate-600 leading-[200%]"
class="typo-sub-h-xs lg:typo-sub-h-sm !font-light text-slate-600 leading-[200%]"
>
با اولین خریدتون هوش مصنوعی وبسایتمون واستون یک
بایوگرافی درست میکنه :)
frontend/pages/profile/notifications.vue
+7 -7
View File
@@ -60,13 +60,13 @@ watch(
<div
v-if="isSupported"
class="w-fill flex items-center justify-between p-5 pt-0 border-b border-slate-200"
class="w-fill flex items-center justify-between py-5 lg:p-5 pt-0 border-b border-slate-200 gap-5"
>
<div class="flex items-start justify-start gap-3">
<Icon name="bi:bell" size="20" />
<div class="flex flex-col gap-1 pb-0.5">
<span class="text-sm"> دریافت مستقیم اعلانات </span>
<span class="text-xs text-slate-500">
<span class="text-xs text-slate-500 leading-[175%]">
اعلانات حساب شما به صورت مستقیم به دستگاه شما ارسال می
شود
</span>
@@ -83,10 +83,10 @@ watch(
</div>
</div>
<div class="w-full flex items-center justify-between px-5">
<span> 1 اعلان </span>
<div class="w-full flex items-center justify-between lg:px-5">
<span class="max-lg:text-sm"> 1 اعلان </span>
<div class="flex items-center justify-start gap-3">
<span class="text-sm">فیلتر بر اساس</span>
<span class="text-xs lg:text-sm">فیلتر بر اساس</span>
<Select
v-model="params.sort!"
@@ -98,7 +98,7 @@ watch(
<SelectItem
v-for="(category, index) in sortFilters"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="category.value"
>
<SelectItemIndicator
@@ -107,7 +107,7 @@ watch(
<Icon name="bi:check" size="20" />
</SelectItemIndicator>
<SelectItemText
class="text-end font-iran-yekan-x text-sm"
class="text-end font-iran-yekan-x text-xs lg:text-sm"
>
{{ category.title }}
</SelectItemText>
frontend/pages/profile/purchases-and-orders/index.vue
+27 -13
View File
@@ -118,10 +118,16 @@ const clearFilters = () => {
<ProfilePageTitle title="خرید ها و سفارش های شما" icon="bi:cart" />
<div class="w-full flex flex-col gap-5">
<div class="w-full flex items-center justify-between px-5">
<div class="flex items-center justify-start gap-8">
<div class="flex items-center justify-start gap-3">
<span class="text-sm">ترتیب بر اساس</span>
<div
class="w-full flex flex-col-reverse lg:flex-row items-center justify-between lg:px-5 gap-5"
>
<div
class="max-lg:w-full flex items-center justify-start gap-8"
>
<div
class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
>
<span class="text-xs lg:text-sm">ترتیب بر اساس</span>
<Select
v-model="params.sort!"
triggerRootClass="!py-2.5"
@@ -132,7 +138,7 @@ const clearFilters = () => {
<SelectItem
v-for="(category, index) in sortFilters"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="category.value"
>
<SelectItemIndicator
@@ -141,7 +147,7 @@ const clearFilters = () => {
<Icon name="bi:check" size="20" />
</SelectItemIndicator>
<SelectItemText
class="text-end font-iran-yekan-x text-sm"
class="text-end font-iran-yekan-x text-xs lg:text-sm"
>
{{ category.title }}
</SelectItemText>
@@ -150,8 +156,10 @@ const clearFilters = () => {
</template>
</Select>
</div>
<div class="flex items-center justify-start gap-3">
<span class="text-sm">وضعیت</span>
<div
class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
>
<span class="text-xs lg:text-sm">وضعیت</span>
<Select
v-model="params.status!"
triggerRootClass="!py-2.5"
@@ -164,7 +172,7 @@ const clearFilters = () => {
category, index
) in statusFilters"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="category.value"
>
<SelectItemIndicator
@@ -173,7 +181,7 @@ const clearFilters = () => {
<Icon name="bi:check" size="20" />
</SelectItemIndicator>
<SelectItemText
class="text-end font-iran-yekan-x text-sm"
class="text-end font-iran-yekan-x text-xs lg:text-sm"
>
{{ category.title }}
</SelectItemText>
@@ -184,7 +192,10 @@ const clearFilters = () => {
</div>
</div>
<div class="flex-center gap-4">
<div
class="flex items-center lg:justify-center gap-4 max-lg:w-full"
:class="hasFilters ? 'justify-between' : 'justify-end'"
>
<Button
v-if="hasFilters"
end-icon="bi:x"
@@ -227,7 +238,7 @@ const clearFilters = () => {
? 'w-1/2'
: 'w-2/12'
"
class="px-6 py-5 text-sm font-normal"
class="px-6 py-5 text-xs lg:text-sm font-normal shrink-0 whitespace-pre"
>
{{ tableHead }}
</th>
@@ -246,7 +257,10 @@ const clearFilters = () => {
</template>
</Table>
<div v-if="data && paginationData && data.count > 10" class="w-full flex-center py-10">
<div
v-if="data && paginationData && data.count > 10"
class="w-full flex-center py-10"
>
<Pagination :items="paginationData" :total="data.count" />
</div>
</div>
frontend/pages/profile/tickets/index.vue
+27 -13
View File
@@ -99,10 +99,16 @@ const clearFilters = () => {
<ProfilePageTitle title="تیکت های شما" icon="bi:ticket" />
<div class="w-full flex flex-col gap-5">
<div class="w-full flex items-center justify-between px-5">
<div class="flex items-center justify-start gap-8">
<div class="flex items-center justify-start gap-3">
<span class="text-sm">ترتیب بر اساس</span>
<div
class="w-full flex flex-col-reverse lg:flex-row items-center justify-between lg:px-5 gap-5"
>
<div
class="max-lg:w-full flex items-center justify-start gap-8"
>
<div
class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
>
<span class="text-xs lg:text-sm">ترتیب بر اساس</span>
<Select
v-model="params.sort!"
triggerRootClass="!py-2.5"
@@ -113,7 +119,7 @@ const clearFilters = () => {
<SelectItem
v-for="(category, index) in sortFilters"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="category.value"
>
<SelectItemIndicator
@@ -122,7 +128,7 @@ const clearFilters = () => {
<Icon name="bi:check" size="20" />
</SelectItemIndicator>
<SelectItemText
class="text-end font-iran-yekan-x text-sm"
class="text-end font-iran-yekan-x lg:text-sm"
>
{{ category.title }}
</SelectItemText>
@@ -131,8 +137,10 @@ const clearFilters = () => {
</template>
</Select>
</div>
<div class="flex items-center justify-start gap-3">
<span class="text-sm">وضعیت</span>
<div
class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
>
<span class="text-xs lg:text-sm">وضعیت</span>
<Select
v-model="params.status!"
triggerRootClass="!py-2.5"
@@ -145,7 +153,7 @@ const clearFilters = () => {
category, index
) in statusFilters"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="category.value"
>
<SelectItemIndicator
@@ -154,7 +162,7 @@ const clearFilters = () => {
<Icon name="bi:check" size="20" />
</SelectItemIndicator>
<SelectItemText
class="text-end font-iran-yekan-x text-sm"
class="text-end font-iran-yekan-x text-xs lg:text-sm"
>
{{ category.title }}
</SelectItemText>
@@ -165,7 +173,10 @@ const clearFilters = () => {
</div>
</div>
<div class="flex-center gap-4">
<div
class="flex items-center lg:justify-center gap-4 max-lg:w-full"
:class="hasFilters ? 'justify-between' : 'justify-end'"
>
<Button
v-if="hasFilters"
end-icon="bi:x"
@@ -208,7 +219,7 @@ const clearFilters = () => {
? 'w-1/2'
: 'w-2/12'
"
class="px-6 py-5 text-sm font-normal"
class="px-6 py-5 text-xs lg:text-sm font-normal shrink-0 whitespace-pre"
>
{{ tableHead }}
</th>
@@ -227,7 +238,10 @@ const clearFilters = () => {
</template>
</Table>
<div v-if="data && paginationData && data.count > 7" class="w-full flex-center py-10">
<div
v-if="data && paginationData && data.count > 7"
class="w-full flex-center py-10"
>
<Pagination :items="paginationData" :total="data?.count" />
</div>
</div>
frontend/pages/profile/tickets/new.vue
+20 -11
View File
@@ -10,6 +10,7 @@ import { useToast } from "~/composables/global/useToast";
import { QUERY_KEYS } from "~/constants";
import useVuelidate from "@vuelidate/core";
import { helpers, required, minLength } from "@vuelidate/validators";
import type { GetAllOrdersRequest } from "~/composables/api/orders/useGetAllOrders";
// meta
@@ -72,9 +73,18 @@ const ticketData = ref<CreateTicketRequest>({
attachments: [],
});
const ordersFilter = computed<GetAllOrdersRequest>(() => {
return {
sort: "created_at",
status: "RECEIVED",
page: 1,
} as any;
});
// queries
const { data: orders, isLoading: ordersIsLoading } = useGetAllOrders();
const { data: orders, isLoading: ordersIsLoading } =
useGetAllOrders(ordersFilter);
const { mutateAsync: createTicket, isPending: createTicketIsPending } =
useCreateTicket();
@@ -257,7 +267,7 @@ const handleSubmit = async () => {
<template #content>
<SelectGroup>
<SelectItem
v-for="(order, index) in orders"
v-for="(order, index) in orders?.results"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] px-[12px] shrink-0 relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="order.id"
@@ -267,17 +277,14 @@ const handleSubmit = async () => {
>
<div class="flex items-center gap-4">
<AvatarGroup
:items="[
'https://c262408.parspack.net/media/profile_photos/Jackie_Robinson_NPG_97_135.jpg?AWSAccessKeyId=mtiSN2JWjWgyfr2u&Signature=mlUzygzyg2gQD7B5STTlgM2N%2FUM%3D&Expires=1740517316',
'https://c262408.parspack.net/media/profile_photos/Jackie_Robinson_NPG_97_135.jpg?AWSAccessKeyId=mtiSN2JWjWgyfr2u&Signature=mlUzygzyg2gQD7B5STTlgM2N%2FUM%3D&Expires=1740517316',
'https://c262408.parspack.net/media/profile_photos/Jackie_Robinson_NPG_97_135.jpg?AWSAccessKeyId=mtiSN2JWjWgyfr2u&Signature=mlUzygzyg2gQD7B5STTlgM2N%2FUM%3D&Expires=1740517316',
]"
v-if="order.images.length > 0"
:items="order.images"
:max="2"
size="32px"
/>
<div
class="flex flex-col items-start gap-1 text-[10px]"
class="flex items-start gap-1 text-[10px]"
>
<span
>{{
@@ -285,14 +292,16 @@ const handleSubmit = async () => {
}}
محصول</span
>
|
<span>
شماره سفارش : {{ order.id }}
شماره سفارش :
{{ order.id }}#
</span>
</div>
</div>
<span>
{{ order.status }}
<span class="text-[10px]">
{{ order.verbose_status }}
</span>
</SelectItemText>
</SelectItem>