Merge pull request #3 from drewngyen/image-upload

Image upload

Author: drewngyen

.gitignore

@@ -11,7 +11,8 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-/test/jest/coverage
+/test
+/coverage
 
 # Editor directories and files
 .idea

package-lock.json

@@ -8,7 +8,13 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue src",
-    "test": "echo \"No test specified\" && exit 0"
+    "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
+    "test:unit": "jest --updateSnapshot",
+    "test:unit:coverage": "jest --coverage",
+    "test:unit:watch": "jest --watch",
+    "test:unit:watchAll": "jest --watchAll",
+    "serve:test:coverage": "quasar serve test/jest/coverage/lcov-report/ --port 8788",
+    "concurrently:dev:jest": "concurrently \"quasar dev\" \"jest --watch\""
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",

package.json

@@ -1,11 +1,9 @@
 {
   "@quasar/testing": {
-    "harnesses": [
-      "unit-jest"
-    ]
+    "harnesses": ["unit-jest"]
   },
   "@quasar/testing-unit-jest": {
     "babel": "babelrc",
     "options": []
   }
-}
+}

quasar.extensions.json

@@ -1,16 +1,18 @@
-import { app, BrowserWindow } from 'electron'
+import { app, BrowserWindow } from "electron";
 
 /**
  * Set `__statics` path to static files in production;
  * The reason we are setting it here is that the path needs to be evaluated at runtime
  */
 if (process.env.PROD) {
-  global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\')
+  global.__statics = require("path")
+    .join(__dirname, "statics")
+    .replace(/\\/g, "\\\\");
 }
 
-let mainWindow
+let mainWindow;
 
-function createWindow () {
+function createWindow() {
   /**
    * Initial window options
    */
@@ -19,27 +21,28 @@ function createWindow () {
     height: 600,
     useContentSize: true,
     webPreferences: {
-      nodeIntegration: true
+      nodeIntegration: true,
+      webSecurity: false
     }
-  })
+  });
 
-  mainWindow.loadURL(process.env.APP_URL)
+  mainWindow.loadURL(process.env.APP_URL);
 
-  mainWindow.on('closed', () => {
-    mainWindow = null
-  })
+  mainWindow.on("closed", () => {
+    mainWindow = null;
+  });
 }
 
-app.on('ready', createWindow)
+app.on("ready", createWindow);
 
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
   }
-})
+});
 
-app.on('activate', () => {
+app.on("activate", () => {
   if (mainWindow === null) {
-    createWindow()
+    createWindow();
   }
-})
+});

src-electron/main-process/electron-main.js

@@ -1,8 +1,8 @@
 <template>
   <div class="codesnippet-container">
     <!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers -->
-    <div class="top-p" v-if="activeComponent === ''" >Select a component</div>
-    <div v-else >{{ `${activeComponent}.vue` }}</div>
+    <div class="top-p" v-if="activeComponent === ''">Select a component</div>
+    <div v-else>{{ `${activeComponent}.vue` }}</div>
     <prism-editor
       v-model="code"
       language="js"
