HAM!DREZA
125 lines
3.8 KiB
Vue
125 lines
3.8 KiB
Vue
<template>
|
|
<Panel :header="$t('پاسخ به نظرات')">
|
|
<div v-for="item in data.comments" :key="item.id">
|
|
<div class="card mb-8">
|
|
<Panel toggleable>
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<Avatar :image="item.createdBy.avatarMedia" size="large" shape="circle" />
|
|
<span class="font-bold">{{item.createdBy.name}}</span>
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<div class="flex flex-wrap items-center justify-between gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<Button icon="pi pi-reply" rounded text @click="reply(item.id)"></Button>
|
|
<Tag v-if="item.replies.length === 0" icon="pi pi-times" class="gap-1" severity="danger" value="در انتظار پاسخ"></Tag>
|
|
<Tag v-else icon="pi pi-check" severity="success" class="gap-1" value="پاسخ داده شده"></Tag>
|
|
</div>
|
|
<span class="text-surface-500 dark:text-surface-400">{{ jDate(item.createdAt) }}</span>
|
|
</div>
|
|
</template>
|
|
<template #icons>
|
|
<Menu ref="menu" id="config_menu" :model="items" popup />
|
|
</template>
|
|
<p class="m-0">
|
|
{{ item.text }}
|
|
</p>
|
|
<p v-for="answr in item.replies" :key="answr.id" class="border rounded-md ms-[60px] mt-2 p-2">{{answr.text}}</p>
|
|
</Panel>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<Textarea v-model="value" placeholder="پاسخ..." class="w-full" rows="5" />
|
|
<div class="flex pt-4 justify-end">
|
|
<Button
|
|
:label="$t('send')"
|
|
icon="pi pi-send"
|
|
severity="success"
|
|
:loading="saving"
|
|
@click="sendReply"
|
|
/>
|
|
</div>
|
|
</Panel>
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
import { useToast } from "primevue/usetoast";
|
|
import { useRouter } from 'vue-router';
|
|
import Menu from 'primevue/menu';
|
|
import {jDate} from "@/utils/jDate";
|
|
import { ref, watchEffect } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import {useProductsStore} from "@/stores/products";
|
|
import {useCommentStore} from "@/stores/courseComments"
|
|
const store = useProductsStore()
|
|
const commentStore = useCommentStore()
|
|
const route = useRoute()
|
|
const data = ref([])
|
|
|
|
const menu = ref(null);
|
|
const toast = useToast();
|
|
const router = useRouter();
|
|
const replyTarget = ref(null)
|
|
const value = ref(null)
|
|
const reply = (id) =>{
|
|
replyTarget.value = id
|
|
}
|
|
const sendReply = async() =>{
|
|
if (replyTarget.value === null || replyTarget.value === '') {
|
|
return console.log('کامنت مورد نظر را انتخاب کنید');
|
|
}
|
|
if (value.value === null || value.value === '') {
|
|
return console.log('متن پیام را وارد کنید');
|
|
}
|
|
// console.log(value.value);
|
|
const rep = await commentStore.reply(route.params.id, {
|
|
text: value.value,
|
|
parent: replyTarget.value
|
|
})
|
|
console.log('rep', rep);
|
|
}
|
|
const items = ref([
|
|
{
|
|
label: 'Refresh',
|
|
icon: 'pi pi-refresh'
|
|
},
|
|
{
|
|
label: 'Search',
|
|
icon: 'pi pi-search'
|
|
},
|
|
{
|
|
separator: true
|
|
},
|
|
{
|
|
label: 'Delete',
|
|
icon: 'pi pi-times'
|
|
}
|
|
]);
|
|
|
|
const toggle = (event) => {
|
|
menu.value.toggle(event);
|
|
};
|
|
|
|
const save = () => {
|
|
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
|
};
|
|
|
|
watchEffect(async() => {
|
|
data.value = await store.edit(route.params.id)
|
|
console.log('store', data.value.comments);
|
|
})
|
|
</script> |