From bfae59bf1ef96c5ba577ee234fc3431d2d60a88d Mon Sep 17 00:00:00 2001
From: Too <sengweitoo@gmail.com>
Date: Wed, 4 Jul 2018 16:30:34 +0800
Subject: [PATCH] integrate edit feature

---
 .../js/pages/settings/admin-supplier.vue      | 67 ++++++++++++++-----
 1 file changed, 50 insertions(+), 17 deletions(-)

diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index 28c00bac..44de3f5c 100644
--- a/resources/assets/js/pages/settings/admin-supplier.vue
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -8,10 +8,10 @@
 			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
 			<el-table-column prop="acc_no" label="Account No"></el-table-column>
 			<el-table-column label="Action">
-					<template slot-scope="scope">
-							<el-button type="text" size="small" @click="EditSupplierdialogVisible = true">Edit</el-button>
-							<el-button type="text" size="small" @click="DeleteSupplier(tableData[scope.$index].id)">Delete</el-button>
-					</template>
+				<template slot-scope="scope">
+					<el-button type="text" size="small" @click="PopOutEditSupplier(scope.$index)">Edit</el-button>
+					<el-button type="text" size="small" @click="DeleteSupplier(tableData[scope.$index].id)">Delete</el-button>
+				</template>
 			</el-table-column>
 		</el-table><br>
 		<div align="right">
@@ -19,7 +19,7 @@
 		</div>
 		<!-- popup add new supplier -->
 			<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
-					<el-form :label-position="right" label-width="150px">
+					<el-form  label-width="150px">
 						<el-form-item label="Company Name"><el-input v-model="supplierForm.company_name"></el-input></el-form-item>
 						<el-form-item label="Registration No"><el-input v-model="supplierForm.supplier_reg_no"></el-input></el-form-item>
 						<el-form-item label="GST No"><el-input v-model="supplierForm.gst_no"></el-input></el-form-item>
@@ -40,16 +40,16 @@
 		<!-- popup add new supplier end -->
 		<!-- popup edit supplier -->
 			<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
-					<el-form :label-position="right" label-width="150px">
-						<el-form-item label="Company Name"><el-input></el-input></el-form-item>
-						<el-form-item label="Registration No"><el-input></el-input></el-form-item>
-						<el-form-item label="GST No"><el-input></el-input></el-form-item>
-						<el-form-item label="Bank Name"><el-input></el-input></el-form-item>
-						<el-form-item label="Account No"><el-input></el-input></el-form-item>
+					<el-form  label-width="150px">
+						<el-form-item label="Company Name"><el-input v-model="supplierForm.company_name"></el-input></el-form-item>
+						<el-form-item label="Registration No"><el-input v-model="supplierForm.supplier_reg_no"></el-input></el-form-item>
+						<el-form-item label="GST No"><el-input v-model="supplierForm.gst_no"></el-input></el-form-item>
+						<el-form-item label="Bank Name"><el-input v-model="supplierForm.bank_name"></el-input></el-form-item>
+						<el-form-item label="Account No"><el-input v-model="supplierForm.acc_no"></el-input></el-form-item>
 					</el-form>
 				<div align="center">
 						<el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
-						<el-button type="primary" @click="EditSupplierdialogVisible = false; DoneUpdateSupplierdialogVisible = true">OK</el-button>
+						<el-button type="primary" @click="EditSupplier">OK</el-button>
 				</div>
 			</el-dialog>
 			<el-dialog align="center" :visible.sync="DoneUpdateSupplierdialogVisible" width="30%">
@@ -89,6 +89,7 @@ var client = require('./client');
 				DoneAddSupplierdialogVisible: false,
 				DoneUpdateSupplierdialogVisible: false,
 				DeleteSupplierdialogVisible: false,
+				currentEdit: -1,
 			}
 		},
 		beforeMount(){
@@ -143,12 +144,44 @@ var client = require('./client');
 						});
 					})
 			},
+			EditSupplier : function(){
+				this.EditSupplierdialogVisible = false; 
+				this.DoneUpdateSupplierdialogVisible = true;
+
+				client.put('api/setting-supplier/' + this.currentEdit, this.supplierForm)
+				.then((response) => {
+					this.ClearSupplierForm();
+					this.UpdateTableData();
+				})
+				.catch((error) => {
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Update Fail',
+						type: 'error',
+						duration: 10000
+					});
+				})
+
+			},
+			PopOutEditSupplier : function(supplier_id){
+				this.EditSupplierdialogVisible = true;
+				this.FillupSupplierForm(supplier_id);
+				this.currentEdit = this.tableData[supplier_id].id;
+			},
 			ClearSupplierForm : function(){
-				supplierForm.company_name = '';
-				supplierForm.supplier_reg_no = '';
-				supplierForm.gst_no = '';
-				supplierForm.bank_name = '';
-				supplierForm.companacc_noy_name = '';
+				this.supplierForm.company_name = '';
+				this.supplierForm.supplier_reg_no = '';
+				this.supplierForm.gst_no = '';
+				this.supplierForm.bank_name = '';
+				this.supplierForm.acc_no = '';
+			},
+			FillupSupplierForm : function(supplier_id){
+				this.supplierForm.company_name = this.tableData[supplier_id].company_name;
+				this.supplierForm.supplier_reg_no = this.tableData[supplier_id].supplier_reg_no;
+				this.supplierForm.gst_no = this.tableData[supplier_id].gst_no;
+				this.supplierForm.bank_name = this.tableData[supplier_id].bank_name;
+				this.supplierForm.acc_no = this.tableData[supplier_id].acc_no;
 			}
 		}
 	}