f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/demo/view/tabledemo.component.html
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> <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"> <span class="p-input-icon-left mb-2">
<i class="pi pi-search"></i> <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> </span>
</div> </div>
</ng-template> </ng-template>
@ -17,13 +17,13 @@
<th> <th>
<div class="flex justify-content-between align-items-center"> <div class="flex justify-content-between align-items-center">
Name 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> </div>
</th> </th>
<th> <th>
<div class="flex justify-content-between align-items-center"> <div class="flex justify-content-between align-items-center">
Country 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> </div>
</th> </th>
<th> <th>
@ -36,11 +36,11 @@
</div> </div>
</ng-template> </ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback"> <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"> <ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" /> <img [alt]="option.label" src="assets/demo/images/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
<span class="ml-1">{{option.name}}</span> <span class="ml-2">{{option.name}}</span>
</div> </div>
</ng-template> </ng-template>
</p-multiSelect> </p-multiSelect>
@ -51,7 +51,7 @@
<th> <th>
<div class="flex justify-content-between align-items-center"> <div class="flex justify-content-between align-items-center">
Date 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> </div>
</th> </th>
<th> <th>
@ -98,30 +98,30 @@
</ng-template> </ng-template>
<ng-template pTemplate="body" let-customer> <ng-template pTemplate="body" let-customer>
<tr> <tr>
<td style="min-width: 200px;"> <td style="min-width: 12rem;">
{{customer.name}} {{customer.name}}
</td> </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"> <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> <span class="image-text ml-2">{{customer.country.name}}</span>
</td> </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"/> <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> <span class="image-text ml-2">{{customer.representative.name}}</span>
</td> </td>
<td style="min-width: 200px;"> <td style="min-width: 10rem;">
{{customer.date | date: 'MM/dd/yyyy'}} {{customer.date | date: 'MM/dd/yyyy'}}
</td> </td>
<td style="min-width: 200px;"> <td style="min-width: 10rem;">
{{customer.balance | currency:'USD':'symbol'}} {{customer.balance | currency:'USD':'symbol'}}
</td> </td>
<td style="min-width: 200px;"> <td style="min-width: 12rem;">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span> <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td> </td>
<td style="min-width: 200px;"> <td style="min-width: 12rem;">
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar> <p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
</td> </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> <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> </td>
</tr> </tr>
@ -131,6 +131,11 @@
<td colspan="7">No customers found.</td> <td colspan="7">No customers found.</td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="loadingbody">
<tr>
<td colspan="7">Loading customers data. Please wait.</td>
</tr>
</ng-template>
</p-table> </p-table>
</div> </div>
@ -176,7 +181,7 @@
<div class="card"> <div class="card">
<h5>Row Expand</h5> <h5>Row Expand</h5>
<p-toast></p-toast> <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"> <ng-template pTemplate="caption">
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button> <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"> <div class="flex table-header">
@ -198,19 +203,19 @@
<td> <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> <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>
<td><span class="p-column-title">Name</span>{{product.name}}</td> <td>{{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><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>{{product.price | currency:'USD'}}</td>
<td><span class="p-column-title">Category</span>{{product.category}}</td> <td>{{product.category}}</td>
<td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td> <td><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><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="rowexpansion" let-product> <ng-template pTemplate="rowexpansion" let-product>
<tr> <tr>
<td colspan="7"> <td colspan="7">
<div class="p-3"> <div class="p-3">
<p-table [value]="product.orders" dataKey="id"> <p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th> <th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
@ -223,11 +228,11 @@
</ng-template> </ng-template>
<ng-template pTemplate="body" let-order> <ng-template pTemplate="body" let-order>
<tr> <tr>
<td><span class="p-column-title">Id</span>{{order.id}}</td> <td>{{order.id}}</td>
<td><span class="p-column-title">Customer</span>{{order.customer}}</td> <td>{{order.customer}}</td>
<td><span class="p-column-title">Date</span>{{order.date}}</td> <td>{{order.date}}</td>
<td><span class="p-column-title">Amount</span>{{order.amount | currency:'USD'}}</td> <td>{{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><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
<td><p-button type="button" icon="pi pi-search"></p-button></td> <td><p-button type="button" icon="pi pi-search"></p-button></td>
</tr> </tr>
</ng-template> </ng-template>
@ -248,8 +253,7 @@
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<h5>Subheader Grouping</h5> <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" <p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="400px">
styleClass="p-datatable-customers">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -267,20 +271,20 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="min-width: 220px;"><span class="p-column-title">Name</span> <td style="min-width: 220px;">
{{customer.name}} {{customer.name}}
</td> </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"> <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> <span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
</td> </td>
<td style="min-width: 300px;"><span class="p-column-title">Company</span> <td style="min-width: 300px;">
{{customer.company}} {{customer.company}}
</td> </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> <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td> </td>
<td style="min-width: 220px;"><span class="p-column-title">Date</span> <td style="min-width: 220px;">
{{customer.date}} {{customer.date}}
</td> </td>
</tr> </tr>

17
src/app/demo/view/tabledemo.component.ts
View File

@ -9,19 +9,6 @@ import { MessageService, ConfirmationService } from 'primeng/api'
@Component({ @Component({
templateUrl: './tabledemo.component.html', templateUrl: './tabledemo.component.html',
styleUrls: ['./tabledemo.scss'],
styles: [`
:host ::ng-deep .p-datatable-gridlines p-progressBar {
width: 100%;
}
@media screen and (max-width: 960px) {
:host ::ng-deep .p-datatable.p-datatable-customers.rowexpand-table .p-datatable-tbody > tr > td:nth-child(6) {
display: flex;
}
}
`],
providers: [MessageService, ConfirmationService] providers: [MessageService, ConfirmationService]
}) })
export class TableDemoComponent implements OnInit { export class TableDemoComponent implements OnInit {
@ -123,11 +110,11 @@ export class TableDemoComponent implements OnInit {
} }
} }
} }
expandAll() { expandAll() {
if(!this.isExpanded){ if(!this.isExpanded){
this.products.forEach(product => this.expandedRows[product.name] = true); this.products.forEach(product => this.expandedRows[product.name] = true);
} else { } else {
this.expandedRows={}; this.expandedRows={};
} }

198
src/app/demo/view/tabledemo.scss
View File

@ -1,200 +1,2 @@
:host ::ng-deep {
.p-progressbar {
height: .5rem;
background-color: #D8DADC;
min-width:100px;
.p-progressbar-value {
background-color: #607D8B;
}
}
.table-header {
display: flex;
justify-content: space-between;
}
.p-calendar .p-datepicker {
min-width: 25rem;
td {
font-weight: 400;
}
}
.p-datatable.p-datatable-customers {
.p-datatable-header {
padding: 1rem;
text-align: left;
font-size: 1.5rem;
}
.p-paginator {
padding: 1rem;
}
.p-datatable-thead > tr > th {
text-align: left;
}
.p-dropdown-label:not(.p-placeholder) {
text-transform: uppercase;
}
}
.p-datatable.p-datatable-customers:not(.p-datatable-gridlines) {
.p-datatable-tbody > tr > td {
cursor: auto;
}
}
/* Responsive */
.p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
display: none;
}
}
.customer-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-qualified {
background: #C8E6C9;
color: #256029;
}
&.status-unqualified {
background: #FFCDD2;
color: #C63737;
}
&.status-negotiation {
background: #FEEDAF;
color: #8A5340;
}
&.status-new {
background: #B3E5FC;
color: #23547B;
}
&.status-renewal {
background: #ECCFFF;
color: #694382;
}
&.status-proposal {
background: #FFD8B2;
color: #805B36;
}
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}
.order-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.order-delivered {
background: #C8E6C9;
color: #256029;
}
&.order-cancelled {
background: #FFCDD2;
color: #C63737;
}
&.order-pending {
background: #FEEDAF;
color: #8A5340;
}
&.order-returned {
background: #ECCFFF;
color: #694382;
}
}
@media screen and (max-width: 960px) {
:host ::ng-deep {
.p-datatable {
&.p-datatable-customers {
.p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td {
display: none !important;
}
.p-datatable-tbody > tr {
border-bottom: 1px solid var(--surface-d);
> td {
text-align: left;
display: block;
border: 0 none !important;
width: 100% !important;
float: left;
clear: left;
border: 0 none;
.p-column-title {
padding: .4rem;
min-width: 30%;
display: inline-block;
margin: -.4rem 1rem -.4rem -.4rem;
font-weight: bold;
}
.p-progressbar {
margin-top: .5rem;
}
}
}
&.p-datatable-selectable{
.p-datatable-tbody>tr{
>td{
display:flex !important;
justify-content: space-between;
}
}
}
}
}
}
}

