Add modal for adding notes

client/src/App.vue

@@ -22,6 +22,7 @@
   import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
   import EditProjectEntryWizard from '@/components/portfolio/EditProjectEntryWizard';
   import NewObjectiveWizard from '@/components/objective-groups/NewObjectiveWizard';
+  import NewNoteWizard from '@/components/notes/NewNoteWizard';
   import FullscreenImage from '@/components/FullscreenImage';
   import FullscreenInfographic from '@/components/FullscreenInfographic';
   import FullscreenVideo from '@/components/FullscreenVideo';
@@ -48,6 +49,7 @@
       NewProjectEntryWizard,
       EditProjectEntryWizard,
       NewObjectiveWizard,
+      NewNoteWizard,
       FullscreenImage,
       FullscreenInfographic,
       FullscreenVideo

client/src/components/Modal.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="modal__backdrop">
-    <div class="modal" :class="{'modal--hide-header': hideHeader || fullscreen, 'modal--fullscreen': fullscreen}">
+    <div class="modal"
+         :class="{'modal--hide-header': hideHeader || fullscreen, 'modal--fullscreen': fullscreen, 'modal--small': small}">
       <div class="modal__header">
         <slot name="header"></slot>
       </div>
@@ -32,6 +33,10 @@
       fullscreen: {
         type: Boolean,
         default: false
+      },
+      small: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -68,49 +73,6 @@
     -ms-grid-rows: auto 1fr 65px;
     position: relative;
 
-    &--hide-header {
-      grid-template-rows: 1fr 65px;
-      grid-template-areas: "body" "footer";
-    }
-
-    &--hide-header &__header {
-      display: none;
-    }
-
-    &--hide-header &__body {
-      padding: $default-padding;
-    }
-
-    &--fullscreen {
-      width: 95vw;
-      height: auto;
-      grid-template-rows: 1fr;
-      -ms-grid-rows: 1fr;
-      grid-template-areas: "body";
-      overflow: hidden;
-    }
-
-    &--fullscreen &__footer {
-      display: none;
-    }
-
-    &--fullscreen &__body {
-      padding: 0;
-      scrollbar-width: none;
-      margin-right: -5px;
-
-      height: auto;
-      max-height: 95vh;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    &--fullscreen &__close-button {
-      display: flex;
-    }
-
     &__backdrop {
       display: flex;
       justify-content: center;
@@ -165,5 +127,59 @@
       border-top: 1px solid $color-silver-light;
       padding: 16px $modal-lateral-padding;
     }
+
+    $parent: &;
+
+    &--hide-header {
+      grid-template-rows: 1fr 65px;
+      grid-template-areas: "body" "footer";
+
+      #{$parent}__header {
+        display: none;
+      }
+
+      #{$parent}__body {
+        padding: $default-padding;
+      }
+
+    }
+
+    &--fullscreen {
+      width: 95vw;
+      height: auto;
+      grid-template-rows: 1fr;
+      -ms-grid-rows: 1fr;
+      grid-template-areas: "body";
+      overflow: hidden;
+
+      #{$parent}__footer {
+        display: none;
+      }
+
+      #{$parent}__body {
+        padding: 0;
+        scrollbar-width: none;
+        margin-right: -5px;
+
+        height: auto;
+        max-height: 95vh;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      #{$parent}__close-button {
+        display: flex;
+      }
+    }
+
+    &--small {
+      height: auto;
+
+      #{$parent}__body {
+        min-height: 0;
+      }
+    }
   }
 </style>

client/src/components/content-blocks/ContentComponent.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="content-component" :class="{'content-component--bookmarked': bookmarked}">
-    <bookmark-actions @bookmark="bookmarkContent(component.id, !bookmarked)" :bookmarked="bookmarked"></bookmark-actions>
+    <bookmark-actions
+      @add-note="addNote(component.id)"
+      @bookmark="bookmarkContent(component.id, !bookmarked)"
+      :bookmarked="bookmarked"></bookmark-actions>
     <component
       :is="component.type"
       v-bind="component">
