ahasani/psp_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demo fix

Browse Source
This commit is contained in:
Yiğit FINDIKLI
2021-12-21 15:15:22 +03:00
parent 7bfb8bbdae
commit ce6cafb3bd
5 changed files with 43 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/demo/view/tabledemo.component.html
+39 -35
View File
@@ -8,7 +8,7 @@
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
<span class="p-input-icon-left mb-2">
<i class="pi pi-search"></i>
<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" class="w-full"/>
<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search Keyword" class="w-full"/>
</span>
</div>
</ng-template>
@@ -17,13 +17,13 @@
<th>
<div class="flex justify-content-between align-items-center">
Name
<p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
<p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter>
</div>
</th>
<th>
<div class="flex justify-content-between align-items-center">
Country
<p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
<p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter>
</div>
</th>
<th>
@@ -36,11 +36,11 @@
</div>
</ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<p-multiSelect [ngModel]="value" [style]="{'min-width': '12rem'}" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option">
<img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
<span class="ml-1">{{option.name}}</span>
<img [alt]="option.label" src="assets/demo/images/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
<span class="ml-2">{{option.name}}</span>
</div>
</ng-template>
</p-multiSelect>
@@ -51,7 +51,7 @@
<th>
<div class="flex justify-content-between align-items-center">
Date
<p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
<p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter>
</div>
</th>
<th>
@@ -98,30 +98,30 @@
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="min-width: 200px;">
<td style="min-width: 12rem;">
{{customer.name}}
</td>
<td style="min-width: 200px;">
<td style="min-width: 12rem;">
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text ml-2">{{customer.country.name}}</span>
</td>
<td style="min-width: 200px;">
<td style="min-width: 14rem;">
<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="min-width: 200px;">
<td style="min-width: 10rem;">
{{customer.date | date: 'MM/dd/yyyy'}}
</td>
<td style="min-width: 200px;">
<td style="min-width: 10rem;">
{{customer.balance | currency:'USD':'symbol'}}
</td>
<td style="min-width: 200px;">
<td style="min-width: 12rem;">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td style="min-width: 200px;">
<td style="min-width: 12rem;">
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
</td>
<td class="text-center" style="min-width: 50px;">
<td class="text-center" style="min-width: 8rem;">
<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>
</td>
</tr>
@@ -131,6 +131,11 @@
<td colspan="7">No customers found.</td>
</tr>
</ng-template>
<ng-template pTemplate="loadingbody">
<tr>
<td colspan="7">Loading customers data. Please wait.</td>
</tr>
</ng-template>
</p-table>
</div>
@@ -176,7 +181,7 @@
<div class="card">
<h5>Row Expand</h5>
<p-toast></p-toast>
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" styleClass="p-datatable-customers p-datatable-selectable rowexpand-table" responsiveLayout="scroll">
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll">
<ng-template pTemplate="caption">
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
<div class="flex table-header">
@@ -198,19 +203,19 @@
<td>
<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>
</td>
<td><span class="p-column-title">Name</span>{{product.name}}</td>
<td><span class="p-column-title">Image</span><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
<td><span class="p-column-title">Price</span>{{product.price | currency:'USD'}}</td>
<td><span class="p-column-title">Category</span>{{product.category}}</td>
<td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
<td><span class="p-column-title">Status</span><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
<td>{{product.name}}</td>
<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
<td>{{product.price | currency:'USD'}}</td>
<td>{{product.category}}</td>
<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
<td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-product>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="product.orders" dataKey="id">
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
@@ -223,11 +228,11 @@
</ng-template>
<ng-template pTemplate="body" let-order>
<tr>
<td><span class="p-column-title">Id</span>{{order.id}}</td>
<td><span class="p-column-title">Customer</span>{{order.customer}}</td>
<td><span class="p-column-title">Date</span>{{order.date}}</td>
<td><span class="p-column-title">Amount</span>{{order.amount | currency:'USD'}}</td>
<td><span class="p-column-title">Status</span><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
<td>{{order.id}}</td>
<td>{{order.customer}}</td>
<td>{{order.date}}</td>
<td>{{order.amount | currency:'USD'}}</td>
<td><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
<td><p-button type="button" icon="pi pi-search"></p-button></td>
</tr>
</ng-template>
@@ -248,8 +253,7 @@
<div class="col-12">
<div class="card">
<h5>Subheader Grouping</h5>
<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="600px"
styleClass="p-datatable-customers">
<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="400px">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
@@ -267,20 +271,20 @@
</td>
</tr>
<tr>
<td style="min-width: 220px;"><span class="p-column-title">Name</span>
<td style="min-width: 220px;">
{{customer.name}}
</td>
<td style="min-width: 220px;"><span class="p-column-title">Country</span>
<td style="min-width: 220px;">
<img src="assets/demo/flags/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 style="min-width: 300px;"><span class="p-column-title">Company</span>
<td style="min-width: 300px;">
{{customer.company}}
</td>
<td style="min-width: 220px;"><span class="p-column-title">Status</span>
<td style="min-width: 220px;">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td style="min-width: 220px;"><span class="p-column-title">Date</span>
<td style="min-width: 220px;">
{{customer.date}}
</td>
</tr>