Diky Arga - CRUD blogpost TDD and code done and all passed

.gitignore

@@ -0,0 +1 @@
+node_modules

client/Makefile

@@ -0,0 +1,9 @@
+.PHONY: dist build
+install:
+	@npm install
+
+dev: install
+	@npm run dev
+
+build:
+	@npm run build

client/README.md

@@ -0,0 +1,32 @@
+# element-starter
+
+> A starter kit for Element UI generated by vue-cli
+
+*If you are familiar with [cooking](https://github.com/elemefe/cooking), [here](https://github.com/ElementUI/element-cooking-starter) is a starter generated with it*
+
+## Environment
+
+`Node >= 6`
+
+## Start
+
+ - Clone or download this repository
+ - Enter your local directory, and install dependencies:
+
+``` bash
+npm install
+```
+
+## Develop
+
+``` bash
+# serve with hot reload at localhost:8010
+npm run dev
+```
+
+## Build
+
+``` bash
+# build for production with minification
+npm run build
+```

client/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "element-starter",
+  "description": "A Vue.js project",
+  "author": "[email protected]",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server -d --inline --hot --env.dev",
+    "build": "rimraf dist && webpack -p --progress --hide-modules"
+  },
+  "dependencies": {
+    "axios": "^0.15.3",
+    "element-ui": "^1.1.2",
+    "lodash": "^4.17.4",
+    "rupiah-format": "^1.0.0",
+    "slug": "^0.9.1",
+    "vue": "^2.1.8",
+    "vue-localstorage": "^0.1.3",
+    "vue-router": "^2.3.0"
+  },
+  "engines": {
+    "node": ">=6"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.6.0",
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.13.2",
+    "css-loader": "^0.26.1",
+    "element-theme": "^0.7.1",
+    "eslint": "^3.12.2",
+    "eslint-config-enough": "^0.2.2",
+    "eslint-loader": "^1.6.1",
+    "file-loader": "^0.9.0",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.24.1",
+    "postcss-loader": "^1.2.1",
+    "rimraf": "^2.5.4",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "vue-loader": "^10.0.0",
+    "vue-template-compiler": "^2.1.8",
+    "webpack": "^2.2.0-rc.4",
+    "webpack-dev-server": "beta"
+  }
+}

client/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}

client/src/App.vue

@@ -0,0 +1,63 @@
+<template>
+<div id="app">
+
+    <el-menu  :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+        <el-menu-item index="1">My Vue Blog</el-menu-item>
+        <el-submenu index="2">
+            <template slot="title">Post
+            </template>
+            <el-menu-item index="2-1"><router-link to="/posts">Show All</router-link></el-menu-item>
+            <el-menu-item index="2-2">Create</el-menu-item>
+          </el-submenu>
+      <el-menu-item index="3">Comments</el-menu-item>
+      <el-menu-item index="3"><router-link to="/shop">Shop</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/users">Users</router-link></el-menu-item>
+    </el-menu>
+<br/>
+<br/>
+
+<el-row :gutter="10">
+  <el-col :xs="24" :sm="24" :md="24" :lg="20" :offset="3">
+    <router-view></router-view>
+  </el-col>
+</el-row>
+
+    <!-- <img src="./assets/logo.png"> -->
+    <!-- <h1>{{ msg }}</h1> -->
+    <!-- <el-button @click.native="startHacking">Let's do it</el-button> -->
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            msg: 'Pakai Vue 2.0 sekarang!',
+            activeIndex: '1',
+            activeIndex2: '2',
+        }
+    },
+    methods: {
+        startHacking() {
+            this.$notify({
+                title: 'It Works',
+                message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
+                duration: 6000
+            })
+        },
+        handleSelect(key, keyPath) {
+            console.log(key, keyPath);
+        }
+    }
+}
+</script>
+
+<style>
+body {
+    font-family: Helvetica, sans-serif;
+}
+
+.el-menu-item a {
+  display: block;
+}
+</style>

client/src/components/Home.vue

