From 4affc33a0343ad2bb898f0b0599b7c1105bbf8aa Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 24 Apr 2024 14:03:11 +0200
Subject: [PATCH] Update stepper view

---
 assets/js/Stepper.vue | 143 +++++++++++++++++++-----------------------
 1 file changed, 66 insertions(+), 77 deletions(-)

diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue
index 02f608c..717ada7 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -4,8 +4,10 @@
             <slide :key="0" class="py-8 sm:py-16 px-3 sm:px-6">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
                 <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
-                <radio-grid id="category" :model-value="value.category" :options="categories" @update:modelValue="onUpdateCategory"></radio-grid>
-                <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null"> </pagination>
+                <radio-grid id="category" :model-value="value.category" :options="categories"
+                    @update:modelValue="onUpdateCategory"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
+                </pagination>
             </slide>
 
             <!-- ********************************* Haus ********************************** -->
@@ -24,7 +26,8 @@
             <slide v-if="value.category == 'Haus'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
-                <radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" :options="numbersOfRooms"></radio-grid>
+                <radio-grid id="house_number_of_rooms" v-model="value.number_of_floors"
+                    :options="numbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
@@ -49,14 +52,16 @@
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
-                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes? </heading>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes?
+                </heading>
                 <radio-grid id="gewerbe_plot_area" v-model="value.plot_area" :options="plotPlotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Gewerbe?</heading>
-                <radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" :options="apartmentNumbersOfRooms"></radio-grid>
+                <radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors"
+                    :options="apartmentNumbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
@@ -76,13 +81,15 @@
             <slide v-if="value.category == 'Wohnung'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
-                <radio-grid id="apartment_living_area" v-model="value.living_area" :options="apartmentLivingAreas"></radio-grid>
+                <radio-grid id="apartment_living_area" v-model="value.living_area"
+                    :options="apartmentLivingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
             <slide v-if="value.category == 'Wohnung'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
-                <radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" :options="apartmentNumbersOfRooms"></radio-grid>
+                <radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors"
+                    :options="apartmentNumbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
             <slide v-if="value.category == 'Wohnung'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
@@ -122,36 +129,18 @@
                     <v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
                     <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
                     <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
-                    <v-checkbox
-                        id="datenschutz"
-                        v-model="value.datenschutz"
-                        class="col-span-2"
-                        name="datenschutz"
-                        label='Ich habe die <a href="/datenschutzerklaerung" class="text-primary" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>'
-                    />
+                    <v-checkbox id="datenschutz" v-model="value.datenschutz" class="col-span-2" name="datenschutz"
+                        label='Ich habe die <a href="/datenschutzerklaerung" class="text-primary" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
                 </div>
-                <pagination
-                    v-model="innerStep"
-                    class="mt-6"
-                    :nextable="
-                        value.object_address.length > 0 &&
-                        value.object_zip.length > 0 &&
-                        value.object_location.length > 0 &&
-                        value.firstname.length !== 0 &&
-                        value.lastname.length !== 0 &&
-                        value.email.length !== 0 &&
-                        value.phone.length !== 0 &&
-                        value.datenschutz === true
-                    "
-                    submit
-                ></pagination>
+                <pagination v-model="innerStep" class="mt-6" nextable submit></pagination>
             </slide>
 
             <slide v-if="value.category" :key="slideCount[value.category] + 1">
                 <div class="w-full h-full p-3 flex flex-col items-center justify-center">
                     <div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
                     <div class="text-sm mt-4 md:text-lg">
-                        In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei Ihnen melden.
+                        In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei Ihnen
+                        melden.
                     </div>
                 </div>
             </slide>
@@ -160,7 +149,7 @@
 </template>
 
 <script>
-import {nextTick} from 'vue';
+import { nextTick } from 'vue';
 import Heading from './components/Heading.vue';
 import VSlider from './components/VSlider.vue';
 import axios from 'axios';
