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

update tabledoc

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-06 14:58:04 +03:00
parent 05d5fe0c14
commit 2744daeb1e
1 changed files with 155 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,9 @@ import { RatingModule } from 'primeng/rating';
import { Customer, CustomerService, Representative } from '@/src/service/customer.service'; import { Customer, CustomerService, Representative } from '@/src/service/customer.service';
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 { IconFieldModule } from 'primeng/iconfield';
import { InputIconModule } from 'primeng/inputicon';
import { TagModule } from 'primeng/tag';
interface expandedRows { interface expandedRows {
[key: string]: boolean; [key: string]: boolean;
@@ -22,60 +25,79 @@ interface expandedRows {
@Component({ @Component({
standalone: true, standalone: true,
imports:[TableModule, MultiSelectModule, SelectModule, InputTextModule, SliderModule,ProgressBarModule,ToggleButtonModule,ToastModule, CommonModule, FormsModule,ButtonModule,RatingModule, RippleModule], imports: [
template: ` TableModule,
<div class="card"> MultiSelectModule,
SelectModule,
InputTextModule,
SliderModule,
ProgressBarModule,
ToggleButtonModule,
ToastModule,
CommonModule,
FormsModule,
ButtonModule,
RatingModule,
RippleModule,
IconFieldModule,
InputIconModule,
SelectModule,
TagModule
],
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
styleClass="p-datatable-gridlines" [paginator]="true" #dt1
[globalFilterFields]="['name','country.name','representative.name','status']" [value]="customers1"
responsiveLayout="scroll"> dataKey="id"
<ng-template pTemplate="caption"> [rows]="10"
<div class="flex justify-content-between flex-column sm:flex-row"> [loading]="loading"
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" [rowHover]="true"
(click)="clear(dt1)"></button> styleClass="p-datatable-gridlines"
<span class="p-input-icon-left mb-2"> [paginator]="true"
<i class="pi pi-search"></i> [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)" placeholder="Search Keyword" responsiveLayout="scroll"
class="w-full" /> >
</span> <ng-template #caption>
<div class="flex">
<p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (click)="clear(dt1)" />
<p-iconfield iconPosition="left" class="ml-auto">
<p-inputicon>
<i class="pi pi-search"></i>
</p-inputicon>
<input pInputText type="text" (input)="onGlobalFilter(dt1, $event)" placeholder="Search keyword" />
</p-iconfield>
</div> </div>
</ng-template> </ng-template>
<ng-template #header> <ng-template #header>
<tr> <tr>
<th style="min-width: 12rem"> <th style="min-width:15rem">
<div class="flex justify-content-between align-items-center"> <div class="flex 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>
</div> </div>
</th> </th>
<th style="min-width: 12rem"> <th style="min-width:15rem">
<div class="flex justify-content-between align-items-center"> <div class="flex 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>
</div> </div>
</th> </th>
<th style="min-width: 14rem"> <th style="min-width:15rem">
<div class="flex justify-content-between align-items-center"> <div class="flex 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-4 pt-4 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">
<ng-template let-option #item> <ng-template let-option #item>
<div class="p-multiselect-representative-option"> <div class="flex items-center gap-2">
<img [alt]="option.label" <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="32" />
src="assets/demo/images/avatar/{{option.image}}" width="32" <span>{{ option.name }}</span>
style="vertical-align: middle" />
<span class="ml-2">{{ option.name }}</span>
</div> </div>
</ng-template> </ng-template>
</p-multiselect> </p-multiselect>
@@ -83,47 +105,39 @@ interface expandedRows {
</p-columnFilter> </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 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>
</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 items-center">
Balance Balance
<p-columnFilter type="numeric" field="balance" display="menu" <p-columnFilter type="numeric" field="balance" display="menu" currency="USD" />
currency="USD"></p-columnFilter>
</div> </div>
</th> </th>
<th style="min-width: 12rem"> <th style="min-width:10rem">
<div class="flex justify-content-between align-items-center"> <div class="flex 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">
<p-select [ngModel]="value" [options]="statuses" <p-select [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" styleClass="w-full">
(onChange)="filter($event.value)" placeholder="Any"
[style]="{'min-width': '12rem'}">
<ng-template let-option #item> <ng-template let-option #item>
<span <p-tag [value]="option.value" [severity]="getSeverity(option.label)" />
[class]="'customer-badge status-' + option.value">{{ option.label }}</span>
</ng-template> </ng-template>
</p-select> </p-select>
</ng-template> </ng-template>
</p-columnFilter> </p-columnFilter>
</div> </div>
</th> </th>
<th style="min-width: 12rem"> <th style="min-width:10rem">
<div class="flex justify-content-between align-items-center"> <div class="flex 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-4" />
(onSlideEnd)="filter($event.values)" styleClass="m-3" <div class="flex items-center justify-between px-2">
[style]="{'min-width': '12rem'}"></p-slider>
<div class="flex align-items-center justify-content-between px-2">
<span>{{ activityValues[0] }}</span> <span>{{ activityValues[0] }}</span>
<span>{{ activityValues[1] }}</span> <span>{{ activityValues[1] }}</span>
</div> </div>
@@ -131,10 +145,10 @@ interface expandedRows {
</p-columnFilter> </p-columnFilter>
</div> </div>
</th> </th>
<th style="min-width: 8rem"> <th style="width: 3rem">
<div class="flex justify-content-between align-items-center"> <div class="flex items-center">
Verified Verified
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter> <p-columnFilter type="boolean" field="verified" display="menu" />
</div> </div>
</th> </th>
</tr> </tr>
@@ -145,32 +159,27 @@ interface expandedRows {
{{ customer.name }} {{ customer.name }}
</td> </td>
<td> <td>
<img src="assets/demo/images/flag/flag_placeholder.png" <img src="assets/demo/images/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 class="image-text ml-2">{{ customer.country.name }}</span>
</td> </td>
<td> <td>
<img [alt]="customer.representative.name" <img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="image-text ml-2">{{ customer.representative.name }}</span> <span class="image-text ml-2">{{ customer.representative.name }}</span>
</td> </td>
<td> <td>
{{ 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>
<span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span> <span [class]="'customer-badge status-' + customer.status">{{ customer.status }}</span>
</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" <i class="pi" [ngClass]="{ 'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified }"></i>
[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>
@@ -189,12 +198,9 @@ 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)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Id'" offLabel="Freeze Id" [style]="{ width: '12rem' }"></p-togglebutton>
[onLabel]="'Unfreeze Id'" offLabel="Freeze Id"
[style]="{'width': '12rem'}"></p-togglebutton>
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" <p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3" responsiveLayout="scroll">
styleClass="mt-3" responsiveLayout="scroll">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th style="width:200px" pFrozenColumn>Name</th> <th style="width:200px" pFrozenColumn>Name</th>
@@ -211,12 +217,9 @@ interface expandedRows {
<ng-template pTemplate="body" let-customer> <ng-template pTemplate="body" let-customer>
<tr> <tr>
<td style="width:200px" pFrozenColumn class="font-bold">{{ customer.name }}</td> <td style="width:200px" pFrozenColumn class="font-bold">{{ customer.name }}</td>
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen" <td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen" [ngClass]="{ 'font-bold': idFrozen }">{{ customer.id }}</td>
[ngClass]="{'font-bold': idFrozen}">{{ customer.id }}
</td>
<td style="width:200px"> <td style="width:200px">
<img src="assets/demo/images/flag/flag_placeholder.png" <img src="assets/demo/images/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 class="image-text ml-2">{{ customer.country.name }}</span>
</td> </td>
<td style="width:200px">{{ customer.date }}</td> <td style="width:200px">{{ customer.date }}</td>
@@ -226,14 +229,10 @@ interface expandedRows {
</td> </td>
<td style="width:200px">{{ customer.activity }}</td> <td style="width:200px">{{ customer.activity }}</td>
<td style="width:200px"> <td style="width:200px">
<img [alt]="customer.representative.name" <img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="image-text ml-2">{{ customer.representative.name }}</span> <span class="image-text ml-2">{{ customer.representative.name }}</span>
</td> </td>
<td style="width:200px" pFrozenColumn class="font-bold" <td style="width:200px" pFrozenColumn class="font-bold" alignFrozen="right">{{ formatCurrency(customer.balance) }}</td>
alignFrozen="right">{{ formatCurrency(customer.balance) }}
</td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
@@ -243,28 +242,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>
@@ -272,20 +274,17 @@ 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]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" <td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
class="shadow-4" /></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> <span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{ product.inventoryStatus }}</span>
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
@@ -296,19 +295,24 @@ interface expandedRows {
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll"> <p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th pSortableColumn="id">Id <th pSortableColumn="id">
Id
<p-sortIcon field="price"></p-sortIcon> <p-sortIcon field="price"></p-sortIcon>
</th> </th>
<th pSortableColumn="customer">Customer <th pSortableColumn="customer">
Customer
<p-sortIcon field="customer"></p-sortIcon> <p-sortIcon field="customer"></p-sortIcon>
</th> </th>
<th pSortableColumn="date">Date <th pSortableColumn="date">
Date
<p-sortIcon field="date"></p-sortIcon> <p-sortIcon field="date"></p-sortIcon>
</th> </th>
<th pSortableColumn="amount">Amount <th pSortableColumn="amount">
Amount
<p-sortIcon field="amount"></p-sortIcon> <p-sortIcon field="amount"></p-sortIcon>
</th> </th>
<th pSortableColumn="stats">Status <th pSortableColumn="stats">
Status
<p-sortIcon field="status"></p-sortIcon> <p-sortIcon field="status"></p-sortIcon>
</th> </th>
<th style="width: 4rem"></th> <th style="width: 4rem"></th>
@@ -319,9 +323,9 @@ interface expandedRows {
<td>{{ order.id }}</td> <td>{{ order.id }}</td>
<td>{{ order.customer }}</td> <td>{{ order.customer }}</td>
<td>{{ order.date }}</td> <td>{{ order.date }}</td>
<td>{{ order.amount | currency:'USD' }}</td> <td>{{ order.amount | currency: 'USD' }}</td>
<td><span <td>
[class]="'order-badge order-' + order.status.toLowerCase()">{{ order.status }}</span> <span [class]="'order-badge order-' + order.status.toLowerCase()">{{ order.status }}</span>
</td> </td>
<td> <td>
<p-button type="button" icon="pi pi-search"></p-button> <p-button type="button" icon="pi pi-search"></p-button>
@@ -343,9 +347,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" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="400px">
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>
@@ -358,9 +360,7 @@ interface expandedRows {
<ng-template #body let-customer let-rowIndex="rowIndex"> <ng-template #body let-customer let-rowIndex="rowIndex">
<tr pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex"> <tr pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<td colspan="5" style="min-width: 200px;"> <td colspan="5" style="min-width: 200px;">
<img [alt]="customer.representative.name" <img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle" />
<span class="font-bold ml-2">{{ customer.representative.name }}</span> <span class="font-bold ml-2">{{ customer.representative.name }}</span>
</td> </td>
</tr> </tr>
@@ -369,8 +369,7 @@ interface expandedRows {
{{ customer.name }} {{ customer.name }}
</td> </td>
<td style="min-width: 200px;"> <td style="min-width: 200px;">
<img src="assets/demo/images/flag/flag_placeholder.png" <img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30" />
[class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em">{{ customer.country.name }}</span> <span class="image-text" style="margin-left: .5em">{{ customer.country.name }}</span>
</td> </td>
<td style="min-width: 200px;"> <td style="min-width: 200px;">
@@ -386,10 +385,9 @@ interface expandedRows {
</ng-template> </ng-template>
</p-table> </p-table>
</div>`, </div>`,
providers: [ConfirmationService, MessageService, CustomerService, ProductService], providers: [ConfirmationService, MessageService, CustomerService, ProductService]
}) })
export class TableDoc implements OnInit { export class TableDoc implements OnInit {
customers1: Customer[] = []; customers1: Customer[] = [];
customers2: Customer[] = []; customers2: Customer[] = [];
@@ -420,19 +418,22 @@ export class TableDoc 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' },
@@ -457,6 +458,28 @@ export class TableDoc implements OnInit {
]; ];
} }
getSeverity(status: string) {
switch (status.toLowerCase()) {
case 'unqualified':
return 'danger';
case 'qualified':
return 'success';
case 'new':
return 'info';
case 'negotiation':
return 'warn';
case 'renewal':
return null;
default:
return null;
}
}
onSort() { onSort() {
this.updateRowGroupMetaData(); this.updateRowGroupMetaData();
} }
@@ -471,14 +494,12 @@ export class TableDoc 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 };
} }
} }
@@ -488,8 +509,7 @@ export class TableDoc 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 = {};
} }
@@ -508,6 +528,4 @@ export class TableDoc implements OnInit {
table.clear(); table.clear();
this.filter.nativeElement.value = ''; this.filter.nativeElement.value = '';
} }
} }