targo-frontend/src/modules/timesheet-approval/components/overview-report.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';

const timesheet_store = useTimesheetStore();
const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
const selected_company = ref<'targo' | 'solucom'>('targo');

const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
    Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
);

interface ReportOptions {
    label: string;
    value: keyof TimesheetApprovalCSVReportFilters;
};

const company_options: ReportOptions[] = [
    { label: 'Targo', value: 'targo' },
    { label: 'Solucom', value: 'solucom' },
];

const type_options: ReportOptions[] = [
    { label: 'timesheet_approvals.print_report.shifts', value: 'shifts' },
    { label: 'timesheet_approvals.print_report.expenses', value: 'expenses' },
    { label: 'shared.shift_type.holiday', value: 'holiday' },
    { label: 'shared.shift_type.vacation', value: 'vacation' },
];

const is_download_button_enable = computed(() =>
    company_options.map(option => option.value).some(option => selected_report_filters.value.includes(option)) &&
    type_options.map(option => option.value).some(option => selected_report_filters.value.includes(option))
);

const onClickedDownload = async () => {
    try {
        const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);

        const companies = Object.entries(report_filter_options.value)
            .filter(([key, value]) => value && (key === 'targo' || key === 'solucom')).map(([key]) => key).join('-');

        const types = Object.entries(report_filter_options.value)
            .filter(([key, value]) => value && ['shifts', 'expenses', 'holiday', 'vacation'].includes(key)).map(([key]) => key).join('-');

        const file_name = `${companies}_${types}_${timesheet_store.pay_period?.pay_period_no}-${timesheet_store.pay_period?.pay_year}_${timesheet_store.pay_period?.period_start}-${timesheet_store.pay_period?.period_end}.csv`;

        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');

        link.href = url;
        link.setAttribute('download', file_name);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    } catch (error) {
        console.error(`An error occured during the CSV download: `, error)
    }
}

watch(selected_report_filters, (new_values) => {
    Object.keys(report_filter_options.value).forEach(key => {
        const typed_key = key as keyof TimesheetApprovalCSVReportFilters;
        report_filter_options.value[typed_key] = new_values.includes(key as keyof TimesheetApprovalCSVReportFilters);
    });
});

watch(selected_company, (company) => {
    report_filter_options.value.targo = company === 'targo';
    report_filter_options.value.solucom = company === 'solucom';
});

</script>

<template>
    <q-dialog v-model="timesheet_store.is_report_dialog_open">
        <div
            class="column bg-secondary shadow-24 rounded-10"
            :style="$q.dark.isActive ? 'border: 2px solid var(--q-accent)' : ''"
        >
            <!-- main header -->
            <div
                class="col-auto bg-primary text-accent text-weight-bolder text-center text-uppercase text-h6 q-py-xs z-top">
                {{ $t('timesheet_approvals.print_report.title') }}
            </div>

            <!-- info blurb -->
            <div class="col-auto row flex-center full-width bg-dark shadow-2">
                <q-icon
                    name="info_outline"
                    size="sm"
                    class="col-auto q-mr-xs"
                />

                <span class="col-auto text-weight-light q-mr-sm">
                    {{ $t('timesheet_approvals.print_report.description') }}
                </span>
            </div>

            <!-- company header -->
            <span class="col-auto q-px-sm q-pt-md text-weight-medium text-accent text-uppercase">
                {{ $t('timesheet_approvals.print_report.company') }}
            </span>

            <!-- company options -->
            <div class="col row text-uppercase full-width q-px-md">
                <div
                    v-for="company, index in company_options"
                    :key="index"
                    class="q-pa-xs col-6"
                >
                    <q-radio
                        v-model="selected_company"
                        left-label
                        color="white"
                        dense
                        :label="company.label"
                        :val="company.value"
                        checked-icon="radio_button_checked"
                        unchecked-icon="radio_button_unchecked"
                        class="q-px-md q-py-xs shadow-4 rounded-25 full-width"
                        :class="selected_company.includes(company.value) ? 'bg-accent text-white text-bold' : 'bg-dark'"
                    />
                </div>
            </div>

            <!-- shift type header -->
            <span class="col-auto q-px-sm q-pt-md text-weight-medium text-uppercase text-accent">
                {{ $t('timesheet_approvals.print_report.options') }}
            </span>

            <!-- shift type options -->
            <div class="col row text-uppercase full-width q-px-md q-pb-md">
                <div
                    v-for="type, index in type_options"
                    :key="index"
                    class="q-pa-xs col-6"
                >
                    <q-checkbox
                        v-model="selected_report_filters"
                        left-label
                        color="white"
                        dense
                        :val="type.value"
                        checked-icon="check_box"
                        unchecked-icon="check_box_outline_blank"
                        :label="$t(type.label)"
                        class="q-px-md q-py-xs shadow-4 rounded-25 full-width"
                        :class="selected_report_filters.includes(type.value) ? 'bg-accent text-white text-bold' : 'bg-white text-primary'"
                    />
                </div>
            </div>

            <!-- download button -->
            <q-btn
                :disable="!is_download_button_enable"
                square
                icon="download"
                :color="is_download_button_enable ? 'accent' : 'grey-5'"
                :label="$t('shared.label.download')"
                class="col-auto q-py-sm shadow-up-2"
                @click="onClickedDownload()"
            />
        </div>
    </q-dialog>
</template>