targo-frontend/src/modules/employee-list/components/employee-list-table.vue

<script
    setup
    lang="ts"
>
    import EmployeeListTableItem from 'src/modules/employee-list/components/employee-list-table-item.vue';

    import { onMounted, ref } from 'vue';
    import { useUiStore } from 'src/stores/ui-store';
    import { useEmployeeStore } from 'src/stores/employee-store';
    import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';
    import { employee_list_columns, getCompanyName } from 'src/modules/employee-list/models/employee-profile.models';

    const employee_list_api = useEmployeeListApi();
    const employee_store = useEmployeeStore();
    const ui_store = useUiStore();
    const is_loading_list = ref<boolean>(true);

    const filter = ref("");

    onMounted(async () => {
        is_loading_list.value = true;
        await employee_list_api.getEmployeeList();
        is_loading_list.value = false;
    })
</script>

<template>
    <div class="q-pa-lg">
        <q-table
            dense
            hide-pagination
            virtual-scroll
            title=" "
            card-style="max-height: 70vh;"
            :rows="employee_store.employee_list"
            :columns="employee_list_columns"
            row-key="name"
            :rows-per-page-options="[0]"
            :filter="filter"
            class="bg-transparent no-shadow sticky-header-table"
            :style="$q.screen.lt.md ? '' : 'width: 80vw;'"
            :table-class="$q.dark.isActive ? 'q-py-none q-mx-md rounded-10 bg-dark shadow-10' : 'q-py-none q-mx-md rounded-10 bg-white shadow-10'"
            color="accent"
            table-header-class="text-accent text-uppercase"
            card-container-class="justify-center"
            :grid="ui_store.user_preferences.is_employee_list_grid"
            :loading="is_loading_list"
            :no-data-label="$t('shared.error.no_data_found')"
            :no-results-label="$t('shared.error.no_search_results')"
            :loading-label="$t('shared.label.loading')"
            @row-click="() => console.log('click!')"
        >
            <template #header="props">
                <q-tr
                    :props="props"
                    class="bg-accent"
                >
                    <q-th
                        v-for="col in props.cols"
                        :key="col.name"
                        :props="props"
                    >
                        <span class="text-uppercase text-weight-bolder text-white">
                            {{ $t(col.label) }}
                        </span>
                    </q-th>
                </q-tr>
            </template>

            <template v-slot:item="props">
                <EmployeeListTableItem
                    :row="props.row"
                    :index="props.rowIndex"
                    @on-profile-click="employee_store.openAddModifyDialog"
                />
            </template>

            <template v-slot:top>
                <div class="row full-width q-mb-sm">
                    <q-btn
                        push
                        color="accent"
                        icon="person_add"
                        :label="$t('shared.label.add')"
                        class="text-uppercase"
                        @click.stop="_evt => employee_store.openAddModifyDialog()"
                    />

                    <q-space />

                    <q-btn-toggle
                        v-model="ui_store.user_preferences.is_employee_list_grid"
                        push
                        rounded
                        color="white"
                        text-color="accent"
                        toggle-color="accent"
                        class="q-mr-md"
                        :options="[
                            { icon: 'grid_view', value: true },
                            { icon: 'view_list', value: false },
                        ]"
                    />
                    <q-input
                        v-model="filter"
                        outlined
                        dense
                        rounded
                        color="accent"
                        bg-color="white"
                        label-color="accent"
                        :label="$t('shared.label.search')"
                    >
                        <template v-slot:append>
                            <q-icon
                                name="search"
                                color="accent"
                            />
                        </template>
                    </q-input>
                </div>
            </template>

            <template #body-cell="scope">
                <q-td
                    :props="scope"
                    class="text-weight-medium"
                >
                    <span v-if="scope.col.name === 'company_name'"> {{ getCompanyName(scope.value) }}</span>
                    <span v-else>{{ scope.value }}</span>
                </q-td>
            </template>

            <!-- Template for custome failed-to-load state -->
            <template v-slot:no-data="{ message, filter }">
                <div class="full-width column items-center text-accent q-gutter-sm">
                    <span class="text-h6 q-mt-xl">
                        {{ message }}
                    </span>
                    <q-icon
                        size="4em"
                        :name="filter ? 'filter_alt_off' : 'error_outline'"
                    />
                </div>
            </template>
        </q-table>
    </div>
</template>

<style lang="sass">
.sticky-header-table
  thead tr:first-child th
    background-color: var(--q-accent)
    margin-top: none

  thead tr th
    position: sticky
    z-index: 1
  thead tr:first-child th
    top: 0px

  &.q-table--loading thead tr:last-child th
    top: 48px

  tbody
    scroll-margin-top: 48px
</style>