carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to new structure

Browse Source
This commit is contained in:
Çetin
2022-07-22 13:13:50 +03:00
parent 12bc4574d2
commit af7e863f4d
422 changed files with 5238 additions and 209563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/demo/components/pages/crud/crud-routing.module.ts Normal file
View File

@@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CrudComponent } from './crud.component';
@NgModule({
imports: [RouterModule.forChild([
{ path: '', component: CrudComponent }
])],
exports: [RouterModule]
})
export class CrudRoutingModule { }

171
src/app/demo/components/pages/crud/crud.component.html Normal file
View File

@@ -0,0 +1,171 @@
<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 pTemplate="left">
<div class="my-2">
<button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2" (click)="openNew()"></button>
<button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
</div>
</ng-template>
<ng-template pTemplate="right">
<p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileUpload>
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help" (click)="dt.exportCSV()"></button>
</ng-template>
</p-toolbar>
<p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [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 pTemplate="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 pTemplate="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 pTemplate="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" [cancel]="false"></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 icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button>
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(product)"></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 pTemplate="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" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
</div>
<div class="field">
<label for="status">Inventory Status</label>
<p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="product.inventoryStatus" placeholder="Select a Status">
<ng-template pTemplate="selectedItem">
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</ng-template>
<ng-template let-status pTemplate="status">
<span [class]="'product-badge status-' + status.value.toLowerCase()">{{status.label}}</span>
</ng-template>
</p-dropdown>
</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 pTemplate="footer">
<button pButton pRipple label="Cancel" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"></button>
<button pButton pRipple label="Save" icon="pi pi-check" class="p-button-text" (click)="saveProduct()"></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 pTemplate="footer">
<button pButton pRipple icon="pi pi-times" class="p-button-text" label="No" (click)="deleteProductDialog = false"></button>
<button pButton pRipple icon="pi pi-check" class="p-button-text" label="Yes" (click)="confirmDelete()"></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 pTemplate="footer">
<button pButton pRipple icon="pi pi-times" class="p-button-text" label="No" (click)="deleteProductsDialog = false"></button>
<button pButton pRipple icon="pi pi-check" class="p-button-text" label="Yes" (click)="confirmDeleteSelected()"></button>
</ng-template>
</p-dialog>
</div>
</div>

141
src/app/demo/components/pages/crud/crud.component.ts Normal file
View File

@@ -0,0 +1,141 @@
import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/demo/api/product';
import { MessageService } from 'primeng/api';
import { Table } from 'primeng/table';
import { ProductService } from 'src/app/demo/service/product.service';
@Component({
templateUrl: './crud.component.html',
providers: [MessageService]
})
export class CrudComponent 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];
constructor(private productService: ProductService, private messageService: MessageService) { }
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');
}
}

41
src/app/demo/components/pages/crud/crud.module.ts Normal file
View File

@@ -0,0 +1,41 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CrudRoutingModule } from './crud-routing.module';
import { CrudComponent } from './crud.component';
import { TableModule } from 'primeng/table';
import { FileUploadModule } from 'primeng/fileupload';
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 { InputTextareaModule } from 'primeng/inputtextarea';
import { DropdownModule } from 'primeng/dropdown';
import { RadioButtonModule } from 'primeng/radiobutton';
import { InputNumberModule } from 'primeng/inputnumber';
import { DialogModule } from 'primeng/dialog';
@NgModule({
imports: [
CommonModule,
CrudRoutingModule,
TableModule,
FileUploadModule,
FormsModule,
ButtonModule,
RippleModule,
ToastModule,
ToolbarModule,
RatingModule,
InputTextModule,
InputTextareaModule,
DropdownModule,
RadioButtonModule,
InputNumberModule,
DialogModule
],
declarations: [CrudComponent]
})
export class CrudModule { }