feat(approvals): add both weeks to modal, time grid and mouseover labels, buttons on employee card. Minor DRYing in various files.
This commit is contained in:
parent
6248cb3354
commit
81e4fd3ed0
|
|
@ -127,6 +127,8 @@ export default defineConfig((ctx) => {
|
|||
// animations: 'all', // --- includes all animations
|
||||
// https://v2.quasar.dev/options/animations
|
||||
animations: [
|
||||
'fadeIn',
|
||||
'fadeOut',
|
||||
'fadeInUp',
|
||||
'zoomIn',
|
||||
'zoomOut',
|
||||
|
|
|
|||
|
|
@ -327,10 +327,8 @@ export default {
|
|||
consumedVacationTotalValidation: 'Consumed with vacation must be positive.',
|
||||
maxVacationPerYearValidation: 'Max Vacation Per Year must be positive.',
|
||||
resteVacationTotal: 'Rest of vacation',
|
||||
validateToolTip: 'Validate',
|
||||
unvalidateToolTip: 'Unvalidate',
|
||||
lockToolTip: 'Lock the week',
|
||||
unlockToolTip: 'Unlock the week',
|
||||
tooltipTimeline: 'Daily breakdown',
|
||||
tooltipTimesheet: 'Open timesheet',
|
||||
},
|
||||
shiftColumns: {
|
||||
title: 'Shifts',
|
||||
|
|
|
|||
|
|
@ -374,10 +374,8 @@ export default {
|
|||
consumedVacationTotalValidation: 'Vacances utilisées doit être positif',
|
||||
maxVacationPerYearValidation: 'Maximum vacances annuel doit être positif.',
|
||||
resteVacationTotal: 'Reste des vacances',
|
||||
validateToolTip: 'Valider',
|
||||
unvalidateToolTip: 'Invalider',
|
||||
lockToolTip: 'Verrouiller la semaine',
|
||||
unlockToolTip: 'Déverrouiller la semaine',
|
||||
tooltipTimeline: 'Vue journalière',
|
||||
tooltipTimesheet: 'Feuille de temps',
|
||||
},
|
||||
usersListPage: {
|
||||
tableHeader: 'Répertoire du personnel',
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export interface EmployeeProfile {
|
|||
company_name: number;
|
||||
job_title: string;
|
||||
email: string;
|
||||
phone_number: number;
|
||||
phone_number: string;
|
||||
first_work_day: string;
|
||||
last_work_day: string;
|
||||
residence: string;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
import type { Shift } from "src/modules/timesheets/types/timesheet-shift-interface";
|
||||
import { date } from 'quasar';
|
||||
|
||||
const totalMinutes = 24 * 60;
|
||||
const total_minutes = 24 * 60;
|
||||
const props = defineProps<{
|
||||
weekdayShifts: (Shift | null)[];
|
||||
}>();
|
||||
|
|
@ -17,29 +17,55 @@
|
|||
return props.weekdayShifts
|
||||
.filter((s): s is Shift => s !== null) // skip null shifts
|
||||
.map((s) => {
|
||||
const start = toMinutes(s.start_time);
|
||||
const end = toMinutes(s.end_time);
|
||||
const start_percent = (start / totalMinutes) * 100;
|
||||
const width_percent = ((end - start) / totalMinutes) * 100;
|
||||
const start = toMinutes(s.start);
|
||||
const end = toMinutes(s.end);
|
||||
const hover = ref<boolean>(false);
|
||||
const start_percent = (start / total_minutes) * 100;
|
||||
const width_percent = ((end - start) / total_minutes) * 100;
|
||||
|
||||
return { start_percent, width_percent };
|
||||
return { start_percent, width_percent, s, hover };
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative full-width bg-grey-4 rounded-10" style="height: 8px; margin: 7px 0;">
|
||||
<div class="relative bg-grey-5 rounded-10 no-wrap" style="height: 4px; margin: 6px 0;">
|
||||
<div
|
||||
v-for="(bar, i) in bars"
|
||||
:key="i"
|
||||
class="absolute bg-primary"
|
||||
v-for="(bar, index) in bars"
|
||||
:key="index"
|
||||
class="absolute bg-primary no-wrap"
|
||||
:style="{
|
||||
left: bar.start_percent + '%',
|
||||
width: bar.width_percent + '%',
|
||||
height: '14px',
|
||||
transform: 'translateY(-3px)',
|
||||
left: bar.start_percent + '%',
|
||||
width: bar.width_percent + '%',
|
||||
height: '10px',
|
||||
transform: 'translateY(-3px)',
|
||||
}"
|
||||
></div>
|
||||
@mouseenter="bar.hover.value = true"
|
||||
@mouseleave="bar.hover.value = false"
|
||||
>
|
||||
<!-- hoverable timestamps -->
|
||||
<transition-group
|
||||
appear
|
||||
enter-active-class="animated fadeIn"
|
||||
leave-active-class="animated fadeOut"
|
||||
>
|
||||
<q-badge
|
||||
v-if="bar.hover.value"
|
||||
style="transform: translate(-110%, -40%);"
|
||||
>
|
||||
{{ bar.s.start }}
|
||||
</q-badge>
|
||||
<q-badge
|
||||
v-if="bar.hover.value"
|
||||
floating style="transform: translate(100%, 5%);"
|
||||
>
|
||||
{{ bar.s.end }}
|
||||
</q-badge>
|
||||
</transition-group>
|
||||
|
||||
<!-- total hours worked per day -->
|
||||
<!-- <q-badge> {{ bar.s.end }}</q-badge> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,18 @@
|
|||
|
||||
const props = defineProps<{
|
||||
isLoading: boolean;
|
||||
employeeName: string;
|
||||
employeeDetails: PayPeriodEmployeeDetails | undefined;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card class="q-pa-sm bg-white shadow-5 full-width">
|
||||
<q-card class="q-pa-md bg-white shadow-12">
|
||||
<!-- loader -->
|
||||
<q-card-section v-if="props.isLoading">
|
||||
<q-card-section
|
||||
v-if="props.isLoading"
|
||||
class="text-center"
|
||||
>
|
||||
<q-spinner
|
||||
color="primary"
|
||||
size="5em"
|
||||
|
|
@ -22,27 +26,86 @@
|
|||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<!-- employee name -->
|
||||
<q-card-section class="text-h5 text-weight-bolder text-center full-width text-primary q-pt-none">
|
||||
{{ props.employeeName }}
|
||||
</q-card-section>
|
||||
|
||||
<!-- employee timesheet details -->
|
||||
<q-card-section
|
||||
v-if="!props.isLoading"
|
||||
class="column"
|
||||
>
|
||||
<div class="absolute-full row justify-center text-center text-primary text-weight-bolder text-caption q-py-none q-my-none q-px-xl q-mx-sm">
|
||||
<q-space />
|
||||
<div class="col">4</div>
|
||||
<div class="col">8</div>
|
||||
<div class="col">12</div>
|
||||
<div class="col">4</div>
|
||||
<div class="col">8</div>
|
||||
<q-space />
|
||||
<q-card-section v-if="!props.isLoading" class="q-pa-none">
|
||||
<div class="relative column col no-wrap bg-transparent">
|
||||
<div class="row text-center full-width text-grey-5 text-weight-bolder text-caption no-wrap">
|
||||
<div class="col"></div>
|
||||
<div class="">4</div>
|
||||
<div class="col"></div>
|
||||
<div class="">8</div>
|
||||
<div class="col"></div>
|
||||
<div class="">12</div>
|
||||
<div class="col"></div>
|
||||
<div class="">4</div>
|
||||
<div class="col"></div>
|
||||
<div class="">8</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<ShiftPreviewBar
|
||||
v-for="(shifts, index) in employeeDetails?.week1.shifts"
|
||||
:key="index"
|
||||
:weekday-shifts="shifts"
|
||||
class="q-mt-xs z-top"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-separator class="q-mx-xl q-my-sm" style="height: 3px;"/>
|
||||
|
||||
<div class="relative column col">
|
||||
<ShiftPreviewBar
|
||||
v-for="(shifts, index) in employeeDetails?.week2.shifts"
|
||||
:key="index"
|
||||
:weekday-shifts="shifts"
|
||||
class="q-mt-xs z-top"
|
||||
/>
|
||||
<div class="row text-center full-width text-grey-5 text-caption no-wrap">
|
||||
<div class="col"></div>
|
||||
<div class="">4</div>
|
||||
<div class="col"></div>
|
||||
<div class="">8</div>
|
||||
<div class="col"></div>
|
||||
<div class="">12</div>
|
||||
<div class="col"></div>
|
||||
<div class="">4</div>
|
||||
<div class="col"></div>
|
||||
<div class="">8</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column absolute-full q-py-lg" style="z-index: 0;">
|
||||
<div class="row col">
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row col q-mt-lg">
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
<q-separator vertical />
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ShiftPreviewBar
|
||||
v-for="(shifts, index) in employeeDetails?.week1.shifts"
|
||||
:key="index"
|
||||
:weekday-shifts="shifts"
|
||||
class="q-mt-xs"
|
||||
/>
|
||||
<!-- {{ employeeDetails }} -->
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
@ -1,12 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
|
||||
|
||||
interface TableColumn {
|
||||
type TableColumn = {
|
||||
name: string;
|
||||
label: string;
|
||||
value: unknown;
|
||||
};
|
||||
|
||||
type CardButton = {
|
||||
icon: string;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
cols: TableColumn[];
|
||||
row: PayPeriodOverviewEmployee;
|
||||
|
|
@ -17,15 +23,20 @@
|
|||
clickDetails: [email: string];
|
||||
'update:modelValue': [value: boolean | null];
|
||||
}>();
|
||||
|
||||
const card_buttons: CardButton[] = [
|
||||
{ icon: 'work_history', label: 'timeSheetValidations.tooltipTimeline', onClick: () => emit('clickDetails', props.row.email) },
|
||||
{ icon: 'open_in_new', label: 'timeSheetValidations.tooltipTimesheet', onClick: () => emit('clickDetails', props.row.email) }
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-px-sm q-pb-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
|
||||
<div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
|
||||
<q-card class="rounded-10">
|
||||
<!-- Card header with employee name and details button-->
|
||||
<q-card-section
|
||||
horizontal
|
||||
class="q-py-none q-pl-md"
|
||||
class="q-py-none q-pl-md relative"
|
||||
>
|
||||
<div class="text-primary text-h5 text-weight-bolder q-pt-xs overflow-hidden">
|
||||
{{ props.row.employee_name }}
|
||||
|
|
@ -33,16 +44,27 @@
|
|||
|
||||
<q-space />
|
||||
|
||||
<!-- Button to get full timesheet details -->
|
||||
<!-- Buttons to view detailed shifts or view employee timesheet -->
|
||||
<q-btn
|
||||
flat
|
||||
unelevated
|
||||
rounded
|
||||
class="q-py-none"
|
||||
square
|
||||
dense
|
||||
v-for="(button, index) in card_buttons"
|
||||
:key="index"
|
||||
class="q-py-none bg-white q-my-xs"
|
||||
color="primary"
|
||||
icon="open_in_full"
|
||||
@click="emit('clickDetails', props.row.email)"
|
||||
/>
|
||||
:icon="button.icon"
|
||||
@click="button.onClick"
|
||||
>
|
||||
<q-tooltip
|
||||
anchor="top middle"
|
||||
self="center middle"
|
||||
class="bg-primary uppercase text-weight-bold"
|
||||
>
|
||||
{{$t(button.label)}}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator
|
||||
|
|
@ -82,7 +104,7 @@
|
|||
<q-item
|
||||
dense
|
||||
class="column ellipsis "
|
||||
v-for="col in props.cols.slice(2, 5)"
|
||||
v-for="col in props.cols.slice(3, 6)"
|
||||
:key="col.label"
|
||||
>
|
||||
<q-item-label
|
||||
|
|
@ -109,7 +131,7 @@
|
|||
<q-item
|
||||
dense
|
||||
class="column"
|
||||
v-for="col in props.cols.slice(5, )"
|
||||
v-for="col in props.cols.slice(6, )"
|
||||
:key="col.label"
|
||||
>
|
||||
<q-item-label
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
const filter = ref<string | number | null>('');
|
||||
const original_approvals = ref<Record<string, boolean>>({});
|
||||
const is_showing_details = ref<boolean>(false);
|
||||
const clicked_employee_name = ref<string>('');
|
||||
|
||||
const columns = computed((): QTableColumn<PayPeriodOverviewEmployee>[] => [
|
||||
{
|
||||
|
|
@ -87,9 +88,9 @@
|
|||
await timesheet_approval_api.getPayPeriodOverviewByDate(date_string);
|
||||
}
|
||||
|
||||
const onClickedDetails = async (email: string) => {
|
||||
const onClickedDetails = async (email: string, name: string) => {
|
||||
clicked_employee_name.value = name;
|
||||
is_showing_details.value = true;
|
||||
console.log('employee email is: ', email);
|
||||
await timesheet_approval_api.getTimesheetsByPayPeriodAndEmail(email);
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +100,6 @@
|
|||
|
||||
const approvals = timesheet_store.pay_period_overview_employees.map(emp => [emp.email, emp.is_approved]);
|
||||
original_approvals.value = Object.fromEntries(approvals);
|
||||
console.log(timesheet_store.pay_period_overview_employees);
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -111,7 +111,9 @@
|
|||
>
|
||||
<TimesheetApprovalEmployeeDetails
|
||||
:is-loading="timesheet_store.is_loading"
|
||||
:employee-name="clicked_employee_name"
|
||||
:employee-details="timesheet_store.pay_period_employee_details"
|
||||
style="min-width: 300px;"
|
||||
/>
|
||||
</q-dialog>
|
||||
<div class="q-pa-md">
|
||||
|
|
@ -158,7 +160,7 @@
|
|||
:cols="props.cols"
|
||||
:row="props.row"
|
||||
:initial-state="props.row.is_approved"
|
||||
@click-details="onClickedDetails"
|
||||
@click-details="email => onClickedDetails(email, props.row.employee_name)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,13 @@
|
|||
const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
|
||||
const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
|
||||
|
||||
if ( dates.length === 1 ) {
|
||||
return {
|
||||
start_date: '—',
|
||||
end_date: '—'
|
||||
}
|
||||
}
|
||||
|
||||
return { start_date, end_date };
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import type { TimesheetDetailsWeek } from "src/modules/timesheets/types/timesheet-details-interface";
|
||||
|
||||
export interface PayPeriodEmployeeDetails {
|
||||
is_approved: boolean;
|
||||
// is_approved: boolean;
|
||||
week1: TimesheetDetailsWeek;
|
||||
week2: TimesheetDetailsWeek;
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
export interface Shift {
|
||||
is_approved: boolean;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
start: string;
|
||||
end: string;
|
||||
}
|
||||
|
|
@ -31,6 +31,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
return true;
|
||||
} catch(error){
|
||||
console.error('Could not get current pay period: ', error );
|
||||
current_pay_period.value = default_pay_period;
|
||||
pay_period_overview_employees.value = [];
|
||||
//TODO: More in-depth error-handling here
|
||||
}
|
||||
|
||||
|
|
@ -50,6 +52,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
return true;
|
||||
} catch(error){
|
||||
console.error('Could not get current pay period: ', error );
|
||||
current_pay_period.value = default_pay_period;
|
||||
pay_period_overview_employees.value = [];
|
||||
//TODO: More in-depth error-handling here
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +91,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
employee_email
|
||||
);
|
||||
pay_period_employee_details.value = response;
|
||||
|
||||
} catch (error) {
|
||||
console.error('There was an error retrieving timesheet details for this employee: ', error);
|
||||
pay_period_employee_details.value = MOCK_DATA_TIMESHEET_DETAILS;
|
||||
|
|
@ -115,11 +118,11 @@ const MOCK_DATA_TIMESHEET_DETAILS = {
|
|||
is_approved: true,
|
||||
shifts: {
|
||||
sun: [],
|
||||
mon: [ { is_approved: true, start_time: '08:00', end_time: '12:00' }, { is_approved: true, start_time: '13:00', end_time: '17:00' } ],
|
||||
tue: [ { is_approved: true, start_time: '08:00', end_time: '11:45' }, { is_approved: true, start_time: '12:45', end_time: '17:00' } ],
|
||||
wed: [ { is_approved: true, start_time: '08:00', end_time: '12:00' }, { is_approved: true, start_time: '13:00', end_time: '17:00' } ],
|
||||
thu: [ { is_approved: false, start_time: '13:00', end_time: '17:00' } ],
|
||||
fri: [ { is_approved: true, start_time: '08:00', end_time: '12:00' }, { is_approved: true, start_time: '13:00', end_time: '17:00' } ],
|
||||
mon: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
|
||||
tue: [ { is_approved: true, start: '08:00', end: '11:45' }, { is_approved: true, start: '12:45', end: '17:00' } ],
|
||||
wed: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
|
||||
thu: [ { is_approved: false, start: '13:00', end: '17:00' } ],
|
||||
fri: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
|
||||
sat: []
|
||||
},
|
||||
expenses: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user