feat(approvals): add more functionalities to details window, see notes
Add ability to approve whole time from details dialog directly, in a sticky bar at top with employee name Add possibility of right-clicking on individual shifts to approve or unapprove
This commit is contained in:
Nic D
parent
6dc1804918
commit
db6ec4bc90
|
|
@ -45,7 +45,7 @@
|
|||
<div
|
||||
v-if="chatbot_store.is_showing_chatbot"
|
||||
class="col column"
|
||||
style="background: rgba(0, 0, 0, 0.7); overflow: hidden;"
|
||||
style="background: rgba(0, 0, 0, 0.7); overflow: hidden; pointer-events: auto;"
|
||||
>
|
||||
<q-btn
|
||||
dense
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
dark
|
||||
label-color="white"
|
||||
class="col q-px-md"
|
||||
style="background: rgba(0, 0, 0, 0.3);"
|
||||
style="background: rgba(0, 0, 0, 0.3); pointer-events: all;"
|
||||
@keydown.enter="handleSend"
|
||||
/>
|
||||
</q-form>
|
||||
|
|
@ -92,6 +92,7 @@
|
|||
color="accent"
|
||||
size="2em"
|
||||
class="shadow-5"
|
||||
style="pointer-events: auto;"
|
||||
@click="chatbot_store.is_showing_chatbot = true"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -103,5 +104,6 @@
|
|||
:deep(.q-drawer) {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,17 +2,39 @@
|
|||
setup
|
||||
lang="ts"
|
||||
>
|
||||
/* eslint-disable */
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||
import DetailsDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue';
|
||||
import DetailsDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue';
|
||||
import DetailsDialogChartExpenses from 'src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue';
|
||||
import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
|
||||
import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';
|
||||
import { useTimesheetApprovalApi } from '../composables/use-timesheet-approval-api';
|
||||
|
||||
const { t } = useI18n();
|
||||
const timesheet_store = useTimesheetStore();
|
||||
const timesheetApprovalApi = useTimesheetApprovalApi();
|
||||
const is_dialog_open = ref(false);
|
||||
|
||||
const isApproved = computed(() => timesheet_store.timesheets.every(timesheet => timesheet.is_approved));
|
||||
const approveButtonLabel = computed(() => isApproved.value ?
|
||||
t('timesheet_approvals.table.verified') :
|
||||
t('timesheet_approvals.table.unverified')
|
||||
);
|
||||
const approveButtonIcon = computed(() => isApproved.value ? 'lock' : 'lock_open');
|
||||
|
||||
const onClickApproveAll = async () => {
|
||||
const employeeEmail = timesheet_store.current_pay_period_overview?.email;
|
||||
const isApproved = timesheet_store.timesheets.every(timesheet => timesheet.is_approved);
|
||||
|
||||
if (employeeEmail !== undefined && isApproved !== undefined) {
|
||||
await timesheetApprovalApi.toggleTimesheetsApprovalByEmployeeEmail(
|
||||
employeeEmail,
|
||||
!isApproved
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -28,12 +50,34 @@
|
|||
@before-hide="timesheet_store.getTimesheetOverviews"
|
||||
>
|
||||
<div
|
||||
class="column bg-secondary hide-scrollbar shadow-12 rounded-15 q-pa-sm no-wrap"
|
||||
class="column bg-secondary hide-scrollbar shadow-12 rounded-15 q-pb-sm no-wrap"
|
||||
:style="($q.screen.lt.md ? '' : 'width:80vw !important;') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
|
||||
>
|
||||
<!-- employee name -->
|
||||
<div class="col-auto text-h4 text-weight-bolder text-center text-uppercase q-px-none q-py-sm">
|
||||
<span>{{ timesheet_store.selected_employee_name }}</span>
|
||||
<div class="col-auto row flex-center q-px-none q-py-sm sticky-top bg-secondary full-width shadow-4">
|
||||
<span class="col text-h4 text-weight-bolder text-uppercase q-px-lg">
|
||||
{{ timesheet_store.selected_employee_name }}
|
||||
</span>
|
||||
|
||||
<div class="col-auto q-px-lg">
|
||||
<q-btn
|
||||
push
|
||||
dense
|
||||
size="lg"
|
||||
color="accent"
|
||||
:label="approveButtonLabel"
|
||||
class="q-px-xl"
|
||||
@click="onClickApproveAll"
|
||||
>
|
||||
<transition enter-active-class="animated swing" mode="out-in">
|
||||
<q-icon
|
||||
:key="isApproved ? '1' : '2'"
|
||||
:name="approveButtonIcon"
|
||||
class="q-pl-md"
|
||||
/>
|
||||
</transition>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- employee pay period details using chart -->
|
||||
|
|
@ -61,4 +105,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sticky-top {
|
||||
position: sticky;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="column bg-primary text-uppercase q-px-sm text-white">
|
||||
<div class="col row">
|
||||
<div class="column bg-primary text-uppercase q-px-sm text-white no-wrap">
|
||||
<div class="col row no-wrap">
|
||||
<q-checkbox
|
||||
v-model="filters.is_showing_inactive"
|
||||
keep-color
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<span class="col-auto q-px-md q-pt-sm text-h6 text-bold">
|
||||
<span class="col q-px-md q-pt-sm text-h6 text-bold ellipsis">
|
||||
{{ $t('timesheet_approvals.table.filter_columns') }}
|
||||
</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,10 @@ export const useTimesheetApprovalApi = () => {
|
|||
const approval_success = await timesheet_store.toggleTimesheetsApprovalByEmployeeEmail(email, approval_status);
|
||||
const overview = timesheet_store.pay_period_overviews.find(overview => overview.email === email);
|
||||
|
||||
if (overview && approval_success) overview.is_approved = approval_status;
|
||||
if (overview && approval_success) {
|
||||
overview.is_approved = approval_status;
|
||||
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(email);
|
||||
}
|
||||
}
|
||||
|
||||
timesheet_store.is_loading = false;
|
||||
|
|
|
|||
|
|
@ -3,18 +3,18 @@
|
|||
lang="ts"
|
||||
>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { QSelect, QInput, useQuasar, type QSelectProps } from 'quasar';
|
||||
import { computed, inject, onMounted, ref } from 'vue';
|
||||
import { QSelect, QInput, useQuasar, type QSelectProps, QPopupProxy } from 'quasar';
|
||||
import { useUiStore } from 'src/stores/ui-store';
|
||||
import { SHIFT_OPTIONS } from 'src/modules/timesheets/utils/shift.util';
|
||||
import type { Shift } from 'src/modules/timesheets/models/shift.models';
|
||||
import { useAuthStore } from 'src/stores/auth-store';
|
||||
|
||||
// ================== State ==================
|
||||
|
||||
const COMMENT_LENGTH_MAX = 280;
|
||||
const shift = defineModel<Shift>('shift', { required: true });
|
||||
|
||||
const { errorMessage = undefined, isTimesheetApproved = false, holiday = false } = defineProps<{
|
||||
dense?: boolean;
|
||||
isTimesheetApproved?: boolean;
|
||||
errorMessage?: string | undefined;
|
||||
holiday?: boolean | undefined;
|
||||
|
|
@ -25,19 +25,30 @@
|
|||
'onTimeFieldBlur': [void];
|
||||
}>();
|
||||
|
||||
const shift = defineModel<Shift>('shift', { required: true });
|
||||
|
||||
const COMMENT_LENGTH_MAX = 280;
|
||||
|
||||
const q = useQuasar();
|
||||
const { t } = useI18n();
|
||||
const ui_store = useUiStore();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const mode = inject<'normal' | 'approval'>('mode');
|
||||
|
||||
const shiftTypeSelected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));
|
||||
const selectRef = ref<QSelect | null>(null);
|
||||
const shiftErrorMessage = ref<string | undefined>();
|
||||
const is_showing_delete_confirm = ref(false);
|
||||
const popupProxyRef = ref<QPopupProxy | null>(null);
|
||||
|
||||
// ================== Computed ==================
|
||||
|
||||
const rightClickMenuIcon = computed(() => shift.value.is_approved ? 'lock_open' : 'lock');
|
||||
|
||||
const rightClickMenuLabel = computed(() => shift.value.is_approved ?
|
||||
t('timesheet_approvals.tooltip.unapprove') :
|
||||
t('timesheet_approvals.tooltip.approve'));
|
||||
|
||||
const timeInputProps = computed(() => ({
|
||||
dense: true,
|
||||
borderless: shift.value.is_approved && isTimesheetApproved,
|
||||
|
|
@ -109,6 +120,14 @@
|
|||
is_showing_delete_confirm.value = state;
|
||||
}
|
||||
|
||||
const onRightClickApprove = () => {
|
||||
if (authStore.user?.user_module_access.includes('timesheets_approval'))
|
||||
shift.value.is_approved = !shift.value.is_approved;
|
||||
|
||||
if (popupProxyRef.value)
|
||||
popupProxyRef.value.hide();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (ui_store.focus_next_component) {
|
||||
selectRef.value?.focus();
|
||||
|
|
@ -121,6 +140,31 @@
|
|||
|
||||
<template>
|
||||
<div class="row">
|
||||
<!-- right-click to approve shift only (if in approval mode) -->
|
||||
<q-popup-proxy
|
||||
v-if="mode === 'approval'"
|
||||
ref="popupProxyRef"
|
||||
context-menu
|
||||
class="rounded-5 q-px-md shadow-24 cursor-pointer"
|
||||
style="border: 3px solid var(--q-primary);"
|
||||
>
|
||||
<q-banner
|
||||
dense
|
||||
class="cursor-pointer q-px-lg"
|
||||
@click="onRightClickApprove"
|
||||
>
|
||||
<template v-slot:avatar>
|
||||
<q-icon
|
||||
:name="rightClickMenuIcon"
|
||||
color="accent"
|
||||
/>
|
||||
</template>
|
||||
<span class="text-weight-bold text-accent text-uppercase">
|
||||
{{ rightClickMenuLabel }}
|
||||
</span>
|
||||
</q-banner>
|
||||
</q-popup-proxy>
|
||||
|
||||
<!-- delete shift confirmation dialog -->
|
||||
<q-dialog
|
||||
v-model="is_showing_delete_confirm"
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
shift.id = 0;
|
||||
emit('deleteUnsavedShift');
|
||||
} else {
|
||||
console.log('email: ', employeeEmail);
|
||||
await shift_api.deleteShiftById(shift.id, employeeEmail);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -54,8 +54,9 @@
|
|||
));
|
||||
|
||||
// =================== methods ==========================
|
||||
|
||||
|
||||
provide('employeeEmail', employeeEmail);
|
||||
provide('mode', mode);
|
||||
|
||||
const onClickSaveTimesheets = async () => {
|
||||
if (mode === 'normal') {
|
||||
|
|
|
|||
|
|
@ -98,7 +98,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
} catch (error) {
|
||||
console.error('There was an error retrieving Employee Pay Period overviews: ', error);
|
||||
pay_period_overviews.value = [];
|
||||
// TODO: More in-depth error-handling here
|
||||
is_loading.value = false;
|
||||
|
||||
return false;
|
||||
|
|
@ -107,7 +106,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
|
||||
const getTimesheetsByOptionalEmployeeEmail = async (employee_email?: string): Promise<boolean> => {
|
||||
if (pay_period.value === undefined) return false;
|
||||
is_loading.value = true;
|
||||
let response;
|
||||
|
||||
try {
|
||||
|
|
@ -128,13 +126,11 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
initial_timesheets.value = [];
|
||||
}
|
||||
|
||||
is_loading.value = false;
|
||||
return response.success;
|
||||
} catch (error) {
|
||||
console.error('There was an error retrieving timesheet details for this employee: ', error);
|
||||
// TODO: More in-depth error-handling here
|
||||
timesheets.value = [];
|
||||
is_loading.value = false;
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user