From b602d165a9ccfe2ffa229e06bdef495daf598a8d Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Wed, 1 Jul 2020 13:59:57 +0300 Subject: [PATCH] Add validation --- src/views/datatable/DataTableCrudDemo.vue | 286 +++++++++++----------- 1 file changed, 145 insertions(+), 141 deletions(-) diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue index 4b19dba3b..47d324299 100755 --- a/src/views/datatable/DataTableCrudDemo.vue +++ b/src/views/datatable/DataTableCrudDemo.vue @@ -68,12 +68,12 @@ - +
- - Name is required. + + Name is required.
@@ -118,18 +118,18 @@
- +

Are you sure you want to delete {{product.name}}?

 - +

Are you sure you want to delete selected products?

 @@ -199,12 +199,12 @@ </DataTable> </div> -<Dialog :visible.sync="dialogVisible" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"> +<Dialog :visible.sync="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"> <img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" /> <div class="p-field"> <label for="name">Name</label> - <InputText id="name" v-model.trim="product.name" required="true" autofocus /> - <small id="name-help" class="p-invalid" v-if="submitted && !product.name">Name is required.</small> + <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" /> + <small class="p-invalid" v-if="submitted && !product.name">Name is required.</small> </div> <div class="p-field"> <label for="description">Description</label> @@ -249,18 +249,18 @@ </template> </Dialog> -<Dialog :visible.sync="deleteProductDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true"> +<Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <p v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</p> <template #footer> - <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialogVisible = false"/> + <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /> </template> </Dialog> -<Dialog :visible.sync="deleteSelectedProductsDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true"> +<Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <p v-if="product">Are you sure you want to delete selected products?</p> <template #footer> - <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteSelectedProductsDialogVisible = false"/> + <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /> </template> </Dialog> @@ -274,9 +274,9 @@ export default { data() { return { products: null, - dialogVisible: false, - deleteProductDialogVisible: false, - deleteSelectedProductsDialogVisible: false, + productDialog: false, + deleteProductDialog: false, + deleteProductsDialog: false, product: {}, selectedProducts: null, filters: {}, @@ -296,146 +296,42 @@ export default { }, openNew() { this.product = {}; - this.dialogVisible = true; + this.submitted = false; + this.productDialog = true; }, hideDialog() { - this.dialogVisible = false; + this.productDialog = false; this.submitted = false; }, saveProduct() { this.submitted = true; - if (this.product.id) { - this.$set(this.products, this.findIndexById(this.product.id), this.product); - this.$toast.add({severity:'success', summary: 'Product Updated', life: 3000}); - } - else { - this.product.id = this.createId(); - this.products.push(this.product); - this.$toast.add({severity:'success', summary: 'Product Created', life: 3000}); - } - - this.dialogVisible = false; - this.product = {}; - - }, - editProduct(product) { - this.product = {...product}; - this.dialogVisible = true; - }, - confirmDeleteProduct(product) { - this.product = product; - this.deleteProductDialogVisible = true; - }, - deleteProduct() { - this.products = this.products.filter(val => val.id !== this.product.id); - this.deleteProductDialogVisible = false; - this.product = {}; - this.$toast.add({severity:'success', summary: 'Product Deleted', life: 3000}); - }, - findIndexById(id) { - let index = -1; - for (let i = 0; i < this.products.length; i++) { - if (this.products[i].id === id) { - index = i; - break; + if (this.product.name.trim()) { + if (this.product.id) { + this.$set(this.products, this.findIndexById(this.product.id), this.product); + this.$toast.add({severity:'success', summary: 'Product Updated', life: 3000}); } + else { + this.product.id = this.createId(); + this.products.push(this.product); + this.$toast.add({severity:'success', summary: 'Product Created', life: 3000}); + } + + this.productDialog = false; + this.product = {}; } - - return index; - }, - createId() { - let id = ''; - var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - for ( var i = 0; i < 5; i++ ) { - id += chars.charAt(Math.floor(Math.random() * chars.length)); - } - return id; - }, - exportCSV() { - this.$refs.dt.exportCSV(); - }, - confirmDeleteSelected() { - this.deleteSelectedProductsDialogVisible = true; - }, - deleteSelectedProducts() { - this.products = this.products.filter(val => !this.selectedProducts.includes(val)); - this.deleteSelectedProductsDialogVisible = false; - this.selectedProducts = null; - this.$toast.add({severity:'success', summary: 'Completed', life: 3000}); - } - } -} - - - - - - - -