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

feat: added a centralized context folder which holds objects that describes the webpages of the app from a high level

Browse Source
This commit is contained in:
Lion Arar 2025-10-08 16:21:48 -04:00
parent 19b2dd934c
commit 6277a73bd6
14 changed files with 161 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/layouts/components/main-layout-left-drawer.vue
View File

@ -73,7 +73,7 @@ const handleLogout = () => {
</q-item-section>
<q-item-section>
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet_approvals')
}}</q-item-label>
}}</q-item-label>
</q-item-section>
</q-item>
@ -93,7 +93,7 @@ const handleLogout = () => {
</q-item-section>
<q-item-section>
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.employee_list')
}}</q-item-label>
}}</q-item-label>
</q-item-section>
</q-item>
@ -113,7 +113,7 @@ const handleLogout = () => {
</q-item-section>
<q-item-section>
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet')
}}</q-item-label>
}}</q-item-label>
</q-item-section>
</q-item>

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

@ -1,34 +1,31 @@
<script
setup
lang="ts"
>
import { computed, ref } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
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 PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
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 PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
const timesheet_store = useTimesheetStore();
const filter = ref<string | number | null>('');
const timesheet_store = useTimesheetStore();
const filter = ref<string | number | null>('');
const employeeEmail = defineModel();
const employeeEmail = defineModel();
const emit = defineEmits<{
'clickedDetailsButton': [email: string];
}>();
const emit = defineEmits<{
'clickedDetailsButton': [email: string];
}>();
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 (employee_email: string, row: PayPeriodOverview) => {
employeeEmail.value = employee_email;
emit('clickedDetailsButton', employee_email);
timesheet_store.current_pay_period_overview = row;
await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
};
const onClickedDetails = async (employee_email: string, row: PayPeriodOverview) => {
employeeEmail.value = employee_email;
emit('clickedDetailsButton', employee_email);
timesheet_store.current_pay_period_overview = row;
await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
};
</script>
<template>
@ -77,8 +74,8 @@
<template #no-data="{ message, filter }">
<div class="full-width column items-center text-primary q-gutter-sm">
<q-icon
size="4em"
:name="filter ? 'filter_alt_off' : 'error_outline'"
size="4em"
:name="filter ? 'filter_alt_off' : 'error_outline'"
/>
<span class="text-h6">

6
src/page-contexts/index.ts Normal file
View File

@ -0,0 +1,6 @@
export * from "./pages/dashboard-context";
export * from "./pages/left-drawer-context";
export * from "./pages/supervisor-crew-context";
export * from "./pages/profile-context";
export * from "./pages/timesheet-approval-context";
export * from "./pages/timesheet-context";

10
src/page-contexts/pages/dashboard-context.ts Normal file
View File

@ -0,0 +1,10 @@
export const dashboardContext = {
name: "Test-Page",
description:
"Temporary static landing page while the application is still in development",
features: [
"Used as a landing platform and navigate the left drawer",
"Access the ai chatbot from the header",
"See your user icon with a notification icon",
],
};

14
src/page-contexts/pages/left-drawer-context.ts Normal file
View File

@ -0,0 +1,14 @@
export const leftDrawerContext = {
name: "Left Drawer",
description:
"A drawer that acts as a navigation bar, able to surf to differnent parts of the website.",
features: [
"The user can navigate to the home page.",
"Depending on their role and clearence can approve timesheets. ",
"Depending on their role, can see the full list of employees.",
"Can access the timesheet interface to input employee hours.",
"Can acess your user profile to add or change information",
"Can access the Help page to ask for assistance.",
"Can logout",
],
};

9
src/page-contexts/pages/profile-context.ts Normal file
View File

@ -0,0 +1,9 @@
export const profileContext = {
name: "Profile",
description: "Display and edit user information",
features: [
"Add and edit Personal information such as first and last name, phone, birthdate and address.",
"Add and edit Career information such job title, company, supervisor, email and hiring date.",
"Edit available preferences such as Display options of light and dark mode, and language options",
],
};

8
src/page-contexts/pages/supervisor-crew-context.ts Normal file
View File

@ -0,0 +1,8 @@
export const supervisorContext = {
name: "Supervisor Crew Page",
description: "View all the hired Staff",
feature: [
"View the list of hired employees",
"Access an individual employee",
],
};

14
src/page-contexts/pages/timesheet-approval-context.ts Normal file
View File

@ -0,0 +1,14 @@
export const timesheetApprovalContext = {
name: "Timesheet-Approval",
description:
"Page where employee hours and shifts are approved by the HR deparment",
features: [
"See a list of cards with the total hours for the week for each employee.",
"Access different weeks thanks to the calender button",
"Approve the hours for the cards displayed.",
"Open a detailed modal for each card",
"Display a bar chart within the modal to display the type of hours, expenses, and mileage.",
"Edit the hours, and their type such as regular, holiday, vacation etc.",
"Add and edit expenses for the week, along with attached files for said expenses",
],
};

