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

Integrated new dropdowns

Browse Source
This commit is contained in:
ajdj100
2024-05-07 15:40:51 -04:00
parent bb925aa87d
commit 19c585e698
1 changed files with 18 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
import { Icon } from '@iconify/vue'
import QueryApolloGraphQL from '../api/request'
import Dropdown from '../components/dropdown/Dropdown.vue'
export default {
data() {
@@ -10,7 +11,7 @@ export default {
dropped: false,
search: '',
unitFilters: [
statusFilters: [
{ id: 1, name: 'All Groups', filter: 'none', disabled: false },
{ id: 2, name: 'Alpha', filter: 'Alpha Company', disabled: false },
{ id: 3, name: 'Echo', filter: 'Echo Company', disabled: false },
@@ -18,7 +19,7 @@ export default {
{ id: 5, name: 'Recruit', filter: 'Recruit', disabled: false },
],
unitFilter: { id: 1, name: 'All Groups', filter: 'none', disabled: false },
currentStatusFilterIndex: 0,
roleFilters: [
{ id: 1, name: 'All Roles', disabled: false },
@@ -28,17 +29,14 @@ export default {
{ id: 5, name: 'RRC', disabled: false },
],
roleFilter: { id: 1, name: 'All Roles', disabled: false },
currentRoleFilter: 0,
}
},
methods: {
toggle: () => {
this.dropped = !this.dropped
},
resetFilters() {
this.search = ''
this.unitFilter = this.unitFilters[0];
this.roleFilter = this.roleFilters[0];
this.currentStatusFilterIndex = 0;
this.currentRoleFilter = 0;
},
filterByName(item) {
if (this.search != '')
@@ -47,7 +45,7 @@ export default {
return true;
},
filterByUnit(item) {
if (this.unitFilter.filter != 'none')
if (this.statusFilters[this.currentStatusFilterIndex].filter != 'none')
return item.status == this.unitFilter.filter;
else
return true;
@@ -62,9 +60,13 @@ export default {
ListboxOption,
ListboxOptions,
Icon,
Dropdown,
},
mounted() {
QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { this.items = value }) //console.log(value); for debug reasons
// QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { this.items = value }) //console.log(value); for debug reasons
// this.items = fetch("http://iceberg-gaming.com:1323/api/members");
//make API request here
},
computed: {
filteredTable() {
@@ -89,51 +91,13 @@ export default {
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">
<Dropdown :values="statusFilters" :currentIndex="currentStatusFilterIndex" display="name"
@changeSelection="(index) => currentStatusFilterIndex = index" class="w-36 mr-2">
</Dropdown>
<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">
<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>
<Dropdown :values="roleFilters" :currentIndex="currentRoleFilter" display="name"
@changeSelection="(index) => currentRoleFilter = index" class="w-36">
</Dropdown>
<button @click="resetFilters()"
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5 mx-2">Clear