From bf53d2cdd5ed6ffb010ea458f3559e8f0dfe3c93 Mon Sep 17 00:00:00 2001
From: Tobias Frauenfelder <tobifra@users.noreply.github.com>
Date: Sun, 18 Aug 2024 21:05:08 +0200
Subject: [PATCH] Update bulk order form layout and validation

---
 .vitepress/components/BulkOrderForm.vue      | 94 ++++++++++++--------
 .vitepress/components/SelectInput.vue        |  5 +-
 .vitepress/components/TextInput.vue          |  2 +-
 api/app/Http/Controllers/OrderController.php |  1 +
 bestellen.md                                 |  3 +-
 5 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/.vitepress/components/BulkOrderForm.vue b/.vitepress/components/BulkOrderForm.vue
index eafe891..696d165 100644
--- a/.vitepress/components/BulkOrderForm.vue
+++ b/.vitepress/components/BulkOrderForm.vue
@@ -1,10 +1,15 @@
 <template>
-  <form class="flex flex-col space-y-2" @submit.prevent="submitForm">
+  <form class="flex flex-col space-y-2" @submit.prevent="submitForm" id="formular">
     <div class="hidden rounded-md p-3 bg-green-300" id="successmessage">
-        Vielen Dank für deine Bestellung. Du erhältst eine Bestätigung per E-Mail zusammen mit der Rechnung.
+      Vielen Dank für deine Bestellung. Du erhältst eine Bestätigung per E-Mail
+      zusammen mit der Rechnung.
     </div>
     <h4 class="pt-2">Deine Daten</h4>
-    <TextInput v-model="form.pfadiname" label="Pfadiname (falls vorhanden)" :required="false" />
+    <TextInput
+      v-model="form.pfadiname"
+      label="Pfadiname"
+      :required="false"
+    />
     <BreakpointSpaceManager>
       <TextInput v-model="form.first_name" label="Vorname" />
       <TextInput v-model="form.last_name" label="Nachname" />
@@ -12,7 +17,12 @@
 
     <TextInput v-model="form.email" label="E-Mail" />
     <h4 class="pt-2">Bestellung</h4>
-    <SelectInput v-model="form.quantity" label="Ich hätte gerne ..." :options="options" />
+    <SelectInput
+      v-model="form.quantity"
+      label="Ich hätte gerne ..."
+      :options="options"
+      :required="true"
+    />
 
     <h4 class="pt-2">Lieferadresse</h4>
     <BreakpointSpaceManager>
@@ -31,13 +41,12 @@
       <TextInput v-model="form.delivery_town" label="Ort (Lieferung)" />
     </BreakpointSpaceManager>
     <button
-    type="submit"
+      type="submit"
       class="bg-book-red hover:bg-chapter-red text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline"
     >
-        Bestellen
+      Bestellen
     </button>
-
-</form>
+  </form>
 </template>
 
 <script>
