55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { RippleModule } from 'primeng/ripple';
|
|
import { TableModule } from 'primeng/table';
|
|
import { ButtonModule } from 'primeng/button';
|
|
import { CommonModule } from '@angular/common';
|
|
import { Product, ProductService } from '@/src/service/product.service';
|
|
|
|
|
|
@Component({
|
|
standalone:true,
|
|
selector: 'app-recent-sales-widget',
|
|
imports: [
|
|
CommonModule,
|
|
TableModule,
|
|
ButtonModule,
|
|
RippleModule,
|
|
],
|
|
template: `<div class="card !mb-8">
|
|
<div class="font-semibold text-xl mb-4">Recent Sales</div>
|
|
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
|
|
<ng-template pTemplate="header">
|
|
<tr>
|
|
<th>Image</th>
|
|
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
|
|
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
|
<th>View</th>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template pTemplate="body" let-product>
|
|
<tr>
|
|
<td style="width: 15%; min-width: 5rem;">
|
|
<img src="https://primefaces.org/cdn/primevue/images/product/{{product.image}}" class="shadow-lg" alt="{{product.name}}" width="50">
|
|
</td>
|
|
<td style="width: 35%; min-width: 7rem;">{{product.name}}</td>
|
|
<td style="width: 35%; min-width: 8rem;">{{product.price | currency:'USD'}}</td>
|
|
<td style="width: 15%;">
|
|
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
</div>`,
|
|
providers: [ProductService],
|
|
})
|
|
export class RecentSalesWidget {
|
|
products!: Product[];
|
|
|
|
|
|
constructor(private productService: ProductService) {}
|
|
|
|
ngOnInit() {
|
|
this.productService.getProductsSmall().then(data => this.products = data);
|
|
}
|
|
}
|