17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 23 Pull Requests Actions 3 Packages Projects Releases 6 Wiki Activity

Compare commits

base: 17th-Ranger-Battalion-ORG:0.3.0
Branches Tags
17th-Ranger-Battalion-ORG:main 17th-Ranger-Battalion-ORG:homepage/welcome 17th-Ranger-Battalion-ORG:dossier-personnel-file 17th-Ranger-Battalion-ORG:Matomo-Integration 17th-Ranger-Battalion-ORG:devcontainers
17th-Ranger-Battalion-ORG:0.4.0 17th-Ranger-Battalion-ORG:0.3.0 17th-Ranger-Battalion-ORG:0.2.1 17th-Ranger-Battalion-ORG:0.2.0 17th-Ranger-Battalion-ORG:0.1.1 17th-Ranger-Battalion-ORG:0.1.0
..
compare: 17th-Ranger-Battalion-ORG:dossier-personnel-file
Branches Tags
17th-Ranger-Battalion-ORG:homepage/welcome 17th-Ranger-Battalion-ORG:main 17th-Ranger-Battalion-ORG:dossier-personnel-file 17th-Ranger-Battalion-ORG:Matomo-Integration 17th-Ranger-Battalion-ORG:devcontainers
17th-Ranger-Battalion-ORG:0.4.0 17th-Ranger-Battalion-ORG:0.3.0 17th-Ranger-Battalion-ORG:0.2.1 17th-Ranger-Battalion-ORG:0.2.0 17th-Ranger-Battalion-ORG:0.1.1 17th-Ranger-Battalion-ORG:0.1.0

2 Commits
0.3.0 ... dossier-pe

Author SHA1 Message Date
EagleTrooper
ea52be83ef Create dossier
Some checks failed
Continuous Deployment / Update Deployment (push) Failing after 1m29s
Details
2025-12-06 15:40:51 -06:00
EagleTrooper
9c903c9ad9 Create dossier
Some checks failed
Continuous Deployment / Update Deployment (push) Failing after 1m19s
Details
2025-12-05 17:59:04 -06:00
81 changed files with 1138 additions and 3355 deletions
Expand all files Collapse all files

89
.gitea/workflows/cd-deploy.yaml
View File

@@ -1,8 +1,6 @@
name: Continuous Deployment name: Continuous Deployment
on: on:
push: push:
tags:
- '*'
jobs: jobs:
Deploy: Deploy:
@@ -10,29 +8,20 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
container: container:
volumes: volumes:
- /var/www/html/milsim-site-v4:/var/www/html/milsim-site-v4:z - /var/www/html/milsim-site-v4:/var/www/html/milsim-site-v4:rw
steps: steps:
- name: Setup Local Environment - name: Setup Local Environment
run: | run: |
groupadd -g 989 nginx || true groupadd -g 989 nginx || true
useradd nginx -u 990 -g nginx -m || true useradd nginx -u 990 -g nginx -m || true
- name: Update Node Environment - name: Verify Node Environment
uses: actions/setup-node@v6
with:
node-version: 20.19
- name: Verify Local Environment
run: | run: |
which npm
npm -v npm -v
which node
node -v node -v
which sed
sed --version
- name: Checkout - name: Checkout
uses: actions/checkout@v5 uses: actions/checkout@v4
with: with:
fetch-depth: 0 fetch-depth: 0
ref: 'main' ref: 'main'
@@ -43,53 +32,31 @@ jobs:
cp /workspace/17th-Ranger-Battalion-ORG/milsim-site-v4/.git/config .git/config cp /workspace/17th-Ranger-Battalion-ORG/milsim-site-v4/.git/config .git/config
chown nginx:nginx .git/config chown nginx:nginx .git/config
- name: Update Application Code - name: Fix File Permissions
run: |
cd /var/www/html/milsim-site-v4
version=`git log -1 --format=%H`
echo "Current Revision: $version"
echo "Updating to: ${{ github.sha }}"
sudo -u nginx git reset --hard
sudo -u nginx git fetch --tags
sudo -u nginx git pull origin main
new_version=`git log -1 --format=%H`
echo "Successfully updated to: $new_version"
- name: Update Shared Dependencies and Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/shared
npm install
chown -R nginx:nginx .
- name: Update UI Dependencies and Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/ui
npm install
chown -R nginx:nginx .
- name: Update API Dependencies and Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/api
npm install
chown -R nginx:nginx .
- name: Build UI / Update Version / Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/ui
npm run build
version=`git describe --abbrev=0 --tags`
sed -i "s/VITE_APPLICATION_VERSION=.*/VITE_APPLICATION_VERSION=$version/" .env
chown -R nginx:nginx .
- name: Build API / Update Version / Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/api
npm run build
version=`git describe --abbrev=0 --tags`
sed -i "s/APPLICATION_VERSION=.*/APPLICATION_VERSION=$version/" .env
chown -R nginx:nginx .
- name: Reset File Permissions
run: | run: |
sudo chown -R nginx:nginx /var/www/html/milsim-site-v4 sudo chown -R nginx:nginx /var/www/html/milsim-site-v4
sudo chmod -R u+w /var/www/html/milsim-site-v4 sudo chmod -R u+w /var/www/html/milsim-site-v4
- name: Update Application Code
run: |
sudo -u nginx bash -c "cd /var/www/html/milsim-site-v4 && git reset --hard && git pull origin main"
- name: Update Shared Dependencies
run: |
sudo -u nginx bash -c "cd /var/www/html/milsim-site-v4/shared && npm install"
- name: Update UI Dependencies
run: |
sudo -u nginx bash -c "cd /var/www/html/milsim-site-v4/ui && npm install"
- name: Update API Dependencies
run: |
sudo -u nginx bash -c "cd /var/www/html/milsim-site-v4/api && npm install"
- name: Build UI
run: |
sudo -u nginx bash -c "cd /var/www/html/milsim-site-v4/ui && npm run build"
- name: Build API
run: |
sudo -u nginx bash -c "cd /var/www/html/milsim-site-v4/api && npm run build"

89
.gitea/workflows/ci-deploy.yaml
View File

@@ -1,89 +0,0 @@
name: Continuous Integration
on:
push:
branches:
- main
jobs:
Deploy:
name: Update Development
runs-on: ubuntu-latest
container:
volumes:
- /var/www/html/milsim-site-v4-dev:/var/www/html/milsim-site-v4:z
steps:
- name: Setup Local Environment
run: |
groupadd -g 989 nginx || true
useradd nginx -u 990 -g nginx -m || true
- name: Update Node Environment
uses: actions/setup-node@v6
with:
node-version: 20.19
- name: Verify Local Environment
run: |
which npm
npm -v
which node
node -v
which sed
sed --version
- name: Checkout
uses: actions/checkout@v5
with:
fetch-depth: 0
ref: 'main'
- name: Token Copy
run: |
cd /var/www/html/milsim-site-v4
cp /workspace/17th-Ranger-Battalion-ORG/milsim-site-v4/.git/config .git/config
chown nginx:nginx .git/config
- name: Update Application Code
run: |
cd /var/www/html/milsim-site-v4
sudo -u nginx git reset --hard
sudo -u nginx git pull origin main
- name: Update Shared Dependencies and Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/shared
npm install
chown -R nginx:nginx .
- name: Update UI Dependencies and Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/ui
npm install
chown -R nginx:nginx .
- name: Update API Dependencies and Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/api
npm install
chown -R nginx:nginx .
- name: Build UI / Update Version / Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/ui
npm run build
version=`git rev-parse --short=10 HEAD`
sed -i "s/VITE_APPLICATION_VERSION=.*/VITE_APPLICATION_VERSION=$version/" .env
chown -R nginx:nginx .
- name: Build API / Update Version / Fix Permissions
run: |
cd /var/www/html/milsim-site-v4/api
npm run build
version=`git rev-parse --short=10 HEAD`
sed -i "s/APPLICATION_VERSION=.*/APPLICATION_VERSION=$version/" .env
chown -R nginx:nginx .
- name: Reset File Permissions
run: |
sudo chown -R nginx:nginx /var/www/html/milsim-site-v4
sudo chmod -R u+w /var/www/html/milsim-site-v4

8
api/.env.example
View File

@@ -19,15 +19,7 @@ AUTH_END_SESSION_URI=
SERVER_PORT=3000 SERVER_PORT=3000
CLIENT_URL= # This is whatever URL the client web app is served on CLIENT_URL= # This is whatever URL the client web app is served on
CLIENT_DOMAIN= #whatever.com CLIENT_DOMAIN= #whatever.com
APPLICATION_VERSION= # Should match release tag
APPLICATION_ENVIRONMENT= # dev / prod
CONFIG_ID= # configures
# Glitchtip # Glitchtip
GLITCHTIP_DSN= GLITCHTIP_DSN=
DISABLE_GLITCHTIP= # true/false DISABLE_GLITCHTIP= # true/false
# Bookstack
DOC_HOST= # https://bookstack.whatever.com/
DOC_TOKEN_SECRET=
DOC_TOKEN_ID=

82
api/src/index.js Normal file
View File

@@ -0,0 +1,82 @@
const dotenv = require('dotenv')
dotenv.config();
const express = require('express')
const cors = require('cors')
const morgan = require('morgan')
const app = express()
app.use(morgan('dev'))
app.use(cors({
origin: [process.env.CLIENT_URL], // your SPA origins
credentials: true
}));
app.use(express.json())
app.set('trust proxy', 1);
const port = process.env.SERVER_PORT;
//glitchtip setup
const sentry = require('@sentry/node');
if (!process.env.DISABLE_GLITCHTIP) {
console.log("Glitchtip disabled AAAAAA")
} else {
let dsn = process.env.GLITCHTIP_DSN;
sentry.init({ dsn: dsn });
console.log("Glitchtip initialized");
}
//session setup
const path = require('path')
const session = require('express-session')
const passport = require('passport')
const SQLiteStore = require('connect-sqlite3')(session);
app.use(session({
secret: 'whatever',
resave: false,
saveUninitialized: false,
store: new SQLiteStore({ db: 'sessions.db', dir: './' }),
cookie: {
httpOnly: true,
sameSite: 'lax',
domain: process.env.CLIENT_DOMAIN
}
}));
app.use(passport.authenticate('session'));
// Mount route modules
const applicationsRouter = require('./routes/applications');
const { memberRanks, ranks } = require('./routes/ranks');
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');
const { courseRouter, eventRouter } = require('./routes/course');
const { calendarRouter } = require('./routes/calendar')
const morgan = require('morgan');
app.use('/application', applicationsRouter);
app.use('/ranks', ranks);
app.use('/memberRanks', memberRanks);
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('/course', courseRouter)
app.use('/courseEvent', eventRouter)
app.use('/calendar', calendarRouter)
app.use('/', authRouter)
app.get('/ping', (req, res) => {
res.status(200).json({ message: 'pong' });
});
app.listen(port, () => {
console.log(`Example app listening on port ${port} `)
})

88
api/src/index.ts
View File

@@ -1,88 +0,0 @@
import dotenv = require('dotenv');
dotenv.config();
import express = require('express');
import cors = require('cors');
import morgan = require('morgan');
const app = express()
app.use(morgan('dev', {
skip: (req) => {
return req.path === '/members/me';
}
}))
app.use(cors({
origin: [process.env.CLIENT_URL], // your SPA origins
credentials: true
}));
app.use(express.json())
app.set('trust proxy', 1);
const port = process.env.SERVER_PORT;
//glitchtip setup
import sentry = require('@sentry/node');
if (process.env.DISABLE_GLITCHTIP === "true") {
console.log("Glitchtip disabled")
} else {
let dsn = process.env.GLITCHTIP_DSN;
let release = process.env.APPLICATION_VERSION;
let environment = process.env.APPLICATION_ENVIRONMENT;
console.log(release, environment)
sentry.init({ dsn: dsn, release: release, environment: environment, integrations: [sentry.captureConsoleIntegration({ levels: ['error'] })] });
console.log("Glitchtip initialized");
}
//session setup
import path = require('path');
import session = require('express-session');
import passport = require('passport');
const SQLiteStore = require('connect-sqlite3')(session);
app.use(session({
secret: 'whatever',
resave: false,
saveUninitialized: false,
store: new SQLiteStore({ db: 'sessions.db', dir: './' }),
cookie: {
httpOnly: true,
sameSite: 'lax',
domain: process.env.CLIENT_DOMAIN
}
}));
app.use(passport.authenticate('session'));
// Mount route modules
import { applicationRouter } from './routes/applications';
import { memberRanks, ranks } from './routes/ranks';
import { memberRouter } from './routes/members';
import { loaRouter } from './routes/loa';
import { status, memberStatus } from './routes/statuses';
import { authRouter } from './routes/auth';
import { roles, memberRoles } from './routes/roles';
import { courseRouter, eventRouter } from './routes/course';
import { calendarRouter } from './routes/calendar';
app.use('/application', applicationRouter);
app.use('/ranks', ranks);
app.use('/memberRanks', memberRanks);
app.use('/members', memberRouter);
app.use('/loa', loaRouter);
app.use('/status', status)
app.use('/memberStatus', memberStatus)
app.use('/roles', roles)
app.use('/memberRoles', memberRoles)
app.use('/course', courseRouter)
app.use('/courseEvent', eventRouter)
app.use('/calendar', calendarRouter)
app.use('/', authRouter)
app.get('/ping', (req, res) => {
res.status(200).json({ message: 'pong' });
});
app.listen(port, () => {
console.log(`Example app listening on port ${port} `)
})

49
api/src/middleware/auth.ts
View File

@@ -1,49 +0,0 @@
import { MemberState } from "@app/shared/types/member";
import { NextFunction, Request, Response } from "express";
import { stat } from "fs";
export const requireLogin = function (req: Request, res: Response, next: NextFunction) {
if (req.user?.id)
next();
else
res.sendStatus(401)
}
export function requireMemberState(state: MemberState) {
return function (req: Request, res: Response, next: NextFunction) {
if (req.user?.state === state)
next();
else
res.status(403).send(`You must be a ${state} of the 17th RBN to access this resource`);
}
}
export function requireRole(requiredRoles: string | string[]) {
// Normalize the input to always be an array of lowercase required roles
const normalizedRequiredRoles: string[] = Array.isArray(requiredRoles)
? requiredRoles.map(role => role.toLowerCase())
: [requiredRoles.toLowerCase()];
const DEV_ROLE = 'dev';
return function (req: Request, res: Response, next: NextFunction) {
if (!req.user || !req.user.roles) {
// User is not authenticated or has no roles array
return res.sendStatus(401);
}
const userRolesLowercase = req.user.roles.map(role => role.name.toLowerCase());
// Check if the user has *any* of the required roles OR the 'dev' role
const hasAccess = userRolesLowercase.some(userRole =>
userRole === DEV_ROLE || normalizedRequiredRoles.includes(userRole)
);
if (hasAccess) {
return next();
} else {
// User is authenticated but does not have the necessary permissions
return res.sendStatus(403);
}
};
}

202
api/src/routes/applications.ts
View File

