102 lines
4.0 KiB
Vue
102 lines
4.0 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
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 { useUiStore } from 'src/stores/ui-store';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import type { OverviewColumns, PayPeriodOverviewFilters } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
|
|
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
|
|
import { ref } from 'vue';
|
|
|
|
const overviewFilters = defineModel<PayPeriodOverviewFilters>('filters', { required: true });
|
|
const visibleColumns = defineModel<OverviewColumns[]>('visibleColumns', { required: true });
|
|
|
|
const uiStore = useUiStore();
|
|
const timesheetStore = useTimesheetStore();
|
|
const timesheetApprovalApi = useTimesheetApprovalApi();
|
|
|
|
const isShowingFilters = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="column full-width">
|
|
<div class="col-auto row items-start full-width q-px-lg q-mt-md">
|
|
<div class="col row">
|
|
<PayPeriodNavigator
|
|
@date-selected="timesheetApprovalApi.getTimesheetOverviews"
|
|
@pressed-next-button="timesheetApprovalApi.getTimesheetOverviews"
|
|
@pressed-previous-button="timesheetApprovalApi.getTimesheetOverviews"
|
|
style="height: 40px;"
|
|
/>
|
|
|
|
<q-space />
|
|
|
|
<div
|
|
class="col-auto row no-wrap items-start"
|
|
:class="$q.platform.is.mobile ? 'q-mb-md' : ''"
|
|
>
|
|
<q-btn-toggle
|
|
v-model="uiStore.user_preferences.is_timesheet_approval_grid"
|
|
push
|
|
rounded
|
|
color="white"
|
|
text-color="accent"
|
|
toggle-color="accent"
|
|
class="col-auto"
|
|
:class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
|
|
:options="[
|
|
{ icon: 'grid_view', value: true },
|
|
{ icon: 'view_list', value: false },
|
|
]"
|
|
style="height: 40px;"
|
|
/>
|
|
|
|
<q-btn
|
|
push
|
|
rounded
|
|
icon="download"
|
|
color="accent"
|
|
:label="$q.screen.lt.md ? '' : $t('shared.label.download')"
|
|
class="col-auto q-mr-sm"
|
|
style="height: 40px;"
|
|
@click="timesheetStore.is_report_dialog_open = true"
|
|
/>
|
|
|
|
<QTableFilters
|
|
v-model:search="overviewFilters.name_search_string"
|
|
class="col-auto q-mb-sm"
|
|
/>
|
|
</div>
|
|
|
|
<q-btn
|
|
flat
|
|
icon="filter_alt"
|
|
color="white"
|
|
:label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
|
|
class="col-auto q-ml-sm self-stretch bg-primary"
|
|
style="border-radius: 5px 5px 0 0;"
|
|
@click="isShowingFilters = !isShowingFilters"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<q-slide-transition>
|
|
<OverviewListFilters
|
|
v-if="isShowingFilters"
|
|
v-model:filters="overviewFilters"
|
|
v-model:visible-columns="visibleColumns"
|
|
class="q-mx-lg col-auto bg-primary"
|
|
/>
|
|
</q-slide-transition>
|
|
|
|
<q-separator
|
|
color="primary"
|
|
size="5px"
|
|
class="q-mx-lg q-my-none q-pa-none"
|
|
/>
|
|
</div>
|
|
</template> |