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

update table, menu, topbar, dialog, toast components and css

Browse Source
This commit is contained in:
Çetin
2021-12-14 16:31:40 +03:00
parent 2b91b042d5
commit 9c710d6fa3
26 changed files with 302 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/pages/app.crud.component.html
View File

@@ -77,40 +77,52 @@
<p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" styleClass="p-fluid">
<ng-template pTemplate="content">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" class="product-image" *ngIf="product.image">
<div class="p-field">
<div class="field">
<label for="name">Name</label>
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
<small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
</div>
<div class="p-field">
<div class="field">
<label for="description">Description</label>
<textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
</div>
<div class="p-field">
<label class="mb-3">Category</label>
<div class="p-formgrid grid">
<div class="p-field-radiobutton col-6">
<div class="field">
<label for="status">Inventory Status</label>
<p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="selectedStatus" placeholder="Select a Status" >
<ng-template pTemplate="selectedItem">
<span *ngIf="selectedStatus" [class]="'product-badge status-' + selectedStatus.value.toLowerCase()">{{selectedStatus.label}}</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>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="p-field-radiobutton col-6">
<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="p-field-radiobutton col-6">
<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="p-field-radiobutton col-6">
<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="p-formgrid grid">
<div class="p-field col">
<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>

10
src/app/pages/app.crud.component.ts
View File

@@ -40,6 +40,10 @@ export class AppCrudComponent implements OnInit {
cols: any[];
statuses: any[];
selectedStatus:any;
rowsPerPageOptions = [5, 10, 20];
constructor(private productService: ProductService, private messageService: MessageService,
@@ -55,6 +59,12 @@ export class AppCrudComponent implements OnInit {
{field: 'rating', header: 'Reviews'},
{field: 'inventoryStatus', header: 'Status'}
];
this.statuses = [
{label: 'INSTOCK', value: 'instock'},
{label: 'LOWSTOCK', value: 'lowstock'},
{label: 'OUTOFSTOCK', value: 'outofstock'}
];
}
openNew() {