added support for discussions on applications

This commit is contained in:
2025-08-17 17:11:21 -04:00
parent 459ade62dd
commit 7913b45629
2 changed files with 84 additions and 2 deletions

View File

@@ -0,0 +1,71 @@
<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'
const props = defineProps<{
messages: Array<Record<string, any>>
}>()
const emit = defineEmits<{
(e: 'post', text: string): void
}>()
const commentSchema = toTypedSchema(
z.object({
text: z.string().trim().min(1, 'Required').max(2000, 'Max 2000 characters'),
})
)
// vee-validate passes (values, actions) to @submit
function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => void }) {
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 class="sr-only">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">
<Button type="submit">Post</Button>
</div>
</Form>
<!-- Existing posts -->
<div class="space-y-3">
<div
v-for="(m, i) in props.messages"
:key="m.id ?? i"
class="rounded-md border border-neutral-800 p-3"
>
<p class="text-sm whitespace-pre-wrap">{{ m.text ?? m.message ?? '' }}</p>
</div>
</div>
</div>
</template>