Added "approved by" system

This commit is contained in:
2026-01-16 16:26:20 -05:00
parent 1c1358f9d0
commit 19eb2be252
4 changed files with 56 additions and 23 deletions

View File

@@ -26,7 +26,7 @@ import { error } from 'console';
import Input from '../ui/input/Input.vue';
import Field from '../ui/field/Field.vue';
const { handleSubmit, errors, values, resetForm, setFieldValue } = useForm({
const { handleSubmit, errors, values, resetForm, setFieldValue, submitCount } = useForm({
validationSchema: toTypedSchema(batchPromotionSchema),
validateOnMount: false,
})
@@ -96,7 +96,7 @@ function filterRanks(query: string): Rank[] {
r.name.toLowerCase().includes(q) ||
r.short_name.toLowerCase().includes(q)
);
}
}
onMounted(async () => {
allmembers.value = await getAllLightMembers()
@@ -123,21 +123,15 @@ function setAllToday() {
<template>
<div class="w-xl">
<form v-if="!formSubmitted" id="trainingForm" @submit.prevent="submitForm"
class="w-full min-w-0 flex flex-col gap-6">
class="w-full min-w-0 flex flex-col gap-4">
<div>
<FieldLegend class="scroll-m-20 text-2xl font-semibold tracking-tight">
Promotion Form
</FieldLegend>
</div>
<VeeFieldArray name="promotions" v-slot="{ fields, push, remove }">
<FieldSet class="w-full min-w-0">
<div class="flex flex-col gap-2">
<div>
<FieldLegend class="scroll-m-20 text-2xl font-semibold tracking-tight">
Promotion Form
</FieldLegend>
<div class="h-6">
<p v-if="errors.promotions && typeof errors.promotions === 'string'"
class="text-sm text-red-500">
{{ errors.promotions }}
</p>
</div>
</div>
<!-- TABLE SHELL -->
<div class="">
<FieldGroup class="">
@@ -168,8 +162,7 @@ function setAllToday() {
:display-value="id =>
memberById.get(id)?.displayName ||
memberById.get(id)?.username
" @input="memberSearch = $event.target.value"
/>
" @input="memberSearch = $event.target.value" />
</ComboboxAnchor>
<ComboboxList>
<ComboboxEmpty>No results</ComboboxEmpty>
@@ -250,9 +243,48 @@ function setAllToday() {
</div>
</FieldSet>
</VeeFieldArray>
<div class="flex justify-end items-center gap-5">
<p v-if="submitError" class="text-destructive">{{ submitError }}</p>
<Button type="submit">Submit</Button>
<div class="flex justify-between items-start">
<VeeField name="approver" v-slot="{ field, errors }">
<div class="flex flex-col min-w-0 gap-2">
<p>Approved By</p>
<Combobox :model-value="field.value" @update:model-value="field.onChange" :ignore-filter="true">
<ComboboxAnchor>
<ComboboxInput class="w-full pl-3" placeholder="Search members" :display-value="id =>
memberById.get(id)?.displayName ||
memberById.get(id)?.username
" @input="memberSearch = $event.target.value" />
</ComboboxAnchor>
<ComboboxList>
<ComboboxEmpty>No results</ComboboxEmpty>
<ComboboxGroup>
<div class="max-h-80 overflow-y-auto min-w-[12rem] scrollbar-themed">
<ComboboxItem v-for="member in filteredMembers" :key="member.id"
:value="member.id">
{{ member.displayName || member.username }}
<ComboboxItemIndicator>
<Check />
</ComboboxItemIndicator>
</ComboboxItem>
</div>
</ComboboxGroup>
</ComboboxList>
</Combobox>
<div class="h-5">
<FieldError v-if="errors.length" :errors="errors" />
</div>
</div>
</VeeField>
<div class="flex flex-col items-end gap-2">
<div class="h-6" />
<Button type="submit" class="w-min">Submit</Button>
<p v-if="submitError" class="text-destructive">{{ submitError }}</p>
<div v-else class="h-6 flex justify-end">
<p v-if="submitCount > 0 && errors.promotions && typeof errors.promotions === 'string'"
class="text-sm text-red-500">
{{ errors.promotions }}
</p>
</div>
</div>
</div>
</form>
<div v-else>