Demo fix
This commit is contained in:
Yiğit FINDIKLI
parent
7bfb8bbdae
commit
ce6cafb3bd
@ -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>
|
||||
|
||||
@ -9,19 +9,6 @@ import { MessageService, ConfirmationService } from 'primeng/api'
|
||||
|
||||
@Component({
|
||||
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]
|
||||
})
|
||||
export class TableDemoComponent implements OnInit {
|
||||
@ -123,11 +110,11 @@ export class TableDemoComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
expandAll() {
|
||||
if(!this.isExpanded){
|
||||
this.products.forEach(product => this.expandedRows[product.name] = true);
|
||||
|
||||
|
||||
} else {
|
||||
this.expandedRows={};
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -13,8 +13,8 @@
|
||||
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help mb-2" (click)="dt.exportCSV()"></button>
|
||||
</ng-template>
|
||||
</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">
|
||||
<div class="flex flex-md-row justify-content-md-between table-header">
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
|
||||
@ -5,30 +5,6 @@ import {ConfirmationService, MessageService} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
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]
|
||||
})
|
||||
export class AppCrudComponent implements OnInit {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user