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

reimplemented member page

Browse Source
This commit is contained in:
ajdj100
2026-01-21 16:34:35 -05:00
parent f087461e09
commit 1d6f17b725
3 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -138,6 +138,12 @@ function blurAfter() {
</RouterLink>
</NavigationMenuLink>
<NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
<RouterLink to="/administration/members" @click="blurAfter">
Member Management
</RouterLink>
</NavigationMenuItem>
<NavigationMenuLink v-if="auth.hasRole('17th Administrator')" as-child
:class="navigationMenuTriggerStyle()">
<RouterLink to="/administration/roles" @click="blurAfter">
@@ -146,13 +152,6 @@ function blurAfter() {
</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<!-- <NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
<RouterLink to="/members" @click="blurAfter">
Members (debug)
</RouterLink>
</NavigationMenuItem> -->
</NavigationMenuList>
</NavigationMenu>
</div>

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

@@ -25,7 +25,8 @@ import {
} from "@/components/ui/dialog"
import Badge from "@/components/ui/badge/Badge.vue";
import { computed, ref } from "vue";
import { Member, getMembers } from "@/api/member";
import { getMembers } from "@/api/member";
import { Member } from "@shared/types/member";
import { useRouter } from 'vue-router';
import { Ellipsis } from "lucide-vue-next";
import Input from "@/components/ui/input/Input.vue";
@@ -55,8 +56,13 @@ const searchedMembers = computed(() => {
<!-- table menu -->
<div class="w-4xl mx-auto">
<div class="flex justify-between mb-4">
<Input v-model="searchVal" placeholder="search..."></Input>
<div class="flex flex-row items-center justify-between">
<div class="flex items-center justify-between">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight my-5">Member Management</p>
</div>
<div class="flex justify-between items-center gap-3 mb-4">
<Input v-model="searchVal" placeholder="Search Members..."></Input>
</div>
</div>
<Table>
<TableHeader>
@@ -70,24 +76,25 @@ const searchedMembers = computed(() => {
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="member in searchedMembers" :key="member.member_id"
:onClick="() => { viewMember(member.member_id) }" class="cursor-pointer">
<TableRow v-for="member in searchedMembers" :key="member.member_id">
<TableCell class="font-medium">
{{ member.member_name }}
</TableCell>
<TableCell>{{ member.rank }}</TableCell>
<TableCell>{{ member.unit }}</TableCell>
<TableCell>{{ member.status }}</TableCell>
<TableCell><Badge v-if="member.on_loa">On LOA</Badge></TableCell>
<TableCell>
<Badge v-if="member.loa_until">On LOA</Badge>
</TableCell>
<TableCell @click.stop="" class="text-right">
<DropdownMenu>
<DropdownMenuTrigger class="cursor-pointer">
<Ellipsis></Ellipsis>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Change Rank</DropdownMenuItem>
<DropdownMenuItem>Transfer</DropdownMenuItem>
<DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
<!-- <DropdownMenuItem>Change Rank</DropdownMenuItem>
<DropdownMenuItem>Transfer</DropdownMenuItem> -->
<DropdownMenuItem :variant="'destructive'">Discharge</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>

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

@@ -13,7 +13,6 @@ const router = createRouter({
{ path: '/', component: () => import('@/pages/Homepage.vue') },
// MEMBER ROUTES
{ 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: '/profile', component: () => import('@/pages/MyProfile.vue'), meta: { requiresAuth: true } },
@@ -39,7 +38,8 @@ const router = createRouter({
{ path: 'applications/:id', component: () => import('@/pages/Application.vue') },
{ path: 'loa', component: () => import('@/pages/ManageLOA.vue') },
{ path: 'roles', component: () => import('@/pages/ManageRoles.vue') },
{ path: 'roles/:id', component: () => import('@/pages/ManageRoles.vue') }
{ path: 'roles/:id', component: () => import('@/pages/ManageRoles.vue') },
{ path: 'members', component: () => import('@/pages/memberList.vue') },
]
},