Wrapped up approval visuals and refresh behaviour

api/src/services/db/rankService.ts

@@ -40,7 +40,7 @@ export async function batchInsertMemberRank(promos: BatchPromotionMember[], auth
     try {
         var con = await pool.getConnection();
         promos.forEach(p => {
-            con.query(`CALL sp_update_member_rank(?, ?, ?, ?, ?, ?)`, [p.member_id, p.rank_id, author, approver, "Rank Change", toDateIgnoreZone(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/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;
 }

ui/src/components/promotions/promotionForm.vue

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

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);
 
@@ -107,7 +118,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>

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,21 +1,24 @@
 <script setup lang="ts">
 import PromotionForm from "@/components/promotions/promotionForm.vue";
 import PromotionList from "@/components/promotions/promotionList.vue";
+import { ref } from "vue";
+
+const listRef = ref<InstanceType<typeof PromotionList>>(null);
 </script>
 
 <template>
-    <div class="mx-auto mt-10 max-w-7xl px-8">
+    <div class="mx-auto mt-10 px-8">
         <div class="flex max-h-[70vh] gap-8">
 
             <!-- LEFT COLUMN -->
-            <div class="flex-1 border-r pr-8">
+            <div class="flex-1 border-r pr-8 min-w-2xl">
-                <PromotionList></PromotionList>
+                <PromotionList ref="listRef"></PromotionList>
             </div>
 
             <!-- RIGHT COLUMN -->
-            <div class="flex-1 flex justify-center pl-8">
+            <div class="flex-1 flex pl-8">
                 <div class="w-full max-w-3xl">
-                    <PromotionForm />
+                    <PromotionForm @submitted="listRef?.refresh" />
                 </div>
             </div>