Merge remote-tracking branch 'Origin/main' into Mobile-Enhancements
This commit is contained in:
@@ -21,6 +21,7 @@ import { useAuth } from '@/composables/useAuth';
|
||||
import { ArrowUpRight, ChevronDown, ChevronUp, CircleArrowOutUpRight, LogIn, LogOut, Menu, Settings, X } from 'lucide-vue-next';
|
||||
import DropdownMenuGroup from '../ui/dropdown-menu/DropdownMenuGroup.vue';
|
||||
import DropdownMenuSeparator from '../ui/dropdown-menu/DropdownMenuSeparator.vue';
|
||||
import { MemberState } from '@shared/types/member';
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
const userStore = useUserStore();
|
||||
@@ -176,7 +177,7 @@ function mobileNavigateTo(to: string) {
|
||||
<img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
|
||||
</RouterLink>
|
||||
<!-- Member navigation -->
|
||||
<div v-if="auth.accountStatus.value == 'member'" class="h-15 flex items-center justify-center">
|
||||
<div v-if="auth.accountStatus.value == MemberState.Member" class="h-15 flex items-center justify-center">
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList class="gap-3">
|
||||
|
||||
@@ -263,6 +264,12 @@ function mobileNavigateTo(to: string) {
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
<NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/administration/members" @click="blurAfter">
|
||||
Member Management
|
||||
</RouterLink>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuLink v-if="auth.hasRole('17th Administrator')" as-child
|
||||
:class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/administration/roles" @click="blurAfter">
|
||||
@@ -272,12 +279,11 @@ function mobileNavigateTo(to: string) {
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<!-- <NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/members" @click="blurAfter">
|
||||
Members (debug)
|
||||
</RouterLink>
|
||||
</NavigationMenuItem> -->
|
||||
|
||||
<NavigationMenuItem v-if="auth.hasRole('Dev')">
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/developer" @click="blurAfter">Developer</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '@/components/ui/button/Button.vue';
|
||||
import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
|
||||
import { useForm, Field as VeeField } from 'vee-validate';
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from '@/components/ui/field'
|
||||
import FieldError from '@/components/ui/field/FieldError.vue';
|
||||
import Input from '@/components/ui/input/Input.vue';
|
||||
import Textarea from '@/components/ui/textarea/Textarea.vue';
|
||||
import { toTypedSchema } from '@vee-validate/zod';
|
||||
import { Form } from 'vee-validate';
|
||||
import { nextTick, onMounted, ref, watch } from 'vue';
|
||||
import * as z from 'zod';
|
||||
import DateInput from '../form/DateInput.vue';
|
||||
@@ -58,13 +58,22 @@ const fallbackInitials = {
|
||||
|
||||
const props = defineProps<{
|
||||
readOnly: boolean,
|
||||
data: ApplicationData,
|
||||
data: ApplicationData | null,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['submit']);
|
||||
|
||||
const initialValues = ref<Record<string, unknown> | null>(null);
|
||||
|
||||
const { handleSubmit, resetForm, values } = useForm({
|
||||
validationSchema: formSchema,
|
||||
validateOnMount: false,
|
||||
});
|
||||
|
||||
const submitForm = handleSubmit(async (val) => {
|
||||
await onSubmit(val);
|
||||
});
|
||||
|
||||
async function onSubmit(val: any) {
|
||||
emit('submit', val);
|
||||
}
|
||||
@@ -80,6 +89,9 @@ onMounted(async () => {
|
||||
initialValues.value = { ...fallbackInitials };
|
||||
}
|
||||
|
||||
// apply the initial values to the vee-validate form
|
||||
resetForm({ values: initialValues.value });
|
||||
|
||||
// CoCbox.value.innerHTML = await getCoC()
|
||||
CoCString.value = await getCoC();
|
||||
})
|
||||
@@ -103,235 +115,237 @@ function enforceExternalLinks() {
|
||||
}
|
||||
|
||||
watch(() => showCoC.value, async () => {
|
||||
if (showCoC) {
|
||||
if (showCoC.value) {
|
||||
await nextTick(); // wait for v-html to update
|
||||
enforceExternalLinks();
|
||||
}
|
||||
});
|
||||
|
||||
function convertToAge(dob: string) {
|
||||
|
||||
if (dob === undefined) return "";
|
||||
const [month, day, year] = dob.split('/').map(Number);
|
||||
|
||||
let dobDate = new Date(year, month - 1, day);
|
||||
|
||||
return Math.floor(
|
||||
let out = Math.floor(
|
||||
(Date.now() - dobDate.getTime()) / (1000 * 60 * 60 * 24 * 365.2425)
|
||||
);
|
||||
|
||||
return Number.isNaN(out) ? "" : out;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form v-if="initialValues" :validation-schema="formSchema" :initial-values="initialValues" @submit="onSubmit"
|
||||
class="space-y-6">
|
||||
<form v-if="initialValues" @submit.prevent="submitForm" class="space-y-6">
|
||||
<!-- Age -->
|
||||
<FormField name="dob" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>What is your date of birth?</FormLabel>
|
||||
<FormControl>
|
||||
<template class="flex items-center gap-10">
|
||||
<DateInput :model-value="(value as string) ?? ''" :disabled="readOnly" @update:model-value="handleChange" />
|
||||
<p class="text-muted-foreground">Age: {{ convertToAge(value) }}</p>
|
||||
</template>
|
||||
</FormControl>
|
||||
<VeeField name="dob" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>What is your date of birth?</FieldLabel>
|
||||
<FieldContent>
|
||||
<div class="flex items-center gap-10">
|
||||
<DateInput :model-value="(field.value as string) ?? ''" :disabled="readOnly" @update:model-value="field.onChange" />
|
||||
<p v-if="props.readOnly" class="text-muted-foreground">Age: {{ convertToAge(field.value) }}</p>
|
||||
</div>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Name -->
|
||||
<FormField name="name" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>What name will you be going by within the community?</FormLabel>
|
||||
<FormDescription>This name must be consistent across platforms.</FormDescription>
|
||||
<FormControl>
|
||||
<Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
|
||||
</FormControl>
|
||||
<VeeField name="name" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>What name will you be going by within the community?</FieldLabel>
|
||||
<FieldDescription>This name must be consistent across platforms.</FieldDescription>
|
||||
<FieldContent>
|
||||
<Input :model-value="field.value" @update:model-value="field.onChange" :disabled="readOnly" />
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Playtime -->
|
||||
<FormField name="playtime" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>How long have you played Arma 3 for (in hours)?</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
|
||||
</FormControl>
|
||||
<VeeField name="playtime" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>How long have you played Arma 3 for (in hours)?</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input type="number" :model-value="field.value" @update:model-value="field.onChange" :disabled="readOnly" />
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Hobbies -->
|
||||
<FormField name="hobbies" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>What hobbies do you like to participate in outside of gaming?</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
|
||||
<VeeField name="hobbies" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>What hobbies do you like to participate in outside of gaming?</FieldLabel>
|
||||
<FieldContent>
|
||||
<Textarea rows="4" class="resize-none" :model-value="field.value" @update:model-value="field.onChange"
|
||||
:disabled="readOnly" />
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Military (boolean) -->
|
||||
<FormField name="military" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Have you ever served in the military?</FormLabel>
|
||||
<FormControl>
|
||||
<VeeField name="military" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>Have you ever served in the military?</FieldLabel>
|
||||
<FieldContent>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
|
||||
<Checkbox :model-value="field.value" @update:model-value="field.onChange" :disabled="readOnly" />
|
||||
<span>Yes (checked) / No (unchecked)</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Other communities (freeform) -->
|
||||
<FormField name="communities" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Are you a part of any other communities? If so, which ones? If none, type "No"</FormLabel>
|
||||
<FormControl>
|
||||
<Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
|
||||
</FormControl>
|
||||
<VeeField name="communities" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>Are you a part of any other communities? If so, which ones? If none, type "No"</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input :model-value="field.value" @update:model-value="field.onChange" :disabled="readOnly" />
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Why join -->
|
||||
<FormField name="joinReason" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Why do you want to join our community?</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
|
||||
<VeeField name="joinReason" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>Why do you want to join our community?</FieldLabel>
|
||||
<FieldContent>
|
||||
<Textarea rows="4" class="resize-none" :model-value="field.value" @update:model-value="field.onChange"
|
||||
:disabled="readOnly" />
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Attraction to milsim -->
|
||||
<FormField name="milsimAttraction" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>What attracts you to the Arma 3 milsim playstyle?</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
|
||||
<VeeField name="milsimAttraction" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>What attracts you to the Arma 3 milsim playstyle?</FieldLabel>
|
||||
<FieldContent>
|
||||
<Textarea rows="4" class="resize-none" :model-value="field.value" @update:model-value="field.onChange"
|
||||
:disabled="readOnly" />
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Referral (freeform) -->
|
||||
<FormField name="referral" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Where did you hear about us? (If another member, who?)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange"
|
||||
<VeeField name="referral" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>Where did you hear about us? (If another member, who?)</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input placeholder="e.g., Reddit / Member: Alice" :model-value="field.value" @update:model-value="field.onChange"
|
||||
:disabled="readOnly" />
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Steam profile -->
|
||||
<FormField name="steamProfile" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Steam profile link</FormLabel>
|
||||
<FormDescription>
|
||||
<VeeField name="steamProfile" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>Steam profile link</FieldLabel>
|
||||
<FieldDescription>
|
||||
Format: <code>https://steamcommunity.com/id/USER/</code> or
|
||||
<code>https://steamcommunity.com/profiles/STEAMID64/</code>
|
||||
</FormDescription>
|
||||
<FormControl>
|
||||
<Input type="url" placeholder="https://steamcommunity.com/profiles/7656119..." :model-value="value"
|
||||
@update:model-value="handleChange" :disabled="readOnly" />
|
||||
</FormControl>
|
||||
</FieldDescription>
|
||||
<FieldContent>
|
||||
<Input type="url" placeholder="https://steamcommunity.com/profiles/7656119..." :model-value="field.value"
|
||||
@update:model-value="field.onChange" :disabled="readOnly" />
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Timezone -->
|
||||
<FormField name="timezone" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>What time zone are you in?</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange"
|
||||
<VeeField name="timezone" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>What time zone are you in?</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input placeholder="e.g., AEST, EST, UTC+10" :model-value="field.value" @update:model-value="field.onChange"
|
||||
:disabled="readOnly" />
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Attendance (boolean) -->
|
||||
<FormField name="canAttendSaturday" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Are you able to attend weekly operations Saturdays @ 7pm CST?</FormLabel>
|
||||
<FormControl>
|
||||
<VeeField name="canAttendSaturday" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>Are you able to attend weekly operations Saturdays @ 7pm CST?</FieldLabel>
|
||||
<FieldContent>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox :model-value="value ?? false" @update:model-value="handleChange" :disabled="readOnly" />
|
||||
<Checkbox :model-value="field.value ?? false" @update:model-value="field.onChange" :disabled="readOnly" />
|
||||
<span>Yes (checked) / No (unchecked)</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Interests / Playstyle (freeform) -->
|
||||
<FormField name="interests" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Which playstyles interest you?</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange"
|
||||
<VeeField name="interests" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>Which playstyles interest you?</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="field.value" @update:model-value="field.onChange"
|
||||
:disabled="readOnly" />
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- Code of Conduct (boolean, field name kept as-is) -->
|
||||
<FormField name="acknowledgeRules" v-slot="{ value, handleChange }">
|
||||
<FormItem>
|
||||
<FormLabel>Community Code of Conduct</FormLabel>
|
||||
<FormControl>
|
||||
<VeeField name="acknowledgeRules" v-slot="{ field, errors }">
|
||||
<Field>
|
||||
<FieldLabel>Community Code of Conduct</FieldLabel>
|
||||
<FieldContent>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
|
||||
<Checkbox :model-value="field.value" @update:model-value="field.onChange" :disabled="readOnly" />
|
||||
<span>By checking this box, you accept the <Button variant="link" class="p-0 h-min"
|
||||
@click.prevent.stop="showCoC = true">Code of
|
||||
Conduct</Button>.</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
</FieldContent>
|
||||
<div class="h-4">
|
||||
<FormMessage class="text-destructive" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<div class="pt-2" v-if="!readOnly">
|
||||
<Button type="submit" :disabled="readOnly">Submit Application</Button>
|
||||
@@ -348,5 +362,5 @@ function convertToAge(dob: string) {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
</Form>
|
||||
</form>
|
||||
</template>
|
||||
@@ -15,6 +15,7 @@ import { Calendar } from 'lucide-vue-next';
|
||||
import MemberCard from '../members/MemberCard.vue';
|
||||
import Spinner from '../ui/spinner/Spinner.vue';
|
||||
import { CopyLink } from '@/lib/copyLink';
|
||||
import { MemberState } from '@shared/types/member';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
@@ -31,9 +32,14 @@ watch(
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(loaded, (value) => {
|
||||
if (value) emit('load');
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
(e: 'reload'): void
|
||||
(e: 'load'): void
|
||||
(e: 'edit', event: CalendarEvent): void
|
||||
}>()
|
||||
|
||||
@@ -81,7 +87,7 @@ async function setAttendance(state: CalendarAttendance) {
|
||||
|
||||
const canEditEvent = computed(() => {
|
||||
if (!userStore.isLoggedIn) return false;
|
||||
if (userStore.state !== 'member') return false;
|
||||
if (userStore.state !== MemberState.Member) return false;
|
||||
if (userStore.user.member.member_id == activeEvent.value.creator_id)
|
||||
return true;
|
||||
});
|
||||
@@ -179,7 +185,7 @@ defineExpose({ forceReload })
|
||||
<template>
|
||||
<div v-if="loaded">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between gap-3 border-b px-4 py-3 ">
|
||||
<div class="flex items-center justify-between gap-3 border-b border-border px-4 py-3 ">
|
||||
<h2 class="text-lg font-semibold break-after-all">
|
||||
{{ activeEvent?.name || 'Event' }}
|
||||
</h2>
|
||||
@@ -226,15 +232,15 @@ defineExpose({ forceReload })
|
||||
<CircleAlert></CircleAlert> This event has been cancelled
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="isPast && userStore.state === 'member'" class="w-full">
|
||||
<ButtonGroup class="flex w-full">
|
||||
<Button variant="outline"
|
||||
<section v-if="isPast && userStore.state === MemberState.Member" class="w-full">
|
||||
<ButtonGroup class="flex w-full justify-center">
|
||||
<Button variant="outline" class="flex-1"
|
||||
:class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
|
||||
@click="setAttendance(CalendarAttendance.Attending)">Going</Button>
|
||||
<Button variant="outline"
|
||||
<Button variant="outline" class="flex-1"
|
||||
:class="myAttendance?.status === CalendarAttendance.Maybe ? 'border-2 !border-l-2 border-primary text-primary' : ''"
|
||||
@click="setAttendance(CalendarAttendance.Maybe)">Maybe</Button>
|
||||
<Button variant="outline"
|
||||
<Button variant="outline" class="flex-1"
|
||||
:class="myAttendance?.status === CalendarAttendance.NotAttending ? 'border-2 !border-l-2 border-primary text-primary' : ''"
|
||||
@click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
|
||||
</ButtonGroup>
|
||||
@@ -259,7 +265,7 @@ defineExpose({ forceReload })
|
||||
<!-- Description -->
|
||||
<section class="space-y-2 w-full">
|
||||
<p class="text-lg font-semibold">Description</p>
|
||||
<p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
|
||||
<p class="border border-border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
|
||||
{{ activeEvent.description }}
|
||||
</p>
|
||||
</section>
|
||||
@@ -273,8 +279,8 @@ defineExpose({ forceReload })
|
||||
<p>Declined <span class="ml-1">{{ attendanceStatusSummary.notAttending }}</span></p>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2">
|
||||
<div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
|
||||
<div class="flex flex-col border border-border bg-muted/50 rounded-lg min-h-24 my-2">
|
||||
<div class="flex w-full pt-2 border-b border-border *:w-full *:text-center *:pb-1 *:cursor-pointer">
|
||||
<label :class="attendanceTab === 'Alpha' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
||||
@click="attendanceTab = 'Alpha'">Alpha {{ attendanceCountsByGroup.Alpha }}</label>
|
||||
<label :class="attendanceTab === 'Echo' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
||||
@@ -283,14 +289,14 @@ defineExpose({ forceReload })
|
||||
@click="attendanceTab = 'Other'">Other {{ attendanceCountsByGroup.Other }}</label>
|
||||
</div>
|
||||
<div class="pb-1 min-h-48">
|
||||
<div class="grid grid-cols-2 font-semibold text-muted-foreground border-b py-1 px-3 mb-2">
|
||||
<div class="grid grid-cols-2 font-semibold text-muted-foreground border-b border-border py-1 px-3 mb-2">
|
||||
<p>Name</p>
|
||||
<p class="text-right">Status</p>
|
||||
</div>
|
||||
|
||||
<div v-for="person in attendanceList" :key="person.member_id"
|
||||
class="grid grid-cols-2 py-1 *:px-3 hover:bg-muted">
|
||||
<div>
|
||||
class="grid grid-cols-3 py-1 *:px-3 hover:bg-muted">
|
||||
<div class="col-span-2">
|
||||
<MemberCard :member-id="person.member_id"></MemberCard>
|
||||
</div>
|
||||
<p :class="statusColor(person.status)" class="text-right">
|
||||
@@ -302,11 +308,14 @@ defineExpose({ forceReload })
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex justify-center h-full items-center">
|
||||
<Button variant="ghost" size="icon" @click="emit('close')">
|
||||
<div v-else class="relative flex justify-center items-center h-full">
|
||||
<!-- Close button (top-right) -->
|
||||
<Button variant="ghost" size="icon" class="absolute top-2 right-2" @click="emit('close')">
|
||||
<X class="size-5" />
|
||||
</Button>
|
||||
|
||||
<Spinner class="size-8"></Spinner>
|
||||
<!-- Spinner (centered) -->
|
||||
<Spinner class="size-8" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -66,14 +66,19 @@ import { loaSchema } from '@shared/schemas/loaSchema'
|
||||
import { toTypedSchema } from "@vee-validate/zod";
|
||||
import Calendar from "../ui/calendar/Calendar.vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import Spinner from "../ui/spinner/Spinner.vue";
|
||||
|
||||
const { handleSubmit, values, resetForm } = useForm({
|
||||
validationSchema: toTypedSchema(loaSchema),
|
||||
})
|
||||
|
||||
const formSubmitted = ref(false);
|
||||
const submitting = ref(false);
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
//catch double submit
|
||||
if (submitting.value) return;
|
||||
submitting.value = true;
|
||||
const out: LOARequest = {
|
||||
member_id: values.member_id,
|
||||
start_date: values.start_date,
|
||||
@@ -88,6 +93,7 @@ const onSubmit = handleSubmit(async (values) => {
|
||||
userStore.loadUser();
|
||||
}
|
||||
formSubmitted.value = true;
|
||||
submitting.value = false;
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -325,7 +331,12 @@ const filteredMembers = computed(() => {
|
||||
</VeeField>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Button type="submit">Submit</Button>
|
||||
<Button type="submit" :disabled="submitting" class="w-35">
|
||||
<span class="flex items-center gap-2" v-if="submitting">
|
||||
<Spinner></Spinner> Submitting…
|
||||
</span>
|
||||
<span v-else>Submit</span>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else class="flex flex-col gap-4 py-8 text-left">
|
||||
|
||||
@@ -1,136 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { ChevronDown, ChevronUp, Ellipsis, X } from "lucide-vue-next";
|
||||
import { cancelLOA, extendLOA, getAllLOAs, getMyLOAs } from "@/api/loa";
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import { LOARequest } from "@shared/types/loa";
|
||||
import Dialog from "../ui/dialog/Dialog.vue";
|
||||
import DialogTrigger from "../ui/dialog/DialogTrigger.vue";
|
||||
import DialogContent from "../ui/dialog/DialogContent.vue";
|
||||
import DialogHeader from "../ui/dialog/DialogHeader.vue";
|
||||
import DialogTitle from "../ui/dialog/DialogTitle.vue";
|
||||
import DialogDescription from "../ui/dialog/DialogDescription.vue";
|
||||
import Button from "../ui/button/Button.vue";
|
||||
import Calendar from "../ui/calendar/Calendar.vue";
|
||||
import {
|
||||
CalendarDate,
|
||||
getLocalTimeZone,
|
||||
} from "@internationalized/date"
|
||||
import { el } from "@fullcalendar/core/internal-common";
|
||||
import MemberCard from "../members/MemberCard.vue";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from '@/components/ui/pagination'
|
||||
import { pagination } from "@shared/types/pagination";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { ChevronDown, ChevronUp, Ellipsis, X } from "lucide-vue-next";
|
||||
import { adminExtendLOA, cancelLOA, extendLOA, getAllLOAs, getMyLOAs } from "@/api/loa";
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import { LOARequest } from "@shared/types/loa";
|
||||
import Dialog from "../ui/dialog/Dialog.vue";
|
||||
import DialogTrigger from "../ui/dialog/DialogTrigger.vue";
|
||||
import DialogContent from "../ui/dialog/DialogContent.vue";
|
||||
import DialogHeader from "../ui/dialog/DialogHeader.vue";
|
||||
import DialogTitle from "../ui/dialog/DialogTitle.vue";
|
||||
import DialogDescription from "../ui/dialog/DialogDescription.vue";
|
||||
import Button from "../ui/button/Button.vue";
|
||||
import Calendar from "../ui/calendar/Calendar.vue";
|
||||
import {
|
||||
CalendarDate,
|
||||
getLocalTimeZone,
|
||||
} from "@internationalized/date"
|
||||
import { el } from "@fullcalendar/core/internal-common";
|
||||
import MemberCard from "../members/MemberCard.vue";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from '@/components/ui/pagination'
|
||||
import { pagination } from "@shared/types/pagination";
|
||||
|
||||
const props = defineProps<{
|
||||
adminMode?: boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
adminMode?: boolean
|
||||
}>()
|
||||
|
||||
const LOAList = ref<LOARequest[]>([]);
|
||||
const LOAList = ref<LOARequest[]>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
await loadLOAs();
|
||||
});
|
||||
|
||||
async function loadLOAs() {
|
||||
if (props.adminMode) {
|
||||
let result = await getAllLOAs(pageNum.value, pageSize.value);
|
||||
LOAList.value = result.data;
|
||||
pageData.value = result.pagination;
|
||||
} else {
|
||||
let result = await getMyLOAs(pageNum.value, pageSize.value);
|
||||
LOAList.value = result.data;
|
||||
pageData.value = result.pagination;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
if (!date) return "";
|
||||
date = typeof date === 'string' ? new Date(date) : date;
|
||||
return date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
onMounted(async () => {
|
||||
await loadLOAs();
|
||||
});
|
||||
}
|
||||
|
||||
function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed" {
|
||||
if (loa.closed) return "Closed";
|
||||
async function loadLOAs() {
|
||||
if (props.adminMode) {
|
||||
let result = await getAllLOAs(pageNum.value, pageSize.value);
|
||||
LOAList.value = result.data;
|
||||
pageData.value = result.pagination;
|
||||
} else {
|
||||
let result = await getMyLOAs(pageNum.value, pageSize.value);
|
||||
LOAList.value = result.data;
|
||||
pageData.value = result.pagination;
|
||||
}
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const start = new Date(loa.start_date);
|
||||
const end = new Date(loa.end_date);
|
||||
function formatDate(date: Date): string {
|
||||
if (!date) return "";
|
||||
date = typeof date === 'string' ? new Date(date) : date;
|
||||
return date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
if (now < start) return "Upcoming";
|
||||
if (now >= start && now <= end) return "Active";
|
||||
if (now > loa.extended_till || end) return "Overdue";
|
||||
function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Extended" | "Overdue" | "Closed" {
|
||||
if (loa.closed) return "Closed";
|
||||
|
||||
return "Overdue"; // fallback
|
||||
}
|
||||
const now = new Date();
|
||||
const start = new Date(loa.start_date);
|
||||
const end = new Date(loa.end_date);
|
||||
const extension = new Date(loa.extended_till);
|
||||
|
||||
async function cancelAndReload(id: number) {
|
||||
await cancelLOA(id, props.adminMode);
|
||||
await loadLOAs();
|
||||
}
|
||||
if (now < start) return "Upcoming";
|
||||
if (now >= start && (now <= end)) return "Active";
|
||||
if (now >= start && (now <= extension)) return "Extended";
|
||||
if (now > loa.extended_till || end) return "Overdue";
|
||||
|
||||
const isExtending = ref(false);
|
||||
const targetLOA = ref<LOARequest | null>(null);
|
||||
const extendTo = ref<CalendarDate | null>(null);
|
||||
return "Overdue"; // fallback
|
||||
}
|
||||
|
||||
const targetEnd = computed(() => { return targetLOA.value.extended_till ? targetLOA.value.extended_till : targetLOA.value.end_date })
|
||||
async function cancelAndReload(id: number) {
|
||||
await cancelLOA(id, props.adminMode);
|
||||
await loadLOAs();
|
||||
}
|
||||
|
||||
function toCalendarDate(date: Date): CalendarDate {
|
||||
if (typeof date === 'string')
|
||||
date = new Date(date);
|
||||
return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
|
||||
}
|
||||
const isExtending = ref(false);
|
||||
const targetLOA = ref<LOARequest | null>(null);
|
||||
const extendTo = ref<CalendarDate | null>(null);
|
||||
|
||||
async function commitExtend() {
|
||||
await extendLOA(targetLOA.value.id, extendTo.value.toDate(getLocalTimeZone()));
|
||||
isExtending.value = false;
|
||||
await loadLOAs();
|
||||
}
|
||||
const targetEnd = computed(() => { return targetLOA.value.extended_till ? targetLOA.value.extended_till : targetLOA.value.end_date })
|
||||
function toCalendarDate(date: Date): CalendarDate {
|
||||
if (typeof date === 'string')
|
||||
date = new Date(date);
|
||||
return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
|
||||
}
|
||||
|
||||
const expanded = ref<number | null>(null);
|
||||
const hoverID = ref<number | null>(null);
|
||||
async function commitExtend() {
|
||||
if (props.adminMode) {
|
||||
await adminExtendLOA(targetLOA.value.id, extendTo.value.toDate(getLocalTimeZone()));
|
||||
} else {
|
||||
await extendLOA(targetLOA.value.id, extendTo.value.toDate(getLocalTimeZone()));
|
||||
}
|
||||
isExtending.value = false;
|
||||
await loadLOAs();
|
||||
}
|
||||
|
||||
const pageNum = ref<number>(1);
|
||||
const pageData = ref<pagination>();
|
||||
const expanded = ref<number | null>(null);
|
||||
const hoverID = ref<number | null>(null);
|
||||
|
||||
const pageSize = ref<number>(15)
|
||||
const pageSizeOptions = [10, 15, 30]
|
||||
const pageNum = ref<number>(1);
|
||||
const pageData = ref<pagination>();
|
||||
|
||||
function setPageSize(size: number) {
|
||||
pageSize.value = size
|
||||
pageNum.value = 1;
|
||||
loadLOAs();
|
||||
}
|
||||
const pageSize = ref<number>(15)
|
||||
const pageSizeOptions = [10, 15, 30]
|
||||
|
||||
function setPage(pagenum: number) {
|
||||
pageNum.value = pagenum;
|
||||
loadLOAs();
|
||||
}
|
||||
function setPageSize(size: number) {
|
||||
pageSize.value = size
|
||||
pageNum.value = 1;
|
||||
loadLOAs();
|
||||
}
|
||||
|
||||
function setPage(pagenum: number) {
|
||||
pageNum.value = pagenum;
|
||||
loadLOAs();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -143,7 +148,7 @@ function setPage(pagenum: number) {
|
||||
<div class="flex gap-5">
|
||||
<Calendar v-model="extendTo" class="rounded-md border shadow-sm w-min" layout="month-and-year"
|
||||
:min-value="toCalendarDate(targetEnd)"
|
||||
:max-value="toCalendarDate(targetEnd).add({ years: 1 })" />
|
||||
:max-value="props.adminMode ? toCalendarDate(targetEnd).add({ years: 1 }) : toCalendarDate(targetEnd).add({ months: 1 })" />
|
||||
<div class="flex flex-col w-full gap-3 px-2">
|
||||
<p>Quick Options</p>
|
||||
<Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
|
||||
@@ -191,6 +196,7 @@ function setPage(pagenum: number) {
|
||||
<TableCell>
|
||||
<Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-400">Upcoming</Badge>
|
||||
<Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
|
||||
<Badge v-else-if="loaStatus(post) === 'Extended'" class="bg-green-500">Extended</Badge>
|
||||
<Badge v-else-if="loaStatus(post) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
|
||||
<Badge v-else class="bg-gray-400">Ended</Badge>
|
||||
</TableCell>
|
||||
@@ -202,9 +208,10 @@ function setPage(pagenum: number) {
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem v-if="!post.closed && props.adminMode"
|
||||
<DropdownMenuItem v-if="!post.closed"
|
||||
:disabled="post.extended_till !== null && !props.adminMode"
|
||||
@click="isExtending = true; targetLOA = post">
|
||||
Extend
|
||||
{{ (post.extended_till !== null && !props.adminMode) ? 'Extend (Already Extended)' : 'Extend' }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
|
||||
@click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ?
|
||||
@@ -232,27 +239,47 @@ function setPage(pagenum: number) {
|
||||
<TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id"
|
||||
@mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }">
|
||||
<TableCell :colspan="8" class="p-0">
|
||||
<div class="w-full p-3 mb-6 space-y-3">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="space-y-3 w-full">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-2">
|
||||
<h4 class="text-sm font-semibold text-foreground">
|
||||
Reason
|
||||
</h4>
|
||||
<Separator class="flex-1" />
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground w-full">
|
||||
{{ post.reason || 'No reason provided.' }}
|
||||
</div>
|
||||
<div class="w-full p-4 mb-6 space-y-4">
|
||||
|
||||
<!-- Dates -->
|
||||
<div class="grid grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-muted-foreground">Start</p>
|
||||
<p class="font-medium">
|
||||
{{ formatDate(post.start_date) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-muted-foreground">Original end</p>
|
||||
<p class="font-medium">
|
||||
{{ formatDate(post.end_date) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p class="text-muted-foreground">Extended to</p>
|
||||
<p class="font-medium text-foreground">
|
||||
{{ post.extended_till ? formatDate(post.extended_till) : 'N/A' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reason -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<h4 class="text-sm font-semibold text-foreground">
|
||||
Reason
|
||||
</h4>
|
||||
<Separator class="flex-1" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
|
||||
{{ post.reason || 'No reason provided.' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
94
ui/src/components/members/DischargeMember.vue
Normal file
94
ui/src/components/members/DischargeMember.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { Form, Field as VeeField } from 'vee-validate'
|
||||
import * as z from 'zod'
|
||||
import { X, AlertTriangle } from 'lucide-vue-next'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Field, FieldLabel, FieldError } from '@/components/ui/field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import MemberCard from './MemberCard.vue'
|
||||
import { Member } from '@shared/types/member'
|
||||
import { Discharge, dischargeSchema } from '@shared/schemas/dischargeSchema';
|
||||
import { dischargeMember } from '@/api/member'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
member: Member | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean]
|
||||
'discharged': [value: { data: Discharge }]
|
||||
}>()
|
||||
|
||||
const formSchema = toTypedSchema(dischargeSchema);
|
||||
|
||||
async function onSubmit(values: z.infer<typeof dischargeSchema>) {
|
||||
const data: Discharge = { userID: props.member.member_id, reason: values.reason }
|
||||
console.log('Discharging member:', props.member?.member_id)
|
||||
console.log('Discharge Data:', data)
|
||||
|
||||
await dischargeMember(data);
|
||||
|
||||
// Notify parent to refresh/close
|
||||
emit('discharged', { data })
|
||||
emit('update:open', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="open" @update:open="emit('update:open', $event)">
|
||||
<DialogContent class="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<!-- <AlertTriangle class="size-5" /> -->
|
||||
<DialogTitle>Discharge Member</DialogTitle>
|
||||
</div>
|
||||
<DialogDescription>
|
||||
You are initiating the discharge process for <MemberCard :member-id="member.member_id"></MemberCard>
|
||||
<!-- <span class="font-semibold text-foreground">{{ member }}</span> -->
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form v-slot="{ handleSubmit }" as="" :validation-schema="formSchema">
|
||||
<form id="dischargeForm" @submit="handleSubmit($event, onSubmit)" class="space-y-4 py-2">
|
||||
<VeeField v-slot="{ componentField, errors }" name="reason">
|
||||
<Field :data-invalid="!!errors.length">
|
||||
<FieldLabel>Reason for Discharge</FieldLabel>
|
||||
<Textarea placeholder="Retirement, inactivity, etc. " v-bind="componentField"
|
||||
class="resize-none" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</Field>
|
||||
</VeeField>
|
||||
|
||||
<!-- <VeeField v-slot="{ componentField, errors }" name="effectiveDate">
|
||||
<Field :data-invalid="!!errors.length">
|
||||
<FieldLabel>Effective Date</FieldLabel>
|
||||
<Input type="date" v-bind="componentField" />
|
||||
<FieldError v-if="errors.length" :errors="errors" />
|
||||
</Field>
|
||||
</VeeField> -->
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
<DialogFooter class="gap-2">
|
||||
<Button variant="ghost" @click="emit('update:open', false)">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" form="dischargeForm" variant="destructive">
|
||||
Discharge
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
250
ui/src/components/members/TransferMember.vue
Normal file
250
ui/src/components/members/TransferMember.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import { adminAssignUnit, getUnits } from '@/api/units'
|
||||
import { getAllRanks } from '@/api/rank'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Field, FieldError, FieldLabel } from '@/components/ui/field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import MemberCard from './MemberCard.vue'
|
||||
import type { Member } from '@shared/types/member'
|
||||
import type { Rank } from '@shared/types/rank'
|
||||
import type { Unit } from '@shared/types/units'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
member: Member | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean]
|
||||
transferred: [value: { memberId: number; unitId: number; rankId: number; reason: string }]
|
||||
}>()
|
||||
|
||||
const units = ref<Unit[]>([])
|
||||
const ranks = ref<Rank[]>([])
|
||||
const loadingUnits = ref(false)
|
||||
const loadingRanks = ref(false)
|
||||
const submitting = ref(false)
|
||||
const formError = ref('')
|
||||
|
||||
const selectedUnitId = ref('')
|
||||
const selectedRankId = ref('')
|
||||
const selectedReason = ref('transfer_request')
|
||||
const customReason = ref('')
|
||||
|
||||
const reasonOptions = [
|
||||
{ label: 'Transfer Request', value: 'transfer_request' },
|
||||
{ label: 'Leadership Vote', value: 'leadership_vote' },
|
||||
{ label: 'Appointment', value: 'appointment' },
|
||||
{ label: 'Step Down', value: 'step_down' },
|
||||
{ label: 'Custom', value: 'custom' },
|
||||
]
|
||||
|
||||
const resolvedReason = computed(() => {
|
||||
if (selectedReason.value === 'custom') {
|
||||
return customReason.value.trim()
|
||||
}
|
||||
return selectedReason.value
|
||||
})
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
return !!props.member && !!selectedUnitId.value && !!selectedRankId.value && !!resolvedReason.value
|
||||
})
|
||||
|
||||
function resolveDefaultRankId(member: Member | null): string {
|
||||
if (!member || !member.rank) {
|
||||
return ''
|
||||
}
|
||||
|
||||
const normalizedMemberRank = member.rank.trim().toLowerCase()
|
||||
const matchedRank = ranks.value.find((rank) => {
|
||||
return rank.name.trim().toLowerCase() === normalizedMemberRank
|
||||
|| rank.short_name.trim().toLowerCase() === normalizedMemberRank
|
||||
})
|
||||
|
||||
return matchedRank ? String(matchedRank.id) : ''
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
selectedUnitId.value = ''
|
||||
selectedRankId.value = ''
|
||||
selectedReason.value = 'transfer_request'
|
||||
customReason.value = ''
|
||||
formError.value = ''
|
||||
}
|
||||
|
||||
async function loadUnits() {
|
||||
loadingUnits.value = true
|
||||
formError.value = ''
|
||||
try {
|
||||
units.value = await getUnits()
|
||||
} catch {
|
||||
formError.value = 'Failed to load units. Please try again.'
|
||||
} finally {
|
||||
loadingUnits.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRanks() {
|
||||
loadingRanks.value = true
|
||||
formError.value = ''
|
||||
try {
|
||||
ranks.value = await getAllRanks()
|
||||
selectedRankId.value = resolveDefaultRankId(props.member)
|
||||
} catch {
|
||||
formError.value = 'Failed to load ranks. Please try again.'
|
||||
} finally {
|
||||
loadingRanks.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(isOpen) => {
|
||||
if (isOpen) {
|
||||
resetForm()
|
||||
loadUnits()
|
||||
loadRanks()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
async function onSubmit() {
|
||||
if (!props.member) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!selectedUnitId.value) {
|
||||
formError.value = 'Please select a target unit.'
|
||||
return
|
||||
}
|
||||
|
||||
if (!selectedRankId.value) {
|
||||
formError.value = 'Please select a target rank.'
|
||||
return
|
||||
}
|
||||
|
||||
if (!resolvedReason.value) {
|
||||
formError.value = 'Please select a reason or enter a custom reason.'
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
formError.value = ''
|
||||
try {
|
||||
const unitId = Number(selectedUnitId.value)
|
||||
const rankId = Number(selectedRankId.value)
|
||||
await adminAssignUnit(props.member.member_id, unitId, rankId, resolvedReason.value)
|
||||
|
||||
emit('transferred', {
|
||||
memberId: props.member.member_id,
|
||||
unitId,
|
||||
rankId,
|
||||
reason: resolvedReason.value,
|
||||
})
|
||||
emit('update:open', false)
|
||||
} catch {
|
||||
formError.value = 'Failed to transfer member. Please try again.'
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="open" @update:open="emit('update:open', $event)">
|
||||
<DialogContent class="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Transfer Member</DialogTitle>
|
||||
<DialogDescription>
|
||||
Select a new unit assignment for
|
||||
<MemberCard v-if="member" :member-id="member.member_id" />
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form id="transferForm" @submit.prevent="onSubmit" class="space-y-4 py-2">
|
||||
<Field>
|
||||
<FieldLabel>Target Unit</FieldLabel>
|
||||
<Select v-model="selectedUnitId" :disabled="loadingUnits || submitting">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select unit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="unit in units" :key="unit.id" :value="String(unit.id)">
|
||||
{{ unit.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Target Rank</FieldLabel>
|
||||
<Select v-model="selectedRankId" :disabled="loadingRanks || submitting">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select rank" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="rank in ranks" :key="rank.id" :value="String(rank.id)">
|
||||
{{ rank.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Reason</FieldLabel>
|
||||
<Select v-model="selectedReason" :disabled="submitting">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select reason" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="reason in reasonOptions"
|
||||
:key="reason.value"
|
||||
:value="reason.value"
|
||||
>
|
||||
{{ reason.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<Field v-if="selectedReason === 'custom'">
|
||||
<FieldLabel>Custom Reason</FieldLabel>
|
||||
<Input
|
||||
v-model="customReason"
|
||||
:disabled="submitting"
|
||||
placeholder="Enter custom transfer reason"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<FieldError v-if="formError" :errors="[formError]" />
|
||||
</form>
|
||||
|
||||
<DialogFooter class="gap-2">
|
||||
<Button variant="ghost" @click="emit('update:open', false)">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" form="transferForm" :disabled="!canSubmit || loadingUnits || loadingRanks || submitting">
|
||||
{{ submitting ? 'Transferring...' : 'Transfer Member' }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -31,8 +31,12 @@ const { handleSubmit, errors, values, resetForm, setFieldValue, submitCount } =
|
||||
validateOnMount: false,
|
||||
})
|
||||
|
||||
const submitting = ref(false);
|
||||
|
||||
const submitForm = handleSubmit(
|
||||
async (vals) => {
|
||||
if (submitting.value) return;
|
||||
submitting.value = true;
|
||||
try {
|
||||
let output = vals;
|
||||
output.promotions.map(p => p.start_date = new Date(p.start_date).toISOString())
|
||||
@@ -42,6 +46,8 @@ const submitForm = handleSubmit(
|
||||
} catch (error) {
|
||||
submitError.value = error;
|
||||
console.error(error);
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -277,7 +283,12 @@ function setAllToday() {
|
||||
</VeeField>
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<div class="h-6" />
|
||||
<Button type="submit" class="w-min">Submit</Button>
|
||||
<Button type="submit" form="trainingForm" :disabled="submitting" class="w-35">
|
||||
<span class="flex items-center gap-2" v-if="submitting">
|
||||
<Spinner></Spinner> Submitting…
|
||||
</span>
|
||||
<span v-else>Submit</span>
|
||||
</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'"
|
||||
|
||||
@@ -13,6 +13,7 @@ import Button from '../ui/button/Button.vue';
|
||||
import InputGroup from '../ui/input-group/InputGroup.vue';
|
||||
import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue';
|
||||
import { SearchIcon } from 'lucide-vue-next';
|
||||
import Spinner from '../ui/spinner/Spinner.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
allMembers: MemberLight[],
|
||||
@@ -43,8 +44,11 @@ function openDialog() {
|
||||
showAddMemberDialog.value = true;
|
||||
}
|
||||
|
||||
|
||||
const submitting = ref(false);
|
||||
async function handleAddMember() {
|
||||
//catch double submit
|
||||
if (submitting.value) return;
|
||||
submitting.value = true;
|
||||
//guard
|
||||
if (memberToAdd.value == null)
|
||||
return;
|
||||
@@ -52,6 +56,7 @@ async function handleAddMember() {
|
||||
await addMemberToRole(memberToAdd.value.id, props.role.id);
|
||||
emit('submit');
|
||||
showAddMemberDialog.value = false;
|
||||
submitting.value = false;
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -94,8 +99,11 @@ async function handleAddMember() {
|
||||
<Button variant="secondary" @click="showAddMemberDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button :disabled="!memberToAdd" @click="handleAddMember">
|
||||
Add
|
||||
<Button :disabled="!memberToAdd || submitting" @click="handleAddMember">
|
||||
<span class="flex items-center gap-2" v-if="submitting">
|
||||
<Spinner></Spinner> Add
|
||||
</span>
|
||||
<span v-else>Add</span>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
@@ -26,6 +26,7 @@ import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
|
||||
import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
|
||||
import Combobox from '../ui/combobox/Combobox.vue'
|
||||
import Tooltip from '../tooltip/Tooltip.vue'
|
||||
import Spinner from '../ui/spinner/Spinner.vue'
|
||||
|
||||
|
||||
const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
|
||||
@@ -67,19 +68,24 @@ function toMySQLDateTime(date: Date): string {
|
||||
.replace("T", " ") + "000"; // becomes → 2025-11-19 00:00:00.000000
|
||||
}
|
||||
|
||||
|
||||
function onSubmit(vals) {
|
||||
const submitting = ref(false);
|
||||
async function onSubmit(vals) {
|
||||
//catch double submit
|
||||
if (submitting.value) return;
|
||||
submitting.value = true;
|
||||
try {
|
||||
const clean: CourseEventDetails = {
|
||||
...vals,
|
||||
event_date: new Date(vals.event_date),
|
||||
}
|
||||
|
||||
postTrainingReport(clean).then((newID) => {
|
||||
await postTrainingReport(clean).then((newID) => {
|
||||
emit("submit", newID);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("There was an error submitting the training report", err);
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -402,7 +408,12 @@ const filteredMembers = computed(() => {
|
||||
</FieldGroup>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<Button type="button" variant="outline" @click="resetForm">Reset</Button>
|
||||
<Button type="submit" form="trainingForm">Submit</Button>
|
||||
<Button type="submit" form="trainingForm" :disabled="submitting" class="w-35">
|
||||
<span class="flex items-center gap-2" v-if="submitting">
|
||||
<Spinner></Spinner> Submitting…
|
||||
</span>
|
||||
<span v-else>Submit</span>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@@ -16,7 +16,7 @@ export const buttonVariants = cva(
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
"hover:bg-accent active:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
success:
|
||||
"bg-success text-success-foreground shadow-xs hover:bg-success/90",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
|
||||
Reference in New Issue
Block a user