@@ -44,7 +44,10 @@ export default {
     },
     // calls createTemplate and createBoiler to generate snippet
     createCodeSnippet (componentName, children) {
-      let result = `${this.createTemplate(componentName, children)}${this.createBoiler(componentName, children)}`
+      let result = `${this.createTemplate(
+        componentName,
+        children
+      )}${this.createBoiler(componentName, children)}`
       return result
     },
     createTemplate (componentName, children) {
@@ -108,7 +111,10 @@ export default {
   // updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
   updated () {
     // console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
-    this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
+    this.code = `${this.createCodeSnippet(
+      this.activeComponent,
+      this.componentMap[this.activeComponent].children
+    )}`
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.getWindowHeight)
@@ -121,11 +127,12 @@ export default {
 .code-editor {
   font-size: 12px;
 }
+
 .codesnippet-container {
   margin-bottom: 1rem;
 }
+
 ::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
-
 </style>

src/components/CodeSnippet.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="component-display">
+  <div class="component-display grid-bg" :style="mockBg">
+    <!-- <p>{{ userImage }}</p> -->
     <VueDraggableResizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
@@ -15,23 +16,27 @@
       @resizing="onResize"
       @dblclick.native="onDoubleClick(componentData)"
     >
-     <div class="component-title">
+      <div class="component-title">
         <p>{{ componentData.componentName }}</p>
       </div>
       <ul class="component-children">
-        <li># of children: {{ componentMap[componentData.componentName].children.length }} </li>
+        <li># of children: {{ componentMap[componentData.componentName].children.length }}</li>
         <li>children: {{ componentMap[componentData.componentName].children }}</li>
-         <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
+        <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
       </ul>
-      <q-menu context-menu >
+      <q-menu context-menu>
         <q-list class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
             <q-item-section>Add Children</q-item-section>
-            <q-item-section avatar><q-icon color="primary" name="add"/></q-item-section>
+            <q-item-section avatar>
+              <q-icon color="primary" name="add" />
+            </q-item-section>
           </q-item>
           <q-item clickable v-ripple v-close-popup auto-close>
             <q-item-section>Delete Children</q-item-section>
-            <q-item-section avatar><q-icon color="primary" name="delete"/></q-item-section>
+            <q-item-section avatar>
+              <q-icon color="primary" name="delete" />
+            </q-item-section>
           </q-item>
         </q-list>
       </q-menu>
@@ -70,7 +75,8 @@ export default {
       modalOpen: false,
       abilityToDelete: false,
       testOptions: ['parent', 'child', 'grandchild'],
-      testModel: []
+      testModel: [],
+      mockImg: false
     }
   },
   mounted () {
@@ -85,7 +91,14 @@ export default {
     })
   },
   computed: {
-    ...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap', 'componentChildrenMultiselectValue']),
+    ...mapState([
+      'routes',
+      'activeRoute',
+      'activeComponent',
+      'componentMap',
+      'componentChildrenMultiselectValue',
+      'imagePath'
+    ]),
     // used in VueDraggableResizeable component
     activeRouteArray () {
       console.log('active route array method', this.routes[this.activeRoute])
@@ -107,13 +120,28 @@ export default {
       return Object.keys(this.componentMap).filter(component => {
         if (!exceptions.has(component)) return component
       })
+    },
+    userImage () {
+      const imgSrc = this.imagePath.length ? `file://` + this.imagePath[0] : ''
+      // const imgSrc1 = this.imagePath;
+      console.log(`imgSrc: ${imgSrc}`)
+      return imgSrc
+    },
+    mockBg () {
+      return this.imagePath.length
+        ? {
+          background: `url("${this.userImage}") no-repeat center`,
+          'background-size': 'cover'
+        }
+        : {}
     }
   },
   methods: {
     ...mapActions([
       'setActiveComponent',
       'updateComponentChildrenMultiselectValue',
-      'updateActiveComponentChildrenValue']),
+      'updateActiveComponentChildrenValue'
+    ]),
     onResize: function (x, y, width, height) {
       this.activeComponentData.x = x
       this.activeComponentData.y = y
@@ -131,6 +159,7 @@ export default {
 
       this.componentMap[this.activeComponent].x = x
       this.componentMap[this.activeComponent].y = y
+      this.userImage
     },
     onActivated (componentData) {
       this.setActiveComponent(componentData.componentName)
@@ -190,8 +219,10 @@ export default {
   height: 90vh;
   width: 100%;
   position: relative;
-  background: darkslategray;
-  background-color: rgba(124, 126, 145, 0.44);
+  /* background: rgb(211, 211, 210); */
+}
+.grid-bg {
+  background-color: rgba(223, 218, 218, 0.886);
   /* background-color: #269; */
   background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
   background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
@@ -216,6 +247,7 @@ export default {
     #269;
   behavior: url(/pie/PIE.htc);
 }
+
 .menu {
   margin-bottom: 0px !important;
 }

src/components/ComponentDisplay.vue

@@ -10,17 +10,25 @@
         label="Component Name"
         :dense="dense"
         class="input-add"
-      >
-      </q-input>
+      ></q-input>
     </form>
     <div class="icon-container">
-      <Icons class = 'icons' @getClickedIcon="addToSelectedElementList" @activeElement="addToComponentElementList"/>
+      <Icons
+        class="icons"
+        @getClickedIcon="addToSelectedElementList"
+        @activeElement="addToComponentElementList"
+      />
     </div>
     <ParentMultiselect />
     <br />
 
-    <q-btn id="add-component-btn" color="secondary" label="Create Component" @click="handleClick" :disabled="!componentNameInputValue" />
-
+    <q-btn
+      id="add-component-btn"
+      color="secondary"
+      label="Create Component"
+      @click="handleClick"
+      :disabled="!componentNameInputValue"
+    />
   </div>
 </template>
 
@@ -78,7 +86,7 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style type="stylus" scoped>
 .is-primary {
   height: 45px;
 }
@@ -93,7 +101,7 @@ form {
 .home-sidebar {
   margin: 1rem;
   padding: 0.5rem;
-  border: 1px solid rgba(215, 215, 215, 0.728);
+  /* border: 1px solid $subsecondary; */
   border-radius: 5px;
 }
 </style>

src/components/CreateComponent.vue

@@ -43,36 +43,36 @@
 </template>
 
 <script>
-import Tree from "./Tree";
-import HomeQueue from "./HomeQueue";
-import CodeSnippet from "./CodeSnippet";
+import Tree from './Tree'
+import HomeQueue from './HomeQueue'
+import CodeSnippet from './CodeSnippet'
 
 export default {
   components: {
     Tree,
     HomeQueue,
     CodeSnippet
   },
-  data() {
+  data () {
     return {
-      tab: "code",
+      tab: 'code',
       open: true,
       height: 40,
-      up: "fas fa-chevron-up",
-      down: "fas fa-chevron-down"
-    };
+      up: 'fas fa-chevron-up',
+      down: 'fas fa-chevron-down'
+    }
   },
   methods: {
-    openBottomDrawer() {
+    openBottomDrawer () {
       // 15in mb pro - 1027 px 3.75
       // big ass screens 2.5
       let minHeight =
-        window.outerHeight < 900 ? 4.5 : window.outerHeight < 1035 ? 3.75 : 2.5;
-      this.height === 40 ? (this.height = minHeight) : (this.height = 40);
-      this.open === true ? (this.open = false) : (this.open = true);
+        window.outerHeight < 900 ? 4.5 : window.outerHeight < 1035 ? 3.75 : 2.5
+      this.height === 40 ? (this.height = minHeight) : (this.height = 40)
+      this.open === true ? (this.open = false) : (this.open = true)
     }
   }
-};
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -92,7 +92,7 @@ i {
   transition-timing-function: ease-in;
   transition: 0.2s;
   // background: #313131;
-  background: #272822;
+  background: $subsecondary;
 }
 
 // changes the footer toolbar height
@@ -124,7 +124,7 @@ i {
 
 .q-tab-panel {
   // matchs the code editor bg
-  background: #272822;
+  background: $subprimary;
   // background: rgb(69,77,102);
   // background: linear-gradient(180deg, rgba(69,77,102,1) 0%, rgba(54,60,78,1) 100%);
 }