Add modal basics for new project entry

client/src/App.vue

@@ -16,6 +16,7 @@
   import EditRoomEntryWizard from '@/components/rooms/room-entries/EditRoomEntryWizard';
   import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
   import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
+  import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
 
   export default {
     name: 'App',
@@ -30,7 +31,8 @@
       NewRoomEntryWizard,
       EditRoomEntryWizard,
       NewObjectiveGroupWizard,
-      EditObjectiveGroupWizard
+      EditObjectiveGroupWizard,
+      NewProjectEntryWizard
     },
 
     computed: {

client/src/components/portfolio/NewProjectEntryWizard.vue

@@ -0,0 +1,15 @@
+<template>
+  <modal>
+    <h1>Hello</h1>
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+
+  export default {
+    components: {
+      Modal
+    },
+  }
+</script>

client/src/layouts/DefaultLayout.vue

@@ -37,7 +37,7 @@
       },
       specialContainerClass() {
         let cls = this.$store.state.specialContainerClass;
-        return cls ? `skillbox--${cls}` : ''
+        return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
       }
     },
 
@@ -63,13 +63,19 @@
     margin: 0 auto;
     width: 100%;
     display: grid;
-    grid-template-rows: auto auto 1fr;
+    grid-template-rows: auto 1fr;
     grid-row-gap: 32px;
     min-height: 100vh;
+    grid-auto-rows: 1fr;
 
-    grid-template-areas: "h" "." "c";
+    grid-template-areas: "h" "c";
     padding-bottom: 50px;
 
+    &--show-filter {
+      grid-template-rows: auto auto 1fr;
+      grid-template-areas: "h" "." "c";
+    }
+
     /*
      * For IE10+
      */

client/src/store/index.js

@@ -17,7 +17,8 @@ export default new Vuex.Store({
     parentRoom: null,
     parentModule: '',
     objectiveGroupType: '',
-    currentObjectiveGroup: ''
+    currentObjectiveGroup: '',
+    parentProject: null
   },
 
   getters: {},
@@ -39,6 +40,7 @@ export default new Vuex.Store({
       commit('setParentModule', '');
       commit('setObjectiveGroupType', '');
       commit('setCurrentObjectiveGroup', '');
+      commit('setParentProject', null);
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -77,7 +79,11 @@ export default new Vuex.Store({
     },
     setfilterForSchoolClass({commit}, payload) {
       commit('setfilterForSchoolClass', payload);
-    }
+    },
+    addProjectEntry({commit, dispatch}, payload) {
+      commit('setParentProject', payload);
+      dispatch('showModal', 'new-project-entry-wizard');
+    },
   },
 
   mutations: {
@@ -116,6 +122,9 @@ export default new Vuex.Store({
     },
     setCurrentObjectiveGroup(state, payload) {
       state.currentObjectiveGroup = payload;
+    },
+    setParentProject(state, payload) {
+      state.parentProject = payload;
     }
   }
 })