128 lines
3.5 KiB
Vue
128 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import { Form as veeForm, Field as veeField, useForm } from "vee-validate";
|
|
import { IReview } from "@models/stories/review";
|
|
import { comment } from "@client/editorConfig";
|
|
import { SingleChapterResult } from "@client/types/slightlyDifferentStory";
|
|
const props = defineProps<{ review: IReview; story: SingleChapterResult }>();
|
|
const review = toRef(props.review);
|
|
const story = toRef(props.story);
|
|
const { data } = useAuth();
|
|
const isCommentAuthor = computed(() => {
|
|
return data?.value?.user?._id === props.review.author._id;
|
|
});
|
|
const isAuthor = computed(() => {
|
|
return props.story.author._id === data?.value?.user?._id;
|
|
});
|
|
const replyFormVisible = ref<boolean>(false);
|
|
const isEditing = ref<boolean>(false);
|
|
const editSubmit = async (values) => {
|
|
const { data } = await useApiFetch<any>(`/review/${props.review._id}`, {
|
|
method: "put",
|
|
body: values,
|
|
});
|
|
review.value.text = data.value.data.text;
|
|
isEditing.value = false;
|
|
};
|
|
|
|
const replySubmit = async (values) => {
|
|
const { data } = await useApiFetch<any>(
|
|
`/review/${props.review._id}/reply`,
|
|
{
|
|
method: "post",
|
|
body: values,
|
|
},
|
|
);
|
|
review.value.replies.push(data.value.data);
|
|
replyFormVisible.value = false;
|
|
};
|
|
|
|
const reallyDelete = async () => {
|
|
await useApiFetch(`/review/${props.review._id}`, {
|
|
method: "delete",
|
|
});
|
|
};
|
|
|
|
// const { handleSubmit } = useForm()
|
|
</script>
|
|
|
|
<template>
|
|
<a-comment>
|
|
<template #actions>
|
|
<div v-if="!!data?.user" class="review-actions">
|
|
<a-button
|
|
v-if="isCommentAuthor"
|
|
@click="() => (isEditing = !isEditing)"
|
|
>
|
|
Edit
|
|
</a-button>
|
|
<a-popconfirm
|
|
title="Are you sure you want to permanently delete this review?"
|
|
ok-text="Yes"
|
|
cancel-text="Never mind"
|
|
@confirm="reallyDelete"
|
|
v-if="isCommentAuthor || isAuthor"
|
|
>
|
|
<a-button> Delete </a-button>
|
|
</a-popconfirm>
|
|
<a-button
|
|
v-if="isAuthor"
|
|
type="primary"
|
|
@click="() => (replyFormVisible = !replyFormVisible)"
|
|
>
|
|
Reply
|
|
</a-button>
|
|
</div>
|
|
</template>
|
|
<template #author>
|
|
<b style="display: flex">
|
|
<i18n-t keypath="reviews.reviewFrom" v-if="review.replyingTo == null">
|
|
<nuxt-link :to="`/user/${review.author._id}`">
|
|
{{ review.author.username }}
|
|
</nuxt-link>
|
|
</i18n-t>
|
|
<i18n-t keypath="reviews.responseFrom" v-else>
|
|
<nuxt-link :to="`/user/${review.author._id}`">
|
|
{{ review.author.username }}
|
|
</nuxt-link>
|
|
</i18n-t>
|
|
</b>
|
|
</template>
|
|
<template #content>
|
|
<div>
|
|
<vee-form @submit="editSubmit" v-if="isEditing">
|
|
<vee-field name="content" v-slot="{ value, field, errorMessage }">
|
|
<base-editor
|
|
:val="review.text"
|
|
:width="150"
|
|
label=""
|
|
:name="field.name"
|
|
:init="comment"
|
|
/>
|
|
</vee-field>
|
|
<a-button type="primary" html-type="submit"> Edit review </a-button>
|
|
</vee-form>
|
|
<div v-else v-html="review.text" />
|
|
<vee-form @submit="replySubmit" v-if="replyFormVisible">
|
|
<vee-field name="content" v-slot="{ value, field, errorMessage }">
|
|
<base-editor
|
|
:width="150"
|
|
label=""
|
|
:name="field.name"
|
|
:init="comment"
|
|
/>
|
|
</vee-field>
|
|
<a-button type="primary" html-type="submit"> Post response </a-button>
|
|
</vee-form>
|
|
</div>
|
|
</template>
|
|
<div v-for="reply in review.replies">
|
|
<single-review :review="reply" :story="story" />
|
|
</div>
|
|
</a-comment>
|
|
</template>
|
|
<style scoped>
|
|
.review-actions > * + * {
|
|
margin-left: 0.4em;
|
|
}
|
|
</style>
|