first sprint build

package.json

@@ -9,10 +9,12 @@
     "build": "node build/build.js",
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "test": "npm run unit",
-    "lint": "eslint --ext .js,.vue src test/unit/specs"
+    "lint": "eslint --ext .js,.vue src test/unit/specs",
+    "deploy": "node_modules/gh-pages/bin/gh-pages -d dist"
   },
   "dependencies": {
     "firebase": "^3.6.5",
+    "gh-pages": "^0.12.0",
     "vue": "^2.1.0",
     "vue-router": "^2.1.1",
     "vuefire": "^1.3.0",

src/components/AddItem.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="main-view">
+    <div class="form-container">
+       <h3>Add Item</h3>
+      <hr>
+       <form  v-on:submit.prevent="addItem" class="form-horizontal">
+        <label for="name">Product Name </label>    
+        <input type="text" v-model.trim="name" name="name" class="form-control" placeholder="Name"  required="required"  title=""> 
+       <br>
+       <label for="name">Product Price </label> 
+       <input type="number" v-model.trim.number="price" class="form-control" placeholder="Price"  required="required"  title="">
+       <br>
+       <label for="name">Product quantity </label> 
+       <input type="number" v-model.trim.number="quantity" class="form-control" placeholder="Quantity"  required="required"  title="">
+       <br>
+       <button type="submit" class="btn btn-success">Save Changes</button> 
+      </form>     
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddItem',
+  methods: {
+    addItem: function () {
+      var itemData = {name: this.name, price: this.price, quantity: this.quantity}
+      this.$emit('addItem', itemData)
+      console.log(itemData)
+    }
+  },
+  data () {
+    return {
+      name: '',
+      price: '',
+      quantity: ''
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.main-view {
+      flex:1 1 auto;
+      flex-wrap: wrap;
+      padding:10px;
+      display: flex;
+      justify-content: center;
+
+   }
+.form-container{
+      width:300px;
+      text-align: center;
+}
+</style>

src/components/AdminViewContainer.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="container">
-  <Nav />
+  <Navbar />
 
  <div class="main-content">
   <Sidebar />
-           <router-view :drugs="drugs" v-on:removeItem="removeDrug"></router-view>
+           <router-view :drugs="drugs" v-on:removeItem="removeDrug"
+            v-on:editItem="editDrug" :itemToEdit="itemToEdit" v-on:addItem="addItem" 
+            v-on:updateItem="upudateItem">
+            </router-view>
  </div>
 </div>
+
 </template>
 
 <script>
-import Nav from './Nav'
+import Navbar from './Navbar'
 import Sidebar from './Sidebar'
 import Firebase from 'firebase'
 
@@ -27,36 +31,52 @@ var firedb = FirebaseApp.database()
 export default {
   name: 'AdminContainer',
   mounted () {
-    // var wholeSaleRef = firedb.ref('wholesalers').push()
     var drugsRef = firedb.ref('drugs')
-    // drugsRef.set({name: 'paracetamol', quantity: 77, price: 455})
-    // wholeSaleRef.set({name: 'Paul', email: '[email protected]', company: 'A labs'})
     drugsRef.on('value', function (snap) {
       this.drugs = snap.val()
-    })
+      console.log(snap.val())
+    }.bind(this))
   },
   methods: {
-    removeDrug: function () {
-      console.log('removeItem')
-      this.drugs = [{name: 'paracetamol', price: '4, 873', qty: 45}]
+    removeDrug: function (itemkey) {
+      console.log('final removeItem', itemkey)
+      var drugItemRef = firedb.ref('drugs').child(itemkey)
+      drugItemRef.remove()
+    },
+    addDrug: function (itemkey) {
+      var drugsRef = firedb.ref('drugs').push()
+      drugsRef.set(itemkey)
+    },
+    editDrug: function (itemkey) {
+      console.log('final edit', itemkey)
+      this.itemToEdit = this.drugs[itemkey]
+
+      console.log(this.itemToEdit.name)
+      this.$router.push(`wholesaler/edit/${itemkey}`)
+    },
+    upudateItem: function (itemObject) {
+      console.log('updateing')
+      var drugItemRef = firedb.ref('drugs').child(itemObject.key)
+      drugItemRef.update({name: itemObject.name, price: itemObject.price, quantity: itemObject.quantity}, function () {
+        console.log('updated')
+        this.$router.push('/wholesaler')
+      }.bind(this))
     },
-    addDrug: function () {
-      console.log('add drug')
+    addItem: function (item) {
+      var drugsRef = firedb.ref('drugs').push()
+      drugsRef.set(item, () => {
+        console.log('item added')
+      })
     }
   },
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App',
-      drugs: [{name: 'paracetamol', price: '4, 873', quantity: 45},
-             {name: 'paracetamol', price: '4, 873', quantity: 45},
-             {name: 'paracetamol', price: '4, 873', quantity: 45},
-             {name: 'paracetamol', price: '4, 873', quantity: 45},
-             {name: 'paracetamol', price: '4, 873', quantity: 45}
-      ]
+      itemToEdit: {},
+      drugs: []
     }
   },
   components: {
-    Nav,
+    Navbar,
     Sidebar
   }
 }

src/components/AppLanding.vue

@@ -10,8 +10,10 @@
         <br>
         <input type="text" class="form-control" placeholder="Password" required="required" pattern="" title="">
         <br>
-        <button type="button" class="btn">Sign In</button>
-
+
+        <router-link to="/wholesaler" class="btn">
+        Sign In
+        </router-link>
     </form>
   </div>
 </div>

src/components/EditItem.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="main-view">
+    <div class="form-container">
+       <h3>Edit Item</h3>
+      <hr>
+       <form  v-on:submit.prevent="saveEdit" class="form-horizontal">
+        <label for="name">Product Name </label>    
+        <input type="text" v-model.trim="name" name="name" class="form-control" placeholder="Name"  required="required"  title=""> 
+       <br>
+       <label for="name">Product Price </label> 
+       <input type="text" v-model.trim="price" class="form-control" placeholder="Price"  required="required"  title="">
+       <br>
+       <label for="name">Product quantity </label> 
+       <input type="text" v-model.trim="quantity" class="form-control" placeholder="Quantity"  required="required"  title="">
+       <br>
+       <button type="submit" class="btn btn-success">Save Changes</button> 
+      </form>     
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EditItem',
+  props: ['itemToEdit'],
+  methods: {
+    saveEdit: function () {
+      var itemData = {
+        key: this.$route.params.id,
+        name: this.name,
+        price: this.price,
+        quantity: this.quantity
+      }
+      console.log(itemData)
+      this.$emit('updateItem', itemData)
+    }
+  },
+  mounted: function () {
+  },
+  data () {
+    return {
+      name: this.itemToEdit.name,
+      price: this.itemToEdit.price,
+      quantity: this.itemToEdit.quantity
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.main-view {
+      flex:1 1 auto;
+      flex-wrap: wrap;
+      padding:10px;
+      display: flex;
+      justify-content: center;
+
+   }
+.form-container{
+      width:300px;
+      text-align: center;
+}
+</style>

src/components/ListDrug.vue

@@ -1,6 +1,7 @@
 <template> 
   <section class="main-view">
-    <ListItem v-for="item in drugs" v-bind:drugItem="item" v-on:removeItem="removeDrug" /> 
+    <ListItem v-for="(item,key) in drugs" v-bind:itemkey="key" v-bind:drugItem="item" 
+    v-on:removeItem="removeDrug" v-on:editItem="editDrug" /> 
   </section>
 </template>
 
@@ -11,9 +12,13 @@ export default {
   name: 'ListDrug',
   props: ['drugs'],
   methods: {
-    removeDrug: function () {
-      console.log('call revieced')
-      this.$emit('removeItem')
+    removeDrug: function (itemkey) {
+      console.log('1removeDrug rec', itemkey)
+      this.$emit('removeItem', itemkey)
+    },
+    editDrug: function (itemkey) {
+      console.log('1editDrug rec', itemkey)
+      this.$emit('editItem', itemkey)
     }
 
   },

src/components/ListItem.vue

@@ -7,26 +7,30 @@
           <h3>Qty : <span class="drug-item-info"> {{ drugItem.quantity }}</span></h3>
         </div>
         <div class="options">
-          <span title="Edit" v-on:click="removeItem"> 
+          <span title="Edit" v-on:click="editItem(itemkey)"> 
             <img src="../assets/content.png"  class="img-responsive" alt="Image"></span>
-          <a href="/#" title="Delete">
-           <img src="../assets/rubbish-bin.png"  class="img-responsive" alt="Image"></a>
+          <span href="/#" title="Delete" v-on:click="removeItem(itemkey)">
+           <img src="../assets/rubbish-bin.png"  class="img-responsive" alt="Image"></span>
         </div> 
       </div>  
 </template>
 
 <script>
 export default {
   name: 'hello',
-  props: ['drugItem'],
+  props: ['drugItem', 'itemkey'],
   methods: {
-    removeItem: function () {
-      console.log('hi')
-      this.$emit('removeItem')
+    removeItem: function (itemkey) {
+      console.log(itemkey)
+      this.$emit('removeItem', itemkey)
+    },
+    editItem: function (itemkey) {
+      console.log(itemkey)
+      this.$emit('editItem', itemkey)
     }
   },
   mounted () {
-    //  console.log(this.drugItem)
+    // console.log(this.itemkey)
   },
   data () {
     return {

src/components/Nav.vue → src/components/Navbar.vue

@@ -1,6 +1,8 @@
 <template>
   <nav class="nav-bar">
-     <img src="../assets/octodisklogo.png" class="logo img-responsive"    alt="">
+    <router-link to="/">
+      <img src="../assets/octodisklogo.png" class="logo img-responsive"    alt="">
+    </router-link>
   </nav>
 </template>