Merge pull request 'fix(csv): fixed the checkbox for companies and used a radio-button instead to make sure only one can be selected at a time' (#41) from dev/matthieu/staging-csv into main
Reviewed-on: Targo/targo_frontend#41
This commit is contained in:
commit
0d068f2156
|
|
@ -1,13 +1,11 @@
|
||||||
<script
|
<script setup lang="ts">
|
||||||
setup
|
|
||||||
lang="ts"
|
|
||||||
>
|
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||||
import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
|
import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
|
||||||
|
|
||||||
const timesheet_store = useTimesheetStore();
|
const timesheet_store = useTimesheetStore();
|
||||||
const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
|
const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
|
||||||
|
const selected_company = ref<'targo' | 'solucom'>('targo');
|
||||||
|
|
||||||
const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
|
const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
|
||||||
Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
|
Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
|
||||||
|
|
@ -68,6 +66,12 @@
|
||||||
report_filter_options.value[typed_key] = new_values.includes(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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -77,7 +81,8 @@
|
||||||
:style="$q.dark.isActive ? 'border: 2px solid var(--q-accent)' : ''"
|
:style="$q.dark.isActive ? 'border: 2px solid var(--q-accent)' : ''"
|
||||||
>
|
>
|
||||||
<!-- main header -->
|
<!-- main header -->
|
||||||
<div class="col-auto bg-primary text-accent text-weight-bolder text-center text-uppercase text-h6 q-py-xs z-top">
|
<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') }}
|
{{ $t('timesheet_approvals.print_report.title') }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -106,17 +111,17 @@
|
||||||
:key="index"
|
:key="index"
|
||||||
class="q-pa-xs col-6"
|
class="q-pa-xs col-6"
|
||||||
>
|
>
|
||||||
<q-checkbox
|
<q-radio
|
||||||
v-model="selected_report_filters"
|
v-model="selected_company"
|
||||||
left-label
|
left-label
|
||||||
color="white"
|
color="white"
|
||||||
dense
|
dense
|
||||||
:label="$t(company.label)"
|
:label="$t(company.label)"
|
||||||
:val="company.value"
|
:val="company.value"
|
||||||
checked-icon="download"
|
checked-icon="radio_button_checked"
|
||||||
unchecked-icon="highlight_off"
|
unchecked-icon="radio_button_unchecked"
|
||||||
class="q-px-md q-py-xs shadow-4 rounded-25 full-width"
|
class="q-px-md q-py-xs shadow-4 rounded-25 full-width"
|
||||||
:class="selected_report_filters.includes(company.value) ? 'bg-accent text-white text-bold' : 'bg-dark'"
|
:class="selected_company.includes(company.value) ? 'bg-accent text-white text-bold' : 'bg-dark'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -139,8 +144,8 @@
|
||||||
color="white"
|
color="white"
|
||||||
dense
|
dense
|
||||||
:val="type.value"
|
:val="type.value"
|
||||||
checked-icon="download"
|
checked-icon="check_box"
|
||||||
unchecked-icon="highlight_off"
|
unchecked-icon="check_box_outline_blank"
|
||||||
:label="$t(type.label)"
|
:label="$t(type.label)"
|
||||||
class="q-px-md q-py-xs shadow-4 rounded-25 full-width"
|
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'"
|
:class="selected_report_filters.includes(type.value) ? 'bg-accent text-white text-bold' : 'bg-white text-primary'"
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,10 @@ export class TimesheetApprovalCSVReportFilters {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.shifts = true;
|
this.shifts = true;
|
||||||
this.expenses = true;
|
this.expenses = true;
|
||||||
this.holiday = false;
|
this.holiday = true;
|
||||||
this.vacation = false;
|
this.vacation = true;
|
||||||
this.targo = true;
|
this.targo = true;
|
||||||
this.solucom = true;
|
this.solucom = false;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user