did a whole ton of shit with calendars and roles system
This commit is contained in:
@@ -43,6 +43,7 @@ const members = require('./routes/members');
|
||||
const loaHandler = require('./routes/loa')
|
||||
const { status, memberStatus } = require('./routes/statuses')
|
||||
const authRouter = require('./routes/auth')
|
||||
const { roles, memberRoles } = require('./routes/roles')
|
||||
|
||||
app.use('/application', applicationsRouter);
|
||||
app.use('/ranks', ranks);
|
||||
@@ -51,6 +52,8 @@ app.use('/members', members);
|
||||
app.use('/loa', loaHandler);
|
||||
app.use('/status', status)
|
||||
app.use('/memberStatus', memberStatus)
|
||||
app.use('/roles', roles)
|
||||
app.use('/memberRoles', memberRoles)
|
||||
app.use('/', authRouter)
|
||||
|
||||
app.get('/ping', (req, res) => {
|
||||
|
||||
@@ -36,5 +36,3 @@ r.get('/', async (req, res) => {
|
||||
|
||||
module.exports.ranks = r;
|
||||
module.exports.memberRanks = ur;
|
||||
|
||||
// TODO, implement get all ranks route with SQL stirng SELECT id, name, short_name, category, sort_id FROM ranks;
|
||||
118
api/routes/roles.js
Normal file
118
api/routes/roles.js
Normal file
@@ -0,0 +1,118 @@
|
||||
const express = require('express');
|
||||
const r = express.Router();
|
||||
const ur = express.Router();
|
||||
|
||||
const pool = require('../db');
|
||||
|
||||
//assign a member to a role
|
||||
ur.post('/', async (req, res) => {
|
||||
try {
|
||||
const body = req.body;
|
||||
const sql = `INSERT INTO members_roles (member_id, role_id) VALUES (?, ?);`;
|
||||
|
||||
await pool.query(sql, [body.member_id, body.role_id]);
|
||||
|
||||
res.sendStatus(201);
|
||||
} catch (err) {
|
||||
console.error('Insert failed:', err);
|
||||
res.status(500).json({ error: 'Failed to add to group' });
|
||||
}
|
||||
});
|
||||
|
||||
ur.delete('/', async (req, res) => {
|
||||
try {
|
||||
const body = req.body;
|
||||
console.log(body);
|
||||
|
||||
const sql = 'DELETE FROM members_roles WHERE member_id = ? AND role_id = ?'
|
||||
await pool.query(sql, [body.member_id, body.role_id])
|
||||
|
||||
res.sendStatus(200);
|
||||
}
|
||||
catch (err) {
|
||||
console.error("delete failed: ", err)
|
||||
res.status(500).json({ error: 'Failed to remove from group' });
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
//get all roles
|
||||
r.get('/', async (req, res) => {
|
||||
try {
|
||||
const con = await pool.getConnection();
|
||||
|
||||
// Get all roles
|
||||
const roles = await con.query('SELECT * FROM roles;');
|
||||
|
||||
// Get all members for each role
|
||||
const membersRoles = await con.query(`
|
||||
SELECT mr.role_id, v.*
|
||||
FROM members_roles mr
|
||||
JOIN view_member_rank_status_all v ON mr.member_id = v.member_id
|
||||
`);
|
||||
|
||||
|
||||
// Group members by role_id
|
||||
const roleIdToMembers = {};
|
||||
for (const row of membersRoles) {
|
||||
if (!roleIdToMembers[row.role_id]) roleIdToMembers[row.role_id] = [];
|
||||
// Remove role_id from member object
|
||||
const { role_id, ...member } = row;
|
||||
roleIdToMembers[role_id].push(member);
|
||||
}
|
||||
|
||||
// Attach members to each role
|
||||
const result = roles.map(role => ({
|
||||
...role,
|
||||
members: roleIdToMembers[role.id] || []
|
||||
}));
|
||||
|
||||
con.release();
|
||||
res.json(result);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
//create a new role
|
||||
r.post('/', async (req, res) => {
|
||||
try {
|
||||
const { name, color, description } = req.body;
|
||||
console.log('Creating role:', { name, color, description });
|
||||
if (!name || !color) {
|
||||
return res.status(400).json({ error: 'Name and color are required' });
|
||||
}
|
||||
|
||||
const hexColorRegex = /^#([0-9A-Fa-f]{6})$/;
|
||||
if (!hexColorRegex.test(color)) {
|
||||
return res.status(400).json({ error: 'Color must be a valid hex color (#ffffff)' });
|
||||
}
|
||||
|
||||
const sql = `INSERT INTO roles (name, color, description) VALUES (?, ?, ?);`;
|
||||
const params = [name, color, description || null];
|
||||
|
||||
const result = await pool.query(sql, params);
|
||||
|
||||
res.status(201).json({ id: result.insertId, name, color, description });
|
||||
} catch (err) {
|
||||
console.error('Insert failed:', err);
|
||||
res.status(500).json({ error: 'Failed to create role' });
|
||||
}
|
||||
})
|
||||
|
||||
r.delete('/:id', async (req, res) => {
|
||||
try {
|
||||
const id = req.params.id;
|
||||
|
||||
const sql = 'DELETE FROM roles WHERE id = ?';
|
||||
const res = await pool.query(sql, [id]);
|
||||
res.sendStatus(200);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
res.sendStatus(500);
|
||||
}
|
||||
})
|
||||
|
||||
module.exports.roles = r;
|
||||
module.exports.memberRoles = ur;
|
||||
64
ui/package-lock.json
generated
64
ui/package-lock.json
generated
@@ -8,6 +8,11 @@
|
||||
"name": "milsimsitev4",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.19",
|
||||
"@fullcalendar/daygrid": "^6.1.19",
|
||||
"@fullcalendar/interaction": "^6.1.19",
|
||||
"@fullcalendar/timegrid": "^6.1.19",
|
||||
"@fullcalendar/vue3": "^6.1.19",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"@tanstack/vue-table": "^8.21.3",
|
||||
"@vee-validate/zod": "^4.15.1",
|
||||
@@ -982,6 +987,55 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/core": {
|
||||
"version": "6.1.19",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.19.tgz",
|
||||
"integrity": "sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"preact": "~10.12.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/daygrid": {
|
||||
"version": "6.1.19",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.19.tgz",
|
||||
"integrity": "sha512-IAAfnMICnVWPjpT4zi87i3FEw0xxSza0avqY/HedKEz+l5MTBYvCDPOWDATpzXoLut3aACsjktIyw9thvIcRYQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.19"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/interaction": {
|
||||
"version": "6.1.19",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.19.tgz",
|
||||
"integrity": "sha512-GOciy79xe8JMVp+1evAU3ytdwN/7tv35t5i1vFkifiuWcQMLC/JnLg/RA2s4sYmQwoYhTw/p4GLcP0gO5B3X5w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.19"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/timegrid": {
|
||||
"version": "6.1.19",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.19.tgz",
|
||||
"integrity": "sha512-OuzpUueyO9wB5OZ8rs7TWIoqvu4v3yEqdDxZ2VcsMldCpYJRiOe7yHWKr4ap5Tb0fs7Rjbserc/b6Nt7ol6BRg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fullcalendar/daygrid": "~6.1.19"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.19"
|
||||
}
|
||||
},
|
||||
"node_modules/@fullcalendar/vue3": {
|
||||
"version": "6.1.19",
|
||||
"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.1.19.tgz",
|
||||
"integrity": "sha512-j5eUSxx0xIy3ADljo0f5B9PhjqXnCQ+7nUMPfsslc2eGVjp4F74YvY3dyd6OBbg13IvpsjowkjncGipYMQWmTA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fullcalendar/core": "~6.1.19",
|
||||
"vue": "^3.0.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@internationalized/date": {
|
||||
"version": "3.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz",
|
||||
@@ -3154,6 +3208,16 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.12.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
|
||||
"integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-ms": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.2.0.tgz",
|
||||
|
||||
@@ -12,6 +12,11 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.19",
|
||||
"@fullcalendar/daygrid": "^6.1.19",
|
||||
"@fullcalendar/interaction": "^6.1.19",
|
||||
"@fullcalendar/timegrid": "^6.1.19",
|
||||
"@fullcalendar/vue3": "^6.1.19",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"@tanstack/vue-table": "^8.21.3",
|
||||
"@vee-validate/zod": "^4.15.1",
|
||||
|
||||
@@ -51,9 +51,9 @@ function formatDate(dateStr) {
|
||||
<RouterLink to="/">
|
||||
<Button variant="link">Home</Button>
|
||||
</RouterLink>
|
||||
<!-- <RouterLink to="/">
|
||||
<RouterLink to="/calendar">
|
||||
<Button variant="link">Calendar</Button>
|
||||
</RouterLink> -->
|
||||
</RouterLink>
|
||||
<RouterLink to="/members">
|
||||
<Button variant="link">Members</Button>
|
||||
</RouterLink>
|
||||
@@ -87,6 +87,9 @@ function formatDate(dateStr) {
|
||||
<RouterLink to="/administration/applications">
|
||||
<Button variant="link">Recruitment</Button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/administration/roles">
|
||||
<Button variant="link">Role Management</Button>
|
||||
</RouterLink>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
@@ -112,14 +115,14 @@ function formatDate(dateStr) {
|
||||
</div>
|
||||
</div>
|
||||
<Separator></Separator>
|
||||
<Alert class="m-2 mx-auto w-5xl" variant="info">
|
||||
<Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
|
||||
<AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
|
||||
<p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
|
||||
<Button variant="secondary">End LOA</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<RouterView></RouterView>
|
||||
<RouterView class=""></RouterView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
95
ui/src/api/roles.ts
Normal file
95
ui/src/api/roles.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
export type Role = {
|
||||
id: number;
|
||||
name: string;
|
||||
color: string;
|
||||
description: string | null;
|
||||
members: any[];
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const addr = import.meta.env.VITE_APIHOST;
|
||||
|
||||
export async function getRoles(): Promise<Role[]> {
|
||||
const res = await fetch(`${addr}/roles`)
|
||||
|
||||
if (res.ok) {
|
||||
return res.json() as Promise<Role[]>;
|
||||
} else {
|
||||
console.error("Something went wrong approving the application")
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function createRole(name: string, color: string, description: string | null): Promise<Role | null> {
|
||||
const res = await fetch(`${addr}/roles`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
color,
|
||||
description
|
||||
})
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
return res.json() as Promise<Role>;
|
||||
} else {
|
||||
console.error("Something went wrong creating the role");
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function addMemberToRole(member_id: number, role_id: number): Promise<boolean> {
|
||||
const res = await fetch(`${addr}/memberRoles`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
member_id,
|
||||
role_id
|
||||
})
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
return true;
|
||||
} else {
|
||||
console.error("Something went wrong adding the member to the role");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export async function removeMemberFromRole(member_id: number, role_id: number): Promise<boolean> {
|
||||
const res = await fetch(`${addr}/memberRoles`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
member_id,
|
||||
role_id
|
||||
})
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
return true;
|
||||
} else {
|
||||
console.error("Something went wrong removing the member from the role");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteRole(role_id: number): Promise<boolean> {
|
||||
const res = await fetch(`${addr}/roles/${role_id}`, {
|
||||
method: "DELETE"
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
return true;
|
||||
} else {
|
||||
console.error("Something went wrong deleting the role");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
451
ui/src/pages/Calendar.vue
Normal file
451
ui/src/pages/Calendar.vue
Normal file
@@ -0,0 +1,451 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick, computed } from 'vue'
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import { X, Clock, MapPin, User, ListTodo } from 'lucide-vue-next'
|
||||
|
||||
|
||||
type CalEvent = {
|
||||
id: string
|
||||
title: string
|
||||
start: string
|
||||
end?: string
|
||||
extendedProps?: Record<string, any>
|
||||
}
|
||||
|
||||
const events = ref<CalEvent[]>([
|
||||
{ id: '1', title: 'Squad Training', start: '2025-10-08T19:00:00', extendedProps: { trainer: 'Alex', location: 'Range A', color: '#88C4FF' } },
|
||||
{ id: '2', title: 'Ops Briefing', start: '2025-10-09T20:30:00', extendedProps: { owner: 'CO', agenda: ['Weather', 'Route', 'Risks'], color: '#dba42c' } },
|
||||
])
|
||||
|
||||
const panelOpen = ref(false)
|
||||
const activeEvent = ref<CalEvent | null>(null)
|
||||
const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null)
|
||||
|
||||
function onEventClick(arg: any) {
|
||||
activeEvent.value = {
|
||||
id: arg.event.id,
|
||||
title: arg.event.title,
|
||||
start: arg.event.startStr,
|
||||
end: arg.event.endStr,
|
||||
extendedProps: arg.event.extendedProps
|
||||
}
|
||||
panelOpen.value = true
|
||||
}
|
||||
|
||||
// NEW: handle day/time slot clicks to start creating an event
|
||||
function onDateClick(arg: { dateStr: string }) {
|
||||
// For now, just open the panel with a draft payload.
|
||||
activeEvent.value = {
|
||||
id: '__draft__',
|
||||
title: 'New event',
|
||||
start: arg.dateStr,
|
||||
extendedProps: { draft: true }
|
||||
}
|
||||
panelOpen.value = true
|
||||
}
|
||||
|
||||
const calendarOptions = ref({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
height: '100%',
|
||||
expandRows: true,
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: ''
|
||||
},
|
||||
events,
|
||||
selectable: false,
|
||||
navLinks: false,
|
||||
dateClick: onDateClick,
|
||||
eventClick: onEventClick,
|
||||
editable: true,
|
||||
|
||||
// force block-mode in dayGrid so we can lay it out on one line
|
||||
eventDisplay: 'block',
|
||||
|
||||
// compact time like "19:00"
|
||||
eventTimeFormat: {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true
|
||||
} as const,
|
||||
|
||||
// custom renderer -> one-line pill
|
||||
eventContent(arg) {
|
||||
const ext = arg.event.extendedProps || {}
|
||||
const c = ext.color || arg.backgroundColor || arg.borderColor || ''
|
||||
|
||||
const wrap = document.createElement('div')
|
||||
wrap.className = 'ev-pill'
|
||||
if (c) wrap.style.setProperty('--ev-color', String(c)) // dot color
|
||||
|
||||
const dot = document.createElement('span')
|
||||
dot.className = 'ev-dot'
|
||||
|
||||
const time = document.createElement('span')
|
||||
time.className = 'ev-time'
|
||||
time.textContent = arg.timeText
|
||||
|
||||
const title = document.createElement('span')
|
||||
title.className = 'ev-title'
|
||||
title.textContent = arg.event.title
|
||||
|
||||
wrap.append(dot, time, title)
|
||||
return { domNodes: [wrap] }
|
||||
},
|
||||
})
|
||||
|
||||
watch(panelOpen, async () => {
|
||||
await nextTick()
|
||||
calendarRef.value?.getApi().updateSize()
|
||||
})
|
||||
|
||||
|
||||
const startFmt = new Intl.DateTimeFormat(undefined, {
|
||||
weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
|
||||
hour: 'numeric', minute: '2-digit'
|
||||
})
|
||||
const endFmt = new Intl.DateTimeFormat(undefined, {
|
||||
hour: 'numeric', minute: '2-digit'
|
||||
})
|
||||
|
||||
const whenText = computed(() => {
|
||||
if (!activeEvent.value?.start) return ''
|
||||
const s = new Date(activeEvent.value.start)
|
||||
const e = activeEvent.value?.end ? new Date(activeEvent.value.end) : null
|
||||
return e
|
||||
? `${startFmt.format(s)} – ${endFmt.format(e)}`
|
||||
: `${startFmt.format(s)}`
|
||||
})
|
||||
|
||||
const ext = computed(() => activeEvent.value?.extendedProps ?? {})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<div class="flex-1 min-h-0 mt-5">
|
||||
<div class="h-[80vh] min-h-0">
|
||||
<FullCalendar ref="calendarRef" :options="calendarOptions" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside v-if="panelOpen" class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col"
|
||||
:style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between gap-3 border-b px-4 py-3">
|
||||
<h2 class="text-lg font-semibold line-clamp-2">
|
||||
{{ activeEvent?.title || 'Event' }}
|
||||
</h2>
|
||||
<button
|
||||
class="inline-flex size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition"
|
||||
aria-label="Close" @click="panelOpen = false">
|
||||
<X class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-6">
|
||||
<!-- When -->
|
||||
<section v-if="whenText" class="space-y-2">
|
||||
<div class="inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm">
|
||||
<Clock class="size-4 opacity-80" />
|
||||
<span class="font-medium">{{ whenText }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick meta chips -->
|
||||
<section class="flex flex-wrap gap-2">
|
||||
<span v-if="ext.location"
|
||||
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
|
||||
<MapPin class="size-3.5 opacity-80" />
|
||||
<span class="font-medium">{{ ext.location }}</span>
|
||||
</span>
|
||||
<span v-if="ext.owner" class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
|
||||
<User class="size-3.5 opacity-80" />
|
||||
<span class="font-medium">Owner: {{ ext.owner }}</span>
|
||||
</span>
|
||||
<span v-if="ext.trainer"
|
||||
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
|
||||
<User class="size-3.5 opacity-80" />
|
||||
<span class="font-medium">Trainer: {{ ext.trainer }}</span>
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<!-- Agenda (special-cased array) -->
|
||||
<section v-if="Array.isArray(ext.agenda) && ext.agenda.length" class="space-y-2">
|
||||
<div class="flex items-center gap-2 text-sm font-medium">
|
||||
<ListTodo class="size-4 opacity-80" />
|
||||
Agenda
|
||||
</div>
|
||||
<ul class="space-y-1.5">
|
||||
<li v-for="(item, i) in ext.agenda" :key="i" class="flex items-start gap-2 text-sm">
|
||||
<span class="mt-1.5 size-1.5 rounded-full bg-foreground/50"></span>
|
||||
<span>{{ item }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Generic details (extendedProps minus the ones above) -->
|
||||
<section v-if="ext && Object.keys(ext).length" class="space-y-3">
|
||||
<div class="text-sm font-medium opacity-80">Details</div>
|
||||
<dl class="grid grid-cols-1 gap-y-3">
|
||||
<template v-for="(val, key) in ext" :key="key">
|
||||
<template v-if="!['agenda', 'owner', 'trainer', 'location'].includes(String(key))">
|
||||
<div class="grid grid-cols-[120px_1fr] items-start gap-3">
|
||||
<dt class="text-xs uppercase tracking-wide opacity-60">{{ key }}</dt>
|
||||
<dd class="text-sm">
|
||||
<span v-if="Array.isArray(val)">{{ val.join(', ') }}</span>
|
||||
<span v-else>{{ String(val) }}</span>
|
||||
</dd>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer (optional actions) -->
|
||||
<div class="border-t px-4 py-3 flex items-center justify-end gap-2">
|
||||
<button class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40 transition">
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
class="rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm hover:opacity-90 transition">
|
||||
Open details
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ---------- Optional container "card" around the calendar ---------- */
|
||||
:global(.fc) {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.calendar-card {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.calendar-card {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- FullCalendar base ---------- */
|
||||
:global(.fc) {
|
||||
color: var(--color-foreground);
|
||||
background: transparent;
|
||||
font-family: var(--font-sans), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||
font-size: 0.94rem;
|
||||
/* compact */
|
||||
}
|
||||
|
||||
:global(.fc .fc-daygrid .fc-scroller) {
|
||||
overflow: visible !important;
|
||||
/* no internal scroll for month grid */
|
||||
}
|
||||
|
||||
/* Subtle borders everywhere */
|
||||
:global(.fc .fc-scrollgrid),
|
||||
:global(.fc .fc-scrollgrid td),
|
||||
:global(.fc .fc-scrollgrid th) {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ---------- Built-in toolbar (if you keep it) ---------- */
|
||||
:global(.fc .fc-toolbar) {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:global(.fc .fc-toolbar-title) {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
:global(.fc .fc-button) {
|
||||
background: transparent;
|
||||
color: var(--color-foreground);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: calc(var(--radius-lg) + 2px);
|
||||
box-shadow: none;
|
||||
padding: 6px 15px;
|
||||
line-height: 1;
|
||||
transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
:global(.fc .fc-button:hover) {
|
||||
background: color-mix(in oklab, var(--color-foreground) 5%, transparent);
|
||||
}
|
||||
|
||||
:global(.fc .fc-button:focus) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-ring) 55%, transparent);
|
||||
}
|
||||
|
||||
:global(.fc .fc-button.fc-button-active) {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-foreground);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ---------- Month header + day numbers ---------- */
|
||||
:global(.fc .fc-col-header-cell-cushion) {
|
||||
color: var(--color-muted-foreground);
|
||||
font-weight: 600;
|
||||
padding: 8px 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:global(.fc .fc-daygrid-day-top) {
|
||||
padding: 8px 8px 0 8px;
|
||||
}
|
||||
|
||||
:global(.fc .fc-daygrid-day-number) {
|
||||
color: var(--color-muted-foreground);
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Today: soft background + stronger number */
|
||||
:global(.fc .fc-day-today) {
|
||||
background: color-mix(in oklab, var(--color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
:global(.fc .fc-day-today .fc-daygrid-day-number) {
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
/* Hover affordance inside a day cell (very subtle) */
|
||||
:global(.fc .fc-daygrid-day:hover) {
|
||||
background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
|
||||
}
|
||||
|
||||
/* ---------- Event chips (dayGrid) ---------- */
|
||||
:global(.fc .fc-daygrid-event) {
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-foreground);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
margin: 2px 6px;
|
||||
text-decoration: none;
|
||||
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
:global(.fc .fc-daygrid-event:hover) {
|
||||
background: color-mix(in oklab, var(--color-foreground) 6%, transparent);
|
||||
border-color: color-mix(in oklab, var(--color-foreground) 12%, var(--color-border));
|
||||
}
|
||||
|
||||
/* One-line custom pill content (our renderer) */
|
||||
:global(.ev-pill) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:global(.ev-dot) {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex: 0 0 auto;
|
||||
background: var(--ev-color, currentColor);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
:global(.ev-time) {
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
:global(.ev-title) {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* One-line custom pill */
|
||||
.ev-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: color-mix(in oklab, var(--color-primary) 14%, transparent);
|
||||
color: var(--color-foreground);
|
||||
text-decoration: none;
|
||||
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.ev-pill:hover {
|
||||
background: color-mix(in oklab, var(--color-primary) 20%, transparent);
|
||||
border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border));
|
||||
}
|
||||
|
||||
.ev-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ev-time {
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ev-title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ev-pill.is-colored {
|
||||
color: var(--color-primary-foreground);
|
||||
}
|
||||
|
||||
/* --- Replace the default today highlight with a round badge --- */
|
||||
:global(.fc .fc-daygrid-day.fc-day-today) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:global(.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number) {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
background: color-mix(in oklab, var(--color-primary) 100%, transparent);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: var(--color-primary-foreground);
|
||||
}
|
||||
|
||||
:global(.fc .fc-daygrid-day:hover) {
|
||||
background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
|
||||
}
|
||||
</style>
|
||||
273
ui/src/pages/ManageRoles.vue
Normal file
273
ui/src/pages/ManageRoles.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '@/components/ui/button/Button.vue';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { onMounted, ref, computed, reactive, watch } from 'vue';
|
||||
import { addMemberToRole, createRole, deleteRole, getRoles, removeMemberFromRole, Role } from '@/api/roles';
|
||||
import Badge from '@/components/ui/badge/Badge.vue';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxAnchor,
|
||||
ComboboxEmpty,
|
||||
ComboboxGroup,
|
||||
ComboboxInput,
|
||||
ComboboxItem,
|
||||
ComboboxItemIndicator,
|
||||
ComboboxList,
|
||||
} from '@/components/ui/combobox'
|
||||
import { Plus, X } from 'lucide-vue-next';
|
||||
import Separator from '@/components/ui/separator/Separator.vue';
|
||||
import Input from '@/components/ui/input/Input.vue';
|
||||
import Label from '@/components/ui/label/Label.vue';
|
||||
import { getMembers, Member } from '@/api/member';
|
||||
|
||||
const roles = ref<Role[]>([])
|
||||
const activeRole = ref<Role | null>(null)
|
||||
const showDialog = ref(false);
|
||||
const showCreateGroupDialog = ref(false);
|
||||
const addingMember = ref(false);
|
||||
const memberToAdd = ref<Member | null>(null);
|
||||
|
||||
const allMembers = ref<Member[]>([])
|
||||
const availableMembers = computed(() => {
|
||||
if (!activeRole.value) return [];
|
||||
return allMembers.value.filter(
|
||||
member => !activeRole.value!.members.some(
|
||||
roleMember => roleMember.member_id === member.member_id
|
||||
)
|
||||
);
|
||||
})
|
||||
|
||||
type RoleDraft = {
|
||||
name: string
|
||||
description: string
|
||||
color: string // whatever you store, e.g. a hex string or a semantic tag
|
||||
}
|
||||
|
||||
const roleDraft = reactive<RoleDraft>({
|
||||
name: "",
|
||||
description: "",
|
||||
color: "", // e.g. "#FF8A00" or "orange"
|
||||
})
|
||||
|
||||
const draftErrors = reactive<{ name?: string; color?: string }>({})
|
||||
const creating = ref(false)
|
||||
|
||||
function resetRoleDraft() {
|
||||
roleDraft.name = ""
|
||||
roleDraft.description = ""
|
||||
roleDraft.color = ""
|
||||
draftErrors.name = undefined
|
||||
draftErrors.color = undefined
|
||||
}
|
||||
|
||||
watch(showCreateGroupDialog, (open) => {
|
||||
if (!open) resetRoleDraft()
|
||||
})
|
||||
|
||||
|
||||
function validateRoleDraft(): boolean {
|
||||
draftErrors.name = !roleDraft.name.trim() ? "Group name is required" : undefined
|
||||
// If color is required or must be hex, validate it here:
|
||||
if (!roleDraft.color.trim()) {
|
||||
draftErrors.color = "Color is required"
|
||||
} else if (!/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(roleDraft.color)) {
|
||||
draftErrors.color = "Use a valid hex color like #FF8A00"
|
||||
} else {
|
||||
draftErrors.color = undefined
|
||||
}
|
||||
|
||||
return !draftErrors.name && !draftErrors.color
|
||||
}
|
||||
|
||||
async function handleCreateGroup() {
|
||||
if (!validateRoleDraft()) return
|
||||
|
||||
try {
|
||||
creating.value = true
|
||||
|
||||
// If your createRole API already accepts a payload:
|
||||
await createRole(roleDraft.name, roleDraft.color, roleDraft.description)
|
||||
|
||||
// Refresh list, close, reset
|
||||
roles.value = await getRoles()
|
||||
showCreateGroupDialog.value = false
|
||||
resetRoleDraft()
|
||||
} catch (err) {
|
||||
console.error("Failed to create role:", err)
|
||||
// optionally surface a toast/error UI here
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleAddMember() {
|
||||
//guard
|
||||
if (memberToAdd.value == null)
|
||||
return;
|
||||
|
||||
addMemberToRole(memberToAdd.value.member_id, activeRole.value.id);
|
||||
}
|
||||
|
||||
function handleRemoveMember(memberId: number) {
|
||||
removeMemberFromRole(memberId, activeRole.value.id);
|
||||
}
|
||||
|
||||
async function handleDeleteRole() {
|
||||
await deleteRole(activeRole.value.id);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
roles.value = await getRoles();
|
||||
allMembers.value = await getMembers();
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<Dialog v-model:open="showDialog"
|
||||
v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle class="flex justify-between items-center">{{ activeRole.name }}
|
||||
<Badge class="mr-5">
|
||||
{{ activeRole.color }}
|
||||
</Badge>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{{ activeRole.description }}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="mt-5">
|
||||
<div class="flex justify-between items-center">
|
||||
<p>Members with this role</p>
|
||||
</div>
|
||||
<Separator class="my-2"></Separator>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li v-for="member in activeRole.members" class="flex justify-between items-center">
|
||||
<p>{{ member.member_name }}</p>
|
||||
<X class="text-muted-foreground" @click="handleRemoveMember(member.member_id)"></X>
|
||||
</li>
|
||||
<div v-if="!addingMember" @click="addingMember = true"
|
||||
class="flex gap-2 text-muted-foreground hover:text-primary hover:cursor-pointer">
|
||||
<Plus :size="20"></Plus>Add Member
|
||||
</div>
|
||||
<div v-else class="flex gap-2">
|
||||
<Combobox v-model="memberToAdd" by="value">
|
||||
<ComboboxAnchor>
|
||||
<div class="relative w-full max-w-sm items-center">
|
||||
<ComboboxInput class="pl-9" :display-value="(member: Member) => member?.member_name"
|
||||
placeholder="Search Members" />
|
||||
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
|
||||
<Search class="size-4 text-muted-foreground" />
|
||||
</span>
|
||||
</div>
|
||||
</ComboboxAnchor>
|
||||
<ComboboxList>
|
||||
<ComboboxEmpty>
|
||||
No Members.
|
||||
</ComboboxEmpty>
|
||||
<ComboboxGroup>
|
||||
<ComboboxItem v-for="member in availableMembers" :key="member.member_id"
|
||||
:value="member">
|
||||
{{ member.member_name }}
|
||||
<ComboboxItemIndicator>
|
||||
<Check class="ml-auto size-4" />
|
||||
</ComboboxItemIndicator>
|
||||
</ComboboxItem>
|
||||
</ComboboxGroup>
|
||||
</ComboboxList>
|
||||
</Combobox>
|
||||
<Button variant="secondary" @click="addingMember = false">Cancel</Button>
|
||||
<Button @click="handleAddMember">Save</Button>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<!-- <Button variant="secondary" @click="showDialog = false">Cancel</Button> -->
|
||||
<Button @click="handleDeleteRole">Delete Group</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:open="showCreateGroupDialog" v-on:update:open="() => { showCreateGroupDialog = false; }">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle class="flex justify-between items-center">Create Group</DialogTitle>
|
||||
<DialogDescription>Create a new group of members</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form class="mt-5 space-y-5" @submit.prevent="handleCreateGroup">
|
||||
<div>
|
||||
<Label class="mb-2 block" for="group-name">Group Name</Label>
|
||||
<Input id="group-name" v-model="roleDraft.name" :aria-invalid="!!draftErrors.name" />
|
||||
<p v-if="draftErrors.name" class="text-destructive text-sm mt-1">{{ draftErrors.name }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="mb-2 block" for="group-desc">Description</Label>
|
||||
<Input id="group-desc" v-model="roleDraft.description" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="mb-2 block" for="group-color">Color</Label>
|
||||
<!-- If you like a native color picker: -->
|
||||
<Input id="group-color" type="color" v-model="roleDraft.color" />
|
||||
<!-- Or stick to hex text input: -->
|
||||
<!-- <Input id="group-color" placeholder="#FF8A00" v-model="roleDraft.color"
|
||||
:aria-invalid="!!draftErrors.color" />
|
||||
<p v-if="draftErrors.color" class="text-destructive text-sm mt-1">{{ draftErrors.color }}</p> -->
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="secondary" @click="showCreateGroupDialog = false"
|
||||
:disabled="creating">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="creating">
|
||||
{{ creating ? "Saving..." : "Save" }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex items-center justify-between my-4">
|
||||
<p>Groups</p>
|
||||
<Button @click="showCreateGroupDialog = true">+ Add New Group</Button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-5">
|
||||
<Card v-for="value in roles" :key="value.id" @click="activeRole = value; showDialog = true"
|
||||
class="cursor-pointer">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex justify-between items-center">{{ value.name }}
|
||||
<Badge>
|
||||
{{ value.color }}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription>{{ value.description }}</CardDescription>
|
||||
</CardHeader>
|
||||
<!-- <CardContent>
|
||||
Card Content
|
||||
</CardContent> -->
|
||||
<CardFooter>
|
||||
<p class="text-muted-foreground">{{ value.members.length }} members</p>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -9,6 +9,7 @@ const router = createRouter({
|
||||
{ path: '/members', component: () => import('@/pages/memberList.vue') },
|
||||
{ path: '/loa', component: () => import('@/pages/SubmitLOA.vue') },
|
||||
{ path: '/transfer', component: () => import('@/pages/Transfer.vue') },
|
||||
{ path: '/calendar', component: () => import('@/pages/Calendar.vue') },
|
||||
{
|
||||
path: '/administration',
|
||||
children: [
|
||||
@@ -31,6 +32,10 @@ const router = createRouter({
|
||||
{
|
||||
path: 'loa',
|
||||
component: () => import('@/pages/ManageLOA.vue')
|
||||
},
|
||||
{
|
||||
path: 'roles',
|
||||
component: () => import('@/pages/ManageRoles.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user