4
src/app/pages/app.crud.component.html
View File

@ -13,8 +13,8 @@
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help mb-2" (click)="dt.exportCSV()"></button> <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help mb-2" (click)="dt.exportCSV()"></button>
</ng-template> </ng-template>
</p-toolbar> </p-toolbar>
<p-table #dt [value]="products" [columns]="cols" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" [rowHover]="true" dataKey="id" styleClass="p-datatable-customers" class="p-datatable-responsive"> <p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" [rowHover]="true" dataKey="id" styleClass="p-datatable-customers" class="p-datatable-responsive">
<ng-template pTemplate="caption"> <ng-template pTemplate="caption">
<div class="flex flex-md-row justify-content-md-between table-header"> <div class="flex flex-md-row justify-content-md-between table-header">
<h5 class="m-0">Manage Products</h5> <h5 class="m-0">Manage Products</h5>

24
src/app/pages/app.crud.component.ts
View File

@ -5,30 +5,6 @@ import {ConfirmationService, MessageService} from 'primeng/api';
@Component({ @Component({
templateUrl: './app.crud.component.html', templateUrl: './app.crud.component.html',
styleUrls: ['../demo/view/tabledemo.scss'],
styles: [`
:host ::ng-deep .p-dialog .product-image {
width: 150px;
margin: 0 auto 2rem auto;
display: block;
}
@media screen and (max-width: 960px) {
:host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:last-child {
text-align: center;
}
:host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:nth-child(6) {
display: flex;
}
}
@media (max-width: 1024px){
:host ::ng-deep .p-dialog{
margin: 0 20px;
}
}
`],
providers: [MessageService, ConfirmationService] providers: [MessageService, ConfirmationService]
}) })
export class AppCrudComponent implements OnInit { export class AppCrudComponent implements OnInit {