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

tweaked member page sizing

Browse Source
This commit is contained in:
ajdj100
2026-01-21 17:52:43 -05:00
parent 1d6f17b725
commit 7c7cbef3f3
1 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,12 +31,15 @@ import { useRouter } from 'vue-router';
import { Ellipsis } from "lucide-vue-next";
import Input from "@/components/ui/input/Input.vue";
import LoaForm from "@/components/loa/loaForm.vue";
import Spinner from "@/components/ui/spinner/Spinner.vue";
const members = ref<Member[]>([]);
const router = useRouter();
const loaded = ref(false);
const fetchMembers = async () => {
members.value = await getMembers();
loaded.value = true;
};
function viewMember(id) {
@@ -56,15 +59,15 @@ const searchedMembers = computed(() => {
<!-- table menu -->
<div class="w-4xl mx-auto">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-row items-center justify-between my-5 mt-7">
<div class="flex items-center justify-between">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight my-5">Member Management</p>
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">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>
<Table class="h-10">
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">
@@ -75,31 +78,40 @@ const searchedMembers = computed(() => {
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<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.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'">Discharge</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
</TableBody>
</Table>
<div class="max-h-[60vh] overflow-y-auto scrollbar-themed">
<Table v-if="loaded">
<TableBody>
<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.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'">Discharge</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
</TableBody>
</Table>
<div v-else class="flex justify-center my-[30vh]">
<Spinner class="size-10"></Spinner>
</div>
</div>
</div>
</template>