Abrechnungsgrüne nun immer erforderlich

app/Domains/Invoice/Views/Partials/newInvoice/direct-payment.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted, reactive } from 'vue'
+import { ref, computed, onMounted, reactive } from 'vue'
 import {checkFilesize} from "../../../../../../resources/js/components/InvoiceUploadChecks.js";
 import RefundData from "./refund-data.vue";
 import AmountInput from "../../../../../Views/Components/AmountInput.vue";
@@ -38,6 +38,20 @@ onMounted(async () => {
     Object.assign(invoiceTypeCollection, data);
 });
 
+/**
+ * Das Beispiel im Feld "Was wurde eingekauft" kommt aus `invoice_types.purchase_example` und ist damit
+ * ohne Deployment pflegbar. Ein allgemeines "z. B. Material" hilft beim Ausfüllen nicht weiter, und von
+ * genau diesem Text lebt später die Zweck-Spalte der EüR-Belegliste.
+ *
+ * Ist am Typ nichts gepflegt, greift der allgemeine Text -- ein Feld ohne jede Hilfestellung wäre
+ * schlechter als ein unscharfes Beispiel.
+ */
+const purchasePlaceholder = computed(() => {
+    const selected = Object.values(invoiceTypeCollection.invoiceTypes)
+        .find((type) => type.slug === invoiceType.value)
+
+    return selected?.purchaseExample || 'z. B. Material für die Veranstaltung'
+})
 
 function handleFileChange(event) {
     if (checkFilesize('receipt')) {
@@ -66,28 +80,36 @@ function handleFileChange(event) {
             <InfoIcon :text="'INFO_INVOICE_TYPE_' + availableInvoiceType.slug" /><br />
         </p>
 
+    </fieldset><br /><br />
 
-        <label for="invoice_type_other">
+    <!--
+        Pflichtangabe zu jeder Rechnung, nicht nur zu "Sonstige Kosten": Erst dieser Text sagt, wofür das
+        Geld ausgegeben wurde, und füllt damit die Zweck-Spalte der EüR-Belegliste.
+
+        Die Schritte bauen aufeinander auf -- ohne Ausgabenart gäbe es kein passendes Beispiel für den
+        Einkauf, und ein Betrag ohne Zweck ließe sich später nicht mehr zuordnen.
+    -->
+    <template v-if="invoiceType !== null">
+        <fieldset>
+            <legend><span style="font-weight: bolder;">Was wurde eingekauft</span></legend>
             <input
                 type="text"
                 class="width-full"
-                name="kostengruppe_sonstiges"
-                placeholder="Sonstige"
-                for="invoice_type_other"
+                id="purchase_description"
+                name="purchase_description"
+                :placeholder="purchasePlaceholder"
                 v-model="otherText"
-                @focus="invoiceType = 'other'"
             />
-        </label>
+        </fieldset><br /><br />
+    </template>
 
-    </fieldset><br /><br />
-
-    <fieldset>
+    <fieldset v-if="invoiceType !== null && otherText.trim() !== ''">
         <legend><span style="font-weight: bolder;">Wie hoch ist der Betrag</span></legend>
         <AmountInput v-model="amount" class="width-small" id="amount" name="amount"  /> Euro
         <info-icon></info-icon><br /><br />
 
         <input
-            v-if="amount != '' && invoiceType !== null"
+            v-if="amount != ''"
             class="mareike-button"
             onclick="document.getElementById('receipt').click();"
             type="button"