init git
This commit is contained in:
mohadese namavar
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="product-comment-form">
|
||||
<div>
|
||||
<div>
|
||||
<h2>{{ $t('yourComment') }}</h2>
|
||||
<Button v-bind="closeBtn.props" @click="dialog.close()" />
|
||||
</div>
|
||||
<p>{{ $t('aboutTheProdcut', { title }) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="(item, key) in fields" :key="key">
|
||||
<component :is="item.is" ref="chips" :id="key" v-bind="item.props" v-model="form[key]" />
|
||||
<label :for="key">{{ item.label }}</label>
|
||||
<template v-if="['positive', 'negative'].includes(key)">
|
||||
<Button icon="isax isax-add" severity="secondary" text @click="addChip(i)" />
|
||||
</template>
|
||||
<small v-if="errors[key]">{{ errors[key] }}</small>
|
||||
</li>
|
||||
<li>
|
||||
<label> {{ $t('yourScore') }} : </label>
|
||||
<ul>
|
||||
<li v-for="i in 5" :key="i" @click="form.point = i">
|
||||
<img src="/icons/star.svg" :class="starsClass(i)" />
|
||||
</li>
|
||||
</ul>
|
||||
<small v-if="errors.point">{{ errors.point }}</small>
|
||||
</li>
|
||||
<li>
|
||||
<label>{{ $t('description') }} :</label>
|
||||
<Textarea v-model="form.content" :placeholder="$t('writeDesc')" />
|
||||
<small v-if="errors.content">{{ errors.content }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Button :label="$t('submitComment')" :loading="loading" @click="submit()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import init from '../../../../initialize/productCommentForm.js'
|
||||
const { closeBtn, fields } = init()
|
||||
const { toast, t } = inject('service')
|
||||
const dialog = inject('dialogRef')
|
||||
const { title, id } = dialog.value.data
|
||||
const chips = ref()
|
||||
|
||||
const form = reactive({})
|
||||
const errors = ref({});
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const submit = async () => {
|
||||
if (Object.keys(errors.value).length < 1) {
|
||||
loading.value = true
|
||||
|
||||
const { status, error } = await useFetch(`/api/comments/${id}`, {
|
||||
headers: { Authorization: useCookie('token') }, method: 'post', body: form
|
||||
})
|
||||
|
||||
if (status.value == 'success') {
|
||||
toast.add({
|
||||
life: 3000, severity: 'success', summary: t('success'), detail: t('yourCommentSummited')
|
||||
})
|
||||
dialog.value.close()
|
||||
} else {
|
||||
if (error.value.statusCode == 422)
|
||||
{errors.value = error.value.data}
|
||||
else
|
||||
toast.add({
|
||||
life: 3000, severity: 'error', summary: t('error'), detail: error.value.message
|
||||
})
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const addChip = (i) => {
|
||||
chips.value[i].addItem(new Event('keydown'), chips.value[i].$data.inputValue, true)
|
||||
}
|
||||
|
||||
const starsClass = (i) => (i > (form?.point || 0) ? 'opacity-25' : '')
|
||||
|
||||
|
||||
watch(computed(() => form), (value, old) => {
|
||||
Object.keys(errors.value).forEach(key => {
|
||||
if (value[key] != old[key]) delete errors.value[key]
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.product-comment-form {
|
||||
@apply w-full lg:w-[40.1rem] lg:h-[48.6rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col relative;
|
||||
|
||||
&::before {
|
||||
@apply content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none z-0;
|
||||
}
|
||||
|
||||
&>div:nth-of-type(1) {
|
||||
@apply flex flex-col gap-1.5 lg:gap-2 p-6 lg:px-10 lg:py-8 lg:border-b-2 border-[#E5E5E5];
|
||||
|
||||
&>div {
|
||||
@apply flex justify-between items-center;
|
||||
|
||||
h2 {
|
||||
@apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply -mx-4 -my-3;
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-[1.4em] lg:text-3xl text-[#191919];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-vazir;
|
||||
}
|
||||
}
|
||||
|
||||
&>div:nth-of-type(2) {
|
||||
@apply lg:h-[29.9rem] grow p-6 lg:py-8 lg:px-10 lg:overflow-y-auto;
|
||||
|
||||
&>ul {
|
||||
@apply w-full flex flex-col items-center gap-[1.9rem] lg:gap-6 lg:py-1.5 lg:pr-14 lg:pl-16;
|
||||
|
||||
&>li:nth-of-type(-n + 3) {
|
||||
@apply w-[21.4rem] lg:w-[27.1rem] lg:min-h-[3.5rem] relative mt-1.5 lg:mt-3 flex items-center [&_button]:first:hidden;
|
||||
|
||||
button {
|
||||
@apply text-2xl absolute left-0 top-0 text-[#7F7F7F];
|
||||
}
|
||||
|
||||
label {
|
||||
@apply w-max absolute right-3 top-4 lg:top-3.5 px-1 bg-white transition-['top'];
|
||||
@apply text-neutral-400 text-sm lg:text-base font-medium font-vazir cursor-text;
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
|
||||
&>input {
|
||||
@apply h-[3.4rem] pl-10 rtl w-full rounded-[0.6rem] border shadow-none;
|
||||
@apply text-zinc-800 font-vazir;
|
||||
}
|
||||
|
||||
.p-chips {
|
||||
@apply w-full max-w-full rounded-[0.6rem];
|
||||
|
||||
ul {
|
||||
@apply pl-8 w-full h-max grow flex-row-reverse;
|
||||
|
||||
input {
|
||||
@apply w-full rtl text-zinc-800 font-vazir;
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
@apply ltr my-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:focus),
|
||||
&:has(.p-chips-token-label),
|
||||
&:has(input:not(:placeholder-shown)) {
|
||||
label {
|
||||
@apply -top-2 h-4;
|
||||
@apply text-zinc-800 text-xs font-normal font-vazir;
|
||||
}
|
||||
}
|
||||
|
||||
small{
|
||||
@apply absolute -bottom-6 left-0 ;
|
||||
}
|
||||
}
|
||||
|
||||
&>li:nth-of-type(4) {
|
||||
@apply w-[21.4rem] lg:w-[27.1rem] flex items-center gap-4 lg:mt-2;
|
||||
|
||||
label {
|
||||
@apply text-[#4C4C4C] text-sm lg:text-xl font-medium font-vazir;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply flex gap-1.5;
|
||||
|
||||
img {
|
||||
@apply w-[1.1rem] h-[1.1rem] lg:w-6 lg:h-6 cursor-pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>li:nth-of-type(5) {
|
||||
@apply flex flex-col gap-4 relative;
|
||||
|
||||
label {
|
||||
@apply text-[#4C4C4C] text-sm lg:text-xl font-medium font-vazir;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@apply w-[21.4rem] h-[12.1rem] lg:w-[27.1rem] lg:h-[12.1rem] p-4 rounded-[0.6rem] border border-[#E5E5E5];
|
||||
|
||||
&::placeholder {
|
||||
@apply text-[#999999] text-xs lg:text-lg font-normal font-vazir;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>li::after {
|
||||
content: attr(error);
|
||||
@apply text-red-500 text-sm absolute -bottom-6 left-0;
|
||||
}
|
||||
|
||||
small {
|
||||
@apply text-red-500 font-vazir mr-auto;
|
||||
}
|
||||
|
||||
li:has(small) * {
|
||||
@apply border-red-500 #{!important};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>button {
|
||||
@apply w-[21.4rem] lg:w-[35.1rem] h-[2.9rem] my-6 self-center lg:h-14 lg:m-10 #{!important};
|
||||
|
||||
.p-button-label {
|
||||
@apply font-bold font-vazir leading-tight text-sm lg:text-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="product-comments">
|
||||
<div>
|
||||
<Button icon="isax isax-arrow-right-1" link @click="$emit('close')" />
|
||||
<h2>{{ $t("commentsCount", { count: 5 }) }}</h2>
|
||||
<Button icon="isax isax-document-filter" link @click="handleClick" />
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="(item, i) in items" :key="i">
|
||||
<ProductCommentItem :data="item" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Button :label="$t('submitComment')" icon="isax isax-message" rounded @click="handleClick" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const items = reactive([{}, {}, {}, {}, {}, {}, {}, {}, {}]);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.product-comments {
|
||||
@apply w-full bg-white rounded-t-[0.6rem] flex flex-col gap-10 relative px-6 pt-6 overflow-hidden;
|
||||
|
||||
&>div:nth-of-type(1) {
|
||||
@apply w-full flex items-center gap-3;
|
||||
|
||||
&>h2 {
|
||||
@apply text-[#333333] text-sm font-medium font-vazir ml-auto;
|
||||
}
|
||||
|
||||
&>button {
|
||||
@apply -mx-4 -my-3;
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-[#333333] text-[1.4em];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>div:nth-of-type(2) {
|
||||
@apply h-full overflow-y-auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
&>ul {
|
||||
@apply h-max flex flex-col gap-6;
|
||||
}
|
||||
}
|
||||
|
||||
&>button {
|
||||
@apply absolute left-6 bottom-5 w-[8.3rem] h-12 px-[1.4rem] #{!important};
|
||||
|
||||
.p-button-label {
|
||||
@apply text-xs font-vazir;
|
||||
}
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="product-comments-sort">
|
||||
<div>
|
||||
<Button icon="pi pi-times" link @click="$emit('close')" />
|
||||
<h2>{{ $t("sortBy") }}</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="(item, key) in items" :key="key">
|
||||
<h3 @click="events.select(key)" v-ripple>
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<i v-if="item.selected" class="pi pi-check"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { t } = useI18n();
|
||||
const items = reactive({
|
||||
newest: { title: t("newest"), selected: true },
|
||||
mostUseful: { title: t("mostUseful") },
|
||||
});
|
||||
|
||||
const events = reactive({
|
||||
select: (key) => {
|
||||
items.newest.selected = false;
|
||||
items.mostUseful.selected = false;
|
||||
items[key].selected = true;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.product-comments-sort {
|
||||
@apply w-full flex flex-col gap-9 p-6 bg-white rounded-t-[0.6rem];
|
||||
|
||||
&>div {
|
||||
@apply flex items-center gap-3;
|
||||
|
||||
&>button {
|
||||
@apply -mx-4 -my-3 text-[#333333] #{!important};
|
||||
}
|
||||
|
||||
&>h2 {
|
||||
@apply text-[#333333] text-sm font-medium font-vazir;
|
||||
}
|
||||
}
|
||||
|
||||
&>ul {
|
||||
@apply w-full flex flex-col gap-4;
|
||||
|
||||
&>li {
|
||||
@apply flex items-center justify-between pb-4 first:border-b text-[#333333];
|
||||
|
||||
h3 {
|
||||
@apply text-xs font-medium font-vazir;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user