77 lines
3.0 KiB
Vue
77 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
/* eslint-disable */
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import type { PayPeriodEmployeeOverview } from '../types/timesheet-approval-pay-period-employee-overview-interface';
|
|
import type { QTableColumn } from 'quasar';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const columns: QTableColumn<PayPeriodEmployeeOverview>[] = [
|
|
{ name: 'employee_name', label: t('tableColumnLabelFullname'), field: 'employee_name', sortable: true },
|
|
{ name: 'regular_hours', label: t('tableColumnLabelRegularHours'), field: 'regular_hours', sortable: true },
|
|
{ name: 'evening_hours', label: t('tableColumnLabelEveningHours'), field: 'evening_hours' },
|
|
{ name: 'emergency_hours', label: t('tableColumnLabelEmergencyHours'), field: 'emergency_hours' },
|
|
{ name: 'overtime_hours', label: t('tableColumnLabelOvertimeHours'), field: 'overtime_hours' },
|
|
{ name: 'expenses', label: t('tableColumnLabelExpenses'), field: 'expenses', sortable: true },
|
|
{ name: 'mileage', label: t('tableColumnLabelMileage'), field: 'mileage', sortable: true }
|
|
]
|
|
|
|
const filter = ref('');
|
|
const selected = ref([]);
|
|
|
|
const props = defineProps<{
|
|
rows: PayPeriodEmployeeOverview[];
|
|
}>();
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="q-pa-md">
|
|
<q-table
|
|
:title="$t('timeSheetValidations.tableHeader')"
|
|
:rows="rows"
|
|
:columns="columns"
|
|
row-key="name"
|
|
selection="multiple"
|
|
v-model:selected="selected"
|
|
:filter="filter"
|
|
grid
|
|
hide-header
|
|
>
|
|
<template v-slot:top-right>
|
|
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
|
|
<template v-slot:append>
|
|
<q-icon name="search" />
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
|
|
<template v-slot:item="props: { cols: (QTableColumn<PayPeriodEmployeeOverview> & { value: unknown })[], row: PayPeriodEmployeeOverview, selected: boolean }">
|
|
<div
|
|
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
|
|
:style="props.selected ? 'transform: scale(0.95);' : ''"
|
|
>
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-checkbox dense v-model="props.selected" :label="props.row.is_approved ? $t('timeSheetValidations.timeSheetStatusVerified') : $t('timeSheetValidations.timeSheetStatusUnverified')" />
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-list dense>
|
|
<q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name">
|
|
<q-item-section>
|
|
<q-item-label>{{ col.label }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-item-label caption>{{ col.value }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
|
|
</q-table>
|
|
</div>
|
|
</template>
|