Add subactivity form as popup
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
197c23354d
commit
d776a66836
|
@ -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' => '',
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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;
|
||||
},
|
||||
});
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue