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

Fix table demos

Browse Source
This commit is contained in:
Çetin
2025-01-06 15:53:16 +03:00
parent 1a58b06ce5
commit 6d9dff0075
1 changed files with 135 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
src/views/uikit/tabledoc.ts
View File

@@ -16,7 +16,8 @@ import { Customer, CustomerService, Representative } from '@/src/service/custome
import { Product, ProductService } from '@/src/service/product.service'; import { Product, ProductService } from '@/src/service/product.service';
import { RippleModule } from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple';
import { InputIconModule } from 'primeng/inputicon'; import { InputIconModule } from 'primeng/inputicon';
import { IconField } from 'primeng/iconfield'; import { IconFieldModule } from 'primeng/iconfield';
import { TagModule } from 'primeng/tag';
interface expandedRows { interface expandedRows {
[key: string]: boolean; [key: string]: boolean;
@@ -24,12 +25,12 @@ interface expandedRows {
@Component({ @Component({
standalone: true, standalone: true,
imports: [TableModule, MultiSelectModule, InputIconModule, SelectModule, InputTextModule, SliderModule, ProgressBarModule, ToggleButtonModule, ToastModule, CommonModule, FormsModule, ButtonModule, RatingModule, RippleModule, IconField], imports: [TableModule, MultiSelectModule,SelectModule, InputIconModule, TagModule, InputTextModule, SliderModule, ProgressBarModule, ToggleButtonModule, ToastModule, CommonModule, FormsModule, ButtonModule, RatingModule, RippleModule, IconFieldModule],
template: ` template: `
<div class="card"> <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 #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true"
styleClass="p-datatable-gridlines" [paginator]="true" [showGridlines]="true" [paginator]="true"
[globalFilterFields]="['name','country.name','representative.name','status']" [globalFilterFields]="['name','country.name','representative.name','status']"
responsiveLayout="scroll"> responsiveLayout="scroll">
<ng-template pTemplate="caption"> <ng-template pTemplate="caption">
@@ -46,21 +47,21 @@ interface expandedRows {
<ng-template #header> <ng-template #header>
<tr> <tr>
<th style="min-width: 12rem"> <th style="min-width: 12rem">
<div class="flex justify-content-between align-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-content-between align-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-content-between align-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">
@@ -71,11 +72,11 @@ interface expandedRows {
</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"> (onChange)="filter($event.value)" optionLabel="name" styleClass="w-full">
<ng-template let-option #item> <ng-template let-option #item>
<div class="p-multiselect-representative-option"> <div>
<img [alt]="option.label" <img [alt]="option.label"
src="assets/demo/images/avatar/{{option.image}}" width="32" src="https://primefaces.org/cdn/primevue/images/avatar/{{option.image}}" width="32"
style="vertical-align: middle" /> style="vertical-align: middle" />
<span class="ml-2">{{ option.name }}</span> <span class="ml-2">{{ option.name }}</span>
</div> </div>
@@ -86,21 +87,21 @@ interface expandedRows {
</div> </div>
</th> </th>
<th style="min-width: 10rem"> <th style="min-width: 10rem">
<div class="flex justify-content-between align-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-content-between align-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">
<div class="flex justify-content-between align-items-center"> <div class="flex justify-between items-center">
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">
@@ -117,7 +118,7 @@ interface expandedRows {
</div> </div>
</th> </th>
<th style="min-width: 12rem"> <th style="min-width: 12rem">
<div class="flex justify-content-between align-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">
@@ -125,7 +126,7 @@ interface expandedRows {
<p-slider [ngModel]="activityValues" [range]="true" <p-slider [ngModel]="activityValues" [range]="true"
(onSlideEnd)="filter($event.values)" styleClass="m-3" (onSlideEnd)="filter($event.values)" styleClass="m-3"
[style]="{'min-width': '12rem'}"></p-slider> [style]="{'min-width': '12rem'}"></p-slider>
<div class="flex align-items-center justify-content-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>
</div> </div>
@@ -134,7 +135,7 @@ interface expandedRows {
</div> </div>
</th> </th>
<th style="min-width: 8rem"> <th style="min-width: 8rem">
<div class="flex justify-content-between align-items-center"> <div class="flex justify-between items-center">
Verified Verified
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter> <p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
</div> </div>
@@ -147,15 +148,19 @@ interface expandedRows {
{{ customer.name }} {{ customer.name }}
</td> </td>
<td> <td>
<img src="assets/demo/images/flag/flag_placeholder.png" <div class="flex items-center gap-2">
<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 class="image-text ml-2">{{ customer.country.name }}</span> <span>{{ customer.country.name }}</span>
</div>
</td> </td>
<td> <td>
<div class="flex items-center gap-2">
<img [alt]="customer.representative.name" <img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" src="https://primefaces.org/cdn/primevue/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" /> style="vertical-align: middle" />
<span class="image-text ml-2">{{ customer.representative.name }}</span> <span class="image-text">{{ customer.representative.name }}</span>
</div>
</td> </td>
<td> <td>
{{ customer.date | date: 'MM/dd/yyyy' }} {{ customer.date | date: 'MM/dd/yyyy' }}
@@ -164,15 +169,14 @@ interface expandedRows {
{{ customer.balance | currency:'USD':'symbol' }} {{ customer.balance | currency:'USD':'symbol' }}
</td> </td>
<td> <td>
<span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span> <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">
<i class="pi" <p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" />
[ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified}"></i>
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
@@ -191,50 +195,34 @@ interface expandedRows {
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Frozen Columns</div> <div class="font-semibold text-xl mb-4">Frozen Columns</div>
<p-togglebutton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" <p-togglebutton [(ngModel)]="balanceFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Balance'" offLabel="Balance" />
[onLabel]="'Unfreeze Id'" offLabel="Freeze Id"
[style]="{'width': '12rem'}"></p-togglebutton>
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" <p-table [value]="customers2" [scrollable]="true" scrollHeight="400px" styleClass="mt-4">
styleClass="mt-3" responsiveLayout="scroll"> <ng-template #header>
<ng-template pTemplate="header">
<tr> <tr>
<th style="width:200px" pFrozenColumn>Name</th> <th style="min-width:200px" pFrozenColumn class="font-bold">Name</th>
<th style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th> <th style="min-width:100px">Id</th>
<th style="width:200px">Country</th> <th style="min-width:200px">Country</th>
<th style="width:200px">Date</th> <th style="min-width:200px">Date</th>
<th style="width:200px">Company</th> <th style="min-width:200px">Company</th>
<th style="width:200px">Status</th> <th style="min-width:200px">Status</th>
<th style="width:200px">Activity</th> <th style="min-width:200px">Activity</th>
<th style="width:200px">Representative</th> <th style="min-width:200px">Representative</th>
<th style="width:200px" pFrozenColumn alignFrozen="right">Balance</th> <th style="min-width:200px" alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen" [ngClass]="{ 'font-bold': balanceFrozen }">Balance</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-customer> <ng-template #body let-customer>
<tr> <tr>
<td style="width:200px" pFrozenColumn class="font-bold">{{ customer.name }}</td> <td pFrozenColumn class="font-bold">{{ customer.name }}</td>
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen" <td style="min-width:100px">{{ customer.id }}</td>
[ngClass]="{'font-bold': idFrozen}">{{ customer.id }} <td>{{ customer.country.name }}</td>
</td> <td>{{ customer.date }}</td>
<td style="width:200px"> <td>{{ customer.company }}</td>
<img src="assets/demo/images/flag/flag_placeholder.png" <td>{{ customer.status }}</td>
[class]="'flag flag-' + customer.country.code" width="30"> <td>{{ customer.activity }}</td>
<span class="image-text ml-2">{{ customer.country.name }}</span> <td>{{ customer.representative.name }}</td>
</td> <td alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen" [ngClass]="{ 'font-bold': balanceFrozen }">
<td style="width:200px">{{ customer.date }}</td> {{ formatCurrency(customer.balance) }}
<td style="width:200px">{{ customer.company }}</td>
<td style="width:200px">
<span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span>
</td>
<td style="width:200px">{{ customer.activity }}</td>
<td style="width:200px">
<img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="image-text ml-2">{{ customer.representative.name }}</span>
</td>
<td style="width:200px" pFrozenColumn class="font-bold"
alignFrozen="right">{{ formatCurrency(customer.balance) }}
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
@@ -279,15 +267,15 @@ interface expandedRows {
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button> [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]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" <td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="50"
class="shadow-4" /></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>
</td> </td>
<td><span <td>
[class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{ product.inventoryStatus }}</span> <p-tag [value]="product.inventoryStatus.toLowerCase()" [severity]="getSeverity(product.inventoryStatus)" styleClass="dark:!bg-surface-900" />
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
@@ -345,9 +333,7 @@ interface expandedRows {
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Grouping</div> <div class="font-semibold text-xl mb-4">Grouping</div>
<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" <p-table [value]="customers3" sortField="representative.name" sortMode="single" [scrollable]="true" scrollHeight="400px" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{ 'min-width': '60rem' }">
sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll"
[scrollable]="true" scrollHeight="400px">
<ng-template #header> <ng-template #header>
<tr> <tr>
<th>Name</th> <th>Name</th>
@@ -357,37 +343,55 @@ interface expandedRows {
<th>Date</th> <th>Date</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template #body let-customer let-rowIndex="rowIndex"> <ng-template #groupheader let-customer>
<tr pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex"> <tr pRowGroupHeader>
<td colspan="5" style="min-width: 200px;"> <td colspan="5">
<img [alt]="customer.representative.name" <div class="flex items-center gap-2">
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
style="vertical-align: middle" /> <span class="font-bold">{{ customer.representative.name }}</span>
<span class="font-bold ml-2">{{ customer.representative.name }}</span> </div>
</td> </td>
</tr> </tr>
</ng-template>
<ng-template #groupfooter let-customer>
<tr> <tr>
<td style="min-width: 200px;"> <td colspan="5" class="text-right font-bold pr-12">
{{ customer.name }} Total Customers: {{calculateCustomerTotal(customer.representative.name)}}
</td>ƒ
<td style="min-width: 200px;">
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em">{{ customer.country.name }}</span>
</td> </td>
<td style="min-width: 200px;"> </tr>
</ng-template>
<ng-template #body let-customer let-rowIndex="rowIndex">
<tr>
<td>
{{ customer.name }}
</td>
<td>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
<span>{{ customer.country.name }}</span>
</div>
</td>
<td>
{{ customer.company }} {{ customer.company }}
</td> </td>
<td style="min-width: 200px;"> <td>
<span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span> <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)" />
</td> </td>
<td style="min-width: 200px;"> <td>
{{ customer.date }} {{ customer.date }}
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
</div>`, </div>`,
styles: `
.p-datatable-frozen-tbody {
font-weight: bold;
}
.p-datatable-scrollable .p-frozen-column {
font-weight: bold;
}`,
providers: [ConfirmationService, MessageService, CustomerService, ProductService], providers: [ConfirmationService, MessageService, CustomerService, ProductService],
}) })
export class TableDoc implements OnInit { export class TableDoc implements OnInit {
@@ -416,7 +420,7 @@ export class TableDoc implements OnInit {
isExpanded: boolean = false; isExpanded: boolean = false;
idFrozen: boolean = false; balanceFrozen: boolean = false;
loading: boolean = true; loading: boolean = true;
@@ -511,5 +515,46 @@ export class TableDoc implements OnInit {
this.filter.nativeElement.value = ''; this.filter.nativeElement.value = '';
} }
getSeverity(status: string) {
switch (status) {
case 'qualified':
case 'instock':
case 'INSTOCK':
case 'DELIVERED':
case 'delivered':
return 'success';
case 'negotiation':
case 'lowstock':
case 'LOWSTOCK':
case 'PENDING':
case 'pending':
return 'warn';
case 'unqualified':
case 'outofstock':
case 'OUTOFSTOCK':
case 'CANCELLED':
case 'cancelled':
return 'danger';
default:
return 'info'
}
}
calculateCustomerTotal(name: string) {
let total = 0;
if (this.customers2) {
for (let customer of this.customers2) {
if (customer.representative?.name === name) {
total++;
}
}
}
return total;
}
} }