141 lines
3.9 KiB
Vue
141 lines
3.9 KiB
Vue
<script setup>
|
|
import {
|
|
list,
|
|
loadList,
|
|
setEndpoint,
|
|
setFilter,
|
|
} from "@/components/pagination/paginatedList.vue";
|
|
import {SessionUser} from "@/components/session/token/SessionUser.vue";
|
|
import { useRouter } from "vue-router";
|
|
import VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue";
|
|
import { computed } from "vue";
|
|
|
|
import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
|
|
import {Colors} from "@/ThemeConfig.vue";
|
|
import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
/**
|
|
* Router
|
|
*/
|
|
const router = useRouter();
|
|
const isUserRoute = computed(() => router.currentRoute.value.path.startsWith("/user"));
|
|
const canAddVehicle = computed(() => SessionUser.canAccessCustomerFeature("vehicles", "add"));
|
|
|
|
const props = defineProps({
|
|
customer_id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
add_other_customer_id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
})
|
|
setEndpoint("/vehicles", false);
|
|
if (props.customer_id) {
|
|
setFilter("customer_id", props.customer_id, false);
|
|
}
|
|
loadList();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="vehicles-pagination">
|
|
<TableLabeledPagination label="Oversigt over registrerede køretøjer">
|
|
<template #paginationDisplayFiltersElement>
|
|
<div class="column vehicles-pagination__filter-action-column">
|
|
<div class="vehicles-pagination__filter-action-row">
|
|
<div class="vehicles-pagination__filters">
|
|
<PaginationDisplayFilters
|
|
:productColumn="'type'"
|
|
:columnLabels="{ type: SessionUser.objects.vehicles.columns.type.label }"
|
|
/>
|
|
</div>
|
|
<div v-if="$slots.actions" class="vehicles-pagination__add-action">
|
|
<label class="label is-small"> </label>
|
|
<slot name="actions" />
|
|
</div>
|
|
<!-- Create a new vehicle, if the route is /user -->
|
|
<div class="vehicles-pagination__add-action"
|
|
v-if="isUserRoute && canAddVehicle">
|
|
<label class="label is-small"> </label>
|
|
<button
|
|
class="button is-link button-same-width vehicles-pagination__add-button"
|
|
@click="SessionUser.objects.vehicles.functions.showCreateObjectForCustomerForm(props.customer_id, () => loadList())" style="text-decoration-line: none;" :style="{ 'color': Colors.buttons.textColor, 'background-color': Colors.buttons.backgroundColor }"
|
|
data-testid="user-vehicles-add"
|
|
>
|
|
{{ t('user_vehicles.add_vehicle') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<VehiclesTable :vehicles="list" :show_add_vehicle="props.customer_id" :add_other_customer_id="props.add_other_customer_id"/>
|
|
</template>
|
|
</TableLabeledPagination>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.vehicles-pagination__filter-action-column {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.vehicles-pagination__filter-action-row {
|
|
align-items: flex-end;
|
|
display: flex;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.vehicles-pagination__filters {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.vehicles-pagination__filters :deep(.column) {
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.vehicles-pagination__filters :deep(.autocomplete),
|
|
.vehicles-pagination__filters :deep(.control),
|
|
.vehicles-pagination__filters :deep(.dropdown),
|
|
.vehicles-pagination__filters :deep(.select),
|
|
.vehicles-pagination__filters :deep(.input) {
|
|
width: 100%;
|
|
}
|
|
|
|
.vehicles-pagination__add-action {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.vehicles-pagination__add-button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.vehicles-pagination__filter-action-row {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.vehicles-pagination__add-action {
|
|
flex-basis: 11.75rem;
|
|
max-width: 42%;
|
|
}
|
|
|
|
.vehicles-pagination__add-button {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|