13
src/page-contexts/pages/timesheet-context.ts Normal file
View File

@ -0,0 +1,13 @@
export const timesheetContext = {
name: "Timesheet-page",
description:
"Page where an employee can enter their hours for their day and week",
features: [
"Enter your in and out times per day",
"Add and edit what kind of hours your shift was example regular, overtime, vacation etc.",
"Edit your own shift hours",
"Delete your shift hours",
"List your expenses for the week",
"Add expenses for the week, along with attached files for said expenses",
],
};

22
src/pages/profile-page.vue
View File

@ -1,20 +1,20 @@
<script setup lang="ts">
import ProfileEmployee from 'src/modules/profile/pages/employee/profile-employee.vue';
import { useAuthStore } from 'src/stores/auth-store';
import { type EmployeeProfile } from 'src/modules/employee-list/types/employee-profile-interface';
import ProfileEmployee from 'src/modules/profile/pages/employee/profile-employee.vue';
import { useAuthStore } from 'src/stores/auth-store';
import { type EmployeeProfile } from 'src/modules/employee-list/types/employee-profile-interface';
const auth_store = useAuthStore();
const employee_roles = [ 'SUPERVISOR', 'EMPLOYEE', 'ADMIN', 'HR', 'ACCOUNTING' ];
const auth_store = useAuthStore();
const employee_roles = ['SUPERVISOR', 'EMPLOYEE', 'ADMIN', 'HR', 'ACCOUNTING'];
const { employeeProfile } = defineProps<{
employeeProfile?: EmployeeProfile | undefined;
}>();
const { employeeProfile } = defineProps<{
employeeProfile?: EmployeeProfile | undefined;
}>();
</script>
<template>
<q-page class="bg-secondary column items-center justify-center">
<ProfileEmployee
v-if="employee_roles.includes( auth_store.user.role.toUpperCase() )"
<q-page class="bg-secondary column items-center justify-center">
<ProfileEmployee
v-if="employee_roles.includes(auth_store.user.role.toUpperCase())"
class="col-auto"
:employee-profile="employeeProfile"
/>

4
src/pages/supervisor-crew-page.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.vue';
import EmployeeListAddModifyDialog from '../components/employee/employee-list-add-modify-dialog.vue';
import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.vue';
import EmployeeListAddModifyDialog from '../components/employee/employee-list-add-modify-dialog.vue';
</script>
<template>

21
src/pages/test-page.vue
View File

@ -1,17 +1,14 @@
<script
setup
lang="ts"
>
import { useQuasar } from 'quasar';
import type { QVueGlobals } from 'quasar';
<script setup lang="ts">
import { useQuasar } from 'quasar';
import type { QVueGlobals } from 'quasar';
const q: QVueGlobals = useQuasar();
const q: QVueGlobals = useQuasar();
const clickNotify = () => {
q.notify({
message: 'Nick pinged you.',
})
}
const clickNotify = () => {
q.notify({
message: 'Nick pinged you.',
})
}
</script>
<template>

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

@ -1,38 +1,38 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
import DetailscrudDialog from 'src/modules/timesheet-approval/components/details-crud-dialog.vue';
import { onMounted, ref } from 'vue';
import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
import DetailscrudDialog from 'src/modules/timesheet-approval/components/details-crud-dialog.vue';
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
const is_details_dialog_open = ref(false);
const employee_email = ref('');
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
const is_details_dialog_open = ref(false);
const employee_email = ref('');
const onDetailsClicked = (email: string) => {
employee_email.value = email;
is_details_dialog_open.value = true;
};
const onDetailsClicked = (email: string) => {
employee_email.value = email;
is_details_dialog_open.value = true;
};
onMounted( async () => {
await timesheet_approval_api.getPayPeriodOverviewsByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
});
onMounted(async () => {
await timesheet_approval_api.getPayPeriodOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
</script>
<template>
<q-page
padding
<q-page
padding
class="q-pa-md bg-secondary "
>
<PageHeaderTemplate
<PageHeaderTemplate
title="timesheet_approvals.page_title"
:start-date="timesheet_store.pay_period.period_start"
:end-date="timesheet_store.pay_period.period_end"
/>
<DetailscrudDialog
v-model:dialog="is_details_dialog_open"
:employee-email="employee_email"
@ -41,6 +41,6 @@
:timesheet-details="timesheet_store.pay_period_details"
/>
<OverviewList @clickedDetailsButton="onDetailsClicked"/>
<OverviewList @clickedDetailsButton="onDetailsClicked" />
</q-page>
</template>

32
src/pages/timesheet-page.vue
View File

@ -1,25 +1,21 @@
<script
setup
lang="ts"
>
import { date } from 'quasar';
import { onMounted } from 'vue';
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
<script setup lang="ts">
import { date } from 'quasar';
import { onMounted } from 'vue';
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
const { user } = useAuthStore();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
const { user } = useAuthStore();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
onMounted(async () => {
await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
onMounted(async () => {
await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
</script>
<template>
<q-page
padding