Merge pull request #47 from hubelin/refactoring

Added save project and delete from queue functionality

package.json

@@ -12,6 +12,9 @@
     "postuninstall": "electron-builder install-app-deps"
   },
   "dependencies": {
+    "localforage": "^1.7.3",
+    "lodash": "^4.17.11",
+    "lodash.throttle": "^4.1.1",
     "vue": "^2.6.6",
     "vue-drag-resize": "^1.3.2",
     "vue-js-modal": "^1.3.28",
@@ -36,4 +39,4 @@
     "vue-template-compiler": "^2.5.21"
   },
   "main": "background.js"
-}
+}

src/components/ComponentDisplay.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="component-display">
     <!-- <LoadingBar :duration="2000"/> -->
-    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
+    <div
+      style="height: 500px; width: 500px; border: 1px solid red; position: relative;"
+    >
       <VueDraggableResizable
         class-name="component-box"
-        v-for="([componentName, componentData]) in Object.entries(computedComponentMap)"
+        v-for="[componentName, componentData] in Object.entries(
+          computedComponentMap
+        )"
         :key="componentName"
         :w="componentData.w"
         :h="componentData.h"
@@ -15,19 +19,21 @@
         :parent="true"
       >
         <h3>{{ componentName }}</h3>
-        <br>
-        X: {{ componentData.x }} / Y: {{ componentData.y }} - Width: {{ componentData.width }} / Height: {{ componentData.height }}
+        <br />
+        X: {{ componentData.x }} / Y: {{ componentData.y }} - Width:
+        {{ componentData.width }} / Height: {{ componentData.height }}
       </VueDraggableResizable>
       <modals-container></modals-container>
-      <ComponentModal :modalWidth="800" :modalHeight="900"/>
+      <ComponentModal :modalWidth="800" :modalHeight="900" />
     </div>
   </div>
 </template>
 <script>
 import { mapState } from 'vuex';
 import LoadingBar from './LoadingBar.vue';
 import ComponentModal from './ComponentModal.vue';
-import { setComponentMap } from '../store/types';
+import { setComponentMap, getPrevState } from '../store/types';
+import localforage from 'localforage';
 import VueDraggableResizable from 'vue-draggable-resizable';
 
 export default {
@@ -50,6 +56,14 @@ export default {
     };
   },
 
+  created() {
+    localforage
+      .getItem('state')
+      .then(data => {
+        this.$store.dispatch(getPrevState, data);
+      })
+      .then(data => console.log('retrieved previous data'));
+  },
   computed: {
     ...mapState(['componentMap', 'clickedComponent']),
     computedComponentMap: {

src/components/HomeQueue.vue

@@ -3,24 +3,30 @@
     <draggable
       v-model="renderList"
       group="people"
+      class="list-group"
+      ghost-class="ghost"
       @start="drag = true"
       @end="drag = false"
     >
-      <div
-        class="white--text"
+      <li
+        class="list-group-item"
         v-for="(element, index) in renderList"
         :key="index + Date.now()"
       >
-        {{ element }}
-      </div>
+        <span>{{ element }}</span>
+
+        <v-icon class="delete-icon" @click="deleteElement(index)"
+          >remove_circle_outline</v-icon
+        >
+      </li>
     </draggable>
   </div>
 </template>
 
 <script>
 import draggable from 'vuedraggable';
 import { mapState } from 'vuex';
-import { setSelectedElementList } from '../store/types';
+import { setSelectedElementList, deleteSelectedElement } from '../store/types';
 
 export default {
   name: 'HomeQueue',
@@ -44,10 +50,29 @@ export default {
       }
     }
   },
+  methods: {
+    deleteElement(index) {
+      this.$store.dispatch(deleteSelectedElement, index);
+    }
+  },
   components: {
     draggable
   }
 };
 </script>
 
-<style></style>
+<style scoped>
+li {
+  list-style-type: none;
+}
+.list-group-item {
+  margin-top: 5px;
+  border: 1px solid black;
+  border-radius: 0.5cm;
+  background-color: palevioletred;
+}
+
+.delete-icon:hover {
+  cursor: pointer;
+}
+</style>

src/components/NavBar.vue

@@ -4,18 +4,31 @@
       <router-link :to="{ name: 'home' }" class="prevue">
         <span class="white--text">Pre</span>
         <span class="green--text text--accent-2">Vue</span>
-      </router-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      </router-link>
       <router-link :to="{ name: 'tree' }">
         <span id="tree-link" class="purple--text text--accent-2">View Component Tree</span>
       </router-link>
