exchange/resources/assets/js/pages/settings/admin-marking-setting.vue

<template>
<div>
	<span align="center"><h4>Marking Setting</h4></span><br>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="marking" label="Marking" width="120px"></el-table-column>
			<el-table-column prop="email" label="Email"></el-table-column>
			<el-table-column label="Action">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="PopOutEditMarking(scope.$index)">Edit</el-button>
					<el-button type="text" size="small" @click="DeleteMarking(tableData[scope.$index].id)">Delete</el-button>
				</template>
			</el-table-column>
		</el-table><br>
		<div align="right">
			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMarking">Add New Data</el-button>
		</div>
		<!-- popup add new data -->
			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
				<el-form ref="markingForm" :model="markingForm" :rules="rules">
			      <div align="right">
			        <el-form-item label="Marking" prop="marking">
			          <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
			        </el-form-item>
			        <el-form-item label="Email" prop="email">
			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
			        </el-form-item>
			      </div>
			    </el-form>
				<div align="right">
					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
                <el-button type="primary"  :loading="loading_btn"  @click="CreateMarking('markingForm')">Add New Data</el-button>
				</div>

			</el-dialog>
			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
				<span>Data Added Successfully</span><br><br>
				<div align="center">
						<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
				</div>
			</el-dialog>
		<!-- popup add new data end -->
		<!-- popup edit data -->
			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
				<el-form ref="markingForm" :model="markingForm" :rules="rules">
			      <div align="right">
			        <el-form-item label="Marking" prop="marking">
			          <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
			        </el-form-item>
			        <el-form-item label="Email" prop="email">
			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
			        </el-form-item>
			      </div>
			    </el-form>
				<div align="right">
					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
					<el-button type="primary" icon="el-icon-plus" @click="EditMarking">Submit</el-button>
				</div>
			</el-dialog>
			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
				<span>Data Updated Successfully</span><br><br>
				<div align="center">
					<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
				</div>
			</el-dialog>
		<!-- popup edit data end -->
		<!-- popup delete -->
			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
				<span>Data Deleted</span><br><br>
				<div align="center">
					<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
				</div>
			</el-dialog>
		<!-- popup delete end -->
</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				loading_btn: false,
		        markingForm: {
		          	marking : null,
					email : null,
		        },
				rules: {
			      email: [{
			        required: true,
			        message: 'Please input email',
			        trigger: 'change'
			      }],
			      marking: [{
			        required: true,
			        message: 'Please input marking',
			        trigger: 'change'
			      }]
		        },
		        tableData: [],
				EditDatadialogVisible: false,
				DeleteAdddialogVisible: false,
				AddDatadialogVisible: false,
				DoneAddDatadialogVisible: false,
				DoneUpdateDatadialogVisible: false,
				currentEdit : -1,
			}
		},
		mounted(){
	    	this.UpdateTableData();
	    },
		methods: {
			CreateMarking : function(formName){	
				this.loading_btn = true
				this.AddDatadialogVisible = false;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.post('/api/setting-marking', this.markingForm)
							.then((response) => {
			                    this.loading_btn = false
								this.$message({
									showClose: true,
									message: 'Success',
									type: 'success',
									duration: 5000
								});
								this.ClearMarkingForm();
								this.UpdateTableData();
							})
							.catch((error) => {
			                    this.loading_btn = false
								console.log(error);
								this.$message({
									showClose: true,
									message: 'Update failed, please contact support',
									type: 'error',
									duration: 10000
								});
								this.ClearMarkingForm();
								this.UpdateTableData();
							});
					}
					else{
						this.$message({
							showClose: true,
							message: 'Please fillup form',
							type: 'error',
							duration: 10000
						});
					}
				});				
			},
			ClearMarkingForm : function(){
				this.markingForm.marking = '';
				this.markingForm.email = '';
			},
			UpdateTableData : function(){
				axios.get('/api/setting-marking', this.markingForm)
					.then((response) => {
						this.tableData = response.data;
					})
					.catch((error) => {
						console.log(error);
						this.$message({
							showClose: true,
							message: 'Fetch data fail',
							type: 'error',
							duration: 10000
						});
					})
			},
			DeleteMarking : function(marking_id){
				this.DeleteAdddialogVisible = true;
				console.log(marking_id);
				axios.delete('/api/setting-marking/' + marking_id)
					.then((response) => {
						console.log('123fuck');
						this.UpdateTableData();
					})
					.catch((error) => {
						console.log(error);
						this.$message({
							showClose: true,
							message: 'Delete data fail',
							type: 'error',
							duration: 10000
						});
					});
			},
			EditMarking : function(){
				this.EditDatadialogVisible = false;
				this.DoneUpdateDatadialogVisible = true;
				axios.put('/api/setting-marking/' + this.currentEdit, this.markingForm)
					.then((response) => {
						this.UpdateTableData();
					})
					.catch((error) => {
						console.log(error);
						this.$message({
							showClose: true,
							message: 'Update Fail',
							type: 'error',
							duration: 10000
						});
					});
			},
			PopOutAddMarking : function(){
				this.AddDatadialogVisible = true;
				this.ClearMarkingForm();
			},
			PopOutEditMarking : function(tableDataRow){
				this.EditDatadialogVisible = true;
				this.FillupMarkingForm(tableDataRow);
				this.currentEdit = this.tableData[tableDataRow].id;
			},
			FillupMarkingForm : function(tableDataRow){
				this.markingForm.marking = this.tableData[tableDataRow].marking;
				this.markingForm.email = this.tableData[tableDataRow].email;
			}
		},	
	}
</script>
<style type="text/css">
	.error-message{
		position: absolute;
		left: 0;
	}
</style>