17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 38 Pull Requests 1 Actions 3 Packages Projects 1 Releases 14 Wiki Activity

first pass of discharge form

Browse Source
This commit is contained in:
ajdj100
2026-01-27 15:00:29 -05:00
parent 67562f56aa
commit c646254616
2 changed files with 253 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
ui/src/components/members/DischargeMember.vue Normal file
View File

@@ -0,0 +1,91 @@
<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'
// 1. Props for control and data
const props = defineProps<{
open: boolean
member: Member | null
}>()
const emit = defineEmits(['update:open', 'discharged'])
// 2. Discharge-specific schema
const formSchema = toTypedSchema(z.object({
reason: z.string().min(1, "Please provide a valid reason for discharge").max(200),
effectiveDate: z.string().min(1, "Date is required"),
}))
function onSubmit(values: any) {
console.log('Discharging member:', props.member?.member_id)
console.log('Discharge Data:', values)
// Notify parent to refresh/close
emit('discharged', { memberId: props.member?.member_id, ...values })
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 sm:gap-0">
<Button variant="ghost" @click="emit('update:open', false)">
Cancel
</Button>
<Button type="submit" form="dischargeForm" variant="destructive">
Discharge
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>

39
ui/src/pages/memberList.vue
View File

@@ -30,6 +30,7 @@ import { Button } from "@/components/ui/button";
import Badge from "@/components/ui/badge/Badge.vue";
import Input from "@/components/ui/input/Input.vue";
import Spinner from "@/components/ui/spinner/Spinner.vue";
import DischargeMember from "@/components/members/DischargeMember.vue";
// --- State ---
const router = useRouter();
@@ -128,9 +129,26 @@ onMounted(() => {
fetchUnits();
fetchMembers();
});
//discharge form logic
const isDischargeOpen = ref(false)
const targetMember = ref(null)
function openDischargeModal(member) {
targetMember.value = member
isDischargeOpen.value = true
}
function handleDischargeSuccess(data) {
// Refresh your list or show a toast
console.log('Member removed from list:', data.memberId)
}
</script>
<template>
<div>
<DischargeMember v-model:open="isDischargeOpen" :member="targetMember" @discharged="handleDischargeSuccess">
</DischargeMember>
<div class="mx-auto max-w-7xl w-full py-10 px-4">
<div class="flex flex-col gap-2">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
@@ -138,10 +156,9 @@ onMounted(() => {
<h1 class="text-2xl font-bold tracking-tight text-foreground">Member Management</h1>
<p class="text-muted-foreground text-sm">Directory of all personnel and unit assignments.</p>
</div>
</div>
<div class="flex flex-col gap-4 sm:flex-row sm:items-center justify-between border-y border-border/40 py-3">
<div
class="flex flex-col gap-4 sm:flex-row sm:items-center justify-between border-y border-border/40 py-3">
<div class="flex items-center gap-2">
<Select v-model="filters.status">
<SelectTrigger
@@ -155,7 +172,6 @@ onMounted(() => {
</SelectItem>
</SelectContent>
</Select>
<Select v-model="filters.unitId">
<SelectTrigger
class="h-8 w-fit min-w-[110px] border-none bg-muted/50 hover:bg-muted transition-colors text-xs">
@@ -168,20 +184,18 @@ onMounted(() => {
</SelectItem>
</SelectContent>
</Select>
<div v-if="filters.status !== 'all' || filters.unitId !== 'all'"
class="h-4 w-[1px] bg-border mx-1" />
<Button v-if="filters.status !== 'all' || filters.unitId !== 'all'" variant="ghost" size="sm"
class="h-8 px-2 text-xs text-muted-foreground"
@click="filters.status = 'all'; filters.unitId = 'all'">
Clear Filters
</Button>
</div>
<div class="flex items-center gap-2">
<div class="relative w-full sm:w-[260px]">
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50" />
<Search
class="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50" />
<Input v-model="filters.search" placeholder="Search members..."
class="h-8 pl-9 pr-8 bg-background text-xs focus-visible:ring-1" />
<button v-if="filters.search" @click="filters.search = ''"
@@ -204,7 +218,6 @@ onMounted(() => {
<TableHead class="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<template v-if="isLoaded">
<TableRow v-for="member in paginatedMembers" :key="member.member_id"
@@ -230,7 +243,7 @@ onMounted(() => {
<!-- <DropdownMenuItem @click="navigateToMember(member.member_id)">
View Profile
</DropdownMenuItem> -->
<DropdownMenuItem
<DropdownMenuItem @click="openDischargeModal(member)"
class="text-destructive focus:bg-destructive focus:text-destructive-foreground font-medium">
Discharge Member
</DropdownMenuItem>
@@ -238,7 +251,6 @@ onMounted(() => {
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow v-if="paginatedMembers.length === 0" class="hover:bg-transparent">
<TableCell colspan="6" class="h-64 text-center">
<div class="flex flex-col items-center justify-center gap-2 text-muted-foreground">
@@ -249,7 +261,6 @@ onMounted(() => {
</TableCell>
</TableRow>
</template>
<TableRow v-else>
<TableCell colspan="6" class="h-64 text-center">
<div class="flex flex-col items-center justify-center gap-4 text-muted-foreground">
@@ -260,7 +271,6 @@ onMounted(() => {
</TableBody>
</Table>
</div>
<div class="mt-8 flex flex-col sm:flex-row items-center justify-between gap-4 border-t pt-6">
<div class="flex items-center gap-3 text-sm">
<p class="text-muted-foreground text-nowrap">Items per page:</p>
@@ -272,7 +282,6 @@ onMounted(() => {
</button>
</div>
</div>
<Pagination v-if="totalItems > 0" :total="totalItems" :items-per-page="pageSize" :page="pageNum"
:sibling-count="1" @update:page="setPage">
<PaginationContent v-slot="{ items }">
@@ -290,10 +299,10 @@ onMounted(() => {
<PaginationNext />
</PaginationContent>
</Pagination>
<p class="text-xs text-muted-foreground w-[100px] text-right">
Total: {{ totalItems }}
</p>
</div>
</div>
</div>
</template>