Add subactivity form as popup

app/Activity/Resources/ActivityResource.php

@@ -34,6 +34,12 @@ class ActivityResource extends JsonResource
                 'update' => route('activity.update', ['activity' => $this->getModel()]),
                 'destroy' => route('activity.destroy', ['activity' => $this->getModel()]),
             ],
+            'subactivity_model' => [
+                'activities' => [$this->id],
+                'is_age_group' => false,
+                'is_filterable' => false,
+                'name' => '',
+            ],
         ];
     }
 

resources/js/components/Form/CheckboxesLabel.vue

@@ -1,6 +1,5 @@
 <template>
-    <div class="font-semibold text-gray-400 leading-none mb-2">
+    <div class="font-semibold text-gray-400 leading-none">
         <slot></slot>
     </div>
 </template>
-

resources/js/components/Popup.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="fixed z-40 top-0 left-0 w-full h-full flex items-center justify-center p-6">
-        <div
-            class="rounded-lg p-8 bg-zinc-800 shadow-2xl shadow-black border border-zinc-700 border-solid w-full max-w-xl"
-        >
+        <div class="relative rounded-lg p-8 bg-zinc-800 shadow-2xl shadow-black border border-zinc-700 border-solid w-full max-w-xl">
+            <a href="#" class="absolute top-0 right-0 mt-6 mr-6" @click.prevent="$emit('close')">
+                <svg-sprite src="close" class="text-zinc-400 w-6 h-6"></svg-sprite>
+            </a>
             <h3 class="font-semibold text-primary-200 text-xl" v-html="heading"></h3>
             <div class="text-primary-100">
                 <slot></slot>

resources/js/mixins/hasFlash.js

@@ -14,5 +14,18 @@ export default {
                 type: 'error',
             });
         },
+        errorsFromException(e) {
+            if (e.response?.status !== 422 || !e.response?.data?.errors) {
+                throw e;
+            }
+
+            var errors = e.response.data.errors;
+
+            Object.keys(errors).forEach((field) => {
+                errors[field].forEach((message) => {
+                    this.$error(message);
+                });
+            });
+        },
     },
 };

resources/js/views/activity/NewSubactivity.vue

@@ -1,38 +0,0 @@
-<template>
-    <div>
-        <icon-button class="mt-4" icon="plus" v-show="model === null" @click.prevent="model = {name: '', is_filterable: false, activities: [activityId]}">Neue Untertätigkeit</icon-button>
-        <icon-button class="mt-4" icon="close" v-show="model !== null" @click.prevent="model = null">Schließen</icon-button>
-        <div class="mt-2 border border-primary-700 rounded-lg p-5" v-if="model !== null">
-            <div class="flex space-x-3">
-                <f-text size="sm" id="name" v-model="model.name" label="Name" required></f-text>
-                <f-switch size="sm" v-model="model.is_filterable" name="subactivity_is_filterable" id="subactivity_is_filterable" label="Filterbar"></f-switch>
-            </div>
-            <icon-button class="mt-3" icon="save" @click.prevent="store">Speichern</icon-button>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data: function () {
-        return {
-            visible: false,
-            model: null,
-        };
-    },
-    props: {
-        activityId: {
-            type: Number,
-            required: true,
-        },
-    },
-
-    methods: {
-        async store() {
-            var response = await this.axios.post('/subactivity', this.model);
-            this.model = null;
-            this.$emit('stored', response.data);
-        },
-    },
-};
-</script>

resources/js/views/activity/SubactivityForm.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <div class="flex space-x-3">
+            <f-text size="sm" id="name" v-model="model.name" label="Name" required></f-text>
+            <f-switch size="sm" v-model="model.is_filterable" name="subactivity_is_filterable" id="subactivity_is_filterable" label="Filterbar"></f-switch>
+        </div>
+        <icon-button class="mt-3" icon="save" @click.prevent="store">Speichern</icon-button>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function () {
+        return {
+            visible: false,
+            model: {...this.value},
+        };
+    },
+    props: {
+        value: {
+            required: true,
+        },
+    },
+
+    methods: {
+        async store() {
+            try {
+                var response = await this.axios.post('/subactivity', this.model);
+                this.$emit('stored', response.data);
+            } catch (e) {
+                this.errorsFromException(e);
+            }
+        },
+    },
+};
+</script>

resources/js/views/activity/VForm.vue

@@ -1,10 +1,16 @@
 <template>
     <form id="actionform" class="grow p-3" @submit.prevent="submit">
+        <popup heading="Neue Untertätigkeit" v-if="mode === 'edit' && addingSubactivity === true" @close="addingSubactivity = false">
+            <subactivity-form class="mt-4" :value="inner.subactivity_model" @stored="reloadSubactivities"></subactivity-form>
+        </popup>
         <div class="flex space-x-3">
             <f-text id="name" v-model="inner.name" label="Name" required></f-text>
             <f-switch v-model="inner.is_filterable" name="is_filterable" id="is_filterable" label="Filterbar"></f-switch>
         </div>
-        <checkboxes-label class="mt-6">Untertätigkeiten</checkboxes-label>
+        <div class="flex space-x-3 items-center mt-6 mb-2">
+            <checkboxes-label>Untertätigkeiten</checkboxes-label>
+            <icon-button icon="plus" v-if="mode === 'edit'" @click.prevent="addingSubactivity = true">Neu</icon-button>
+        </div>
         <div class="grid gap-2 sm:grid-cols-2 md:grid-cols-4">
             <f-switch
                 inline
@@ -19,8 +25,6 @@
             ></f-switch>
         </div>
         <save-button form="actionform"></save-button>
-
-        <new-subactivity v-if="mode === 'edit'" @stored="reloadSubactivities" :activity-id="inner.id"></new-subactivity>
     </form>
 </template>
 
@@ -28,6 +32,7 @@
 export default {
     data: function () {
         return {
+            addingSubactivity: false,
             subactivities: [...this.meta.subactivities],
             inner: {...this.data},
             mode: this.data.name === '' ? 'create' : 'edit',
@@ -41,7 +46,8 @@ export default {
 
     components: {
         'checkboxes-label': () => import('../../components/Form/CheckboxesLabel'),
-        'new-subactivity': () => import('./NewSubactivity.vue'),
+        'subactivity-form': () => import('./SubactivityForm.vue'),
+        'popup': () => import('../../components/Popup.vue'),
     },
 
     methods: {
@@ -57,6 +63,7 @@ export default {
                     _self.subactivities = page.props.meta.subactivities;
                     _self.inner.subactivities.push(model.id);
                     _self.$success('Untertätigkeit gespeichert.');
+                    _self.addingSubactivity = false;
                 },
             });
         },

tests/Feature/Activity/EditTest.php

@@ -22,6 +22,12 @@ class EditTest extends TestCase
             'name' => 'Asas',
             'is_filterable' => false,
             'subactivities' => [$activity->subactivities->first()->id],
+            'subactivity_model' => [
+                'activities' => [$activity->id],
+                'is_age_group' => false,
+                'is_filterable' => false,
+                'name' => '',
+            ],
         ], $response, 'data');
         $this->assertInertiaHas([
             'id' => $activity->subactivities->first()->id,