From 51aeb7629fe03ea13e4c5c6189e2ac9d46dcd44a Mon Sep 17 00:00:00 2001
From: Chad Derya <scd@onlinefuels.com>
Date: Mon, 9 Sep 2019 19:03:32 +0100
Subject: [PATCH] made delete component reusable, added error and success place
holder
---
src/views/products/components/EditorImage.vue | 87 ++++++++++++-------
src/views/products/list.vue | 6 +-
2 files changed, 59 insertions(+), 34 deletions(-)
diff --git a/src/views/products/components/EditorImage.vue b/src/views/products/components/EditorImage.vue
index 8b92bcb6..3b1d618c 100644
--- a/src/views/products/components/EditorImage.vue
+++ b/src/views/products/components/EditorImage.vue
@@ -1,28 +1,36 @@
<template>
<div>
- <el-button icon="el-icon-delete" size="mini" type="danger" @click=" dialogVisible=true">
+ <el-button icon="el-icon-delete" size="mini" type="danger" @click="openDeletePopup">
Delete
</el-button>
<el-dialog :visible.sync="dialogVisible">
- <div>
- <h3>
- Are you sure you want to delete this {{ type }} ?
- </h3>
- <p>To delete this {{ type }}, type in <b>{{ name }}</b> and click delete</p>
+ <div v-if="viewState==='initialState'">
+ <div>
+ <h3>
+ Are you sure you want to delete this {{ type }} ?
+ </h3>
+ <p>To delete this {{ type }}, type in <b>{{ item.name }}</b> and click delete</p>
+ </div>
+ <el-row :gutter="20">
+ <el-col :span="12" :offset="6">
+ <div class="inputBox">
+ <el-input v-model="input" placeholder="Please input" />
+ </div>
+ </el-col>
+ </el-row>
+ <el-button @click="dialogVisible = false">
+ Cancel
+ </el-button>
+ <el-button type="danger" :disabled="isNameCorrect" @click="handleSubmit">
+ Confirm
+ </el-button>
+ </div>
+ <div v-else-if="viewState==='Success'">
+ <h1>SUCCESS you can now close this popup</h1>
+ </div>
+ <div v-else-if="viewState==='Error'">
+ <h1>ERROR please try again, if the error persist contact Chadmin!</h1>
</div>
- <el-row :gutter="20">
- <el-col :span="12" :offset="6">
- <div class="inputBox">
- <el-input v-model="input" placeholder="Please input" />
- </div>
- </el-col>
- </el-row>
- <el-button @click="dialogVisible = false">
- Cancel
- </el-button>
- <el-button type="danger" :disabled="isNameCorrect" @click="handleSubmit">
- Confirm
- </el-button>
</el-dialog>
</div>
</template>
@@ -32,34 +40,49 @@
export default {
props: {
- color: {
+ item: {
+ type: Object,
+ default: function() {
+ return {
+ name: 'BROKEN!-KEROSENOS-BROKEN!',
+ _id: 'THIS-ID-IS-BROKEN!'
+ }
+ }
+ },
+ type: {
type: String,
- default: '#1890ff'
+ default: 'chad'
}
},
data() {
return {
dialogVisible: false,
- isNameCorrect: true,
input: '',
- type: 'product',
- name: 'Kerosenos'
+ isNameCorrect: false,
+ viewState: 'initialState'
}
},
methods: {
+ openDeletePopup() {
+ this.dialogVisible = true
+ this.viewState = 'initialState'
+ },
checkAllSuccess() {
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
},
handleSubmit() {
- const arr = Object.keys(this.listObj).map(v => this.listObj[v])
- if (!this.checkAllSuccess()) {
- this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
- return
+ console.log(this.input)
+ console.log(this.item._id)
+ if (this.input) {
+ this.viewState = 'Success'
+ } else if (!this.input) {
+ this.viewState = 'Error'
}
- this.$emit('successCBK', arr)
- this.listObj = {}
- this.fileList = []
- this.dialogVisible = false
+ // const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+ // if (!this.checkAllSuccess()) {
+ // this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
+ // return
+ // }
},
handleSuccess(response, file) {
const uid = file.uid
diff --git a/src/views/products/list.vue b/src/views/products/list.vue
index 95b1005c..2ac6c9e4 100644
--- a/src/views/products/list.vue
+++ b/src/views/products/list.vue
@@ -41,8 +41,10 @@
</el-button>
</router-link>
- <editorImage />
-
+ <editorImage
+ :item="scope.row"
+ :type="'Product'"
+ />
</template>
</el-table-column>
</el-table>