17th Website/src/views/users.vue

@@ -1,7 +1,7 @@
 <script>
 import { ref } from 'vue'
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
-import testDropdown from '../components/dropdown/testDropdown.vue'
+import { Icon } from '@iconify/vue'
 
 export default {
     data() {
@@ -10,9 +10,6 @@ export default {
             items: [{ message: 'Foo' }, { message: 'Bar' }],
             dropped: false,
             search: '',
-            filter1: 'All Groups',
-
-            filter2: 'All Roles',
 
             unitFilters: [
                 { id: 1, name: 'All Groups', disabled: false },
@@ -23,6 +20,16 @@ export default {
             ],
 
             unitFilter: { id: 1, name: 'All Groups', disabled: false },
+
+            roleFilters: [
+                { id: 1, name: 'All Roles', disabled: false },
+                { id: 2, name: 'NCO', disabled: false },
+                { id: 3, name: 'Admin', disabled: false },
+                { id: 4, name: 'Recruiter', disabled: false },
+                { id: 5, name: 'RRC', disabled: false },
+            ],
+
+            roleFilter: { id: 1, name: 'All Roles', disabled: false },
         }
     },
     methods: {
@@ -30,12 +37,9 @@ export default {
             this.dropped = !this.dropped
         },
         resetFilters() {
-            this.filter1 = 'All Groups'
-            this.filter2 = 'All Roles'
             this.search = ''
             this.unitFilter = this.unitFilters[0];
-            // this.unitFilter.id = 1
+            this.roleFilter = this.roleFilters[0];
-            // this.unitFilter.name = 'All Groups'
         }
     },
     components: {
@@ -43,7 +47,7 @@ export default {
         ListboxButton,
         ListboxOption,
         ListboxOptions,
-        testDropdown,
+        Icon,
     },
 
 }
@@ -59,31 +63,23 @@ export default {
         <div id="searchRow">
             <input type="text" v-model="search" placeholder="Search..." />
             <div id="dropdownWrapper">
-                <select v-model="filter1">
-                    <option>All Groups</option>
-                    <option>Alpha</option>
-                    <option>Echo</option>
-                    <option>HHC</option>
-                    <option>Recruit</option>
-                </select>
-                <select v-model="filter2">
-                    <option>All Roles</option>
-                    <option>NCO</option>
-                    <option>Admin</option>
-                    <option>Recruiter</option>
-                    <option>RRC</option>
-                </select>
 
-                <Listbox v-model="unitFilter">
+                <Listbox v-model="unitFilter" class="w-32 mx-2">
                     <div class="relative">
-                        <ListboxButton class=" h-11 bg-gray-dark text-white px-5 rounded-md hover:bg-blue transition-all">
+                        <ListboxButton
-                            {{ unitFilter.name }}
+                            class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
-                            <!-- <Icon icon="carbon:caret-down" /> -->
+
+                            <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="bg-gray-dark last:rounded-b-md first:rounded-none fixed text-white">
+                        <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">
+                                :disabled="unit.disabled" v-slot="{ active, selected }"
-                                <li :class="{ 'bg-blue': active }">
+                                class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
+                                <li>
                                     {{ unit.name }}
                                 </li>
                             </ListboxOption>
@@ -91,9 +87,32 @@ export default {
                     </div>
                 </Listbox>
 
-                <!-- This button needs to get finished -->
+                <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()"
-                    class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s">Clear Filters</button>
+                    class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5 ">Clear
+                    Filters</button>
             </div>
         </div>
 
@@ -119,7 +138,7 @@ export default {
     </table>
 </template>
 
-<style>
+<style scoped>
 .lbButton {
     background-color: var(--background-secondary);
     border: none;
@@ -168,7 +187,6 @@ input {
     border-style: none;
     border-radius: 5px;
     width: 25vw;
-    /* transition: all 0.2s ease-out; THESE TRANSITIONS ARE BROKEN*/
 }
 
 /* textarea:focus, input:focus {
@@ -226,5 +244,4 @@ th {
     background-color: var(--background-secondary);
     font-size: 18px;
     cursor: auto;
-}
+}</style>
-</style>