Add subactivity form as popup
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2023-03-04 15:23:45 +01:00
parent 197c23354d
commit d776a66836
8 changed files with 77 additions and 47 deletions

View File

@ -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' => '',
],
];
}

View File

@ -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>

View File

@ -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>

View File

@ -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);
});
});
},
},
};

View File

@ -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>

View File

@ -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>

View File

@ -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;
},
});
},

View File

@ -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,