Merge pull request 'dev/matthieu/csv' (#31) from dev/matthieu/csv into main
Reviewed-on: Targo/targo_frontend#31
This commit is contained in:
commit
11afa42b58
|
|
@ -137,6 +137,7 @@ export default {
|
|||
update: "update",
|
||||
modify: "modify",
|
||||
close: "close",
|
||||
download: "download",
|
||||
},
|
||||
misc: {
|
||||
or: "or",
|
||||
|
|
@ -263,10 +264,12 @@ export default {
|
|||
expenses_title: "expenses accrued",
|
||||
},
|
||||
print_report: {
|
||||
company: "company",
|
||||
title: "Download options",
|
||||
company: "companies",
|
||||
type: "type",
|
||||
shifts: "shifts",
|
||||
expenses: "expenses",
|
||||
options: "options",
|
||||
},
|
||||
tooltip: {
|
||||
button_detailed_view: "detailed view",
|
||||
|
|
|
|||
|
|
@ -138,6 +138,7 @@ export default {
|
|||
update: "mettre à jour",
|
||||
modify: "modifier",
|
||||
close: "fermer",
|
||||
download: "téléchargement",
|
||||
},
|
||||
misc: {
|
||||
or: "ou",
|
||||
|
|
@ -264,10 +265,12 @@ export default {
|
|||
expenses_title: "dépenses encourues"
|
||||
},
|
||||
print_report: {
|
||||
company: "compagnie",
|
||||
title: "options de téléchargement",
|
||||
company: "compagnies",
|
||||
type: "types de données",
|
||||
shifts: "quarts de travail",
|
||||
expenses: "dépenses",
|
||||
options: "options",
|
||||
},
|
||||
tooltip: {
|
||||
button_detailed_view: "vue détaillée",
|
||||
|
|
|
|||
|
|
@ -1,19 +1,12 @@
|
|||
<script
|
||||
setup
|
||||
lang="ts"
|
||||
>
|
||||
<script setup lang="ts">
|
||||
/* eslint-disable */
|
||||
import { computed, ref } from 'vue';
|
||||
import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
|
||||
import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
|
||||
import { useExpensesStore } from 'src/stores/expense-store';
|
||||
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
|
||||
import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
|
||||
|
||||
const expenses_store = useExpensesStore();
|
||||
const timesheet_store = useTimesheetStore();
|
||||
const timesheet_approval_api = useTimesheetApprovalApi();
|
||||
|
||||
const visible_columns = ref<string[]>([
|
||||
overview_column_names.REGULAR,
|
||||
|
|
@ -37,6 +30,8 @@
|
|||
|
||||
timesheet_store.is_details_dialog_open = true;
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,144 @@
|
|||
<script
|
||||
setup
|
||||
lang="ts"
|
||||
>
|
||||
import { default_timesheet_approval_cvs_report_filters, type TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
|
||||
import { ref, computed } from '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 report_filter_options = ref<TimesheetApprovalCSVReportFilters>(default_timesheet_approval_cvs_report_filters);
|
||||
const timesheet_store = useTimesheetStore();
|
||||
const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
|
||||
|
||||
const company_options = [
|
||||
{ label: 'Targo', value: report_filter_options.value.companies.targo },
|
||||
{ label: 'Solucom', value: report_filter_options.value.companies.solucom },
|
||||
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 = [
|
||||
{ label: 'timesheet_approvals.print_report.shifts', value: report_filter_options.value.types.shifts },
|
||||
{ label: 'timesheet_approvals.print_report.expenses', value: report_filter_options.value.types.expenses },
|
||||
{ label: 'shared.shift_type.holiday', value: report_filter_options.value.types.holiday },
|
||||
{ label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
|
||||
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_disabled = computed(() => {
|
||||
return company_options.map(option => option.value).filter(value => value === true).length > 0 ||
|
||||
type_options.map(option => option.value).filter(value => value === true).length > 0;
|
||||
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 = `Desjardins_${companies}_${types}_${new Date().toISOString().split('T')[0]}.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);
|
||||
console.log('CSV preview:', data);
|
||||
} 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);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-btn-group
|
||||
rounded
|
||||
push
|
||||
>
|
||||
<q-btn
|
||||
rounded
|
||||
push
|
||||
color="primary"
|
||||
icon="print"
|
||||
:disable="is_download_button_disabled"
|
||||
/>
|
||||
|
||||
<q-btn-dropdown
|
||||
rounded
|
||||
push
|
||||
color="white"
|
||||
text-color="primary"
|
||||
icon="checklist"
|
||||
>
|
||||
<q-list class="row">
|
||||
<q-item class="col">
|
||||
<q-item-label class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
|
||||
<q-dialog v-model="timesheet_store.is_report_dialog_open">
|
||||
<div class="bg-secondary full-width shadow-24 rounded-10 column">
|
||||
<div class="shadow-1 bg-primary text-accent text-weight-bold text-center text-uppercase">
|
||||
<span> {{ $t('timesheet_approvals.print_report.title') }}</span>
|
||||
</div>
|
||||
<div class="row q-py-md q-px-lg">
|
||||
<div class="col-auto full-width shadow-1 row bg-dark q-py-xs q-px-lg rounded-10">
|
||||
<span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
|
||||
{{ $t('timesheet_approvals.print_report.company') }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-section
|
||||
row
|
||||
no-wrap
|
||||
</span>
|
||||
<div class="row bordered-primary col-auto full-width">
|
||||
<div
|
||||
v-for="company, index in company_options"
|
||||
:key="index"
|
||||
class="q-pa-xs col-6"
|
||||
>
|
||||
<q-checkbox
|
||||
v-for="option, index in company_options"
|
||||
v-model="selected_report_filters"
|
||||
left-label
|
||||
color="white"
|
||||
class="q-px-md shadow-4 rounded-25 full-width"
|
||||
dense
|
||||
:class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : 'bg-dark'"
|
||||
:label="$t(company.label)"
|
||||
:val="company.value"
|
||||
checked-icon="download"
|
||||
unchecked-icon="highlight_off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-py-md">
|
||||
<div class="col-auto full-width shadow-1 row bg-dark q-px-lg rounded-10 q-pb-sm">
|
||||
<span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
|
||||
{{ $t('timesheet_approvals.print_report.options') }}
|
||||
</span>
|
||||
<div class=" row bordered-primary col-auto full-width">
|
||||
<div
|
||||
v-for="type, index in type_options"
|
||||
:key="index"
|
||||
v-model="option.value"
|
||||
:val="option.label"
|
||||
:label="option.label"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator
|
||||
spaced
|
||||
vertical
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<q-item class="col">
|
||||
<q-item-section
|
||||
row
|
||||
no-wrap
|
||||
class="q-pa-xs col-6"
|
||||
>
|
||||
<p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
|
||||
{{ $t('timesheet_approvals.print_report.type') }}</p>
|
||||
<q-checkbox
|
||||
v-for="option, index in type_options"
|
||||
:key="index"
|
||||
v-model="option.value"
|
||||
:val="option.label"
|
||||
:label="option.label"
|
||||
v-model="selected_report_filters"
|
||||
left-label
|
||||
color="white"
|
||||
class="q-px-md shadow-4 rounded-25 full-width"
|
||||
dense
|
||||
:class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : 'bg-dark'"
|
||||
:label="$t(type.label)"
|
||||
:val="type.value"
|
||||
checked-icon="download"
|
||||
unchecked-icon="highlight_off"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</q-btn-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<q-btn
|
||||
:disable="!is_download_button_enable"
|
||||
square
|
||||
size="md"
|
||||
icon="download"
|
||||
:color="is_download_button_enable ? 'accent' : 'grey-5'"
|
||||
:label="$t('shared.label.download')"
|
||||
@click="onClickedDownload()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
@ -26,21 +26,16 @@ export const useTimesheetApprovalApi = () => {
|
|||
timesheet_store.is_loading = false;
|
||||
};
|
||||
|
||||
const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[], year?: number, period_number?: number) => {
|
||||
const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[]) => {
|
||||
if (timesheet_store.pay_period === undefined) return;
|
||||
|
||||
const [targo, solucom] = report_filter_company;
|
||||
const [shifts, expenses, holiday, vacation] = report_filter_type;
|
||||
const options = {
|
||||
types: { shifts, expenses, holiday, vacation },
|
||||
companies: { targo, solucom },
|
||||
shifts, expenses, holiday, vacation, targo, solucom
|
||||
} as TimesheetApprovalCSVReportFilters;
|
||||
|
||||
await timesheet_store.getPayPeriodReportByYearAndPeriodNumber(
|
||||
year ?? timesheet_store.pay_period.pay_year,
|
||||
period_number ?? timesheet_store.pay_period.pay_period_no,
|
||||
options
|
||||
);
|
||||
await timesheet_store.getPayPeriodReport(options);
|
||||
};
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,25 +1,18 @@
|
|||
export interface TimesheetApprovalCSVReportFilters {
|
||||
types: {
|
||||
export class TimesheetApprovalCSVReportFilters {
|
||||
shifts: boolean;
|
||||
expenses: boolean;
|
||||
holiday: boolean;
|
||||
vacation: boolean;
|
||||
};
|
||||
companies: {
|
||||
targo: boolean;
|
||||
solucom: boolean;
|
||||
|
||||
constructor() {
|
||||
this.shifts = true;
|
||||
this.expenses = true;
|
||||
this.holiday = false;
|
||||
this.vacation = false;
|
||||
this.targo = true;
|
||||
this.solucom = true;
|
||||
};
|
||||
}
|
||||
|
||||
export const default_timesheet_approval_cvs_report_filters: TimesheetApprovalCSVReportFilters = {
|
||||
types: {
|
||||
shifts: true,
|
||||
expenses: true,
|
||||
holiday: true,
|
||||
vacation: true,
|
||||
},
|
||||
companies: {
|
||||
targo: true,
|
||||
solucom: true,
|
||||
},
|
||||
};
|
||||
|
|
@ -8,8 +8,8 @@ export const timesheetApprovalService = {
|
|||
return response.data.data;
|
||||
},
|
||||
|
||||
getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
|
||||
const response = await api.get(`csv/${year}/${period_number}`, { params: { report_filters, }});
|
||||
return response.data;
|
||||
getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, filters?: TimesheetApprovalCSVReportFilters) => {
|
||||
const response = await api.get(`exports/csv/${year}/${period_number}`, { params: filters, responseType: 'arraybuffer' });
|
||||
return response;
|
||||
},
|
||||
};
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
<script
|
||||
setup
|
||||
lang="ts"
|
||||
>
|
||||
<script setup lang="ts">
|
||||
/* eslint-disable */
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { date } from 'quasar';
|
||||
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
|
||||
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||
|
|
@ -12,6 +9,7 @@
|
|||
import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
|
||||
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
|
||||
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
|
||||
import OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';
|
||||
|
||||
const timesheet_approval_api = useTimesheetApprovalApi();
|
||||
const timesheet_store = useTimesheetStore();
|
||||
|
|
@ -66,20 +64,23 @@
|
|||
]"
|
||||
/>
|
||||
|
||||
<div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md ? 'q-mb-md' : ''">
|
||||
<q-btn-dropdown
|
||||
<div
|
||||
class="col-auto row no-wrap flex-center"
|
||||
:class="$q.screen.lt.md ? 'q-mb-md' : ''"
|
||||
>
|
||||
<q-btn
|
||||
push
|
||||
rounded
|
||||
icon="filter_alt"
|
||||
icon="download"
|
||||
color="accent"
|
||||
:label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
|
||||
:label="$q.screen.lt.md ? '' : $t('shared.label.download')"
|
||||
class="col-auto q-mr-sm"
|
||||
@click="timesheet_store.is_report_dialog_open = true"
|
||||
/>
|
||||
|
||||
<QTableFilters v-model:search="timesheet_store.search_filter" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OverviewReport/>
|
||||
<OverviewList class="col" />
|
||||
</q-page>
|
||||
</template>
|
||||
|
|
@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
|
|||
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
|
||||
import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
|
||||
import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
|
||||
import type { TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
|
||||
import type { PayPeriodOverviewResponse, TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
|
||||
import type { PayPeriod } from 'src/modules/shared/models/pay-period.models';
|
||||
import type { Timesheet } from 'src/modules/timesheets/models/timesheet.models';
|
||||
import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
|
||||
|
|
@ -17,6 +17,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
const initial_timesheets = ref<Timesheet[]>([]);
|
||||
|
||||
const pay_period_overviews = ref<TimesheetOverview[]>([]);
|
||||
const pay_period_infos = ref<PayPeriodOverviewResponse>();
|
||||
const is_report_dialog_open = ref(false);
|
||||
|
||||
const is_details_dialog_open = ref(false);
|
||||
const selected_employee_name = ref<string>();
|
||||
|
|
@ -93,15 +95,12 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
}
|
||||
};
|
||||
|
||||
const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
|
||||
const getPayPeriodReport = async (report_filters: TimesheetApprovalCSVReportFilters) => {
|
||||
try {
|
||||
const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
|
||||
year,
|
||||
period_number,
|
||||
report_filters
|
||||
);
|
||||
if (!pay_period.value) return false;
|
||||
const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no, report_filters);
|
||||
pay_period_report.value = response;
|
||||
return true;
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('There was an error retrieving the report CSV: ', error);
|
||||
// TODO: More in-depth error-handling here
|
||||
|
|
@ -110,14 +109,28 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
return false;
|
||||
};
|
||||
|
||||
const openReportDialog = () => {
|
||||
is_report_dialog_open.value = true;
|
||||
is_loading.value = true;
|
||||
|
||||
|
||||
is_loading.value = false;
|
||||
};
|
||||
|
||||
const closeReportDialog = () => {
|
||||
is_report_dialog_open.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
is_loading,
|
||||
is_report_dialog_open,
|
||||
is_approval_grid_mode,
|
||||
is_details_dialog_open,
|
||||
search_filter,
|
||||
pay_period,
|
||||
pay_period_overviews,
|
||||
current_pay_period_overview,
|
||||
pay_period_infos,
|
||||
selected_employee_name,
|
||||
timesheets,
|
||||
all_current_shifts,
|
||||
|
|
@ -125,6 +138,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
getPayPeriodByDateOrYearAndNumber,
|
||||
getTimesheetOverviews,
|
||||
getTimesheetsByOptionalEmployeeEmail,
|
||||
getPayPeriodReportByYearAndPeriodNumber,
|
||||
getPayPeriodReport,
|
||||
openReportDialog,
|
||||
closeReportDialog,
|
||||
};
|
||||
});
|
||||
25
src/utils/boolean-utils.ts
Normal file
25
src/utils/boolean-utils.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// export const createDefaultBooleanValue = <T extends PropertyKey>(keys_list: PropertyKey[]): Record<T, boolean> =>
|
||||
// keys_list.reduce((acc, mod) => {
|
||||
// acc[mod] = false;
|
||||
// return acc;
|
||||
// }, {} as Record<T, boolean>);
|
||||
|
||||
|
||||
// export const toBooleanFromKeys = <T extends PropertyKey>(keys_list: PropertyKey[], arr?: readonly PropertyKey[] | null): Record<T, boolean> => {
|
||||
// const result = createDefaultBooleanValue(keys_list);
|
||||
// if (!arr || !Array.isArray(arr)) return result;
|
||||
// for (const item of arr) {
|
||||
// if (typeof item !== 'string') continue;
|
||||
// const trimmed = item.trim();
|
||||
// if ((keys_list as readonly PropertyKey[]).includes(trimmed)) {
|
||||
// result[trimmed as T] = true;
|
||||
// }
|
||||
// }
|
||||
// return result;
|
||||
// }
|
||||
|
||||
export const toKeysFromBoolean = <T extends PropertyKey>(boolean_values: Record<T, boolean>): T[] => {
|
||||
const values_array = Object.entries(boolean_values);
|
||||
const values = values_array.filter(([_key, value]) => value === true);
|
||||
return values.map(([key]) => key as T);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user