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

feat(timesheet-approval): add filter template, working on filling. Merging with other changes on main.

Browse Source
This commit is contained in:
Nicolas Drolet 2025-12-18 11:00:31 -05:00
parent 13c339953f
commit a07086fa2e
3 changed files with 56 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/modules/timesheet-approval/components/overview-list-filters.vue Normal file
View File

@ -0,0 +1,12 @@
<script setup lang="ts">
</script>
<template>
<div class="column bg-accent q-pa-sm">
<span class="col">test</span>
<span class="col">test</span>
<span class="col">test</span>
<span class="col">test</span>
</div>
</template>

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

@ -26,10 +26,7 @@
overview_column_names.IS_APPROVED,
]);
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.filter(overview => overview))
const onClickedDetails = async (row: TimesheetOverview) => {
timesheet_store.current_pay_period_overview = row;

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

@ -3,19 +3,23 @@
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';
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 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';
import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
import { date } from 'quasar';
import { onMounted, ref } from 'vue';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
const is_showing_filters = ref(false);
onMounted(async () => {
await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
@ -40,14 +44,15 @@
/>
<div
class="col-auto full-width q-px-lg"
:class="($q.screen.lt.md ? 'column flex-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
class="col-auto row items-start full-width q-px-lg"
:class="($q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md') + (timesheet_store.is_approval_grid_mode ? '' : ' q-mb-md')"
>
<PayPeriodNavigator
@date-selected="timesheet_approval_api.getTimesheetOverviews"
@pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
@pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
:class="$q.screen.lt.md ? 'q-mb-sm' : ''"
:class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
style="height: 40px;"
/>
<q-space />
@ -59,27 +64,49 @@
color="white"
text-color="accent"
toggle-color="accent"
:class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-md'"
class="col-auto"
:class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-md'"
:options="[
{ icon: 'grid_view', value: true },
{ icon: 'view_list', value: false },
]"
style="height: 40px;"
/>
<div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md ? 'q-mb-md' : ''">
<q-btn-dropdown
push
rounded
<div
class="col-auto row no-wrap items-start"
:class="$q.platform.is.mobile ? 'q-mb-md' : ''"
>
<q-btn
flat
icon="filter_alt"
color="accent"
:label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
class="col-auto q-mr-sm"
color="white"
:label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
class="col q-mr-sm self-stretch bg-accent"
style="border-radius: 10px 10px 0 0;"
@click="is_showing_filters = !is_showing_filters"
/>
<QTableFilters v-model:search="timesheet_store.search_filter" />
<QTableFilters
v-model:search="timesheet_store.search_filter"
class="col-auto q-mb-xs"
/>
</div>
</div>
<q-slide-transition>
<OverviewListFilters
v-if="is_showing_filters"
class="q-mx-lg"
/>
</q-slide-transition>
<q-separator
color="accent"
size="4px"
class="q-mx-lg"
/>
<OverviewList class="col" />
</q-page>
</template>