targo-frontend/src/modules/timesheet-approval/components/details-dialog.vue

<script
    setup
    lang="ts"
>
    import { useI18n } from 'vue-i18n';
    import { computed, ref } from 'vue';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import DetailsDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue';
    import DetailsDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue';
    import DetailsDialogChartExpenses from 'src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue';
    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
    import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';
    import { useTimesheetApprovalApi } from '../composables/use-timesheet-approval-api';
    import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';

    // ========== state ========================================

    const { t } = useI18n();
    const timesheetStore = useTimesheetStore();
    const timesheetApprovalApi = useTimesheetApprovalApi();
    const shiftApi = useShiftApi();
    const isDialogOpen = ref(false);

    // ========== computed ========================================

    const isApproved = computed(() => timesheetStore.timesheets.every(timesheet => timesheet.is_approved));
    const approveButtonLabel = computed(() => isApproved.value ?
        t('shared.label.unlock') :
        t('shared.label.lock')
    );
    const approveButtonIcon = computed(() => isApproved.value ? 'las la-lock' : 'las la-unlock');
    const hasExpenses = computed(() => timesheetStore.timesheets.some(timesheet =>
        Object.values(timesheet.weekly_expenses).some(hours => hours > 0))
    );

    // ========== methods ========================================

    const onClickApproveAll = async () => {
        const employeeEmail = timesheetStore.current_pay_period_overview?.email;
        const isApproved = timesheetStore.timesheets.every(timesheet => timesheet.is_approved);

        if (employeeEmail !== undefined && isApproved !== undefined) {
            await timesheetApprovalApi.toggleTimesheetsApprovalByEmployeeEmail(
                employeeEmail,
                !isApproved
            );
        }
    }

    const onClickSaveTimesheets = async () => {
        await shiftApi.saveShiftChanges(timesheetStore.current_pay_period_overview?.email);
    }
</script>

<template>
    <q-dialog
        v-model="timesheetStore.is_details_dialog_open"
        full-width
        full-height
        transition-show="jump-down"
        transition-hide="jump-down"
        backdrop-filter="blur(6px)"
        @show="isDialogOpen = true"
        @hide="isDialogOpen = false"
        @before-hide="timesheetStore.getTimesheetOverviews"
    >
        <div
            class="column bg-secondary hide-scrollbar shadow-12 rounded-15 q-pb-sm no-wrap"
            :style="($q.screen.lt.md ? '' : 'width:80vw !important;') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
        >
            <!-- employee name -->
            <div class="col-auto row flex-center q-px-none q-py-sm sticky-top bg-secondary full-width shadow-4">
                <span class="col-auto text-h4 text-weight-bolder text-uppercase q-px-lg">
                    {{ timesheetStore.selected_employee_name }}
                </span>

                <div class="col-auto q-px-lg">
                    <q-btn
                        :push="isApproved"
                        :outline="!isApproved"
                        dense
                        size="lg"
                        color="accent"
                        :label="approveButtonLabel"
                        class="q-px-xl"
                        @click="onClickApproveAll"
                    >
                        <transition
                            enter-active-class="animated swing"
                            mode="out-in"
                        >
                            <q-icon
                                :key="isApproved ? '1' : '2'"
                                :name="approveButtonIcon"
                                class="q-pl-md"
                            />
                        </transition>
                    </q-btn>
                </div>

                <q-space />

                <div class="col-auto q-px-md">
                    <q-btn
                        push
                        dense
                        size="lg"
                        :disable="timesheetStore.is_loading || !timesheetStore.canSaveTimesheets"
                        :color="timesheetStore.is_loading || !timesheetStore.canSaveTimesheets ? 'grey-5' : 'accent'"
                        icon="upload"
                        :label="$t('shared.label.save')"
                        :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'full-width' : 'q-ml-md'"
                        @click="onClickSaveTimesheets"
                    />
                </div>
            </div>

            <!-- employee pay period details using chart -->
            <div
                v-if="isDialogOpen"
                class="col-auto q-px-md no-wrap"
                :class="$q.platform.is.mobile ? 'column' : 'row'"
            >
                <DetailsDialogChartHoursWorked class="col" />
                <DetailsDialogChartShiftTypes class="col" />
                <DetailsDialogChartExpenses
                    v-if="hasExpenses"
                    class="col"
                />
            </div>

            <div class="col-auto">
                <ExpenseDialogList mode="approval" />
            </div>

            <!-- list of shifts -->
            <div class="col-auto">
                <TimesheetWrapper
                    mode="approval"
                    :employee-email="timesheetStore.current_pay_period_overview?.email"
                    class="col-auto"
                />
            </div>
        </div>
    </q-dialog>
</template>

<style scoped>
.sticky-top {
    position: sticky;
    z-index: 5;
    top: 0;
}
</style>