louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(approvals): Reconnect Services to backend logic and routes, adjust UI/UX, fix list mode

Browse Source
This commit is contained in:
Nicolas Drolet 2025-11-19 13:58:50 -05:00
parent 3b0652fb8b
commit 75ca572040
15 changed files with 379 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/i18n/en-ca/index.ts
View File

@ -206,6 +206,7 @@ export default {
table: {
full_name: "full name",
email: "email address",
is_approved: "approval",
expenses: "expenses",
mileage: "mileage",
verified: "approved",

1
src/i18n/fr-ca/index.ts
View File

@ -207,6 +207,7 @@ export default {
table: {
full_name: "nom complet",
email: "courriel",
is_approved: "approuvé",
expenses: "dépenses",
mileage: "kilométrage",
verified: "approuvé",

6
src/modules/auth/pages/auth-login-popup-success.vue
View File

@ -18,11 +18,11 @@
<transition appear enter-active-class="animated slow flipInX" leave-active-class="animated flipOutX">
<q-card class="col-3 items-center">
<q-card-section class="row justify-center ">
<q-icon name="check_circle" color="green" size="xl" />
<q-icon name="check_circle" color="accent" size="xl" />
</q-card-section>
<q-separator inset color="primary" />
<q-separator inset color="accent" />
<q-card-section class="row justify-center">
<span class="row text-primary text-h3">Login Successful!</span>
<span class="row text-h3">Login Successful!</span>
</q-card-section>
</q-card>
</transition>

21
src/modules/shared/components/loading-overlay.vue Normal file
View File

@ -0,0 +1,21 @@
<script
setup
lang="ts"
>
const is_loading = defineModel < boolean > ({ required: true });
</script>
<template>
<q-dialog
v-model="is_loading"
transition-show="jump-down"
transition-hide="jump-down"
>
<q-card class="q-pa-xl rounded-200 frosted-glass">
<q-spinner-radio
color="accent"
size="20vh"
/>
</q-card>
</q-dialog>
</template>

4
src/modules/shared/components/pay-period-navigator.vue
View File

@ -88,7 +88,7 @@
rounded
icon="calendar_month"
color="accent"
@click="is_showing_calendar_picker = true"
@click="is_showing_calendar_picker = !is_showing_calendar_picker"
:disable="timesheet_store.is_loading || is_disabled"
class="q-px-xl"
>
@ -102,6 +102,8 @@
<!-- date picker calendar -->
<q-menu
v-model="is_showing_calendar_picker"
no-parent-event
anchor="bottom middle"
self="top middle"
:offset="[0, 10]"

13
src/modules/shared/components/q-table-filters.vue
View File

@ -1,19 +1,8 @@
<script setup lang="ts">
const search_model = defineModel<string | number | null>({ default: null, required: true });
const search_model = defineModel<string | number | null>('search', { default: null, required: true });
</script>
<template>
<!-- Filters toggle -->
<q-btn-dropdown
push
rounded
icon="filter_alt"
color="accent"
:label="$t('shared.label.filter')"
class="q-mr-md"
/>
<!-- Search bar -->
<q-input
v-model="search_model"
outlined

76
src/modules/timesheet-approval/components/overview-list-item.vue
View File

@ -5,7 +5,12 @@
import type { TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
const modelApproval = defineModel<boolean>();
const { row } = defineProps<{ row: TimesheetOverview; }>();
const { row, index = 0 } = defineProps<{
row: TimesheetOverview;
index?: number;
}>();
const emit = defineEmits<{
'clickDetails': [overview: TimesheetOverview];
}>();
@ -13,13 +18,24 @@
<template>
<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">
<transition
appear
enter-active-class="animated fadeInUp"
>
<q-card
class="rounded-10 shadow-15"
:style="`animation-delay: ${index / 15}s;`"
>
<!-- Card header with employee name and details button-->
<q-card-section
horizontal
class="q-py-none q-px-sm q-ma-none justify-between items-center"
class="q-py-none q-px-sm q-ma-none justify-between items-center bg-primary text-white"
>
<span class="col text-primary text-h5 text-weight-bolder q-pt-xs"> {{ row.employee_name }} </span>
<div>
<span class="text-h5 text-uppercase text-weight-medium text-accent q-mr-xs">{{ row.employee_name.split(' ')[0]
}}</span>
<span class="text-uppercase text-weight-light">{{ row.employee_name.split(' ')[1] }}</span>
</div>
<!-- Buttons to view detailed shifts or view employee timesheet -->
<q-btn
@ -28,32 +44,37 @@
square
unelevated
class="col-auto q-pa-none q-ma-none"
color="primary"
color="accent"
icon="work_history"
@click="emit('clickDetails', row)"
>
<q-tooltip
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
class="bg-accent text-uppercase text-weight-bold"
>
{{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
</q-tooltip>
</q-btn>
</q-card-section>
<q-separator size="2px" />
<!-- Main body of pay period card -->
<q-card-section class="q-py-none q-px-sm q-my-sm">
<q-card-section class="q-py-none q-px-sm q-py-sm bg-dark">
<div class="row">
<!-- left portion of pay period card -->
<div class="col column q-px-sm">
<!-- Regular hours segment -->
<div class="col column">
<span class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"> {{ $t('shared.shift_type.regular') }} </span>
<span class="text-weight-bolder text-h3 q-py-none"> {{ row.regular_hours }} </span>
<q-separator class="q-mx-sm" />
<span
class="text-weight-bold text-uppercase q-pa-none q-my-none"
:class="row.regular_hours > 80 ? 'text-negative' : 'text-accent'"
> {{
$t('shared.shift_type.regular') }} </span>
<span
class="text-weight-bolder text-h3 q-py-none"
:class="row.regular_hours > 80 ? 'text-negative' : ''"
> {{ row.regular_hours }} </span>
<q-separator class="q-mr-sm" />
</div>
<!-- Other hour types segment -->
@ -65,7 +86,7 @@
:class="hour_type === 0 ? 'invisible' : ''"
>
<span
class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
style="font-size: 0.7em;"
> {{ $t(`shared.shift_type.${index.replace('_hours', '')}`) }} </span>
<span
@ -85,57 +106,60 @@
<div class="col-auto column q-px-sm">
<div class="col column no-wrap">
<span
class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
style="font-size: 0.8em;"
> {{ $t('timesheet.expense.types.EXPENSES') }} </span>
<span
class="text-weight-bolder text-h6 q-pa-none"
style="line-height: 0.9em;"
> {{ row.expenses }} </span>
> {{ row.expenses }} <span class="text-weight-light">$</span> </span>
</div>
<div class="col column no-wrap">
<span
class="text-weight-bold text-primary text-uppercase q-pa-none q-my-none"
class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
style="font-size: 0.8em;"
> {{ $t('timesheet.expense.types.MILEAGE') }} </span>
<span
class="text-weight-bolder text-h6 q-pa-none"
style="line-height: 0.9em;"
> {{ row.mileage }} </span>
> {{ row.mileage }} <span class="text-weight-light text-body2">km</span></span>
</div>
</div>
</div>
</q-card-section>
<q-separator
color="primary"
size="2px"
/>
<!-- Validate Pay Period section -->
<q-card-section
horizontal
class="justify-between items-center text-weight-bold q-px-sm"
:class="row.is_approved ? 'text-white bg-primary' : 'bg-dark'"
class="justify-between items-center text-weight-bold q-pa-none"
:class="row.is_approved ? 'text-white bg-accent' : 'bg-dark text-accent'"
>
<div class="col-auto">
<span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }} </span>
<span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
</div>
<div
class="col-auto q-py-xs q-px-md"
style="border: 1px solid var(--q-accent);"
>
<q-checkbox
v-model="modelApproval"
dense
left-label
keep-color
size="lg"
checked-icon="lock"
unchecked-icon="lock_open"
:color="row.is_approved ? 'white' : 'primary'"
:color="row.is_approved ? 'white' : 'accent'"
:label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
class="col-auto text-uppercase"
class="text-uppercase"
:class="row.is_approved ? '' : 'text-accent'"
/>
</div>
</q-card-section>
</q-card>
</transition>
</div>
</template>

87
src/modules/timesheet-approval/components/overview-list.vue
View File

@ -4,26 +4,20 @@
>
/* 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 OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import { 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 filter = ref<string | number | null>('');
const is_grid_mode = ref(true);
const IS_ABNORMAL_SHIFT = ['OVERTIME', 'EMERGENCY'];
const IS_PTO = ['HOLIDAY', 'VACATION', 'SICK'];
const employeeEmail = defineModel();
const visible_columns = ref<string[]>(['REGULAR', 'email']);
const visible_columns = ref<string[]>(['employee_name', 'REGULAR', 'email', 'is_approved']);
const emit = defineEmits<{
'clickedDetailsButton': [email: string];
@ -46,54 +40,33 @@
<template>
<div class="q-pa-md">
<LoadingOverlay v-model="timesheet_store.is_loading" />
<transition
appear
enter-active-class="animated fadeInUp"
leave-active-class="animated fadeOutDown"
mode="out-in"
>
<q-table
:key="timesheet_store.is_approval_grid_mode ? 'grid' : 'list'"
:visible-columns="visible_columns"
:rows="overview_rows"
:columns="pay_period_overview_columns"
row-key="email"
:filter="filter"
:grid="is_grid_mode"
:filter="timesheet_store.search_filter"
:grid="timesheet_store.is_approval_grid_mode"
dense
hide-pagination
color="primary"
color="accent"
:rows-per-page-options="[0]"
card-container-class="justify-center"
:loading="timesheet_store.is_loading"
class="q-py-md bg-transparent"
:class="is_grid_mode ? '' : 'sticky-header-table no-shadow'"
table-class="q-pa-none q-py-none q-mx-md rounded-10 bg-dark shadow-4'"
:class="timesheet_store.is_approval_grid_mode ? '' : 'sticky-header-table no-shadow'"
table-class="q-pa-none q-py-none q-mx-md rounded-10 bg-dark shadow-15"
:no-data-label="$t('shared.error.no_data_found')"
:no-results-label="$t('shared.error.no_search_results')"
:loading-label="$t('shared.label.loading')"
>
<template #top>
<div
class="full-width"
:class="$q.screen.lt.md ? 'text-center' : 'row'"
>
<PayPeriodNavigator
@date-selected="timesheet_approval_api.getPayPeriodOverviewsByDateOrYearAndNumber"
/>
<q-space />
<q-btn-toggle
v-model="is_grid_mode"
push
color="white"
text-color="accent"
toggle-color="accent"
class="q-mr-md"
:options="[
{ icon: 'grid_view', value: true },
{ icon: 'view_list', value: false },
]"
/>
<QTableFilters v-model="filter" />
</div>
</template>
<template #header="props">
<q-tr
:props="props"
@ -104,10 +77,7 @@
:key="col.name"
:props="props"
>
<span
v-if="col.label !== 'timesheet_approvals.table.is_approved'"
class="text-uppercase text-weight-bolder text-white"
>
<span class="text-uppercase text-weight-bolder text-white">
{{ $t(col.label) }}
</span>
</q-th>
@ -119,22 +89,28 @@
:props="props"
class="text-weight-medium"
>
<span
v-if="(props.value > 0 && typeof props.value !== 'boolean') || typeof props.value === 'string'"
>{{ props.value }}</span>
<q-icon
v-if="typeof props.value === 'boolean'"
:name="props.value ? 'verified' : 'fiber_manual_record'"
:color="props.value ? 'primary' : 'grey-5'"
v-if="props.col.name === 'is_approved'"
:name="props.value ? 'verified' : 'remove_circle_outline'"
:color="props.value ? 'accent' : 'grey-5'"
:class="props.value ? 'bg-white rounded-20' : ''"
size="sm"
/>
<div v-else-if="props.col.name === 'employee_name'">
<span class="text-h5 text-uppercase text-accent q-mr-xs">{{ props.value.split(' ')[0]}}</span>
<span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1] }}</span>
</div>
<span v-else>{{ props.value }}</span>
</q-td>
</template>
<!-- Template for individual employee cards -->
<template #item="props: { row: TimesheetOverview, key: string }">
<template #item="props: { row: TimesheetOverview, rowIndex: number }">
<OverviewListItem
v-model="props.row.is_approved"
:key="props.row.email + timesheet_store.pay_period?.pay_period_no"
:index="props.rowIndex"
:row="props.row"
@click-details="overview => onClickedDetails(props.row.email, overview)"
/>
@ -154,6 +130,7 @@
</div>
</template>
</q-table>
</transition>
</div>
</template>
@ -167,7 +144,7 @@
position: sticky
z-index: 1
thead tr:first-child th
top: 0
top: 0px
&.q-table--loading thead tr:last-child th
top: 48px

56
src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
View File

@ -1,46 +1,33 @@
import { ref } from "vue";
import { useTimesheetStore } from "src/stores/timesheet-store";
import { useAuthStore } from "src/stores/auth-store";
import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
import { NavigatorConstants } from "src/modules/timesheet-approval/models/timesheet-overview.models";
export const useTimesheetApprovalApi = () => {
const timesheet_store = useTimesheetStore();
const auth_store = useAuthStore();
const DATE_REGEX = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
const getPayPeriodOverviewsByDateOrYearAndNumber = async (date_or_year: string | number, period_number?: number): Promise<void> => {
let success = false;
if (typeof date_or_year === 'string') success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_or_year);
else if (typeof date_or_year === 'number' && period_number) success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_or_year, period_number);
const getTimesheetOverviews = async (date?: string) => {
timesheet_store.is_loading = true;
const success = ref(false);
if (success) {
await timesheet_store.getTimesheetOverviewsByPayPeriod(
timesheet_store.pay_period?.pay_year ?? 1,
timesheet_store.pay_period?.pay_period_no ?? 1,
auth_store.user?.email
);
}
};
const getNextOrPreviousPayPeriodOverview = async (direction: number) => {
if (timesheet_store.pay_period === undefined) return;
let new_period_number = (timesheet_store.pay_period.pay_period_no) + direction;
let new_year = timesheet_store.pay_period.pay_year;
if ( new_period_number > 26 || new_period_number < 1) {
new_period_number = 1;
new_year += direction;
if (date !== undefined) {
success.value = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date);
} else {
success.value = await timesheet_store.getPayPeriodByDateOrYearAndNumber();
}
await getPayPeriodOverviewsByDateOrYearAndNumber(new_year, new_period_number);
};
if (success.value === true) {
await timesheet_store.getTimesheetOverviews();
}
}
const getNextPayPeriodOverview = async () => {
await getNextOrPreviousPayPeriodOverview(NavigatorConstants.NEXT_PERIOD);
};
const getTimesheetOverviewsByDate = async (date: string) => {
const valid_date = DATE_REGEX.test(date);
const getPreviousPayPeriodOverview = async () => {
await getNextOrPreviousPayPeriodOverview(NavigatorConstants.PREVIOUS_PERIOD);
if (valid_date) {
const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date);
if (success) await timesheet_store.getTimesheetOverviews();
}
};
const getTimesheetApprovalCSVReport = async ( report_filter_company: boolean[], report_filter_type: boolean[], year?: number, period_number?: number ) => {
@ -61,9 +48,8 @@ export const useTimesheetApprovalApi = () => {
};
return {
getPayPeriodOverviewsByDateOrYearAndNumber,
getTimesheetOverviewsByDate,
getTimesheetApprovalCSVReport,
getNextPayPeriodOverview,
getPreviousPayPeriodOverview,
getTimesheetOverviews,
}
};

4
src/modules/timesheet-approval/services/timesheet-approval-service.ts
View File

@ -3,8 +3,8 @@ import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-ap
import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/models/timesheet-overview.models";
export const timesheetApprovalService = {
getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverviewResponse> => {
const response = await api.get(`pay-periods/${year}/${period_number}/${supervisor_email}`);
getPayPeriodOverviews: async (year: number, period_number: number): Promise<PayPeriodOverviewResponse> => {
const response = await api.get(`pay-periods/crew/${year}/${period_number}`);
return response.data;
},

45
src/modules/timesheets/components/shift-list-day-row.vue
View File

@ -105,7 +105,7 @@
<q-btn
v-if="ui_store.is_mobile_mode && !dense"
:icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
:text-color="shift.comment ? ((shift.is_approved || isTimesheetApproved) ? 'white' : 'accent') : 'grey-5'"
:text-color="shift.comment ? ((shift.is_approved && isTimesheetApproved) ? 'white' : 'accent') : 'grey-5'"
class="col-auto full-height q-mx-xs rounded-5 shadow-1"
>
<q-popup-edit
@ -160,8 +160,8 @@
v-model="shift_type_selected"
:standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
dense
:borderless="(shift.is_approved || isTimesheetApproved)"
:readonly="(shift.is_approved || isTimesheetApproved)"
:borderless="(shift.is_approved && isTimesheetApproved)"
:readonly="(shift.is_approved && isTimesheetApproved)"
:options-dense="!ui_store.is_mobile_mode"
hide-dropdown-icon
:menu-offset="[0, 10]"
@ -169,8 +169,8 @@
menu-self="top middle"
:options="SHIFT_OPTIONS"
class="col rounded-5 q-mx-xs bg-dark"
:class="(shift.is_approved || isTimesheetApproved) ? 'inset-shadow' : ''"
:style="(shift.is_approved || isTimesheetApproved) ? 'background-color: #0a7d32 !important;' : ''"
:class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
popup-content-style="border: 2px solid var(--q-accent)"
@blur="onBlurShiftTypeSelect"
@ -191,33 +191,34 @@
<span
style="line-height: 0.9em;"
class="col-auto ellipsis"
:class="(shift.is_approved || isTimesheetApproved) ? 'text-white' : ''"
:class="!shift.is_approved ? '' : 'text-white'"
>{{ scope.opt.label }}</span>
</div>
</template>
</q-select>
</div>
<div class="col row flex-center text-uppercase rounded-5 bg-transparent q-pa-xs">
<div class="col row flex-center text-uppercase rounded-5 q-pa-xs">
<!-- punch in field -->
<q-input
v-model="shift.start_time"
dense
:borderless="(shift.is_approved || isTimesheetApproved)"
:readonly="(shift.is_approved || isTimesheetApproved)"
:borderless="(shift.is_approved && isTimesheetApproved)"
:readonly="(shift.is_approved && isTimesheetApproved)"
type="time"
:standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
label-slot
:label-color="(shift.is_approved || isTimesheetApproved) ? 'white' : 'accent'"
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed text-white' : '')"
:label-color="!shift.is_approved ? 'accent' : 'white'"
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
input-style="font-size: 1.2em;"
class="col rounded-5 bg-dark"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : '')"
:style="(shift.is_approved || isTimesheetApproved) ? 'background-color: #0a7d32 !important;' : ''"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
>
<template #label>
<span
class="text-weight-bolder"
:class="shift.is_approved ? ' q-ml-md' : ''"
style="font-size: 0.95em;"
>{{ $t('shared.misc.in') }}</span>
</template>
@ -228,20 +229,21 @@
v-model="shift.end_time"
:standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
dense
:borderless="(shift.is_approved || isTimesheetApproved)"
:readonly="(shift.is_approved || isTimesheetApproved)"
:borderless="(shift.is_approved && isTimesheetApproved)"
:readonly="(shift.is_approved && isTimesheetApproved)"
type="time"
label-slot
:label-color="(shift.is_approved || isTimesheetApproved) ? 'white' : 'accent'"
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed text-white' : '')"
:label-color="!shift.is_approved ? 'accent' : 'white'"
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
input-style="font-size: 1.2em;"
class="col rounded-5 bg-dark"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-ml-xs ' : 'q-mx-xs ') + ((shift.is_approved || isTimesheetApproved) ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : '')"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
>
<template #label>
<span
class="text-weight-bolder"
:class="shift.is_approved ? ' q-ml-md' : ''"
style="font-size: 0.95em;"
>{{ $t('shared.misc.out') }}</span>
</template>
@ -325,7 +327,14 @@
class="col"
:class="shift.is_approved ? 'invisible' : ''"
@click="$emit('requestDelete')"
>
<q-badge
v-if="!shift.is_approved"
color="white"
class="absolute"
style="z-index: -1;"
/>
</q-btn>
</div>
</div>
</div>

16
src/modules/timesheets/components/timesheet-wrapper.vue
View File

@ -6,6 +6,7 @@
import ExpenseDialog from 'src/modules/timesheets/components/expense-dialog.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import TimesheetErrorWidget from 'src/modules/timesheets/components/timesheet-error-widget.vue';
import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
import { useExpensesStore } from 'src/stores/expense-store';
@ -29,18 +30,7 @@
<template>
<div class="column flex-center full-width">
<q-dialog
v-model="timesheet_store.is_loading"
transition-show="jump-down"
transition-hide="jump-down"
>
<q-card class="q-pa-xl rounded-200 bg-white frosted-glass">
<q-spinner-radio
color="accent"
size="20vh"
/>
</q-card>
</q-dialog>
<LoadingOverlay v-model="timesheet_store.is_loading"/>
<q-card
flat
@ -55,7 +45,7 @@
<!-- navigation btn -->
<PayPeriodNavigator
v-if="!dense"
@date-selected="timesheet_api.getTimesheetsByDate(employeeEmail)"
@date-selected="date_value => timesheet_api.getTimesheetsByDate(date_value, employeeEmail)"
@pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
@pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
/>

2
src/modules/timesheets/composables/use-timesheet-api.ts
View File

@ -21,7 +21,7 @@ export const useTimesheetApi = () => {
if (timesheet_store.pay_period === undefined) return false;
timesheet_store.is_loading = true;
const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(timesheet_store.pay_period.pay_year, timesheet_store.pay_period.pay_period_no );
const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber();
if (success) {
await timesheet_store.getTimesheetsByEmployeeEmail(employee_email ?? auth_store.user?.email ?? '');

48
src/pages/timesheet-approval-page.vue
View File

@ -1,4 +1,8 @@
<script setup lang="ts">
<script
setup
lang="ts"
>
/* eslint-disable */
import { onMounted, ref } from 'vue';
import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
@ -6,6 +10,8 @@
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
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';
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
@ -18,7 +24,7 @@
};
onMounted(async () => {
await timesheet_approval_api.getPayPeriodOverviewsByDateOrYearAndNumber(date.formatDate( new Date(), 'YYYY-MM-DD'));
await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
</script>
@ -41,6 +47,44 @@
:timesheets="timesheet_store.timesheets"
/>
<div
class="full-width q-mb-sm"
:class="$q.screen.lt.md ? 'text-center' : 'row'"
>
<PayPeriodNavigator
@date-selected="timesheet_approval_api.getTimesheetOverviews"
@pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
@pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
/>
<q-space />
<q-btn-toggle
v-model="timesheet_store.is_approval_grid_mode"
push
rounded
color="white"
text-color="accent"
toggle-color="accent"
class="q-mr-md"
:options="[
{ icon: 'grid_view', value: true },
{ icon: 'view_list', value: false },
]"
/>
<q-btn-dropdown
push
rounded
icon="filter_alt"
color="accent"
:label="$t('shared.label.filter')"
class="q-mr-md"
/>
<QTableFilters v-model:search="timesheet_store.search_filter" />
</div>
<OverviewList @clickedDetailsButton="onDetailsClicked" />
</q-page>
</template>

31
src/stores/timesheet-store.ts
View File

@ -1,6 +1,5 @@
import { ref } from 'vue';
import { defineStore } from 'pinia';
import { useAuthStore } from 'src/stores/auth-store';
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';
@ -11,24 +10,23 @@ import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-ap
export const useTimesheetStore = defineStore('timesheet', () => {
const auth_store = useAuthStore();
const is_loading = ref<boolean>(false);
const pay_period = ref<PayPeriod>();
const pay_period_overviews = ref<TimesheetOverview[]>([]);
const current_pay_period_overview = ref<TimesheetOverview>();
const timesheets = ref<Timesheet[]>([]);
const initial_timesheets = ref<Timesheet[]>([]);
const is_approval_grid_mode = ref<boolean>(true);
const search_filter = ref<string | number | null>('');
const pay_period_report = ref();
const getPayPeriodByDateOrYearAndNumber = async (date_or_year: string | number, period_number?: number): Promise<boolean> => {
const getPayPeriodByDateOrYearAndNumber = async (date?: string): Promise<boolean> => {
try {
if (typeof date_or_year === 'string') {
pay_period.value = await timesheetService.getPayPeriodByDate(date_or_year);
}
else if (typeof date_or_year === 'number' && period_number) {
pay_period.value = await timesheetService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
}
else pay_period.value = undefined;
if (date!== undefined) {
pay_period.value = await timesheetService.getPayPeriodByDate(date);
} else if (pay_period.value !== undefined) {
pay_period.value = await timesheetService.getPayPeriodByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no);
} else return false;
return true;
} catch (error) {
@ -41,11 +39,16 @@ export const useTimesheetStore = defineStore('timesheet', () => {
}
};
const getTimesheetOverviewsByPayPeriod = async (pay_year: number, period_number: number, supervisor_email?: string): Promise<boolean> => {
const getTimesheetOverviews = async (): Promise<boolean> => {
is_loading.value = true;
try {
const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail(pay_year, period_number, supervisor_email ?? auth_store.user?.email ?? '');
if (pay_period.value === undefined) {
is_loading.value = false;
return false;
}
const response = await timesheetApprovalService.getPayPeriodOverviews(pay_period.value.pay_year, pay_period.value.pay_period_no);
pay_period_overviews.value = response.employees_overview;
is_loading.value = false;
@ -99,13 +102,15 @@ export const useTimesheetStore = defineStore('timesheet', () => {
return {
is_loading,
is_approval_grid_mode,
search_filter,
pay_period,
pay_period_overviews,
current_pay_period_overview,
timesheets,
initial_timesheets,
getPayPeriodByDateOrYearAndNumber,
getTimesheetOverviewsByPayPeriod,
getTimesheetOverviews,
getTimesheetsByEmployeeEmail,
getPayPeriodReportByYearAndPeriodNumber,
};