Compare commits
2 Commits
Profile-sy
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 2ea355d9d8 | |||
| 4d19f26f01 |
@@ -48,12 +48,12 @@ jobs:
|
||||
cd /var/www/html/milsim-site-v4
|
||||
version=`git log -1 --format=%H`
|
||||
echo "Current Revision: $version"
|
||||
echo "Updating to: ${{ github.sha }}
|
||||
echo "Updating to: ${{ github.sha }}"
|
||||
sudo -u nginx git reset --hard
|
||||
sudo -u nginx git pull origin main
|
||||
sudo -u nginx git fetch --tags
|
||||
sudo -u nginx git pull origin main
|
||||
new_version=`git log -1 --format=%H`
|
||||
echo "Sucessfully updated to: $new_version
|
||||
echo "Successfully updated to: $new_version"
|
||||
|
||||
- name: Update Shared Dependencies and Fix Permissions
|
||||
run: |
|
||||
|
||||
@@ -3,8 +3,7 @@ const router = express.Router();
|
||||
|
||||
import pool from '../db';
|
||||
import { approveApplication, createApplication, denyApplication, getAllMemberApplications, getApplicationByID, getApplicationComments, getApplicationList, getMemberApplication } from '../services/applicationService';
|
||||
import { setUserState } from '../services/memberService';
|
||||
import { MemberState } from '@app/shared/types/member';
|
||||
import { MemberState, setUserState } from '../services/memberService';
|
||||
import { getRankByName, insertMemberRank } from '../services/rankService';
|
||||
import { ApplicationFull, CommentRow } from "@app/shared/types/application"
|
||||
import { assignUserToStatus } from '../services/statusService';
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
|
||||
import { Request, Response } from 'express';
|
||||
import pool from '../db';
|
||||
import { getUserActiveLOA } from '../services/loaService';
|
||||
import { getMemberSettings, getMembersFull, getMembersLite, getUserData, setUserSettings } from '../services/memberService';
|
||||
import { getUserData } from '../services/memberService';
|
||||
import { getUserRoles } from '../services/rolesService';
|
||||
import { memberSettings } from '@app/shared/types/member';
|
||||
|
||||
router.use((req, res, next) => {
|
||||
console.log(req.user);
|
||||
@@ -62,53 +60,6 @@ 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;
|
||||
@@ -123,4 +74,13 @@ 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,17 +1,25 @@
|
||||
import pool from "../db";
|
||||
import { Member, MemberLight, memberSettings, MemberState } from '@app/shared/types/member'
|
||||
|
||||
export enum MemberState {
|
||||
Guest = "guest",
|
||||
Applicant = "applicant",
|
||||
Member = "member",
|
||||
Retired = "retired",
|
||||
Banned = "banned",
|
||||
Denied = "denied"
|
||||
}
|
||||
|
||||
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 {
|
||||
@@ -24,40 +32,3 @@ 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;
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
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,4 +1,14 @@
|
||||
import { memberSettings, Member, MemberLight } from "@shared/types/member";
|
||||
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;
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const addr = import.meta.env.VITE_APIHOST;
|
||||
@@ -11,66 +21,4 @@ export async function getMembers(): Promise<Member[]> {
|
||||
throw new Error("Failed to fetch members");
|
||||
}
|
||||
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();
|
||||
}
|
||||
@@ -19,8 +19,6 @@ import NavigationMenuContent from '../ui/navigation-menu/NavigationMenuContent.v
|
||||
import { navigationMenuTriggerStyle } from '../ui/navigation-menu/'
|
||||
import { useAuth } from '@/composables/useAuth';
|
||||
import { ArrowUpRight, CircleArrowOutUpRight } from 'lucide-vue-next';
|
||||
import DropdownMenuGroup from '../ui/dropdown-menu/DropdownMenuGroup.vue';
|
||||
import DropdownMenuSeparator from '../ui/dropdown-menu/DropdownMenuSeparator.vue';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const auth = useAuth();
|
||||
@@ -182,12 +180,10 @@ function blurAfter() {
|
||||
<p>{{ userStore.user.name }}</p>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="$router.push('/profile')">My Profile</DropdownMenuItem>
|
||||
<DropdownMenuSeparator></DropdownMenuSeparator>
|
||||
<!-- <DropdownMenuItem>My Profile</DropdownMenuItem> -->
|
||||
<!-- <DropdownMenuItem>Settings</DropdownMenuItem> -->
|
||||
<DropdownMenuItem @click="$router.push('/join')">My Application</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="$router.push('/applications')">Application History</DropdownMenuItem>
|
||||
<DropdownMenuSeparator></DropdownMenuSeparator>
|
||||
<DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
@@ -15,7 +15,6 @@ import { useAuth } from '@/composables/useAuth'
|
||||
import { CommentRow } from '@shared/types/application'
|
||||
import { Dot } from 'lucide-vue-next'
|
||||
import { ref } from 'vue'
|
||||
import MemberCard from '../members/MemberCard.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
messages: CommentRow[]
|
||||
@@ -72,7 +71,7 @@ function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => vo
|
||||
<!-- Comment header -->
|
||||
<div class="flex justify-between">
|
||||
<div class="flex">
|
||||
<MemberCard :member-id="message.poster_id"></MemberCard>
|
||||
<p>{{ message.poster_name }}</p>
|
||||
<p v-if="message.admin_only" class="flex">
|
||||
<Dot /><span class="text-amber-300">Internal</span>
|
||||
</p>
|
||||
|
||||
@@ -12,7 +12,6 @@ import DropdownMenuTrigger from '../ui/dropdown-menu/DropdownMenuTrigger.vue';
|
||||
import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue';
|
||||
import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
|
||||
import { Calendar } from 'lucide-vue-next';
|
||||
import MemberCard from '../members/MemberCard.vue';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
@@ -240,7 +239,7 @@ defineExpose({ forceReload })
|
||||
<MapPin :size="20"></MapPin> {{ activeEvent.location || "Unknown" }}
|
||||
</div>
|
||||
<div class="text-foreground/80 flex gap-3 items-center">
|
||||
<User :size="20"></User> <MemberCard :member-id="activeEvent.creator_id"></MemberCard>
|
||||
<User :size="20"></User> {{ activeEvent.creator_name || "Unknown User" }}
|
||||
</div>
|
||||
</section>
|
||||
<!-- Description -->
|
||||
@@ -277,9 +276,7 @@ defineExpose({ forceReload })
|
||||
|
||||
<div v-for="person in attendanceList" :key="person.member_id"
|
||||
class="grid grid-cols-2 py-1 *:px-3 hover:bg-muted">
|
||||
<div>
|
||||
<MemberCard :member-id="person.member_id"></MemberCard>
|
||||
</div>
|
||||
<p>{{ person.member_name }}</p>
|
||||
<p :class="statusColor(person.status)" class="text-right">
|
||||
{{ displayStatus(person.status) }}
|
||||
</p>
|
||||
|
||||
@@ -32,7 +32,6 @@ import {
|
||||
getLocalTimeZone,
|
||||
} from "@internationalized/date"
|
||||
import { el } from "@fullcalendar/core/internal-common";
|
||||
import MemberCard from "../members/MemberCard.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
adminMode?: boolean
|
||||
@@ -147,7 +146,7 @@ async function commitExtend() {
|
||||
<TableBody>
|
||||
<TableRow v-for="post in LOAList" :key="post.id" class="hover:bg-muted/50">
|
||||
<TableCell class="font-medium">
|
||||
<MemberCard :member-id="post.member_id"></MemberCard>
|
||||
{{ post.name }}
|
||||
</TableCell>
|
||||
<TableCell>{{ post.type_name }}</TableCell>
|
||||
<TableCell>{{ formatDate(post.start_date) }}</TableCell>
|
||||
|
||||
@@ -1,153 +0,0 @@
|
||||
<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>
|
||||
@@ -1,16 +0,0 @@
|
||||
<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 +0,0 @@
|
||||
export { default as Spinner } from "./Spinner.vue";
|
||||
@@ -15,7 +15,6 @@ import { onMounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { CheckIcon, XIcon } from 'lucide-vue-next';
|
||||
import Application from './Application.vue';
|
||||
import MemberCard from '@/components/members/MemberCard.vue';
|
||||
|
||||
const appList = ref([]);
|
||||
const now = Date.now();
|
||||
@@ -114,9 +113,7 @@ onMounted(async () => {
|
||||
<TableBody>
|
||||
<TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
|
||||
@click="openApplication(app.id)">
|
||||
<TableCell class="font-medium">
|
||||
<MemberCard :memberId="app.member_id"></MemberCard>
|
||||
</TableCell>
|
||||
<TableCell class="font-medium">{{ app.member_name }}</TableCell>
|
||||
<TableCell :title="formatExact(app.submitted_at)">
|
||||
{{ formatAgo(app.submitted_at) }}
|
||||
</TableCell>
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
<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,7 +21,6 @@ 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 };
|
||||
|
||||
@@ -153,13 +152,9 @@ 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">
|
||||
<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" :
|
||||
<TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
|
||||
report.created_by_name
|
||||
}}</TableCell> -->
|
||||
}}</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
@@ -177,14 +172,11 @@ 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 items-center">
|
||||
<div class="flex gap-10">
|
||||
<p class="text-muted-foreground">{{ focusedTrainingReport.event_date.split('T')[0] }}</p>
|
||||
<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" :
|
||||
<p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
|
||||
focusedTrainingReport.created_by_name
|
||||
}}</p>
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,11 +191,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div v-for="person in focusedTrainingTrainers"
|
||||
class="grid grid-cols-4 py-2 items-center border-b last:border-none">
|
||||
<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>{{ person.attendee_name }}</p>
|
||||
<p class="">{{ person.role.name }}</p>
|
||||
<p class="col-span-2 text-right px-2"
|
||||
:class="person.remarks == '' ? 'text-muted-foreground' : ''">
|
||||
@@ -225,11 +213,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div v-for="person in focusedTrainingTrainees"
|
||||
class="grid grid-cols-5 py-2 items-center border-b last:border-none">
|
||||
<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>{{ person.attendee_name }}</p>
|
||||
<Checkbox :disabled="!focusedTrainingReport.course.hasQual"
|
||||
:model-value="person.passed_bookwork" class="pointer-events-none ml-5">
|
||||
</Checkbox>
|
||||
@@ -258,11 +242,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div v-for="person in focusedNoShows"
|
||||
class="grid grid-cols-5 py-2 items-center border-b last:border-none">
|
||||
<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>{{ person.attendee_name }}</p>
|
||||
<!-- <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">
|
||||
|
||||
@@ -16,7 +16,6 @@ const router = createRouter({
|
||||
{ path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } },
|
||||
{ path: '/loa', component: () => import('@/pages/SubmitLOA.vue'), meta: { requiresAuth: true, memberOnly: true } },
|
||||
{ path: '/transfer', component: () => import('@/pages/Transfer.vue'), meta: { requiresAuth: true, memberOnly: true } },
|
||||
{ path: '/profile', component: () => import('@/pages/MyProfile.vue'), meta: { requiresAuth: true, memberOnly: true } },
|
||||
|
||||
|
||||
{ path: '/calendar', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true }, },
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
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