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

Remove pTemplates, update selectors

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-07 14:56:33 +03:00
parent 45f81ee112
commit 7b445afc53
4 changed files with 87 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/pages/crud/crud.ts
View File

@@ -206,7 +206,7 @@ interface ExportColumn {
</ng-template> </ng-template>
</p-dialog> </p-dialog>
<p-confirmDialog [style]="{ width: '450px' }" /> <p-confirmdialog [style]="{ width: '450px' }" />
`, `,
providers: [MessageService, ProductService, ConfirmationService], providers: [MessageService, ProductService, ConfirmationService],
}) })

4
src/app/pages/dashboard/components/recentsaleswidget.ts
View File

@@ -17,7 +17,7 @@ import { Product, ProductService } from '../../service/product.service';
template: `<div class="card !mb-8"> template: `<div class="card !mb-8">
<div class="font-semibold text-xl mb-4">Recent Sales</div> <div class="font-semibold text-xl mb-4">Recent Sales</div>
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll"> <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
<ng-template pTemplate="header"> <ng-template #header>
<tr> <tr>
<th>Image</th> <th>Image</th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th> <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
@@ -25,7 +25,7 @@ import { Product, ProductService } from '../../service/product.service';
<th>View</th> <th>View</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-product> <ng-template #body let-product>
<tr> <tr>
<td style="width: 15%; min-width: 5rem;"> <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"> <img src="https://primefaces.org/cdn/primevue/images/product/{{product.image}}" class="shadow-lg" alt="{{product.name}}" width="50">

157
src/app/pages/uikit/tabledemo.ts
View File

