Add intro to fields

app/Form/Fields/Field.php

@@ -29,6 +29,7 @@ abstract class Field extends Data
     public bool $forMembers;
     public ?SpecialType $specialType = null;
     public ?string $hint;
+    public ?string $intro;
 
     /** @var mixed */
     public $value;

database/migrations/2024_06_07_003232_add_intro_field.php

@@ -0,0 +1,58 @@
+<?php
+
+use App\Form\Models\Form;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        foreach (DB::table('forms')->get() as $event) {
+            $config = json_decode($event->config);
+            $config->sections = array_map(function ($section) {
+                /** @var Collection<int, mixed> */
+                $fields = $section->fields;
+                $section->fields = collect($fields)->map(function ($field) {
+                    $field->intro = null;
+                    return $field;
+                })->all();
+
+                return $section;
+            }, $config->sections);
+            DB::table('forms')->where('id', $event->id)->update(['config' => json_encode($config)]);
+        }
+
+        foreach (DB::table('formtemplates')->get() as $event) {
+            $config = json_decode($event->config);
+            $config->sections = array_map(function ($section) {
+                /** @var Collection<int, mixed> */
+                $fields = $section->fields;
+                $section->fields = collect($fields)->map(function ($field) {
+                    $field->intro = null;
+                    return $field;
+                })->all();
+
+                return $section;
+            }, $config->sections);
+            DB::table('formtemplates')->where('id', $event->id)->update(['config' => json_encode($config)]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+};

resources/js/views/formtemplate/FormBuilder.vue

@@ -2,70 +2,78 @@
     <form class="grid gap-3 mt-4 grid-cols-[1fr_max-content] items-start" @submit.prevent="submit">
         <div class="grid gap-3">
             <slot name="meta"></slot>
-            <asideform v-if="singleSection !== null && singleSection.mode === 'edit'"
+            <asideform
+                v-if="singleSection !== null && singleSection.mode === 'edit'"
                 :heading="`Sektion ${singleSection.index !== null ? 'bearbeiten' : 'erstellen'}`"
-                @close="singleSection = null" @submit="storeSection">
+                @close="singleSection = null"
-                <f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name"
+                @submit="storeSection"
-                    :name="`sectionform-name`"></f-text>
+            >
-                <f-textarea :id="`sectionform-intro`" v-model="singleSection.model.intro" label="Einleitung"
+                <f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name" :name="`sectionform-name`"></f-text>
-                    :name="`sectionform-intro`"></f-textarea>
+                <f-textarea :id="`sectionform-intro`" v-model="singleSection.model.intro" label="Einleitung" :name="`sectionform-intro`"></f-textarea>
             </asideform>
-            <asideform v-if="singleSection !== null && singleSection.mode === 'reorder'" heading="Felder ordnen"
+            <asideform v-if="singleSection !== null && singleSection.mode === 'reorder'" heading="Felder ordnen" @close="singleSection = null" @submit="storeSection">
-                @close="singleSection = null" @submit="storeSection">
+                <draggable v-model="singleSection.model.fields" item-key="key" :component-data="{class: 'mt-3 grid gap-3'}">
-                <draggable item-key="key" :component-data="{ class: 'mt-3 grid gap-3' }" v-model="singleSection.model.fields">
+                    <template #item="{element}">
-                    <template #item="{ element }">
+                        <div class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition justify-between flex items-center">
-                        <div
-                            class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition justify-between flex items-center">
                             <span v-text="element.name"></span>
                             <a href="#">
-                                <ui-sprite class="w-5 h-5" v-tooltip="`Umordnen`" src="menu"></ui-sprite>
+                                <ui-sprite v-tooltip="`Umordnen`" class="w-5 h-5" src="menu"></ui-sprite>
                             </a>
                         </div>
                     </template>
                 </draggable>
             </asideform>
-            <asideform v-if="singleSection === null && singleField === null" heading="Feld erstellen" :closeable="false"
+            <asideform v-if="singleSection === null && singleField === null" heading="Feld erstellen" :closeable="false" :storeable="false" @submit="storeField">
-                :storeable="false" @submit="storeField">
                 <div class="mt-3 grid gap-3">
-                    <a v-for="(field, index) in props.meta.fields" :key="index"
+                    <a v-for="(field, index) in props.meta.fields" :key="index" class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#" @click.prevent="addField(field)">
-                        class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#"
-                        @click.prevent="addField(field)">
                         <span v-text="field.name"></span>
                     </a>
                 </div>
             </asideform>
-            <asideform v-if="singleSection === null && singleField !== null"
+            <asideform
-                :heading="`Feld ${singleField.index !== null ? 'bearbeiten' : 'erstellen'}`" @close="singleField = null"
+                v-if="singleSection === null && singleField !== null"
-                @submit="storeField">
+                :heading="`Feld ${singleField.index !== null ? 'bearbeiten' : 'erstellen'}`"
+                @close="singleField = null"
+                @submit="storeField"
+            >
                 <f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
+                <f-textarea id="intro" v-model="singleField.model.intro" label="Einleitung" size="sm" name="intro"></f-textarea>
                 <column-selector v-model="singleField.model.columns"></column-selector>
-                <component :is="fields[singleField.model.type]" v-model="singleField.model" :payload="inner.sections"
+                <component :is="fields[singleField.model.type]" v-model="singleField.model" :payload="inner.sections" :meta="props.meta"></component>
-                    :meta="props.meta"></component>
+                <f-select id="nami_type" v-model="singleField.model.nami_type" :options="meta.namiTypes" label="NaMi-Feld" size="sm" name="nami_type"></f-select>
-                <f-select id="nami_type" v-model="singleField.model.nami_type" :options="meta.namiTypes" label="NaMi-Feld"
+                <f-select id="special_type" v-model="singleField.model.special_type" :options="meta.specialTypes" label="Bedeutung" size="sm" name="special_type"></f-select>
-                    size="sm" name="nami_type"></f-select>
-                <f-select id="special_type" v-model="singleField.model.special_type" :options="meta.specialTypes"
-                    label="Bedeutung" size="sm" name="special_type"></f-select>
                 <f-textarea id="hint" v-model="singleField.model.hint" label="Hinweis" size="sm" name="hint"></f-textarea>
-                <f-switch v-show="singleField.model.nami_type === null" id="for_members"
+                <f-switch
-                    v-model="singleField.model.for_members" label="Für Unter-Mitglieder zusätzlich abfragen" size="sm"
+                    v-show="singleField.model.nami_type === null"
-                    name="for_members"></f-switch>
+                    id="for_members"
+                    v-model="singleField.model.for_members"
+                    label="Für Unter-Mitglieder zusätzlich abfragen"
+                    size="sm"
+                    name="for_members"
+                ></f-switch>
             </asideform>
         </div>
         <ui-box heading="Vorschau" container-class="grid gap-3" class="w-[800px]">
-            <event-form editable
+            <event-form
+                editable
                 style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
-                :base-url="meta.base_url" :value="previewString" @editSection="editSection($event.detail[0])"
+                :base-url="meta.base_url"
-                @addSection="addSection" @editField="editField($event.detail[0], $event.detail[1])"
+                :value="previewString"
+                @editSection="editSection($event.detail[0])"
+                @addSection="addSection"
+                @editField="editField($event.detail[0], $event.detail[1])"
                 @deleteField="deleteField($event.detail[0], $event.detail[1])"
-                @editFields="startReordering($event.detail[0])" @deleteSection="deleteSection($event.detail[0])"
+                @editFields="startReordering($event.detail[0])"
-                @active="updateActive($event.detail[0])"></event-form>
+                @deleteSection="deleteSection($event.detail[0])"
+                @active="updateActive($event.detail[0])"
+            ></event-form>
         </ui-box>
     </form>
 </template>
 
 <script setup>
-import { watch, computed, ref } from 'vue';
+import {watch, computed, ref} from 'vue';
-import { snakeCase } from 'change-case';
+import {snakeCase} from 'change-case';
 import '!/adrema-form/dist/main.js';
 import Asideform from './Asideform.vue';
 import TextareaField from './TextareaField.vue';
@@ -87,7 +95,7 @@ const active = ref(null);
 async function onReorder() {
     var order = this.inner.map((f) => f.id);
     this.loading = true;
-    this.inner = (await this.axios.patch(`/mediaupload/${this.parentName}/${this.parentId}/${this.collection}`, { order })).data;
+    This.inner = (await this.axios.patch(`/mediaupload/${this.parentName}/${this.parentId}/${this.collection}`, {order})).data;
     this.loading = false;
 }
 
@@ -118,7 +126,7 @@ const fields = {
 
 function editSection(sectionIndex) {
     singleSection.value = {
-        model: { ...inner.value.sections[sectionIndex] },
+        model: {...inner.value.sections[sectionIndex]},
         index: sectionIndex,
         mode: 'edit',
     };
@@ -126,7 +134,7 @@ function editSection(sectionIndex) {
 
 function startReordering(index) {
     singleSection.value = {
-        model: { ...inner.value.sections[index] },
+        model: {...inner.value.sections[index]},
         index: index,
         mode: 'reorder',
     };

tests/Feature/Form/FormtemplateStoreActionTest.php

@@ -22,7 +22,7 @@ class FormtemplateStoreActionTest extends FormTestCase
         $this->login()->loginNami()->withoutExceptionHandling();
         FormtemplateRequest::new()->name('testname')->sections([
             FormtemplateSectionRequest::new()->name('Persönliches')->fields([
-                $this->textField('a')->name('lala1')->columns(['mobile' => 2, 'tablet' => 2, 'desktop' => 1])->required(false)->hint('hhh'),
+                $this->textField('a')->name('lala1')->columns(['mobile' => 2, 'tablet' => 2, 'desktop' => 1])->required(false)->hint('hhh')->intro('intro'),
                 $this->textareaField('b')->name('lala2')->required(false)->specialType(SpecialType::FIRSTNAME)->rows(10),
             ]),
         ])->fake();
@@ -34,6 +34,7 @@ class FormtemplateStoreActionTest extends FormTestCase
         $this->assertEquals('lala1', $formtemplate->config->sections->get(0)->fields->get(0)->name);
         $this->assertNull($formtemplate->config->sections->get(0)->fields->get(0)->specialType);
         $this->assertEquals('hhh', $formtemplate->config->sections->get(0)->fields->get(0)->hint);
+        $this->assertEquals('intro', $formtemplate->config->sections->get(0)->fields->get(0)->intro);
         $this->assertInstanceOf(TextField::class, $formtemplate->config->sections->get(0)->fields->get(0));
         $this->assertInstanceOf(TextareaField::class, $formtemplate->config->sections->get(0)->fields->get(1));
         $this->assertEquals(false, $formtemplate->config->sections->get(0)->fields->get(1)->required);