Wrapped up approval visuals and refresh behaviour

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">
-                <PromotionList></PromotionList>
+            <div class="flex-1 border-r pr-8 min-w-2xl">
+                <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>