"Add 'hideTypeSelect' prop to TimeBookingsElementSelectVehicles.vue for flexible UI control; simplify reg1/reg2 validation logic and improve vehicle suggestions handling in multiple booking components."
This commit is contained in:
Jeppe Bundgaard
+10
-7
@@ -1,12 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import {defineProps, defineEmits, computed, ref} from 'vue';
|
||||
import {defineProps, defineEmits, computed, ref, withDefaults} from 'vue';
|
||||
import type {PosDepartment} from '@/components/displays/department/pos/steps/mobile/objects/PosDepartment.vue';
|
||||
import type {PosProduct} from '@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue';
|
||||
import TimeBookingsElementReg1Addons from './TimeBookingsElementReg1Addons.vue';
|
||||
import TimeBookingsElementReg2Addons
|
||||
from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementReg2Addons.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
const props = withDefaults(defineProps<{
|
||||
reg1: string;
|
||||
reg2: string;
|
||||
reg1Type: PosProduct | null;
|
||||
@@ -16,7 +16,10 @@ const props = defineProps<{
|
||||
availableVehicleTypes: PosProduct[];
|
||||
showPriceOnBookingPage: boolean;
|
||||
label: string | null | undefined;
|
||||
}>();
|
||||
hideTypeSelect?: boolean;
|
||||
}>(), {
|
||||
hideTypeSelect: false
|
||||
});
|
||||
const emits = defineEmits([
|
||||
'update:reg1',
|
||||
'update:reg2',
|
||||
@@ -91,7 +94,7 @@ const reg2TypeVmodel = computed({
|
||||
<label class="label">{{label === undefined ? 'Indsæt relevante registreringsnumre' : label}}</label>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded has-icons-left is-fixed-half">
|
||||
<div class="control is-expanded has-icons-left" :class="{ 'is-fixed-half': !hideTypeSelect }">
|
||||
<button class="button has-icons-left is-fullwidth default-button" @click="onClickSelectReg1"
|
||||
:class="{ 'is-link': reg1 !== '' }" v-show="!isReg1Input">
|
||||
<span>
|
||||
@@ -119,7 +122,7 @@ const reg2TypeVmodel = computed({
|
||||
<i class="fas fa-truck-pickup"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control is-expanded has-icons-left has-icons-right is-fixed-half">
|
||||
<div class="control is-expanded has-icons-left has-icons-right is-fixed-half" v-show="!hideTypeSelect">
|
||||
<div class="select is-fullwidth has-icons-right has-icons-left">
|
||||
<select v-model="reg1TypeVmodel" :disabled="reg1 === ''">
|
||||
<option :value="null" disabled>Vælg køretøjstype</option>
|
||||
@@ -134,7 +137,7 @@ const reg2TypeVmodel = computed({
|
||||
</div>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control has-icons-left is-expanded is-fixed-half">
|
||||
<div class="control has-icons-left is-expanded" :class="{ 'is-fixed-half': !hideTypeSelect }">
|
||||
<button class="button has-icons-left is-fullwidth default-button" @click="onClickSelectReg2"
|
||||
:class="{ 'is-link': reg2 !== '' }" v-show="!isReg2Input">
|
||||
<span>
|
||||
@@ -160,7 +163,7 @@ const reg2TypeVmodel = computed({
|
||||
<i class="fas fa-trailer"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control is-expanded has-icons-left is-fixed-half">
|
||||
<div class="control is-expanded has-icons-left is-fixed-half" v-show="!hideTypeSelect">
|
||||
<div class="select is-fullwidth has-icons-right has-icons-left">
|
||||
<select v-model="reg2TypeVmodel" :disabled="reg2 === ''">
|
||||
<option :value="null" disabled>Vælg køretøjstype</option>
|
||||
|
||||
@@ -742,7 +742,7 @@ const missingFields = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="((reg1 === '' || reg1Type === null) && (reg2 === '' || reg2Type === null)) || forceDisplayRightWalkthrough">
|
||||
<template v-else-if="((reg1 === '') && (reg2 === '')) || forceDisplayRightWalkthrough">
|
||||
<div @click="interactingWithRightWalkthrough(true)">
|
||||
<div class="has-text-centered" style="height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<span class="icon is-large">
|
||||
@@ -756,23 +756,24 @@ const missingFields = computed(() => {
|
||||
:show-price-on-booking-page="hasShowPriceOnBookingPageAttribute()" @update:reg1="reg1 = $event" @update:reg1-type="reg1Type = $event"
|
||||
@update:reg2="reg2 = $event" @update:reg2-type="reg2Type = $event" @update:is-reg1-input="isReg1Input = $event"
|
||||
@update:is-reg2-input="isReg2Input = $event" @setInputFocus="setInputFocus($event)"
|
||||
:hide-type-select="true"
|
||||
/>
|
||||
<TimeBookingsElementVehicleSuggestions :label="'Er det et af disse køretøjer?'" :input="(reg1 !== '' && !reg1Type) ? reg1 : (reg2 !== '' && !reg2Type) ? reg2 : ''" :availableVehicleTypes="availableVehicleTypes"
|
||||
<TimeBookingsElementVehicleSuggestions :label="'Er det et af disse køretøjer?'" :input="(reg1 !== '') ? reg1 : (reg2 !== '') ? reg2 : ''" :availableVehicleTypes="availableVehicleTypes"
|
||||
@update:isAnySuggestionsDisplayed="setAnyVisibleSuggestions($event)"
|
||||
@onSelectVehicle="
|
||||
(vehicle) => {
|
||||
if (reg1 !== '' && !reg1Type) {
|
||||
if (reg1 !== '') {
|
||||
reg1 = vehicle.reg;
|
||||
reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
|
||||
} else if (reg2 !== '' && !reg2Type) {
|
||||
} else if (reg2 !== '') {
|
||||
reg2 = vehicle.reg;
|
||||
reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<div class="" v-show="!isAnySuggestionsDisplayed">
|
||||
<div class="">
|
||||
<template v-if="(forceDisplayRightWalkthrough)">
|
||||
<div class="has-text-centered mt-4" v-if="(reg1 !== '' && reg1Type !== null) || (reg2 !== '' && reg2Type !== null)">
|
||||
<div class="has-text-centered mt-4" v-if="(reg1 !== '') || (reg2 !== '')">
|
||||
<button class="button is-light is-fullwidth is-link has-icons-right" @click="delayThen(1, () => {interactingWithRightWalkthrough(false);}); forceDisplayRightWalkthrough = false;">
|
||||
<span>Næste trin: Vælg tillæg</span>
|
||||
<span class="icon is-right">
|
||||
@@ -813,7 +814,7 @@ const missingFields = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
<!-- Addons -->
|
||||
<PosDepartmentStepMobile2Addons v-if="hasVehicle && selectedProduct?.id" :addons="visibleAddons" :label="'Add-ons'" :compact="true" @update:addons="onUpdateAddons"/>
|
||||
<PosDepartmentStepMobile2Addons v-if="selectedProduct?.id" :addons="visibleAddons" :label="'Add-ons'" :compact="true" @update:addons="onUpdateAddons"/>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Current order items -->
|
||||
@@ -945,7 +946,7 @@ const missingFields = computed(() => {
|
||||
</div>
|
||||
</template>
|
||||
<!-- If there's no vehicles selected, show the full width backdrop stating this is required. -->
|
||||
<template v-else-if="((reg1 === '' || reg1Type === null) && (reg2 === '' || reg2Type === null)) || forceDisplayRightWalkthrough">
|
||||
<template v-else-if="((reg1 === '') && (reg2 === '')) || forceDisplayRightWalkthrough">
|
||||
<div class="column is-12">
|
||||
<div @click="interactingWithRightWalkthrough(true)">
|
||||
<div class="has-text-centered" style="height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
@@ -961,25 +962,26 @@ const missingFields = computed(() => {
|
||||
:show-price-on-booking-page="hasShowPriceOnBookingPageAttribute()" @update:reg1="reg1 = $event" @update:reg1-type="reg1Type = $event"
|
||||
@update:reg2="reg2 = $event" @update:reg2-type="reg2Type = $event" @update:is-reg1-input="isReg1Input = $event"
|
||||
@update:is-reg2-input="isReg2Input = $event" @setInputFocus="setInputFocus($event)"
|
||||
:hide-type-select="true"
|
||||
/>
|
||||
<!-- Vehicles suggestions -->
|
||||
<TimeBookingsElementVehicleSuggestions :label="'Er det et af disse køretøjer?'" :input="(reg1 !== '' && !reg1Type) ? reg1 : (reg2 !== '' && !reg2Type) ? reg2 : ''" :availableVehicleTypes="availableVehicleTypes"
|
||||
<TimeBookingsElementVehicleSuggestions :label="'Er det et af disse køretøjer?'" :input="(reg1 !== '') ? reg1 : (reg2 !== '') ? reg2 : ''" :availableVehicleTypes="availableVehicleTypes"
|
||||
@update:isAnySuggestionsDisplayed="setAnyVisibleSuggestions($event)"
|
||||
@onSelectVehicle="
|
||||
(vehicle) => {
|
||||
if (reg1 !== '' && !reg1Type) {
|
||||
if (reg1 !== '') {
|
||||
reg1 = vehicle.reg;
|
||||
reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
|
||||
} else if (reg2 !== '' && !reg2Type) {
|
||||
} else if (reg2 !== '') {
|
||||
reg2 = vehicle.reg;
|
||||
reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<div class="" v-show="!isAnySuggestionsDisplayed">
|
||||
<div class="">
|
||||
<!-- If the user has selected a vehicle, whilst reactively interacting with the right walkthrough, show the next button -->
|
||||
<template v-if="(forceDisplayRightWalkthrough)">
|
||||
<div class="has-text-centered mt-4" v-if="(reg1 !== '' && reg1Type !== null) || (reg2 !== '' && reg2Type !== null)">
|
||||
<div class="has-text-centered mt-4" v-if="(reg1 !== '') || (reg2 !== '')">
|
||||
<button class="button is-light is-fullwidth is-link has-icons-right" @click="delayThen(1, () => interactingWithRightWalkthrough(false)); forceDisplayRightWalkthrough = false;">
|
||||
<span>Næste trin: Vælg tillæg</span>
|
||||
<span class="icon is-right">
|
||||
@@ -1082,7 +1084,7 @@ const missingFields = computed(() => {
|
||||
<div class="column is-6" v-show="isAnySuggestionsDisplayed">
|
||||
<!-- If the user has selected a vehicle, whilst reactively interacting with the right walkthrough, show the next button -->
|
||||
<template v-if="(forceDisplayRightWalkthrough)">
|
||||
<div class="has-text-centered mt-4" v-if="(reg1 !== '' && reg1Type !== null) || (reg2 !== '' && reg2Type !== null)">
|
||||
<div class="has-text-centered mt-4" v-if="(reg1 !== '') || (reg2 !== '')">
|
||||
<button class="button is-light is-fullwidth is-link has-icons-right" @click="interactingWithRightWalkthrough(false); forceDisplayRightWalkthrough = false;">
|
||||
<span>Næste trin: Vælg tillæg</span>
|
||||
<span class="icon is-right">
|
||||
|
||||
Reference in New Issue
Block a user