From 19c585e698cc7e5b21914d4665fd2923fcadd36b Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Tue, 7 May 2024 15:40:51 -0400
Subject: [PATCH] Integrated new dropdowns

---
 17th Website/src/views/users.vue | 72 ++++++++------------------------
 1 file changed, 18 insertions(+), 54 deletions(-)

diff --git a/17th Website/src/views/users.vue b/17th Website/src/views/users.vue
index 7f18b4b..a9f9e90 100644
--- a/17th Website/src/views/users.vue	
+++ b/17th Website/src/views/users.vue	
@@ -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