136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<template>
|
|
<div class="room-form">
|
|
<div class="room-form__content">
|
|
<h1 class="room-form__heading">Neues Board</h1>
|
|
|
|
<label class="room-form__property-heading" for="room-title">Titel</label>
|
|
<input class="skillbox-input room-form__input" v-model="localRoom.title" id="room-title">
|
|
<label class="room-form__property-heading" for="room-description">Beschreibung</label>
|
|
<textarea class="skillbox-textarea room-form__textarea" v-model="localRoom.description"
|
|
id="room-description"></textarea>
|
|
<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 disabled value="">-</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>
|
|
<room-colors
|
|
:selected-color="localRoom.appearance"
|
|
v-on:input="updateColor"
|
|
></room-colors>
|
|
</div>
|
|
<div class="room-form__footer">
|
|
<button
|
|
class="button button--primary room-form__save-button"
|
|
@click="$emit('save', localRoom)"
|
|
>Speichern
|
|
</button>
|
|
<router-link to="/rooms" tag="button" class="button">Abbrechen</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import RoomColors from '@/components/rooms/RoomColors';
|
|
|
|
import ME_QUERY from '@/graphql/gql/meQuery.gql';
|
|
|
|
export default {
|
|
props: ['room'],
|
|
|
|
components: {
|
|
RoomColors
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
localRoom: Object.assign({}, this.room),
|
|
me: {}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
schoolClasses() {
|
|
return this.$getRidOfEdges(this.me.schoolClasses);
|
|
}
|
|
},
|
|
|
|
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/_functions.scss";
|
|
|
|
.room-form {
|
|
width: 710px;
|
|
min-height: 760px;
|
|
max-height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: $color-white;
|
|
border-radius: $default-border-radius;
|
|
display: grid;
|
|
grid-template-rows: 1fr 65px;
|
|
|
|
&__heading {
|
|
font-size: toRem(35px);
|
|
}
|
|
|
|
&__content {
|
|
padding: 26px;
|
|
}
|
|
|
|
&__footer {
|
|
border-top: 1px solid $color-lightgrey;
|
|
padding: 16px 26px;
|
|
}
|
|
|
|
&__property-heading {
|
|
display: block;
|
|
font-size: toRem(21px);
|
|
font-weight: 800;
|
|
margin-bottom: 24px;
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__input,
|
|
&__textarea {
|
|
width: 100%;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
&__save-button {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
</style>
|