finish adding Child Components to the Icon grid

Author: keylakoizumin

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

@@ -17,6 +17,20 @@ Description:
       <br />
       <span>{{ elementName }}</span>
     </button>
+
+    <button
+      @click.prevent="changeState(elementName)"
+      v-for="(elementName, idx) in childrenComp"
+      :key="idx + Date.now()"
+    >
+      <span class="badge"> {{ elementStorage[elementName] }}</span>
+      <br />
+      <i :class="childIcon"></i>
+      <br />
+      <span>{{ elementName }}</span>
+    </button>
+    
+
   </section>
 </template>
 
@@ -25,7 +39,10 @@ import { mapState } from "vuex";
 
 export default {
   data() {
-    return {};
+    return {
+      //to give the child componenets of the active components icons
+      childIcon: ["fa-solid fa-code"]
+    };
   },
   name: "Icons",
   computed: {
@@ -61,6 +78,14 @@ export default {
       }
       return computedElementalStorage;
     },
+    childrenComp: function () {
+      let childrenAvailable = [];
+
+      if(this.activeComponent) {
+        childrenAvailable = this.componentMap[this.activeComponent].children
+      }
+      return childrenAvailable;
+    },
   },
   methods: {
     // Logic to decide where to place selected html element

src/store/actions.js

@@ -261,7 +261,6 @@ const actions = {
   },
 
   // Actions dispatched from left hand panel////////////////////////////////////////
-
   [types.addToComponentElementList]: ({ commit }, payload) => {
     // adds element to the HTMLQueue
     commit(types.ADD_TO_COMPONENT_HTML_LIST, payload);
@@ -278,7 +277,6 @@ const actions = {
   // end of left hand panel/////////////////////////
 
   // HTML Element related actions ////////////////////
-
   [types.addNestedHTML]: ({ commit }, payload) => {
     commit(types.ADD_NESTED_HTML, payload);
   },
@@ -316,7 +314,10 @@ const actions = {
   [types.upOneLayer]: ({ commit }, payload) => {
     commit(types.UP_ONE_LAYER, payload);
   },
-  //FOR MUTATING HTML WITH DRAG AND DROP
+
+  // end of HTML segment ////////////////////////////////////////////////
+
+  // Drag-and-drop ///////////////////////////////////////
   [types.setIdDrag]: ({ commit }, payload) => {
     commit(types.SET_ID_DRAG, payload)
   },
@@ -341,10 +342,16 @@ const actions = {
     commit(types.DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS)
   },
 
-  // end of HTML segment ////////////////////////////////////////////////
+  // end of Drag-and-drop /////////////////////////////////
 
-  // Loading ///////////////////////////////////////////////////////
+  // Place Child Components among the Html Elements //////////////
+  [types.upgradeIconGridWithChildComponent]: ({ commit }, payload) => {
+    commit(types.UPGRADE_ICON_GRID_WITH_CHILD_COMPONENT, payload)
+  },
 
+  // end of Place Child Components among the Html Elements ////////
+
+  // Loading ///////////////////////////////////////////////////////
   [types.openProject]: ({ commit }, payload) => {
     commit(types.REMOVE_ALL_STATE_PROPS_ACTIONS)
     commit(types.SET_ACTIVE_ROUTE, "HomeView");

src/store/mutations.js

@@ -755,7 +755,10 @@ const mutations = {
       // state.componentMap[state.activeComponent].htmlList = newHTMLList;
       // const newMap = { ...state.componentMap };
       // state.componentMap = { ...newMap };
+
+      //delete the parent because the payload is no longer a child to the acitive component
       delete state.componentMap[payload].parent[state.activeComponent];
+
       // add block
     } else {
       const child = temp;
@@ -768,6 +771,14 @@ const mutations = {
         state.componentMap[state.activeComponent];
     }
   },
+  // update Parent's icon Grid with Child Component
+  [types.UPGRADE_ICON_GRID_WITH_CHILD_COMPONENT]: (state, payload) => {
+      //Update available Child Components options to be place along side the HTML Elements every time the Child Components are updated
+        //mutation function with the same payload and using the activeComponent
+          //if the payload is not and html option added, if it is then delete it
+
+  },
+
   // invoked when element is double clicked, changing the boolean value
   [types.UPDATE_OPEN_MODAL]: (state, payload) => {
     state.modalOpen = payload;

src/store/types.js

@@ -77,13 +77,15 @@ 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'
-
+//Drag and Drop
 export const SET_ID_DRAG = 'SET_ID_DRAG'
 export const SET_ID_DROP = 'SET_ID_DROP' 
 export const SET_SELECTED_ID_DRAG = 'SET_SELECTED_ID_DRAG'
 export const SET_SELECTED_ID_DROP = 'SET_SELECTED_ID_DROP'
 export const DRAG_DROP_SORT_HTML_ELEMENTS = 'DRAG_DROP_SORT_HTML_ELEMENTS'
 export const DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS = 'DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS'
+//
+export const UPGRADE_ICON_GRID_WITH_CHILD_COMPONENT = 'UPGRADE_ICON_GRID_WITH_CHILD_COMPONENT'
 
 // Actions
 export const openNoteModal = 'openNoteModal'
@@ -158,13 +160,17 @@ export const updateStartingSize = 'updateStartingSize'
 export const deleteUserActions = 'deleteUserActions'
 export const deleteUserState = 'deleteUserState'
 export const toggleTutorial = 'toggleTutorial'
-
+//Drag and Drop 
 export const setIdDrag = 'setIdDrag'
 export const setIdDrop = 'setIdDrop'
 export const setSelectedIdDrag = 'setSelectedIdDrag'
 export const setSelectedIdDrop = 'setSelectedIdDrop'
 export const dragDropSortHtmlElements = 'dragDropSortHtmlElements'
 export const dragDropSortSelectedHtmlElements = 'dragDropSortSelectedHtmlElements'
+//
+export const upgradeIconGridWithChildComponent = 'upgradeIconGridWithChildComponent'
+
+
 
 // inactive mutations
 // export const SET_STATE = 'SET_STATE'