ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactor room form

This commit is contained in:
Ramon Wenger 2018-09-21 10:37:41 +02:00
parent 613f099b30
commit 45dd310443
2 changed files with 109 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
client/src/components/rooms/NewRoom.vue
View File

@ -1,32 +1,12 @@
<template> <template>
<div class="new-room"> <room-form
<div class="new-room__content"> :room="room"
<h1 class="new-room__heading">Neues Board</h1> @save="addRoom"
></room-form>
<h2 class="new-room__property-heading">Titel</h2>
<input class="skillbox-input new-room__input" v-model="room.title">
<h2 class="new-room__property-heading">Beschreibung</h2>
<textarea class="skillbox-textarea new-room__textarea" v-model="room.description"></textarea>
<h2 class="new-room__property-heading">Farbe</h2>
<room-colors
:selected-color="room.appearance"
v-on:input="updateColor"
></room-colors>
</div>
<div class="new-room__footer">
<button
class="button button--primary new-room__save-button"
@click="mutateRoom(room)"
>Speichern
</button>
<button class="button">Abbrechen</button>
</div>
</div>
</template> </template>
<script> <script>
import RoomColors from '@/components/rooms/RoomColors'; import RoomForm from '@/components/rooms/RoomForm';
import ADD_ROOM_MUTATION from '@/graphql/gql/mutations/addRoom.gql'; import ADD_ROOM_MUTATION from '@/graphql/gql/mutations/addRoom.gql';
import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql'; import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
@ -35,7 +15,7 @@
export default { export default {
components: { components: {
RoomColors RoomForm
}, },
data() { data() {
@ -50,11 +30,7 @@
}, },
methods: { methods: {
updateColor(newColor) { addRoom(room) {
this.room.appearance = newColor;
this.$store.dispatch('setSpecialContainerClass', newColor);
},
mutateRoom(room) {
this.$apollo.mutate({ this.$apollo.mutate({
mutation: ADD_ROOM_MUTATION, mutation: ADD_ROOM_MUTATION,
variables: { variables: {
@ -81,57 +57,5 @@
}); });
} }
}, },
created() {
this.$store.dispatch('setSpecialContainerClass', defaultColor);
},
beforeDestroy() {
this.$store.dispatch('setSpecialContainerClass', '');
}
} }
</script> </script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
.new-room {
width: 710px;
height: 760px;
max-height: 100%;
box-sizing: border-box;
background-color: $color-white;
border-radius: $default-border-radius;
display: grid;
grid-template-rows: auto 65px;
&__heading {
font-size: toRem(35px);
}
&__content {
padding: 26px;
}
&__footer {
border-top: 1px solid $color-lightgrey;
padding: 16px 26px;
}
&__property-heading {
font-size: toRem(21px);
font-weight: 800;
}
&__input,
&__textarea {
width: 100%;
margin-bottom: 35px;
}
&__save-button {
margin-right: 15px;
}
}
</style>

102
client/src/components/rooms/RoomForm.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<div class="room-form">
<div class="room-form__content">
<h1 class="room-form__heading">Neues Board</h1>
<h2 class="room-form__property-heading">Titel</h2>
<input class="skillbox-input room-form__input" v-model="localRoom.title">
<h2 class="room-form__property-heading">Beschreibung</h2>
<textarea class="skillbox-textarea room-form__textarea" v-model="localRoom.description"></textarea>
<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', room)"
>Speichern
</button>
<button class="button">Abbrechen</button>
</div>
</div>
</template>
<script>
import RoomColors from '@/components/rooms/RoomColors';
export default {
props: ['room'],
components: {
RoomColors
},
data() {
return {
localRoom: Object.assign({}, this.room)
}
},
methods: {
updateColor(newColor) {
this.localRoom.appearance = newColor;
this.$store.dispatch('setSpecialContainerClass', newColor);
}
},
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;
height: 760px;
max-height: 100%;
box-sizing: border-box;
background-color: $color-white;
border-radius: $default-border-radius;
display: grid;
grid-template-rows: auto 65px;
&__heading {
font-size: toRem(35px);
}
&__content {
padding: 26px;
}
&__footer {
border-top: 1px solid $color-lightgrey;
padding: 16px 26px;
}
&__property-heading {
font-size: toRem(21px);
font-weight: 800;
}
&__input,
&__textarea {
width: 100%;
margin-bottom: 35px;
}
&__save-button {
margin-right: 15px;
}
}
</style>