zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

delete confirmation screen dynamic and pretty for success and error

This commit is contained in:
Chad Derya 2019-09-10 09:56:57 +01:00
parent 11dca03aa8
commit 6ae0a40529
1 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/PopUps/Delete/index.vue
View File

@ -4,7 +4,7 @@
Delete Delete
</el-button> </el-button>
<el-dialog :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
<div v-if="viewState==='initialState'"> <div v-if="viewState==='input'">
<div> <div>
<h3> <h3>
Are you sure you want to delete this {{ type }} ? Are you sure you want to delete this {{ type }} ?
@ -25,15 +25,9 @@
Confirm Confirm
</el-button> </el-button>
</div> </div>
<div v-else-if="viewState==='Success'"> <div v-else-if="viewState==='confirmation'">
<h1>SUCCESS you can now close this popup</h1> <i :class="confirmation.icon" :style="confirmation.iconStyle" />
<h1>{{ item._id }}</h1> <p>{{ confirmation.text }}</p>
<el-button @click="dialogVisible = false">
Close
</el-button>
</div>
<div v-else-if="viewState==='Error'">
<h1>ERROR please try again, if the error persist contact Chadmin!</h1>
<el-button @click="dialogVisible = false"> <el-button @click="dialogVisible = false">
Close Close
</el-button> </el-button>
@ -68,9 +62,15 @@ export default {
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false,
viewState: 'initialState',
isNameCorrect: true, isNameCorrect: true,
input: '' input: '',
viewState: 'input',
Error: false,
confirmation: {
text: 'Loading',
icon: 'el-icon-loading',
iconStyle: 'font-size: 75px;'
}
} }
}, },
watch: { watch: {
@ -84,9 +84,15 @@ export default {
}, },
methods: { methods: {
openDeletePopup() { openDeletePopup() {
// do the object assing thing to default like edit/create product
this.dialogVisible = true this.dialogVisible = true
this.viewState = 'initialState' this.viewState = 'input'
this.input = '' this.input = ''
this.confirmation = {
text: 'Loading',
icon: 'el-icon-loading',
iconStyle: 'font-size: 75px;'
}
}, },
checkAllSuccess() { checkAllSuccess() {
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess) return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
@ -98,16 +104,24 @@ export default {
} else { } else {
console.log(deleteProduct(this.item._id)) console.log(deleteProduct(this.item._id))
} }
console.log(deleteProduct(this.item._id))
// delete${this.type}(this.item._id)) // delete${this.type}(this.item._id))
// .then((r) => { // .then((r) => {
// console.log(r) // console.log(r)
// }) // })
if (this.input) { this.viewState = 'confirmation'
this.viewState = 'Success' // if (response && response.success){
} else if (!this.input) { this.confirmation = {
this.viewState = 'Error' text: `Succesfully deleted ${this.item.name} form ${this.type}s list`,
icon: 'el-icon-circle-check',
iconStyle: 'font-size: 75px; color: green;'
} }
// }else if (!response || !response.success){
// this.confirmation = {
// text: `Error deleting ${this.item.name} form ${this.type}s list. /n Please refresh your page and try again. If the Error persists, please contact Chadmin`,
// icon: 'el-icon-circle-close',
// iconStyle: 'font-size: 75px; color: red;'
// }
// }
} }
} }
} }
@ -117,4 +131,7 @@ export default {
.inputBox { .inputBox {
margin-bottom: 20px; margin-bottom: 20px;
} }
.icon {
}
</style> </style>