Update category

assets/js/Stepper.vue

@@ -4,36 +4,36 @@
             <slide class="py-16 px-8">
                 <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" v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
-                <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category_id !== null"></pagination>
+                <radio-grid id="category" v-model="value.category" class="mt-8" :options="categories"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null"></pagination>
             </slide>
 
             <!-- ********************************* Haus ********************************** -->
-            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
                 <radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
                 <radio-grid id="house_living_area" v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category == 'Haus'">
                 <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" class="mt-8" :options="numbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
                 <veeno :pipsy="pipsy" :tooltips="tooltips" :step="1" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
                 <radio-grid id="house_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
@@ -41,31 +41,31 @@
             </slide>
 
             <!-- ********************************* Gewerbe ********************************** -->
-            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Gewerbefläche</span> des Gewerbes?</heading>
                 <radio-grid id="gewerbe_living_area" v-model="value.living_area" class="mt-8" :options="gewerbeLivingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
                 <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>
                 <radio-grid id="gewerbe_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
                 <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" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
                 <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
                 <radio-grid id="gewerbe_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
@@ -73,25 +73,25 @@
             </slide>
 
             <!-- ******************************** Wohnung ******************************** -->
-            <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
+            <slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
                 <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" class="mt-8" :options="apartmentLivingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
+            <slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
                 <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" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
+            <slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
                 <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
+            <slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
                 <radio-grid id="apartment_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
@@ -99,13 +99,13 @@
             </slide>
 
             <!-- ******************************** Grundstueck ******************************** -->
-            <slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
+            <slide class="py-16 px-8" v-if="value.category == 'Grundstück'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
                 <radio-grid id="plot_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
-            <slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
+            <slide class="py-16 px-8" v-if="value.category == 'Grundstück'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
                 <radio-grid id="plot_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
@@ -206,7 +206,7 @@ export default {
             },
             range: {min: [1800, 1], max: [dayjs().year(), 1]},
             value: {
-                category_id: null,
+                category: null,
                 living_area: null,
                 plot_area: null,
                 construction_year: null,
@@ -219,6 +219,7 @@ export default {
                 lastname: '',
                 phone: '',
                 email: '',
+                source: 'Deine Immobilienbewertung',
                 datenschutz: false
             },
             innerStep: 0,
@@ -316,7 +317,7 @@ export default {
     },
     methods: {
         setCategoryId(id) {
-            this.value.category_id = id;
+            this.value.category = id;
             this.innerStep++;
         },
         back() {