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

Removed old dropdown experiments.

Browse Source 
Began to build a dedicated dropdown component.
Replaced basic selects with new custom dropdowns in members page
Updated filter system to be more compatible with the dropdown menus
Cleaned up old code
This commit is contained in:
ajdj100
2023-05-27 11:39:07 -04:00
parent 6ed2c17aef
commit 676548d504
1 changed files with 53 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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.unitFilter.name = 'All Groups'
this.roleFilter = this.roleFilters[0];
}
},
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">
{{ unitFilter.name }}
<!-- <Icon icon="carbon:caret-down" /> -->
<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">{{ 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">
<li :class="{ 'bg-blue': active }">
: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>
@@ -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>