feat(csv): added a dialog to personnalize the csv to download
This commit is contained in:
Matthieu Haineault
parent
36612b5f4a
commit
0c6fd3289e
|
|
@ -1,38 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||
|
||||
const timesheet_store = useTimesheetStore();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog
|
||||
v-model="timesheet_store.is_csv_dialog_open"
|
||||
persistent
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-down"
|
||||
>
|
||||
<q-card
|
||||
class="q-pa-none rounded-10 shadow-10"
|
||||
:class="$q.screen.lt.md ? ' bg-primary' : 'bg-secondary'"
|
||||
style=" min-width: 70vw;"
|
||||
:style="$q.dark.isActive ? 'border: solid 2px var(--q-accent);' : ''"
|
||||
>
|
||||
<q-inner-loading :showing="timesheet_store.is_loading">
|
||||
<q-spinner size="32px" />
|
||||
</q-inner-loading>
|
||||
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-separator
|
||||
v-if="$q.screen.lt.md"
|
||||
spaced
|
||||
color="accent"
|
||||
size="2px"
|
||||
class="q-mx-md"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
</q-dialog>
|
||||
|
||||
</template>
|
||||
|
|
@ -1,42 +1,37 @@
|
|||
<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';
|
||||
<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 { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||
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 timesheet_store = useTimesheetStore();
|
||||
|
||||
const visible_columns = ref<string[]>([
|
||||
overview_column_names.REGULAR,
|
||||
overview_column_names.EVENING,
|
||||
overview_column_names.EMERGENCY,
|
||||
overview_column_names.SICK,
|
||||
overview_column_names.VACATION,
|
||||
overview_column_names.HOLIDAY,
|
||||
overview_column_names.OVERTIME,
|
||||
overview_column_names.IS_APPROVED,
|
||||
]);
|
||||
const visible_columns = ref<string[]>([
|
||||
overview_column_names.REGULAR,
|
||||
overview_column_names.EVENING,
|
||||
overview_column_names.EMERGENCY,
|
||||
overview_column_names.SICK,
|
||||
overview_column_names.VACATION,
|
||||
overview_column_names.HOLIDAY,
|
||||
overview_column_names.OVERTIME,
|
||||
overview_column_names.IS_APPROVED,
|
||||
]);
|
||||
|
||||
const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
|
||||
[] :
|
||||
timesheet_store.pay_period_overviews
|
||||
)
|
||||
const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
|
||||
[] :
|
||||
timesheet_store.pay_period_overviews
|
||||
)
|
||||
|
||||
const onClickedDetails = async (row: TimesheetOverview) => {
|
||||
timesheet_store.current_pay_period_overview = row;
|
||||
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
|
||||
|
||||
timesheet_store.is_details_dialog_open = true;
|
||||
};
|
||||
|
||||
const onClickedDetails = async (row: TimesheetOverview) => {
|
||||
timesheet_store.current_pay_period_overview = row;
|
||||
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
|
||||
|
||||
timesheet_store.is_details_dialog_open = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,92 @@
|
|||
<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 } 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 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)
|
||||
);
|
||||
|
||||
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 },
|
||||
];
|
||||
interface ReportOptions {
|
||||
label: string;
|
||||
value: keyof TimesheetApprovalCSVReportFilters;
|
||||
};
|
||||
|
||||
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 timesheet_store = useTimesheetStore();
|
||||
|
||||
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 () => {
|
||||
await timesheet_store.getPayPeriodReport(report_filter_options.value);
|
||||
}
|
||||
</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">
|
||||
{{ $t('timesheet_approvals.print_report.company') }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-section
|
||||
row
|
||||
no-wrap
|
||||
>
|
||||
<q-checkbox
|
||||
v-for="option, index in company_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-dialog v-model="timesheet_store.is_report_dialog_open">
|
||||
<div class="bg-dark column full-width">
|
||||
<div class="row col-auto q-py-md q-px-sm">
|
||||
<q-checkbox
|
||||
v-for="company, index in company_options"
|
||||
:key="index"
|
||||
v-model="selected_report_filters"
|
||||
left-label
|
||||
:label="$t(company.label)"
|
||||
:val="company.value"
|
||||
class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
|
||||
dense
|
||||
:class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : ''"
|
||||
color="white"
|
||||
checked-icon="download"
|
||||
unchecked-icon="highlight_off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-item class="col">
|
||||
<q-item-section
|
||||
row
|
||||
no-wrap
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</q-btn-group>
|
||||
<div class="row col-auto q-py-md q-px-sm">
|
||||
<q-checkbox
|
||||
v-for="type, index in type_options"
|
||||
:key="index"
|
||||
v-model="selected_report_filters"
|
||||
left-label
|
||||
color="white"
|
||||
class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
|
||||
dense
|
||||
:class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : ''"
|
||||
:label="$t(type.label)"
|
||||
:val="type.value"
|
||||
checked-icon="download"
|
||||
unchecked-icon="highlight_off"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
:disable="!is_download_button_enable"
|
||||
dense
|
||||
push
|
||||
size="md"
|
||||
icon="download"
|
||||
class=""
|
||||
: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: {
|
||||
shifts: boolean;
|
||||
expenses: boolean;
|
||||
holiday: boolean;
|
||||
vacation: boolean;
|
||||
};
|
||||
companies: {
|
||||
targo: boolean;
|
||||
solucom: boolean;
|
||||
export class TimesheetApprovalCSVReportFilters {
|
||||
shifts: boolean;
|
||||
expenses: boolean;
|
||||
holiday: boolean;
|
||||
vacation: boolean;
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
|
@ -9,6 +9,7 @@ import OverviewList from 'src/modules/timesheet-approval/components/overview-lis
|
|||
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();
|
||||
|
|
@ -74,12 +75,12 @@ onMounted(async () => {
|
|||
color="accent"
|
||||
: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,7 +17,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
const initial_timesheets = ref<Timesheet[]>([]);
|
||||
|
||||
const pay_period_overviews = ref<TimesheetOverview[]>([]);
|
||||
const is_csv_dialog_open = ref(false);
|
||||
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>();
|
||||
|
|
@ -94,9 +95,10 @@ 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;
|
||||
} catch (error) {
|
||||
|
|
@ -107,15 +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_csv_dialog_open,
|
||||
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,
|
||||
|
|
@ -123,6 +138,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
getPayPeriodByDateOrYearAndNumber,
|
||||
getTimesheetOverviews,
|
||||
getTimesheetsByOptionalEmployeeEmail,
|
||||
getPayPeriodReportByYearAndPeriodNumber,
|
||||
getPayPeriodReport,
|
||||
openReportDialog,
|
||||
closeReportDialog,
|
||||
};
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user