17th-Ranger-Battalion-ORG/17th-Site-Front-End-V2
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added whitespace and centered the page contents

Browse Source
This commit is contained in:
ajdj100
2023-08-15 12:49:25 -04:00
parent 97daeff761
commit 1320628fdd
1 changed files with 74 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
17th Website/src/views/users.vue
View File

@@ -1,5 +1,4 @@
<script>
import { ref } from 'vue'
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
import { Icon } from '@iconify/vue'
import QueryApolloGraphQL from '../api/request'
@@ -80,86 +79,89 @@ export default {
</script>
<template>
<!-- Page header (but not really) -->
<div id="header">
<div id="wrapper" class="w-full flex flex-wrap content-center flex-col">
<!-- Page header (but not really) -->
<div id="header">
<h1>Members</h1>
<div id="searchRow">
<input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')" class="mx-2" />
<div id="dropdownWrapper">
<h1>Members</h1>
<div id="searchRow">
<input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')"
class="mx-2 max-w-md" />
<div id="dropdownWrapper">
<Listbox v-model="unitFilter" class="w-32 mx-2">
<div class="relative">
<ListboxButton
class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
<Listbox v-model="unitFilter" class="w-32 mx-2">
<div class="relative">
<ListboxButton
class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
<span class="block w-full text-left">{{ unitFilter.name }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
<Icon icon="carbon:chevron-sort" />
</span>
</ListboxButton>
<ListboxOptions
class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
<ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit"
:disabled="unit.disabled" v-slot="{ active, selected }"
class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
<li>
{{ unit.name }}
</li>
</ListboxOption>
</ListboxOptions>
</div>
</Listbox>
<span class="block w-full text-left">{{ unitFilter.name }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
<Icon icon="carbon:chevron-sort" />
</span>
</ListboxButton>
<ListboxOptions
class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
<ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit"
:disabled="unit.disabled" v-slot="{ active, selected }"
class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
<li>
{{ unit.name }}
</li>
</ListboxOption>
</ListboxOptions>
</div>
</Listbox>
<Listbox v-model="roleFilter" class="w-32 mx-2">
<div class="relative">
<ListboxButton
class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
<Listbox v-model="roleFilter" class="w-32 mx-2">
<div class="relative">
<ListboxButton
class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
<span class="block w-full text-left">{{ roleFilter.name }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
<Icon icon="carbon:chevron-sort" />
</span>
</ListboxButton>
<ListboxOptions
class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
<ListboxOption v-for="role in roleFilters" :key="role.id" :value="role"
:disabled="role.disabled" v-slot="{ active, selected }"
class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
<li>
{{ role.name }}
</li>
</ListboxOption>
</ListboxOptions>
</div>
</Listbox>
<span class="block w-full text-left">{{ roleFilter.name }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
<Icon icon="carbon:chevron-sort" />
</span>
</ListboxButton>
<ListboxOptions
class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
<ListboxOption v-for="role in roleFilters" :key="role.id" :value="role"
:disabled="role.disabled" v-slot="{ active, selected }"
class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
<li>
{{ role.name }}
</li>
</ListboxOption>
</ListboxOptions>
</div>
</Listbox>
<button @click="resetFilters()"
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5 mx-2">Clear
Filters</button>
<button @click="resetFilters()"
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5 mx-2">Clear
Filters</button>
</div>
</div>
</div>
</div>
<table id="userTable" class="max-w-screen-xl">
<thead>
<tr>
<th>Member</th>
<th>Unit</th>
<th>Rank</th>
<th>Join Date</th>
<th>LOA Until</th>
<th>Last Active</th>
</tr>
</thead>
<tbody id="tableBody">
<tr v-for="(item, index) in filteredTable">
<td>{{ item.member_name }}</td>
<td>{{ item.status }}</td>
<td>{{ item.rank }}</td>
</tr>
</tbody>
</table>
</div>
<table id="userTable">
<thead>
<tr>
<th>Member</th>
<th>Unit</th>
<th>Rank</th>
<th>Join Date</th>
<th>LOA Until</th>
<th>Last Active</th>
</tr>
</thead>
<tbody id="tableBody">
<tr v-for="(item, index) in filteredTable">
<td>{{ item.member_name }}</td>
<td>{{ item.status }}</td>
<td>{{ item.rank }}</td>
</tr>
</tbody>
</table>
</template>
<style scoped>