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

fixed scrolling behaviour on application management page

Browse Source
This commit is contained in:
ajdj100
2025-12-12 10:53:33 -05:00
parent 333bf20d86
commit 629fd59a7c
2 changed files with 96 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script setup>
import { getAllApplications, approveApplication, denyApplication } from '@/api/application';
import { getAllApplications, approveApplication, denyApplication } from '@/api/application';
import { ApplicationStatus } from '@shared/types/application'
import {
Table,
@@ -96,39 +96,50 @@ onMounted(async () => {
<!-- 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">Manage Applications</h1>
<Table>
<TableHeader>
<TableRow>
<TableHead>User</TableHead>
<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 class="font-medium">{{ app.member_name }}</TableCell>
<TableCell :title="formatExact(app.submitted_at)">
{{ formatAgo(app.submitted_at) }}
</TableCell>
<TableCell v-if="app.app_status === ApplicationStatus.Pending"
class="inline-flex items-end gap-2">
<Button variant="success" @click.stop="() => { handleApprove(app.id) }">
<CheckIcon></CheckIcon>
</Button>
<Button variant="destructive" @click.stop="() => { handleDeny(app.id) }">
<XIcon></XIcon>
</Button>
</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 class="max-h-[80vh] overflow-hidden">
<Table class="w-full">
<TableHeader>
<TableRow>
<TableHead>User</TableHead>
<TableHead>Date Submitted</TableHead>
<TableHead class="text-right">Status</TableHead>
</TableRow>
</TableHeader>
</Table>
<!-- 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"
@click="openApplication(app.id)">
<TableCell class="font-medium">{{ app.member_name }}</TableCell>
<TableCell :title="formatExact(app.submitted_at)">
{{ formatAgo(app.submitted_at) }}
</TableCell>
<TableCell v-if="app.app_status === ApplicationStatus.Pending"
class="inline-flex items-end gap-2">
<Button variant="success" @click.stop="handleApprove(app.id)">
<CheckIcon />
</Button>
<Button variant="destructive" @click.stop="handleDeny(app.id)">
<XIcon />
</Button>
</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>
</div>
<div v-if="openPanel" class="pl-9 border-l w-3/5" :key="$route.params.id">
<div class="mb-5 flex justify-between">
@@ -144,32 +155,4 @@ onMounted(async () => {
</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>
<style scoped></style>