@@ -59,6 +62,12 @@
     },
 
     methods: {
+      addNote(id) {
+        this.$store.dispatch('addNote', {
+          content: id,
+          contentBlock: this.parent
+        });
+      },
       bookmarkContent(id, bookmarked) {
         this.$apollo.mutate({
           mutation: UPDATE_CONTENT_BOOKMARK,

client/src/components/notes/BookmarkActions.vue

@@ -4,7 +4,7 @@
        :class="{'bookmark-actions__action--bookmarked': bookmarked}">
       <bookmark-icon :bookmarked="bookmarked"></bookmark-icon>
     </a>
-    <a class="bookmark-actions__action">
+    <a class="bookmark-actions__action" v-if="bookmarked" @click="$emit('add-note')">
       <add-note-icon></add-note-icon>
       <note-icon v-if="false"></note-icon>
     </a>

client/src/components/notes/NewNoteWizard.vue

@@ -0,0 +1,61 @@
+<template>
+  <modal :hide-header="true" :small="true">
+    <modal-input v-on:input="note = $event"
+                 placeholder="Notiz erfassen"
+                 :value="note"
+    ></modal-input>
+    <div slot="footer">
+      <a class="button button--primary" data-cy="modal-save-button"
+         @click="addNote(note)">Speichern</a>
+      <a class="button" @click="hide">Löschen</a>
+    </div>
+
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import ModalInput from '@/components/ModalInput';
+
+  import ADD_NOTE_MUTATION from '@/graphql/gql/mutations/addNote.gql';
+
+  import {mapGetters} from 'vuex';
+
+  export default {
+    components: {
+      Modal,
+      ModalInput
+    },
+
+    data() {
+      return {
+        note: ''
+      }
+    },
+
+    computed: {
+      ...mapGetters(['currentContent', 'currentContentBlock'])
+    },
+
+    methods: {
+      addNote(text) {
+        this.$apollo.mutate({
+          mutation: ADD_NOTE_MUTATION,
+          variables: {
+            input: {
+              note: {
+                content: this.currentContent,
+                contentBlock: this.currentContentBlock,
+                text
+              }
+            }
+          }
+        });
+        console.log(note);
+      },
+      hide() {
+        this.$store.dispatch('hideModal');
+      }
+    }
+  }
+</script>

client/src/graphql/gql/mutations/addNote.gql

@@ -0,0 +1,8 @@
+mutation AddNote($input: AddNoteInput!) {
+  addNote(input: $input) {
+    note {
+      id
+      text
+    }
+  }
+}

client/src/store/index.js

@@ -12,6 +12,7 @@ export default new Vuex.Store({
     showMobileNavigation: false,
     contentBlockPosition: {},
     scrollPosition: 0,
+    currentContent: '',
     currentContentBlock: '',
     currentRoomEntry: '',
     parentRoom: null,
@@ -33,18 +34,16 @@ export default new Vuex.Store({
   },
 
   getters: {
-    showModal: state => {
-      return state.showModal
-    },
-    showMobileNavigation: state => {
-      return state.showMobileNavigation
-    },
+    showModal: state => state.showModal,
+    showMobileNavigation: state => state.showMobileNavigation,
     scrollToAssignmentId: state => state.scrollToAssignmentId,
     scrollToAssignmentReady: state => state.scrollToAssignmentReady,
     scrollingToAssignment: state => state.scrollingToAssignment,
     currentProjectEntry: state => state.currentProjectEntry,
     editModule: state => state.editModule,
-    currentObjectiveGroup: state => state.currentObjectiveGroup
+    currentObjectiveGroup: state => state.currentObjectiveGroup,
+    currentContent: state => state.currentContent,
+    currentContentBlock: state => state.currentContentBlock
   },
 
   actions: {
@@ -58,6 +57,7 @@ export default new Vuex.Store({
     },
     resetModalState({commit}) {
       commit('setCurrentRoomEntry', '');
+      commit('setCurrentContent', '');
       commit('setCurrentContentBlock', '');
       commit('setContentBlockPosition', {});
       commit('setParentRoom', null);
@@ -122,6 +122,11 @@ export default new Vuex.Store({
       commit('setCurrentProjectEntry', payload);
       dispatch('showModal', 'edit-project-entry-wizard');
     },
+    addNote({commit, dispatch}, payload) {
+      commit('setCurrentContentBlock', payload.contentBlock);
+      commit('setCurrentContent', payload.content);
+      dispatch('showModal', 'new-note-wizard');
+    },
     showFullscreenImage({commit, dispatch}, payload) {
       commit('setImageUrl', payload);
       dispatch('showModal', 'fullscreen-image');
@@ -146,7 +151,8 @@ export default new Vuex.Store({
     scrollingToAssignment({commit, state, dispatch}, payload) {
       if (payload && !state.scrollingToAssignment) {
         commit('setScrollingToAssignment', true);
-      };
+      }
+      ;
 
       if (!payload && state.scrollingToAssignment) {
         commit('setScrollingToAssignment', false);
@@ -174,6 +180,9 @@ export default new Vuex.Store({
     setContentBlockPosition(state, payload) {
       state.contentBlockPosition = payload;
     },
+    setCurrentContent(state, payload) {
+      state.currentContent = payload;
+    },
     setCurrentContentBlock(state, payload) {
       state.currentContentBlock = payload;
     },