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

Merge branch 'main' into #134-Calendar-Upgrades

Browse Source
This commit is contained in:
Ajdj100
2026-01-16 18:36:54 -06:00
parent 5fdb0b45f0 a4f762e793
commit dd21d12dd5
9 changed files with 176 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
ui/src/components/promotions/promotionForm.vue
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,
})
@@ -38,6 +38,7 @@ const submitForm = handleSubmit(
output.promotions.map(p => p.start_date = new Date(p.start_date).toISOString())
await submitRankChange(output);
formSubmitted.value = true;
emit("submitted");
} catch (error) {
submitError.value = error;
console.error(error);
@@ -45,6 +46,10 @@ const submitForm = handleSubmit(
}
);
const emit = defineEmits<{
submitted: [void]
}>();
const submitError = ref<string>(null);
const formSubmitted = ref(false);
@@ -123,21 +128,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="">
@@ -249,9 +248,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>

19
ui/src/components/promotions/promotionList.vue
View File

@@ -40,6 +40,17 @@ async function loadHistory() {
pageData.value = d.pagination;
}
function refresh() {
loadHistory();
promoDayDetails.value?.[0].loadData();
}
defineExpose({
refresh
})
const promoDayDetails = ref<InstanceType<typeof PromotionListDay>[]>(null)
const expanded = ref<number | null>(null);
const hoverID = ref<number | null>(null);
@@ -72,9 +83,6 @@ function formatDate(date: Date): string {
</script>
<template>
<div class="flex flex-col max-w-7xl w-full">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
Promotion History
</p>
<div class="w-full mx-auto">
<Table>
<TableHeader>
@@ -107,7 +115,8 @@ function formatDate(date: Date): string {
:class="{ 'bg-muted/50 border-t-0': hoverID === index }">
<TableCell :colspan="8" class="p-0">
<div class="w-full p-2 mb-6 space-y-3">
<PromotionListDay :date="new Date(batch.entry_day)"></PromotionListDay>
<PromotionListDay ref="promoDayDetails" :date="new Date(batch.entry_day)">
</PromotionListDay>
</div>
</TableCell>
</TableRow>
@@ -118,7 +127,7 @@ function formatDate(date: Date): string {
<div v-if="loading" class="w-full flex mx-auto justify-center my-15">
<Spinner class="size-7"></Spinner>
</div>
<div class="mt-5 flex justify-between">
<div class="mt-5 flex justify-between mb-20">
<div></div>
<Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
:default-page="2" :page="pageNum" @update:page="setPage">

17
ui/src/components/promotions/promotionListDay.vue
View File

@@ -13,8 +13,17 @@ const props = defineProps<{
const promoList = ref<PromotionDetails[]>();
const loading = ref(true);
onMounted(async () => {
async function loadData() {
promoList.value = await getPromotionsOnDay(props.date);
}
defineExpose({
loadData
})
onMounted(async () => {
// promoList.value = await getPromotionsOnDay(props.date);
await loadData();
loading.value = false;
})
@@ -27,7 +36,8 @@ onMounted(async () => {
<tr class="border-b-2 border-gray-200 bg-white/10">
<th class="px-4 py-3 text-sm font-semibold">Member</th>
<th class="px-4 py-3 text-sm font-semibold">Rank</th>
<th class="px-4 py-3 text-sm font-semibold text-right">Approved By</th>
<th class="px-4 py-3 text-sm font-semibold">Approved By</th>
<th class="px-4 py-3 text-sm font-semibold text-right">Submitted By</th>
</tr>
</thead>
@@ -39,6 +49,9 @@ onMounted(async () => {
<td class="px-4 py-2 text-sm">
{{ p.short_name }}
</td>
<td class="px-2 py-2 text-sm text-right">
<MemberCard :member-id="p.authorized_by_id" />
</td>
<td class="px-2 py-2 text-sm text-right">
<MemberCard :member-id="p.created_by_id" />
</td>

71
ui/src/pages/RankChange.vue
View File

@@ -1,24 +1,65 @@
<script setup lang="ts">
import PromotionForm from "@/components/promotions/promotionForm.vue";
import PromotionList from "@/components/promotions/promotionList.vue";
</script>
<template>
<div class="mx-auto mt-10 max-w-7xl px-8">
<div class="flex max-h-[70vh] gap-8">
<div class="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">
<!-- LEFT COLUMN -->
<div class="flex-1 border-r pr-8">
<PromotionList></PromotionList>
</div>
<div class="flex items-center justify-between mb-6 lg:hidden">
<h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
<!-- RIGHT COLUMN -->
<div class="flex-1 flex justify-center pl-8">
<div class="w-full max-w-3xl">
<PromotionForm />
<Dialog v-model:open="isFormOpen">
<DialogTrigger as-child>
<Button size="sm" class="gap-2">
<Plus class="size-4" />
Promote
</Button>
</DialogTrigger>
<DialogContent class="w-full h-full max-w-none m-0 rounded-none flex flex-col">
<DialogHeader class="flex-row items-center justify-between border-b pb-4">
<DialogTitle>New Promotion</DialogTitle>
</DialogHeader>
<div class="flex-1 overflow-y-auto pt-6">
<PromotionForm @submitted="handleMobileSubmit" />
</div>
</DialogContent>
</Dialog>
</div>
<div class="flex flex-col lg:flex-row lg:max-h-[70vh] gap-8">
<div class="flex-1 lg:border-r lg:pr-8 w-full lg:min-w-2xl">
<p class="hidden lg:block scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
Promotion History
</p>
<div class="overflow-y-auto lg:max-h-full">
<PromotionList ref="listRef"></PromotionList>
</div>
</div>
<div class="hidden lg:flex flex-1 pl-8">
<div class="w-full max-w-3xl">
<p class="text-2xl font-semibold tracking-tight mb-3">New Promotion</p>
<PromotionForm @submitted="listRef?.refresh" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Plus } from 'lucide-vue-next'
import PromotionForm from '@/components/promotions/promotionForm.vue'
import PromotionList from '@/components/promotions/promotionList.vue'
import DialogContent from '@/components/ui/dialog/DialogContent.vue'
import Dialog from '@/components/ui/dialog/Dialog.vue'
import DialogTrigger from '@/components/ui/dialog/DialogTrigger.vue'
import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
import Button from '@/components/ui/button/Button.vue'
const isFormOpen = ref(false)
const listRef = ref(null)
const handleMobileSubmit = () => {
isFormOpen.value = false // Close the "Whole page" modal
listRef.value?.refresh() // Refresh the list behind it
}
</script>