Add form editor

app/Form/Actions/FormDestroyAction.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Form\Actions;
+
+use App\Form\Models\Form;
+use App\Lib\Events\Succeeded;
+use Lorisleiva\Actions\Concerns\AsAction;
+
+class FormDestroyAction
+{
+    use AsAction;
+
+    public function asController(Form $form): void
+    {
+        $form->delete();
+
+        Succeeded::message('Veranstaltung gelöscht.')->dispatch();
+    }
+}

app/Form/Actions/FormIndexAction.php

@@ -23,6 +23,9 @@ class FormIndexAction
 
     public function asController(): Response
     {
+        session()->put('menu', 'form');
+        session()->put('title', 'Veranstaltungen');
+
         return Inertia::render('form/Index', [
             'data' => FormResource::collection($this->handle()),
         ]);

app/Form/Actions/FormStoreAction.php

@@ -21,7 +21,7 @@ class FormStoreAction
         return [
             ...$this->globalRules(),
             'description' => 'required|string',
-            'excerpt' => 'required|string|max:120',
+            'excerpt' => 'required|string|max:130',
             'from' => 'required|date',
             'to' => 'required|date',
             'registration_from' => 'present|nullable|date',
@@ -55,7 +55,7 @@ class FormStoreAction
     {
         $this->handle($request->validated());
 
-        Succeeded::message('Formular gespeichert.')->dispatch();
+        Succeeded::message('Veranstaltung gespeichert.')->dispatch();
         return response()->json([]);
     }
 }

app/Form/Actions/FormUpdateAction.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Form\Actions;
+
+use App\Form\Models\Form;
+use App\Lib\Events\Succeeded;
+use Illuminate\Http\JsonResponse;
+use Lorisleiva\Actions\Concerns\AsAction;
+use Lorisleiva\Actions\ActionRequest;
+
+class FormUpdateAction
+{
+    use AsAction;
+    use HasValidation;
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function rules(): array
+    {
+        return [
+            ...$this->globalRules(),
+            'description' => 'required|string',
+            'excerpt' => 'required|string|max:130',
+            'from' => 'required|date',
+            'to' => 'required|date',
+            'registration_from' => 'present|nullable|date',
+            'registration_until' => 'present|nullable|date',
+            'mail_top' => 'nullable|string',
+            'mail_bottom' => 'nullable|string',
+        ];
+    }
+
+    /**
+     * @param array<string, mixed> $attributes
+     */
+    public function handle(Form $form, array $attributes): Form
+    {
+        $form->update($attributes);
+        return $form;
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function getValidationAttributes(): array
+    {
+        return [
+            ...$this->globalValidationAttributes(),
+            'from' => 'Start',
+            'to' => 'Ende',
+        ];
+    }
+
+    public function asController(Form $form, ActionRequest $request): JsonResponse
+    {
+        $this->handle($form, $request->validated());
+
+        Succeeded::message('Veranstaltung aktualisiert.')->dispatch();
+        return response()->json([]);
+    }
+}

app/Form/Actions/FormtemplateIndexAction.php

@@ -23,7 +23,7 @@ class FormtemplateIndexAction
 
     public function asController(): Response
     {
-        session()->put('menu', 'formtemplate');
+        session()->put('menu', 'form');
         session()->put('title', 'Formular-Vorlagen');
 
         return Inertia::render('formtemplate/Index', [

app/Form/Resources/FormResource.php

@@ -2,8 +2,10 @@
 
 namespace App\Form\Resources;
 
+use App\Form\Fields\Field;
 use App\Form\Models\Form;
 use App\Form\Models\Formtemplate;
+use App\Group;
 use App\Lib\HasMeta;
 use Illuminate\Http\Resources\Json\JsonResource;
 
@@ -24,6 +26,7 @@ class FormResource extends JsonResource
     public function toArray($request)
     {
         return [
+            'id' => $this->id,
             'name' => $this->name,
             'from_human' => $this->from?->format('d.m.Y'),
             'to_human' => $this->to?->format('d.m.Y'),
@@ -36,16 +39,41 @@ class FormResource extends JsonResource
             'registration_from' => $this->registration_from?->format('Y-m-d H:i:s'),
             'registration_until' => $this->registration_until?->format('Y-m-d H:i:s'),
             'config' => $this->config,
+            'links' => [
+                'update' => route('form.update', ['form' => $this->getModel()]),
+                'destroy' => route('form.destroy', ['form' => $this->getModel()]),
+            ]
         ];
     }
 
     public static function meta(): array
     {
         return [
+            'base_url' => url(''),
+            'groups' => Group::forSelect(),
+            'fields' => Field::asMeta(),
             'links' => [
                 'store' => route('form.store'),
+                'formtemplate_index' => route('formtemplate.index'),
             ],
             'templates' => FormtemplateResource::collection(Formtemplate::get()),
+            'default' => [
+                'description' => '',
+                'name' => '',
+                'excerpt' => '',
+                'from' => null,
+                'to' => null,
+                'registration_from' => null,
+                'registration_until' => null,
+                'mail_top' => null,
+                'mail_bottom' => null,
+                'config' => null,
+            ],
+            'section_default' => [
+                'name' => '',
+                'intro' => '',
+                'fields' => [],
+            ]
         ];
     }
 }

app/Form/Resources/FormtemplateResource.php

@@ -44,6 +44,7 @@ class FormtemplateResource extends JsonResource
             'fields' => Field::asMeta(),
             'links' => [
                 'store' => route('formtemplate.store'),
+                'form_index' => route('form.index'),
             ],
             'default' => [
                 'name' => '',

resources/img/svg/event.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="124.813" height="124.813" style="enable-background:new 0 0 124.813 124.813" xml:space="preserve"><path d="m48.083 80.355-1.915 11.374a4.158 4.158 0 0 0 1.65 4.05 4.15 4.15 0 0 0 4.361.32l10.226-5.338L72.631 96.1a4.184 4.184 0 0 0 1.924.472c.859 0 1.716-.269 2.439-.792a4.152 4.152 0 0 0 1.651-4.05l-1.913-11.374 8.234-8.077a4.159 4.159 0 0 0 1.044-4.247 4.152 4.152 0 0 0-3.341-2.823l-11.41-1.692-5.139-10.329a4.147 4.147 0 0 0-3.716-2.303 4.16 4.16 0 0 0-3.718 2.303l-5.134 10.329-11.41 1.691a4.147 4.147 0 0 0-3.339 2.823 4.147 4.147 0 0 0 1.042 4.247l8.238 8.077z"/><path d="M111.443 13.269H98.378V6.022A6.022 6.022 0 0 0 92.355 0H91.4a6.021 6.021 0 0 0-6.021 6.022v7.247H39.282V6.022A6.022 6.022 0 0 0 33.261 0h-.956a6.021 6.021 0 0 0-6.021 6.022v7.247H13.371C6.538 13.269.977 18.828.977 25.663v86.757c0 6.831 5.561 12.394 12.394 12.394h98.073c6.832 0 12.394-5.562 12.394-12.394V25.663c-.001-6.835-5.563-12.394-12.395-12.394zm-1.617 97.534H14.988V43.268h94.838v67.535z"/></svg>

resources/js/components/ui/Menulist.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
+        <div class="grid gap-1">
+            <a v-for="(item, index) in entries" :key="index" href="#" class="rounded py-1 px-3 text-gray-400"
+                :class="index === modelValue ? `bg-gray-600` : ''" @click.prevent="openMenu(index)" v-text="item.title"></a>
+        </div>
+        <slot name="bottom"></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        modelValue: {},
+        entries: {},
+    },
+    methods: {
+        openMenu(index) {
+            this.$emit('update:modelValue', index);
+        },
+    },
+};
+</script>

resources/js/components/ui/Tabs.vue

@@ -1,17 +1,10 @@
 <template>
-    <div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
-        <div class="grid gap-1">
-            <a
-                v-for="(item, index) in entries"
-                :key="index"
-                href="#"
-                @click.prevent="openMenu(index)"
-                class="rounded py-1 px-3 text-gray-400"
-                :class="index === modelValue ? `bg-gray-600` : ''"
-                v-text="item.title"
-            ></a>
+    <div class="flex-none w-maxc flex flex-col justify-between border-b-2 group-[.is-popup]:border-zinc-500 mb-3">
+        <div class="flex space-x-1 px-2">
+            <a v-for="(item, index) in entries" :key="index" href="#" class="rounded-t-lg py-1 px-3 text-zinc-300"
+                :class="index === modelValue ? `group-[.is-popup]:bg-zinc-600` : ''" @click.prevent="openMenu(index)"
+                v-text="item.title"></a>
         </div>
-        <slot name="bottom"></slot>
     </div>
 </template>
 

resources/js/layouts/AppLayout.vue

@@ -2,13 +2,11 @@
     <v-notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3"></v-notification>
 
     <!-- ******************************** Sidebar ******************************** -->
-    <div
-        class="fixed z-40 bg-gray-800 p-6 w-56 top-0 h-screen border-r border-gray-600 border-solid flex flex-col justify-between transition-all"
+    <div class="fixed z-40 bg-gray-800 p-6 w-56 top-0 h-screen border-r border-gray-600 border-solid flex flex-col justify-between transition-all"
         :class="{
             '-left-[14rem]': !menuStore.isShifted,
             'left-0': menuStore.isShifted,
-        }"
-    >
+        }">
         <div class="grid gap-2">
             <v-link href="/" menu="dashboard" icon="loss">Dashboard</v-link>
             <v-link href="/member" menu="member" icon="user">Mitglieder</v-link>
@@ -17,6 +15,7 @@
             <v-link href="/contribution" menu="contribution" icon="contribution">Zuschüsse</v-link>
             <v-link href="/activity" menu="activity" icon="activity">Tätigkeiten</v-link>
             <v-link href="/group" menu="group" icon="group">Gruppierungen</v-link>
+            <v-link v-if="hasModule('event')" href="/form" menu="form" icon="event">Veranstaltungen</v-link>
             <v-link href="/maildispatcher" menu="maildispatcher" icon="at">Mail-Verteiler</v-link>
         </div>
         <div class="grid gap-2">
@@ -39,7 +38,7 @@
 
 <script>
 import VLink from './_VLink.vue';
-import {menuStore} from '../stores/menuStore.js';
+import { menuStore } from '../stores/menuStore.js';
 import VNotification from '../components/VNotification.vue';
 
 export default {

resources/js/views/form/Index.vue

@@ -0,0 +1,112 @@
+<template>
+    <page-layout>
+        <template #toolbar>
+            <page-toolbar-button :href="meta.links.formtemplate_index" color="primary"
+                icon="event">Vorlagen</page-toolbar-button>
+            <page-toolbar-button color="primary" icon="plus" @click.prevent="create">Veranstaltung
+                erstellen</page-toolbar-button>
+        </template>
+
+        <ui-popup v-if="deleting !== null" :heading="`Veranstaltung ${deleting.name} löschen?`" @close="deleting = null">
+            <div>
+                <p class="mt-4">Diese Veranstaltung löschen?</p>
+                <div class="grid grid-cols-2 gap-3 mt-6">
+                    <a href="#" class="text-center btn btn-danger" @click.prevent="
+                        remove(deleting);
+                    deleting = null;
+                                                ">Veranstaltung löschen</a>
+                    <a href="#" class="text-center btn btn-primary" @click.prevent="deleting = null">Abbrechen</a>
+                </div>
+            </div>
+        </ui-popup>
+
+        <ui-popup v-if="single !== null && single.config === null" heading="Vorlage auswählen" @close="cancel">
+            <div class="mt-3 grid gap-3 grid-cols-2">
+                <a v-for="(template, index) in meta.templates" :key="index"
+                    class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#"
+                    @click.prevent="setTemplate(template)">
+                    <span v-text="template.name"></span>
+                </a>
+            </div>
+        </ui-popup>
+
+        <ui-popup v-if="single !== null && single.config !== null"
+            :heading="`Veranstaltung ${single.id ? 'bearbeiten' : 'erstellen'}`" full @close="cancel">
+            <div class="flex flex-col mt-3">
+                <ui-tabs v-model="active" :entries="tabs"></ui-tabs>
+                <div v-if="active === 0" class="grid grid-cols-2 gap-3">
+                    <f-text id="name" v-model="single.name" class="col-span-2" name="name" label="Name" required></f-text>
+                    <f-text id="from" v-model="single.from" type="date" name="from" label="Von" required></f-text>
+                    <f-text id="to" v-model="single.to" type="date" name="to" label="Bis" required></f-text>
+                    <f-textarea id="excerpt" v-model="single.excerpt"
+                        hint="Gebe hier eine kurze Beschreibung für die Veranstaltungs-Übersicht ein (Maximal 130 Zeichen)."
+                        name="excerpt" label="Auszug" rows="5" required></f-textarea>
+                    <f-textarea id="description" v-model="single.description" name="description" label="Beschreibung"
+                        rows="10" required></f-textarea>
+                </div>
+                <div v-if="active === 1">
+                    <ui-note class="mt-2"> Sobald sich der erste Teilnehmer für die Veranstaltung angemeldet hat, kann
+                        dieses Formular nicht mehr geändert werden. </ui-note>
+                    <form-builder v-model="single.config" :meta="meta"></form-builder>
+                </div>
+                <div v-if="active === 2" class="grid gap-3">
+                    <ui-note class="mt-2">
+                        Hier kannst du die E-Mail anpassen, die nach der Anmeldung an den Teilnehmer verschickt wird.<br />
+                        Es gibt dafür einen ersten E-Mail-Teil und einen zweiten E-Mail-Teil. Dazwischen werden die Daten
+                        des Teilnehmers aufgelistet.<br />
+                        Die Anrede ("Hallo Max Mustermann") wird automatisch an den Anfang gesetzt.</ui-note>
+                    <f-textarea id="mail_top" v-model="single.mail_top" name="mail_top" label="E-Mail-Teil 1" rows="8"
+                        required></f-textarea>
+                    <f-textarea id="mail_bottom" v-model="single.mail_bottom" name="mail_bottom" label="E-Mail-Teil 2"
+                        rows="8" required></f-textarea>
+                </div>
+            </div>
+            <template #actions>
+                <a href="#" @click.prevent="submit">
+                    <ui-sprite src="save" class="text-zinc-400 w-6 h-6"></ui-sprite>
+                </a>
+            </template>
+        </ui-popup>
+
+        <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
+            <thead>
+                <th>Name</th>
+                <th></th>
+            </thead>
+
+            <tr v-for="(form, index) in data" :key="index">
+                <td>
+                    <div v-text="form.name"></div>
+                </td>
+                <td>
+                    <a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm"
+                        @click.prevent="edit(form)"><ui-sprite src="pencil"></ui-sprite></a>
+                    <a v-tooltip="`Löschen`" href="#" class="ml-2 inline-flex btn btn-danger btn-sm"
+                        @click.prevent="deleting = form"><ui-sprite src="trash"></ui-sprite></a>
+                </td>
+            </tr>
+        </table>
+        <div class="px-6">
+            <ui-pagination class="mt-4" :value="meta" @reload="reloadPage"></ui-pagination>
+        </div>
+    </page-layout>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
+import FormBuilder from '../formtemplate/FormBuilder.vue';
+
+const props = defineProps(indexProps);
+var { meta, data, reloadPage, create, single, edit, cancel, submit, remove } = useIndex(props.data, 'form');
+
+const active = ref(0);
+const deleting = ref(null);
+
+const tabs = [{ title: 'Allgemeines' }, { title: 'Formular' }, { title: 'E-Mail' }, { title: 'Export' }];
+
+function setTemplate(template) {
+    active.value = 0;
+    single.value.config = template.config;
+}
+</script>

resources/js/views/formtemplate/Index.vue

@@ -2,6 +2,8 @@
     <page-layout>
         <template #toolbar>
             <page-toolbar-button color="primary" icon="plus" @click="create">Vorlage erstellen</page-toolbar-button>
+            <page-toolbar-button :href="meta.links.form_index" color="primary"
+                icon="event">Veranstaltungen</page-toolbar-button>
         </template>
 
         <ui-popup v-if="single !== null" :heading="`Vorlage ${single.id ? 'bearbeiten' : 'erstellen'}`" full

resources/js/views/setting/Layout.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex grow relative">
-        <ui-tabs v-model="active" :entries="$page.props.setting_menu"></ui-tabs>
+        <ui-menulist v-model="active" :entries="$page.props.setting_menu"></ui-menulist>
         <slot></slot>
     </div>
 </template>

routes/web.php

@@ -19,6 +19,7 @@ use App\Invoice\Actions\InvoiceStoreAction;
 use App\Course\Actions\CourseUpdateAction;
 use App\Dashboard\Actions\IndexAction as DashboardIndexAction;
 use App\Efz\ShowEfzDocumentAction;
+use App\Form\Actions\FormDestroyAction;
 use App\Form\Actions\FormIndexAction;
 use App\Group\Actions\GroupApiIndexAction;
 use App\Group\Actions\GroupBulkstoreAction;
@@ -27,6 +28,7 @@ use App\Form\Actions\FormStoreAction;
 use App\Form\Actions\FormtemplateIndexAction;
 use App\Form\Actions\FormtemplateStoreAction;
 use App\Form\Actions\FormtemplateUpdateAction;
+use App\Form\Actions\FormUpdateAction;
 use App\Initialize\Actions\InitializeAction;
 use App\Initialize\Actions\InitializeFormAction;
 use App\Initialize\Actions\NamiGetSearchLayerAction;
@@ -148,6 +150,8 @@ Route::group(['middleware' => 'auth:web'], function (): void {
     // ------------------------------------ form -----------------------------------
     Route::get('/formtemplate', FormtemplateIndexAction::class)->name('formtemplate.index');
     Route::get('/form', FormIndexAction::class)->name('form.index');
+    Route::patch('/form/{form}', FormUpdateAction::class)->name('form.update');
+    Route::delete('/form/{form}', FormDestroyAction::class)->name('form.destroy');
     Route::post('/formtemplate', FormtemplateStoreAction::class)->name('formtemplate.store');
     Route::patch('/formtemplate/{formtemplate}', FormtemplateUpdateAction::class)->name('formtemplate.update');
     Route::post('/form', FormStoreAction::class)->name('form.store');

tests/Feature/Form/FormIndexActionTest.php

@@ -16,7 +16,7 @@ class FormIndexActionTest extends TestCase
     {
         $this->login()->loginNami()->withoutExceptionHandling();
         Formtemplate::factory()->name('tname')->sections([FormtemplateSectionRequest::new()->name('sname')->create()])->create();
-        Form::factory()
+        $form = Form::factory()
             ->name('lala')
             ->excerpt('fff')
             ->description('desc')
@@ -33,6 +33,7 @@ class FormIndexActionTest extends TestCase
             ->assertOk()
             ->assertInertiaPath('data.data.0.config.sections.0.name', 'sname')
             ->assertInertiaPath('data.data.0.name', 'lala')
+            ->assertInertiaPath('data.data.0.id', $form->id)
             ->assertInertiaPath('data.data.0.excerpt', 'fff')
             ->assertInertiaPath('data.data.0.description', 'desc')
             ->assertInertiaPath('data.data.0.mail_top', 'Guten Tag')
@@ -44,7 +45,12 @@ class FormIndexActionTest extends TestCase
             ->assertInertiaPath('data.data.0.registration_from', '2023-05-06 04:00:00')
             ->assertInertiaPath('data.data.0.registration_until', '2023-04-01 05:00:00')
             ->assertInertiaPath('data.meta.links.store', route('form.store'))
+            ->assertInertiaPath('data.meta.links.formtemplate_index', route('formtemplate.index'))
             ->assertInertiaPath('data.meta.templates.0.name', 'tname')
-            ->assertInertiaPath('data.meta.templates.0.config.sections.0.name', 'sname');
+            ->assertInertiaPath('data.meta.templates.0.config.sections.0.name', 'sname')
+            ->assertInertiaPath('data.meta.default.name', '')
+            ->assertInertiaPath('data.meta.default.description', '')
+            ->assertInertiaPath('data.meta.default.excerpt', '')
+            ->assertInertiaPath('data.meta.default.config', null);
     }
 }

tests/Feature/Form/FormtemplateIndexActionTest.php

@@ -71,6 +71,7 @@ class FormtemplateIndexActionTest extends TestCase
                 ]
             ])
             ->assertInertiaPath('data.meta.links.store', route('formtemplate.store'))
+            ->assertInertiaPath('data.meta.links.form_index', route('form.index'))
             ->assertInertiaPath('data.meta.section_default', [
                 'name' => '',
                 'intro' => '',