@@ -52,58 +61,67 @@ export default {
   },
   data() {
     return {
-        success: false,
+      success: false,
       form: {
         first_name: undefined,
         last_name: undefined,
-        pfadiname:  undefined,
-        email:  undefined,
-        delivery_first_name:  undefined,
-        delivery_last_name:  undefined,
-        delivery_street:  undefined,
-        delivery_zip:  undefined,
-        delivery_town:  undefined,
+        pfadiname: undefined,
+        email: undefined,
+        delivery_first_name: undefined,
+        delivery_last_name: undefined,
+        delivery_street: undefined,
+        delivery_zip: undefined,
+        delivery_town: undefined,
         quantity: 20,
       },
       options: [
-        { label: "Sammelbestellung von 20 Stück à CHF 22: Total CHF 440", value: 20 },
-        { label: "Sammelbestellung von 50 Stück à CHF 20: Total CHF 1000", value: 50 },
-        { label: "Sammelbestellung von 100 Stück à CHF 18: Total CHF 1800", value: 100 },
+        {
+          label: "Sammelbestellung von 20 Stück à CHF 22: Total CHF 440",
+          value: 20,
+        },
+        {
+          label: "Sammelbestellung von 50 Stück à CHF 20: Total CHF 1000",
+          value: 50,
+        },
+        {
+          label: "Sammelbestellung von 100 Stück à CHF 18: Total CHF 1800",
+          value: 100,
+        },
       ],
     };
   },
   methods: {
     async submitForm() {
-        const backendURL = import.meta.env.VITE_BACKEND_URL
-        try {
+      const backendURL = import.meta.env.VITE_BACKEND_URL;
+      try {
         const response = await fetch(`${backendURL}/order`, {
-            method: 'POST', 
-            headers: {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json',
-            },
-            body: JSON.stringify(this.form),
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+          body: JSON.stringify(this.form),
         });
         if (!response.ok) {
-            throw new Error('Ein Fehler ist aufgetreten');
+          throw new Error("Ein Fehler ist aufgetreten");
         }
 
         const responseData = await response.json();
-        
-        console.log('Success:', responseData);
-        this.form = {}
+
+        console.log("Success:", responseData);
+        this.form = {};
+        this.form.quantity = 20;
         this.success = true;
-        const successElement = document.getElementById('successmessage')
-        successElement.classList.remove('hidden')
-        successElement.scrollIntoView({behavior: "smooth"});
+        const successElement = document.getElementById("successmessage");
+        successElement.classList.remove("hidden");
+        successElement.scrollIntoView({ behavior: "smooth" });
 
         return responseData;
-
-    } catch (error) {
+      } catch (error) {
         // Handle any errors that occurred during the request
-        console.error('Error:', error);
+        console.error("Error:", error);
         throw error; // Rethrow the error if needed
-    }
+      }
     },
   },
 };
diff --git a/.vitepress/components/SelectInput.vue b/.vitepress/components/SelectInput.vue
index a99e2d1..1fdcc88 100644
--- a/.vitepress/components/SelectInput.vue
+++ b/.vitepress/components/SelectInput.vue
@@ -1,4 +1,7 @@
 <template>
+  <label class="block text-book-red  text-sm font-bold mb-2 upper">
+        {{ label }} {{ required ? "*" : "" }}
+    </label>
     <select
       v-model="payload"
       class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-book-red focus:border-chapter-red"
@@ -16,7 +19,7 @@
 </template>
 <script>
 export default {
-  props: ["modelValue", "label", "placeholder", "options"],
+  props: ["modelValue", "label", "placeholder", "options", "required"],
   computed: {
     payload: {
       get() {
diff --git a/.vitepress/components/TextInput.vue b/.vitepress/components/TextInput.vue
index e17b4b9..88113c5 100644
--- a/.vitepress/components/TextInput.vue
+++ b/.vitepress/components/TextInput.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="w-full">
     <label class="block text-book-red  text-sm font-bold mb-2 upper">
-        {{ label }}
+        {{ label }} {{ required ? "*" : "" }}
     </label>
     <input
       v-model="payload"
diff --git a/api/app/Http/Controllers/OrderController.php b/api/app/Http/Controllers/OrderController.php
index b1448dd..d699009 100644
--- a/api/app/Http/Controllers/OrderController.php
+++ b/api/app/Http/Controllers/OrderController.php
@@ -16,6 +16,7 @@ public function order(Request $request)
     {
 
         $validated = $request->validate([
+            'pfadiname' => 'nullable',
             'first_name' => 'required',
             'last_name' => 'required',
             'email' => 'required|email',
diff --git a/bestellen.md b/bestellen.md
index 774e0de..7a94484 100644
--- a/bestellen.md
+++ b/bestellen.md
@@ -17,8 +17,9 @@ Sei bei den ersten, die bestellen und sichere dir für Sammelbestellungen den Ei
 
 *keine Versandkosten*
 
-Hinterlege deine E-Mailadresse und wir informieren dich, sobald du die Bestellung aufgeben kannst.
 
+### Jetzt bestellen
+Bitte fülle das Formular aus, um eine Sammelbestellung aufzugeben. Nach der Bestellung erhältst du per E-Mail eine Bestellbestätigung und die dazugehörige Rechnung, die wir dich bitten, zu begleichen. Sobald die Zahlung eingegangen ist, verschicken wir die Bücher.
 <BulkOrderForm />
 
 ## Einzeln Bestellen