@@ -198,10 +187,10 @@ export default {
             },
             innerStep: 0,
             categories: [
-                {key: 'Haus', label: 'Haus', icon: 'category-house'},
-                {key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'},
-                {key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment'},
-                {key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business'},
+                { key: 'Haus', label: 'Haus', icon: 'category-house' },
+                { key: 'Grundstück', label: 'Grundstück', icon: 'category-plot' },
+                { key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment' },
+                { key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business' },
             ],
             kinds: {
                 house: [
@@ -228,65 +217,65 @@ export default {
                 ],
             },
             livingAreas: [
-                {key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm'},
-                {key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
-                {key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm' },
+                { key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md' },
+                { key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             apartmentLivingAreas: [
-                {key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm'},
-                {key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md'},
-                {key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm' },
+                { key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md' },
+                { key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             gewerbeLivingAreas: [
-                {key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm'},
-                {key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md'},
-                {key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg'},
-                {key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm' },
+                { key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md' },
+                { key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg' },
+                { key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             conditions: [
-                {key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'},
-                {key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'},
-                {key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg'},
-                {key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg'},
-                {key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg'},
+                { key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md' },
+                { key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm' },
+                { key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg' },
+                { key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg' },
+                { key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg' },
             ],
             plotAreas: [
-                {key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm'},
-                {key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md'},
-                {key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm' },
+                { key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md' },
+                { key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             plotPlotAreas: [
-                {key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm'},
-                {key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md'},
-                {key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm' },
+                { key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md' },
+                { key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
             numbersOfFloors: [
-                {key: '1', label: '1', icon: 'plot-area-sm'},
-                {key: '2', label: '2', icon: 'plot-area-md'},
-                {key: '3', label: '3', icon: 'plot-area-lg'},
-                {key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg'},
+                { key: '1', label: '1', icon: 'plot-area-sm' },
+                { key: '2', label: '2', icon: 'plot-area-md' },
+                { key: '3', label: '3', icon: 'plot-area-lg' },
+                { key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg' },
             ],
             numbersOfRooms: [
-                {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
-                {key: '3-5', label: '3-5', icon: 'plot-area-md'},
-                {key: '5-8', label: '5-8', icon: 'plot-area-lg'},
-                {key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg'},
+                { key: '1-2', label: '1-2', icon: 'plot-area-sm' },
+                { key: '3-5', label: '3-5', icon: 'plot-area-md' },
+                { key: '5-8', label: '5-8', icon: 'plot-area-lg' },
+                { key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg' },
             ],
             apartmentNumbersOfRooms: [
-                {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
-                {key: '3-5', label: '3-5', icon: 'plot-area-md'},
-                {key: '6-8', label: '6-8', icon: 'plot-area-lg'},
-                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
+                { key: '1-2', label: '1-2', icon: 'plot-area-sm' },
+                { key: '3-5', label: '3-5', icon: 'plot-area-md' },
+                { key: '6-8', label: '6-8', icon: 'plot-area-lg' },
+                { key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
             ],
-            wohnflaechen: [{label: 'bis 50 m²'}, {label: '51 - 150 m²'}, {label: 'mehr als 151 m²'}, {label: 'nicht bekannt'}],
-            etagen: [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4 oder mehr'}],
-            sellables: [{label: '3 Monate'}, {label: '6 Monate'}, {label: '12 Monate oder später'}],
-            furnishings: [{label: 'einfach'}, {label: 'gepflegt'}, {label: 'sehr gut'}, {label: 'luxuriös'}],
+            wohnflaechen: [{ label: 'bis 50 m²' }, { label: '51 - 150 m²' }, { label: 'mehr als 151 m²' }, { label: 'nicht bekannt' }],
+            etagen: [{ label: '1' }, { label: '2' }, { label: '3' }, { label: '4 oder mehr' }],
+            sellables: [{ label: '3 Monate' }, { label: '6 Monate' }, { label: '12 Monate oder später' }],
+            furnishings: [{ label: 'einfach' }, { label: 'gepflegt' }, { label: 'sehr gut' }, { label: 'luxuriös' }],
         };
     },
     computed: {