import {Component, OnInit} from '@angular/core'; import {Product} from '../demo/domain/product'; import {ProductService} from '../demo/service/productservice'; import {ConfirmationService, MessageService} from 'primeng/api'; @Component({ templateUrl: './app.crud.component.html', providers: [MessageService, ConfirmationService], styleUrls: ['../../assets/demo/badges.scss'] }) export class AppCrudComponent implements OnInit { productDialog: boolean; deleteProductDialog: boolean = false; deleteProductsDialog: boolean = false; products: Product[]; product: Product; selectedProducts: Product[]; submitted: boolean; cols: any[]; statuses: any[]; rowsPerPageOptions = [5, 10, 20]; constructor(private productService: ProductService, private messageService: MessageService, private confirmationService: ConfirmationService) {} ngOnInit() { this.productService.getProducts().then(data => this.products = data); this.cols = [ {field: 'name', header: 'Name'}, {field: 'price', header: 'Price'}, {field: 'category', header: 'Category'}, {field: 'rating', header: 'Reviews'}, {field: 'inventoryStatus', header: 'Status'} ]; this.statuses = [ {label: 'INSTOCK', value: 'instock'}, {label: 'LOWSTOCK', value: 'lowstock'}, {label: 'OUTOFSTOCK', value: 'outofstock'} ]; } openNew() { this.product = {}; this.submitted = false; this.productDialog = true; } deleteSelectedProducts() { this.deleteProductsDialog = true; } editProduct(product: Product) { this.product = {...product}; this.productDialog = true; } deleteProduct(product: Product) { this.deleteProductDialog = true; this.product = {...product}; } confirmDeleteSelected(){ this.deleteProductsDialog = false; this.products = this.products.filter(val => !this.selectedProducts.includes(val)); this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000}); this.selectedProducts = null; } confirmDelete(){ this.deleteProductDialog = false; this.products = this.products.filter(val => val.id !== this.product.id); this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000}); this.product = {}; } hideDialog() { this.productDialog = false; this.submitted = false; } saveProduct() { this.submitted = true; if (this.product.name.trim()) { if (this.product.id) { // @ts-ignore this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus; this.products[this.findIndexById(this.product.id)] = this.product; this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000}); } else { this.product.id = this.createId(); this.product.code = this.createId(); this.product.image = 'product-placeholder.svg'; // @ts-ignore this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK'; this.products.push(this.product); this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000}); } this.products = [...this.products]; this.productDialog = false; this.product = {}; } } findIndexById(id: string): number { let index = -1; for (let i = 0; i < this.products.length; i++) { if (this.products[i].id === id) { index = i; break; } } return index; } createId(): string { let id = ''; const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; for (let i = 0; i < 5; i++) { id += chars.charAt(Math.floor(Math.random() * chars.length)); } return id; } }