@@ -0,0 +1,24 @@
+<template>
+<div class="">
+  <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+let host = 'http://localhost:3000/api';
+
+export default {
+    data() {
+        return {
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+
+</style>

client/src/components/Shop.vue

@@ -0,0 +1,156 @@
+<template>
+<div class="">
+    <el-button type="primary" @click.native="checkout">Checkout</el-button>
+    <br/>
+    <br/>
+
+    <el-row :gutter="20">
+        <el-col :span="16">
+            <el-row :gutter="20">
+                <el-col :span="8" v-for="item in items" :offset="index > 0 ? 2 : 0">
+                    <el-card :body-style="{ padding: '0px' }">
+                        <img :src="item.pictlink" class="image">
+                        <div style="padding: 14px;">
+                            <h3>{{ item.name }}</h3>
+                            <div class="bottom clearfix">
+                                <p>
+                                    {{ item.description }}
+                                </p>
+                                <h3>{{toRupiah(item.price )}}</h3>
+                                <el-button type="primary" class="button" @click.native="addToCart(item)">Add to cart</el-button>
+                            </div>
+                        </div>
+                    </el-card>
+                </el-col>
+            </el-row>
+        </el-col>
+        <el-col :span="8">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span style="line-height: 36px;">Shoping cart</span>
+                    <el-button style="float: right;" type="primary">Purchase now</el-button>
+                </div>
+                <div v-for="item in cart" class="text item">
+                      {{ item.product_name }} [ X {{ item.quantity }}
+                      ]<span class="right">{{ toRupiah(item.subtotal) }}
+                        <el-button size="mini" icon="delete" type="danger" @click.native="deleteFromCart(item.product_id)"></el-button>
+                      </span>
+                </div>
+                <div class="">
+                  <span class="total title">Total</span> <span class="total right">{{ total }}</span>
+                </div>
+            </el-card>
+        </el-col>
+    </el-row>
+
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import _ from 'lodash'
+import rupiah from 'rupiah-format'
+let host = 'http://localhost:3000/api';
+
+export default {
+    data() {
+        return {
+            items: [],
+            cart: [],
+            local: localStorage.getItem('storedData')
+        }
+    },
+    created() {
+        console.log('run');
+        this.getItems()
+        this.cart = JSON.parse(this.$localStorage.get('cart'))
+        console.log(this.cart);
+    },
+    computed: {
+      total: function(){
+        return rupiah.convert(_.sumBy(this.cart, 'subtotal'))
+      }
+    },
+    methods: {
+        getItems() {
+            let self = this;
+            axios.get(host + '/items')
+                .then(response => {
+                    // JSON responses are automatically parsed.
+                    self.items = response.data
+                })
+                .catch(e => {
+                    console.log(e);
+                })
+
+
+        },
+        toRupiah(price){
+          return rupiah.convert(price)
+        },
+        addToCart(item){
+          let newItem = item
+          let indexAlready = _.findIndex(this.cart, ['product_id', item.id])
+          if (indexAlready == -1) {
+            let cartItem = {
+              product_id: item.id,
+              product_name: item.name,
+              quantity: 1,
+              price: item.price,
+              subtotal: parseInt(item.price)
+            }
+            this.cart.push(cartItem)
+          } else {
+            let cartItem = this.cart[indexAlready]
+            cartItem.quantity = cartItem.quantity + 1
+            cartItem.subtotal =cartItem.price * cartItem.quantity
+          }
+           this.$localStorage.set('cart', JSON.stringify(this.cart))
+        },
+        deleteFromCart(product_id){
+          let indexAlready = _.findIndex(this.cart, ['product_id', product_id])
+          this.cart.splice(indexAlready, 1)
+
+        },
+        formatter(row, column) {
+            return row.address;
+        }
+    }
+}
+</script>
+
+<style>
+.el-col  {
+  margin-bottom: 20px;
+}
+.image {
+    width: 100%;
+    display: block;
+}
+.text {
+  font-size: 14px;
+}
+
+.item {
+  padding: 10px 0;
+}
+
+.total {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.right {
+  float: right;
+}
+
+.clearfix:before,
+.clearfix:after {
+    display: table;
+    content: "";
+}
+
+.clearfix:after {
+    clear: both
+}
+</style>

client/src/components/item/Item.vue

@@ -0,0 +1,24 @@
+<template>
+<div class="">
+  <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+let host = 'http://localhost:3000/api';
+
+export default {
+    data() {
+        return {
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+
+</style>