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

<script>
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() {
        return {
            items: [],
            dropped: false,
            search: '',

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

            currentStatusFilterIndex: 0,

            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 },
            ],

            currentRoleFilter: 0,
        }
    },
    methods: {
        resetFilters() {
            this.search = ''
            this.currentStatusFilterIndex = 0;
            this.currentRoleFilter = 0;
        },
        filterByName(item) {
            if (this.search != '')
                return item.member_name.toLowerCase().includes(this.search.toLowerCase());
            else
                return true;
        },
        filterByUnit(item) {
            if (this.statusFilters[this.currentStatusFilterIndex].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,
        Dropdown,
    },
    mounted() {
    //    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() {
            var newTable = this.items;
            newTable = newTable.filter(this.filterByUnit);
            newTable = newTable.filter(this.filterByName);
            return newTable;
        },
    }
}

</script>

<template>
    <div id="wrapper" class="w-full flex flex-wrap content-center flex-col">
        <!-- 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')"
                    class="mx-2 max-w-md" />
                <div id="dropdownWrapper">

                    <Dropdown :values="statusFilters" :currentIndex="currentStatusFilterIndex" display="name" 
                    @changeSelection="(index) => currentStatusFilterIndex = index" class="w-36 mr-2">
                    </Dropdown>

                    <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
                        Filters</button>
                </div>
            </div>

        </div>
        <table id="userTable" class="max-w-screen-xl">
            <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"
                    v-on:click="$router.push({ path: `/profile/${item.member_name}/home` })">
                    <td>{{ item.member_name }}</td>
                    <td>{{ item.status }}</td>
                    <td>{{ item.rank }}</td>
                </tr>
            </tbody>
        </table>
        <p v-show="filteredTable.length <= 0" class="text-white self-center pt-36 text-4xl">No Results</p>
    </div>
</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 {
    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>