Latest

package.json

@@ -14,6 +14,7 @@
     "fs-extra": "^7.0.1",
     "localforage": "^1.7.3",
     "mousetrap": "^1.6.3",
+    "sass": "^1.58.3",
     "vite": "^2.5.4",
     "vite-plugin-vue2": "1.9.0",
     "vue": "^3.2.47",
@@ -23,7 +24,7 @@
     "vue-template-compiler": "^2.6.11",
     "vue3-draggable-resizable": "^1.6.5",
     "vued3tree": "^3.6.4",
-    "vuedraggable": "^2.19.3",
+    "vuedraggable": "^4.1.0",
     "vuetify": "^3.1.6"
   },
   "devDependencies": {

src/components/ChildrenMultiselect.vue

@@ -20,11 +20,11 @@ import VueMultiselect from 'vue-multiselect';
 export default {
   name: 'ChildrenMultiselect',
   components: {
-    VueMultiselect,
+    VueMultiselect
   },
   data() {
     return {
-      multiValue: null,
+      multiValue: null
     };
   },
   computed: {
@@ -33,30 +33,30 @@ export default {
       'routes',
       'activeComponent',
       'componentChildrenMultiselectValue',
-      'modalOpen',
+      'modalOpen'
     ]),
     options() {
       const routes = Object.keys(this.routes);
       console.log('routes', routes);
       const exceptions = new Set(['App', this.activeComponent, ...routes]);
       console.log('exceptions', exceptions);
-      return Object.keys(this.componentMap).filter((component) => {
+      return Object.keys(this.componentMap).filter(component => {
         if (!exceptions.has(component)) return component;
       });
       // return ['test'];
-    },
+    }
   },
   methods: {
     ...mapActions([
       'updateComponentChildrenMultiselectValue',
-      'updateActiveComponentChildrenValue',
+      'updateActiveComponentChildrenValue'
     ]),
     handleSelect(value) {
       console.log('VALUE', value);
       if (this.modalOpen) this.updateActiveComponentChildrenValue(value);
       this.updateComponentChildrenMultiselectValue(value);
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/ComponentCodeDisplay.vue

@@ -16,20 +16,20 @@ export default {
     activeComponentHtmlList: {
       get() {
         return toRaw(this.componentMap[this.activeComponent].htmlList);
-      },
-    },
+      }
+    }
   },
   watch: {
     activeComponentHtmlList(oldList, newList) {
       this.displayHtmlList(newList);
-    },
+    }
   },
   mounted() {
     this.displayHtmlList(this.activeComponentHtmlList);
   },
   methods: {
     traverseElement(list, codeDisplay, level = 0) {
-      list.forEach((htmlElementTagObj) => {
+      list.forEach(htmlElementTagObj => {
         let htmlElementMapKey = htmlElementTagObj.text;
         let htmlelementNode = document.createElement('p');
         let openingTagNode = document.createElement('p');
@@ -65,8 +65,8 @@ export default {
       codeDisplay.innerText = '';
 
       this.traverseElement(list, codeDisplay);
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/ComponentDisplay.vue

@@ -39,11 +39,11 @@ import Vue3DraggableResizable from 'vue3-draggable-resizable';
 export default {
   name: 'ComponentDisplay',
   components: {
-    Vue3DraggableResizable,
+    Vue3DraggableResizable
   },
   data() {
     return {
-      abilityToDelete: false,
+      abilityToDelete: false
     };
   },
   mounted() {
@@ -70,14 +70,14 @@ export default {
         'this.activeRouteArray (within activeComponentData)',
         this.activeRouteArray
       );
-      return this.activeRouteArray.filter((componentData) => {
+      return this.activeRouteArray.filter(componentData => {
         return componentData.componentName === this.activeComponent;
       })[0];
-    },
+    }
   },
   methods: {
     ...mapActions(['setActiveComponent', 'updateOpenModal']),
-    onResize: function (x, y) {
+    onResize: function(x, y) {
       console.log('on resiZe x', x);
       console.log('on resiZe y', y);
       // const { x, y, w, h} = payload;
@@ -118,8 +118,8 @@ export default {
       //     this.setActiveComponent('');
       //   }
       // });
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/EditQueue.vue

@@ -22,7 +22,6 @@ import {
   setComponentHtmlList,
   addToComponentElementList
 } from '../store/types';
-import { setInterval } from 'timers';
 
 export default {
   name: 'EditQueue',

src/components/HomeQueue.vue

@@ -1,62 +1,59 @@
 <template>
-  <section class="home-queue">
-    <p class="panel-heading">Selected Elements</p>
-    <!-- <draggable
+  <v-card class="home-queue">
+    <v-card-title>Selected Elements</v-card-title>
+    <draggable
       v-model="renderList"
-      group="people"
-      class="list-group"
-      ghost-class="ghost"
+      item-key="index"
+      class="d-flex flex-column"
+      v-bind="dragOptions"
       @start="drag = true"
       @end="drag = false"
     >
-      <div class="list-group-item" v-for="(element, index) in renderList" :key="index + Date.now()">
-        {{ element.text }}
-        <i class="fas fa fa-trash fa-md" @click="deleteElement(index)"></i>
-      </div>
-    </draggable> -->
-  </section>
+      <template #item="{element}">
+        <v-chip closable color="cyan" class="ma-2">
+          {{ element.text }}
+        </v-chip>
+      </template>
+    </draggable>
+  </v-card>
 </template>
 
 <script>
 import draggable from 'vuedraggable';
-import { mapState } from 'vuex';
 import { setSelectedElementList, deleteSelectedElement } from '../store/types';
 
 export default {
   name: 'HomeQueue',
-  props: {
-    name: {
-      type: String,
-    },
-    listToRender: {
-      type: Array,
-    },
+  components: {
+    draggable
   },
-
   computed: {
-    ...mapState(['selectedElementList']),
     renderList: {
       get() {
-        return this.selectedElementList;
+        return this.$store.state.selectedElementList;
       },
       set(value) {
         this.$store.dispatch(setSelectedElementList, value);
-      },
+      }
     },
+    dragOptions() {
+      return {
+        animation: 200,
+        group: 'description',
+        disabled: false
+      };
+    }
   },
   methods: {
     deleteElement(index) {
       this.$store.dispatch(deleteSelectedElement, index);
-    },
-  },
-  components: {
-    draggable,
-  },
+    }
+  }
 };
 </script>
 
 <style scoped>
-.home-queue {
+/* .home-queue {
   border: 1px solid white;
   background-color: hsl(222, 15%, 26%);
   height: 100%;
@@ -77,5 +74,5 @@ li {
 .fa-trash:hover {
   cursor: pointer;
   color: red;
-}
+} */
 </style>

src/components/HomeSidebar.vue

@@ -14,7 +14,7 @@
       </v-form>
     </v-card-actions>
     <v-card-actions class="center">
-      <Icons @getClickedIcon="addToSelectedElementList" />
+      <Icons />
     </v-card-actions>
     <v-card-actions>
       <ChildrenMultiselect />
@@ -38,14 +38,14 @@ export default {
   name: 'HomeSidebar',
   components: {
     ChildrenMultiselect,
-    Icons,
+    Icons
   },
   computed: {
     ...mapState([
       'componentMap',
       'selectedElementList',
       'routes',
-      'activeRoute',
+      'activeRoute'
     ]),
     componentNameInputValue: {
       get() {
@@ -58,14 +58,14 @@ export default {
       set(value) {
         // console.log('value', value);
         this.updateComponentNameInputValue(value);
-      },
-    },
+      }
+    }
   },
   methods: {
     ...mapActions([
       'registerComponent',
       'addToSelectedElementList',
-      'updateComponentNameInputValue',
+      'updateComponentNameInputValue'
     ]),
     // invoked when click "add component" button
     handleClick() {
@@ -78,14 +78,14 @@ export default {
         h: 200,
         htmlList: this.selectedElementList,
         children: [],
-        isActive: false,
+        isActive: false
       };
 
       // console.log('component', component);
       console.log('component (HomeSidebar handleClick)', component);
       this.registerComponent(component);
-    },
-  },
+    }
+  }
 };
 </script>
 <style>

src/components/Icons.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="icon-grid">
     <button
-      @click.prevent="changeState(elementName)"
+      @click="handleClick(elementName)"
       v-for="([elementName, iconString], idx) in Object.entries(icons)"
       :key="idx + Date.now()"
     >
@@ -14,17 +14,23 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import * as types from '../store/types.js';
 
 export default {
   name: 'Icons',
   computed: {
-    ...mapState(['icons']),
+    ...mapState(['icons'])
   },
   methods: {
-    changeState(elementName) {
-      this.$emit('getClickedIcon', elementName); // emit prop necessary?
-    },
-  },
+    handleClick(htmlElement) {
+      console.log(htmlElement);
+      this.$store.dispatch(types.addToSelectedElementList, htmlElement);
+      console.log(this.$store.state.selectedElementList);
+    }
+    // changeState(elementName) {
+    //   this.$emit('getClickedIcon', elementName); // emit prop necessary?
+    // }
+  }
 };
 </script>
 

src/components/NavBar.vue

@@ -12,6 +12,7 @@
       <br />
       <span class="white--text">Tree</span>
     </button>
+    <SaveProjectComponent></SaveProjectComponent>
   </v-app-bar>
 </template>
 
@@ -21,7 +22,7 @@
 // import path from 'path';
 // import { addProject, changeTabName } from '../store/types';
 // import localforage from 'localforage';
-// import SaveProjectComponent from '@/components/SaveProjectComponent.vue';
+import SaveProjectComponent from '@/components/SaveProjectComponent.vue';
 // import OpenProjectComponent from '@/components/OpenProjectComponent.vue';
 // import NewProjectComponent from '@/components/NewProjectComponent.vue';
 // import ExportProjectComponent from '@/components/ExportProjectComponent.vue';
@@ -38,7 +39,7 @@ export default {
   props: ['route', 'imageURL'],
 
   components: {
-    // SaveProjectComponent,
+    SaveProjectComponent
     // OpenProjectComponent,
     // NewProjectComponent,
     // ExportProjectComponent,
@@ -49,8 +50,8 @@ export default {
     },
     routeTree() {
       this.$router.push({ path: '/tree' });
-    },
-  },
+    }
+  }
 };
 </script>