"Add NewBookingStep5.vue for booking confirmation step in dashboard, implement summary display with computed totals and formatted inputs"

2025-11-05 14:22:55 +01:00
parent bccc989157
commit 1c16f47eaa
1 changed files with 116 additions and 0 deletions
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, defineProps, defineEmits } from 'vue';
+import WhiteBox from '@/components/displays/boxes/WhiteBox.vue';
+
+const props = defineProps<{
+  department: any | null,
+  reg1: string,
+  reg1Type: any | null,
+  reg2: string,
+  reg2Type: any | null,
+  dateTime: Date | null,
+  basket: Array<{ id?: number|string, name: string, price?: number|null, quantity?: number|null }>,
+  notes: string,
+  reference: string,
+  poNumber: string,
+  pickup?: boolean,
+}>();
+
+const emits = defineEmits<{
+  (e: 'back'): void,
+  (e: 'confirm'): void,
+}>();
+
+const formattedDateTime = computed(() => {
+  if (!props.dateTime) return 'Ikke valgt';
+  const d = props.dateTime;
+  const date = d.toLocaleDateString('da-DK', { year: 'numeric', month: 'long', day: 'numeric' });
+  const time = d.toLocaleTimeString('da-DK', { hour: '2-digit', minute: '2-digit' });
+  return `${date} kl. ${time}`;
+});
+
+const totalAmount = computed(() => {
+  return (props.basket || []).reduce((sum, p) => sum + ((p.price || 0) * (p.quantity || 1)), 0);
+});
+
+const formatDkk = (amount?: number | null) => (amount || 0).toLocaleString('da-DK', { style: 'currency', currency: 'DKK' });
+</script>
+
+<template>
+  <div>
+    <WhiteBox>
+      <template #default>
+        <h3 class="title is-5 mb-3">Bekræft din booking</h3>
+        <div class="content">
+          <div class="mb-3">
+            <strong>Lokation:</strong>
+            <div>
+              <span v-if="department">{{ department.name }}</span>
+              <span v-else class="has-text-grey">Ikke valgt</span>
+            </div>
+          </div>
+          <div class="mb-3">
+            <strong>Køretøj(er):</strong>
+            <div>
+              <div v-if="reg1">
+                {{ reg1 }}
+                <span v-if="reg1Type" class="tag is-light ml-2">{{ reg1Type.name }}</span>
+              </div>
+              <div v-if="reg2">
+                {{ reg2 }}
+                <span v-if="reg2Type" class="tag is-light ml-2">{{ reg2Type.name }}</span>
+              </div>
+              <div v-if="!reg1 && !reg2" class="has-text-grey">Ikke valgt</div>
+            </div>
+          </div>
+          <div class="mb-3">
+            <strong>Dato og tidspunkt:</strong>
+            <div>{{ formattedDateTime }}</div>
+          </div>
+          <div class="mb-3">
+            <strong>Valgte ydelser:</strong>
+            <div v-if="basket && basket.length">
+              <div class="is-flex is-justify-content-space-between" v-for="(item, idx) in basket" :key="`${item.id || item.name}-${idx}`">
+                <span>
+                  {{ item.name }}
+                  <span v-if="(item.quantity || 1) > 1" class="has-text-grey ml-1">× {{ item.quantity }}</span>
+                </span>
+                <span>{{ formatDkk((item.price || 0) * (item.quantity || 1)) }}</span>
+              </div>
+              <hr />
+              <div class="is-flex is-justify-content-space-between has-text-weight-semibold">
+                <span>Total</span>
+                <span>{{ formatDkk(totalAmount) }}</span>
+              </div>
+            </div>
+            <div v-else class="has-text-grey">Ingen ydelser valgt</div>
+          </div>
+          <div class="mb-3">
+            <strong>Reference:</strong>
+            <div>{{ reference || '—' }}</div>
+          </div>
+          <div class="mb-3">
+            <strong>PO-nummer:</strong>
+            <div>{{ poNumber || '—' }}</div>
+          </div>
+          <div class="mb-3">
+            <strong>Noter:</strong>
+            <div style="white-space: pre-wrap;">{{ notes || '—' }}</div>
+          </div>
+          <div class="mb-3">
+            <strong>Afhentning:</strong>
+            <div>{{ (pickup ?? false) ? 'Ja' : 'Nej' }}</div>
+          </div>
+        </div>
+      </template>
+    </WhiteBox>
+
+    <div class="buttons mt-4">
+      <button class="button is-light is-fullwidth" @click="emits('back')">Tilbage</button>
+      <button class="button is-primary is-fullwidth" @click="emits('confirm')">Bekræft booking</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>