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 { 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'
import Dropdown from '../components/dropdown/Dropdown.vue'
export default { export default {
data() { data() {
@@ -10,7 +11,7 @@ export default {
dropped: false, dropped: false,
search: '', search: '',
unitFilters: [ statusFilters: [
{ id: 1, name: 'All Groups', filter: 'none', disabled: false }, { id: 1, name: 'All Groups', filter: 'none', disabled: false },
{ id: 2, name: 'Alpha', filter: 'Alpha Company', disabled: false }, { id: 2, name: 'Alpha', filter: 'Alpha Company', disabled: false },
{ id: 3, name: 'Echo', filter: 'Echo 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 }, { id: 5, name: 'Recruit', filter: 'Recruit', disabled: false },
], ],
unitFilter: { id: 1, name: 'All Groups', filter: 'none', disabled: false }, currentStatusFilterIndex: 0,
roleFilters: [ roleFilters: [
{ id: 1, name: 'All Roles', disabled: false }, { id: 1, name: 'All Roles', disabled: false },
@@ -28,17 +29,14 @@ export default {
{ id: 5, name: 'RRC', disabled: false }, { id: 5, name: 'RRC', disabled: false },
], ],
roleFilter: { id: 1, name: 'All Roles', disabled: false }, currentRoleFilter: 0,
} }
}, },
methods: { methods: {
toggle: () => {
this.dropped = !this.dropped
},
resetFilters() { resetFilters() {
this.search = '' this.search = ''
this.unitFilter = this.unitFilters[0]; this.currentStatusFilterIndex = 0;
this.roleFilter = this.roleFilters[0]; this.currentRoleFilter = 0;
}, },
filterByName(item) { filterByName(item) {
if (this.search != '') if (this.search != '')
@@ -47,7 +45,7 @@ export default {
return true; return true;
}, },
filterByUnit(item) { filterByUnit(item) {
if (this.unitFilter.filter != 'none') if (this.statusFilters[this.currentStatusFilterIndex].filter != 'none')
return item.status == this.unitFilter.filter; return item.status == this.unitFilter.filter;
else else
return true; return true;
@@ -62,9 +60,13 @@ export default {
ListboxOption, ListboxOption,
ListboxOptions, ListboxOptions,
Icon, Icon,
Dropdown,
}, },
mounted() { 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: { computed: {
filteredTable() { filteredTable() {
@@ -89,51 +91,13 @@ export default {
class="mx-2 max-w-md" /> class="mx-2 max-w-md" />
<div id="dropdownWrapper"> <div id="dropdownWrapper">
<Listbox v-model="unitFilter" class="w-32 mx-2"> <Dropdown :values="statusFilters" :currentIndex="currentStatusFilterIndex" display="name"
<div class="relative"> @changeSelection="(index) => currentStatusFilterIndex = index" class="w-36 mr-2">
<ListboxButton </Dropdown>
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> <Dropdown :values="roleFilters" :currentIndex="currentRoleFilter" display="name"
<span class="absolute inset-y-0 right-0 flex items-center pr-2"> @changeSelection="(index) => currentRoleFilter = index" class="w-36">
<Icon icon="carbon:chevron-sort" /> </Dropdown>
</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>
<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