Merge pull request 'Promotions-Fixes' (#149) from Promotions-Fixes into main

Reviewed-on: #149

api/src/routes/ranks.ts

@@ -16,10 +16,11 @@ ur.use(requireLogin)
 ur.post('/', [requireRole(["17th Command", "17th Administrator", "17th HQ"]), requireMemberState(MemberState.Member)], async (req: express.Request, res: express.Response) => {
     try {
         const change = req.body.promotions as BatchPromotionMember[];
+        const approver = req.body.approver as number;
         const author = req.user.id;
         if (!change) res.sendStatus(400);
 
-        await batchInsertMemberRank(change, author);
+        await batchInsertMemberRank(change, author, approver);
         logger.info('app', 'Promotion batch submitted', { author: author })
         res.sendStatus(201);
     } catch (error) {

api/src/services/db/rankService.ts

@@ -2,7 +2,7 @@ import { BatchPromotion, BatchPromotionMember } from "@app/shared/schemas/promot
 import { PromotionDetails, PromotionSummary } from "@app/shared/types/rank"
 import pool from "../../db";
 import { PagedData } from "@app/shared/types/pagination";
-import { toDateTime } from "@app/shared/utils/time";
+import { toDate, toDateIgnoreZone, toDateTime } from "@app/shared/utils/time";
 
 export async function getAllRanks() {
     const rows = await pool.query(
@@ -36,11 +36,11 @@ export async function insertMemberRank(member_id: number, rank_id: number, date?
 }
 
 
-export async function batchInsertMemberRank(promos: BatchPromotionMember[], author: number) {
+export async function batchInsertMemberRank(promos: BatchPromotionMember[], author: number, approver: number) {
     try {
         var con = await pool.getConnection();
         promos.forEach(p => {
-            con.query(`CALL sp_update_member_rank(?, ?, ?, ?, ?, ?)`, [p.member_id, p.rank_id, author, author, "Rank Change", toDateTime(new Date(p.start_date))])
+            con.query(`CALL sp_update_member_rank(?, ?, ?, ?, ?, ?)`, [p.member_id, p.rank_id, approver, author, "Rank Change", toDateIgnoreZone(new Date(p.start_date))])
         });
 
         con.commit();
@@ -91,8 +91,10 @@ export async function getPromotionsOnDay(day: Date): Promise<PromotionDetails[]>
     // SQL query to fetch all records from members_unit for the specified day
     let sql = `
         SELECT 
+            mr.id AS promo_id,
             mr.member_id,
             mr.created_by_id,
+            mr.authorized_by_id,
             r.short_name
         FROM members_ranks AS mr
             LEFT JOIN ranks AS r ON r.id = mr.rank_id

shared/schemas/promotionSchema.ts

@@ -10,7 +10,7 @@ export const batchPromotionMemberSchema = z.object({
 
 export const batchPromotionSchema = z.object({
     promotions: z.array(batchPromotionMemberSchema, { message: "At least one promotion is required" }).nonempty({ message: "At least one promotion is required" }),
-
+    approver: z.number({ invalid_type_error: "Must select a member" }).int().positive()
 })
     .superRefine((data, ctx) => {
         // optional: check for duplicate member_ids

shared/types/rank.ts

@@ -11,7 +11,9 @@ export interface PromotionSummary {
 }
 
 export interface PromotionDetails {
+  promo_id: number;
   member_id: number;
   short_name: string;
   created_by_id: number;
+  authorized_by_id: number;
 }

shared/utils/time.ts

@@ -12,3 +12,25 @@ export function toDateTime(date: Date): string {
 
     return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
 }
+
+export function toDateIgnoreZone(date: Date): string {
+    if (typeof date === 'string') {
+        date = new Date(date);
+    }
+    return date.toISOString().split('T')[0];
+}
+
+export function toDate(date: Date): string {
+    if (typeof date === 'string') {
+        date = new Date(date);
+    }
+    console.log(date);
+    // This produces a CST-local date because server runs in CST
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const day = date.getDate().toString().padStart(2, "0");
+    let out = `${year}-${month}-${day}`;
+
+    console.log(out);
+    return out;
+}

ui/src/components/promotions/promotionForm.vue

@@ -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">
-            <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>
+            <VeeFieldArray name="promotions" v-slot="{ fields, push, remove }">
+                <FieldSet class="w-full min-w-0">
+                    <div class="flex flex-col gap-2">
                         <!-- TABLE SHELL -->
                         <div class="">
                             <FieldGroup class="">
@@ -249,9 +248,48 @@ function setAllToday() {
                     </div>
                 </FieldSet>
             </VeeFieldArray>
-            <div class="flex justify-end items-center gap-5">
+            <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>
-                <Button type="submit">Submit</Button>
+                    <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>

ui/src/components/promotions/promotionList.vue

@@ -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">

ui/src/components/promotions/promotionListDay.vue

@@ -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>

ui/src/pages/RankChange.vue

@@ -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="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">
-        <div class="flex max-h-[70vh] gap-8">
 
-            <!-- LEFT COLUMN -->
+        <div class="flex items-center justify-between mb-6 lg:hidden">
-            <div class="flex-1 border-r pr-8">
+            <h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
-                <PromotionList></PromotionList>
+
+            <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>
 
-            <!-- RIGHT COLUMN -->
+        <div class="flex flex-col lg:flex-row lg:max-h-[70vh] gap-8">
-            <div class="flex-1 flex justify-center pl-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">
-                    <PromotionForm />
+                    <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>