100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<template>
|
|
<page-form
|
|
class="room-form"
|
|
title="Neuer Raum"
|
|
@save="$emit('save', localRoom)">
|
|
<page-form-input
|
|
v-model="localRoom.title"
|
|
label="Titel"/>
|
|
|
|
<page-form-input
|
|
v-model="localRoom.description"
|
|
label="Beschreibung"
|
|
type="textarea"/>
|
|
|
|
<h2 class="room-form__property-heading">Farbe</h2>
|
|
<color-chooser
|
|
:selected-color="localRoom.appearance"
|
|
@input="updateColor"
|
|
/>
|
|
<template slot="footer">
|
|
<button
|
|
type="submit"
|
|
data-cy="room-form-save"
|
|
class="button button--primary room-form__save-button"
|
|
>Speichern
|
|
</button>
|
|
<router-link
|
|
to="/rooms"
|
|
tag="button"
|
|
class="button">Abbrechen</router-link>
|
|
</template>
|
|
</page-form>
|
|
</template>
|
|
|
|
<script>
|
|
import ColorChooser from '@/components/ColorChooser';
|
|
import PageForm from '@/components/page-form/PageForm';
|
|
import PageFormInput from '@/components/page-form/PageFormInput';
|
|
|
|
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
|
|
|
|
export default {
|
|
props: ['room'],
|
|
|
|
components: {
|
|
ColorChooser,
|
|
PageForm,
|
|
PageFormInput
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
localRoom: Object.assign({}, this.room),
|
|
me: {}
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.$store.dispatch('setSpecialContainerClass', '');
|
|
},
|
|
|
|
methods: {
|
|
updateColor(newColor) {
|
|
this.localRoom.appearance = newColor;
|
|
this.$store.dispatch('setSpecialContainerClass', newColor);
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
me: {
|
|
query: ME_QUERY,
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.room-form {
|
|
&__property-heading {
|
|
@include page-form-input-heading;
|
|
}
|
|
|
|
&__input,
|
|
&__textarea {
|
|
width: 100%;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
&__save-button {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
</style>
|