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 { Icon } from '@iconify/vue'
import QueryApolloGraphQL from '../api/request'

export default {
    data() {
        return {
            items: [],
            dropped: false,
            search: '',

            unitFilters: [
                { 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 },
                { id: 4, name: 'HHC', filter: 'HHC', disabled: false },
                { id: 5, name: 'Recruit', filter: 'Recruit', disabled: false },
            ],

            unitFilter: { id: 1, name: 'All Groups', filter: 'none', 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: {
        toggle: () => {
            this.dropped = !this.dropped
        },
        resetFilters() {
            this.search = ''
            this.unitFilter = this.unitFilters[0];
            this.roleFilter = this.roleFilters[0];
        },
        filterByName(item) {
            if (this.search != '')
                return item.member_name.toLowerCase().includes(this.search.toLowerCase());
            else
                return true;
        },
        filterByUnit(item) {
            if (this.unitFilter.filter != 'none')
                return item.status == this.unitFilter.filter;
            else
                return true;
        },
        filterByRole(item) {    //THIS IS NOT IMPLEMENTED YET
            return true;
        }
    },
    components: {
        Listbox,
        ListboxButton,
        ListboxOption,
        ListboxOptions,
        Icon,
    },
    mounted() {
        QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { this.items = value }) //console.log(value); for debug reasons
    },
    computed: {
        filteredTable() {
            var newTable = this.items;
            newTable = newTable.filter(this.filterByUnit);
            newTable = newTable.filter(this.filterByName);
            return newTable;
        }
    }
}

</script>

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

        <h1>Members</h1>
        <div id="searchRow">
            <input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')" />
            <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">

                            <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>

                <button @click="resetFilters()"
                    class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5">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 filteredTable">
                <td>{{ item.member_name }}</td>
                <td>{{ item.status }}</td>
                <td>{{ item.rank }}</td>
            </tr>
        </tbody>
    </table>
</template>

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

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

.clicked {
    filter: brightness(85%)
}

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

input {
    background-color: var(--background-secondary);
    padding: 10px;
    font-size: 15px;
    color: var(--white);
    border-style: none;
    border-radius: 5px;
    width: 25vw;
}

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

#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>