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