Add project form

client/src/components/ColorChooser.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="room-colors">
+  <div class="color-chooser">
     <div v-for="(color, index) in colors"
          :key="index"
-         class="room-colors__color-wrapper"
+         class="color-chooser__color-wrapper"
          @click="$emit('input', color.name)"
-         :class="{'room-colors__color-wrapper--selected': selectedColor === color.name}">
+         :class="{'color-chooser__color-wrapper--selected': selectedColor === color.name}">
-      <div class="room-colors__color" :class="'room-colors__color--' + color.name">
+      <div class="color-chooser__color" :class="'color-chooser__color--' + color.name">
-        <tick class="room-colors__selected-icon" v-if="selectedColor === color.name"></tick>
+        <tick class="color-chooser__selected-icon" v-if="selectedColor === color.name"></tick>
       </div>
     </div>
   </div>
@@ -47,7 +47,7 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
-  .room-colors {
+  .color-chooser {
     display: flex;
 
     &__color-wrapper {

client/src/components/page-form/PageForm.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="page-form__page">
+    <form class="page-form" @submit.prevent="$emit('save')">
+      <div class="page-form__content">
+        <h1 class="page-form__heading">{{title}}</h1>
+        <slot></slot>
+      </div>
+      <div class="page-form__footer">
+        <slot name="footer"></slot>
+      </div>
+    </form>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['title']
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .page-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 55px;
+
+    &__page {
+      display: grid;
+      justify-items: center;
+      align-items: center;
+      height: 100%;
+    }
+
+    &__content {
+      padding: $medium-spacing;
+    }
+
+    &__heading {
+      @include heading-2;
+    }
+
+    &__footer {
+      border-top: 1px solid $color-lightgrey;
+      padding: $small-spacing $medium-spacing;
+    }
+  }
+</style>

client/src/components/page-form/PageFormInput.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="page-form-input">
+    <label class="page-form-input__label" :for="id">{{label}}</label>
+    <component :is="type" :class="classes"
+               :value.prop="value"
+               :id="id" @input="$emit('input', $event.target.value)"></component>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      label: {
+        type: String
+      },
+      type: {
+        type: String,
+        default: 'input'
+      },
+      value: {
+        type: String
+      }
+    },
+
+    created() {
+      this.id = this._uid;
+    },
+
+    computed: {
+      classes() {
+        return `page-form-input__${this.type} skillbox-${this.type}`;
+      }
+    },
+
+    data() {
+      return {
+        id: null
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .page-form-input {
+    &__label {
+      @include page-form-input-heading;
+    }
+
+    &__input, &__textarea {
+      width: 100%;
+      margin-bottom: $large-spacing;
+    }
+  }
+</style>

client/src/components/portfolio/ProjectForm.vue

@@ -0,0 +1,58 @@
+<template>
+  <page-form title="Neues Projekt">
+    <page-form-input label="Titel" v-model="localProject.title"></page-form-input>
+    <page-form-input label="Beschreibung" type="textarea" v-model="localProject.description"></page-form-input>
+    <page-form-input label="Ziele" type="textarea" v-model="localProject.objectives"></page-form-input>
+    <color-chooser
+      :selected-color="localProject.appearance"
+      v-on:input="updateColor"
+    ></color-chooser>
+    <template slot="footer">
+      <button
+        type="submit"
+        class="button button--primary"
+        :class="{'button--disabled': true}"
+        :disabled="true"
+      >Speichern
+      </button>
+      <router-link to="/portfolio" tag="button" class="button">Abbrechen</router-link>
+    </template>
+  </page-form>
+</template>
+
+<script>
+  import PageForm from '@/components/page-form/PageForm';
+  import PageFormInput from '@/components/page-form/PageFormInput';
+  import ColorChooser from '@/components/ColorChooser';
+
+  export default {
+    props: ['project'],
+
+    components: {
+      PageForm,
+      PageFormInput,
+      ColorChooser
+    },
+
+    data() {
+      return {
+        localProject: Object.assign({}, this.project),
+      }
+    },
+
+    methods: {
+      updateColor(newColor) {
+        this.localProject.appearance = newColor;
+        this.$store.dispatch('setSpecialContainerClass', newColor);
+      }
+    },
+
+    created() {
+      this.$store.dispatch('setSpecialContainerClass', this.localProject.appearance);
+    },
+
+    beforeDestroy() {
+      this.$store.dispatch('setSpecialContainerClass', '');
+    }
+  }
+</script>

client/src/components/rooms/RoomForm.vue

@@ -1,33 +1,31 @@
 <template>
-  <form class="room-form" @submit.prevent="$emit('save', localRoom)">
+  <page-form class="room-form" @save="$emit('save', localRoom)" title="Neues Board">
-    <div class="room-form__content">
+    <page-form-input v-model="localRoom.title" label="Titel">
-      <h1 class="room-form__heading">Neues Board</h1>
+    </page-form-input>
-      <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">
+    <page-form-input v-model="localRoom.description" label="Beschreibung" type="textarea">
-      <label class="room-form__property-heading" for="room-description">Beschreibung</label>
+    </page-form-input>
-      <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>
-      <label class="room-form__property-heading" for="room-class">Klasse</label>
+    <select
-      <select
+      class="skillbox-input room-form__input"
-        class="skillbox-input room-form__input"
+      id="room-class"
-        id="room-class"
+      v-model="localRoom.schoolClass"
-        v-model="localRoom.schoolClass"
+    >
-      >
+      <option :value="{}" disabled hidden>Klasse wählen</option>
-        <option :value="{}" disabled hidden>Klasse wählen</option>
+      <option
-        <option
+        v-for="schoolClass in schoolClasses"
-          v-for="schoolClass in schoolClasses"
+        :key="schoolClass.id"
-          :key="schoolClass.id"
+        v-bind:value="schoolClass"
-          v-bind:value="schoolClass"
+      >{{schoolClass.name}}
-        >{{schoolClass.name}}
+      </option>
-        </option>
+    </select>
-      </select>
+    <h2 class="room-form__property-heading">Farbe</h2>
-      <h2 class="room-form__property-heading">Farbe</h2>
+    <color-chooser
-      <room-colors
+      :selected-color="localRoom.appearance"
-        :selected-color="localRoom.appearance"
+      v-on:input="updateColor"
-        v-on:input="updateColor"
+    ></color-chooser>
-      ></room-colors>
+    <template slot="footer">
-    </div>
-    <div class="room-form__footer">
       <button
         type="submit"
         class="button button--primary room-form__save-button"
@@ -36,12 +34,14 @@
       >Speichern
       </button>
       <router-link to="/rooms" tag="button" class="button">Abbrechen</router-link>
-    </div>
+    </template>
-  </form>
+  </page-form>
 </template>
 
 <script>
-  import RoomColors from '@/components/rooms/RoomColors';
+  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';
 
@@ -49,7 +49,9 @@
     props: ['room'],
 
     components: {
-      RoomColors
+      ColorChooser,
+      PageForm,
+      PageFormInput
     },
 
     data() {
@@ -93,37 +95,11 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.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;
+      @include page-form-input-heading;
-      font-size: toRem(21px);
-      font-weight: 800;
-      margin-bottom: 24px;
-      font-family: $sans-serif-font-family;
     }
 
     &__input,

client/src/pages/editRoom.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+  // todo: refactor this, we don't need 2 components, remove editRoom or EditRoom component
   import EditRoom from '@/components/rooms/EditRoom';
 
   import ROOM_QUERY from '@/graphql/gql/roomQuery.gql';
@@ -41,11 +42,3 @@
     }
   }
 </script>
-
-<style scoped lang="scss">
-  .edit-room-page {
-    display: grid;
-    justify-items: center;
-    align-items: center;
-  }
-</style>

client/src/pages/newProject.vue

@@ -0,0 +1,26 @@
+<template>
+  <project-form :project="project"></project-form>
+</template>
+
+<script>
+  import ProjectForm from '@/components/portfolio/ProjectForm';
+
+  const defaultAppearance = 'blue';
+
+  export default {
+    components: {
+      ProjectForm
+    },
+
+    computed: {
+      project() {
+        return {
+          title: 'title',
+          description: 'description',
+          objectives: 'objectives',
+          appearance: defaultAppearance
+        }
+      }
+    }
+  }
+</script>

client/src/pages/newRoom.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="new-room-page">
-    <new-room></new-room>
-  </div>
-</template>
-
-<script>
-  import NewRoom from '@/components/rooms/NewRoom';
-
-  export default {
-    components: {
-      NewRoom
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  .new-room-page {
-    display: grid;
-    justify-items: center;
-    align-items: center;
-  }
-</style>

client/src/router/index.js

@@ -11,13 +11,14 @@ import newRoom from '@/pages/newRoom'
 import editRoom from '@/pages/editRoom'
 import article from '@/pages/article'
 import basicknowledge from '@/pages/basicknowledge'
-import basicknowledgeOverview from '@/pages/basicknowledge-overview'
+import basicknowledgeOverview from '@/pages/basicknowledgeOverview'
 import submissions from '@/pages/submissions'
 import p404 from '@/pages/p404'
 import start from '@/pages/start'
 import submission from '@/pages/studentSubmission'
 import portfolio from '@/pages/portfolio'
 import project from '@/pages/project'
+import newProject from '@/pages/newProject'
 
 const routes = [
   {path: '/', component: start, meta: {layout: 'blank'}},
@@ -51,6 +52,7 @@ const routes = [
   {path: '/submission/:id', name: 'submission', component: submission, meta: {layout: 'simple'}},
   {path: '/portfolio', name: 'portfolio', component: portfolio},
   {path: '/portfolio/:slug', name: 'project', component: project},
+  {path: '/new-project/', name: 'new-project', component: newProject},
   {
     path: '/book',
     name: 'book',

client/src/styles/_mixins.scss

@@ -132,3 +132,9 @@
   font-family: $serif-font-family;
   font-size: toRem(18px);
 }
+
+@mixin page-form-input-heading {
+  display: block;
+  margin-bottom: $medium-spacing;
+  @include heading-3;
+}