Merge pull request #25 from oslabs-beta/bryan/improveDeleteNote

note functionality implemented: duplicate check added at time of addi…

Author: jbbake

src/components/ComponentDisplay.vue

@@ -114,70 +114,44 @@
           style="width: 250px; background-color: #fd5f00"
         />
       </q-dialog>
+
       <!-- some irregularity (delete event listener firing on bkspc/del) with the modal when stored locally, so modal open stored in state, and triggers to local reflect only stateful change.-->
           <q-dialog v-model="noteModal" @update:model-value="this.handleAddNotes"> 
             <div class="noteBox">
               <div class="noteHolder">
                 <p class="title">Adding notes to {{ this.activeComponent }}</p>
                 <div class="noteContainer">
-                  <li v-for="(note, index) in this.componentMap[this.activeComponent].noteList" :key="note" @click="deleteNote">
-                    Note #{{index}}: 
-                    <div class="noteblock">{{ note }}</div>
-                  </li>
-                </div>
-                <q-form class="formBox" autofocus>
-                    <q-input
-                      v-model="noteText"
-                      label="Add your note here"
-                      filled
-                      dark
-                      max-height=15%
-                      autofocus true
-                    ></q-input>
-                    <q-btn 
-                    color="secondary"
-                    label="Submit Note"
-                    type="submit"
-                    :disable="noteText.length > 0 ? false : true"
-                    @click="submitNote"
-                    />
-                </q-form>
-              </div>
-            </div>
-        </q-dialog>
-      <!-- some irregularity (delete event listener firing on bkspc/del) with the modal when stored locally, so modal open stored in state, and triggers to local reflect only stateful change.-->
-          <q-dialog v-model="noteModal" @update:model-value="this.handleAddNotes"> 
-            <div class="noteBox">
-              <div class="noteHolder">
-                <p class="title">Adding notes to {{ this.activeComponent }}</p>
-                <div class="noteContainer">
-                  <li v-for="(note, index) in this.componentMap[this.activeComponent].noteList" :key="note" @click="deleteNote">
-                    Note #{{index}}: 
-                    <div class="noteblock">{{ note }}</div>
+                  <li v-for="(note, index) in this.componentMap[this.activeComponent].noteList" :key="note">
+                    <span class="noteNum">Note {{index}}: </span>
+                    <div class="noteblock">{{ note }}</div><span id="noteDelete" @click="deleteNote">X</span>
                   </li>
                 </div>
-                <q-form class="formBox" autofocus>
+                <div class="formBox">
+                <q-form autofocus v-on:submit.prevent="submitNote">
                     <q-input
                       v-model="noteText"
                       label="Add your note here"
                       filled
                       dark
-                      autogrow
-                      max-height=15%
                       autofocus true
+                      hide-bottom-space
+                      :hint="hint"
+                      @keyup.enter="submitNote"
                     ></q-input>
                     <q-btn 
+                    id="comp-btn"
                     color="secondary"
                     label="Submit Note"
                     :disable="noteText.length > 0 ? false : true"
                     @click="submitNote"
                     />
                     <q-btn
-                    color="secondary"
+                    id="note-btn-close"
                     label="Exit Notes"
                     @click="this.openNoteModal"
                     />
                 </q-form>
+                </div>
               </div>
             </div>
         </q-dialog>
@@ -456,8 +430,7 @@ export default {
       this.noteText = '';
     },
     deleteNote(e){
-      //currently just deletes the note based on the text alone.
-      this.deleteActiveComponentNote(e.target.innerText);
+      this.deleteActiveComponentNote(e.target.previousElementSibling.innerText);
     },
     // used when user selects to add child from dropdown
     handleSelect(value) {
@@ -486,11 +459,15 @@ export default {
   },
   watch: {
     noteModalOpen (){
-      console.log('display note, prevent delete?', this.noteModalOpen)
       this.noteModal = this.noteModalOpen;
     },
     activeComponent: {
     handler(){
+      if (this.activeComponent !== '' && 
+        this.$store.state.showTutorial === true && 
+        this.$store.state.tutorialFirstOpen === true){
+        this.$store.commit("TOGGLE_TUTORIAL");
+      }
       this.onActivated(this.activeComponentObj);
     },
     deep: true,
@@ -507,45 +484,70 @@ li{
 }
 
 li:hover{
-  background-color: $negative;
+  background-color: $subprimary;
 }
 .noteblock{
   white-space: pre-wrap;
   font-weight: normal;
-  width: 85%;
+  width: 80%;
   margin-left: 10px;
-  align-self: flex-end;
+  margin-right: 10px;
 }
 .noteBox{
   background-color: $subprimary;
   color: $menutext;
   width: 65%;
-  height: 60vh;
   padding: 15px;
+  height: 65vh;
+  max-height: 80vh;
+}
+.noteNum{
+  width: 10%;
+}
+#noteDelete{
+  background-color: $secondary;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-self: flex-end;
+  border-radius: 50%;
+  color: $menutext;
+  user-select: none;
+  align-self: center;
+}
+#noteDelete:hover{
+  background-color: $negative;
 }
 .noteHolder{
   background-color: $subsecondary;
   width: 100%;
-  height: 100%;
   padding: 10px;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   border-radius: 4px;
   overflow-y: hidden;
+  height: 100%;
 }
-.noteDisplay{
-  min-height: 30%;
-}
+
 .noteContainer{
-  max-height: 400px;
+  height: 280px;
+  max-height: 280px;
   border: 1px solid $primary;
   border-radius: 4px;
   overflow-y: auto;
+  word-break: break-all;
+  max-width: 100%;
+  display:flex;
+  flex-direction: column;
+  justify-content: flex-start;
 }
+
 .formBox{
-  max-height: 15%;
-  justify-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
 }
 
 .component-title {
@@ -656,4 +658,19 @@ li:hover{
   font-weight: bold;
   color: white;
 }
+
+#comp-btn{
+  width: 100%;
+  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
+}
+
+#note-btn-close {
+  background-color: rgba($negative, .2);
+  border: 1px solid $negative;
+  color: $negative;
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 </style>

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -215,25 +215,4 @@ export default {
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.13);
   }
 
-// .is-primary {
-//   height: 45px;
-// }
-// #add-component-btn {
-//   height: 15px;
-//   margin: 0.75rem;
-//   width: 90%;
-// }
-// #import-component-btn {
-//   height: 15px;
-//   margin: 0 0.75rem;
-//   width: 90%;
-// }
-// .inner-div {
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: flex-start;
-//   padding-left: 15px;
-//   padding-right: 15px;
-//   height: 100%;
-// }
 </style>

src/store/mutations.js

@@ -33,6 +33,9 @@ const mutations = {
   },
 
   [types.TOGGLE_TUTORIAL]: (state) => {
+    if (state.tutorialFirstOpen === true){
+      state.tutorialFirstOpen = false;
+    }
     state.showTutorial = !state.showTutorial;
   },  
 
@@ -702,6 +705,9 @@ const mutations = {
     if (!state.componentMap[state.activeComponent].hasOwnProperty('noteList')){
       state.componentMap[state.activeComponent].noteList = [];
     }
+    while(state.componentMap[state.activeComponent].noteList.includes(payload)){
+      payload = 'DUPLICATE: ' + payload
+    }
     state.componentMap[state.activeComponent].noteList.push(payload)
   },
 

src/store/state/index.js

@@ -59,6 +59,7 @@ const newState = {
   pastedComponent: {},
   exportAsTypescript: 'off',
   showTutorial: true,
+  tutorialFirstOpen: true,
 }
 
 // closured method to ensure we only ever write the default state ONCE