additional error checking to prevent deletion when modal is open for adding notes. needs prevention of note deletion with a dialog or something. also added a REMOVE_ALL_STATE_PROPS_ACTIONS mutation to facilitate removal of these on load

Author: MrBeeAreWhy

src/components/ComponentDisplay.vue

@@ -1,5 +1,5 @@
-<!--
-Description:
+  <!--
+  Description:
   Handles display grid functionality
   Functionality includes: resizing/dragging component boxes, display grid image, active component
   -->
@@ -162,16 +162,21 @@ Description:
                       label="Add your note here"
                       filled
                       dark
+                      autogrow
                       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-btn
+                    color="secondary"
+                    label="Exit Notes"
+                    @click="this.openNoteModal"
+                    />
                 </q-form>
               </div>
             </div>
@@ -435,7 +440,7 @@ export default {
     },
     // renders modal with Update Children and Layer in it
     handleAddNotes(){
-      if (this.wasDragged === false){
+      if (this.wasDragged === false && this.activeComponent !== ''){
        this.openNoteModal();
       }
     },

src/store/actions.js

@@ -4,6 +4,9 @@ import * as types from "./types";
 const actions = {
   // Actions that primarily affect componentDisplay.vue //////
   [types.deleteActiveComponent]: ({ state, commit }) => {
+    if (state.noteModalOpen === true){
+      return;
+    }
     commit(types.DELETE_ACTIVE_COMPONENT);
     const activeRouteArray = [...state.routes[state.activeRoute]];
     const newActiveRouteArray = activeRouteArray.filter(
@@ -290,6 +293,7 @@ const actions = {
   // Loading ///////////////////////////////////////////////////////
 
   [types.openProject]: ({ commit, state }, payload) => {
+    commit(types.REMOVE_ALL_STATE_PROPS_ACTIONS)
     payload.userProps.forEach((prop)=>{commit(types.CREATE_PROP, prop)})
     payload.userActions.forEach((action)=>{commit(types.CREATE_ACTION, action)})
     payload.userState.forEach((state)=>{commit(types.CREATE_STATE, state)})

src/store/mutations.js

@@ -14,17 +14,25 @@ import {
 } from "../utils/search.util";
 import _ from "lodash";
 
+
 const cloneDeep = require("lodash.clonedeep");
 
 const mutations = {
   // invoked on undo, resetsstate to a cdeep clone of the initial state
   [types.EMPTY_STATE]: (state, payload) => {
     payload.store.replaceState(cloneDeep(payload.initialState));
   },
-
+  [types.REMOVE_ALL_STATE_PROPS_ACTIONS]: (state) =>{
+    const emptyObj = {
+      userProps: [],
+      userState: [],
+      userActions: [],
+    }
+    Object.assign(state, emptyObj)
+  },
   [types.TOGGLE_TUTORIAL]: (state) => {
     state.showTutorial = !state.showTutorial;
-  },
+  },  
 
   // *** ROUTES *** //////////////////////////////////////////////
   [types.ADD_ROUTE]: (state, payload) => {
@@ -186,8 +194,6 @@ const mutations = {
       }
     }
     state.selectedState = [];
-    // state.activeComponentObj = null;
-    // state.activeComponentObj = active;
     state.activeComponentObj = { ...active };
 
     state.componentMap = {

src/store/types.js

@@ -67,6 +67,7 @@ export const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL'
 export const ADD_ACTIVE_COMPONENT_NOTE = 'ADD_ACTIVE_COMPONENT_NOTE'
 export const DELETE_ACTIVE_COMPONENT_NOTE = 'DELETE_ACTIVE_COMPONENT_NOTE'
 export const OPEN_NOTE_MODAL = 'OPEN_NOTE_MODAL'
+export const REMOVE_ALL_STATE_PROPS_ACTIONS = 'REMOVE_ALL_STATE_PROPS_ACTIONS'
 
 // Actions
 export const openNoteModal = 'openNoteModal'