add template

src/app/pages/app.crud.component.ts

@@ -0,0 +1,142 @@
+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',
+    styleUrls: ['../demo/view/tabledemo.scss'],
+    styles: [`
+        :host ::ng-deep .p-dialog .product-image {
+            width: 150px;
+            margin: 0 auto 2rem auto;
+            display: block;
+        }
+
+        @media screen and (max-width: 960px) {
+            :host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:last-child {
+                text-align: center;
+            }
+
+            :host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:nth-child(6) {
+                display: flex;
+            }
+        }
+
+    `],
+    providers: [MessageService, ConfirmationService]
+})
+export class AppCrudComponent implements OnInit {
+
+    productDialog: boolean;
+
+    products: Product[];
+
+    product: Product;
+
+    selectedProducts: Product[];
+
+    submitted: boolean;
+
+    cols: 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'}
+        ];
+    }
+
+    openNew() {
+        this.product = {};
+        this.submitted = false;
+        this.productDialog = true;
+    }
+
+    deleteSelectedProducts() {
+        this.confirmationService.confirm({
+            message: 'Are you sure you want to delete the selected products?',
+            header: 'Confirm',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.products = this.products.filter(val => !this.selectedProducts.includes(val));
+                this.selectedProducts = null;
+                this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
+            }
+        });
+    }
+
+    editProduct(product: Product) {
+        this.product = {...product};
+        this.productDialog = true;
+    }
+
+    deleteProduct(product: Product) {
+        this.confirmationService.confirm({
+            message: 'Are you sure you want to delete ' + product.name + '?',
+            header: 'Confirm',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.products = this.products.filter(val => val.id !== product.id);
+                this.product = {};
+                this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
+            }
+        });
+    }
+
+    hideDialog() {
+        this.productDialog = false;
+        this.submitted = false;
+    }
+
+    saveProduct() {
+        this.submitted = true;
+
+        if (this.product.name.trim()) {
+            if (this.product.id) {
+                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.image = 'product-placeholder.svg';
+                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;
+    }
+}