copenhagentruckwash/pleno-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"Update MyBookingsBook.vue with computed validation for missing mandatory fields, adjust label texts for clarity, and add button disable logic for incomplete forms"

Browse Source
This commit is contained in:
Jeppe Bundgaard
2025-11-05 15:24:28 +01:00
parent 1c16f47eaa
commit b6d2acc3a2
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue
+1 -1
View File
@@ -20,7 +20,7 @@ const onClickDateTime = () => {
<template>
<!-- Date & time -->
<div class="field">
<label class="label">Vælg dato (Valgfrit)</label>
<label class="label">Vælg dato</label>
</div>
<div class="field has-addons">
<!-- Time -->
src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
+15 -7
View File
@@ -671,6 +671,14 @@ onUnmounted(() => {
document.documentElement.classList.remove('is-clipped');
});
const missingFields = computed(() => {
let missingFields = [];
if (!customerNumber.value) missingFields.push('Kunde');
if (!reg1.value) missingFields.push('Køretøj');
if (!dateTime.value) missingFields.push('Dato');
return missingFields;
})
</script>
<template>
@@ -823,14 +831,14 @@ onUnmounted(() => {
<TimeBookingsElementSelectDateTime :dateTime="dateTime" @onClickDateTime="onClickDateTime" :isDisabled="!hasDepartment"/>
</div>
<div class="mb-3">
<label class="label">Reference</label>
<label class="label">Reference (valgfrit)</label>
<TimeBookingsElementSelectReference :reference="reference" @update:reference="reference = $event" @onClickReference="onClickReference"
:is-reference-input="isReferenceInput" @update:is-reference-input="isReferenceInput = $event"
:label="null"
/>
</div>
<div class="mb-3">
<label class="label">PO Nummer</label>
<label class="label">PO Nummer (valgfrit)</label>
<TimeBookingsElementSelectPoNumber :poNumber="poNumber" @update:poNumber="poNumber = $event"
@onClickPoNumber="onClickPoNumber" :is-po-number-input="isPoNumberInput"
@update:is-po-number-input="isPoNumberInput = $event"
@@ -838,22 +846,22 @@ onUnmounted(() => {
/>
</div>
<div class="mb-1">
<label class="label">Note</label>
<label class="label">Note (valgfrit)</label>
<TimeBookingsElementSelectNotes :notes="notes" @update:notes="notes = $event" @onClickNotes="onClickNotes"
:is-notes-input="isNotesInput" @update:is-notes-input="isNotesInput = $event"
:label="(notes !== '' || isNotesInput) ? 'Note (valgfrit)' : null"
:label="null"
/>
</div>
<div class="mb-3">
<label class="label">Kundenummer</label>
<div class="field">
<div class="control">
<input id="customer-number" class="input" type="number" placeholder="Angiv kundenummer (valgfrit)" v-model.number="customerNumber" min="0" />
<input id="customer-number" class="input" type="number" placeholder="Angiv kundenummer" v-model.number="customerNumber" min="0" />
</div>
</div>
</div>
<div class="mb-3">
<label class="label">Afhentning</label>
<label class="label">Afhentning (valgfrit)</label>
<div class="field">
<label class="checkbox">
<input id="pickup" type="checkbox" v-model="pickup" />
@@ -865,7 +873,7 @@ onUnmounted(() => {
<!--<PosSelectedCustomer class="mt-3"/> -->
<NextStepError class="is-fullwidth" />
<div class="buttons">
<button class="button is-fullwidth is-primary" @click="openSummary">
<button class="button is-fullwidth is-primary" @click="openSummary" :disabled="missingFields.length > 0">
Gå til bekræftelse
</button>
<Cancel class="is-fullwidth" />