Add pages
This commit is contained in:
Çetin
376
src/views/pages/crud.ts
Normal file
376
src/views/pages/crud.ts
Normal file
@@ -0,0 +1,376 @@
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import { MessageService } from 'primeng/api';
|
||||
import {Table, TableModule} from 'primeng/table';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FileUploadModule} from 'primeng/fileupload';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {ButtonModule} from 'primeng/button';
|
||||
import {RippleModule} from 'primeng/ripple';
|
||||
import {ToastModule} from 'primeng/toast';
|
||||
import {ToolbarModule} from 'primeng/toolbar';
|
||||
import {RatingModule} from 'primeng/rating';
|
||||
import {InputTextModule} from 'primeng/inputtext';
|
||||
import {TextareaModule} from 'primeng/textarea';
|
||||
import {SelectModule} from 'primeng/select';
|
||||
import {RadioButtonModule} from 'primeng/radiobutton';
|
||||
import {InputNumberModule} from 'primeng/inputnumber';
|
||||
import {DialogModule} from 'primeng/dialog';
|
||||
import {Product} from '../../app/demo/api/product';
|
||||
import {ProductService} from '../../app/demo/service/product.service';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
TableModule,
|
||||
FileUploadModule,
|
||||
FormsModule,
|
||||
ButtonModule,
|
||||
RippleModule,
|
||||
ToastModule,
|
||||
ToolbarModule,
|
||||
RatingModule,
|
||||
InputTextModule,
|
||||
TextareaModule,
|
||||
SelectModule,
|
||||
RadioButtonModule,
|
||||
InputNumberModule,
|
||||
DialogModule
|
||||
],
|
||||
template: `<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card px-6 py-6">
|
||||
<p-toast></p-toast>
|
||||
<p-toolbar styleClass="mb-4">
|
||||
<ng-template #left>
|
||||
<div class="my-2">
|
||||
<button pButton pRipple severity="success" class="mr-2" (click)="openNew()">
|
||||
<i pButtonIcon class="pi plus mr-2"></i>
|
||||
<span pButtonLabel>New</span>
|
||||
</button>
|
||||
<button pButton pRipple severity="danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length">
|
||||
<i pButtonIcon class="pi pi-trash mr-2"></i>
|
||||
<span pButtonLabel>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #right>
|
||||
<p-fileupload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileupload>
|
||||
<button pButton pRipple severity="help" (click)="dt.exportCSV()">
|
||||
<i pButtonIcon class="pi upload"></i>
|
||||
<span pButtonLabel>Export</span>
|
||||
</button>
|
||||
</ng-template>
|
||||
</p-toolbar>
|
||||
|
||||
<p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" selectionMode="multiple" [rowHover]="true" dataKey="id">
|
||||
<ng-template #caption>
|
||||
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
<span class="block mt-2 md:mt-0 p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Search..." class="w-full sm:w-auto"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th style="width: 3rem">
|
||||
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
|
||||
</th>
|
||||
<th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
|
||||
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
|
||||
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
|
||||
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td>
|
||||
<p-tableCheckbox [value]="product"></p-tableCheckbox>
|
||||
</td>
|
||||
<td style="width:14%; min-width:10rem;"><span class="p-column-title">Code</span>
|
||||
{{product.code || product.id}}
|
||||
</td>
|
||||
<td style="width:14%; min-width:10rem;">
|
||||
<span class="p-column-title">Name</span>
|
||||
{{product.name}}
|
||||
</td>
|
||||
<td style="width:14%; min-width:10rem;"><span class="p-column-title">Image</span>
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" />
|
||||
</td>
|
||||
<td style="width:14%; min-width:8rem;">
|
||||
<span class="p-column-title">Price</span>
|
||||
{{product.price | currency:'USD'}}
|
||||
</td>
|
||||
<td style="width:14%; min-width:10rem;">
|
||||
<span class="p-column-title">Category</span>
|
||||
{{product.category}}
|
||||
</td>
|
||||
<td style="width:14%; min-width: 10rem;"><span class="p-column-title">Reviews</span>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true"></p-rating>
|
||||
</td>
|
||||
<td style="width:14%; min-width: 10rem;"><span class="p-column-title">Status</span>
|
||||
<span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex">
|
||||
<button pButton pRipple severity="success" [rounded]="true" class="mr-2" (click)="editProduct(product)">
|
||||
<i pButtonIcon class="pi pi-pencil"></i>
|
||||
</button>
|
||||
<button pButton pRipple severity="warn" [rounded]="true" (click)="deleteProduct(product)">
|
||||
<i pButtonIcon class="pi pi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
|
||||
<p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" class="p-fluid">
|
||||
<ng-template #content>
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" *ngIf="product.image">
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus [ngClass]="{'ng-invalid ng-dirty' : submitted && !product.name}"/>
|
||||
<small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" pTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="status">Inventory Status</label>
|
||||
<p-select [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" optionValue="label" [options]="statuses" placeholder="Select">
|
||||
<ng-template #selectedItem>
|
||||
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.toString().toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</ng-template>
|
||||
<ng-template let-option #item>
|
||||
<span [class]="'product-badge status-' + option.value">{{option.label}}</span>
|
||||
</ng-template>
|
||||
</p-select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="formgrid grid">
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radiobutton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radiobutton>
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radiobutton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radiobutton>
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radiobutton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radiobutton>
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radiobutton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radiobutton>
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<label for="price">Price</label>
|
||||
<p-inputnumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
|
||||
</div>
|
||||
<div class="field col">
|
||||
<label for="quantity">Quantity</label>
|
||||
<p-inputnumber id="quantity" [(ngModel)]="product.quantity"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #footer>
|
||||
<button pButton pRipple [text]="true" (click)="hideDialog()">
|
||||
<i pButtonIcon class="pi times mr-2"></i>
|
||||
<span pButtonLabel>Cancel</span>
|
||||
</button>
|
||||
<button pButton pRipple [text]="true" (click)="saveProduct()">
|
||||
<i pButtonIcon class="pi pi-check mr-2"></i>
|
||||
<span pButtonLabel>Save</span>
|
||||
</button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
|
||||
<p-dialog [(visible)]="deleteProductDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
|
||||
<span *ngIf="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
|
||||
</div>
|
||||
<ng-template #footer>
|
||||
<button pButton pRipple [text]="true" (click)="deleteProductDialog = false">
|
||||
<i pButtonIcon class="pi pi-times mr-2"></i>
|
||||
<span pButtonLabel>No</span>
|
||||
</button>
|
||||
<button pButton pRipple [text]="true" (click)="confirmDelete()">
|
||||
<i pButtonIcon class="pi pi-check mr-2"></i>
|
||||
<span pButtonLabel>Yes</span>
|
||||
</button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
|
||||
<p-dialog [(visible)]="deleteProductsDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
|
||||
<span>Are you sure you want to delete selected products?</span>
|
||||
</div>
|
||||
<ng-template #footer>
|
||||
<button pButton pRipple [text]="true" (click)="deleteProductsDialog = false">
|
||||
<i pButtonIcon class="pi pi-times mr-2"></i>
|
||||
<span pButtonLabel>No</span>
|
||||
</button>
|
||||
<button pButton pRipple [text]="true" (click)="confirmDeleteSelected()">
|
||||
<i pButtonIcon class="pi pi-check mr-2"></i>
|
||||
<span pButtonLabel>Yes</span>
|
||||
</button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class Crud implements OnInit {
|
||||
|
||||
productDialog: boolean = false;
|
||||
|
||||
deleteProductDialog: boolean = false;
|
||||
|
||||
deleteProductsDialog: boolean = false;
|
||||
|
||||
products: Product[] = [];
|
||||
|
||||
product: Product = {};
|
||||
|
||||
selectedProducts: Product[] = [];
|
||||
|
||||
submitted: boolean = false;
|
||||
|
||||
cols: any[] = [];
|
||||
|
||||
statuses: any[] = [];
|
||||
|
||||
rowsPerPageOptions = [5, 10, 20];
|
||||
|
||||
private messageService = inject(MessageService);
|
||||
|
||||
private productService = inject(ProductService);
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
|
||||
this.cols = [
|
||||
{ field: 'product', header: 'Product' },
|
||||
{ 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 = [];
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
onGlobalFilter(table: Table, event: Event) {
|
||||
table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user