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

new changes

Browse Source
This commit is contained in:
Mamalizz
2025-02-23 23:22:42 +03:30
parent 1dcd3647ac
commit 0e171e167b
7 changed files with 135 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/ToastContainer/ToastBox.vue
+17 -17
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// import
import type { ToastOptions } from "~/composables/global/useToast";
@@ -9,9 +8,9 @@ import { useToast } from "~/composables/global/useToast";
type Props = {
id: number;
message: string,
options: ToastOptions
}
message: string;
options: ToastOptions;
};
// props
@@ -24,7 +23,7 @@ const { destroyToast } = useToast();
const open = ref(true);
// method
// methods
const onSwipeEnd = () => {
setTimeout(() => {
@@ -41,37 +40,39 @@ const statusIcon = computed(() => {
case "success":
return {
name: "duo-icons:check-circle",
class: "**:fill-success-500 [filter:drop-shadow(0_0_10px_var(--color-success-500))]"
class: "**:fill-success-500 [filter:drop-shadow(0_0_10px_var(--color-success-500))]",
};
case "error":
return {
name: "duo-icons:alert-triangle",
class: "**:fill-danger-500 [filter:drop-shadow(0_0_10px_var(--color-danger-500))]"
class: "**:fill-danger-500 [filter:drop-shadow(0_0_10px_var(--color-danger-500))]",
};
case "info":
return {
name: "duo-icons:info",
class: "**:fill-cyan-500 [filter:drop-shadow(0_0_10px_var(--color-cyan-500))]"
class: "**:fill-cyan-500 [filter:drop-shadow(0_0_10px_var(--color-cyan-500))]",
};
case "warning":
return {
name: "duo-icons:alert-octagon",
class: "**:fill-warning-500 [filter:drop-shadow(0_0_10px_var(--color-warning-500))]"
class: "**:fill-warning-500 [filter:drop-shadow(0_0_10px_var(--color-warning-500))]",
};
default:
return {
name: "duo-icons:info",
class: "**:fill-slate-500 [filter:drop-shadow(0_0_10px_var(--color-slate-500))]"
class: "**:fill-slate-500 [filter:drop-shadow(0_0_10px_var(--color-slate-500))]",
};
}
});
// watch
watch(() => open.value, (value) => {
if (!value) onSwipeEnd();
});
watch(
() => open.value,
(value) => {
if (!value) onSwipeEnd();
}
);
// lifecycle
@@ -80,7 +81,6 @@ onMounted(() => {
open.value = false;
}, options.value.duration ?? 4000);
});
</script>
<template>
@@ -92,7 +92,7 @@ onMounted(() => {
:class="options.description ? 'rounded-150' : 'rounded-full'"
>
<ToastTitle
:class="[ { 'mb-1.5' : options.description } ]"
:class="[{ 'mb-1.5': options.description }]"
class="[grid-area:_title] font-medium text-slate-600 text-sm flex items-center gap-2"
>
<Icon :name="statusIcon.name" :class="statusIcon.class" size="24" />
@@ -106,4 +106,4 @@ onMounted(() => {
</div>
</ToastDescription>
</ToastRoot>
</template>
</template>
frontend/components/global/product-detail/Slider.vue
+12 -8
View File
@@ -1,11 +1,10 @@
<script lang="ts" setup>
// types
type Props = {
selectedSlide: number;
slides: ProductImage[]
}
slides: ProductImage[];
};
// props
@@ -23,17 +22,18 @@ const selectedSlideDetail = computed(() => {
})!;
});
// method
// methods
const changeSlide = (id: number) => {
emit("update:selectedSlide", id);
};
</script>
<template>
<div class="flex flex-col relative gap-6">
<div class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-200">
<div
class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-200"
>
<Transition name="zoom" mode="out-in">
<img
:key="selectedSlideDetail.id"
@@ -47,7 +47,11 @@ const changeSlide = (id: number) => {
<div
@click="changeSlide(slide.id)"
v-for="slide in slides"
:class="selectedSlide === slide.id ? '!ring-black' : 'ring-transparent'"
:class="
selectedSlide === slide.id
? '!ring-black'
: 'ring-transparent'
"
class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
:key="slide.id"
>
@@ -59,4 +63,4 @@ const changeSlide = (id: number) => {
</div>
</div>
</div>
</template>
</template>
frontend/components/product/ChatBox/ChatBoxContainer.vue
+17 -13
View File
@@ -29,17 +29,17 @@ const {
isPending: isChatPending,
isFetchingNextPage: isNextChatPagePending,
hasNextPage: hasMoreChat,
fetchNextPage: loadMoreChat
fetchNextPage: loadMoreChat,
} = useGetChat(id, isOpen);
const isCreateMessagePending = useIsMutating({
mutationKey: [MUTATION_KEYS.create_chat]
mutationKey: [MUTATION_KEYS.create_chat],
});
const canLoadMoreChat = ref(false);
const isChatScrollLocked = useScrollLock(chatContainerEl);
const { y: chatContainerScrollY } = useScroll(chatContainerEl, {
behavior: "smooth"
behavior: "smooth",
});
useInfiniteScroll(
@@ -56,11 +56,11 @@ useInfiniteScroll(
distance: 10,
direction: "top",
throttle: 1000,
canLoadMore: () => canLoadMoreChat.value
canLoadMore: () => canLoadMoreChat.value,
}
);
// method
// methods
const scrollToBottom = () => {
chatContainerScrollY.value = chatContainerEl.value?.scrollHeight ?? 0;
@@ -116,7 +116,7 @@ whenever(
}, 2000);
},
{
once: true
once: true,
}
);
</script>
@@ -131,16 +131,15 @@ whenever(
<template v-if="isLoggedIn">
<Transition name="zoom" mode="out-in">
<div
v-if="!isChatPending"
class="p-4.5 h-full flex flex-col justify-between gap-4"
>
<div
:style="{
maskImage:
'linear-gradient(to top, transparent, black 5%, black, black)',
}"
maskImage:
'linear-gradient(to top, transparent, black 5%, black, black)',
}"
class="hide-scrollbar flex flex-col py-7 gap-6 h-full overflow-y-auto"
ref="chatContainerEl"
>
@@ -148,7 +147,10 @@ whenever(
v-if="hasMoreChat"
class="py-2 flex items-center justify-center"
>
<Icon name="svg-spinners:3-dots-fade" size="24" />
<Icon
name="svg-spinners:3-dots-fade"
size="24"
/>
</div>
<ChatMessage
v-for="(message, index) in chatMessages"
@@ -173,7 +175,6 @@ whenever(
<ChatInput />
</div>
<div
v-else
class="w-full h-full flex items-center justify-center absolute inset-0"
@@ -182,7 +183,10 @@ whenever(
</div>
</Transition>
</template>
<div class="text-black p-4.5 size-full flex justify-center items-center" v-else>
<div
class="text-black p-4.5 size-full flex justify-center items-center"
v-else
>
Please sign in first
</div>
</div>
frontend/components/product/ChatBox/ChatButton.vue
+3 -7
View File
@@ -1,24 +1,21 @@
<script setup lang="ts">
// state
const isOpen = ref(false);
// method
// methods
const closeChat = () => isOpen.value = false;
const closeChat = () => (isOpen.value = false);
// provide-inject
provide("isOpen", {
isOpen,
closeChat
closeChat,
});
</script>
<template>
<button
v-if="!isOpen"
@click="isOpen = !isOpen"
@@ -32,5 +29,4 @@ provide("isOpen", {
</button>
<ChatBoxContainer :isOpen="isOpen" />
</template>
frontend/components/product/ChatBox/ChatInput.vue
+28 -15
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// types
import AiLoading from "~/components/product/ChatBox/AiLoading.vue";
@@ -12,12 +11,12 @@ const { $queryClient: queryClient } = useNuxtApp();
const { addToast } = useToast();
const { mutateAsync: createMessage, isPending: isCreatingMessage } = useCreateChatMessage(queryClient);
const { mutateAsync: createMessage, isPending: isCreatingMessage } =
useCreateChatMessage(queryClient);
const chatInputEl = ref<HTMLInputElement | null>(null);
// method
// methods
const sendMessage = async () => {
const value = chatInputEl.value!.value;
@@ -28,20 +27,18 @@ const sendMessage = async () => {
await createMessage({
new_message: value,
productId: 1
productId: 1,
});
} catch (e) {
addToast({
message: "مشکلی پیش آمده",
options: {
status: "error"
}
status: "error",
},
});
}
}
};
</script>
<template>
@@ -71,12 +68,20 @@ const sendMessage = async () => {
<form
class="transition-all duration-200 relative flex items-center gap-4 w-full shadow-sm rounded-full h-[56px] border pe-3 ps-4"
:class="isCreatingMessage ? 'border-transparent shadow-black/10 bg-white/85 backdrop-blur-xl' : 'border-slate-200 shadow-transparent bg-white'"
:class="
isCreatingMessage
? 'border-transparent shadow-black/10 bg-white/85 backdrop-blur-xl'
: 'border-slate-200 shadow-transparent bg-white'
"
>
<input
ref="chatInputEl"
:disabled="isCreatingMessage"
:placeholder="isCreatingMessage ? 'دارم فکر میکنم...' : 'سوال خود را بپرسید'"
:placeholder="
isCreatingMessage
? 'دارم فکر میکنم...'
: 'سوال خود را بپرسید'
"
type="text"
name="text"
class="focus:outline-none h-full typo-p-sm w-full border-none"
@@ -89,13 +94,21 @@ const sendMessage = async () => {
:class="isCreatingMessage ? 'bg-transparent' : 'bg-black'"
>
<TransitionGroup name="fade-down">
<AiLoading v-if="isCreatingMessage" circle :size="75" class="mb-1" />
<Icon v-else name="iconamoon:send-light" class="absolute rotate-180 **:stroke-white" />
<AiLoading
v-if="isCreatingMessage"
circle
:size="75"
class="mb-1"
/>
<Icon
v-else
name="iconamoon:send-light"
class="absolute rotate-180 **:stroke-white"
/>
</TransitionGroup>
</button>
</form>
</div>
</div>
</template>
@@ -303,4 +316,4 @@ const sendMessage = async () => {
transform: translate(-50%, -50%) rotate(443deg);
}
}
</style>
</style>
frontend/components/product/ChatBox/ChatMessage.vue
+43 -37
View File
@@ -1,14 +1,13 @@
<script setup lang="ts">
// types
type Props = {
id: number,
reverse?: boolean,
content: string,
isLast?: boolean,
loadingContent?: boolean
}
id: number;
reverse?: boolean;
content: string;
isLast?: boolean;
loadingContent?: boolean;
};
// props
@@ -23,20 +22,24 @@ const emit = defineEmits(["textUpdate"]);
const { $gsap: gsap } = useNuxtApp();
// method
// methods
const showMessage = () => {
gsap.fromTo(`#message-container-${id.value}`, {
rotateX: -50,
translateY: -40,
opacity: 0
}, {
rotateX: 0,
translateY: 0,
opacity: 1,
duration: 0.5,
ease: "expo.out"
});
gsap.fromTo(
`#message-container-${id.value}`,
{
rotateX: -50,
translateY: -40,
opacity: 0,
},
{
rotateX: 0,
translateY: 0,
opacity: 1,
duration: 0.5,
ease: "expo.out",
}
);
};
// lifecycle
@@ -47,19 +50,22 @@ onMounted(() => {
}
if (reverse.value && isLast.value) {
gsap.fromTo(`#chat-message-content-${id.value}`, {
text: "",
duration: 2.5,
ease: "none"
}, {
text: { value: content.value, rtl: false },
duration: 2.5,
ease: "none",
onUpdate: () => emit("textUpdate")
});
gsap.fromTo(
`#chat-message-content-${id.value}`,
{
text: "",
duration: 2.5,
ease: "none",
},
{
text: { value: content.value, rtl: false },
duration: 2.5,
ease: "none",
onUpdate: () => emit("textUpdate"),
}
);
}
});
</script>
<template>
@@ -81,7 +87,11 @@ onMounted(() => {
</div>
<div
class="rounded-150 px-4 py-3"
:class="reverse ? 'bg-slate-100 text-slate-600' : 'bg-black text-white'"
:class="
reverse
? 'bg-slate-100 text-slate-600'
: 'bg-black text-white'
"
>
<p
v-if="!loadingContent"
@@ -91,12 +101,8 @@ onMounted(() => {
{{ content }}
</p>
<Icon
v-else
name="svg-spinners:3-dots-bounce"
size="20"
/>
<Icon v-else name="svg-spinners:3-dots-bounce" size="20" />
</div>
</div>
</div>
</template>
</template>
frontend/components/product/ProductComments.vue
+15 -17
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// import
import useGetComments from "~/composables/api/product/useGetComments";
@@ -16,15 +15,16 @@ const page = ref(1);
const { token } = useAuth();
const userComment = ref("");
const { data: comments, refetch : refetchComments } = useGetComments(id, page);
const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
const { data: comments, refetch: refetchComments } = useGetComments(id, page);
const { mutateAsync: createComment, isPending: isCreateCommentPending } =
useCreateComment(id);
// method
// methods
const submitComment = async () => {
if (userComment.value.length > 3) {
await createComment({
content: userComment.value
content: userComment.value,
});
userComment.value = "";
@@ -32,23 +32,25 @@ const submitComment = async () => {
await refetchComments();
}
};
</script>
<template>
<section class="bg-slate-50">
<div class="flex relative gap-8 my-42 container">
<div class="sticky top-0 flex flex-col gap-6 min-w-[400px] max-h-min bg-white p-8 rounded-xl border-[0.5px] border-slate-200">
<h3 class="typo-h-3">
نظرات کاربران
</h3>
<div
class="sticky top-0 flex flex-col gap-6 min-w-[400px] max-h-min bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
>
<h3 class="typo-h-3">نظرات کاربران</h3>
<div class="flex flex-col gap-2">
<Rating />
<span class="typo-p-sm">
بر اساس {{ comments?.count }} نظر
</span>
</div>
<form @submit.prevent="submitComment" class="flex flex-col gap-6">
<form
@submit.prevent="submitComment"
class="flex flex-col gap-6"
>
<textarea
:disabled="!token"
class="w-full min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200"
@@ -65,10 +67,7 @@ const submitComment = async () => {
نظر بنویسید
</Button>
<NuxtLink v-else to="/signin">
<Button
type="button"
class="rounded-full w-full"
>
<Button type="button" class="rounded-full w-full">
وارد شوید
</Button>
</NuxtLink>
@@ -90,7 +89,6 @@ const submitComment = async () => {
/>
</div>
</div>
</div>
</section>
</template>
</template>