Files
pleno-vue/src/components/displays/department/bookings/bookingsTable.vue
T

71 lines
2.3 KiB
Vue

<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
defineProps(['bookings']);
import { ref } from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
const redirectDepartmentOrderPage = (orderId, departmentId) => {
// Send the user to the order page
window.location.href = `/admin/${departmentId}/modules/bookings/${orderId}`;
};
// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
getDepartments();
}
</script>
<template>
<table class="table is-fullwidth">
<thead>
<tr>
<th>{{ $t('objects.columns.id') }}</th>
<th>{{ $t('objects.columns.customer_number') }}</th>
<th>{{ $t('objects.columns.type') }}</th>
<th>{{ $t('objects.columns.department') }}</th>
<th>{{ $t('tables.bookings.reg_tractor') }}</th>
<th>{{ $t('tables.bookings.reg_trailer') }}</th>
<th>{{ $t('common.reference') }}</th>
<th>{{ $t('objects.columns.notes') }}</th>
<th>{{ $t('common.date') }}</th>
<th>{{ $t('common.status') }}</th>
<th>{{ $t('objects.bookings.columns.contact_email') }}</th>
<th>{{ $t('objects.bookings.columns.wash_certificate_email') }}</th>
<th>{{ $t('tables.actions') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="booking in bookings" :key="booking.id">
<td>{{ booking.id }}</td>
<td>{{ booking.customer_number }}</td>
<td>{{ booking.wash_type }}</td>
<td>{{ booking.department }}</td>
<td>{{ booking.regNrTraekker }}</td>
<td>{{ booking.regNrTrailer }}</td>
<td>{{ booking.reference_number }}</td>
<td>{{ booking.notes }}</td>
<td>{{ booking.date }}</td>
<td>{{ booking.status }}</td>
<td>{{ booking.contact_email }}</td>
<td>{{ booking.washCertificateEmail }}</td>
<td>
<div class="buttons">
<button class="button is-small is-dark" @click="redirectDepartmentOrderPage(booking.id, booking.department_id)">{{ $t('common.show') }}</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="12">{{ $t('tables.showing') }} {{ bookings.length }} {{ $t('objects.bookings.multiple') }}</td>
</tr>
</tfoot>
</table>
</template>
<style scoped>
</style>