17th-Site-Front-End-V2/17th Website/src/views/users.vue

<script>
import { ref } from 'vue'
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
import testDropdown from '../components/dropdown/testDropdown.vue'

export default {
    data() {
        return {
            parentMessage: 'Parent',
            items: [{ message: 'Foo' }, { message: 'Bar' }],
            dropped: false,
            search: '',
            filter1: 'All Groups',

            filter2: 'All Roles',

            unitFilters: [
                { id: 1, name: 'All Groups', disabled: false },
                { id: 2, name: 'Alpha', disabled: false },
                { id: 3, name: 'Echo', disabled: false },
                { id: 4, name: 'HHC', disabled: false },
                { id: 5, name: 'Recruit', disabled: false },
            ],

            unitFilter: { id: 1, name: 'All Groups', disabled: false },
        }
    },
    methods: {
        toggle: () => {
            this.dropped = !this.dropped
        },
        resetFilters() {
            this.filter1 = 'All Groups'
            this.filter2 = 'All Roles'
            this.search = ''
            this.unitFilter.id = 1
            this.unitFilter.name = 'All Groups'
        }
    },
    components: {
        Listbox,
        ListboxButton,
        ListboxOption,
        ListboxOptions,
        testDropdown,
    },

}

// const unitFilter = ref(unitFilters[1])
</script>

<template>
    <!-- Page header (but not really) -->
    <div id="header">

        <h1>Members</h1>
        <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">
                    <div class="relative">
                        <ListboxButton class="bg-gray-dark text-white px-5 rounded-md hover:bg-blue transition-all">
                            {{ unitFilter.name }}
                            <!-- <Icon icon="carbon:caret-down" /> -->
                        </ListboxButton>
                        <ListboxOptions class="bg-gray-dark last:rounded-b-md fixed 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 }">
                                    {{ unit.name }}
                                </li>
                            </ListboxOption>
                        </ListboxOptions>
                    </div>
                </Listbox>

                <!-- This button needs to get finished -->
                <button @click="resetFilters()"
                    class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s">Clear Filters</button>
            </div>
        </div>

    </div>
    <table id="userTable">
        <thead>
            <tr>
                <th>Member</th>
                <th>Unit</th>
                <th>Rank</th>
                <th>Join Date</th>
                <th>LOA Until</th>
                <th>Last Active</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <tr v-for="(item, index) in items">
                <td>{{ parentMessage }}</td>
                <td>{{ index }}</td>
                <td>{{ item.message }}</td>
            </tr>
        </tbody>
    </table>
</template>

<style>
.lbButton {
    background-color: var(--background-secondary);
    border: none;
    border-radius: 5px;
}

.lbOptions {
    background-color: var(--background-secondary);
    display: block;
    position: absolute;
}

/* button {
    transition: all 0.2s ease-out;
    cursor: pointer;
}

button:hover {
    background-color: var(--accent-primary);
} */

.clicked {
    filter: brightness(85%)
}

#dropdownWrapper {
    margin: 0 15px;
    display: flex;
}

#dropdownWrapper select {
    background-color: var(--background-secondary);
    border: none;
    border-radius: 5px;
    color: var(--white);
    padding: 10px;
    outline: none;
    cursor: pointer;
}

input {
    background-color: var(--background-secondary);
    padding: 10px;
    font-size: 15px;
    color: var(--white);
    border-style: none;
    border-radius: 5px;
    width: 25vw;
    /* transition: all 0.2s ease-out; THESE TRANSITIONS ARE BROKEN*/
}

/* textarea:focus, input:focus {
    outline-color: var(--accent-primary);
    border-color: var(--accent-primary);
}  */

#searchRow {
    margin: 30px 0;
    display: flex;
}

#searchRow select,
button {
    margin: 0 15px 0 0;
}

#header h1 {
    color: var(--white);
    font-weight: 400;
    font-size: 60px;
    margin: 20px 0 20px 0px;
}

tr {
    /* background-color: white; */
    border-style: none none solid none;
    border-width: 2px;
    border-color: var(--background-secondary);

    font-size: 20px;
    font-weight: 100;
    color: var(--white);
}

tr:hover {
    background-color: var(--background-secondary);
    cursor: pointer;
}

/* Table styles */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    /* border: 1px solid #dddddd; */
    text-align: left;
    padding: 8px;
}

th {
    background-color: var(--background-secondary);
    font-size: 18px;
    cursor: auto;
}
</style>