@@ -26,15 +26,39 @@ interface expandedRows {
@Component({ @Component({
selector: 'app-table-demo', selector: 'app-table-demo',
standalone: true, standalone: true,
imports: [TableModule, MultiSelectModule,SelectModule, InputIconModule, TagModule, InputTextModule, SliderModule, ProgressBarModule, ToggleButtonModule, ToastModule, CommonModule, FormsModule, ButtonModule, RatingModule, RippleModule, IconFieldModule], imports: [
template: ` TableModule,
<div class="card"> MultiSelectModule,
SelectModule,
InputIconModule,
TagModule,
InputTextModule,
SliderModule,
ProgressBarModule,
ToggleButtonModule,
ToastModule,
CommonModule,
FormsModule,
ButtonModule,
RatingModule,
RippleModule,
IconFieldModule
],
template: ` <div class="card">
<div class="font-semibold text-xl mb-4">Filtering</div> <div class="font-semibold text-xl mb-4">Filtering</div>
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true" <p-table
[showGridlines]="true" [paginator]="true" #dt1
[globalFilterFields]="['name','country.name','representative.name','status']" [value]="customers1"
responsiveLayout="scroll"> dataKey="id"
<ng-template pTemplate="caption"> [rows]="10"
[loading]="loading"
[rowHover]="true"
[showGridlines]="true"
[paginator]="true"
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
responsiveLayout="scroll"
>
<ng-template #caption>
<div class="flex justify-between items-center flex-column sm:flex-row"> <div class="flex justify-between items-center flex-column sm:flex-row">
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button> <button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
<p-iconfield iconPosition="left" class="ml-auto"> <p-iconfield iconPosition="left" class="ml-auto">
@@ -50,35 +74,29 @@ interface expandedRows {
<th style="min-width: 12rem"> <th style="min-width: 12rem">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
Name Name
<p-columnFilter type="text" field="name" display="menu" <p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter>
placeholder="Search by name"></p-columnFilter>
</div> </div>
</th> </th>
<th style="min-width: 12rem"> <th style="min-width: 12rem">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
Country Country
<p-columnFilter type="text" field="country.name" display="menu" <p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter>
placeholder="Search by country"></p-columnFilter>
</div> </div>
</th> </th>
<th style="min-width: 14rem"> <th style="min-width: 14rem">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
Agent Agent
<p-columnFilter field="representative" matchMode="in" display="menu" <p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
[showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template #header> <ng-template #header>
<div class="px-3 pt-3 pb-0"> <div class="px-3 pt-3 pb-0">
<span class="font-bold">Agent Picker</span> <span class="font-bold">Agent Picker</span>
</div> </div>
</ng-template> </ng-template>
<ng-template #filter let-value let-filter="filterCallback"> <ng-template #filter let-value let-filter="filterCallback">
<p-multiselect [ngModel]="value" [options]="representatives" placeholder="Any" <p-multiselect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name" styleClass="w-full">
(onChange)="filter($event.value)" optionLabel="name" styleClass="w-full">
<ng-template let-option #item> <ng-template let-option #item>
<div> <div>
<img [alt]="option.label" <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="32" style="vertical-align: middle" />
src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{option.image}}" width="32"
style="vertical-align: middle" />
<span class="ml-2">{{ option.name }}</span> <span class="ml-2">{{ option.name }}</span>
</div> </div>
</ng-template> </ng-template>
@@ -90,15 +108,13 @@ interface expandedRows {
<th style="min-width: 10rem"> <th style="min-width: 10rem">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
Date Date
<p-columnFilter type="date" field="date" display="menu" <p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter>
placeholder="mm/dd/yyyy"></p-columnFilter>
</div> </div>
</th> </th>
<th style="min-width: 10rem"> <th style="min-width: 10rem">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
Balance Balance
<p-columnFilter type="numeric" field="balance" display="menu" <p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
currency="USD"></p-columnFilter>
</div> </div>
</th> </th>
<th style="min-width: 12rem"> <th style="min-width: 12rem">
@@ -106,12 +122,9 @@ interface expandedRows {
Status Status
<p-columnFilter field="status" matchMode="equals" display="menu"> <p-columnFilter field="status" matchMode="equals" display="menu">
<ng-template #filter let-value let-filter="filterCallback"> <ng-template #filter let-value let-filter="filterCallback">
<p-select [ngModel]="value" [options]="statuses" <p-select [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [style]="{ 'min-width': '12rem' }">
(onChange)="filter($event.value)" placeholder="Any"
[style]="{'min-width': '12rem'}">
<ng-template let-option #item> <ng-template let-option #item>
<span <span [class]="'customer-badge status-' + option.value">{{ option.label }}</span>
[class]="'customer-badge status-' + option.value">{{ option.label }}</span>
</ng-template> </ng-template>
</p-select> </p-select>
</ng-template> </ng-template>
@@ -121,12 +134,9 @@ interface expandedRows {
<th style="min-width: 12rem"> <th style="min-width: 12rem">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
Activity Activity
<p-columnFilter field="activity" matchMode="between" display="menu" <p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
[showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template #filter let-filter="filterCallback"> <ng-template #filter let-filter="filterCallback">
<p-slider [ngModel]="activityValues" [range]="true" <p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3" [style]="{ 'min-width': '12rem' }"></p-slider>
(onSlideEnd)="filter($event.values)" styleClass="m-3"
[style]="{'min-width': '12rem'}"></p-slider>
<div class="flex items-center justify-between px-2"> <div class="flex items-center justify-between px-2">
<span>{{ activityValues[0] }}</span> <span>{{ activityValues[0] }}</span>
<span>{{ activityValues[1] }}</span> <span>{{ activityValues[1] }}</span>
@@ -150,16 +160,13 @@ interface expandedRows {
</td> </td>
<td> <td>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30" />
[class]="'flag flag-' + customer.country.code" width="30">
<span>{{ customer.country.name }}</span> <span>{{ customer.country.name }}</span>
</div> </div>
</td> </td>
<td> <td>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<img [alt]="customer.representative.name" <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="image-text">{{ customer.representative.name }}</span> <span class="image-text">{{ customer.representative.name }}</span>
</div> </div>
</td> </td>
@@ -167,14 +174,13 @@ interface expandedRows {
{{ customer.date | date: 'MM/dd/yyyy' }} {{ customer.date | date: 'MM/dd/yyyy' }}
</td> </td>
<td> <td>
{{ customer.balance | currency:'USD':'symbol' }} {{ customer.balance | currency: 'USD' : 'symbol' }}
</td> </td>
<td> <td>
<p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" /> <p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" />
</td> </td>
<td> <td>
<p-progressbar [value]="customer.activity" [showValue]="false" <p-progressbar [value]="customer.activity" [showValue]="false" [style]="{ height: '0.5rem' }" />
[style]="{'height': '0.5rem'}" />
</td> </td>
<td class="text-center"> <td class="text-center">
<p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" /> <p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" />
@@ -234,28 +240,31 @@ interface expandedRows {
<div class="font-semibold text-xl mb-4">Row Expansion</div> <div class="font-semibold text-xl mb-4">Row Expansion</div>
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll"> <p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll">
<ng-template #caption> <ng-template #caption>
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" <button pButton icon="pi pi-fw {{ isExpanded ? 'pi-minus' : 'pi-plus' }}" label="{{ isExpanded ? 'Collapse All' : 'Expand All' }}" (click)="expandAll()"></button>
label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button> <div class="flex table-header"></div>
<div class="flex table-header">
</div>
</ng-template> </ng-template>
<ng-template #header> <ng-template #header>
<tr> <tr>
<th style="width: 3rem"></th> <th style="width: 3rem"></th>
<th pSortableColumn="name">Name <th pSortableColumn="name">
Name
<p-sortIcon field="name"></p-sortIcon> <p-sortIcon field="name"></p-sortIcon>
</th> </th>
<th>Image</th> <th>Image</th>
<th pSortableColumn="price">Price <th pSortableColumn="price">
Price
<p-sortIcon field="price"></p-sortIcon> <p-sortIcon field="price"></p-sortIcon>
</th> </th>
<th pSortableColumn="category">Category <th pSortableColumn="category">
Category
<p-sortIcon field="category"></p-sortIcon> <p-sortIcon field="category"></p-sortIcon>
</th> </th>
<th pSortableColumn="rating">Reviews <th pSortableColumn="rating">
Reviews
<p-sortIcon field="rating"></p-sortIcon> <p-sortIcon field="rating"></p-sortIcon>
</th> </th>
<th pSortableColumn="inventoryStatus">Status <th pSortableColumn="inventoryStatus">
Status
<p-sortIcon field="inventoryStatus"></p-sortIcon> <p-sortIcon field="inventoryStatus"></p-sortIcon>
</th> </th>
</tr> </tr>
@@ -263,14 +272,11 @@ interface expandedRows {
<ng-template #body let-product let-expanded="expanded"> <ng-template #body let-product let-expanded="expanded">
<tr> <tr>
<td> <td>
<button type="button" pButton pRipple [pRowToggler]="product" <button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td> </td>
<td style="min-width: 12rem;">{{ product.name }}</td> <td style="min-width: 12rem;">{{ product.name }}</td>
<td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="50" <td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="50" class="shadow-lg" /></td>
class="shadow-lg" /></td> <td style="min-width: 8rem;">{{ product.price | currency: 'USD' }}</td>
<td style="min-width: 8rem;">{{ product.price | currency:'USD' }}</td>
<td style="min-width: 10rem;">{{ product.category }}</td> <td style="min-width: 10rem;">{{ product.category }}</td>
<td style="min-width: 10rem;"> <td style="min-width: 10rem;">
<p-rating [ngModel]="product.rating" [readonly]="true"></p-rating> <p-rating [ngModel]="product.rating" [readonly]="true"></p-rating>
@@ -285,7 +291,7 @@ interface expandedRows {
<td colspan="7"> <td colspan="7">
<div class="p-3"> <div class="p-3">
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll"> <p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
<ng-template pTemplate="header"> <ng-template #header>
<tr> <tr>
<th pSortableColumn="id"> <th pSortableColumn="id">
Id Id
@@ -361,9 +367,7 @@ interface expandedRows {
</ng-template> </ng-template>
<ng-template #groupfooter let-customer> <ng-template #groupfooter let-customer>
<tr> <tr>
<td colspan="5" class="text-right font-bold pr-12"> <td colspan="5" class="text-right font-bold pr-12">Total Customers: {{ calculateCustomerTotal(customer.representative.name) }}</td>
Total Customers: {{calculateCustomerTotal(customer.representative.name)}}
</td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #body let-customer let-rowIndex="rowIndex"> <ng-template #body let-customer let-rowIndex="rowIndex">
@@ -397,11 +401,11 @@ interface expandedRows {
.p-datatable-scrollable .p-frozen-column { .p-datatable-scrollable .p-frozen-column {
font-weight: bold; font-weight: bold;
}`, }
providers: [ConfirmationService, MessageService, CustomerService, ProductService], `,
providers: [ConfirmationService, MessageService, CustomerService, ProductService]
}) })
export class TableDemo implements OnInit { export class TableDemo implements OnInit {
customers1: Customer[] = []; customers1: Customer[] = [];
customers2: Customer[] = []; customers2: Customer[] = [];
@@ -432,19 +436,22 @@ export class TableDemo implements OnInit {
@ViewChild('filter') filter!: ElementRef; @ViewChild('filter') filter!: ElementRef;
constructor(private customerService: CustomerService, private productService: ProductService) { } constructor(
private customerService: CustomerService,
private productService: ProductService
) {}
ngOnInit() { ngOnInit() {
this.customerService.getCustomersLarge().then(customers => { this.customerService.getCustomersLarge().then((customers) => {
this.customers1 = customers; this.customers1 = customers;
this.loading = false; this.loading = false;
// @ts-ignore // @ts-ignore
this.customers1.forEach(customer => customer.date = new Date(customer.date)); this.customers1.forEach((customer) => (customer.date = new Date(customer.date)));
}); });
this.customerService.getCustomersMedium().then(customers => this.customers2 = customers); this.customerService.getCustomersMedium().then((customers) => (this.customers2 = customers));
this.customerService.getCustomersLarge().then(customers => this.customers3 = customers); this.customerService.getCustomersLarge().then((customers) => (this.customers3 = customers));
this.productService.getProductsWithOrdersSmall().then(data => this.products = data); this.productService.getProductsWithOrdersSmall().then((data) => (this.products = data));
this.representatives = [ this.representatives = [
{ name: 'Amy Elsner', image: 'amyelsner.png' }, { name: 'Amy Elsner', image: 'amyelsner.png' },
@@ -483,14 +490,12 @@ export class TableDemo implements OnInit {
if (i === 0) { if (i === 0) {
this.rowGroupMetadata[representativeName] = { index: 0, size: 1 }; this.rowGroupMetadata[representativeName] = { index: 0, size: 1 };
} } else {
else {
const previousRowData = this.customers3[i - 1]; const previousRowData = this.customers3[i - 1];
const previousRowGroup = previousRowData?.representative?.name; const previousRowGroup = previousRowData?.representative?.name;
if (representativeName === previousRowGroup) { if (representativeName === previousRowGroup) {
this.rowGroupMetadata[representativeName].size++; this.rowGroupMetadata[representativeName].size++;
} } else {
else {
this.rowGroupMetadata[representativeName] = { index: i, size: 1 }; this.rowGroupMetadata[representativeName] = { index: i, size: 1 };
} }
} }
@@ -500,8 +505,7 @@ export class TableDemo implements OnInit {
expandAll() { expandAll() {
if (!this.isExpanded) { if (!this.isExpanded) {
this.products.forEach(product => product && product.name ? this.expandedRows[product.name] = true : ''); this.products.forEach((product) => (product && product.name ? (this.expandedRows[product.name] = true) : ''));
} else { } else {
this.expandedRows = {}; this.expandedRows = {};
} }
@@ -545,7 +549,7 @@ export class TableDemo implements OnInit {
return 'danger'; return 'danger';
default: default:
return 'info' return 'info';
} }
} }
@@ -562,5 +566,4 @@ export class TableDemo implements OnInit {
return total; return total;
} }
} }

4
src/app/pages/uikit/timelinedemo.ts
View File

@@ -43,10 +43,10 @@ import { ButtonModule } from 'primeng/button';
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Opposite Content</div> <div class="font-semibold text-xl mb-4">Opposite Content</div>
<p-timeline [value]="events1"> <p-timeline [value]="events1">
<ng-template pTemplate="content" let-event> <ng-template #content let-event>
<small class="p-text-secondary">{{ event.date }}</small> <small class="p-text-secondary">{{ event.date }}</small>
</ng-template> </ng-template>
<ng-template pTemplate="opposite" let-event> <ng-template #opposite let-event>
{{ event.status }} {{ event.status }}
</ng-template> </ng-template>
</p-timeline> </p-timeline>