@@ -2,54 +2,32 @@ const express = require('express');
const router = express.Router(); const router = express.Router();
import pool from '../db'; import pool from '../db';
import { approveApplication, createApplication, denyApplication, getAllMemberApplications, getApplicationByID, getApplicationComments, getApplicationList, getMemberApplication } from '../services/applicationService'; import { approveApplication, createApplication, getApplicationByID, getApplicationComments, getApplicationList, getMemberApplication } from '../services/applicationService';
import { setUserState } from '../services/memberService'; import { MemberState, setUserState } from '../services/memberService';
import { MemberState } from '@app/shared/types/member';
import { getRankByName, insertMemberRank } from '../services/rankService'; import { getRankByName, insertMemberRank } from '../services/rankService';
import { ApplicationFull, CommentRow } from "@app/shared/types/application" import { ApplicationFull, CommentRow } from "@app/shared/types/application"
import { assignUserToStatus } from '../services/statusService'; import { assignUserToStatus } from '../services/statusService';
import { Request, response, Response } from 'express';
import { getUserRoles } from '../services/rolesService';
import { requireLogin, requireRole } from '../middleware/auth';
//get CoC
router.get('/coc', async (req: Request, res: Response) => {
const output = await fetch(`${process.env.DOC_HOST}/api/pages/714`, {
headers: {
Authorization: `Token ${process.env.DOC_TOKEN_ID}:${process.env.DOC_TOKEN_SECRET}`,
}
})
if (output.ok) {
const out = await output.json();
res.status(200).json(out.html);
} else {
console.error("Failed to fetch LOA policy from bookstack");
res.sendStatus(500);
}
})
// POST /application // POST /application
router.post('/', [requireLogin], async (req, res) => { router.post('/', async (req, res) => {
try { try {
const App = req.body?.App || {}; const App = req.body?.App || {};
const memberID = req.user.id; const memberID = req.user.id;
const appVersion = 1; const appVersion = 1;
await createApplication(memberID, appVersion, JSON.stringify(App)) createApplication(memberID, appVersion, JSON.stringify(App))
await setUserState(memberID, MemberState.Applicant); setUserState(memberID, MemberState.Applicant);
res.sendStatus(201); res.sendStatus(201);
} catch (err) { } catch (err) {
console.error('Failed to create application: \n', err); console.error('Insert failed:', err);
res.status(500).json({ error: 'Failed to create application' }); res.status(500).json({ error: 'Failed to save application' });
} }
}); });
// GET /application/all // GET /application/all
router.get('/all', [requireLogin, requireRole("Recruiter")], async (req, res) => { router.get('/all', async (req, res) => {
try { try {
const rows = await getApplicationList(); const rows = await getApplicationList();
res.status(200).json(rows); res.status(200).json(rows);
@@ -59,21 +37,7 @@ router.get('/all', [requireLogin, requireRole("Recruiter")], async (req, res) =>
} }
}); });
router.get('/meList', async (req, res) => { router.get('/me', async (req, res) => {
let userID = req.user.id;
try {
let application = await getAllMemberApplications(userID);
return res.status(200).json(application);
} catch (error) {
console.error('Failed to load applications: \n', error);
return res.status(500).json(error);
}
})
router.get('/me', [requireLogin], async (req, res) => {
let userID = req.user.id; let userID = req.user.id;
@@ -98,17 +62,13 @@ router.get('/me', [requireLogin], async (req, res) => {
}) })
// GET /application/:id // GET /application/:id
router.get('/me/:id', [requireLogin], async (req: Request, res: Response) => { router.get('/:id', async (req, res) => {
let appID = Number(req.params.id); let appID = req.params.id;
let member = req.user.id; console.log("HELLO")
try { try {
const application = await getApplicationByID(appID); const application = await getApplicationByID(appID);
if (application === undefined) if (application === undefined)
return res.sendStatus(204); return res.sendStatus(204);
console.log(application.member_id, member)
if (application.member_id != member) {
return res.sendStatus(403);
}
const comments: CommentRow[] = await getApplicationComments(appID); const comments: CommentRow[] = await getApplicationComments(appID);
@@ -124,52 +84,30 @@ router.get('/me/:id', [requireLogin], async (req: Request, res: Response) => {
} }
}); });
// GET /application/:id
router.get('/:id', [requireLogin, requireRole("Recruiter")], async (req: Request, res: Response) => {
let appID = Number(req.params.id);
let asAdmin = !!req.query.admin || false;
try {
const application = await getApplicationByID(appID);
if (application === undefined)
return res.sendStatus(204);
const comments: CommentRow[] = await getApplicationComments(appID, asAdmin);
const output: ApplicationFull = {
application,
comments,
}
return res.status(200).json(output);
}
catch (err) {
console.error('Query failed:', err);
return res.status(500).json({ error: 'Failed to load application' });
}
});
// POST /application/approve/:id // POST /application/approve/:id
router.post('/approve/:id', [requireLogin, requireRole("Recruiter")], async (req: Request, res: Response) => { router.post('/approve/:id', async (req, res) => {
const appID = Number(req.params.id); const appID = req.params.id;
const approved_by = req.user.id;
try { try {
const app = await getApplicationByID(appID); const app = await getApplicationByID(appID);
const result = await approveApplication(appID); const result = await approveApplication(appID);
console.log("START");
console.log(app, result);
//guard against failures //guard against failures
if (result.affectedRows != 1) { if (result.affectedRows != 1) {
throw new Error("Something went wrong approving the application"); throw new Error("Something went wrong approving the application");
} }
console.log(app.member_id);
//update user profile //update user profile
await setUserState(app.member_id, MemberState.Member); await setUserState(app.member_id, MemberState.Member);
await pool.query('CALL sp_accept_new_recruit_validation(?, ?, ?, ?)', [Number(process.env.CONFIG_ID), app.member_id, approved_by, approved_by]) let nextRank = await getRankByName('Recruit')
// let nextRank = await getRankByName('Recruit') await insertMemberRank(app.member_id, nextRank.id);
// await insertMemberRank(app.member_id, nextRank.id); //assign user to "pending basic"
// //assign user to "pending basic" await assignUserToStatus(app.member_id, 1);
// await assignUserToStatus(app.member_id, 1);
res.sendStatus(200); res.sendStatus(200);
} catch (err) { } catch (err) {
console.error('Approve failed:', err); console.error('Approve failed:', err);
@@ -178,14 +116,29 @@ router.post('/approve/:id', [requireLogin, requireRole("Recruiter")], async (req
}); });
// POST /application/deny/:id // POST /application/deny/:id
router.post('/deny/:id', [requireLogin, requireRole("Recruiter")], async (req, res) => { router.post('/deny/:id', async (req, res) => {
const appID = req.params.id; const appID = req.params.id;
const sql = `
UPDATE applications
SET denied_at = NOW()
WHERE id = ?
AND approved_at IS NULL
AND denied_at IS NULL
`;
try { try {
const app = await getApplicationByID(appID); const result = await pool.execute(sql, appID);
await denyApplication(appID);
await setUserState(app.member_id, MemberState.Denied); console.log(result);
if (result.affectedRows === 0) {
res.status(400).json('Something went wrong denying the application');
}
if (result.affectedRows == 1) {
res.sendStatus(200); res.sendStatus(200);
}
} catch (err) { } catch (err) {
console.error('Approve failed:', err); console.error('Approve failed:', err);
res.status(500).json({ error: 'Failed to deny application' }); res.status(500).json({ error: 'Failed to deny application' });
@@ -193,12 +146,10 @@ router.post('/deny/:id', [requireLogin, requireRole("Recruiter")], async (req, r
}); });
// POST /application/:id/comment // POST /application/:id/comment
router.post('/:id/comment', [requireLogin], async (req: Request, res: Response) => { router.post('/:id/comment', async (req, res) => {
const appID = req.params.id; const appID = req.params.id;
const data = req.body.message; const data = req.body.message;
const user = req.user; const user = 1;
console.log(user)
const sql = `INSERT INTO application_comments( const sql = `INSERT INTO application_comments(
application_id, application_id,
@@ -207,11 +158,10 @@ router.post('/:id/comment', [requireLogin], async (req: Request, res: Response)
) )
VALUES(?, ?, ?);` VALUES(?, ?, ?);`
try { try {
var conn = await pool.getConnection(); const conn = await pool.getConnection();
const result = await conn.query(sql, [appID, user.id, data]) const result = await conn.query(sql, [appID, user, data])
console.log(result) console.log(result)
if (result.affectedRows !== 1) { if (result.affectedRows !== 1) {
conn.release(); conn.release();
@@ -233,67 +183,7 @@ VALUES(?, ?, ?);`
} catch (err) { } catch (err) {
console.error('Comment failed:', err); console.error('Comment failed:', err);
res.status(500).json({ error: 'Could not post comment' }); res.status(500).json({ error: 'Could not post comment' });
} finally {
conn.release();
} }
}); });
// POST /application/:id/comment module.exports = router;
router.post('/:id/adminComment', [requireLogin, requireRole("Recruiter")], async (req: Request, res: Response) => {
const appID = req.params.id;
const data = req.body.message;
const user = req.user;
console.log(user)
const sql = `INSERT INTO application_comments(
application_id,
poster_id,
post_content,
admin_only
)
VALUES(?, ?, ?, 1);`
try {
var conn = await pool.getConnection();
const result = await conn.query(sql, [appID, user.id, data])
console.log(result)
if (result.affectedRows !== 1) {
conn.release();
throw new Error("Insert Failure")
}
const getSQL = `SELECT app.id AS comment_id,
app.post_content,
app.poster_id,
app.post_time,
app.last_modified,
app.admin_only,
member.name AS poster_name
FROM application_comments AS app
INNER JOIN members AS member ON member.id = app.poster_id
WHERE app.id = ?; `;
const comment = await conn.query(getSQL, [result.insertId])
res.status(201).json(comment[0]);
} catch (err) {
console.error('Comment failed:', err);
res.status(500).json({ error: 'Could not post comment' });
} finally {
conn.release();
}
});
router.post('/restart', async (req: Request, res: Response) => {
const user = req.user.id;
try {
await setUserState(user, MemberState.Guest);
res.sendStatus(200);
} catch (error) {
console.error('Comment failed:', error);
res.status(500).json({ error: 'Could not rester application' });
}
})
export const applicationRouter = router;

76
api/src/routes/auth.ts → api/src/routes/auth.js
View File

@@ -6,18 +6,9 @@ dotenv.config();
const express = require('express'); const express = require('express');
const { param } = require('./applications'); const { param } = require('./applications');
const router = express.Router(); const router = express.Router();
import { Role } from '@app/shared/types/roles';
import pool from '../db'; import pool from '../db';
import { requireLogin } from '../middleware/auth';
import { getUserRoles } from '../services/rolesService';
import { getUserState, mapDiscordtoID } from '../services/memberService';
import { MemberState } from '@app/shared/types/member';
import { toDateTime } from '@app/shared/utils/time';
const querystring = require('querystring'); const querystring = require('querystring');
function parseJwt(token) {
return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
}
passport.use(new OpenIDConnectStrategy({ passport.use(new OpenIDConnectStrategy({
issuer: process.env.AUTH_ISSUER, issuer: process.env.AUTH_ISSUER,
@@ -27,56 +18,36 @@ passport.use(new OpenIDConnectStrategy({
clientID: process.env.AUTH_CLIENT_ID, clientID: process.env.AUTH_CLIENT_ID,
clientSecret: process.env.AUTH_CLIENT_SECRET, clientSecret: process.env.AUTH_CLIENT_SECRET,
callbackURL: process.env.AUTH_REDIRECT_URI, callbackURL: process.env.AUTH_REDIRECT_URI,
scope: ['openid', 'profile', 'discord'] scope: ['openid', 'profile']
}, async function verify(issuer, sub, profile, jwtClaims, accessToken, refreshToken, params, cb) { }, async function verify(issuer, sub, profile, jwtClaims, accessToken, refreshToken, params, cb) {
// console.log('--- OIDC verify() called ---'); // console.log('--- OIDC verify() called ---');
// console.log('issuer:', issuer); // console.log('issuer:', issuer);
// console.log('sub:', sub); // console.log('sub:', sub);
// // console.log('discord:', discord); // console.log('profile:', JSON.stringify(profile, null, 2));
// console.log('profile:', profile); // console.log('id_token claims:', JSON.stringify(jwtClaims, null, 2));
// console.log('jwt: ', parseJwt(jwtClaims)); // console.log('preferred_username:', jwtClaims?.preferred_username);
// console.log('params:', params);
const con = await pool.getConnection();
try { try {
var con = await pool.getConnection();
await con.beginTransaction(); await con.beginTransaction();
//lookup existing user //lookup existing user
const existing = await con.query(`SELECT id FROM members WHERE authentik_issuer = ? AND authentik_sub = ? LIMIT 1;`, [issuer, sub]); const existing = await con.query(`SELECT id FROM members WHERE authentik_issuer = ? AND authentik_sub = ? LIMIT 1;`, [issuer, sub]);
let memberId: number; let memberId;
//if member exists //if member exists
if (existing.length > 0) { if (existing.length > 0) {
memberId = existing[0].id; memberId = existing[0].id;
} else { } else {
//otherwise: create account //otherwise: create account
const jwt = parseJwt(jwtClaims);
const discordID = jwt.discord.id as number;
//check if account is available to claim
memberId = await mapDiscordtoID(discordID);
if (memberId === null) {
// create new account
const username = sub.username; const username = sub.username;
const result = await con.query( const result = await con.query(
`INSERT INTO members (name, authentik_sub, authentik_issuer) VALUES (?, ?, ?)`, `INSERT INTO members (name, authentik_sub, authentik_issuer) VALUES (?, ?, ?)`,
[username, sub, issuer] [username, sub, issuer]
) )
memberId = Number(result.insertId); memberId = Number(result.insertId);
} else {
// claim existing account
const result = await con.query(
`UPDATE members SET authentik_sub = ?, authentik_issuer = ? WHERE id = ?;`,
[sub, issuer, memberId]
)
} }
}
await con.query(`UPDATE members SET last_login = ? WHERE id = ?`, [toDateTime(new Date()), memberId])
await con.commit(); await con.commit();
return cb(null, { memberId }); return cb(null, { memberId });
} catch (error) { } catch (error) {
@@ -94,6 +65,12 @@ router.get('/login', (req, res, next) => {
next(); next();
}, passport.authenticate('openidconnect')); }, passport.authenticate('openidconnect'));
// router.get('/callback', (req, res, next) => {
// passport.authenticate('openidconnect', {
// successRedirect: req.session.redirectTo,
// failureRedirect: process.env.CLIENT_URL
// })
// });
router.get('/callback', (req, res, next) => { router.get('/callback', (req, res, next) => {
const redirectURI = req.session.redirectTo; const redirectURI = req.session.redirectTo;
@@ -112,7 +89,7 @@ router.get('/callback', (req, res, next) => {
})(req, res, next); })(req, res, next);
}); });
router.get('/logout', [requireLogin], function (req, res, next) { router.get('/logout', function (req, res, next) {
req.logout(function (err) { req.logout(function (err) {
if (err) { return next(err); } if (err) { return next(err); }
var params = { var params = {
@@ -132,17 +109,15 @@ passport.serializeUser(function (user, cb) {
passport.deserializeUser(function (user, cb) { passport.deserializeUser(function (user, cb) {
process.nextTick(async function () { process.nextTick(async function () {
const memberID = user.memberId as number; const memberID = user.memberId;
const con = await pool.getConnection();
var userData: { id: number, name: string, roles: Role[], state: MemberState }; var userData;
try { try {
var con = await pool.getConnection();
let userResults = await con.query(`SELECT id, name FROM members WHERE id = ?;`, [memberID]) let userResults = await con.query(`SELECT id, name FROM members WHERE id = ?;`, [memberID])
userData = userResults[0]; userData = userResults[0];
let userRoles = await getUserRoles(memberID);
userData.roles = userRoles || [];
userData.state = await getUserState(memberID);
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} finally { } finally {
@@ -152,18 +127,5 @@ passport.deserializeUser(function (user, cb) {
}); });
}); });
declare global {
namespace Express {
interface Request {
user: {
id: number;
name: string;
roles: Role[];
state: MemberState;
};
}
}
}
module.exports = router;
export const authRouter = router;

15
api/src/routes/calendar.ts
View File

@@ -1,8 +1,6 @@
import { Request, Response } from "express"; import { Request, Response } from "express";
import { createEvent, getEventAttendance, getEventDetails, getShortEventsInRange, setAttendanceStatus, setEventCancelled, updateEvent } from "../services/calendarService"; import { createEvent, getEventAttendance, getEventDetails, getShortEventsInRange, setAttendanceStatus, setEventCancelled, updateEvent } from "../services/calendarService";
import { CalendarAttendance, CalendarEvent } from "@app/shared/types/calendar"; import { CalendarAttendance, CalendarEvent } from "@app/shared/types/calendar";
import { requireLogin, requireMemberState, requireRole } from "../middleware/auth";
import { MemberState } from "@app/shared/types/member";
const express = require('express'); const express = require('express');
const r = express.Router(); const r = express.Router();
@@ -37,7 +35,7 @@ r.get('/upcoming', async (req, res) => {
res.sendStatus(501); res.sendStatus(501);
}) })
r.post('/:id/cancel', [requireLogin, requireMemberState(MemberState.Member)], async (req: Request, res: Response) => { r.post('/:id/cancel', async (req: Request, res: Response) => {
try { try {
const eventID = Number(req.params.id); const eventID = Number(req.params.id);
setEventCancelled(eventID, true); setEventCancelled(eventID, true);
@@ -47,7 +45,7 @@ r.post('/:id/cancel', [requireLogin, requireMemberState(MemberState.Member)], as
res.status(500).send('Error setting cancel status'); res.status(500).send('Error setting cancel status');
} }
}) })
r.post('/:id/uncancel', [requireLogin, requireMemberState(MemberState.Member)], async (req: Request, res: Response) => { r.post('/:id/uncancel', async (req: Request, res: Response) => {
try { try {
const eventID = Number(req.params.id); const eventID = Number(req.params.id);
setEventCancelled(eventID, false); setEventCancelled(eventID, false);
@@ -59,7 +57,7 @@ r.post('/:id/uncancel', [requireLogin, requireMemberState(MemberState.Member)],
}) })
r.post('/:id/attendance', [requireLogin, requireMemberState(MemberState.Member)], async (req: Request, res: Response) => { r.post('/:id/attendance', async (req: Request, res: Response) => {
try { try {
let member = req.user.id; let member = req.user.id;
let event = Number(req.params.id); let event = Number(req.params.id);
@@ -87,7 +85,7 @@ r.get('/:id', async (req: Request, res: Response) => {
//post a new calendar event //post a new calendar event
r.post('/', [requireLogin, requireMemberState(MemberState.Member)], async (req: Request, res: Response) => { r.post('/', async (req: Request, res: Response) => {
try { try {
const member = req.user.id; const member = req.user.id;
let event: CalendarEvent = req.body; let event: CalendarEvent = req.body;
@@ -102,7 +100,7 @@ r.post('/', [requireLogin, requireMemberState(MemberState.Member)], async (req:
} }
}) })
r.put('/', [requireLogin, requireMemberState(MemberState.Member)], async (req: Request, res: Response) => { r.put('/', async (req: Request, res: Response) => {
try { try {
let event: CalendarEvent = req.body; let event: CalendarEvent = req.body;
event.start = new Date(event.start); event.start = new Date(event.start);
@@ -116,4 +114,5 @@ r.put('/', [requireLogin, requireMemberState(MemberState.Member)], async (req: R
} }
}) })
export const calendarRouter = r;
module.exports.calendarRouter = r;

27
api/src/routes/course.ts
View File

@@ -1,18 +1,11 @@
import { CourseAttendee, CourseEventDetails } from "@app/shared/types/course"; import { CourseAttendee, CourseEventDetails } from "@app/shared/types/course";
import { getAllCourses, getCourseEventAttendees, getCourseEventDetails, getCourseEventRoles, getCourseEvents, insertCourseEvent } from "../services/CourseSerivce"; import { getAllCourses, getCourseEventAttendees, getCourseEventDetails, getCourseEventRoles, getCourseEvents, insertCourseEvent } from "../services/CourseSerivce";
import { Request, Response, Router } from "express"; import { Request, Response, Router } from "express";
import { requireLogin, requireMemberState } from "../middleware/auth";
import { MemberState } from "@app/shared/types/member";
const cr = Router(); const courseRouter = Router();
const er = Router(); const eventRouter = Router();
cr.use(requireLogin) courseRouter.get('/', async (req, res) => {
er.use(requireLogin)
cr.use(requireMemberState(MemberState.Member))
er.use(requireMemberState(MemberState.Member))
cr.get('/', async (req, res) => {
try { try {
const courses = await getAllCourses(); const courses = await getAllCourses();
res.status(200).json(courses); res.status(200).json(courses);
@@ -22,7 +15,7 @@ cr.get('/', async (req, res) => {
} }
}) })
cr.get('/roles', async (req, res) => { courseRouter.get('/roles', async (req, res) => {
try { try {
const roles = await getCourseEventRoles(); const roles = await getCourseEventRoles();
res.status(200).json(roles); res.status(200).json(roles);
@@ -32,7 +25,7 @@ cr.get('/roles', async (req, res) => {
} }
}) })
er.get('/', async (req: Request, res: Response) => { eventRouter.get('/', async (req: Request, res: Response) => {
const allowedSorts = new Map([ const allowedSorts = new Map([
["ascending", "ASC"], ["ascending", "ASC"],
["descending", "DESC"] ["descending", "DESC"]
@@ -57,7 +50,7 @@ er.get('/', async (req: Request, res: Response) => {
} }
}); });
er.get('/:id', async (req: Request, res: Response) => { eventRouter.get('/:id', async (req: Request, res: Response) => {
try { try {
let out = await getCourseEventDetails(Number(req.params.id)); let out = await getCourseEventDetails(Number(req.params.id));
res.status(200).json(out); res.status(200).json(out);
@@ -67,7 +60,7 @@ er.get('/:id', async (req: Request, res: Response) => {
} }
}); });
er.get('/attendees/:id', async (req: Request, res: Response) => { eventRouter.get('/attendees/:id', async (req: Request, res: Response) => {
try { try {
const attendees: CourseAttendee[] = await getCourseEventAttendees(Number(req.params.id)); const attendees: CourseAttendee[] = await getCourseEventAttendees(Number(req.params.id));
res.status(200).json(attendees); res.status(200).json(attendees);
@@ -77,7 +70,7 @@ er.get('/attendees/:id', async (req: Request, res: Response) => {
} }
}) })
er.post('/', async (req: Request, res: Response) => { eventRouter.post('/', async (req: Request, res: Response) => {
const posterID: number = req.user.id; const posterID: number = req.user.id;
try { try {
console.log(); console.log();
@@ -92,5 +85,5 @@ er.post('/', async (req: Request, res: Response) => {
} }
}) })
export const courseRouter = cr; module.exports.courseRouter = courseRouter;
export const eventRouter = er; module.exports.eventRouter = eventRouter;

56
api/src/routes/loa.js Normal file
View File

@@ -0,0 +1,56 @@
const express = require('express');
const router = express.Router();
import pool from '../db';
//post a new LOA
router.post("/", async (req, res) => {
const { member_id, filed_date, start_date, end_date, reason } = req.body;
if (!member_id || !filed_date || !start_date || !end_date) {
return res.status(400).json({ error: "Missing required fields" });
}
try {
const result = await pool.query(
`INSERT INTO leave_of_absences
(member_id, filed_date, start_date, end_date, reason)
VALUES (?, ?, ?, ?, ?)`,
[member_id, filed_date, start_date, end_date, reason]
);
res.sendStatus(201);
} catch (error) {
console.error(error);
res.status(500).send('Something went wrong', error);
}
});
//get my current LOA
router.get("/me", async (req, res) => {
//TODO: implement current user getter
const user = 89;
try {
const result = await pool.query("SELECT * FROM leave_of_absences WHERE member_id = ?", [user])
res.status(200).json(result)
} catch (error) {
console.error(error);
res.status(500).send(error);
}
})
router.get('/all', async (req, res) => {
try {
const result = await pool.query(
`SELECT loa.*, members.name
FROM leave_of_absences AS loa
INNER JOIN members ON loa.member_id = members.id;
`);
res.status(200).json(result)
} catch (error) {
console.error(error);
res.status(500).send(error);
}
})
module.exports = router;

151
api/src/routes/loa.ts
View File

@@ -1,151 +0,0 @@
const express = require('express');
const router = express.Router();
import { Request, Response } from 'express';
import pool from '../db';
import { closeLOA, createNewLOA, getAllLOA, getLOAbyID, getLoaTypes, getUserLOA, setLOAExtension } from '../services/loaService';
import { LOARequest } from '@app/shared/types/loa';
import { requireLogin, requireRole } from '../middleware/auth';
router.use(requireLogin);
//member posts LOA
router.post("/", async (req: Request, res: Response) => {
let LOARequest = req.body as LOARequest;
LOARequest.member_id = req.user.id;
LOARequest.created_by = req.user.id;
LOARequest.filed_date = new Date();
try {
await createNewLOA(LOARequest);
res.sendStatus(201);
} catch (error) {
console.error(error);
res.status(500).send(error);
}
});
//admin posts LOA
router.post("/admin", [requireRole("17th Administrator")], async (req: Request, res: Response) => {
let LOARequest = req.body as LOARequest;
LOARequest.created_by = req.user.id;
LOARequest.filed_date = new Date();
console.log(LOARequest);
try {
await createNewLOA(LOARequest);
res.sendStatus(201);
} catch (error) {
console.error(error);
res.status(500).send(error);
}
});
//get my current LOA
router.get("/me", async (req: Request, res: Response) => {
const user = req.user.id;
try {
const result = await getUserLOA(user);
res.status(200).json(result)
} catch (error) {
console.error(error);
res.status(500).send(error);
}
})
//get my LOA history
router.get("/history", async (req: Request, res: Response) => {
const user = req.user.id;
try {
const result = await getUserLOA(user);
res.status(200).json(result)
} catch (error) {
console.error(error);
res.status(500).send(error);
}
})
router.get('/all', [requireRole("17th Administrator")], async (req, res) => {
try {
const result = await getAllLOA();
res.status(200).json(result)
} catch (error) {
console.error(error);
res.status(500).send(error);
}
})
router.get('/types', async (req: Request, res: Response) => {
try {
let out = await getLoaTypes();
res.status(200).json(out);
} catch (error) {
res.status(500).json(error);
console.error(error);
}
})
router.post('/cancel/:id', async (req: Request, res: Response) => {
let closer = req.user.id;
let id = Number(req.params.id);
try {
let loa = await getLOAbyID(id);
if (loa.member_id != closer) {
return res.sendStatus(403);
}
await closeLOA(Number(req.params.id), closer);
res.sendStatus(200);
} catch (error) {
console.error(error);
res.status(500).json(error);
}
})
//TODO: enforce admin only
router.post('/adminCancel/:id', [requireRole("17th Administrator")], async (req: Request, res: Response) => {
let closer = req.user.id;
try {
await closeLOA(Number(req.params.id), closer);
res.sendStatus(200);
} catch (error) {
console.error(error);
res.status(500).json(error);
}
})
// TODO: Enforce admin only
router.post('/extend/:id', [requireRole("17th Administrator")], async (req: Request, res: Response) => {
const to: Date = req.body.to;
if (!to) {
res.status(400).send("Extension length is required");
}
try {
await setLOAExtension(Number(req.params.id), to);
res.sendStatus(200);
} catch (error) {
console.error(error)
res.status(500).json(error);
}
})
router.get('/policy', async (req: Request, res: Response) => {
const output = await fetch(`${process.env.DOC_HOST}/api/pages/42`, {
headers: {
Authorization: `Token ${process.env.DOC_TOKEN_ID}:${process.env.DOC_TOKEN_SECRET}`,
}
})
if (output.ok) {
const out = await output.json();
res.status(200).json(out.html);
} else {
console.error("Failed to fetch LOA policy from bookstack");
res.sendStatus(500);
}
})
export const loaRouter = router;

84
api/src/routes/members.js Normal file
View File

@@ -0,0 +1,84 @@
const express = require('express');
const router = express.Router();
import pool from '../db';
import { getUserData } from '../services/memberService';
import { getUserRoles } from '../services/rolesService';
router.use((req, res, next) => {
console.log(req.user);
console.log('Time:', Date.now())
next()
})
//get all users
router.get('/', async (req, res) => {
try {
const result = await pool.query(
`SELECT
v.*,
CASE
WHEN EXISTS (
SELECT 1
FROM leave_of_absences l
WHERE l.member_id = v.member_id
AND l.deleted = 0
AND UTC_TIMESTAMP() BETWEEN l.start_date AND l.end_date
) THEN 1 ELSE 0
END AS on_loa
FROM view_member_rank_status_all v;`);
return res.status(200).json(result);
} catch (err) {
console.error('Error fetching users:', err);
return res.status(500).json({ error: 'Failed to fetch users' });
}
});
router.get('/me', async (req, res) => {
if (req.user === undefined)
return res.sendStatus(401)
try {
const { id, name, state } = await getUserData(req.user.id);
const LOAData = await pool.query(
`SELECT *
FROM leave_of_absences
WHERE member_id = ?
AND deleted = 0
AND UTC_TIMESTAMP() BETWEEN start_date AND end_date;`, req.user.id);
const roleData = await getUserRoles(req.user.id);
const userDataFull = { id, name, state, LOAData, roleData };
console.log(userDataFull)
res.status(200).json(userDataFull);
} catch (error) {
console.error('Error fetching user data:', error);
return res.status(500).json({ error: 'Failed to fetch user data' });
}
})
router.get('/:id', async (req, res) => {
try {
const userId = req.params.id;
const result = await pool.query('SELECT * FROM view_member_rank_status_all WHERE id = $1;', [userId]);
if (result.rows.length === 0) {
return res.status(404).json({ error: 'User not found' });
}
return res.status(200).json(result.rows[0]);
} catch (err) {
console.error('Error fetching user:', err);
return res.status(500).json({ error: 'Failed to fetch user' });
}
});
//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;

121
api/src/routes/members.ts
View File

@@ -1,121 +0,0 @@
const express = require('express');
const router = express.Router();
import { Request, Response } from 'express';
import pool from '../db';
import { requireLogin, requireMemberState, requireRole } from '../middleware/auth';
import { getUserActiveLOA } from '../services/loaService';
import { getMemberSettings, getMembersFull, getMembersLite, getUserData, setUserSettings } from '../services/memberService';
import { getUserRoles } from '../services/rolesService';
import { memberSettings, MemberState } from '@app/shared/types/member';
//get all users
router.get('/', [requireLogin, requireMemberState(MemberState.Member)], async (req, res) => {
try {
const result = await pool.query(
`SELECT
v.*,
CASE
WHEN EXISTS (
SELECT 1
FROM leave_of_absences l
WHERE l.member_id = v.member_id
AND l.deleted = 0
AND UTC_TIMESTAMP() BETWEEN l.start_date AND l.end_date
) THEN 1 ELSE 0
END AS on_loa
FROM view_member_rank_unit_status_latest v;`);
return res.status(200).json(result);
} catch (err) {
console.error('Error fetching users:', err);
return res.status(500).json({ error: 'Failed to fetch users' });
}
});
router.get('/me', [requireLogin], async (req, res) => {
if (req.user === undefined)
return res.sendStatus(401)
try {
const { id, name, state } = await getUserData(req.user.id);
const LOAData = await getUserActiveLOA(req.user.id);
const roleData = await getUserRoles(req.user.id);
const userDataFull = { id, name, state, LOAData, roleData };
res.status(200).json(userDataFull);
} catch (error) {
console.error('Error fetching user data:', error);
return res.status(500).json({ error: 'Failed to fetch user data' });
}
})
router.get('/settings', [requireLogin], 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', [requireLogin], 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', [requireLogin], async (req, res) => {
try {
const userId = req.params.id;
const result = await pool.query('SELECT * FROM view_member_rank_unit_status_latest WHERE id = $1;', [userId]);
if (result.rows.length === 0) {
return res.status(404).json({ error: 'User not found' });
}
return res.status(200).json(result.rows[0]);
} catch (err) {
console.error('Error fetching user:', err);
return res.status(500).json({ error: 'Failed to fetch user' });
}
});
//update a user's display name (stub)
router.put('/:id/displayname', async (req, res) => {
// Stub: not implemented yet
return res.status(501);
});
export const memberRouter = router;

18
api/src/routes/ranks.ts → api/src/routes/ranks.js
View File

@@ -1,18 +1,10 @@
import { MemberState } from "@app/shared/types/member"; const express = require('express');
import { requireLogin, requireMemberState, requireRole } from "../middleware/auth";
import { getAllRanks, insertMemberRank } from "../services/rankService";
import express = require('express');
const r = express.Router(); const r = express.Router();
const ur = express.Router(); const ur = express.Router();
const { getAllRanks, insertMemberRank } = require('../services/rankService')
r.use(requireLogin)
ur.use(requireLogin)
//insert a new latest rank for a user //insert a new latest rank for a user
ur.post('/', [requireRole(["17th Command", "17th Administrator", "17th HQ"]), requireMemberState(MemberState.Member)], async (req, res) => { ur.post('/', async (req, res) => {3
3
try { try {
const change = req.body?.change; const change = req.body?.change;
await insertMemberRank(change.member_id, change.rank_id, change.date); await insertMemberRank(change.member_id, change.rank_id, change.date);
@@ -35,5 +27,5 @@ r.get('/', async (req, res) => {
} }
}); });
export const ranks = r; module.exports.ranks = r;
export const memberRanks = ur; module.exports.memberRanks = ur;

26
api/src/routes/roles.ts → api/src/routes/roles.js
View File

@@ -2,16 +2,11 @@ const express = require('express');
const r = express.Router(); const r = express.Router();
const ur = express.Router(); const ur = express.Router();
import { MemberState } from '@app/shared/types/member';
import pool from '../db'; import pool from '../db';
import { requireLogin, requireMemberState, requireRole } from '../middleware/auth';
import { assignUserGroup, createGroup } from '../services/rolesService'; import { assignUserGroup, createGroup } from '../services/rolesService';
r.use(requireLogin)
ur.use(requireLogin)
//manually assign a member to a group //manually assign a member to a group
ur.post('/', [requireMemberState(MemberState.Member), requireRole("17th Administrator")], async (req, res) => { ur.post('/', async (req, res) => {
try { try {
const body = req.body; const body = req.body;
@@ -25,7 +20,7 @@ ur.post('/', [requireMemberState(MemberState.Member), requireRole("17th Administ
}); });
//manually remove member from group //manually remove member from group
ur.delete('/', [requireMemberState(MemberState.Member), requireRole("17th Administrator")], async (req, res) => { ur.delete('/', async (req, res) => {
try { try {
const body = req.body; const body = req.body;
console.log(body); console.log(body);
@@ -43,9 +38,9 @@ ur.delete('/', [requireMemberState(MemberState.Member), requireRole("17th Admini
}) })
//get all roles //get all roles
r.get('/', [requireMemberState(MemberState.Member)], async (req, res) => { r.get('/', async (req, res) => {
try { try {
var con = await pool.getConnection(); const con = await pool.getConnection();
// Get all roles // Get all roles
const roles = await con.query('SELECT * FROM roles;'); const roles = await con.query('SELECT * FROM roles;');
@@ -54,7 +49,7 @@ r.get('/', [requireMemberState(MemberState.Member)], async (req, res) => {
const membersRoles = await con.query(` const membersRoles = await con.query(`
SELECT mr.role_id, v.* SELECT mr.role_id, v.*
FROM members_roles mr FROM members_roles mr
JOIN view_member_rank_unit_status_latest v ON mr.member_id = v.member_id JOIN view_member_rank_status_all v ON mr.member_id = v.member_id
`); `);
@@ -73,17 +68,16 @@ r.get('/', [requireMemberState(MemberState.Member)], async (req, res) => {
members: roleIdToMembers[role.id] || [] members: roleIdToMembers[role.id] || []
})); }));
con.release();
res.json(result); res.json(result);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
res.status(500).json({ error: 'Internal server error' }); res.status(500).json({ error: 'Internal server error' });
} finally {
con.release();
} }
}); });
//create a new role //create a new role
r.post('/', [requireMemberState(MemberState.Member), requireRole("17th Administrator")], async (req, res) => { r.post('/', async (req, res) => {
try { try {
const { name, color, description } = req.body; const { name, color, description } = req.body;
console.log('Creating role:', { name, color, description }); console.log('Creating role:', { name, color, description });
@@ -105,7 +99,7 @@ r.post('/', [requireMemberState(MemberState.Member), requireRole("17th Administr
} }
}) })
r.delete('/:id', [requireMemberState(MemberState.Member), requireRole("17th Administrator")], async (req, res) => { r.delete('/:id', async (req, res) => {
try { try {
const id = req.params.id; const id = req.params.id;
@@ -118,5 +112,5 @@ r.delete('/:id', [requireMemberState(MemberState.Member), requireRole("17th Admi
} }
}) })
export const roles = r; module.exports.roles = r;
export const memberRoles = ur; module.exports.memberRoles = ur;

19
api/src/routes/statuses.ts → api/src/routes/statuses.js
View File

@@ -1,15 +1,11 @@
import express = require('express'); const express = require('express');
const statusR = express.Router(); const status = express.Router();
const memberStatusR = express.Router(); const memberStatus = express.Router();
import pool from '../db'; import pool from '../db';
import { requireLogin } from '../middleware/auth';
statusR.use(requireLogin);
memberStatusR.use(requireLogin);
//insert a new latest rank for a user //insert a new latest rank for a user
memberStatusR.post('/', async (req, res) => { memberStatus.post('/', async (req, res) => {
// try { // try {
// const App = req.body?.App || {}; // const App = req.body?.App || {};
@@ -34,7 +30,7 @@ memberStatusR.post('/', async (req, res) => {
}); });
//get all statuses //get all statuses
statusR.get('/', async (req, res) => { status.get('/', async (req, res) => {
try { try {
const result = await pool.query('SELECT * FROM statuses;'); const result = await pool.query('SELECT * FROM statuses;');
res.json(result); res.json(result);
@@ -44,8 +40,7 @@ statusR.get('/', async (req, res) => {
} }
}); });
export const status = statusR; module.exports.status = status;
export const memberStatus = memberStatusR; module.exports.memberStatus = memberStatus;
// TODO, implement get all ranks route with SQL stirng SELECT id, name, short_name, category, sort_id FROM ranks; // TODO, implement get all ranks route with SQL stirng SELECT id, name, short_name, category, sort_id FROM ranks;

10
api/src/services/CourseSerivce.ts
View File

@@ -79,9 +79,9 @@ export async function getCourseEventDetails(id: number): Promise<CourseEventDeta
} }
export async function insertCourseEvent(event: CourseEventDetails): Promise<number> { export async function insertCourseEvent(event: CourseEventDetails): Promise<number> {
console.log(event);
const con = await pool.getConnection();
try { try {
var con = await pool.getConnection();
await con.beginTransaction(); await con.beginTransaction();
const res = await con.query("INSERT INTO course_events (course_id, event_date, remarks, created_by) VALUES (?, ?, ?, ?);", [event.course_id, toDateTime(event.event_date), event.remarks, event.created_by]); const res = await con.query("INSERT INTO course_events (course_id, event_date, remarks, created_by) VALUES (?, ?, ?, ?);", [event.course_id, toDateTime(event.event_date), event.remarks, event.created_by]);
var eventID: number = res.insertId; var eventID: number = res.insertId;
@@ -98,12 +98,12 @@ export async function insertCourseEvent(event: CourseEventDetails): Promise<numb
VALUES (?, ?, ?, ?, ?, ?);`, [attendee.attendee_id, eventID, attendee.attendee_role_id, attendee.passed_bookwork, attendee.passed_qual, attendee.remarks]); VALUES (?, ?, ?, ?, ?, ?);`, [attendee.attendee_id, eventID, attendee.attendee_role_id, attendee.passed_bookwork, attendee.passed_qual, attendee.remarks]);
} }
await con.commit(); await con.commit();
await con.release();
return Number(eventID); return Number(eventID);
} catch (error) { } catch (error) {
if (con) await con.rollback(); await con.rollback();
await con.release();
throw error; throw error;
} finally {
if (con) await con.release();
} }
} }

46
api/src/services/applicationService.ts
View File

@@ -1,6 +1,5 @@
import { ApplicationListRow, ApplicationRow, CommentRow } from "@app/shared/types/application"; import { ApplicationListRow, ApplicationRow, CommentRow } from "@app/shared/types/application";
import pool from "../db"; import pool from "../db";
import { error } from "console";
export async function createApplication(memberID: number, appVersion: number, app: string) { export async function createApplication(memberID: number, appVersion: number, app: string) {
const sql = `INSERT INTO applications (member_id, app_version, app_data) VALUES (?, ?, ?);`; const sql = `INSERT INTO applications (member_id, app_version, app_data) VALUES (?, ?, ?);`;
@@ -13,13 +12,12 @@ export async function getMemberApplication(memberID: number): Promise<Applicatio
member.name AS member_name member.name AS member_name
FROM applications AS app FROM applications AS app
INNER JOIN members AS member ON member.id = app.member_id INNER JOIN members AS member ON member.id = app.member_id
WHERE app.member_id = ? ORDER BY submitted_at DESC LIMIT 1;`; WHERE app.member_id = ?;`;
let app: ApplicationRow[] = await pool.query(sql, [memberID]); let app: ApplicationRow[] = await pool.query(sql, [memberID]);
return app[0]; return app[0];
} }
export async function getApplicationByID(appID: number): Promise<ApplicationRow> { export async function getApplicationByID(appID: number): Promise<ApplicationRow> {
const sql = const sql =
`SELECT app.*, `SELECT app.*,
@@ -46,20 +44,7 @@ export async function getApplicationList(): Promise<ApplicationListRow[]> {
return rows; return rows;
} }
export async function getAllMemberApplications(memberID: number): Promise<ApplicationListRow[]> { export async function approveApplication(id) {
const sql = `SELECT
app.id,
app.member_id,
app.submitted_at,
app.app_status
FROM applications AS app WHERE app.member_id = ? ORDER BY submitted_at DESC;`;
const rows: ApplicationListRow[] = await pool.query(sql, [memberID])
return rows;
}
export async function approveApplication(id: number) {
const sql = ` const sql = `
UPDATE applications UPDATE applications
SET approved_at = NOW() SET approved_at = NOW()
@@ -72,38 +57,15 @@ export async function approveApplication(id: number) {
return result; return result;
} }
export async function denyApplication(id: number) { export async function getApplicationComments(appID: number): Promise<CommentRow[]> {
const sql = `
UPDATE applications
SET denied_at = NOW()
WHERE id = ?
AND approved_at IS NULL
AND denied_at IS NULL
`;
const result = await pool.execute(sql, id);
if (result.affectedRows == 1) {
return
} else {
throw new Error(`"Something went wrong denying application with ID ${id}`);
}
}
export async function getApplicationComments(appID: number, admin: boolean = false): Promise<CommentRow[]> {
const excludeAdmin = ' AND app.admin_only = false';
const whereClause = `WHERE app.application_id = ?${!admin ? excludeAdmin : ''}`;
return await pool.query(`SELECT app.id AS comment_id, return await pool.query(`SELECT app.id AS comment_id,
app.post_content, app.post_content,
app.poster_id, app.poster_id,
app.post_time, app.post_time,
app.last_modified, app.last_modified,
app.admin_only,
member.name AS poster_name member.name AS poster_name
FROM application_comments AS app FROM application_comments AS app
INNER JOIN members AS member ON member.id = app.poster_id INNER JOIN members AS member ON member.id = app.poster_id
${whereClause}`, WHERE app.application_id = ?;`,
[appID]); [appID]);
} }

14
api/src/services/calendarService.ts
View File

@@ -123,9 +123,15 @@ export async function setAttendanceStatus(memberID: number, eventID: number, sta
} }
export async function getEventAttendance(eventID: number): Promise<CalendarSignup[]> { export async function getEventAttendance(eventID: number): Promise<CalendarSignup[]> {
const sql = `
SELECT
s.member_id,
s.status,
m.name AS member_name
FROM calendar_events_signups s
LEFT JOIN members m ON s.member_id = m.id
WHERE s.event_id = ?
`;
const sql = "CALL `sp_GetCalendarEventSignups`(?)" return await pool.query(sql, [eventID]);
const res = await pool.query(sql, [eventID]);
console.log(res[0]);
return res[0];
} }

98
api/src/services/loaService.ts
View File

@@ -1,98 +0,0 @@
import { toDateTime } from "@app/shared/utils/time";
import pool from "../db";
import { LOARequest, LOAType } from '@app/shared/types/loa'
export async function getLoaTypes(): Promise<LOAType[]> {
return await pool.query('SELECT * FROM leave_of_absences_types;');
}
export async function getAllLOA(page = 1, pageSize = 20): Promise<LOARequest[]> {
const offset = (page - 1) * pageSize;
const sql = `
SELECT loa.*, members.name, t.name AS type_name
FROM leave_of_absences AS loa
LEFT JOIN members ON loa.member_id = members.id
LEFT JOIN leave_of_absences_types AS t ON loa.type_id = t.id
ORDER BY
CASE
WHEN loa.closed IS NULL
AND NOW() > COALESCE(loa.extended_till, loa.end_date) THEN 1
WHEN loa.closed IS NULL
AND NOW() BETWEEN loa.start_date AND COALESCE(loa.extended_till, loa.end_date) THEN 2
WHEN loa.closed IS NULL AND NOW() < loa.start_date THEN 3
WHEN loa.closed IS NOT NULL THEN 4
END,
loa.start_date DESC
LIMIT ? OFFSET ?;
`;
let res: LOARequest[] = await pool.query(sql, [pageSize, offset]) as LOARequest[];
return res;
}
export async function getUserLOA(userId: number): Promise<LOARequest[]> {
const result: LOARequest[] = await pool.query(`
SELECT loa.*, members.name, t.name AS type_name
FROM leave_of_absences AS loa
LEFT JOIN members ON loa.member_id = members.id
LEFT JOIN leave_of_absences_types AS t ON loa.type_id = t.id
WHERE member_id = ?
ORDER BY
CASE
WHEN loa.closed IS NULL
AND NOW() > COALESCE(loa.extended_till, loa.end_date) THEN 1
WHEN loa.closed IS NULL
AND NOW() BETWEEN loa.start_date AND COALESCE(loa.extended_till, loa.end_date) THEN 2
WHEN loa.closed IS NULL AND NOW() < loa.start_date THEN 3
WHEN loa.closed IS NOT NULL THEN 4
END,
loa.start_date DESC
`, [userId])
return result;
}
export async function getUserActiveLOA(userId: number): Promise<LOARequest[]> {
const sql = `SELECT *
FROM leave_of_absences
WHERE member_id = ?
AND closed IS NULL
AND UTC_TIMESTAMP() BETWEEN start_date AND end_date;`
const LOAData = await pool.query(sql, [userId]);
return LOAData;
}
export async function createNewLOA(data: LOARequest) {
const sql = `INSERT INTO leave_of_absences
(member_id, filed_date, start_date, end_date, type_id, reason)
VALUES (?, ?, ?, ?, ?, ?)`;
await pool.query(sql, [data.member_id, toDateTime(data.filed_date), toDateTime(data.start_date), toDateTime(data.end_date), data.type_id, data.reason])
return;
}
export async function closeLOA(id: number, closer: number) {
const sql = `UPDATE leave_of_absences
SET closed = 1,
closed_by = ?
WHERE leave_of_absences.id = ?`;
let out = await pool.query(sql, [closer, id]);
console.log(out);
return out;
}
export async function getLOAbyID(id: number): Promise<LOARequest> {
let res = await pool.query(`SELECT * FROM leave_of_absences WHERE id = ?`, [id]);
console.log(res);
if (res.length != 1)
throw new Error(`LOA with id ${id} not found`);
return res[0];
}
export async function setLOAExtension(id: number, extendTo: Date) {
let res = await pool.query(`UPDATE leave_of_absences
SET extended_till = ?
WHERE leave_of_absences.id = ? `, [toDateTime(extendTo), id]);
if (res.affectedRows != 1)
throw new Error(`Could not extend LOA`);
return res[0];
}

64
api/src/services/memberService.ts
View File

@@ -1,5 +1,13 @@
import pool from "../db"; 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) { export async function getUserData(userID: number) {
const sql = `SELECT * FROM members WHERE id = ?`; const sql = `SELECT * FROM members WHERE id = ?`;
@@ -14,49 +22,13 @@ export async function setUserState(userID: number, state: MemberState) {
return await pool.query(sql, [state, userID]); return await pool.query(sql, [state, userID]);
} }
export async function getUserState(user: number): Promise<MemberState> { declare global {
let out = await pool.query(`SELECT state FROM members WHERE id = ?`, [user]); namespace Express {
return (out[0].state as MemberState); interface Request {
} user: {
id: number;
export async function getMemberSettings(id: number): Promise<memberSettings> { name: string;
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;
}
export async function mapDiscordtoID(id: number): Promise<number | null> {
const sql = `SELECT id FROM members WHERE discord_id = ?;`
let res = await pool.query(sql, [id]);
return res.length > 0 ? res[0].id : null;
} }

4
api/src/services/rankService.ts
View File

@@ -21,8 +21,8 @@ export async function insertMemberRank(member_id: number, rank_id: number): Prom
export async function insertMemberRank(member_id: number, rank_id: number, date?: Date): Promise<void> { export async function insertMemberRank(member_id: number, rank_id: number, date?: Date): Promise<void> {
const sql = date const sql = date
? `INSERT INTO members_ranks (member_id, rank_id, start_date) VALUES (?, ?, ?);` ? `INSERT INTO members_ranks (member_id, rank_id, event_date) VALUES (?, ?, ?);`
: `INSERT INTO members_ranks (member_id, rank_id, start_date) VALUES (?, ?, NOW());`; : `INSERT INTO members_ranks (member_id, rank_id, event_date) VALUES (?, ?, NOW());`;
const params = date const params = date
? [member_id, rank_id, date] ? [member_id, rank_id, date]

2
api/src/services/statusService.ts
View File

@@ -1,6 +1,6 @@
import pool from "../db" import pool from "../db"
export async function assignUserToStatus(userID: number, statusID: number) { export async function assignUserToStatus(userID: number, statusID: number) {
const sql = `INSERT INTO members_statuses (member_id, status_id, start_date) VALUES (?, ?, NOW())` const sql = `INSERT INTO members_statuses (member_id, status_id, event_date) VALUES (?, ?, NOW())`
await pool.execute(sql, [userID, statusID]); await pool.execute(sql, [userID, statusID]);
} }

1
ecosystem.config.js
View File

@@ -5,7 +5,6 @@ module.exports = {
script: 'built/api/src/index.js', script: 'built/api/src/index.js',
watch: ['.env', 'built'], watch: ['.env', 'built'],
ignore_watch: ['.gitignore', '\.json', 'src', '\.db', 'node_modules'], ignore_watch: ['.gitignore', '\.json', 'src', '\.db', 'node_modules'],
appendEnvToName: true,
watch_options: { watch_options: {
usePolling: true, usePolling: true,
interval: 10000 interval: 10000

51
shared/schemas/loaSchema.ts
View File

@@ -1,51 +0,0 @@
import * as z from "zod";
import { LOAType } from "../types/loa";
export const loaTypeSchema = z.object({
id: z.number(),
name: z.string(),
max_length_days: z.number(),
});
export const loaSchema = z.object({
member_id: z.number(),
start_date: z.date(),
end_date: z.date(),
type: loaTypeSchema,
reason: z.string(),
})
.superRefine((data, ctx) => {
const { start_date, end_date, type } = data;
const today = new Date();
today.setHours(0, 0, 0, 0);
if (start_date < today) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ["start_date"],
message: "Start date cannot be in the past.",
});
}
// 1. end > start
if (end_date <= start_date) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ["end_date"],
message: "End date must be after start date.",
});
}
// 2. calculate max
const maxEnd = new Date(start_date);
maxEnd.setDate(maxEnd.getDate() + type.max_length_days);
if (end_date > maxEnd) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ["end_date"],
message: `This LOA type allows a maximum of ${type.max_length_days} days.`,
});
}
});

1
shared/types/application.ts
View File

@@ -40,7 +40,6 @@ export interface CommentRow {
post_time: string; post_time: string;
last_modified: string | null; last_modified: string | null;
poster_name: string; poster_name: string;
admin_only: boolean;
} }
export interface ApplicationFull { export interface ApplicationFull {

1
shared/types/calendar.ts
View File

@@ -26,7 +26,6 @@ export interface CalendarSignup {
eventID: number; eventID: number;
status: CalendarAttendance; status: CalendarAttendance;
member_name?: string; member_name?: string;
member_unit?: string;
} }
export interface CalendarEventShort { export interface CalendarEventShort {

24
shared/types/loa.ts
View File

@@ -1,24 +0,0 @@
export interface LOARequest {
id?: number;
member_id?: number;
filed_date?: Date; // ISO 8601 string
start_date: Date; // ISO 8601 string
end_date: Date; // ISO 8601 string
extended_till?: Date;
type_id?: number;
reason?: string;
expired?: boolean;
closed?: boolean;
closed_by?: number;
created_by?: number;
name?: string; //member name
type_name?: string;
};
export interface LOAType {
id: number;
name: string;
max_length_days: number;
extendable: boolean;
}

31
shared/types/member.ts
View File

@@ -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
}

3
shared/utils/time.ts
View File

@@ -1,8 +1,5 @@
export function toDateTime(date: Date): string { export function toDateTime(date: Date): string {
console.log(date); console.log(date);
if (typeof date === 'string') {
date = new Date(date);
}
// This produces a CST-local time because server runs in CST // This produces a CST-local time because server runs in CST
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0"); const month = (date.getMonth() + 1).toString().padStart(2, "0");

3
ui/.env.example
View File

@@ -1,9 +1,6 @@
# SITE SETTINGS # SITE SETTINGS
VITE_APIHOST= VITE_APIHOST=
VITE_DOCHOST= # https://bookstack.whatever.com/api
VITE_ENVIRONMENT= # dev / prod VITE_ENVIRONMENT= # dev / prod
VITE_APPLICATION_VERSION= # Should match release tag
# Glitchtip # Glitchtip
VITE_GLITCHTIP_DSN= VITE_GLITCHTIP_DSN=

2
ui/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>17th Ranger Battalion</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
ui/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

8
ui/src/App.vue
View File

@@ -5,7 +5,6 @@ import { useUserStore } from './stores/user';
import Alert from './components/ui/alert/Alert.vue'; import Alert from './components/ui/alert/Alert.vue';
import AlertDescription from './components/ui/alert/AlertDescription.vue'; import AlertDescription from './components/ui/alert/AlertDescription.vue';
import Navbar from './components/Navigation/Navbar.vue'; import Navbar from './components/Navigation/Navbar.vue';
import { cancelLOA } from './api/loa';
const userStore = useUserStore(); const userStore = useUserStore();
@@ -30,11 +29,10 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
<p>This is a development build of the application. Some features will be unavailable or unstable.</p> <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
</AlertDescription> </AlertDescription>
</Alert> </Alert>
<Alert v-if="userStore.user?.LOAData?.[0]" 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"> <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
<p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAData?.[0].end_date) }}</strong></p> <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
<Button variant="secondary" @click="async () => { await cancelLOA(userStore.user?.LOAData?.[0].id); userStore.loadUser(); }">End <Button variant="secondary">End LOA</Button>
LOA</Button>
</AlertDescription> </AlertDescription>
</Alert> </Alert>
</div> </div>

146
ui/src/api/application.ts
View File

@@ -1,11 +1,80 @@
import { ApplicationFull } from "@shared/types/application"; export type ApplicationDto = Partial<{
age: number | string
name: string
playtime: number | string
hobbies: string
military: boolean
communities: string
joinReason: string
milsimAttraction: string
referral: string
steamProfile: string
timezone: string
canAttendSaturday: boolean
interests: string
aknowledgeRules: boolean
}>
export interface ApplicationData {
dob: string;
name: string;
playtime: number;
hobbies: string;
military: boolean;
communities: string;
joinReason: string;
milsimAttraction: string;
referral: string;
steamProfile: string;
timezone: string;
canAttendSaturday: boolean;
interests: string;
aknowledgeRules: boolean;
}
//reflects how applications are stored in the database
export interface ApplicationRow {
id: number;
member_id: number;
app_version: number;
app_data: ApplicationData;
submitted_at: string; // ISO datetime from DB (e.g., "2025-08-25T18:04:29.000Z")
updated_at: string | null;
approved_at: string | null;
denied_at: string | null;
app_status: ApplicationStatus; // generated column
decision_at: string | null; // generated column
// present when you join members (e.g., SELECT a.*, m.name AS member_name)
member_name: string;
}
export interface CommentRow {
comment_id: number;
post_content: string;
poster_id: number;
post_time: string;
last_modified: string | null;
poster_name: string;
}
export interface ApplicationFull {
application: ApplicationRow;
comments: CommentRow[];
}
export enum ApplicationStatus {
Pending = "Pending",
Accepted = "Accepted",
Denied = "Denied",
}
// @ts-ignore // @ts-ignore
const addr = import.meta.env.VITE_APIHOST; const addr = import.meta.env.VITE_APIHOST;
export async function loadApplication(id: number | string, asAdmin: boolean = false): Promise<ApplicationFull | null> { export async function loadApplication(id: number | string): Promise<ApplicationFull | null> {
const res = await fetch(`${addr}/application/${id}?admin=${asAdmin}`, { credentials: 'include' }) const res = await fetch(`${addr}/application/${id}`, { credentials: 'include' })
if (res.status === 204) return null if (res.status === 204) return null
if (!res.ok) throw new Error('Failed to load application') if (!res.ok) throw new Error('Failed to load application')
const json = await res.json() const json = await res.json()
@@ -35,22 +104,6 @@ export async function postChatMessage(message: any, post_id: number) {
const response = await fetch(`${addr}/application/${post_id}/comment`, { const response = await fetch(`${addr}/application/${post_id}/comment`, {
method: 'POST', method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(out),
})
return await response.json();
}
export async function postAdminChatMessage(message: any, post_id: number) {
const out = {
message: message
}
const response = await fetch(`${addr}/application/${post_id}/adminComment`, {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(out), body: JSON.stringify(out),
}) })
@@ -59,9 +112,7 @@ export async function postAdminChatMessage(message: any, post_id: number) {
} }
export async function getAllApplications(): Promise<ApplicationFull> { export async function getAllApplications(): Promise<ApplicationFull> {
const res = await fetch(`${addr}/application/all`, { const res = await fetch(`${addr}/application/all`)
credentials: 'include',
})
if (res.ok) { if (res.ok) {
return res.json() return res.json()
@@ -70,28 +121,8 @@ export async function getAllApplications(): Promise<ApplicationFull> {
} }
} }
export async function loadMyApplications(): Promise<ApplicationFull> {
const res = await fetch(`${addr}/application/meList`, { credentials: 'include' })
if (res.ok) {
return res.json()
} else {
console.error("Something went wrong approving the application")
}
}
export async function getMyApplication(id: number): Promise<ApplicationFull> {
const res = await fetch(`${addr}/application/me/${id}`, { credentials: 'include' })
if (res.status === 204) return null
if (res.status === 403) throw new Error("Unauthorized");
if (!res.ok) throw new Error('Failed to load application')
const json = await res.json()
// Accept either the object at root or under `application`
return json;
}
export async function approveApplication(id: Number) { export async function approveApplication(id: Number) {
const res = await fetch(`${addr}/application/approve/${id}`, { method: 'POST', credentials: 'include' }) const res = await fetch(`${addr}/application/approve/${id}`, { method: 'POST' })
if (!res.ok) { if (!res.ok) {
console.error("Something went wrong approving the application") console.error("Something went wrong approving the application")
@@ -99,36 +130,9 @@ export async function approveApplication(id: Number) {
} }
export async function denyApplication(id: Number) { export async function denyApplication(id: Number) {
const res = await fetch(`${addr}/application/deny/${id}`, { method: 'POST', credentials: 'include' }) const res = await fetch(`${addr}/application/deny/${id}`, { method: 'POST' })
if (!res.ok) { if (!res.ok) {
console.error("Something went wrong denying the application") console.error("Something went wrong denying the application")
} }
} }
export async function restartApplication() {
const res = await fetch(`${addr}/application/restart`, {
method: 'POST',
credentials: 'include'
})
if (!res.ok) {
console.error("Something went wrong restarting your application")
}
}
export async function getCoC(): Promise<string> {
const res = await fetch(`${addr}/application/coc`, {
method: "GET",
credentials: 'include',
});
if (res.ok) {
const out = res.json();
if (!out) {
return null;
}
return out;
} else {
return null;
}
}

112
ui/src/api/loa.ts
View File

@@ -1,4 +1,12 @@
import { LOARequest, LOAType } from '@shared/types/loa' export type LOARequest = {
id?: number;
name?: string;
member_id: number;
filed_date: string; // ISO 8601 string
start_date: string; // ISO 8601 string
end_date: string; // ISO 8601 string
reason?: string;
};
// @ts-ignore // @ts-ignore
const addr = import.meta.env.VITE_APIHOST; const addr = import.meta.env.VITE_APIHOST;
@@ -9,24 +17,6 @@ export async function submitLOA(request: LOARequest): Promise<{ id?: number; err
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify(request), body: JSON.stringify(request),
credentials: 'include',
});
if (res.ok) {
return;
} else {
throw new Error("Failed to submit LOA");
}
}
export async function adminSubmitLOA(request: LOARequest): Promise<{ id?: number; error?: string }> {
const res = await fetch(`${addr}/loa/admin`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(request),
credentials: 'include',
}); });
if (res.ok) { if (res.ok) {
@@ -36,14 +26,12 @@ export async function adminSubmitLOA(request: LOARequest): Promise<{ id?: number
} }
} }
export async function getMyLOA(): Promise<LOARequest | null> { export async function getMyLOA(): Promise<LOARequest | null> {
const res = await fetch(`${addr}/loa/me`, { const res = await fetch(`${addr}/loa/me`, {
method: "GET", method: "GET",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
credentials: 'include',
}); });
@@ -64,7 +52,6 @@ export function getAllLOAs(): Promise<LOARequest[]> {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
credentials: 'include',
}).then((res) => { }).then((res) => {
if (res.ok) { if (res.ok) {
return res.json(); return res.json();
@@ -73,84 +60,3 @@ export function getAllLOAs(): Promise<LOARequest[]> {
} }
}); });
} }
export function getMyLOAs(): Promise<LOARequest[]> {
return fetch(`${addr}/loa/history`, {
method: "GET",
credentials: 'include',
headers: {
"Content-Type": "application/json",
},
}).then((res) => {
if (res.ok) {
return res.json();
} else {
return [];
}
});
}
export async function getLoaTypes(): Promise<LOAType[]> {
const res = await fetch(`${addr}/loa/types`, {
method: "GET",
credentials: 'include',
});
if (res.ok) {
const out = res.json();
if (!out) {
return null;
}
return out;
} else {
return null;
}
};
export async function getLoaPolicy(): Promise<string> {
const res = await fetch(`${addr}/loa/policy`, {
method: "GET",
credentials: 'include',
});
if (res.ok) {
const out = res.json();
if (!out) {
return null;
}
return out;
} else {
return null;
}
}
export async function cancelLOA(id: number, admin: boolean = false) {
let route = admin ? 'adminCancel' : 'cancel';
const res = await fetch(`${addr}/loa/${route}/${id}`, {
method: "POST",
credentials: 'include',
});
if (res.ok) {
return
} else {
throw new Error("Could not cancel LOA");
}
}
export async function extendLOA(id: number, to: Date) {
const res = await fetch(`${addr}/loa/extend/${id}`, {
method: "POST",
credentials: 'include',
body: JSON.stringify({ to }),
headers: {
"Content-Type": "application/json",
}
});
if (res.ok) {
return
} else {
throw new Error("Could not extend LOA");
}
}

72
ui/src/api/member.ts
View File

@@ -1,4 +1,12 @@
import { memberSettings, Member, MemberLight } from "@shared/types/member"; export type Member = {
member_id: number;
member_name: string;
rank: string | null;
rank_date: string | null;
status: string | null;
status_date: string | null;
on_loa: boolean | null;
};
// @ts-ignore // @ts-ignore
const addr = import.meta.env.VITE_APIHOST; const addr = import.meta.env.VITE_APIHOST;
@@ -12,65 +20,3 @@ export async function getMembers(): Promise<Member[]> {
} }
return response.json(); 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();
}

16
ui/src/api/trainingReport.ts
View File

@@ -4,9 +4,7 @@ import { Course, CourseAttendeeRole, CourseEventDetails, CourseEventSummary } fr
const addr = import.meta.env.VITE_APIHOST; const addr = import.meta.env.VITE_APIHOST;
export async function getTrainingReports(sortMode: string, search: string): Promise<CourseEventSummary[]> { export async function getTrainingReports(sortMode: string, search: string): Promise<CourseEventSummary[]> {
const res = await fetch(`${addr}/courseEvent?sort=${sortMode}&search=${search}`, { const res = await fetch(`${addr}/courseEvent?sort=${sortMode}&search=${search}`);
credentials: 'include',
});
if (res.ok) { if (res.ok) {
return await res.json() as Promise<CourseEventSummary[]>; return await res.json() as Promise<CourseEventSummary[]>;
@@ -17,9 +15,7 @@ export async function getTrainingReports(sortMode: string, search: string): Prom
} }
export async function getTrainingReport(id: number): Promise<CourseEventDetails> { export async function getTrainingReport(id: number): Promise<CourseEventDetails> {
const res = await fetch(`${addr}/courseEvent/${id}`, { const res = await fetch(`${addr}/courseEvent/${id}`);
credentials: 'include',
});
if (res.ok) { if (res.ok) {
return await res.json() as Promise<CourseEventDetails>; return await res.json() as Promise<CourseEventDetails>;
@@ -30,9 +26,7 @@ export async function getTrainingReport(id: number): Promise<CourseEventDetails>
} }
export async function getAllTrainings(): Promise<Course[]> { export async function getAllTrainings(): Promise<Course[]> {
const res = await fetch(`${addr}/course`, { const res = await fetch(`${addr}/course`);
credentials: 'include',
});
if (res.ok) { if (res.ok) {
return await res.json() as Promise<Course[]>; return await res.json() as Promise<Course[]>;
@@ -43,9 +37,7 @@ export async function getAllTrainings(): Promise<Course[]> {
} }
export async function getAllAttendeeRoles(): Promise<CourseAttendeeRole[]> { export async function getAllAttendeeRoles(): Promise<CourseAttendeeRole[]> {
const res = await fetch(`${addr}/course/roles`, { const res = await fetch(`${addr}/course/roles`);
credentials: 'include',
});
if (res.ok) { if (res.ok) {
return await res.json() as Promise<CourseAttendeeRole[]>; return await res.json() as Promise<CourseAttendeeRole[]>;

108
ui/src/assets/base.css
View File

@@ -166,111 +166,3 @@
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
/* Root container */
.bookstack-container {
font-family: var(--font-sans, system-ui), sans-serif;
color: var(--foreground);
line-height: 1.45;
max-width: 760px;
margin: 0 auto;
font-size: 0.9rem;
}
/* Headers */
.bookstack-container h4 {
margin: 0.9rem 0 0.4rem 0;
font-weight: 600;
line-height: 1.35;
font-size: 1.05rem;
color: var(--foreground);
}
.bookstack-container h5 {
margin: 0.9rem 0 0.4rem 0;
font-weight: 600;
line-height: 1.35;
font-size: 0.95rem;
color: var(--foreground);
}
/* Lists */
.bookstack-container ul {
list-style-type: disc;
margin-left: 1.1rem;
margin-bottom: 0.6rem;
padding-left: 0.6rem;
color: var(--muted-foreground);
}
/* Nested lists */
.bookstack-container ul ul {
list-style-type: circle;
margin-left: 0.9rem;
}
/* List items */
.bookstack-container li {
margin: 0.15rem 0;
padding-left: 0.1rem;
color: var(--muted-foreground);
}
/* Bullet color */
.bookstack-container li::marker {
color: var(--muted-foreground);
}
/* Inline elements */
.bookstack-container li p,
.bookstack-container li span,
.bookstack-container p {
display: inline;
margin: 0;
padding: 0;
color: var(--muted-foreground);
}
/* Top-level spacing */
.bookstack-container>ul>li {
margin-top: 0.3rem;
}
/* links */
.bookstack-container a {
color: var(--color-primary);
margin-top: 0.3rem;
}
.bookstack-container a:hover {
text-decoration: underline;
}
/* Scrollbar stuff */
/* Firefox */
.scrollbar-themed {
scrollbar-width: thin;
scrollbar-color: #555 #1f1f1f;
padding-right: 6px;
}
/* Chrome, Edge, Safari */
.scrollbar-themed::-webkit-scrollbar {
width: 10px;
/* slightly wider to allow padding look */
}
.scrollbar-themed::-webkit-scrollbar-track {
background: #1f1f1f;
margin-left: 6px;
/* ❗ adds space between content + scrollbar */
}
.scrollbar-themed::-webkit-scrollbar-thumb {
background: #555;
border-radius: 9999px;
}
.scrollbar-themed::-webkit-scrollbar-thumb:hover {
background: #777;
}

26
ui/src/components/Navigation/Navbar.vue
View File

@@ -18,17 +18,13 @@ import NavigationMenuTrigger from '../ui/navigation-menu/NavigationMenuTrigger.v
import NavigationMenuContent from '../ui/navigation-menu/NavigationMenuContent.vue'; import NavigationMenuContent from '../ui/navigation-menu/NavigationMenuContent.vue';
import { navigationMenuTriggerStyle } from '../ui/navigation-menu/' import { navigationMenuTriggerStyle } from '../ui/navigation-menu/'
import { useAuth } from '@/composables/useAuth'; import { useAuth } from '@/composables/useAuth';
import { ArrowUpRight, CircleArrowOutUpRight } from 'lucide-vue-next'; import { 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 userStore = useUserStore();
const auth = useAuth(); const auth = useAuth();
//@ts-ignore //@ts-ignore
const APIHOST = import.meta.env.VITE_APIHOST; const APIHOST = import.meta.env.VITE_APIHOST;
//@ts-ignore
const DOCHOST = import.meta.env.VITE_DOCHOST;
async function logout() { async function logout() {
userStore.user = null; userStore.user = null;
@@ -62,15 +58,10 @@ function blurAfter() {
</NavigationMenuLink> </NavigationMenuLink>
</NavigationMenuItem> </NavigationMenuItem>
<!-- Docs --> <!-- Members -->
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()"> <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
<a href="https://docs.iceberg-gaming.com" target="_blank"> <RouterLink to="/" @click="blurAfter">Documents</RouterLink>
<span class="flex items-center gap-1">
Documents
<ArrowUpRight class="h-4 w-4" />
</span>
</a>
</NavigationMenuLink> </NavigationMenuLink>
</NavigationMenuItem> </NavigationMenuItem>
@@ -165,12 +156,6 @@ function blurAfter() {
<RouterLink to="/join" @click="blurAfter">Join</RouterLink> <RouterLink to="/join" @click="blurAfter">Join</RouterLink>
</NavigationMenuLink> </NavigationMenuLink>
</NavigationMenuItem> </NavigationMenuItem>
<!-- Calendar -->
<NavigationMenuItem>
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
<RouterLink to="/calendar" @click="blurAfter">Calendar</RouterLink>
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
</div> </div>
@@ -182,12 +167,9 @@ function blurAfter() {
<p>{{ userStore.user.name }}</p> <p>{{ userStore.user.name }}</p>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem @click="$router.push('/profile')">My Profile</DropdownMenuItem> <!-- <DropdownMenuItem>My Profile</DropdownMenuItem> -->
<DropdownMenuSeparator></DropdownMenuSeparator>
<!-- <DropdownMenuItem>Settings</DropdownMenuItem> --> <!-- <DropdownMenuItem>Settings</DropdownMenuItem> -->
<DropdownMenuItem @click="$router.push('/join')">My Application</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> <DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

36
ui/src/components/application/ApplicationChat.vue
View File

@@ -11,22 +11,13 @@ import {
import Textarea from '@/components/ui/textarea/Textarea.vue' import Textarea from '@/components/ui/textarea/Textarea.vue'
import { toTypedSchema } from '@vee-validate/zod' import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod' import * as z from 'zod'
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 = withDefaults(defineProps<{ const props = defineProps<{
messages: CommentRow[] messages: Array<Record<string, any>>
adminMode?: boolean }>()
}>(), {
adminMode: false,
})
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'post', text: string): void (e: 'post', text: string): void
(e: 'postInternal', text: string): void
}>() }>()
const commentSchema = toTypedSchema( const commentSchema = toTypedSchema(
@@ -35,13 +26,8 @@ const commentSchema = toTypedSchema(
}) })
) )
const submitMode = ref("public");
// vee-validate passes (values, actions) to @submit // vee-validate passes (values, actions) to @submit
function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => void }) { function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => void }) {
if (submitMode.value === "internal")
emit('postInternal', values.text.trim())
else
emit('post', values.text.trim()) emit('post', values.text.trim())
resetForm() resetForm()
} }
@@ -62,24 +48,18 @@ function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => vo
</FormField> </FormField>
<!-- Button below, right-aligned --> <!-- Button below, right-aligned -->
<div class="mt-2 flex justify-end gap-2"> <div class="mt-2 flex justify-end">
<Button v-if="adminMode" type="submit" @click="submitMode = 'internal'" variant="outline">Post (Internal)</Button> <Button type="submit">Post</Button>
<Button type="submit" @click="submitMode = 'public'">Post (Public)</Button>
</div> </div>
</Form> </Form>
<!-- Existing posts --> <!-- Existing posts -->
<div class="space-y-3"> <div class="space-y-3">
<div v-for="(message, i) in props.messages" :key="message.comment_id ?? i" class="rounded-md border p-3 space-y-5" <div v-for="(message, i) in props.messages" :key="message.id ?? i"
:class="message.admin_only ? 'border-amber-300/70' : 'border-neutral-800'"> class="rounded-md border border-neutral-800 p-3 space-y-5">
<!-- Comment header --> <!-- Comment header -->
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex"> <p>{{ message.poster_name }}</p>
<MemberCard :member-id="message.poster_id"></MemberCard>
<p v-if="message.admin_only" class="flex">
<Dot /><span class="text-amber-300">Internal</span>
</p>
</div>
<p class="text-muted-foreground">{{ new Date(message.post_time).toLocaleString("EN-us", { <p class="text-muted-foreground">{{ new Date(message.post_time).toLocaleString("EN-us", {
year: "numeric", year: "numeric",
month: "long", month: "long",

142
ui/src/components/application/ApplicationForm.vue
View File

@@ -13,38 +13,26 @@ import Input from '@/components/ui/input/Input.vue';
import Textarea from '@/components/ui/textarea/Textarea.vue'; import Textarea from '@/components/ui/textarea/Textarea.vue';
import { toTypedSchema } from '@vee-validate/zod'; import { toTypedSchema } from '@vee-validate/zod';
import { Form } from 'vee-validate'; import { Form } from 'vee-validate';
import { nextTick, onMounted, ref, watch } from 'vue'; import { onMounted, ref } from 'vue';
import * as z from 'zod'; import * as z from 'zod';
import DateInput from '../form/DateInput.vue'; import DateInput from '../form/DateInput.vue';
import { ApplicationData } from '@shared/types/application'; import { ApplicationData } from '@/api/application';
import Dialog from '../ui/dialog/Dialog.vue';
import DialogTrigger from '../ui/dialog/DialogTrigger.vue';
import DialogContent from '../ui/dialog/DialogContent.vue';
import DialogHeader from '../ui/dialog/DialogHeader.vue';
import DialogTitle from '../ui/dialog/DialogTitle.vue';
import DialogDescription from '../ui/dialog/DialogDescription.vue';
import { getCoC } from '@/api/application';
import { startBrowserTracingPageLoadSpan } from '@sentry/vue';
const regexA = /^https?:\/\/steamcommunity\.com\/id\/[A-Za-z0-9_]+\/?$/;
const regexB = /^https?:\/\/steamcommunity\.com\/profiles\/\d+\/?$/;
const formSchema = toTypedSchema(z.object({ const formSchema = toTypedSchema(z.object({
dob: z.string().refine(v => v, { message: "A date of birth is required." }), dob: z.string().refine(v => v, { message: "A date of birth is required." }),
name: z.string().nonempty(), name: z.string(),
playtime: z.coerce.number({ invalid_type_error: "Must be a number", }).min(0, "Cannot be less than 0"), playtime: z.coerce.number({ invalid_type_error: "Must be a number", }).min(0, "Cannot be less than 0"),
hobbies: z.string().nonempty(), hobbies: z.string(),
military: z.boolean(), military: z.boolean(),
communities: z.string().nonempty(), communities: z.string(),
joinReason: z.string().nonempty(), joinReason: z.string(),
milsimAttraction: z.string().nonempty(), milsimAttraction: z.string(),
referral: z.string().nonempty(), referral: z.string(),
steamProfile: z.string().nonempty().refine((val) => regexA.test(val) || regexB.test(val), { message: "Invalid Steam profile URL." }), steamProfile: z.string(),
timezone: z.string().nonempty(), timezone: z.string(),
canAttendSaturday: z.boolean(), canAttendSaturday: z.boolean(),
interests: z.string().nonempty(), interests: z.string(),
acknowledgeRules: z.literal(true, { aknowledgeRules: z.literal(true, {
errorMap: () => ({ message: "Required" }) errorMap: () => ({ message: "Required" })
}), }),
})) }))
@@ -53,7 +41,7 @@ const formSchema = toTypedSchema(z.object({
const fallbackInitials = { const fallbackInitials = {
military: false, military: false,
canAttendSaturday: false, canAttendSaturday: false,
acknowledgeRules: false, aknowledgeRules: false,
} }
const props = defineProps<{ const props = defineProps<{
@@ -69,7 +57,7 @@ async function onSubmit(val: any) {
emit('submit', val); emit('submit', val);
} }
onMounted(async () => { onMounted(() => {
if (props.data !== null) { if (props.data !== null) {
const parsed = typeof props.data === "string" const parsed = typeof props.data === "string"
? JSON.parse(props.data) ? JSON.parse(props.data)
@@ -79,35 +67,8 @@ onMounted(async () => {
} else { } else {
initialValues.value = { ...fallbackInitials }; initialValues.value = { ...fallbackInitials };
} }
// CoCbox.value.innerHTML = await getCoC()
CoCString.value = await getCoC();
}) })
const showCoC = ref(false);
const CoCbox = ref<HTMLElement>();
const CoCString = ref<string>();
async function onDialogToggle(state: boolean) {
showCoC.value = state;
}
function enforceExternalLinks() {
if (!CoCbox.value) return;
const links = CoCbox.value.querySelectorAll("a");
links.forEach(a => {
a.setAttribute("target", "_blank");
a.setAttribute("rel", "noopener noreferrer");
});
}
watch(() => showCoC.value, async () => {
if (showCoC) {
await nextTick(); // wait for v-html to update
enforceExternalLinks();
}
});
</script> </script>
@@ -121,9 +82,7 @@ watch(() => showCoC.value, async () => {
<FormControl> <FormControl>
<DateInput :model-value="(value as string) ?? ''" :disabled="readOnly" @update:model-value="handleChange" /> <DateInput :model-value="(value as string) ?? ''" :disabled="readOnly" @update:model-value="handleChange" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -135,9 +94,7 @@ watch(() => showCoC.value, async () => {
<FormControl> <FormControl>
<Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" /> <Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -148,9 +105,7 @@ watch(() => showCoC.value, async () => {
<FormControl> <FormControl>
<Input type="number" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" /> <Input type="number" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -162,9 +117,7 @@ watch(() => showCoC.value, async () => {
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" /> :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -178,9 +131,7 @@ watch(() => showCoC.value, async () => {
<span>Yes (checked) / No (unchecked)</span> <span>Yes (checked) / No (unchecked)</span>
</div> </div>
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -191,9 +142,7 @@ watch(() => showCoC.value, async () => {
<FormControl> <FormControl>
<Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" /> <Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -205,9 +154,7 @@ watch(() => showCoC.value, async () => {
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" /> :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -219,9 +166,7 @@ watch(() => showCoC.value, async () => {
<Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" /> :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -233,9 +178,7 @@ watch(() => showCoC.value, async () => {
<Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange" <Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" /> :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -251,9 +194,7 @@ watch(() => showCoC.value, async () => {
<Input type="url" placeholder="https://steamcommunity.com/profiles/7656119..." :model-value="value" <Input type="url" placeholder="https://steamcommunity.com/profiles/7656119..." :model-value="value"
@update:model-value="handleChange" :disabled="readOnly" /> @update:model-value="handleChange" :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -265,9 +206,7 @@ watch(() => showCoC.value, async () => {
<Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange" <Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" /> :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -281,9 +220,7 @@ watch(() => showCoC.value, async () => {
<span>Yes (checked) / No (unchecked)</span> <span>Yes (checked) / No (unchecked)</span>
</div> </div>
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
@@ -295,44 +232,27 @@ watch(() => showCoC.value, async () => {
<Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange" <Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange"
:disabled="readOnly" /> :disabled="readOnly" />
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
<!-- Code of Conduct (boolean, field name kept as-is) --> <!-- Code of Conduct (boolean, field name kept as-is) -->
<FormField name="acknowledgeRules" v-slot="{ value, handleChange }"> <FormField name="aknowledgeRules" v-slot="{ value, handleChange }">
<FormItem> <FormItem>
<FormLabel>Community Code of Conduct</FormLabel> <FormLabel>Community Code of Conduct</FormLabel>
<FormControl> <FormControl>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Checkbox :model-value="value" @update:model-value="handleChange" :disabled="readOnly" /> <Checkbox :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
<span>By checking this box, you accept the <Button variant="link" class="p-0 h-min" <span>By checking this box, you accept the <Button variant="link" class="p-0">Code of
@click.prevent.stop="showCoC = true">Code of
Conduct</Button>.</span> Conduct</Button>.</span>
</div> </div>
</FormControl> </FormControl>
<div class="h-4"> <FormMessage />
<FormMessage class="text-destructive" />
</div>
</FormItem> </FormItem>
</FormField> </FormField>
<div class="pt-2" v-if="!readOnly"> <div class="pt-2" v-if="!readOnly">
<Button type="submit" :disabled="readOnly">Submit Application</Button> <Button type="submit" :onClick="() => console.log('hi')" :disabled="readOnly">Submit Application</Button>
</div> </div>
<Dialog :open="showCoC" @update:open="onDialogToggle">
<DialogContent class="sm:max-w-fit">
<DialogHeader>
<DialogTitle>Community Code of Conduct</DialogTitle>
<DialogDescription class="w-full max-h-[75vh] overflow-y-auto scrollbar-themed">
<div v-html="CoCString" ref="CoCbox" class="bookstack-container w-full"></div>
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
</Form> </Form>
</template> </template>

224
ui/src/components/calendar/ViewCalendarEvent.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar' import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
import { CircleAlert, Clock4, EllipsisVertical, MapPin, User, X } from 'lucide-vue-next'; import { CircleAlert, Clock, EllipsisVertical, MapPin, User, X } from 'lucide-vue-next';
import { computed, ref, watch } from 'vue'; import { computed, onMounted, ref, watch } from 'vue';
import ButtonGroup from '../ui/button-group/ButtonGroup.vue'; import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
import Button from '../ui/button/Button.vue'; import Button from '../ui/button/Button.vue';
import { CalendarAttendance, getCalendarEvent, setCalendarEventAttendance, setCancelCalendarEvent } from '@/api/calendar'; import { CalendarAttendance, getCalendarEvent, setCalendarEventAttendance, setCancelCalendarEvent } from '@/api/calendar';
@@ -11,14 +11,24 @@ import DropdownMenu from '../ui/dropdown-menu/DropdownMenu.vue';
import DropdownMenuTrigger from '../ui/dropdown-menu/DropdownMenuTrigger.vue'; import DropdownMenuTrigger from '../ui/dropdown-menu/DropdownMenuTrigger.vue';
import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue'; import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue';
import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue'; import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
import { Calendar } from 'lucide-vue-next';
import MemberCard from '../members/MemberCard.vue';
const route = useRoute(); const route = useRoute();
// const eventID = computed(() => {
// const id = route.params.id;
// if (typeof id === 'string') return id;
// return undefined;
// });
const loaded = ref<boolean>(false); const loaded = ref<boolean>(false);
const activeEvent = ref<CalendarEvent | null>(null); const activeEvent = ref<CalendarEvent | null>(null);
// onMounted(async () => {
// let eventID = route.params.id;
// console.log(eventID);
// activeEvent.value = await getCalendarEvent(Number(eventID));
// loaded.value = true;
// });
watch( watch(
() => route.params.id, () => route.params.id,
async (id) => { async (id) => {
@@ -35,27 +45,23 @@ const emit = defineEmits<{
(e: 'edit', event: CalendarEvent): void (e: 'edit', event: CalendarEvent): void
}>() }>()
const dateFmt = new Intl.DateTimeFormat(undefined, { // const activeEvent = computed(() => props.event)
weekday: 'long', month: 'short', day: 'numeric',
})
const timeFmt = new Intl.DateTimeFormat(undefined, { 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' hour: 'numeric', minute: '2-digit'
}) })
const dateText = computed(() => { const whenText = computed(() => {
let start = dateFmt.format(new Date(activeEvent.value.start)); if (!activeEvent.value?.start) return ''
let end = dateFmt.format(new Date(activeEvent.value.end)); const s = new Date(activeEvent.value.start)
if (start === end) const e = activeEvent.value?.end ? new Date(activeEvent.value.end) : null
return start; return e
else ? `${startFmt.format(s)} – ${endFmt.format(e)}`
return `${start} - ${end}`; : `${startFmt.format(s)}`
})
const timeText = computed(() => {
let startTime = timeFmt.format(new Date(activeEvent.value.start))
let endTime = timeFmt.format(new Date(activeEvent.value.end))
return [startTime, endTime]
}) })
const attending = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.Attending) }) const attending = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.Attending) })
@@ -65,7 +71,6 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
let user = useUserStore(); let user = useUserStore();
const myAttendance = computed<CalendarSignup | null>(() => { const myAttendance = computed<CalendarSignup | null>(() => {
if (!user.isLoggedIn) return null;
return activeEvent.value.eventSignups.find( return activeEvent.value.eventSignups.find(
(s) => s.member_id === user.user.id (s) => s.member_id === user.user.id
) || null; ) || null;
@@ -78,7 +83,6 @@ async function setAttendance(state: CalendarAttendance) {
} }
const canEditEvent = computed(() => { const canEditEvent = computed(() => {
if (!user.isLoggedIn) return false;
if (user.user.id == activeEvent.value.creator_id) if (user.user.id == activeEvent.value.creator_id)
return true; return true;
}); });
@@ -93,94 +97,17 @@ async function forceReload() {
activeEvent.value = await getCalendarEvent(activeEvent.value.id); activeEvent.value = await getCalendarEvent(activeEvent.value.id);
} }
const isPast = computed(() => { defineExpose({forceReload})
const end = new Date(activeEvent.value.end)
// is current date later than end date
return new Date() < end;
})
const attendanceTab = ref<"Alpha" | "Echo" | "Other">("Alpha");
const attendanceList = computed<CalendarSignup[]>(() => {
let out: CalendarSignup[] = [];
if (attendanceTab.value === 'Alpha') {
out = activeEvent.value.eventSignups?.filter((s) => s.member_unit === 'Alpha Company');
} else if (attendanceTab.value === 'Echo') {
out = activeEvent.value.eventSignups?.filter((s) => s.member_unit === 'Echo Company')
} else {
out = activeEvent.value.eventSignups?.filter((s) => s.member_unit != 'Alpha Company' && s.member_unit != 'Echo Company')
}
const statusOrder: Record<CalendarAttendance, number> = {
[CalendarAttendance.Attending]: 1,
[CalendarAttendance.Maybe]: 2,
[CalendarAttendance.NotAttending]: 3,
};
out.sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
return out;
})
const attendanceCountsByGroup = computed(() => {
const signups = activeEvent.value.eventSignups ?? [];
return {
Alpha: signups.filter(s => s.member_unit === "Alpha Company").length,
Echo: signups.filter(s => s.member_unit === "Echo Company").length,
Other: signups.filter(s =>
s.member_unit !== "Alpha Company" &&
s.member_unit !== "Echo Company"
).length,
};
});
const attendanceStatusSummary = computed(() => {
const signups = activeEvent.value.eventSignups ?? [];
return {
attending: signups.filter(s => s.status === CalendarAttendance.Attending).length,
maybe: signups.filter(s => s.status === CalendarAttendance.Maybe).length,
notAttending: signups.filter(s => s.status === CalendarAttendance.NotAttending).length,
};
});
const statusColor = (status: CalendarAttendance) => {
switch (status) {
case CalendarAttendance.Attending:
return "text-success";
case CalendarAttendance.Maybe:
return "text-yellow-600";
case CalendarAttendance.NotAttending:
return "text-destructive";
default:
return "";
}
};
const displayStatus = (status: CalendarAttendance) => {
switch (status) {
case CalendarAttendance.Attending:
return "Attending";
case CalendarAttendance.Maybe:
return "Maybe";
case CalendarAttendance.NotAttending:
return "Declined";
default:
return status;
}
};
defineExpose({ forceReload })
</script> </script>
<template> <template>
<div v-if="loaded"> <div v-if="loaded">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between gap-3 border-b px-4 py-3 h-14"> <div class="flex items-center justify-between gap-3 border-b px-4 py-3">
<h2 class="text-lg font-semibold break-all"> <h2 class="text-lg font-semibold break-all">
{{ activeEvent?.name || 'Event' }} {{ activeEvent?.name || 'Event' }}
</h2> </h2>
<div class="flex gap-4 items-center"> <div class="flex gap-4">
<DropdownMenu v-if="canEditEvent"> <DropdownMenu v-if="canEditEvent">
<DropdownMenuTrigger> <DropdownMenuTrigger>
<button <button
@@ -192,7 +119,8 @@ defineExpose({ forceReload })
<DropdownMenuItem @click="emit('edit', activeEvent)"> <DropdownMenuItem @click="emit('edit', activeEvent)">
Edit Edit
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem v-if="activeEvent.cancelled" @click="setCancel(false)"> <DropdownMenuItem v-if="activeEvent.cancelled"
@click="setCancel(false)">
Un-Cancel Un-Cancel
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem v-else @click="setCancel(true)"> <DropdownMenuItem v-else @click="setCancel(true)">
@@ -214,7 +142,7 @@ defineExpose({ forceReload })
<CircleAlert></CircleAlert> This event has been cancelled <CircleAlert></CircleAlert> This event has been cancelled
</div> </div>
</section> </section>
<section v-if="isPast && user.isLoggedIn" class="w-full"> <section class="w-full">
<ButtonGroup class="flex w-full"> <ButtonGroup class="flex w-full">
<Button variant="outline" <Button variant="outline"
:class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''" :class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
@@ -227,22 +155,25 @@ defineExpose({ forceReload })
@click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button> @click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
</ButtonGroup> </ButtonGroup>
</section> </section>
<!-- Meta --> <!-- When -->
<section class="space-y-3 w-full"> <section v-if="whenText" class="space-y-2 w-full">
<p class="text-lg font-semibold">Details</p> <div class="inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm">
<div class="text-foreground/80 flex gap-3 items-center"> <Clock class="size-4 opacity-80" />
<Calendar :size="20"></Calendar> {{ dateText }} <span class="font-medium">{{ whenText }}</span>
</div>
<div class="text-foreground/80 flex gap-3 items-center">
<Clock4 :size="20"></Clock4> {{ timeText[0] }} - {{ timeText[1] }}
</div>
<div class="text-foreground/80 flex gap-3 items-center">
<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>
</div> </div>
</section> </section>
<!-- Quick meta chips -->
<section class="flex flex-wrap gap-2 w-full">
<span 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">{{ activeEvent.location || "Unknown" }}</span>
</span>
<span 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">Created by: {{ activeEvent.creator_name || "Unknown User"
}}</span>
</span>
</section>
<!-- Description --> <!-- Description -->
<section class="space-y-2 w-full"> <section class="space-y-2 w-full">
<p class="text-lg font-semibold">Description</p> <p class="text-lg font-semibold">Description</p>
@@ -250,43 +181,46 @@ defineExpose({ forceReload })
{{ activeEvent.description }} {{ activeEvent.description }}
</p> </p>
</section> </section>
<!-- attendance --> <!-- Attendance -->
<section class="space-y-2 w-full"> <section class="space-y-2 w-full">
<div class="flex items-center gap-5">
<p class="text-lg font-semibold">Attendance</p> <p class="text-lg font-semibold">Attendance</p>
<!-- <div class="text-muted-foreground flex gap-6">
<p>Going <span class="ml-1">{{ attendanceStatusSummary.attending }}</span></p>
<p>Maybe <span class="ml-1">{{ attendanceStatusSummary.maybe }}</span></p>
<p>Declined <span class="ml-1">{{ attendanceStatusSummary.notAttending }}</span></p>
</div> -->
</div>
<div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2"> <div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2">
<div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer"> <div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
<label :class="attendanceTab === 'Alpha' ? 'border-b-3 border-foreground' : 'mb-[2px]'" <label
@click="attendanceTab = 'Alpha'">Alpha {{ attendanceCountsByGroup.Alpha }}</label> :class="viewedState === CalendarAttendance.Attending ? 'border-b-3 border-foreground' : 'mb-[2px]'"
<label :class="attendanceTab === 'Echo' ? 'border-b-3 border-foreground' : 'mb-[2px]'" @click="viewedState = CalendarAttendance.Attending">Going {{ attending.length }}</label>
@click="attendanceTab = 'Echo'">Echo {{ attendanceCountsByGroup.Echo }}</label> <label
<label :class="attendanceTab === 'Other' ? 'border-b-3 border-foreground' : 'mb-[2px]'" :class="viewedState === CalendarAttendance.Maybe ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@click="attendanceTab = 'Other'">Other {{ attendanceCountsByGroup.Other }}</label> @click="viewedState = CalendarAttendance.Maybe">Maybe {{ maybe.length }}</label>
<label
:class="viewedState === CalendarAttendance.NotAttending ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@click="viewedState = CalendarAttendance.NotAttending">Declined {{ declined.length
}}</label>
</div> </div>
<div class="pb-1 min-h-48"> <div class="px-5 py-4 min-h-28">
<div class="grid grid-cols-2 font-semibold text-muted-foreground border-b py-1 px-3 mb-2"> <div v-if="viewedState === CalendarAttendance.Attending" v-for="person in attending">
<p>Name</p> <p>{{ person.member_name }}</p>
<p class="text-right">Status</p>
</div> </div>
<div v-if="viewedState === CalendarAttendance.Maybe" v-for="person in maybe">
<div v-for="person in attendanceList" :key="person.member_id" <p>{{ person.member_name }}</p>
class="grid grid-cols-2 py-1 *:px-3 hover:bg-muted">
<div>
<MemberCard :member-id="person.member_id"></MemberCard>
</div> </div>
<p :class="statusColor(person.status)" class="text-right"> <div v-if="viewedState === CalendarAttendance.NotAttending" v-for="person in declined">
{{ displayStatus(person.status) }} <p>{{ person.member_name }}</p>
</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</div> </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> -->
</div> </div>
</template> </template>

289
ui/src/components/loa/loaForm.vue
View File

@@ -1,47 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { Check, Search } from "lucide-vue-next" import { Check, Search } from "lucide-vue-next"
import { ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox" import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
import { computed, onMounted, ref, watch } from "vue"; import { onMounted, ref } from "vue";
import { Member, getMembers } from "@/api/member"; import { Member, getMembers } from "@/api/member";
import Button from "@/components/ui/button/Button.vue"; import Button from "@/components/ui/button/Button.vue";
import { import {
CalendarDate, CalendarDate,
DateFormatter, DateFormatter,
fromDate,
getLocalTimeZone, getLocalTimeZone,
parseDate,
today,
} from "@internationalized/date" } from "@internationalized/date"
import type { DateRange, DateValue } from "reka-ui" import type { DateRange } from "reka-ui"
import type { Ref } from "vue" import type { Ref } from "vue"
import Popover from "@/components/ui/popover/Popover.vue"; import Popover from "@/components/ui/popover/Popover.vue";
import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue"; import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
import PopoverContent from "@/components/ui/popover/PopoverContent.vue"; import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
import { RangeCalendar } from "@/components/ui/range-calendar"
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { CalendarIcon } from "lucide-vue-next" import { CalendarIcon } from "lucide-vue-next"
import Textarea from "@/components/ui/textarea/Textarea.vue"; import Textarea from "@/components/ui/textarea/Textarea.vue";
import { adminSubmitLOA, getLoaPolicy, getLoaTypes, submitLOA } from "@/api/loa"; // <-- import the submit function import { LOARequest, submitLOA } from "@/api/loa"; // <-- import the submit function
import { LOARequest, LOAType } from "@shared/types/loa";
import { useForm, Field as VeeField } from "vee-validate";
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
} from '@/components/ui/field'
import Combobox from "../ui/combobox/Combobox.vue";
import Select from "../ui/select/Select.vue";
import SelectTrigger from "../ui/select/SelectTrigger.vue";
import SelectValue from "../ui/select/SelectValue.vue";
import SelectContent from "../ui/select/SelectContent.vue";
import SelectItem from "../ui/select/SelectItem.vue";
import FieldError from "../ui/field/FieldError.vue";
const members = ref<Member[]>([]) const members = ref<Member[]>([])
const loaTypes = ref<LOAType[]>();
const policyString = ref<string | null>(null);
const currentMember = ref<Member | null>(null); const currentMember = ref<Member | null>(null);
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@@ -52,115 +31,102 @@ const props = withDefaults(defineProps<{
member: null, member: null,
}); });
const df = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
const userStore = useUserStore() const df = new DateFormatter("en-US", {
dateStyle: "medium",
//form stuff
import { loaSchema } from '@shared/schemas/loaSchema'
import { toTypedSchema } from "@vee-validate/zod";
import Calendar from "../ui/calendar/Calendar.vue";
import { useUserStore } from "@/stores/user";
const { handleSubmit, values, resetForm } = useForm({
validationSchema: toTypedSchema(loaSchema),
}) })
const onSubmit = handleSubmit(async (values) => { const value = ref({
console.log(values); // start: new CalendarDate(2022, 1, 20),
const out: LOARequest = { // end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
member_id: values.member_id, }) as Ref<DateRange>
start_date: values.start_date,
end_date: values.end_date, const reason = ref(""); // <-- reason for LOA
type_id: values.type.id, const submitting = ref(false);
reason: values.reason const submitError = ref<string | null>(null);
}; const submitSuccess = ref(false);
if (props.adminMode) {
await adminSubmitLOA(out);
} else {
await submitLOA(out);
userStore.loadUser();
}
})
onMounted(async () => { onMounted(async () => {
if (props.member) { if (props.member) {
currentMember.value = props.member; currentMember.value = props.member;
} }
try { if (props.adminMode) {
if (!props.adminMode) { members.value = await getMembers();
let policy = await getLoaPolicy() as any; }
policyString.value = policy;
policyRef.value.innerHTML = policyString.value;
}
} catch (error) {
console.error(error);
}
members.value = await getMembers(); members.value = await getMembers();
loaTypes.value = await getLoaTypes();
resetForm({ values: { member_id: currentMember.value?.member_id } });
}); });
const policyRef = ref<HTMLElement>(null); // Submit handler
async function handleSubmit() {
submitError.value = null;
submitSuccess.value = false;
submitting.value = true;
const defaultPlaceholder = today(getLocalTimeZone()) // Use currentMember if adminMode, otherwise use your own member id (stubbed as 89 here)
const member_id = currentMember.value?.member_id ?? 89;
const minEndDate = computed(() => { // Format dates as ISO strings
if (values.start_date) { const filed_date = toMariaDBDatetime(new Date());
return new CalendarDate(values.start_date.getFullYear(), values.start_date.getMonth() + 1, values.start_date.getDate()) const start_date = toMariaDBDatetime(value.value.start?.toDate(getLocalTimeZone()));
} else { const end_date = toMariaDBDatetime(value.value.end?.toDate(getLocalTimeZone()));
return null;
if (!member_id || !filed_date || !start_date || !end_date) {
submitError.value = "Missing required fields";
submitting.value = false;
return;
} }
})
const maxEndDate = computed(() => { const req: LOARequest = {
if (values.type && values.start_date) { filed_date,
let endDateObj = new Date(values.start_date.getTime() + values.type.max_length_days * 24 * 60 * 60 * 1000); start_date,
return new CalendarDate(endDateObj.getFullYear(), endDateObj.getMonth() + 1, endDateObj.getDate()) end_date,
reason: reason.value,
member_id
};
const result = await submitLOA(req);
submitting.value = false;
if (result.id) {
submitSuccess.value = true;
reason.value = "";
} else { } else {
return null; submitError.value = result.error || "Failed to submit LOA";
} }
}) }
function toMariaDBDatetime(date: Date): string {
return date.toISOString().slice(0, 19).replace('T', ' ');
}
</script> </script>
<template> <template>
<div class="flex flex-row-reverse gap-6 mx-auto w-full" :class="!adminMode ? 'max-w-5xl' : 'max-w-5xl'"> <div class="flex flex-row-reverse gap-6 mx-auto w-full" :class="!adminMode ? 'max-w-5xl' : 'max-w-5xl'">
<div v-if="!adminMode" class="flex-1 flex flex-col space-x-4 rounded-md border p-4"> <div v-if="!adminMode" class="flex-1 flex space-x-4 rounded-md border p-4">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Policy</p> <div class="flex-2 space-y-1">
<div ref="policyRef" class="bookstack-container"> <p class="text-sm font-medium leading-none">
<!-- LOA policy gets loaded here --> LOA Policy
</p>
<p class="text-sm text-muted-foreground">
Policy goes here.
</p>
</div> </div>
</div> </div>
<div class="flex-1 flex flex-col gap-5"> <div class="flex-1 flex flex-col gap-5">
<form @submit="onSubmit" class="flex flex-col gap-2"> <div class="flex w-full gap-5 ">
<div class="flex w-full gap-5"> <Combobox class="w-1/2" v-model="currentMember" :disabled="!adminMode">
<VeeField v-slot="{ field, errors }" name="member_id">
<Field>
<FieldContent>
<FieldLabel>Member</FieldLabel>
<Combobox :model-value="field.value" @update:model-value="field.onChange"
:disabled="!adminMode">
<ComboboxAnchor class="w-full"> <ComboboxAnchor class="w-full">
<ComboboxInput placeholder="Search members..." class="w-full pl-3" <ComboboxInput placeholder="Search members..." class="w-full pl-9"
:display-value="(id) => { :display-value="(v) => v ? v.member_name : ''" />
const m = members.find(mem => mem.member_id === id)
return m ? m.member_name : ''
}" />
</ComboboxAnchor> </ComboboxAnchor>
<ComboboxList class="*:w-64"> <ComboboxList class="w-full">
<ComboboxEmpty class="text-muted-foreground w-full">No results</ComboboxEmpty> <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
<ComboboxGroup> <ComboboxGroup>
<template v-for="member in members" :key="member.member_id"> <template v-for="member in members" :key="member.member_id">
<ComboboxItem :value="member.member_id" <ComboboxItem :value="member"
class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full"> class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
{{ member.member_name }} {{ member.member_name }}
<ComboboxItemIndicator <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
class="absolute left-2 inline-flex items-center">
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />
</ComboboxItemIndicator> </ComboboxItemIndicator>
</ComboboxItem> </ComboboxItem>
@@ -168,110 +134,39 @@ const maxEndDate = computed(() => {
</ComboboxGroup> </ComboboxGroup>
</ComboboxList> </ComboboxList>
</Combobox> </Combobox>
<div class="h-4">
<FieldError v-if="errors.length" :errors="errors"></FieldError>
</div>
</FieldContent>
</Field>
</VeeField>
<VeeField v-slot="{ field, errors }" name="type">
<Field class="w-full">
<FieldContent>
<FieldLabel>Type</FieldLabel>
<Select :model-value="field.value" @update:model-value="field.onChange">
<SelectTrigger class="w-full">
<SelectValue placeholder="Select type"></SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem v-for="type in loaTypes" :value="type">
{{ type.name }}
</SelectItem>
</SelectContent>
</Select>
<div class="h-4">
<FieldError v-if="errors.length" :errors="errors"></FieldError>
</div>
</FieldContent>
</Field>
</VeeField>
</div>
<div class="flex gap-5">
<VeeField v-slot="{ field, errors }" name="start_date">
<Field>
<FieldContent>
<FieldLabel>Start Date</FieldLabel>
<Popover> <Popover>
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Button variant="outline" :class="cn( <Button variant="outline" :class="cn(
'w-full justify-start text-left font-normal', 'w-1/2 justify-start text-left font-normal',
!field.value && 'text-muted-foreground', !value && 'text-muted-foreground',
)"> )">
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="mr-2 h-4 w-4" />
{{ field.value ? df.format(field.value) : "Pick a date" }} <template v-if="value.start">
<template v-if="value.end">
{{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{
df.format(value.end.toDate(getLocalTimeZone())) }}
</template>
<template v-else>
{{ df.format(value.start.toDate(getLocalTimeZone())) }}
</template>
</template>
<template v-else>
Pick a date
</template>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0"> <PopoverContent class="w-auto p-0">
<Calendar <RangeCalendar v-model="value" initial-focus :number-of-months="2"
:model-value="field.value @update:start-value="(startDate) => value.start = startDate" />
? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
@update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
layout="month-and-year" :min-value="today(getLocalTimeZone())" />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<div class="h-4">
<FieldError v-if="errors.length" :errors="errors"></FieldError>
</div>
</FieldContent>
</Field>
</VeeField>
<VeeField v-slot="{ field, errors }" name="end_date">
<Field>
<FieldContent>
<FieldLabel>End Date</FieldLabel>
<Popover>
<PopoverTrigger as-child>
<Button variant="outline" :class="cn(
'w-full justify-start text-left font-normal',
!field.value && 'text-muted-foreground',
)">
<CalendarIcon class="mr-2 h-4 w-4" />
{{ field.value ? df.format(field.value) : "Pick a date" }}
</Button>
</PopoverTrigger>
<PopoverContent class="w-auto p-0">
<Calendar
:model-value="field.value ? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
@update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
:default-placeholder="defaultPlaceholder" :min-value="minEndDate"
:max-value="maxEndDate" layout="month-and-year">
</Calendar>
</PopoverContent>
</Popover>
<div class="h-4">
<FieldError v-if="errors.length" :errors="errors"></FieldError>
</div>
</FieldContent>
</Field>
</VeeField>
</div>
<div>
<VeeField v-slot="{ field, errors }" name="reason">
<Field>
<FieldContent>
<FieldLabel>Reason</FieldLabel>
<Textarea :model-value="field.value" @update:model-value="field.onChange"
placeholder="Reason for LOA" class="resize-none h-28"></Textarea>
<div class="h-4">
<FieldError v-if="errors.length" :errors="errors"></FieldError>
</div>
</FieldContent>
</Field>
</VeeField>
</div> </div>
<Textarea v-model="reason" placeholder="Reason for LOA" class="w-full resize-none" />
<div class="flex justify-end"> <div class="flex justify-end">
<Button type="submit">Submit</Button> <Button :onClick="handleSubmit" :disabled="submitting" class="w-min">Submit</Button>
</div> </div>
</form> <div v-if="submitError" class="text-red-500 text-sm mt-2">{{ submitError }}</div>
<div v-if="submitSuccess" class="text-green-500 text-sm mt-2">LOA submitted successfully!</div>
</div> </div>
</div> </div>
</template> </template>

134
ui/src/components/loa/loaList.vue
View File

@@ -16,54 +16,30 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu" } from "@/components/ui/dropdown-menu"
import { Ellipsis } from "lucide-vue-next"; import { Ellipsis } from "lucide-vue-next";
import { cancelLOA, extendLOA, getAllLOAs, getMyLOAs } from "@/api/loa"; import { getAllLOAs, LOARequest } from "@/api/loa";
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import { LOARequest } from "@shared/types/loa";
import Dialog from "../ui/dialog/Dialog.vue";
import DialogTrigger from "../ui/dialog/DialogTrigger.vue";
import DialogContent from "../ui/dialog/DialogContent.vue";
import DialogHeader from "../ui/dialog/DialogHeader.vue";
import DialogTitle from "../ui/dialog/DialogTitle.vue";
import DialogDescription from "../ui/dialog/DialogDescription.vue";
import Button from "../ui/button/Button.vue";
import Calendar from "../ui/calendar/Calendar.vue";
import {
CalendarDate,
getLocalTimeZone,
} from "@internationalized/date"
import { el } from "@fullcalendar/core/internal-common";
import MemberCard from "../members/MemberCard.vue";
const props = defineProps<{
adminMode?: boolean
}>()
const LOAList = ref<LOARequest[]>([]); const LOAList = ref<LOARequest[]>([]);
onMounted(async () => { onMounted(async () => {
await loadLOAs(); LOAList.value = await getAllLOAs();
}); });
async function loadLOAs() { function formatDate(dateStr: string): string {
if (props.adminMode) { if (!dateStr) return "";
LOAList.value = await getAllLOAs(); return new Date(dateStr).toLocaleDateString("en-US", {
} else {
LOAList.value = await getMyLOAs();
}
}
function formatDate(date: Date): string {
if (!date) return "";
date = typeof date === 'string' ? new Date(date) : date;
return date.toLocaleDateString("en-US", {
year: "numeric", year: "numeric",
month: "short", month: "short",
day: "numeric", day: "numeric",
}); });
} }
function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed" { function loaStatus(loa: {
if (loa.closed) return "Closed"; start_date: string;
end_date: string;
deleted?: number;
}): "Upcoming" | "Active" | "Expired" | "Cancelled" {
if (loa.deleted) return "Cancelled";
const now = new Date(); const now = new Date();
const start = new Date(loa.start_date); const start = new Date(loa.start_date);
@@ -71,9 +47,9 @@ function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed
if (now < start) return "Upcoming"; if (now < start) return "Upcoming";
if (now >= start && now <= end) return "Active"; if (now >= start && now <= end) return "Active";
if (now > end) return "Overdue"; if (now > end) return "Expired";
return "Overdue"; // fallback return "Expired"; // fallback
} }
function sortByStartDate(loas: LOARequest[]): LOARequest[] { function sortByStartDate(loas: LOARequest[]): LOARequest[] {
@@ -82,108 +58,50 @@ function sortByStartDate(loas: LOARequest[]): LOARequest[] {
); );
} }
async function cancelAndReload(id: number) { const sortedLoas = computed(() => sortByStartDate(LOAList.value));
await cancelLOA(id, props.adminMode);
await loadLOAs();
}
const isExtending = ref(false);
const targetLOA = ref<LOARequest | null>(null);
const extendTo = ref<CalendarDate | null>(null);
const targetEnd = computed(() => { return targetLOA.value.extended_till ? targetLOA.value.extended_till : targetLOA.value.end_date })
function toCalendarDate(date: Date): CalendarDate {
if (typeof date === 'string')
date = new Date(date);
return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
}
async function commitExtend() {
await extendLOA(targetLOA.value.id, extendTo.value.toDate(getLocalTimeZone()));
isExtending.value = false;
await loadLOAs();
}
</script> </script>
<template> <template>
<div> <div class="w-5xl mx-auto">
<Dialog :open="isExtending" @update:open="(val) => isExtending = val">
<DialogContent>
<DialogHeader>
<DialogTitle>Extend {{ targetLOA.name }}'s Leave of Absence </DialogTitle>
</DialogHeader>
<div class="flex gap-5">
<Calendar v-model="extendTo" class="rounded-md border shadow-sm w-min" layout="month-and-year"
:min-value="toCalendarDate(targetEnd)"
:max-value="toCalendarDate(targetEnd).add({ years: 1 })" />
<div class="flex flex-col w-full gap-3 px-2">
<p>Quick Options</p>
<Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
Week</Button>
<Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
Month</Button>
</div>
</div>
<div class="flex justify-end gap-4">
<Button variant="outline" @click="isExtending = false">Cancel</Button>
<Button @click="commitExtend">Extend</Button>
</div>
</DialogContent>
</Dialog>
<div class="max-w-7xl w-full mx-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Member</TableHead> <TableHead class="w-[100px]">Member</TableHead>
<TableHead>Type</TableHead>
<TableHead>Start</TableHead> <TableHead>Start</TableHead>
<TableHead>End</TableHead> <TableHead>End</TableHead>
<TableHead class="w-[500px]">Reason</TableHead> <TableHead>Reason</TableHead>
<TableHead>Posted on</TableHead> <TableHead>Posted on</TableHead>
<TableHead>Status</TableHead> <TableHead>Status</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
<TableRow v-for="post in LOAList" :key="post.id" class="hover:bg-muted/50"> <TableRow v-for="post in sortedLoas" :key="post.id" class="hover:bg-muted/50">
<TableCell class="font-medium"> <TableCell class="font-medium">
<MemberCard :member-id="post.member_id"></MemberCard> {{ post.name }}
</TableCell> </TableCell>
<TableCell>{{ post.type_name }}</TableCell>
<TableCell>{{ formatDate(post.start_date) }}</TableCell> <TableCell>{{ formatDate(post.start_date) }}</TableCell>
<TableCell>{{ post.extended_till ? formatDate(post.extended_till) : formatDate(post.end_date) }} <TableCell>{{ formatDate(post.end_date) }}</TableCell>
</TableCell>
<TableCell>{{ post.reason }}</TableCell> <TableCell>{{ post.reason }}</TableCell>
<TableCell>{{ formatDate(post.filed_date) }}</TableCell> <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
<TableCell> <TableCell>
<Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-400">Upcoming</Badge> <Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-500">Upcoming</Badge>
<Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge> <Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
<Badge v-else-if="loaStatus(post) === 'Overdue'" class="bg-yellow-400">Overdue</Badge> <Badge v-else-if="loaStatus(post) === 'Expired'" class="bg-gray-400">Expired</Badge>
<Badge v-else class="bg-gray-400">Ended</Badge> <Badge v-else class="bg-red-500">Cancelled</Badge>
</TableCell> </TableCell>
<TableCell @click.stop="" class="text-right"> <TableCell @click.stop="console.log('hi')" class="text-right">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger class="cursor-pointer"> <DropdownMenuTrigger class="cursor-pointer">
<Ellipsis></Ellipsis> <Ellipsis></Ellipsis>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem v-if="!post.closed && props.adminMode" <DropdownMenuItem :variant="'destructive'">Cancel</DropdownMenuItem>
@click="isExtending = true; targetLOA = post">
Extend
</DropdownMenuItem>
<DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
@click="cancelAndReload(post.id)">End
</DropdownMenuItem>
<!-- Fallback: no actions available -->
<p v-if="post.closed || (!props.adminMode && post.closed)" class="p-2 text-center text-sm">
No actions
</p>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</div>
</template> </template>

153
ui/src/components/members/MemberCard.vue
View File

@@ -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>

164
ui/src/components/ui/calendar/Calendar.vue
View File

@@ -1,14 +1,7 @@
<script setup> <script setup>
import { getLocalTimeZone, today } from "@internationalized/date"; import { reactiveOmit } from "@vueuse/core";
import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core"; import { CalendarRoot, useForwardPropsEmits } from "reka-ui";
import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui";
import { createYear, createYearRange, toDate } from "reka-ui/date";
import { computed, toRaw } from "vue";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import {
NativeSelect,
NativeSelectOption,
} from '@/components/ui/native-select';
import { import {
CalendarCell, CalendarCell,
CalendarCellTrigger, CalendarCellTrigger,
@@ -45,165 +38,34 @@ const props = defineProps({
dir: { type: String, required: false }, dir: { type: String, required: false },
nextPage: { type: Function, required: false }, nextPage: { type: Function, required: false },
prevPage: { type: Function, required: false }, prevPage: { type: Function, required: false },
modelValue: { type: null, required: false, default: undefined }, modelValue: { type: null, required: false },
multiple: { type: Boolean, required: false }, multiple: { type: Boolean, required: false },
disableDaysOutsideCurrentView: { type: Boolean, required: false }, disableDaysOutsideCurrentView: { type: Boolean, required: false },
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
layout: { type: null, required: false, default: undefined },
yearRange: { type: Array, required: false },
}); });
const emits = defineEmits(["update:modelValue", "update:placeholder"]); const emits = defineEmits(["update:modelValue", "update:placeholder"]);
const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder"); const delegatedProps = reactiveOmit(props, "class");
const placeholder = useVModel(props, "placeholder", emits, {
passive: true,
defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
});
const formatter = useDateFormatter(props.locale ?? "en");
const yearRange = computed(() => {
return (
props.yearRange ??
createYearRange({
start:
props?.minValue ??
(
toRaw(props.placeholder) ??
props.defaultPlaceholder ??
today(getLocalTimeZone())
).cycle("year", -100),
end:
props?.maxValue ??
(
toRaw(props.placeholder) ??
props.defaultPlaceholder ??
today(getLocalTimeZone())
).cycle("year", 10),
})
);
});
const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate();
const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate();
const forwarded = useForwardPropsEmits(delegatedProps, emits); const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>
<DefineMonthTemplate v-slot="{ date }">
<div class="**:data-[slot=native-select-icon]:right-1">
<div class="relative">
<div
class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none"
>
{{ formatter.custom(toDate(date), { month: "short" }) }}
</div>
<NativeSelect
class="text-xs h-8 pr-6 pl-2 text-transparent relative"
@change="
(e) => {
placeholder = placeholder.set({
month: Number(e?.target?.value),
});
}
"
>
<NativeSelectOption
v-for="month in createYear({ dateObj: date })"
:key="month.toString()"
:value="month.month"
:selected="date.month === month.month"
>
{{ formatter.custom(toDate(month), { month: "short" }) }}
</NativeSelectOption>
</NativeSelect>
</div>
</div>
</DefineMonthTemplate>
<DefineYearTemplate v-slot="{ date }">
<div class="**:data-[slot=native-select-icon]:right-1">
<div class="relative">
<div
class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none"
>
{{ formatter.custom(toDate(date), { year: "numeric" }) }}
</div>
<NativeSelect
class="text-xs h-8 pr-6 pl-2 text-transparent relative"
@change="
(e) => {
placeholder = placeholder.set({
year: Number(e?.target?.value),
});
}
"
>
<NativeSelectOption
v-for="year in yearRange"
:key="year.toString()"
:value="year.year"
:selected="date.year === year.year"
>
{{ formatter.custom(toDate(year), { year: "numeric" }) }}
</NativeSelectOption>
</NativeSelect>
</div>
</div>
</DefineYearTemplate>
<CalendarRoot <CalendarRoot
v-slot="{ grid, weekDays, date }" v-slot="{ grid, weekDays }"
v-bind="forwarded"
v-model:placeholder="placeholder"
data-slot="calendar" data-slot="calendar"
:class="cn('p-3', props.class)" :class="cn('p-3', props.class)"
v-bind="forwarded"
> >
<CalendarHeader class="pt-0"> <CalendarHeader>
<nav
class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between"
>
<CalendarPrevButton>
<slot name="calendar-prev-icon" />
</CalendarPrevButton>
<CalendarNextButton>
<slot name="calendar-next-icon" />
</CalendarNextButton>
</nav>
<slot
name="calendar-heading"
:date="date"
:month="ReuseMonthTemplate"
:year="ReuseYearTemplate"
>
<template v-if="layout === 'month-and-year'">
<div class="flex items-center justify-center gap-1">
<ReuseMonthTemplate :date="date" />
<ReuseYearTemplate :date="date" />
</div>
</template>
<template v-else-if="layout === 'month-only'">
<div class="flex items-center justify-center gap-1">
<ReuseMonthTemplate :date="date" />
{{ formatter.custom(toDate(date), { year: "numeric" }) }}
</div>
</template>
<template v-else-if="layout === 'year-only'">
<div class="flex items-center justify-center gap-1">
{{ formatter.custom(toDate(date), { month: "short" }) }}
<ReuseYearTemplate :date="date" />
</div>
</template>
<template v-else>
<CalendarHeading /> <CalendarHeading />
</template>
</slot> <div class="flex items-center gap-1">
<CalendarPrevButton />
<CalendarNextButton />
</div>
</CalendarHeader> </CalendarHeader>
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0"> <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">

2
ui/src/components/ui/calendar/CalendarCell.vue
View File

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
const props = defineProps({ const props = defineProps({
date: { type: null, required: true }, date: { type: null, required: true },
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });

2
ui/src/components/ui/calendar/CalendarCellTrigger.vue
View File

@@ -8,7 +8,7 @@ const props = defineProps({
day: { type: null, required: true }, day: { type: null, required: true },
month: { type: null, required: true }, month: { type: null, required: true },
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: "button" }, as: { type: [String, Object, Function], required: false, default: "button" },
class: { type: null, required: false }, class: { type: null, required: false },
}); });

2
ui/src/components/ui/calendar/CalendarGrid.vue
View File

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
const props = defineProps({ const props = defineProps({
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });

2
ui/src/components/ui/calendar/CalendarGridBody.vue
View File

@@ -3,7 +3,7 @@ import { CalendarGridBody } from "reka-ui";
const props = defineProps({ const props = defineProps({
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
}); });
</script> </script>

2
ui/src/components/ui/calendar/CalendarGridHead.vue
View File

@@ -3,7 +3,7 @@ import { CalendarGridHead } from "reka-ui";
const props = defineProps({ const props = defineProps({
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });
</script> </script>

2
ui/src/components/ui/calendar/CalendarGridRow.vue
View File

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
const props = defineProps({ const props = defineProps({
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });

4
ui/src/components/ui/calendar/CalendarHeadCell.vue
View File

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
const props = defineProps({ const props = defineProps({
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
data-slot="calendar-head-cell" data-slot="calendar-head-cell"
:class=" :class="
cn( cn(
'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
props.class, props.class,
) )
" "

7
ui/src/components/ui/calendar/CalendarHeader.vue
View File

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
const props = defineProps({ const props = defineProps({
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });
@@ -18,10 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps);
<CalendarHeader <CalendarHeader
data-slot="calendar-header" data-slot="calendar-header"
:class=" :class="
cn( cn('flex justify-center pt-1 relative items-center w-full', props.class)
'flex justify-center pt-1 relative items-center w-full px-8',
props.class,
)
" "
v-bind="forwardedProps" v-bind="forwardedProps"
> >

2
ui/src/components/ui/calendar/CalendarHeading.vue
View File

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
const props = defineProps({ const props = defineProps({
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });

3
ui/src/components/ui/calendar/CalendarNextButton.vue
View File

@@ -8,7 +8,7 @@ import { buttonVariants } from '@/components/ui/button';
const props = defineProps({ const props = defineProps({
nextPage: { type: Function, required: false }, nextPage: { type: Function, required: false },
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });
@@ -23,6 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
:class=" :class="
cn( cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),
'absolute right-1',
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100', 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
props.class, props.class,
) )

3
ui/src/components/ui/calendar/CalendarPrevButton.vue
View File

@@ -8,7 +8,7 @@ import { buttonVariants } from '@/components/ui/button';
const props = defineProps({ const props = defineProps({
prevPage: { type: Function, required: false }, prevPage: { type: Function, required: false },
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false }, as: { type: [String, Object, Function], required: false },
class: { type: null, required: false }, class: { type: null, required: false },
}); });
@@ -23,6 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
:class=" :class="
cn( cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),
'absolute left-1',
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100', 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
props.class, props.class,
) )

51
ui/src/components/ui/native-select/NativeSelect.vue
View File

@@ -1,51 +0,0 @@
<script setup>
import { reactiveOmit, useVModel } from "@vueuse/core";
import { ChevronDownIcon } from "lucide-vue-next";
import { cn } from "@/lib/utils";
defineOptions({
inheritAttrs: false,
});
const props = defineProps({
modelValue: { type: null, required: false },
class: { type: null, required: false },
});
const emit = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emit, {
passive: true,
defaultValue: "",
});
const delegatedProps = reactiveOmit(props, "class");
</script>
<template>
<div
class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
data-slot="native-select-wrapper"
>
<select
v-bind="{ ...$attrs, ...delegatedProps }"
v-model="modelValue"
data-slot="native-select"
:class="
cn(
'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
props.class,
)
"
>
<slot />
</select>
<ChevronDownIcon
class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
aria-hidden="true"
data-slot="native-select-icon"
/>
</div>
</template>

19
ui/src/components/ui/native-select/NativeSelectOptGroup.vue
View File

@@ -1,19 +0,0 @@
<!-- @fallthroughAttributes true -->
<!-- @strictTemplates true -->
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<optgroup
data-slot="native-select-optgroup"
:class="cn('bg-popover text-popover-foreground', props.class)"
>
<slot />
</optgroup>
</template>

19
ui/src/components/ui/native-select/NativeSelectOption.vue
View File

@@ -1,19 +0,0 @@
<!-- @fallthroughAttributes true -->
<!-- @strictTemplates true -->
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<option
data-slot="native-select-option"
:class="cn('bg-popover text-popover-foreground', props.class)"
>
<slot />
</option>
</template>

3
ui/src/components/ui/native-select/index.js
View File

@@ -1,3 +0,0 @@
export { default as NativeSelect } from "./NativeSelect.vue";
export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue";
export { default as NativeSelectOption } from "./NativeSelectOption.vue";

16
ui/src/components/ui/spinner/Spinner.vue
View File

@@ -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
ui/src/components/ui/spinner/index.js
View File

@@ -1 +0,0 @@
export { default as Spinner } from "./Spinner.vue";

8
ui/src/main.js
View File

@@ -20,12 +20,10 @@ const app = createApp(App)
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
if (import.meta.env.VITE_DISABLE_GLITCHTIP === "true") { if (!!import.meta.env.VITE_DISABLE_GLITCHTIP) {
console.log("Glitchtip disabled");
} else {
let dsn = import.meta.env.VITE_GLITCHTIP_DSN; let dsn = import.meta.env.VITE_GLITCHTIP_DSN;
let environment = import.meta.env.VITE_ENVIRONMENT; let environment = import.meta.env.VITE_ENVIRONMENT;
let release = import.meta.env.VITE_APPLICATION_VERSION;
Sentry.init({ Sentry.init({
app, app,
dsn: dsn, dsn: dsn,
@@ -34,7 +32,7 @@ if (import.meta.env.VITE_DISABLE_GLITCHTIP === "true") {
], ],
tracesSampleRate: 0.01, tracesSampleRate: 0.01,
environment: environment, environment: environment,
release: release release: 'release tag'
}); });
} }

79
ui/src/pages/Application.vue
View File

@@ -2,16 +2,14 @@
import ApplicationChat from '@/components/application/ApplicationChat.vue'; import ApplicationChat from '@/components/application/ApplicationChat.vue';
import ApplicationForm from '@/components/application/ApplicationForm.vue'; import ApplicationForm from '@/components/application/ApplicationForm.vue';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { approveApplication, denyApplication, loadApplication, postApplication, postChatMessage, getMyApplication, postAdminChatMessage } from '@/api/application'; import { ApplicationData, approveApplication, denyApplication, loadApplication, postApplication, postChatMessage, ApplicationStatus } from '@/api/application';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import Button from '@/components/ui/button/Button.vue'; import Button from '@/components/ui/button/Button.vue';
import { CheckIcon, XIcon } from 'lucide-vue-next'; import { CheckIcon, XIcon } from 'lucide-vue-next';
import Unauthorized from './Unauthorized.vue';
import { ApplicationData, ApplicationFull, ApplicationStatus, CommentRow } from '@shared/types/application';
const appData = ref<ApplicationData>(null); const appData = ref<ApplicationData>(null);
const appID = ref<number | null>(null); const appID = ref<number | null>(null);
const chatData = ref<CommentRow[]>([]) const chatData = ref<object[]>([])
const readOnly = ref<boolean>(false); const readOnly = ref<boolean>(false);
const newApp = ref<boolean>(null); const newApp = ref<boolean>(null);
const status = ref<ApplicationStatus>(null); const status = ref<ApplicationStatus>(null);
@@ -21,12 +19,13 @@ const loading = ref<boolean>(true);
const member_name = ref<string>(); const member_name = ref<string>();
const props = defineProps<{ const props = defineProps<{
mode?: "create" | "view-self" | "view-recruiter" | "view-self-id" mode?: "create" | "view-self" | "view-recruiter"
}>() }>()
const finalMode = ref<"create" | "view-self" | "view-recruiter" | "view-self-id">("create"); const finalMode = ref<"create" | "view-self" | "view-recruiter">("create");
function loadData(raw: ApplicationFull) { async function loadByID(id: number | string) {
const raw = await loadApplication(id);
const data = raw.application; const data = raw.application;
@@ -41,20 +40,20 @@ function loadData(raw: ApplicationFull) {
readOnly.value = true; readOnly.value = true;
} }
const route = useRoute(); const router = useRoute();
const unauthorized = ref(false);
onMounted(async () => { onMounted(async () => {
//recruiter mode //recruiter mode
if (props.mode === 'view-recruiter') { if (props.mode === 'view-recruiter') {
finalMode.value = 'view-recruiter'; finalMode.value = 'view-recruiter';
loadData(await loadApplication(Number(route.params.id), true)) await loadByID(Number(router.params.id));
} }
//viewer mode //viewer mode
if (props.mode === 'view-self') { if (props.mode === 'view-self') {
finalMode.value = 'view-self'; finalMode.value = 'view-self';
loadData(await loadApplication("me")) await loadByID('me');
} }
//creator mode //creator mode
@@ -65,33 +64,40 @@ onMounted(async () => {
newApp.value = true; newApp.value = true;
} }
if (props.mode === 'view-self-id') {
finalMode.value = 'view-self-id';
try {
let raw = await getMyApplication(Number(route.params.id))
loadData(raw);
unauthorized.value = false;
} catch (error) {
if (error.message === "Unauthorized") {
unauthorized.value = true;
} else {
console.error(error);
}
}
}
loading.value = false; loading.value = false;
// try {
// //get app ID from URL param
// if (appIDRaw === undefined) {
// //new app
// appData.value = null
// readOnly.value = false;
// newApp.value = true;
// } else {
// //load app
// const raw = await loadApplication(appIDRaw.toString());
// const data = raw.application;
// appID.value = data.id;
// appData.value = data.app_data;
// chatData.value = raw.comments;
// status.value = data.app_status;
// decisionDate.value = new Date(data.decision_at);
// submitDate.value = data.submitted_at ? new Date(data.submitted_at) : null;
// member_name.value = data.member_name;
// newApp.value = false;
// readOnly.value = true;
// }
// } catch (e) {
// console.error(e);
// }
}) })
async function postComment(comment) { async function postComment(comment) {
chatData.value.push(await postChatMessage(comment, appID.value)); chatData.value.push(await postChatMessage(comment, appID.value));
} }
async function postCommentInternal(comment) {
chatData.value.push(await postAdminChatMessage(comment, appID.value));
}
const emit = defineEmits(['submit']); const emit = defineEmits(['submit']);
async function postApp(appData) { async function postApp(appData) {
@@ -116,10 +122,6 @@ async function handleDeny(id) {
<template> <template>
<div v-if="!loading" class="w-full h-20"> <div v-if="!loading" class="w-full h-20">
<div v-if="unauthorized" class="flex justify-center w-full my-10">
You do not have permission to view this application.
</div>
<div v-else>
<div v-if="!newApp" class="flex flex-row justify-between items-center py-2 mb-8"> <div v-if="!newApp" class="flex flex-row justify-between items-center py-2 mb-8">
<!-- Application header --> <!-- Application header -->
<div> <div>
@@ -162,14 +164,11 @@ async function handleDeny(id) {
</div> </div>
<ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7"> <ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7">
</ApplicationForm> </ApplicationForm>
<div v-if="!newApp" class="pb-15"> <div v-if="!newApp">
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3> <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3>
<ApplicationChat :messages="chatData" @post="postComment" @post-internal="postCommentInternal" :admin-mode="finalMode === 'view-recruiter'"> <ApplicationChat :messages="chatData" @post="postComment"></ApplicationChat>
</ApplicationChat>
</div> </div>
</div> </div>
</div>
<!-- TODO: Implement some kinda loading screen --> <!-- TODO: Implement some kinda loading screen -->
<div v-else class="flex items-center justify-center h-full">Loading</div> <div v-else class="flex items-center justify-center h-full">Loading</div>
</template> </template>

16
ui/src/pages/Calendar.vue
View File

@@ -3,14 +3,15 @@ import { ref, watch, nextTick, computed, onMounted } from 'vue'
import FullCalendar from '@fullcalendar/vue3' import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid' import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction' import interactionPlugin from '@fullcalendar/interaction'
import { ChevronLeft, ChevronRight, Plus } from 'lucide-vue-next' import { X, Clock, MapPin, User, ListTodo, ChevronLeft, ChevronRight, Plus } from 'lucide-vue-next'
import CreateCalendarEvent from '@/components/calendar/CreateCalendarEvent.vue' import CreateCalendarEvent from '@/components/calendar/CreateCalendarEvent.vue'
import { CalendarEvent } from '@shared/types/calendar' import { getCalendarEvent, getMonthCalendarEvents } from '@/api/calendar'
import { CalendarEvent, CalendarEventShort } from '@shared/types/calendar'
import { Calendar } from '@fullcalendar/core'
import ViewCalendarEvent from '@/components/calendar/ViewCalendarEvent.vue' import ViewCalendarEvent from '@/components/calendar/ViewCalendarEvent.vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { useCalendarEvents } from '@/composables/useCalendarEvents' import { useCalendarEvents } from '@/composables/useCalendarEvents'
import { useCalendarNavigation } from '@/composables/useCalendarNavigation' import { useCalendarNavigation } from '@/composables/useCalendarNavigation'
import { useUserStore } from '@/stores/user'
const monthLabels = [ const monthLabels = [
'January', 'February', 'March', 'April', 'May', 'June', 'January', 'February', 'March', 'April', 'May', 'June',
@@ -23,14 +24,13 @@ function api() {
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const userStore = useUserStore();
function buildFullDate(month: number, year: number): Date { function buildFullDate(month: number, year: number): Date {
return new Date(year, month, 1); //default to first of month return new Date(year, month, 1); //default to first of month
} }
const { selectedMonth, selectedYear, years, goPrev, goNext, goToday, onDatesSet, goToSelectedDate } = useCalendarNavigation(api) const { selectedMonth, selectedYear, years, goPrev, goNext, goToday, onDatesSet, goToSelectedDate } = useCalendarNavigation(api)
const { events, loadEvents } = useCalendarEvents(selectedMonth, selectedYear); const { events, loadEvents} = useCalendarEvents(selectedMonth, selectedYear);
const panelOpen = ref(false) const panelOpen = ref(false)
const activeEvent = ref<CalendarEvent | null>(null) const activeEvent = ref<CalendarEvent | null>(null)
@@ -48,7 +48,6 @@ const dialogRef = ref<any>(null)
// NEW: handle day/time slot clicks to start creating an event // NEW: handle day/time slot clicks to start creating an event
function onDateClick(arg: { dateStr: string }) { function onDateClick(arg: { dateStr: string }) {
if (!userStore.isLoggedIn) return;
dialogRef.value?.openDialog(arg.dateStr); dialogRef.value?.openDialog(arg.dateStr);
// For now, just open the panel with a draft payload. // For now, just open the panel with a draft payload.
// activeEvent.value = { // activeEvent.value = {
@@ -203,7 +202,7 @@ onMounted(() => {
@click="goToday"> @click="goToday">
Today Today
</button> </button>
<button v-if="userStore.isLoggedIn" <button
class="cursor-pointer ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90" class="cursor-pointer ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90"
@click="onCreateEvent"> @click="onCreateEvent">
<Plus class="h-4 w-4" /> <Plus class="h-4 w-4" />
@@ -217,8 +216,7 @@ onMounted(() => {
<aside v-if="panelOpen" <aside v-if="panelOpen"
class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed" class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
:style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }"> :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
<ViewCalendarEvent ref="eventViewRef" @close="() => { router.push('/calendar'); }" <ViewCalendarEvent ref="eventViewRef" @close="() => { router.push('/calendar'); }" @reload="loadEvents()" @edit="(val) => {dialogRef.openDialog(null, 'edit', val)}">
@reload="loadEvents()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
</ViewCalendarEvent> </ViewCalendarEvent>
</aside> </aside>
</div> </div>

11
ui/src/pages/Documentation.vue
View File

@@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div>
Alo
<iframe src="https://docs.iceberg-gaming.com/" ></iframe>
</div>
</template>

110
ui/src/pages/Dossier.vue Normal file
View File

@@ -0,0 +1,110 @@
<script setup lang="ts">
</script>
<template>
<div class="px-10 py-6 max-w-7xl mx-auto w-full">
<!-- Header -->
<div class="flex justify-between items-center mb-6">
<h1 class="text-3xl font-semibold tracking-tight">Member Deployments</h1>
<div class="text-muted-foreground">Unit / Dossier / Deployments</div>
</div>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="p-5 rounded-xl border bg-card shadow-sm">
<p class="text-muted-foreground text-sm">Total Deployments</p>
<p class="text-3xl font-bold mt-2">123</p>
</div>
<div class="p-5 rounded-xl border bg-card shadow-sm">
<p class="text-muted-foreground text-sm">Total Hours</p>
<p class="text-3xl font-bold mt-2">456h</p>
</div>
<div class="p-5 rounded-xl border bg-card shadow-sm">
<p class="text-muted-foreground text-sm">Avg. Attendance</p>
<p class="text-3xl font-bold mt-2">87%</p>
</div>
</div>
<!-- Filters & Search -->
<div class="flex justify-between items-end mb-4 flex-wrap gap-4">
<div class="flex gap-4 flex-wrap">
<div>
<label class="block text-sm text-muted-foreground mb-1">Operation Type</label>
<select class="border rounded-md px-3 py-2 w-48 bg-background">
<option>All</option>
<option>Deployment</option>
<option>Training</option>
</select>
</div>
<div>
<label class="block text-sm text-muted-foreground mb-1">Sort By</label>
<select class="border rounded-md px-3 py-2 w-48 bg-background">
<option>Date (Newest)</option>
<option>Date (Oldest)</option>
<option>Longest Duration</option>
</select>
</div>
</div>
<div>
<label class="block text-sm text-muted-foreground mb-1">Search</label>
<input type="text" placeholder="Search deployments..." class="border rounded-md px-3 py-2 w-56 bg-background" />
</div>
</div>
<!-- Deployment List -->
<div class="rounded-xl border divide-y bg-card shadow-sm">
<!-- Row -->
<div class="p-5 hover:bg-accent cursor-pointer flex justify-between items-center">
<div>
<p class="font-semibold text-lg">Operation Dawn Strike</p>
<div class="text-sm text-muted-foreground flex gap-6 mt-1">
<span>Date: 2024-08-14</span>
<span>Duration: 3.4h</span>
<span>Role: Rifleman</span>
</div>
</div>
<div class="text-right">
<p class="font-medium">Status: <span class="text-green-500 font-semibold">Completed</span></p>
</div>
</div>
<div class="p-5 hover:bg-accent cursor-pointer flex justify-between items-center">
<div>
<p class="font-semibold text-lg">Operation Iron Resolve</p>
<div class="text-sm text-muted-foreground flex gap-6 mt-1">
<span>Date: 2024-08-02</span>
<span>Duration: 2.1h</span>
<span>Role: Machine Gunner</span>
</div>
</div>
<div class="text-right">
<p class="font-medium">Status: <span class="text-yellow-500 font-semibold">Partial</span></p>
</div>
</div>
<div class="p-5 hover:bg-accent cursor-pointer flex justify-between items-center">
<div>
<p class="font-semibold text-lg">Operation Midnight Gale</p>
<div class="text-sm text-muted-foreground flex gap-6 mt-1">
<span>Date: 2024-07-22</span>
<span>Duration: 4.8h</span>
<span>Role: Squad Leader</span>
</div>
</div>
<div class="text-right">
<p class="font-medium">Status: <span class="text-red-500 font-semibold">No‑Show</span></p>
</div>
</div>
</div>
</div>
</template>

57
ui/src/pages/Join.vue
View File

@@ -14,7 +14,6 @@ import { useUserStore } from '@/stores/user';
import { Check, Circle, Dot, Users, X } from 'lucide-vue-next' import { Check, Circle, Dot, Users, X } from 'lucide-vue-next'
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import Application from './Application.vue'; import Application from './Application.vue';
import { restartApplication } from '@/api/application';
function goToLogin() { function goToLogin() {
const redirectUrl = encodeURIComponent(window.location.origin + '/join') const redirectUrl = encodeURIComponent(window.location.origin + '/join')
@@ -68,25 +67,14 @@ const currentStep = computed<number>(() => {
case "denied": case "denied":
return 5; return 5;
break; break;
case "retired":
return 5;
break;
} }
}) })
const finalPanel = ref<'app' | 'message'>('message'); const finalPanel = ref<'app' | 'message'>('message');
const reloadKey = ref(0);
async function restartApp() {
await restartApplication();
await userStore.loadUser();
reloadKey.value++;
}
</script> </script>
<template> <template>
<div class="flex flex-col items-center mt-10 w-full" :key="reloadKey"> <div class="flex flex-col items-center mt-10 w-full">
<!-- Stepper Container --> <!-- Stepper Container -->
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
@@ -183,9 +171,9 @@ async function restartApp() {
<li>When prompted, choose <em>“Yes”</em> to download all associated mods.</li> <li>When prompted, choose <em>“Yes”</em> to download all associated mods.</li>
</ul> </ul>
<p> <p>
<a href="https://docs.iceberg-gaming.com/books/member-guides/page/new-member-setup-onboarding" <a href="https://www.guilded.gg/Iceberg-gaming/groups/v3j2vAP3/channels/6979335e-60f7-4ab9-9590-66df69367d1e/docs/2013948655"
class="text-primary underline" target="_blank"> class="text-primary underline" target="_blank">
Click here for the full installation guide (Requires Sign-in) Click here for the full installation guide
</a> </a>
</p> </p>
<!-- CONTACT SECTION --> <!-- CONTACT SECTION -->
@@ -223,7 +211,7 @@ async function restartApp() {
our forums and introduce yourself. our forums and introduce yourself.
</p> </p>
<p> <p>
If you have any questions, feel free to reach out on TeamSpeak or Discord If you have any questions, feel free to reach out on TeamSpeak, Discord, or Guilded,
someone someone
will always be around to help. will always be around to help.
</p> </p>
@@ -231,8 +219,8 @@ async function restartApp() {
</div> </div>
<!-- Denied message --> <!-- Denied message -->
<div v-else-if="userStore.state === 'denied'"> <div v-else-if="userStore.state === 'denied'">
<div class="w-full max-w-2xl flex flex-col gap-8"> <div class="w-full max-w-2xl p-8">
<h1 class="text-3xl sm:text-4xl font-bold text-left"> <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left text-destructive">
Application Not Approved Application Not Approved
</h1> </h1>
<div class="space-y-4 text-muted-foreground text-left leading-relaxed"> <div class="space-y-4 text-muted-foreground text-left leading-relaxed">
@@ -258,39 +246,6 @@ async function restartApp() {
Team</span> Team</span>
</p> </p>
</div> </div>
<Button class="w-min" @click="restartApp">New Application</Button>
</div>
</div>
<div v-else-if="userStore.state === 'retired'">
<div class="w-full max-w-2xl flex flex-col gap-8">
<h1 class="text-3xl sm:text-4xl font-bold text-left">
You have retired from the 17th Ranger Battalion
</h1>
<div class="space-y-4 text-muted-foreground text-left leading-relaxed">
<p>
Thank you for your service and participation in the <strong>17th Ranger
Battalion</strong>.
Your time with us has been sincerely appreciated.
</p>
<p>
Should you ever wish to return, you are welcome to <strong>reach out to our
leadership
team</strong>
for guidance on the reinstatement process or to stay connected with the community.
</p>
<p>
We recognize that circumstances change, and you will always have a place to
reconnect with
us
should the opportunity arise in the future.
</p>
<p>
All the best,<br />
<span class="text-foreground font-medium">The 17th Ranger Battalion Leadership
Team</span>
</p>
</div>
<Button class="w-min" @click="restartApp">New Application</Button>
</div> </div>
</div> </div>
</div> </div>

67
ui/src/pages/ManageApplications.vue
View File

@@ -1,6 +1,5 @@
<script setup> <script setup>
import { getAllApplications, approveApplication, denyApplication } from '@/api/application'; import { getAllApplications, approveApplication, denyApplication, ApplicationStatus } from '@/api/application';
import { ApplicationStatus } from '@shared/types/application'
import { import {
Table, Table,
TableBody, TableBody,
@@ -15,7 +14,6 @@ import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { CheckIcon, XIcon } from 'lucide-vue-next'; import { CheckIcon, XIcon } from 'lucide-vue-next';
import Application from './Application.vue'; import Application from './Application.vue';
import MemberCard from '@/components/members/MemberCard.vue';
const appList = ref([]); const appList = ref([]);
const now = Date.now(); const now = Date.now();
@@ -97,8 +95,7 @@ onMounted(async () => {
<!-- application list --> <!-- application list -->
<div :class="openPanel == false ? 'w-full' : 'w-2/5'" class="pr-9"> <div :class="openPanel == false ? 'w-full' : 'w-2/5'" class="pr-9">
<h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">Manage Applications</h1> <h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">Manage Applications</h1>
<div class="max-h-[80vh] overflow-hidden"> <Table>
<Table class="w-full">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>User</TableHead> <TableHead>User</TableHead>
@@ -106,44 +103,32 @@ onMounted(async () => {
<TableHead class="text-right">Status</TableHead> <TableHead class="text-right">Status</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
</Table> <TableBody class="overflow-y-auto scrollbar-themed">
<!-- Scrollable body container -->
<div class="overflow-y-auto max-h-[70vh] scrollbar-themed">
<Table class="w-full">
<TableBody>
<TableRow v-for="app in appList" :key="app.id" class="cursor-pointer" <TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
@click="openApplication(app.id)"> :onClick="() => { openApplication(app.id) }">
<TableCell class="font-medium"> <TableCell class="font-medium">{{ app.member_name }}</TableCell>
<MemberCard :memberId="app.member_id"></MemberCard>
</TableCell>
<TableCell :title="formatExact(app.submitted_at)"> <TableCell :title="formatExact(app.submitted_at)">
{{ formatAgo(app.submitted_at) }} {{ formatAgo(app.submitted_at) }}
</TableCell> </TableCell>
<TableCell v-if="app.app_status === ApplicationStatus.Pending" <TableCell v-if="app.app_status === ApplicationStatus.Pending"
class="inline-flex items-end gap-2"> class="inline-flex items-end gap-2">
<Button variant="success" @click.stop="handleApprove(app.id)"> <Button variant="success" @click.stop="() => { handleApprove(app.id) }">
<CheckIcon /> <CheckIcon></CheckIcon>
</Button> </Button>
<Button variant="destructive" @click.stop="handleDeny(app.id)"> <Button variant="destructive" @click.stop="() => { handleDeny(app.id) }">
<XIcon /> <XIcon></XIcon>
</Button> </Button>
</TableCell> </TableCell>
<TableCell class="text-right font-semibold" :class="[ <TableCell class="text-right font-semibold" :class="[
,
app.app_status === ApplicationStatus.Pending && 'text-yellow-500', app.app_status === ApplicationStatus.Pending && 'text-yellow-500',
app.app_status === ApplicationStatus.Accepted && 'text-green-500', app.app_status === ApplicationStatus.Accepted && 'text-green-500',
app.app_status === ApplicationStatus.Denied && 'text-destructive' app.app_status === ApplicationStatus.Denied && 'text-destructive'
]"> ]">{{ app.app_status }}</TableCell>
{{ app.app_status }}
</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</div>
</div>
<div v-if="openPanel" class="pl-9 border-l w-3/5" :key="$route.params.id"> <div v-if="openPanel" class="pl-9 border-l w-3/5" :key="$route.params.id">
<div class="mb-5 flex justify-between"> <div class="mb-5 flex justify-between">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight"> Application</p> <p class="scroll-m-20 text-2xl font-semibold tracking-tight"> Application</p>
@@ -158,4 +143,32 @@ onMounted(async () => {
</div> </div>
</template> </template>
<style scoped></style> <style scoped>
/* Firefox */
.scrollbar-themed {
scrollbar-width: thin;
scrollbar-color: #555 #1f1f1f;
padding-right: 6px;
}
/* Chrome, Edge, Safari */
.scrollbar-themed::-webkit-scrollbar {
width: 10px;
/* slightly wider to allow padding look */
}
.scrollbar-themed::-webkit-scrollbar-track {
background: #1f1f1f;
margin-left: 6px;
/* ❗ adds space between content + scrollbar */
}
.scrollbar-themed::-webkit-scrollbar-thumb {
background: #555;
border-radius: 9999px;
}
.scrollbar-themed::-webkit-scrollbar-thumb:hover {
background: #777;
}
</style>

13
ui/src/pages/ManageLOA.vue
View File

@@ -17,24 +17,27 @@ const showLOADialog = ref(false);
</script> </script>
<template> <template>
<div>
<Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false"> <Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false">
<DialogContent class="sm:max-w-fit"> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Post LOA</DialogTitle> <DialogTitle>Post LOA</DialogTitle>
<DialogDescription> <DialogDescription>
Post an LOA on behalf of a member. Post an LOA on behalf of a member.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<LoaForm :admin-mode="true" class="my-3"></LoaForm> <LoaForm :admin-mode="true" class="my-5 w-full"></LoaForm>
<!-- <DialogFooter>
<Button variant="secondary" @click="showLOADialog = false">Cancel</Button>
<Button>Apply</Button>
</DialogFooter> -->
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<div class="max-w-5xl mx-auto pt-10"> <div class="max-w-5xl mx-auto pt-10">
<div class="flex justify-end mb-4"> <div class="flex justify-end mb-4">
<Button @click="showLOADialog = true">Post LOA</Button> <Button @click="showLOADialog = true">Post LOA</Button>
</div> </div>
<h1>LOA Log</h1> <h1>LOA Log</h1>
<LoaList :admin-mode="true"></LoaList> <LoaList></LoaList>
</div>
</div> </div>
</template> </template>

148
ui/src/pages/MyApplications.vue
View File

@@ -1,148 +0,0 @@
<script setup>
import { loadMyApplications } from '@/api/application';
import { ApplicationStatus } from '@shared/types/application';
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import Button from '@/components/ui/button/Button.vue';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CheckIcon, XIcon } from 'lucide-vue-next';
import Application from './Application.vue';
const appList = ref([]);
const now = Date.now();
// relative time formatter (uses user locale)
const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
// exact date/time for tooltip
const exactFmt = new Intl.DateTimeFormat(undefined, {
dateStyle: 'medium', timeStyle: 'short', timeZone: 'America/Toronto'
})
function formatAgo(iso) {
const d = new Date(iso)
if (isNaN(d)) return ''
let diff = (d.getTime() - now) / 1000 // seconds relative to page load
const divisions = [
{ amount: 60, name: 'second' },
{ amount: 60, name: 'minute' },
{ amount: 24, name: 'hour' },
{ amount: 7, name: 'day' },
{ amount: 4.34524, name: 'week' }, // avg weeks per month
{ amount: 12, name: 'month' },
{ amount: Infinity, name: 'year' },
]
for (const div of divisions) {
if (Math.abs(diff) < div.amount) {
return rtf.format(Math.round(diff), div.name)
}
diff /= div.amount
}
}
function formatExact(iso) {
const d = new Date(iso)
return isNaN(d) ? '' : exactFmt.format(d)
}
const router = useRouter();
function openApplication(id) {
router.push(`/applications/${id}`)
openPanel.value = true;
}
const route = useRoute();
watch(() => route.params.id, (newId) => {
if (newId === undefined) {
openPanel.value = false;
}
})
const openPanel = ref(false);
onMounted(async () => {
appList.value = await loadMyApplications();
//preload application
if (route.params.id != undefined) {
openApplication(route.params.id)
} else {
}
})
</script>
<template>
<div class="px-20 mx-auto max-w-[100rem] w-full flex mt-5 h-52 min-h-0 overflow-hidden">
<!-- application list -->
<div :class="openPanel == false ? 'w-full' : 'w-2/5'" class="pr-9">
<h1 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-5">My Applications</h1>
<Table>
<TableHeader>
<TableRow>
<TableHead>Date Submitted</TableHead>
<TableHead class="text-right">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody class="overflow-y-auto scrollbar-themed">
<TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
:onClick="() => { openApplication(app.id) }">
<TableCell :title="formatExact(app.submitted_at)">
{{ formatAgo(app.submitted_at) }}
</TableCell>
<TableCell class="text-right font-semibold" :class="[
,
app.app_status === ApplicationStatus.Pending && 'text-yellow-500',
app.app_status === ApplicationStatus.Accepted && 'text-green-500',
app.app_status === ApplicationStatus.Denied && 'text-destructive'
]">{{ app.app_status }}</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
<div v-if="openPanel" class="pl-9 border-l w-3/5" :key="$route.params.id">
<div class="mb-5 flex justify-between">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight"> Application</p>
</div>
<div class="overflow-y-auto max-h-[80vh] h-full mt-5 scrollbar-themed">
<Application :mode="'view-self-id'"></Application>
</div>
</div>
</div>
</template>
<style scoped>
/* Firefox */
.scrollbar-themed {
scrollbar-width: thin;
scrollbar-color: #555 #1f1f1f;
padding-right: 6px;
}
/* Chrome, Edge, Safari */
.scrollbar-themed::-webkit-scrollbar {
width: 10px;
/* slightly wider to allow padding look */
}
.scrollbar-themed::-webkit-scrollbar-track {
background: #1f1f1f;
margin-left: 6px;
/* ❗ adds space between content + scrollbar */
}
.scrollbar-themed::-webkit-scrollbar-thumb {
background: #555;
border-radius: 9999px;
}
.scrollbar-themed::-webkit-scrollbar-thumb:hover {
background: #777;
}
</style>

97
ui/src/pages/MyProfile.vue
View File

@@ -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>

20
ui/src/pages/SubmitLOA.vue
View File

@@ -2,8 +2,6 @@
import LoaForm from '@/components/loa/loaForm.vue'; import LoaForm from '@/components/loa/loaForm.vue';
import { useUserStore } from '@/stores/user'; import { useUserStore } from '@/stores/user';
import { Member } from '@/api/member'; import { Member } from '@/api/member';
import LoaList from '@/components/loa/loaList.vue';
import { ref } from 'vue';
const userStore = useUserStore(); const userStore = useUserStore();
const user = userStore.user; const user = userStore.user;
@@ -15,24 +13,8 @@ const memberFull: Member = {
status: null, status: null,
status_date: null, status_date: null,
}; };
const mode = ref<'submit' | 'view'>('submit')
</script> </script>
<template> <template>
<div class="max-w-5xl mx-auto flex w-full flex-col mt-4 mb-10"> <LoaForm class="m-10" :member="memberFull"></LoaForm>
<div class="mb-8">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Leave of Absence</p>
<div class="pt-3">
<div class="flex w-min *:px-10 pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
<label :class="mode === 'submit' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@click="mode = 'submit'">Submit</label>
<label :class="mode === 'view' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@click="mode = 'view'">History</label>
</div>
</div>
</div>
<LoaForm v-if="mode === 'submit'" :member="memberFull"></LoaForm>
<LoaList v-if="mode === 'view'" :admin-mode="false"></LoaList>
</div>
</template> </template>

36
ui/src/pages/TrainingReport.vue
View File

@@ -21,7 +21,6 @@ import SelectValue from '@/components/ui/select/SelectValue.vue';
import SelectContent from '@/components/ui/select/SelectContent.vue'; import SelectContent from '@/components/ui/select/SelectContent.vue';
import SelectItem from '@/components/ui/select/SelectItem.vue'; import SelectItem from '@/components/ui/select/SelectItem.vue';
import Input from '@/components/ui/input/Input.vue'; import Input from '@/components/ui/input/Input.vue';
import MemberCard from '@/components/members/MemberCard.vue';
enum sidePanelState { view, create, closed }; enum sidePanelState { view, create, closed };
@@ -153,13 +152,9 @@ onMounted(async () => {
<TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname : <TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname :
report.course_name }}</TableCell> report.course_name }}</TableCell>
<TableCell>{{ report.date.split('T')[0] }}</TableCell> <TableCell>{{ report.date.split('T')[0] }}</TableCell>
<TableCell class="text-right"> <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
<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 report.created_by_name
}}</TableCell> --> }}</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </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"> <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 class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}
</p> </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="text-muted-foreground">{{ focusedTrainingReport.event_date.split('T')[0] }}</p>
<p class="flex gap-2 items-center">Created by: <p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
<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 focusedTrainingReport.created_by_name
}}</p> }}
</p> </p>
</div> </div>
</div> </div>
@@ -199,11 +191,7 @@ onMounted(async () => {
</div> </div>
<div v-for="person in focusedTrainingTrainers" <div v-for="person in focusedTrainingTrainers"
class="grid grid-cols-4 py-2 items-center border-b last:border-none"> class="grid grid-cols-4 py-2 items-center border-b last:border-none">
<div> <p>{{ person.attendee_name }}</p>
<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="">{{ person.role.name }}</p>
<p class="col-span-2 text-right px-2" <p class="col-span-2 text-right px-2"
:class="person.remarks == '' ? 'text-muted-foreground' : ''"> :class="person.remarks == '' ? 'text-muted-foreground' : ''">
@@ -225,11 +213,7 @@ onMounted(async () => {
</div> </div>
<div v-for="person in focusedTrainingTrainees" <div v-for="person in focusedTrainingTrainees"
class="grid grid-cols-5 py-2 items-center border-b last:border-none"> class="grid grid-cols-5 py-2 items-center border-b last:border-none">
<div> <p>{{ person.attendee_name }}</p>
<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" <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
:model-value="person.passed_bookwork" class="pointer-events-none ml-5"> :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
</Checkbox> </Checkbox>
@@ -258,11 +242,7 @@ onMounted(async () => {
</div> </div>
<div v-for="person in focusedNoShows" <div v-for="person in focusedNoShows"
class="grid grid-cols-5 py-2 items-center border-b last:border-none"> class="grid grid-cols-5 py-2 items-center border-b last:border-none">
<div> <p>{{ person.attendee_name }}</p>
<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 :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
</Checkbox> </Checkbox>
<Checkbox :default-value="person.passed_qual ? true : false" class="pointer-events-none"> <Checkbox :default-value="person.passed_qual ? true : false" class="pointer-events-none">

2
ui/src/pages/memberList.vue
View File

@@ -65,7 +65,6 @@ const searchedMembers = computed(() => {
Member Member
</TableHead> </TableHead>
<TableHead>Rank</TableHead> <TableHead>Rank</TableHead>
<TableHead>Unit</TableHead>
<TableHead>Status</TableHead> <TableHead>Status</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
@@ -76,7 +75,6 @@ const searchedMembers = computed(() => {
{{ member.member_name }} {{ member.member_name }}
</TableCell> </TableCell>
<TableCell>{{ member.rank }}</TableCell> <TableCell>{{ member.rank }}</TableCell>
<TableCell>{{ member.unit }}</TableCell>
<TableCell>{{ member.status }}</TableCell> <TableCell>{{ member.status }}</TableCell>
<TableCell><Badge v-if="member.on_loa">On LOA</Badge></TableCell> <TableCell><Badge v-if="member.on_loa">On LOA</Badge></TableCell>
<TableCell @click.stop="" class="text-right"> <TableCell @click.stop="" class="text-right">

17
ui/src/router/index.js
View File

@@ -6,33 +6,30 @@ const router = createRouter({
routes: [ routes: [
// PUBLIC // PUBLIC
{ path: '/join', component: () => import('@/pages/Join.vue') }, { path: '/join', component: () => import('@/pages/Join.vue') },
{ path: '/applications', component: () => import('@/pages/MyApplications.vue'), meta: { requiresAuth: true } },
{ path: '/applications/:id', component: () => import('@/pages/MyApplications.vue'), meta: { requiresAuth: true } },
// AUTH REQUIRED // AUTH REQUIRED
{ path: '/apply', component: () => import('@/pages/Application.vue'), meta: { requiresAuth: true } },
{ path: '/', component: () => import('@/pages/Homepage.vue') }, { path: '/', component: () => import('@/pages/Homepage.vue') },
// MEMBER ROUTES // MEMBER ROUTES
{ path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } }, { 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: '/loa', component: () => import('@/pages/SubmitLOA.vue'), meta: { requiresAuth: true, memberOnly: true } },
{ path: '/transfer', component: () => import('@/pages/Transfer.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 }, },
{ path: '/calendar', component: () => import('@/pages/Calendar.vue') }, { path: '/calendar/event/:id', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true }, },
{ path: '/calendar/event/:id', component: () => import('@/pages/Calendar.vue') },
// disabled in favor of linking
// { path: '/documents', component: () => import('@/pages/Documentation.vue'), meta: { requiresAuth: true, memberOnly: true }, },
{ path: '/trainingReport', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } }, { path: '/trainingReport', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
{ path: '/trainingReport/new', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } }, { path: '/trainingReport/new', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
{ path: '/trainingReport/:id', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } }, { path: '/trainingReport/:id', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
// Personnel File
{ path: '/dossier', component: () => import('@/pages/Dossier.vue'), meta: { requiresAuth: false, memberOnly: false } },
// ADMIN / STAFF ROUTES // ADMIN / STAFF ROUTES
{ {
path: '/administration', path: '/administration',
meta: { requiresAuth: true, memberOnly: true, roles: ['17th Administrator', '17th HQ', '17th Command'] }, meta: { requiresAuth: true, memberOnly: true, roles: ['staff', 'admin'] },
children: [ children: [
{ path: 'applications', component: () => import('@/pages/ManageApplications.vue') }, { path: 'applications', component: () => import('@/pages/ManageApplications.vue') },
{ path: 'applications/:id', component: () => import('@/pages/ManageApplications.vue') }, { path: 'applications/:id', component: () => import('@/pages/ManageApplications.vue') },

140
ui/src/stores/memberDirectory.ts
View File

@@ -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 }
})

57
ui/src/stores/user.ts
View File

@@ -1,8 +1,5 @@
import { ref, computed, watch } from 'vue' import { ref, computed } from 'vue'
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
const POLL_INTERVAL = 10_000
export const useUserStore = defineStore('user', () => { export const useUserStore = defineStore('user', () => {
const user = ref(null) const user = ref(null)
@@ -36,57 +33,5 @@ export const useUserStore = defineStore('user', () => {
return requiredRoles.some(r => roles.value.has(r)) return requiredRoles.some(r => roles.value.has(r))
} }
const route = useRoute();
const router = useRouter();
watch(user, (newUser) => {
if (!newUser) return
console.log(newUser);
const currentRoute = route.meta
// Member-only route
if (currentRoute.memberOnly && state.value !== 'member') {
router.replace('/unauthorized')
return
}
// Role-based route
if (currentRoute.roles && !hasRole('Dev') && !hasAnyRole(currentRoute.roles as string[])) {
return '/unauthorized'
}
},
{ deep: true } // deep watch ensures nested changes trigger
)
//polling system
let pollTimeout: number | null = null
let polling = false;
let lastVersion: string | null = null
async function poll() {
// Only poll if tab is visible
if (document.hidden) {
polling = false;
return
}
await loadUser();
scheduleNext()
}
function scheduleNext() {
polling = true;
pollTimeout = window.setTimeout(poll, POLL_INTERVAL)
}
poll() //start polling
document.addEventListener('visibilitychange', () => {
if (!document.hidden && polling === false) {
poll()
}
})
return { user, isLoggedIn, roles, loadUser, loaded, hasAnyRole, hasRole, state } return { user, isLoggedIn, roles, loadUser, loaded, hasAnyRole, hasRole, state }
}) })