basic html element functionality

Author: jeisele2

package-lock.json

@@ -18,10 +18,12 @@
     "quasar": "^1.0.0",
     "vue-custom-context-menu": "^3.0.1",
     "vue-drag-resize": "^1.3.2",
+    "vue-draggable-nested-tree": "^2.2.17",
     "vue-draggable-resizable": "^2.0.0-rc2",
     "vue-loader": "^15.7.0",
     "vue-multiselect": "^2.1.6",
     "vued3tree": "^3.7.1",
+    "vuedraggable": "^2.23.0",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <p class="panel-heading">Selected Elements</p>
+    <Tree :data="renderList" draggable="draggable">
+      <div slot-scope="{ data }" class="drag">
+        <template v-if="!data.isDragPlaceHolder">
+          <span class="drag-text">{{ data.text }}</span>
+          <i class="fas fa-trash fa-md" @click="deleteElement(data._id)"></i>
+        </template>
+      </div>
+    </Tree>
+  </div>
+</template>
+
+<script>
+// import draggable from 'vuedraggable'
+import { DraggableTree } from 'vue-draggable-nested-tree'
+import { mapState, mapActions } from 'vuex'
+import {
+  setClickedElementList,
+  deleteFromComponentHtmlList
+  // setComponentHtmlList,
+  // addToComponentElementList
+} from '../store/types'
+// import { setInterval } from 'timers'
+
+export default {
+  name: 'EditQueue',
+  props: {
+    name: {
+      type: String
+    }
+  },
+  data: function () {
+    return {
+      listToRender: null
+    }
+  },
+  computed: {
+    ...mapState(['componentMap', 'activeComponent', 'routes', 'activeRoute']),
+    renderList: {
+      get () {
+        return this.componentMap[this.activeComponent].htmlList
+      },
+      set (newArr) {
+        this.setClickedElementList(newArr)
+      }
+    }
+  },
+  methods: {
+    ...mapActions([setClickedElementList]),
+    deleteElement (id) {
+      this.$store.dispatch(deleteFromComponentHtmlList, id)
+    }
+  },
+  components: {
+    // draggable,
+    Tree: DraggableTree
+  }
+}
+</script>
+
+<style scoped>
+.delete-icon:hover {
+  cursor: pointer;
+}
+.drag {
+  background-color: white;
+  margin: 0.5em;
+  border-radius: 5px;
+}
+.drag-text {
+  padding-left: 5px;
+}
+</style>

src/components/EditQueue.vue

@@ -33,7 +33,7 @@
         </q-tab-panel>
 
         <q-tab-panel name="html">
-          <div class="text-h6">HTML Elements</div>HTML Element Component Here
+          <HomeQueue />
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
@@ -43,10 +43,12 @@
 <script>
 import Tree from './Tree'
 // import CodeSnippet from './CodeSnippet'
+import HomeQueue from './HomeQueue'
 
 export default {
   components: {
-    Tree
+    Tree,
+    HomeQueue
     // CodeSnippet
   },
   data () {
@@ -60,7 +62,7 @@ export default {
   },
   methods: {
     openBottomDrawer () {
-      let minHeight = (window.outerHeight < 900) ? 4.5 : 2.5
+      let minHeight = (window.outerHeight < 900) ? 4.5 : (window.outerHeight < 1035) ? 3.75 : 2.5
       this.height === 35 ? (this.height = minHeight) : (this.height = 35)
       this.open === true ? this.open = false : this.open = true
     }