+      <span>
+        <v-icon class="save-icon" @click="saveState">save_alt</v-icon>
+        <span>save</span>
+      </span>
     </v-toolbar-title>
   </v-toolbar>
 </template>
 
 <script>
+import localforage from 'localforage';
 export default {
   name: 'NavBar',
-  props: ['route']
+  props: ['route'],
+  methods: {
+    saveState() {
+      const currentState = this.$store.state;
+      localforage
+        .setItem('state', currentState)
+        .then(data => console.log(data));
+    }
+  }
 };
 </script>
 
@@ -51,4 +64,8 @@ export default {
 a {
   text-decoration: none;
 }
+
+.save-icon:hover {
+  cursor: pointer;
+}
 </style>

src/localStorage.js

@@ -0,0 +1,4 @@
+import localforage from 'localforage';
+
+export const saveState = state => localforage.setItem('state', state);
+export const loadState = () => localforage.getItem('state');

src/main.js

@@ -4,6 +4,7 @@ import router from './router';
 import store from './store/';
 import Vuetify from 'vuetify';
 import VModal from 'vue-js-modal';
+import { throttle } from 'lodash.throttle';
 import VueDraggableResizable from 'vue-draggable-resizable';
 
 import 'vuetify/dist/vuetify.min.css';

src/store/actions.js

@@ -1,4 +1,5 @@
 import * as types from './types';
+import { loadState } from '../localStorage';
 
 const actions = {
   [types.registerComponent]: ({ state, commit }, payload) => {
@@ -27,6 +28,12 @@ const actions = {
   },
   [types.deleteClickedComponent]: ({ commit }) => {
     commit(types.DELETE_CLICKED_COMPONENT);
+  },
+  [types.getPrevState]: ({ commit }, payload) => {
+    commit(types.GET_PREV_STATE, payload);
+  },
+  [types.deleteSelectedElement]: ({ commit }, payload) => {
+    commit(types.DELETE_SELECTED_ELEMENT, payload);
   }
 };
 

src/store/mutations.js

@@ -7,7 +7,9 @@ import {
   ADD_TO_COMPONENT_HTML_LIST,
   SET_CLICKED_ELEMENT_LIST,
   DELETE_CLICKED_COMPONENT,
-  SET_COMPONENT_MAP
+  SET_COMPONENT_MAP,
+  GET_PREV_STATE,
+  DELETE_SELECTED_ELEMENT
 } from './types';
 
 const mutations = {
@@ -67,6 +69,12 @@ const mutations = {
   },
   [SET_COMPONENT_MAP]: (state, payload) => {
     state.componentMap = payload;
+  },
+  [GET_PREV_STATE]: (state, payload) => {
+    Object.assign(state, payload);
+  },
+  [DELETE_SELECTED_ELEMENT]: (state, payload) => {
+    state.selectedElementList.splice(payload, 1);
   }
 };
 

src/store/types.js

@@ -8,6 +8,9 @@ export const ADD_TO_COMPONENT_HTML_LIST = 'ADD_TO_COMPONENT_HTML_LIST';
 export const SET_CLICKED_ELEMENT_LIST = 'SET_CLICKED_ELEMENT_LIST';
 export const DELETE_CLICKED_COMPONENT = 'DELETE_CLICKED_COMPONENT';
 export const SET_COMPONENT_MAP = 'SET_COMPONENT_MAP';
+export const GET_PREV_STATE = 'GET_PREV_STATE';
+export const DELETE_FROM_QUEUE = 'DELETE_FROM_QUEUE';
+export const DELETE_SELECTED_ELEMENT = 'DELETE_SELECTED_ELEMENT';
 
 //Actions
 export const registerComponent = 'registerComponent';
@@ -18,3 +21,6 @@ export const addToComponentElementList = 'addToComponentElementList';
 export const setClickedElementList = 'setClickedElementList';
 export const deleteClickedComponent = 'deleteClickedComponent';
 export const setComponentMap = 'setComponentMap';
+export const getPrevState = 'getPrevState';
+export const deleteFromQueue = 'deleteFromQueue';
+export const deleteSelectedElement = 'deleteSelectedElement';

src/views/HomeView.vue

@@ -23,7 +23,6 @@ export default {
   grid-template-areas: 'component-display home-sidebar ';
   grid-gap: 10px;
   grid-template-columns: 8fr 2fr;
-  /* background-color: #2196f3; */
   padding: 10px;
   height: 100%;
 }