Merge branch 'dev' into Johnny

Author: jchan444

src/components/left-sidebar/ComponentTab/CreateMenu.vue

@@ -42,9 +42,9 @@ Description:
           @activeLayer="addNestedNoActive"
         />
       </div>
-      <div class="componentHTML">
+      <button class="componentHTML">
         <CreateMenuHTMLQueue></CreateMenuHTMLQueue>
-      </div>
+      </button>
       <br />
 
       <q-btn

src/components/left-sidebar/ComponentTab/CreateMenuHTMLQueue.vue

@@ -10,7 +10,7 @@ Description:
       group="people"
       class="list-group"
     >
-      <div
+      <div 
       :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
       @dblclick.self="setActiveElement(element)"
       v-for="(element) in renderList" :key="element[1] + Date.now()"

src/components/right-sidebar/CodeSnippet.vue

@@ -95,7 +95,7 @@ export default {
         "list-ul": ["<ul>", "</ul>"],
         input: ["<input />", ""],
         navbar: ["<nav>", "</nav>"],
-        header:["<header>", "</header>"],
+        header:["<header>","</header>"],
         footer:["<footer>", "</footer>"],
         meta: ["<meta>", "</meta>"],
         h1:["<h1>", "</h1>"],
@@ -105,7 +105,20 @@ export default {
         h5:["<h5>", "</h5>"],
         h6:["<h6>", "</h6>"],
       };
-
+   //test//
+    //   function writeClass(componentName) {
+    //   if (this.componentMap[componentName]?.classList?.length > 0) {
+    //     let commentStr = '<!--'
+    //     this.componentMap[componentName].classList.forEach((el) => {
+    //       commentStr += "\n"
+    //       commentStr += el;
+    //     })
+    //     commentStr += '\n-->\n\n'
+    //     return commentStr;
+    //   } else {
+    //     return ''
+    //   }
+    //  };
       // Helper function that recursively iterates through the given html element's children and their children's children.
       // also adds proper indentation to code snippet
       function writeNested(childrenArray, indent) {

src/components/right-sidebar/HTMLQueue.vue

@@ -19,7 +19,7 @@ Description:
       <p v-if='!this.componentMap[this.activeComponent]?.htmlList.length'>No HTML elements in component</p>
       <div id="tooltipCon"
       :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
-      @dblclick.self="setActiveElement(element)"
+      @click="setActiveElement(element)"
       v-for="(element) in renderList" :key="element[1] + Date.now()"
       >
 
@@ -31,6 +31,43 @@ Description:
       </div>
 
     </div>
+
+
+      <!-- attribute pop-up -->
+          <q-dialog v-model="attributeModal" > 
+          <!-- @update:model-value="setActiveElement" -->
+            <div class="AttributeBox" >
+                <p class="title">Added attributes to {{ this.activeComponent }}</p>
+                <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList" :key="element[1] + Date.now()" >
+                    <p v-if='element.id === this.activeHTML'>Your class is - {{element.class}}</p>
+                </div>
+                <div class="formBox">
+                <q-form autofocus v-on:submit.prevent="submitClass">
+                    <p class="title">Add Class Name:</p><q-input
+                      label="Add your note here"
+                      filled
+                      dark
+                      autofocus true
+                      hide-bottom-space
+                      v-model="classText"
+                      @keyup.enter="submitClass"
+                    ></q-input>
+                    <q-btn 
+                    id="comp-btn"
+                    class="sidebar-btn"
+                    color="secondary"
+                    label="Submit Attribute"
+                    :disable="classText.length > 0 ? false : true"
+                    @click="submitClass(classText, this.activeHTML)"
+                    />
+                    <q-btn
+                    label="Close"
+                    @click="this.openAttributeModal"
+                    />
+                </q-form>
+              </div>
+            </div>
+        </q-dialog>
   </section>
 </template>
 
@@ -52,11 +89,13 @@ export default {
   },
   data () {
     return {
-      exceptions: ['input', 'img', 'link']
+      exceptions: ['input', 'img', 'link'],
+      attributeModal: false,
+      classText: ''
     }
   },
   computed: {
-    ...mapState(['selectedElementList', 'componentMap', 'activeComponent', 'activeHTML', 'activeLayer']),
+    ...mapState(['selectedElementList', 'componentMap', 'activeComponent', 'activeHTML', 'activeLayer', 'attributeModalOpen']),
     renderList: {
       get () {
         if (this.activeComponent === '') return this.selectedElementList.map((el, index) => [el.text, index, el.id])
@@ -87,14 +126,15 @@ export default {
 
   },
   methods: {
-    ...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer']),
+    ...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer', 'openAttributeModal','addActiveComponentClass']),
     deleteElement (id) {
       if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id[0])
       else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
     },
     setActiveElement (element) {
       if (this.activeComponent !== '' && !this.exceptions.includes(element[0])) {
-        this.setActiveHTML(element)
+        this.setActiveHTML(element);
+        this.openAttributeModal(element);
       }
     },
     setLayer (element) {
@@ -104,9 +144,23 @@ export default {
       if (this.activeLayer.id !== '') {
         this.upOneLayer(this.activeLayer.id)
       }
-    }
+    },
+     submitClass(element, idNum){
+      if (element === ''){
+        return;
+      }
+      let payload = {
+        class: element,
+        id: idNum
+      }
+      this.addActiveComponentClass(payload);
+      this.classText = '';
+    },
   },
   watch: {
+    attributeModalOpen (){
+      this.attributeModal = this.attributeModalOpen;
+    },
     activeComponent: function () {
       if (this.activeComponent !== '') {
         this.component = true
@@ -198,6 +252,7 @@ hr {
 #tooltipCon {
   position: relative;
   cursor: pointer;
+  margin-top: 1.3em;
 }
 
 
@@ -233,4 +288,15 @@ hr {
 
 }
 
+.AttributeBox {
+  background-color: $subsecondary;
+  color: $menutext;
+  width: 65%;
+  padding: 15px;
+  height: 65vh;
+  max-height: 80vh;
+}
+
+
 </style>
+

src/store/actions.js

@@ -31,7 +31,19 @@ const actions = {
   [types.openNoteModal]: ({ commit }) => {
     commit(types.OPEN_NOTE_MODAL)
   },
+  //test
+  [types.openAttributeModal]: ({ commit }, payload) => {
+    commit(types.OPEN_ATTRIBUTE_MODAL, payload)
+  },
+
+  [types.addActiveComponentClass]: ({ commit }, payload) => {
+    commit(types.ADD_ACTIVE_COMPONENT_CLASS, payload)
+  },
 
+  [types.deleteActiveComponentClass]: ({ commit }, payload) => {
+    commit(types.DELETE_ACTIVE_COMPONENT_CLASS, payload)
+  },
+  //
   [types.registerComponent]: ({ state, commit }, payload) => {
     /* this action has a lot of mutations deployed
     Because we have to initialize a whole bunch of properties

src/store/mutations.js

@@ -348,6 +348,7 @@ const mutations = {
       text: payload.elementName,
       id: payload.date,
       children: [],
+      class: ''
     });
   },
 
@@ -365,6 +366,7 @@ const mutations = {
       text: payload.elementName,
       id: payload.date,
       children: [],
+      class: ''
     });
   },
 
@@ -377,6 +379,7 @@ const mutations = {
       text: payload.elementName,
       id: payload.date,
       children: [],
+      class: ''
     });
   },
 
@@ -385,6 +388,7 @@ const mutations = {
       text: payload.elementName,
       id: payload.date,
       children: [],
+      class: ''
     });
   },
 
@@ -695,6 +699,26 @@ const mutations = {
   [types.OPEN_NOTE_MODAL]: (state) => {
     state.noteModalOpen = !state.noteModalOpen;
   },
+  //Jace practice for future, not place classList directly in activeComponent
+  [types.OPEN_ATTRIBUTE_MODAL]: (state) => {
+    state.attributeModalOpen = !state.attributeModalOpen;
+  },
+
+  [types.ADD_ACTIVE_COMPONENT_CLASS]: (state, payload) => {
+    state.componentMap[state.activeComponent].htmlList.forEach((el) => {
+      if (payload.id  === el.id) {
+        el.class = payload.class
+      }
+    })
+  },
+  [types.DELETE_ACTIVE_COMPONENT_CLASS]: (state, payload) => {
+    state.componentMap[state.activeComponent].classList.forEach((el, ind) =>{
+      if (payload === el){
+        state.componentMap[state.activeComponent].classList.splice(ind, 1)
+        return;
+      }
+    })
+  },
   // *** PROJECTS *** //////////////////////////////////////////////
 
   [types.ADD_PROJECT]: (state, payload) => {

src/store/state/index.js

@@ -52,6 +52,9 @@ const newState = {
   componentChildrenMultiselectValue: [],
   modalOpen: false,
   noteModalOpen: false,
+  //test
+  noteAttributeOpen: false,
+  //
   parentSelected: false,
   // for storing copied component
   copiedComponent: {},

src/store/types.js

@@ -67,11 +67,21 @@ 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'
+//Jace practest
+export const OPEN_ATTRIBUTE_MODAL = 'OPEN_ATTRIBUTE_MODAL'
+export const ADD_ACTIVE_COMPONENT_CLASS = 'ADD_ACTIVE_COMPONENT_CLASS'
+export const DELETE_ACTIVE_COMPONENT_CLASS = 'DELETE_ACTIVE_COMPONENT_CLASS'
+//
 export const REMOVE_ALL_STATE_PROPS_ACTIONS = 'REMOVE_ALL_STATE_PROPS_ACTIONS'
 export const UPDATE_PASTE_TIMER = 'UPDATE_PASTE_TIMER'
 
 // Actions
 export const openNoteModal = 'openNoteModal'
+//Jace practest
+export const openAttributeModal = 'openAttributeModal'
+export const addActiveComponentClass = 'addActiveComponentClass'
+export const deleteActiveComponentClass = 'deleteActiveComponentClass'
+//
 export const deleteActiveComponentNote = 'deleteActiveComponentNote'
 export const addActiveComponentNote = 'addActiveComponentNote'
 export const addActionSelected = 'addActionSelected'