ajdj100
5354fa85f1
Some checks failed
Continuous Deployment / Update Deployment (push) Failing after 1m28s
91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { Form } from 'vee-validate'
|
|
import {
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import Textarea from '@/components/ui/textarea/Textarea.vue'
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import * as z from 'zod'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import { CommentRow } from '@shared/types/application'
|
|
import { Dot } from 'lucide-vue-next'
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
messages: CommentRow[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'post', text: string): void
|
|
(e: 'postInternal', text: string): void
|
|
}>()
|
|
|
|
const commentSchema = toTypedSchema(
|
|
z.object({
|
|
text: z.string().trim().min(1, 'Required').max(2000, 'Max 2000 characters'),
|
|
})
|
|
)
|
|
|
|
const submitMode = ref("public");
|
|
|
|
// vee-validate passes (values, actions) to @submit
|
|
function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => void }) {
|
|
if (submitMode.value === "internal")
|
|
emit('postInternal', values.text.trim())
|
|
else
|
|
emit('post', values.text.trim())
|
|
resetForm()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<Form :validation-schema="commentSchema" @submit="onSubmit">
|
|
<FormField name="text" v-slot="{ componentField }">
|
|
<FormItem>
|
|
<FormLabel>Comment</FormLabel>
|
|
<FormControl>
|
|
<Textarea v-bind="componentField" rows="3" placeholder="Write a comment…"
|
|
class="bg-neutral-800 resize-none w-full" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
|
|
<!-- Button below, right-aligned -->
|
|
<div class="mt-2 flex justify-end gap-2">
|
|
<Button type="submit" @click="submitMode = 'internal'" variant="outline">Post (Internal)</Button>
|
|
<Button type="submit" @click="submitMode = 'public'">Post (Public)</Button>
|
|
</div>
|
|
</Form>
|
|
|
|
<!-- Existing posts -->
|
|
<div class="space-y-3">
|
|
<div v-for="(message, i) in props.messages" :key="message.comment_id ?? i" class="rounded-md border p-3 space-y-5"
|
|
:class="message.admin_only ? 'border-amber-300/70' : 'border-neutral-800'">
|
|
<!-- Comment header -->
|
|
<div class="flex justify-between">
|
|
<div class="flex">
|
|
<p>{{ message.poster_name }}</p>
|
|
<p v-if="message.admin_only" class="flex">
|
|
<Dot /><span class="text-amber-300">Internal</span>
|
|
</p>
|
|
</div>
|
|
<p class="text-muted-foreground">{{ new Date(message.post_time).toLocaleString("EN-us", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit"
|
|
}) }}</p>
|
|
</div>
|
|
<p>{{ message.post_content }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |