finished(?) hooking up rank system

api/index.js

@@ -46,7 +46,7 @@ const authRouter = require('./routes/auth')
 
 app.use('/application', applicationsRouter);
 app.use('/ranks', ranks);
-app.use('/userRoles', memberRanks);
+app.use('/memberRanks', memberRanks);
 app.use('/members', members);
 app.use('/loa', loaHandler);
 app.use('/status', status)

api/routes/ranks.js

@@ -7,24 +7,19 @@ const pool = require('../db');
 //insert a new latest rank for a user
 ur.post('/', async (req, res) => {
     try {
-        const App = req.body?.App || {};
+        const change = req.body?.change;
+        console.log(change);
 
-        // TODO: replace with current user ID
-        const memberId = 1;
+        const sql = `INSERT INTO members_ranks (member_id, rank_id, event_date) VALUES (?, ?, ?);`;
 
-        const sql = `INSERT INTO applications (member_id, app_version, app_data) VALUES (?, ?, ?);`;
-        const appVersion = 1;
-
-        const params = [memberId, appVersion, JSON.stringify(App)]
-
-        console.log(params)
+        const params = [change.member_id, change.rank_id, change.event_date]
 
         await pool.query(sql, params);
 
         res.sendStatus(201);
     } catch (err) {
         console.error('Insert failed:', err);
-        res.status(500).json({ error: 'Failed to save application' });
+        res.status(500).json({ error: 'Failed to update ranks' });
     }
 });
 

ui/src/api/rank.ts

@@ -20,13 +20,13 @@ export async function getRanks(): Promise<Rank[]> {
 }
 
 // Placeholder: submit a rank change
-export async function submitRankChange(memberId: number, rankId: number): Promise<{ ok: boolean }> {
+export async function submitRankChange(memberId: number, rankId: number, date: string): Promise<{ ok: boolean }> {
   const res = await fetch(`${addr}/rank`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({ memberId, rankId }),
+    body: JSON.stringify({ memberId, rankId, date }),
   })
 
   if (res.ok) {

ui/src/pages/RankChange.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts">
 import { Check, Search } from "lucide-vue-next"
 import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
-
-import { getRanks, Rank } from "@/api/rank"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { getRanks, Rank, submitRankChange } from "@/api/rank"
 import { onMounted, ref } from "vue";
 import { Member, getMembers } from "@/api/member";
+import { cn } from "@/lib/utils"
+import { CalendarIcon } from "lucide-vue-next"
+
+import {
+    DateFormatter,
+
+    DateValue,
+
+    getLocalTimeZone,
+    today,
+} from "@internationalized/date"
+
 import Button from "@/components/ui/button/Button.vue";
+import Calendar from "@/components/ui/calendar/Calendar.vue";
 
 const members = ref<Member[]>([])
 const ranks = ref<Rank[]>([])
+const date = ref<DateValue>(today(getLocalTimeZone()))
+
 
 const currentMember = ref<Member | null>(null);
 const currentRank = ref<Rank | null>(null);
@@ -17,10 +32,28 @@ onMounted(async () => {
     ranks.value = await getRanks();
 });
 
+const df = new DateFormatter("en-US", {
+    dateStyle: "long",
+})
+
+function submit() {
+    submitRankChange(currentMember.value.member_id, currentRank.value?.id, date.value.toString())
+        .then(() => {
+            alert("Rank change submitted!");
+            currentMember.value = null;
+            currentRank.value = null;
+            date.value = today(getLocalTimeZone());
+        })
+        .catch((err) => {
+            console.error(err);
+            alert("Failed to submit rank change.");
+        });
+}
+
 </script>
 
 <template>
-    <div class="flex w-full gap-5 mx-auto mt-10">
+    <div class="flex max-w-5xl justify-center gap-5 mx-auto mt-10">
         <Combobox v-model="currentMember">
             <ComboboxAnchor class="w-[300px]">
                 <ComboboxInput placeholder="Search members..." class="w-full pl-9"
@@ -63,6 +96,20 @@ onMounted(async () => {
                 </ComboboxGroup>
             </ComboboxList>
         </Combobox>
-        <Button :onClick="() => {}">Submit</Button>
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn(
+                    'w-[280px] justify-start text-left font-normal',
+                    !date && 'text-muted-foreground',
+                )">
+                    <CalendarIcon class="mr-2 h-4 w-4" />
+                    {{ date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date" }}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <Calendar v-model="date" initial-focus />
+            </PopoverContent>
+        </Popover>
+        <Button @click="submit">Submit</Button>
     </div>
 </template>