Merge pull request #1 from jappe999/master

feat: Add design tree UI

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {}
+}

.gitignore

@@ -0,0 +1,11 @@
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist

README.md

@@ -1 +1,22 @@
-# designtree
+# design-tree
+
+> Design Tree
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ npm install # Or yarn install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).

api/index.js

@@ -0,0 +1,17 @@
+import express from 'express'
+import bodyParser from 'body-parser'
+import tree from './routes/tree'
+
+// Create express instance
+const app = express()
+
+app.use(bodyParser())
+
+// Import API Routes
+app.use(tree)
+
+// Export the server middleware
+module.exports = {
+  path: '/api',
+  handler: app
+}

api/routes/tree.js

@@ -0,0 +1,85 @@
+import { Router } from 'express'
+import JsonDB from 'node-json-db'
+
+const router = Router()
+
+const db = () => new JsonDB('tree', true, false)
+
+const formatNodes = data => {
+  const nodes = {}
+
+  Object.keys(data).forEach(key => {
+    const node = data[key]
+    const fields = { ...node.data }
+    delete node['data']
+
+    nodes[key] = {
+      ...fields,
+      children: {
+        ...formatNodes(node),
+      }
+    }
+  })
+
+  return nodes
+}
+
+const fetchNode = nodeName => {
+  try {
+    const data = db().getData(nodeName)
+    const nodes = formatNodes(data)
+    return nodes[Object.keys(nodes)[0]]
+  } catch (e) {
+    console.error(e)
+    return {}
+  }
+}
+
+const pushNode = (name, value) => {
+  try {
+    db().push(name, value, false)
+    return true
+  } catch (e) {
+    console.log(e)
+    return false
+  }
+}
+
+const deleteNode = nodeName => {
+  try {
+    db().delete(nodeName)
+    return true
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+/* GET tree listing. */
+router.get('/tree', (req, res) => {
+  const tree = fetchNode('/')
+  res.json(tree)
+})  
+
+/* PUT node. */
+router.post('/tree', (req, res) => {
+  const node = { data: req.body }
+  if (pushNode(`/${node.data.id}`, node)) {
+    res.sendStatus(201)
+  } else {
+    res.sendStatus(500)
+  }
+})
+
+/* DELETE node by ID. */
+router.delete('/tree/[a-z0-9\-\/]+', (req, res) => {
+  const node = req.originalUrl.replace('/api/tree', '')
+
+  if (deleteNode(node)) {
+    res.sendStatus(204)
+  } else {
+    res.sendStatus(403)
+  }
+})
+
+export default router

assets/README.md

@@ -0,0 +1,9 @@
+# ASSETS
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#webpacked
+
+**This directory is not required, you can delete it if you don't want to use it.**
+

assets/app.css

@@ -0,0 +1,62 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ */
+ @tailwind preflight;
+
+ /**
+  * Here you would add any of your custom component classes; stuff that you'd
+  * want loaded *before* the utilities so that the utilities could still
+  * override them.
+  *
+  * Example:
+  *
+  * .btn { ... }
+  * .form-input { ... }
+  *
+  * Or if using a preprocessor:
+  *
+  * @import "components/buttons";
+  * @import "components/forms";
+  */
+
+ /**
+  * This injects all of Tailwind's utility classes, generated based on your
+  * config file.
+  */
+ @tailwind utilities;
+
+ /**
+  * Here you would add any custom utilities you need that don't come out of the
+  * box with Tailwind.
+  *
+  * Example :
+  *
+  * .bg-pattern-graph-paper { ... }
+  * .skew-45 { ... }
+  *
+  * Or if using a preprocessor..
+  *
+  * @import "utilities/background-patterns";
+  * @import "utilities/skew-transforms";
+  */
+ [v-cloak] {
+   display: none;
+ }
+ .fade-enter-active,
+ .fade-leave-active {
+   transition: opacity .2s
+ }
+ .fade-enter,
+ .fade-leave-to {
+   opacity: 0
+ }
+ .fade-in-enter-active {
+   transition: opacity .2s ease-out
+ }
+ .fade-in-enter {
+   opacity: 0
+ }

components/Node.vue

@@ -0,0 +1,127 @@
+<template>
+  <form @submit="pushNode">
+    <h2 class="py-8 px-3">
+      {{ titleText }}
+    </h2>
+
+    <label class="flex border-b">
+      <div class="min-w-24 py-4 px-3">
+        Title:
+      </div>
+      <input type="text" class="w-full py-4 px-3" v-model="node.title">
+    </label>
+
+    <label class="flex border-b">
+      <div class="min-w-24 py-4 px-3">
+        Author:
+      </div>
+      <input type="text" class="w-full py-4 px-3" v-model="node.author">
+    </label>
+
+    <label class="flex border-b">
+      <div class="min-w-24 py-4 px-3">
+        Quantity:
+      </div>
+      <input type="text" class="w-full py-4 px-3" v-model="node.quantity">
+    </label>
+
+    <label class="flex border-b">
+      <div class="min-w-24 py-4 px-3">
+        Type:
+      </div>
+      <input type="text" class="w-full py-4 px-3" v-model="node.type">
+    </label>
+
+    <label class="flex border-b">
+      <div class="min-w-24 py-4 px-3">
+        Deadline:
+      </div>
+      <input type="date" class="w-full py-4 px-3" v-model="node.deadline">
+    </label>
+
+    <div class="flex justify-end items-center py-4 px-3">
+      <button
+        @click.prevent="deleteNode"
+        type="submit"
+        role="submit"
+        class="ml-3 my-2 mr-4 py-px text-red border-b border-transparent hover:border-red"
+      >
+        Delete
+      </button>
+
+      <button
+        @click.prevent="pushNode"
+        type="submit"
+        role="submit"
+        class="ml-3 py-3 px-4 bg-green text-white"
+      >
+        {{ buttonText }}
+      </button>
+    </div>
+  </form>
+</template>
+
+<script>
+const nodeTemplate = {
+  id: '',
+  title: '',
+  author: '',
+  quantity: '',
+  type: '',
+  deadline: '',
+}
+
+export default {
+  data: () => {
+    return {
+      node: { ...nodeTemplate },
+    }
+  },
+
+  props: {
+    selected: {
+      type: Object,
+      default: () => nodeTemplate
+    },
+  },
+
+  computed: {
+    titleText () {
+      switch (this.node.action) {
+        case 'update':
+          return `Update ${this.node.title}`
+          break
+        case 'create-child':
+          return 'Create a new child'
+          break
+        default:
+          return 'Select a node'
+          break
+      }
+    },
+
+    buttonText () {
+      return (this.node.action === 'update')
+        ? 'Update'
+        : 'Create'
+    }
+  },
+
+  watch: {
+    selected (selected) {
+      this.node = selected
+    },
+  },
+
+  methods: {
+    deleteNode () {
+      this.$emit('delete', this.node)
+      this.node = nodeTemplate
+    },
+
+    pushNode () {
+      this.$emit('push', this.node)
+    }
+  }
+}
+</script>

components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+The components directory contains your Vue.js Components.
+Nuxt.js doesn't supercharge these components.
+
+**This directory is not required, you can delete it if you don't want to use it.**
+