116 lines
2.7 KiB
Vue
116 lines
2.7 KiB
Vue
<template>
|
|
<page-form class="room-form" @save="$emit('save', localRoom)" title="Neues Board">
|
|
<page-form-input v-model="localRoom.title" label="Titel">
|
|
</page-form-input>
|
|
|
|
<page-form-input v-model="localRoom.description" label="Beschreibung" type="textarea">
|
|
</page-form-input>
|
|
|
|
<label class="room-form__property-heading" for="room-class">Klasse</label>
|
|
<select
|
|
class="skillbox-input room-form__input"
|
|
id="room-class"
|
|
v-model="localRoom.schoolClass"
|
|
>
|
|
<option :value="{}" disabled hidden>Klasse wählen</option>
|
|
<option
|
|
v-for="schoolClass in schoolClasses"
|
|
:key="schoolClass.id"
|
|
v-bind:value="schoolClass"
|
|
>{{schoolClass.name}}
|
|
</option>
|
|
</select>
|
|
<h2 class="room-form__property-heading">Farbe</h2>
|
|
<color-chooser
|
|
:selected-color="localRoom.appearance"
|
|
v-on:input="updateColor"
|
|
></color-chooser>
|
|
<template slot="footer">
|
|
<button
|
|
type="submit"
|
|
class="button button--primary room-form__save-button"
|
|
:class="{'button--disabled': noClassSelected}"
|
|
:disabled="noClassSelected"
|
|
>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/meQuery.gql';
|
|
|
|
export default {
|
|
props: ['room'],
|
|
|
|
components: {
|
|
ColorChooser,
|
|
PageForm,
|
|
PageFormInput
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
localRoom: Object.assign({}, this.room),
|
|
me: {}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
schoolClasses() {
|
|
return this.$getRidOfEdges(this.me.schoolClasses);
|
|
},
|
|
noClassSelected() {
|
|
return this.localRoom.schoolClass.id === undefined;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
updateColor(newColor) {
|
|
this.localRoom.appearance = newColor;
|
|
this.$store.dispatch('setSpecialContainerClass', newColor);
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
me: {
|
|
query: ME_QUERY,
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.$store.dispatch('setSpecialContainerClass', '');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.room-form {
|
|
&__property-heading {
|
|
@include page-form-input-heading;
|
|
}
|
|
|
|
&__input,
|
|
&__textarea {
|
|
width: 100%;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
&__save-button {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
</style>
|