ethiopian-fox-2017 · zidane9 · Apr 20, 2017
diff --git a/client/.babelrc b/client/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["latest", {
+      "es2015": { "modules": false }
+    }]
+  ],
+  "plugins": ["transform-object-rest-spread"]
+}
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,18 @@
+# client
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>client</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "client",
+  "description": "A Vue.js project",
+  "version": "1.0.0",
+  "author": "zidane9 <[email protected]>",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "axios": "^0.16.1",
+    "vue": "^2.2.1",
+    "vue-router": "^2.4.0",
+    "vuex": "^2.3.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-latest": "^6.0.0",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "vue-loader": "^11.1.4",
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
+  }
+}
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -0,0 +1,49 @@
+<template>
+<div id="app">
+  <div class="layout-logo">Finding you the right home</div>
+  <div >
+    <img src="http://daftarperumahanmurah.com/assets/9aae334/Rumah-Dijual.jpg" >
+
+  </div>
+
+<div>
+<button>
+    <router-link to="/houses/new">Add House for Sell</router-link>
+</button>
+
+<button @click="initHouses">
+    <router-link  to="/houses">List House for Sell</router-link>
+</button>
+</div>
+
+  <router-view></router-view>
+
+  <!-- <div class="">
+    {{$store.state}}
+  </div> -->
+</div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import ListHouse from './components/ListHouse.vue'
+
+export default{
+  name: 'app',
+  data(){
+    return {
+      // types: ['general', 'knock-knock', 'programming'],
+      // checkedTypes: ['general', 'knock-knock', 'programming']
+    }
+  },
+  methods: mapActions([
+    'initHouses'
+  ]),
+  components:{
+    ListHouse
+  }
+  // created() {
+  //   this.$store.dispatch('initHouses')
+  // }
+}
+</script>
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/components/AddHouse.vue b/client/src/components/AddHouse.vue
@@ -0,0 +1,77 @@
+<template lang="html">
+<div class="">
+      <div >
+        <h5>Add House For Sell</h5>
+        <form>
+        <table>
+          <tr>
+            <td>Title</td>
+            <td><input type="text" name="title" v-model="newHouse.title" ></td>
+          </tr>
+          <tr>
+            <td>Description</td>
+            <td><input type="text" name="description" v-model="newHouse.description" ></td>
+          </tr>
+          <tr>
+            <td>Price</td>
+            <td><input type="text" name="price" v-model="newHouse.price" ></td>
+          </tr>
+          <tr>
+            <td>Image</td>
+            <td><input type="text" name="image" v-model="newHouse.image" ></td>
+          </tr>
+          <tr>
+            <td>Owner</td>
+            <td><input type="text" name="owner" v-model="newHouse.owner" ></td>
+          </tr>
+          <tr>
+            <td>Phone</td>
+            <td><input type="text" name="phone" v-model="newHouse.phone" ></td>
+          </tr>
+          <tr>
+            <td>Address</td>
+            <td><input type="text" name="address" v-model="newHouse.address" ></td>
+          </tr>
+        </table>
+      </form>
+        <button @click="addHouse(newHouse)" >Submit</button>
+
+      </div>
+
+</div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  data(){
+    return {
+      newHouse: {
+        title: '',
+        description: '',
+        price: '',
+        image: '',
+        owner: '',
+        phone: '',
+        address: ''
+      }
+    }
+  },
+  methods: mapActions ([
+    'addHouse'
+  ])
+    // getHouse(e) {
+    //   this.$store.dispatch('getHouse', e.target.value)
+    // },
+    // addHouse(){
+    //   this.$store.dispatch('addHouse')
+    //   this.$store.dispatch('clearHouse')
+    // }
+
+}
+</script>
+
+<style lang="css">
+
+</style>
diff --git a/client/src/components/DetailHouse.vue b/client/src/components/DetailHouse.vue
@@ -0,0 +1,79 @@
+<template lang="html">
+<div class="">
+      <div >
+        <h5>Detail</h5>
+        <form>
+
+        <table>
+          <tr>
+            <td>Title</td>
+            <td><input type="text" name="title" v-model="house.title" ></td>
+          </tr>
+          <tr>
+            <td>Description</td>
+            <td><input type="text" name="description" v-model="house.description" ></td>
+          </tr>
+          <tr>
+            <td>Price</td>
+            <td><input type="text" name="price" v-model="house.price" ></td>
+          </tr>
+          <tr>
+            <td>Image</td>
+            <td><input type="text" name="image" v-model="house.image" ></td>
+          </tr>
+          <tr>
+            <td>Owner</td>
+            <td><input type="text" name="owner" v-model="house.owner" ></td>
+          </tr>
+          <tr>
+            <td>Phone</td>
+            <td><input type="text" name="phone" v-model="house.phone" ></td>
+          </tr>
+          <tr>
+            <td>Address</td>
+            <td><input type="text" name="address" v-model="house.address" ></td>
+          </tr>
+        </table>
+      </form>
+        <button @click="updateHouse(house)" >Update</button>
+
+      </div>
+
+</div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  props:['house'],
+  // data(){
+    // return {
+    //   house: {
+    //     title: '',
+    //     description: '',
+    //     price: '',
+    //     image: '',
+    //     owner: '',
+    //     phone: '',
+    //     address: ''
+    //   }
+    // }
+  // },
+  methods: mapActions ([
+    'updateHouse'
+  ])
+    // getHouse(e) {
+    //   this.$store.dispatch('getHouse', e.target.value)
+    // },
+    // addHouse(){
+    //   this.$store.dispatch('addHouse')
+    //   this.$store.dispatch('clearHouse')
+    // }
+
+}
+</script>
+
+<style lang="css">
+
+</style>
diff --git a/client/src/components/House.vue b/client/src/components/House.vue
@@ -0,0 +1,55 @@
+<template lang="html">
+<div class="">
+      <div style="border:1px solid black" >
+        <table>
+          <tr>
+            <td><img width="200px" height="150px" :src="house.image"></td>
+            <td>{{house.title}}</td>
+          <tr>
+            <td><button @click="show">show</button></td>
+                <td><button @click="removeHouse(house._id)" >remove</button></td>
+          </tr>
+
+        </table>
+        <detail-house v-if="isShow" :house="house"></detail-house>
+
+      </div>
+
+</div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import DetailHouse from './DetailHouse.vue'
+
+export default {
+  props: ['house'],
+  data(){
+    return {
+      isShow: false
+      // newHouse: {
+      //   title: '',
+      //   description: '',
+      //   price: '',
+      //   image: '',
+      //   owner: '',
+      //   phone: '',
+      //   address: ''
+      // }
+    }
+  },
+  methods: {
+    ...mapActions ([
+    'removeHouse'
+  ]),
+    show(){
+      if(this.isShow) this.isShow=false;
+      else this.isShow=true;
+    }
+  },
+  components:{
+    DetailHouse
+  }
+
+}
+</script>
diff --git a/client/src/components/ListHouse.vue b/client/src/components/ListHouse.vue
@@ -0,0 +1,24 @@
+<template lang="html">
+<div class="">
+  <h5 v-if="$store.state.houses.length > 0">List House for Sell</h5>
+  <House v-for="(house, index) in $store.state.houses" :house="house" key="index"></House>
+</div>
+</template>
+
+<script>
+// import { mapActions } from 'vuex'
+import House from './House.vue'
+
+export default {
+
+  data(){
+    return {
+
+    }
+  },
+  components:{
+    House
+  }
+
+}
+</script>
diff --git a/client/src/constants.js b/client/src/constants.js
@@ -0,0 +1,3 @@
+const serverUrl = 'http://localhost:3000';
+
+module.exports = serverUrl
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const serverUrl = 'http://localhost:3000';

		module.exports = serverUrl