next/components/reviews/singleReview.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>