Added displayname and member card system
This commit is contained in:
@@ -3,7 +3,8 @@ const router = express.Router();
|
||||
|
||||
import pool from '../db';
|
||||
import { approveApplication, createApplication, denyApplication, getAllMemberApplications, getApplicationByID, getApplicationComments, getApplicationList, getMemberApplication } from '../services/applicationService';
|
||||
import { MemberState, setUserState } from '../services/memberService';
|
||||
import { setUserState } from '../services/memberService';
|
||||
import { MemberState } from '@app/shared/types/member';
|
||||
import { getRankByName, insertMemberRank } from '../services/rankService';
|
||||
import { ApplicationFull, CommentRow } from "@app/shared/types/application"
|
||||
import { assignUserToStatus } from '../services/statusService';
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
|
||||
import { Request, Response } from 'express';
|
||||
import pool from '../db';
|
||||
import { getUserActiveLOA } from '../services/loaService';
|
||||
import { getUserData } from '../services/memberService';
|
||||
import { getMemberSettings, getMembersFull, getMembersLite, getUserData, setUserSettings } from '../services/memberService';
|
||||
import { getUserRoles } from '../services/rolesService';
|
||||
import { memberSettings } from '@app/shared/types/member';
|
||||
|
||||
router.use((req, res, next) => {
|
||||
console.log(req.user);
|
||||
@@ -60,6 +62,53 @@ router.get('/me', async (req, res) => {
|
||||
}
|
||||
})
|
||||
|
||||
router.get('/settings', async (req: Request, res: Response) => {
|
||||
try {
|
||||
let user = req.user.id;
|
||||
console.log(user);
|
||||
let output = await getMemberSettings(user);
|
||||
res.status(200).json(output);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json(error);
|
||||
}
|
||||
})
|
||||
|
||||
router.put('/settings', async (req: Request, res: Response) => {
|
||||
try {
|
||||
let user = req.user.id;
|
||||
let settings: memberSettings = req.body;
|
||||
console.log(settings)
|
||||
await setUserSettings(user, settings);
|
||||
res.sendStatus(200);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json(error);
|
||||
}
|
||||
})
|
||||
|
||||
router.post('/lite/bulk', async (req: Request, res: Response) => {
|
||||
try {
|
||||
let ids = req.body.ids;
|
||||
let out = await getMembersLite(ids);
|
||||
res.status(200).json(out);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json(error);
|
||||
}
|
||||
})
|
||||
|
||||
router.post('/full/bulk', async (req: Request, res: Response) => {
|
||||
try {
|
||||
let ids = req.body.ids;
|
||||
let out = await getMembersFull(ids);
|
||||
res.status(200).json(out);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json(error);
|
||||
}
|
||||
})
|
||||
|
||||
router.get('/:id', async (req, res) => {
|
||||
try {
|
||||
const userId = req.params.id;
|
||||
@@ -74,13 +123,4 @@ router.get('/:id', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
//update a user's display name (stub)
|
||||
router.put('/:id/displayname', async (req, res) => {
|
||||
// Stub: not implemented yet
|
||||
return res.status(501).json({ error: 'Update display name not implemented' });
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,25 +1,17 @@
|
||||
import pool from "../db";
|
||||
|
||||
export enum MemberState {
|
||||
Guest = "guest",
|
||||
Applicant = "applicant",
|
||||
Member = "member",
|
||||
Retired = "retired",
|
||||
Banned = "banned",
|
||||
Denied = "denied"
|
||||
}
|
||||
import { Member, MemberLight, memberSettings, MemberState } from '@app/shared/types/member'
|
||||
|
||||
export async function getUserData(userID: number) {
|
||||
const sql = `SELECT * FROM members WHERE id = ?`;
|
||||
const res = await pool.query(sql, [userID]);
|
||||
return res[0] ?? null;
|
||||
const sql = `SELECT * FROM members WHERE id = ?`;
|
||||
const res = await pool.query(sql, [userID]);
|
||||
return res[0] ?? null;
|
||||
}
|
||||
|
||||
export async function setUserState(userID: number, state: MemberState) {
|
||||
const sql = `UPDATE members
|
||||
const sql = `UPDATE members
|
||||
SET state = ?
|
||||
WHERE id = ?;`;
|
||||
return await pool.query(sql, [state, userID]);
|
||||
return await pool.query(sql, [state, userID]);
|
||||
}
|
||||
|
||||
declare global {
|
||||
@@ -32,3 +24,40 @@ declare global {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export async function getMemberSettings(id: number): Promise<memberSettings> {
|
||||
const sql = `SELECT * FROM view_member_settings WHERE id = ?`;
|
||||
let out: memberSettings[] = await pool.query(sql, [id]);
|
||||
|
||||
if (out.length != 1)
|
||||
throw new Error("Could not get user settings");
|
||||
|
||||
return out[0];
|
||||
}
|
||||
|
||||
export async function setUserSettings(id: number, settings: memberSettings) {
|
||||
const sql = `UPDATE view_member_settings SET
|
||||
displayName = ?
|
||||
WHERE id = ?;`;
|
||||
let result = await pool.query(sql, [settings.displayName, id])
|
||||
console.log(result);
|
||||
}
|
||||
|
||||
export async function getMembersLite(ids: number[]): Promise<MemberLight[]> {
|
||||
const sql = `SELECT m.member_id AS id,
|
||||
m.member_name AS username,
|
||||
m.displayName,
|
||||
u.color
|
||||
FROM view_member_rank_unit_status_latest m
|
||||
LEFT JOIN units u ON u.name = m.unit
|
||||
WHERE member_id IN (?);`;
|
||||
const res: MemberLight[] = await pool.query(sql, [ids]);
|
||||
return res;
|
||||
}
|
||||
|
||||
export async function getMembersFull(ids: number[]): Promise<Member[]> {
|
||||
const sql = `SELECT * FROM view_member_rank_unit_status_latest WHERE member_id IN (?);`;
|
||||
const res: Member[] = await pool.query(sql, [ids]);
|
||||
return res;
|
||||
}
|
||||
31
shared/types/member.ts
Normal file
31
shared/types/member.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export interface memberSettings {
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
export enum MemberState {
|
||||
Guest = "guest",
|
||||
Applicant = "applicant",
|
||||
Member = "member",
|
||||
Retired = "retired",
|
||||
Banned = "banned",
|
||||
Denied = "denied"
|
||||
}
|
||||
|
||||
export type Member = {
|
||||
member_id: number;
|
||||
member_name: string;
|
||||
rank: string | null;
|
||||
rank_date: string | null;
|
||||
unit: string | null;
|
||||
unit_date: string | null;
|
||||
status: string | null;
|
||||
status_date: string | null;
|
||||
loa_until?: Date;
|
||||
};
|
||||
|
||||
export interface MemberLight {
|
||||
id: number
|
||||
displayName: string
|
||||
username: string
|
||||
color: string
|
||||
}
|
||||
@@ -1,14 +1,4 @@
|
||||
export type Member = {
|
||||
member_id: number;
|
||||
member_name: string;
|
||||
rank: string | null;
|
||||
rank_date: string | null;
|
||||
unit: string | null;
|
||||
unit_date: string | null;
|
||||
status: string | null;
|
||||
status_date: string | null;
|
||||
on_loa: boolean | null;
|
||||
};
|
||||
import { memberSettings, Member, MemberLight } from "@shared/types/member";
|
||||
|
||||
// @ts-ignore
|
||||
const addr = import.meta.env.VITE_APIHOST;
|
||||
@@ -22,3 +12,65 @@ export async function getMembers(): Promise<Member[]> {
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function getMemberSettings(): Promise<memberSettings> {
|
||||
const response = await fetch(`${addr}/members/settings`, {
|
||||
credentials: 'include'
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch settings");
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function setMemberSettings(settings: memberSettings) {
|
||||
const response = await fetch(`${addr}/members/settings`, {
|
||||
credentials: 'include',
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'Application/json',
|
||||
},
|
||||
body: JSON.stringify(settings)
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch settings");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
export async function getLightMembers(ids: number[]): Promise<MemberLight[]> {
|
||||
|
||||
if (ids.length === 0) return [];
|
||||
|
||||
const response = await fetch(`${addr}/members/lite/bulk`, {
|
||||
credentials: 'include',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ ids })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch light members");
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function getFullMembers(ids: number[]): Promise<Member[]> {
|
||||
|
||||
if (ids.length === 0) return [];
|
||||
|
||||
const response = await fetch(`${addr}/members/full/bulk`, {
|
||||
credentials: 'include',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ ids })
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch settings");
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
153
ui/src/components/members/MemberCard.vue
Normal file
153
ui/src/components/members/MemberCard.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
import { useMemberDirectory } from '@/stores/memberDirectory';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { Member, type MemberLight } from '@shared/types/member'
|
||||
import Popover from '../ui/popover/Popover.vue';
|
||||
import PopoverTrigger from '../ui/popover/PopoverTrigger.vue';
|
||||
import PopoverContent from '../ui/popover/PopoverContent.vue';
|
||||
import { cn } from '@/lib/utils.js'
|
||||
import { watch } from 'vue';
|
||||
import { format } from 'path';
|
||||
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
memberId: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
// Local state
|
||||
const memberLight = ref<MemberLight | null>(null);
|
||||
const memberFull = ref<Member | null>(null)
|
||||
const loadingFull = ref(false)
|
||||
const membersStore = useMemberDirectory();
|
||||
|
||||
// Fetch the light member data on mount
|
||||
onMounted(async () => {
|
||||
memberLight.value = await membersStore.getLight(props.memberId);
|
||||
});
|
||||
|
||||
async function loadFull() {
|
||||
if (memberFull.value || loadingFull.value) return
|
||||
|
||||
loadingFull.value = true
|
||||
try {
|
||||
memberFull.value = await membersStore.getFull(props.memberId)
|
||||
} finally {
|
||||
loadingFull.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.memberId, async (newId) => {
|
||||
memberLight.value = await membersStore.getLight(newId);
|
||||
memberFull.value = null;
|
||||
loadingFull.value = false;
|
||||
});
|
||||
|
||||
// Compute display name (displayName fallback to username)
|
||||
const displayName = computed(() => {
|
||||
if (!memberLight.value) return props.memberId;
|
||||
return memberLight.value.displayName || memberLight.value.username;
|
||||
});
|
||||
|
||||
const DEFAULT_TEXT_COLOR = '#9ca3af' // muted gray for text
|
||||
const DEFAULT_BG_COLOR = '#d1d5db22' // muted gray ~20% opacity
|
||||
|
||||
const textColor = computed(() => memberLight.value?.color || DEFAULT_TEXT_COLOR)
|
||||
const bgColor = computed(() => (memberLight.value?.color ? `${memberLight.value.color}22` : DEFAULT_BG_COLOR))
|
||||
|
||||
const hasFullInfo = computed(() => {
|
||||
if (!memberFull.value) return false
|
||||
|
||||
// check if any field has a value
|
||||
const { rank, unit, status } = memberFull.value
|
||||
return !!(rank || unit || status)
|
||||
})
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
if (!date) return "";
|
||||
date = typeof date === 'string' ? new Date(date) : date;
|
||||
return date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover @update:open="open => open && loadFull()">
|
||||
<PopoverTrigger @click.stop>
|
||||
<p :class="cn(
|
||||
'px-2 py-1 rounded font-medium inline-flex items-center cursor-pointer'
|
||||
)" :style="{
|
||||
color: textColor,
|
||||
backgroundColor: bgColor
|
||||
}">
|
||||
{{ displayName }}
|
||||
</p>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-72 p-0 overflow-hidden">
|
||||
<!-- Loading -->
|
||||
<div v-if="loadingFull" class="p-4 text-sm text-muted-foreground">
|
||||
Loading profile…
|
||||
</div>
|
||||
|
||||
<!-- Profile -->
|
||||
<div v-else-if="memberFull">
|
||||
<!-- Header -->
|
||||
<div class="px-4 py-3 relative" :style="{ backgroundColor: `${memberLight?.color}22` }">
|
||||
<!-- Display name / username -->
|
||||
<div class="text-lg font-semibold leading-tight" :style="{ color: memberLight?.color }">
|
||||
{{ displayName }}
|
||||
</div>
|
||||
|
||||
<div v-if="memberLight.displayName" class="text-xs text-muted-foreground">
|
||||
{{ memberLight?.username }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="p-4 space-y-3 text-sm">
|
||||
<!-- Full info -->
|
||||
<template v-if="hasFullInfo">
|
||||
<div v-if="memberFull.loa_until"
|
||||
class=" rounded-md text-center bg-yellow-500/10 px-2 py-1 text-xs text-yellow-600">
|
||||
On Leave of Absence until {{ formatDate(memberFull.loa_until) }}
|
||||
</div>
|
||||
|
||||
<div v-if="memberFull.rank" class="flex justify-between">
|
||||
<span class="text-muted-foreground">Rank</span>
|
||||
<span class="font-medium">{{ memberFull.rank }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="memberFull.unit" class="flex justify-between">
|
||||
<span class="text-muted-foreground">Unit</span>
|
||||
<span class="font-medium">{{ memberFull.unit }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="memberFull.status" class="flex justify-between">
|
||||
<span class="text-muted-foreground">Status</span>
|
||||
<span class="font-medium">{{ memberFull.status }}</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- No info fallback -->
|
||||
<div v-else class="text-sm text-muted-foreground italic">
|
||||
No user info
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Not found -->
|
||||
<div v-else class="p-4 text-sm text-muted-foreground">
|
||||
Member not found
|
||||
</div>
|
||||
</PopoverContent>
|
||||
|
||||
</Popover>
|
||||
</template>
|
||||
16
ui/src/components/ui/spinner/Spinner.vue
Normal file
16
ui/src/components/ui/spinner/Spinner.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup>
|
||||
import { Loader2Icon } from "lucide-vue-next";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const props = defineProps({
|
||||
class: { type: null, required: false },
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Loader2Icon
|
||||
role="status"
|
||||
aria-label="Loading"
|
||||
:class="cn('size-4 animate-spin', props.class)"
|
||||
/>
|
||||
</template>
|
||||
1
ui/src/components/ui/spinner/index.js
Normal file
1
ui/src/components/ui/spinner/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default as Spinner } from "./Spinner.vue";
|
||||
@@ -1 +1,97 @@
|
||||
<template>Hello</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { memberSettings } from '@shared/types/member'
|
||||
import { getMemberSettings, setMemberSettings } from "@/api/member";
|
||||
import Spinner from "@/components/ui/spinner/Spinner.vue";
|
||||
import { useMemberDirectory } from "@/stores/memberDirectory";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const saving = ref(false);
|
||||
const loading = ref(true);
|
||||
const showLoading = ref(false);
|
||||
const form = ref<memberSettings>();
|
||||
|
||||
const memberDictionary = useMemberDirectory()
|
||||
const userStore = useUserStore()
|
||||
|
||||
function saveSettings() {
|
||||
saving.value = true;
|
||||
|
||||
setTimeout(async () => {
|
||||
// Replace with your API save call
|
||||
setMemberSettings(form.value);
|
||||
saving.value = false;
|
||||
console.log(userStore.user.id)
|
||||
memberDictionary.invalidateMember(userStore.user.id)
|
||||
}, 800);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// Start a brief timer before showing the spinner
|
||||
const timer = setTimeout(() => {
|
||||
showLoading.value = true;
|
||||
}, 200); // 150–250ms is ideal
|
||||
|
||||
form.value = await getMemberSettings();
|
||||
|
||||
clearTimeout(timer);
|
||||
loading.value = false;
|
||||
showLoading.value = false; // ensure spinner hides if it was shown
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-3xl w-full py-10 px-6 space-y-10">
|
||||
<!-- Page Header -->
|
||||
<div>
|
||||
<h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">Profile Settings</h1>
|
||||
<p class="text-muted-foreground mt-1">
|
||||
Manage your account information and display preferences.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Account Info</CardTitle>
|
||||
<CardDescription>Your identity across the platform.</CardDescription>
|
||||
</CardHeader>
|
||||
<Transition name="fade" mode="out-in">
|
||||
|
||||
<CardContent class="space-y-6 min-h-40" v-if="!loading">
|
||||
<!-- Display Name -->
|
||||
<div class="grid gap-2">
|
||||
<Label for="displayName">Display Name</Label>
|
||||
<Input id="displayName" v-model="form.displayName" placeholder="Your display name" />
|
||||
</div>
|
||||
|
||||
</CardContent>
|
||||
<CardContent v-else class="min-h-40 space-y-6 flex items-center">
|
||||
<Spinner v-if="showLoading" class="size-7 flex mx-auto -my-10"></Spinner>
|
||||
</CardContent>
|
||||
</Transition>
|
||||
|
||||
<CardFooter class="flex justify-end">
|
||||
<Button @click="saveSettings" :disabled="saving">
|
||||
{{ saving ? "Saving..." : "Save Changes" }}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.05s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -21,6 +21,7 @@ import SelectValue from '@/components/ui/select/SelectValue.vue';
|
||||
import SelectContent from '@/components/ui/select/SelectContent.vue';
|
||||
import SelectItem from '@/components/ui/select/SelectItem.vue';
|
||||
import Input from '@/components/ui/input/Input.vue';
|
||||
import MemberCard from '@/components/members/MemberCard.vue';
|
||||
|
||||
enum sidePanelState { view, create, closed };
|
||||
|
||||
@@ -152,9 +153,13 @@ onMounted(async () => {
|
||||
<TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname :
|
||||
report.course_name }}</TableCell>
|
||||
<TableCell>{{ report.date.split('T')[0] }}</TableCell>
|
||||
<TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
|
||||
<TableCell class="text-right">
|
||||
<MemberCard v-if="report.created_by_name" :member-id="report.created_by"></MemberCard>
|
||||
<span v-else>Unknown User</span>
|
||||
</TableCell>
|
||||
<!-- <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
|
||||
report.created_by_name
|
||||
}}</TableCell>
|
||||
}}</TableCell> -->
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
@@ -172,11 +177,14 @@ onMounted(async () => {
|
||||
<div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4">
|
||||
<p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}
|
||||
</p>
|
||||
<div class="flex gap-10">
|
||||
<div class="flex gap-10 items-center">
|
||||
<p class="text-muted-foreground">{{ focusedTrainingReport.event_date.split('T')[0] }}</p>
|
||||
<p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
|
||||
<p class="flex gap-2 items-center">Created by:
|
||||
<MemberCard v-if="focusedTrainingReport.created_by"
|
||||
:member-id="focusedTrainingReport.created_by" />
|
||||
<p v-else>{{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
|
||||
focusedTrainingReport.created_by_name
|
||||
}}
|
||||
}}</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,7 +199,11 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div v-for="person in focusedTrainingTrainers"
|
||||
class="grid grid-cols-4 py-2 items-center border-b last:border-none">
|
||||
<p>{{ person.attendee_name }}</p>
|
||||
<div>
|
||||
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
||||
class="justify-self-start"></MemberCard>
|
||||
<p v-else>{{ person.attendee_name }}</p>
|
||||
</div>
|
||||
<p class="">{{ person.role.name }}</p>
|
||||
<p class="col-span-2 text-right px-2"
|
||||
:class="person.remarks == '' ? 'text-muted-foreground' : ''">
|
||||
@@ -213,7 +225,11 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div v-for="person in focusedTrainingTrainees"
|
||||
class="grid grid-cols-5 py-2 items-center border-b last:border-none">
|
||||
<p>{{ person.attendee_name }}</p>
|
||||
<div>
|
||||
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
||||
class="justify-self-start"></MemberCard>
|
||||
<p v-else>{{ person.attendee_name }}</p>
|
||||
</div>
|
||||
<Checkbox :disabled="!focusedTrainingReport.course.hasQual"
|
||||
:model-value="person.passed_bookwork" class="pointer-events-none ml-5">
|
||||
</Checkbox>
|
||||
@@ -242,7 +258,11 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div v-for="person in focusedNoShows"
|
||||
class="grid grid-cols-5 py-2 items-center border-b last:border-none">
|
||||
<p>{{ person.attendee_name }}</p>
|
||||
<div>
|
||||
<MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
|
||||
class="justify-self-start"></MemberCard>
|
||||
<p v-else>{{ person.attendee_name }}</p>
|
||||
</div>
|
||||
<!-- <Checkbox :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
|
||||
</Checkbox>
|
||||
<Checkbox :default-value="person.passed_qual ? true : false" class="pointer-events-none">
|
||||
|
||||
140
ui/src/stores/memberDirectory.ts
Normal file
140
ui/src/stores/memberDirectory.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
import { defineStore } from "pinia"
|
||||
import type { MemberLight, Member } from "@shared/types/member"
|
||||
import { getLightMembers, getFullMembers } from "@/api/member"
|
||||
import { reactive, ref } from "vue"
|
||||
import { resolve } from "path"
|
||||
import { rejects } from "assert"
|
||||
|
||||
export const useMemberDirectory = defineStore('memberDirectory', () => {
|
||||
const light = reactive<Record<number, MemberLight>>({});
|
||||
const full = reactive<Record<number, Member>>({})
|
||||
|
||||
function getLight(id: number): Promise<MemberLight> {
|
||||
if (light[id]) return Promise.resolve(light[id]);
|
||||
|
||||
if (!lightWaiters.has(id)) {
|
||||
pendingLight.add(id);
|
||||
lightWaiters.set(id, []);
|
||||
}
|
||||
|
||||
scheduleBatch();
|
||||
|
||||
return new Promise<MemberLight>((resolve, reject) => {
|
||||
lightWaiters.get(id)!.push({ resolve, reject })
|
||||
})
|
||||
}
|
||||
|
||||
function getFull(id: number): Promise<Member> {
|
||||
if (full[id]) return Promise.resolve(full[id])
|
||||
|
||||
if (!fullWaiters.has(id)) {
|
||||
pendingFull.add(id)
|
||||
fullWaiters.set(id, [])
|
||||
}
|
||||
|
||||
scheduleBatch()
|
||||
|
||||
return new Promise<Member>((resolve, reject) => {
|
||||
fullWaiters.get(id)!.push({ resolve, reject })
|
||||
})
|
||||
}
|
||||
|
||||
function invalidateMember(id: number) {
|
||||
delete light[id]
|
||||
delete full[id]
|
||||
}
|
||||
|
||||
//batching system
|
||||
const pendingLight = new Set<number>()
|
||||
const pendingFull = new Set<number>()
|
||||
|
||||
// promises
|
||||
const lightWaiters = new Map<number, Array<{ resolve: (m: MemberLight) => void; reject: (e: any) => void }>>()
|
||||
const fullWaiters = new Map<number, Array<{ resolve: (m: Member) => void; reject: (e: any) => void }>>()
|
||||
|
||||
let batchTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function scheduleBatch() {
|
||||
if (batchTimer) return
|
||||
|
||||
batchTimer = setTimeout(async () => {
|
||||
batchTimer = null;
|
||||
|
||||
//Batch light
|
||||
if (pendingLight.size > 0) {
|
||||
const ids = Array.from(pendingLight);
|
||||
pendingLight.clear();
|
||||
|
||||
try {
|
||||
const res = await getLightMembers(ids);
|
||||
for (const m of res) {
|
||||
light[m.id] = m;
|
||||
|
||||
const waiters = lightWaiters.get(m.id);
|
||||
if (waiters) {
|
||||
for (const w of waiters) w.resolve(m)
|
||||
lightWaiters.delete(m.id)
|
||||
}
|
||||
}
|
||||
|
||||
for (const id of ids) {
|
||||
if (!light[id]) {
|
||||
const waiters = lightWaiters.get(id);
|
||||
if (waiters) {
|
||||
for (const w of waiters) w.reject("Not found");
|
||||
lightWaiters.delete(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
for (const id of ids) {
|
||||
const waiters = lightWaiters.get(id);
|
||||
if (waiters) {
|
||||
for (const w of waiters) w.reject(error);
|
||||
lightWaiters.delete(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//batch full
|
||||
if (pendingFull.size > 0) {
|
||||
const ids = Array.from(pendingFull);
|
||||
pendingFull.clear();
|
||||
|
||||
try {
|
||||
const res = await getFullMembers(ids);
|
||||
for (const m of res) {
|
||||
full[m.member_id] = m;
|
||||
|
||||
const waiters = fullWaiters.get(m.member_id);
|
||||
if (waiters) {
|
||||
for (const w of waiters) w.resolve(m)
|
||||
fullWaiters.delete(m.member_id);
|
||||
}
|
||||
}
|
||||
|
||||
for (const id of ids) {
|
||||
if (!light[id]) {
|
||||
const waiters = fullWaiters.get(id);
|
||||
if (waiters) {
|
||||
for (const w of waiters) w.reject("Not found");
|
||||
fullWaiters.delete(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
for (const id of ids) {
|
||||
const waiters = fullWaiters.get(id);
|
||||
if (waiters) {
|
||||
for (const w of waiters) w.reject(error);
|
||||
fullWaiters.delete(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return { light, full, getLight, getFull, invalidateMember }
|
||||
})
|
||||
Reference in New Issue
Block a user