f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update table, menu, topbar, dialog, toast components and css

Browse Source
This commit is contained in:
Çetin 2021-12-14 16:31:40 +03:00
parent 2b91b042d5
commit 9c710d6fa3
26 changed files with 302 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/app.main.component.ts
View File

@ -99,6 +99,7 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
} }
else { else {
this.menuActiveMobile = !this.menuActiveMobile; this.menuActiveMobile = !this.menuActiveMobile;
this.topMenuActive = false;
} }
event.preventDefault(); event.preventDefault();
@ -127,7 +128,7 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
setTimeout(() => { setTimeout(() => {
this.topMenuActive = false; this.topMenuActive = false;
this.topMenuLeaving = false; this.topMenuLeaving = false;
}, 500); }, 1);
} }
onMenuClick() { onMenuClick() {
@ -155,6 +156,10 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
return window.innerWidth > 1024; return window.innerWidth > 1024;
} }
isMobile(){
return window.innerWidth < 1024;
}
onSearchClick() { onSearchClick() {
this.topMenuButtonClick = true; this.topMenuButtonClick = true;
} }

30
src/app/app.menu.component.ts
View File

@ -12,7 +12,7 @@ import {AppComponent} from './app.component';
<li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i"></li> <li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i"></li>
</ul> </ul>
</li> </li>
<a href="https://www.primefaces.org/primeblocks-ng/"> <a href="https://www.primefaces.org/primeblocks-ng/#/">
<img src="assets/layout/images/{{app.darkMode ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/> <img src="assets/layout/images/{{app.darkMode ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
</a> </a>
</ul> </ul>
@ -41,7 +41,7 @@ export class AppMenuComponent implements OnInit {
{label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']}, {label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']},
{label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']}, {label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']},
{label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']}, {label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']},
{label: 'Invalid State', icon: 'pi pi-exclamation-circle', routerLink: ['/uikit/invalidstate']}, {label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate']},
{label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'}, {label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'},
{label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']}, {label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']},
{label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']}, {label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']},
@ -67,38 +67,38 @@ export class AppMenuComponent implements OnInit {
label: 'Hierarchy', label: 'Hierarchy',
items: [ items: [
{ {
label: 'Submenu 1', icon: 'pi pi-fw pi-align-left', label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
{ {
label: 'Submenu 1.1', icon: 'pi pi-fw pi-align-left', label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
{label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-align-left'}, {label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark'},
{label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-align-left'}, {label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark'},
{label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-align-left'}, {label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark'},
] ]
}, },
{ {
label: 'Submenu 1.2', icon: 'pi pi-fw pi-align-left', label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
{label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-align-left'} {label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark'}
] ]
}, },
] ]
}, },
{ {
label: 'Submenu 2', icon: 'pi pi-fw pi-align-left', label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
{ {
label: 'Submenu 2.1', icon: 'pi pi-fw pi-align-left', label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
{label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-align-left'}, {label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark'},
{label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-align-left'}, {label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark'},
] ]
}, },
{ {
label: 'Submenu 2.2', icon: 'pi pi-fw pi-align-left', label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
{label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-align-left'}, {label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark'},
] ]
}, },
] ]

2
src/app/app.menu.service.ts
View File

@ -15,6 +15,6 @@ export class MenuService {
} }
reset() { reset() {
// this.resetSource.next(); // this.resetSource.next(true);
} }
} }

6
src/app/app.menuitem.component.ts
View File

@ -18,7 +18,7 @@ import {AppMainComponent} from './app.main.component';
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i> <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span>{{item.label}}</span> <span>{{item.label}}</span>
<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span> <span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i> <i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i>
</a> </a>
<a (click)="itemClick($event)" *ngIf="(item.routerLink && !item.items) && item.visible !== false" [ngClass]="item.class" <a (click)="itemClick($event)" *ngIf="(item.routerLink && !item.items) && item.visible !== false" [ngClass]="item.class"
[routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink router-link-exact-active" [routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink router-link-exact-active"
@ -26,7 +26,7 @@ import {AppMainComponent} from './app.main.component';
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i> <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span>{{item.label}}</span> <span>{{item.label}}</span>
<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span> <span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i> <i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i>
</a> </a>
<ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')"> <ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')">
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items"> <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
@ -36,7 +36,7 @@ import {AppMainComponent} from './app.main.component';
</ng-container> </ng-container>
`, `,
host: { host: {
'[class.active-menuitem]': 'active' '[class.active-menuitem]': 'active',
}, },
animations: [ animations: [
trigger('children', [ trigger('children', [

8
src/app/app.topbar.component.html
View File

@ -4,16 +4,16 @@
<span>SAKAI</span> <span>SAKAI</span>
</a> </a>
<a class="p-link layout-menu-button layout-topbar-button" href="#" (click)="appMain.toggleMenu($event)"> <a class="p-link layout-menu-button layout-topbar-button" href="#" (click)="appMain.toggleMenu($event)">
<i class="pi pi-bars"></i> <i class="pi pi-bars"></i>
</a> </a>
<a class="p-link layout-topbar-menu-button layout-topbar-button" href="#" (click)="appMain.toggleTopMenu($event)"> <a class="p-link layout-topbar-menu-button layout-topbar-button" href="#" (click)="appMain.toggleTopMenu($event)">
<i class="pi pi-ellipsis-v"></i> <i class="pi pi-ellipsis-v"></i>
</a> </a>
<div class="layout-topbar-menu lg flex origin-top layout-topbar-menu-mobile-active" *ngIf="appMain.topMenuActive"> <div class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active':appMain.topMenuActive,'':appMain.topMenuLeaving}">
<a href="#" class="p-link layout-topbar-button"> <a href="#" class="p-link layout-topbar-button">
<i class="pi pi-calendar"></i> <i class="pi pi-calendar"></i>
<span>Calendar</span> <span>Calendar</span>
</a> </a>

4
src/app/demo/view/dashboard.component.html
View File

@ -64,7 +64,7 @@
<div class="col-12 xl:col-6"> <div class="col-12 xl:col-6">
<div class="card"> <div class="card">
<h5>Recent Sales</h5> <h5>Recent Sales</h5>
<p-table [value]="products" [paginator]="true" [rows]="5"> <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Image</th> <th>Image</th>
@ -76,7 +76,7 @@
<ng-template pTemplate="body" let-product> <ng-template pTemplate="body" let-product>
<tr> <tr>
<td> <td>
<img src="../../../assets/demo/images/product/{{product.image}}" alt="{{product.name}}" width="50px" height="50px"> <img src="../../../assets/demo/images/product/{{product.image}}" alt="{{product.name}}" width="100">
</td> </td>
<td>{{product.name}}</td> <td>{{product.name}}</td>
<td>{{product.price | currency:'USD'}}</td> <td>{{product.price | currency:'USD'}}</td>

2
src/app/demo/view/dashboarddemo.scss
View File

@ -1,2 +0,0 @@
.layout-dashboard {
}

78
src/app/demo/view/documentation.component.html
View File

@ -107,71 +107,71 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
this.model = [ this.model = [
&#123;label: 'Dashboard', icon: 'pi pi-home', routerLink: ['/']&#125;, &#123;label: 'Dashboard', icon: 'pi pi-home', routerLink: ['/']&#125;,
&#123; &#123;
label: 'UI Kit', icon: 'pi pi-star-o', routerLink: ['/uikit'], label: 'UI Kit', icon: 'pi pi-star', routerLink: ['/uikit'],
items: [ items: [
&#123;label: 'Form Layout', icon: 'pi pi-id-card', routerLink: ['/uikit/formlayout']&#125;, &#123;label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']&#125;,
&#123;label: 'Input', icon: 'pi pi-check-square', routerLink: ['/uikit/input']&#125;, &#123;label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']&#125;,
&#123;label: 'Float Label', icon: 'pi pi-bookmark', routerLink: ['/uikit/floatlabel']&#125;, &#123;label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']&#125;,
&#123;label: 'Invalid State', icon: 'pi pi-exclamation-circle', routerLink: ['/uikit/invalidstate']&#125;, &#123;label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate']&#125;,
&#123;label: 'Button', icon: 'pi pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'&#125;, &#123;label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'&#125;,
&#123;label: 'Table', icon: 'pi pi-table', routerLink: ['/uikit/table']&#125;, &#123;label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']&#125;,
&#123;label: 'List', icon: 'pi pi-list', routerLink: ['/uikit/list']&#125;, &#123;label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']&#125;,
&#123;label: 'Tree', icon: 'pi pi-share-alt', routerLink: ['/uikit/tree']&#125;, &#123;label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']&#125;,
&#123;label: 'Panel', icon: 'pi pi-tablet', routerLink: ['/uikit/panel']&#125;, &#123;label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']&#125;,
&#123;label: 'Overlay', icon: 'pi pi-clone', routerLink: ['/uikit/overlay']&#125;, &#123;label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']&#125;,
&#123;label: 'Media', icon: 'pi pi-image', routerLink: ['/uikit/media']&#125;, &#123;label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']&#125;,
&#123;label: 'Menu', icon: 'pi pi-bars', routerLink: ['/uikit/menu']&#125;, &#123;label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']&#125;,
&#123;label: 'Message', icon: 'pi pi-comment', routerLink: ['/uikit/message']&#125;, &#123;label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']&#125;,
&#123;label: 'File', icon: 'pi pi-file', routerLink: ['/uikit/file']&#125;, &#123;label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']&#125;,
&#123;label: 'Chart', icon: 'pi pi-chart-bar', routerLink: ['/uikit/charts']&#125;, &#123;label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']&#125;,
&#123;label: 'Misc', icon: 'pi pi-circle-off', routerLink: ['/uikit/misc']&#125; &#123;label: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc']&#125;
] ]
&#125;, &#125;,
&#123; &#123;
label: 'Pages', icon: 'pi pi-briefcase', routerLink: ['/pages'], label: 'Pages', icon: 'pi pi-fw pi-briefcase', routerLink: ['/pages'],
items: [ items: [
&#123;label: 'Crud', icon: 'pi pi-pencil', routerLink: ['/pages/crud']&#125;, &#123;label: 'Crud', icon: 'pi pi-fw pi-pencil', routerLink: ['/pages/crud']&#125;,
&#123;label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']&#125;, &#123;label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']&#125;,
&#123;label: 'Not Found', icon: 'pi pi-exclamation-circle', routerLink: ['/notfound']&#125;, &#123;label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/notfound']&#125;,
&#123;label: 'Empty', icon: 'pi pi-circle-off', routerLink: ['/pages/empty']&#125; &#123;label: 'Empty', icon: 'pi pi-fw pi-circle-off', routerLink: ['/pages/empty']&#125;
] ]
&#125;, &#125;,
&#123; &#123;
label: 'Hierarchy', icon: 'pi pi-align-left', label: 'Hierarchy', icon: 'pi pi-fw pi-align-left',
items: [ items: [
&#123; &#123;
label: 'Submenu 1', icon: 'pi pi-align-left', label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
&#123; &#123;
label: 'Submenu 1.1', icon: 'pi pi-align-left', label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
&#123;label: 'Submenu 1.1.1', icon: 'pi pi-align-left'&#125;, &#123;label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark'&#125;,
&#123;label: 'Submenu 1.1.2', icon: 'pi pi-align-left'&#125;, &#123;label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark'&#125;,
&#123;label: 'Submenu 1.1.3', icon: 'pi pi-align-left'&#125;, &#123;label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark'&#125;,
] ]
&#125;, &#125;,
&#123; &#123;
label: 'Submenu 1.2', icon: 'pi pi-align-left', label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
&#123;label: 'Submenu 1.2.1', icon: 'pi pi-align-left'&#125; &#123;label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark'&#125;
] ]
&#125;, &#125;,
] ]
&#125;, &#125;,
&#123; &#123;
label: 'Submenu 2', icon: 'pi pi-align-left', label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
&#123; &#123;
label: 'Submenu 2.1', icon: 'pi pi-align-left', label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
&#123;label: 'Submenu 2.1.1', icon: 'pi pi-align-left'&#125;, &#123;label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark'&#125;,
&#123;label: 'Submenu 2.1.2', icon: 'pi pi-align-left'&#125;, &#123;label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark'&#125;,
] ]
&#125;, &#125;,
&#123; &#123;
label: 'Submenu 2.2', icon: 'pi pi-align-left', label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
items: [ items: [
&#123;label: 'Submenu 2.2.1', icon: 'pi pi-align-left'&#125;, &#123;label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark'&#125;,
] ]
&#125;, &#125;,
] ]
@ -179,13 +179,13 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
] ]
&#125;, &#125;,
&#123; &#123;
label: 'Start', icon: 'pi pi-download', label: 'Start', icon: 'pi pi-fw pi-download',
items: [ items: [
&#123; &#123;
label: 'Buy Now', icon: 'pi pi-shopping-cart', url: ['https://www.primefaces.org/store'] label: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', url: ['https://www.primefaces.org/store']
&#125;, &#125;,
&#123; &#123;
label: 'Documentation', icon: 'pi pi-info-circle', routerLink: ['/documentation'] label: 'Documentation', icon: 'pi pi-fw pi-info-circle', routerLink: ['/documentation']
&#125; &#125;
] ]
&#125; &#125;
@ -322,7 +322,7 @@ $menuTooltipTextColor:#ffffff !default;
</app-code> </app-code>
<h5>sass/variables/theme/_theme_light</h5> <h5>sass/variables/theme/_theme_light</h5>
<p>Variables of the light component theme, see the <a href="https://www.primefaces.org/designer/api/primeng/10.0.0/">Theme Designer API</a> for documentation.</p> <p>Variables of the light component theme, see the <a href="https://www.primefaces.org/designer/api/primeng/11.1.0/">Theme Designer API</a> for documentation.</p>
<div style="height:400px;overflow: auto;"> <div style="height:400px;overflow: auto;">
<app-code ngPreserveWhitespaces ngNonBindable lang="css"> <app-code ngPreserveWhitespaces ngNonBindable lang="css">
//reused color variables //reused color variables

20
src/app/demo/view/floatlabeldemo.component.html
View File

@ -1,44 +1,44 @@
<div class="card"> <div class="card">
<h5>Float Label</h5> <h5>Float Label</h5>
<div class="grid p-fluid mt-3"> <div class="grid p-fluid mt-3">
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<input type="text" id="inputtext" pInputText [(ngModel)]="value1"> <input type="text" id="inputtext" pInputText [(ngModel)]="value1">
<label for="inputtext">InputText</label> <label for="inputtext">InputText</label>
</span> </span>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries"
(completeMethod)="searchCountry($event)" field="name"></p-autoComplete> (completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
<label for="autocomplete">AutoComplete</label> <label for="autocomplete">AutoComplete</label>
</span> </span>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-calendar inputId="calendar" [(ngModel)]="value3"></p-calendar> <p-calendar inputId="calendar" [(ngModel)]="value3"></p-calendar>
<label for="calendar">Calendar</label> <label for="calendar">Calendar</label>
</span> </span>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-chips inputId="chips" [(ngModel)]="value4"></p-chips> <p-chips inputId="chips" [(ngModel)]="value4"></p-chips>
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </span>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5"></p-inputMask> <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5"></p-inputMask>
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
</span> </span>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-inputNumber inputId="inputnumber" [(ngModel)]="value6"></p-inputNumber> <p-inputNumber inputId="inputnumber" [(ngModel)]="value6"></p-inputNumber>
<label for="inputnumber">InputNumber</label> <label for="inputnumber">InputNumber</label>
</span> </span>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -49,19 +49,19 @@
</span> </span>
</div> </div>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value8" optionLabel="name"></p-dropdown> <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value8" optionLabel="name"></p-dropdown>
<label for="dropdown">Dropdown</label> <label for="dropdown">Dropdown</label>
</span> </span>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value9" optionLabel="name" [filter]="false"></p-multiSelect> <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value9" optionLabel="name" [filter]="false"></p-multiSelect>
<label for="multiselect">MultiSelect</label> <label for="multiselect">MultiSelect</label>
</span> </span>
</div> </div>
<div class="p-field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value10" pInputTextarea></textarea> <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value10" pInputTextarea></textarea>
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>

4
src/app/demo/view/inputdemo.component.html
View File

@ -47,10 +47,10 @@
<textarea pInputTextarea placeholder="Your Message" autoResize rows="3" cols="30"></textarea> <textarea pInputTextarea placeholder="Your Message" autoResize rows="3" cols="30"></textarea>
<h5>AutoComplete</h5> <h5>AutoComplete</h5>
<p-autoComplete placeholder="Search" id="dd" dropdown multiple></p-autoComplete> <p-autoComplete placeholder="Search" id="dd" [dropdown]="true" [multiple]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
<h5>Calendar</h5> <h5>Calendar</h5>
<p-calendar showIcon showButtonBar></p-calendar> <p-calendar [showIcon]="true" [showButtonBar]="true" [(ngModel)]="selectedDate"></p-calendar>
<h5>InputNumber</h5> <h5>InputNumber</h5>
<p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100"> <p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100">

2
src/app/demo/view/inputdemo.component.ts
View File

@ -85,6 +85,8 @@ export class InputDemoComponent implements OnInit{
valueKnob = 20; valueKnob = 20;
selectedDate:any;
constructor(private countryService: CountryService) {} constructor(private countryService: CountryService) {}
ngOnInit() { ngOnInit() {

98
src/app/demo/view/invalidstatedemo.component.html
View File

@ -1,55 +1,51 @@
<div class="grid p-fluid"> <div class="card floatlabel-demo">
<div class="col"> <h5>Invalid State</h5>
<div class="card"> <div class="grid p-fluid">
<h5>Invalid State</h5> <div class="col-12 md:col-6">
<div class="grid"> <div class="field mt-3">
<div class="col-12 md:col-6"> <label for="inputtext">InputText</label>
<div class="p-field my-3"> <input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty">
<label for="inputtext">InputText</label> </div>
<input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty"> <div class="field">
</div> <label for="autocomplete">AutoComplete</label>
<div class="p-field my-3"> <p-autoComplete inputId="autocomplete" [(ngModel)]="value1" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
<label for="autocomplete">AutoComplete</label>
<p-autoComplete inputId="autocomplete" [(ngModel)]="value1" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
</div> </div>
<div class="p-field my-3"> <div class="field">
<label for="calendar">Calendar</label> <label for="calendar">Calendar</label>
<p-calendar inputId="calendar" [(ngModel)]="value2" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar> <p-calendar inputId="calendar" [(ngModel)]="value2" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar>
</div> </div>
<div class="p-field my-3"> <div class="field">
<label for="chips">Chips</label> <label for="chips">Chips</label>
<p-chips inputId="chips" [(ngModel)]="value3" class="ng-invalid ng-dirty"></p-chips> <p-chips inputId="chips" [(ngModel)]="value3" class="ng-invalid ng-dirty"></p-chips>
</div> </div>
<div class="p-field my-3"> <div class="field">
<label for="password">Password</label> <label for="password">Password</label>
<p-password [(ngModel)]="value8" class="ng-invalid ng-dirty"></p-password> <p-password [(ngModel)]="value8" class="ng-invalid ng-dirty"></p-password>
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<div class="p-field my-3"> <div class="field mt-3">
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask> <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask>
</div> </div>
<div class="p-field my-3"> <div class="field">
<label for="inputnumber">InputNumber</label> <label for="inputnumber">InputNumber</label>
<p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber> <p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber>
</div> </div>
<div class="p-field my-3"> <div class="field">
<label for="dropdown">Dropdown</label> <label for="dropdown">Dropdown</label>
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value9" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown> <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value9" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown>
</div> </div>
<div class="p-field my-3"> <div class="field">
<label for="multiselect">MultiSelect</label> <label for="multiselect">MultiSelect</label>
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value10" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect> <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value10" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
</div> </div>
<div class="p-field my-3"> <div class="field">
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value4" pInputTextarea class="ng-invalid ng-dirty"></textarea> <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value4" pInputTextarea class="ng-invalid ng-dirty"></textarea>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

2
src/app/demo/view/menusdemo.component.ts
View File

@ -340,7 +340,7 @@ export class MenusDemoComponent implements OnInit {
] ]
}, },
{ {
label: 'Sports', icon: 'pi pi-fw pi-star-o', label: 'Sports', icon: 'pi pi-fw pi-star',
items: [ items: [
[ [
{ {

4
src/app/demo/view/messagesdemo.component.html
View File

@ -2,7 +2,7 @@
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
<div class="card"> <div class="card">
<h5>Toast</h5> <h5>Toast</h5>
<p-toast key="tst"></p-toast> <p-toast key="tst" [baseZIndex]="99999"></p-toast>
<button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2 mb-2"></button> <button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2 mb-2"></button>
<button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2 mb-2"></button> <button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2 mb-2"></button>
<button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2 mb-2"></button> <button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
@ -11,7 +11,7 @@
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
<div class="card"> <div class="card z-3">
<h5>Messages</h5> <h5>Messages</h5>
<button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2 mb-2"></button> <button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2 mb-2"></button>
<button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2 mb-2"></button> <button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2 mb-2"></button>

7
src/app/demo/view/messagesdemo.component.ts
View File

@ -6,11 +6,18 @@ import {Message, MessageService} from 'primeng/api';
styles: [` styles: [`
:host ::ng-deep .p-button { :host ::ng-deep .p-button {
min-width: 8em; min-width: 8em;
z-index:10000;
} }
:host ::ng-deep .p-message { :host ::ng-deep .p-message {
margin-left: .25em; margin-left: .25em;
z-index:10000;
} }
:host ::ng-deep .p-toast{
margin-top: 5em;
z-index:99999;
}
`], `],
providers: [MessageService] providers: [MessageService]
}) })

2
src/app/demo/view/overlaysdemo.component.html
View File

@ -3,7 +3,7 @@
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Dialog</h5> <h5>Dialog</h5>
<p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '40vw'}"> <p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '400px'}">
<div style="line-height: 1.5"> <div style="line-height: 1.5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit

3
src/app/demo/view/overlaysdemo.component.ts
View File

@ -1,6 +1,7 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {ConfirmationService, MessageService} from 'primeng/api'; import {ConfirmationService, MessageService} from 'primeng/api';
import {Product} from '../domain/product'; import {Product} from '../domain/product';
import {AppMainComponent} from 'src/app/app.main.component';
import {ProductService} from '../service/productservice'; import {ProductService} from '../service/productservice';
@Component({ @Component({
@ -28,7 +29,7 @@ export class OverlaysDemoComponent implements OnInit {
visibleSidebar5; visibleSidebar5;
constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) {} constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService, public appMain: AppMainComponent) {}
ngOnInit() { ngOnInit() {
this.productService.getProductsSmall().then(products => this.products = products); this.productService.getProductsSmall().then(products => this.products = products);

6
src/app/demo/view/overlaysdemo.scss
View File

@ -6,3 +6,9 @@
:host ::ng-deep button { :host ::ng-deep button {
margin-right: .25em; margin-right: .25em;
} }
@media (max-width: 1024px){
:host ::ng-deep .p-dialog{
margin: 0 20px;
}
}

2
src/app/demo/view/panelsdemo.component.html
View File

@ -126,8 +126,6 @@
<button pButton type="button" icon="pi pi-plus" class="p-button-rounded p-button-plain p-button-text" <button pButton type="button" icon="pi pi-plus" class="p-button-rounded p-button-plain p-button-text"
(click)="menu.toggle($event)"></button> (click)="menu.toggle($event)"></button>
</div> </div>
<p class="card-subtitle">Subtitle</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

156
src/app/demo/view/tabledemo.component.html
View File

@ -4,11 +4,14 @@
<h5>Default</h5> <h5>Default</h5>
<p>Pagination, sorting, filtering and checkbox selection.</p> <p>Pagination, sorting, filtering and checkbox selection.</p>
<p-table #dt [value]="customers1" [(selection)]="selectedCustomers1" dataKey="id" <p-table #dt [value]="customers1" [(selection)]="selectedCustomers1" dataKey="id"
styleClass="p-datatable-customers" [rowHover]="true" [rows]="10" [paginator]="true" responsiveLayout="scroll"
styleClass="p-datatable-customers p-datatable-selectable" [rowHover]="true" [rows]="10" [paginator]="true"
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']"> [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
<ng-template pTemplate="caption"> <ng-template pTemplate="caption">
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header"> <div class="flex flex-sm-column flex-md-row justify-content-md-between table-header md:align-items-end">
List of Customers <h6>
List of Customers
</h6>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/> <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
@ -70,16 +73,20 @@
</td> </td>
<td> <td>
<span class="p-column-title">Country</span> <span class="p-column-title">Country</span>
<img src="assets/demo/flags/flag_placeholder.png" <div>
[class]="'flag flag-' + customer.country.code" width="30"> <img src="assets/demo/flags/flag_placeholder.png"
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span> [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
</div>
</td> </td>
<td> <td>
<span class="p-column-title">Representative</span> <span class="p-column-title">Representative</span>
<img [alt]="customer.representative.name" <div>
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" <img [alt]="customer.representative.name"
style="vertical-align: middle"/> src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span> style="vertical-align: middle"/>
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
</div>
</td> </td>
<td> <td>
<span class="p-column-title">Date</span> <span class="p-column-title">Date</span>
@ -112,7 +119,7 @@
<h5>Customized</h5> <h5>Customized</h5>
<p>Scrollable table with gridlines (<mark>.p-datatable-gridlines</mark>), striped rows (<mark>.p-datatable-striped</mark>) and smaller paddings (<mark>p-datatable-sm</mark>).</p> <p>Scrollable table with gridlines (<mark>.p-datatable-gridlines</mark>), striped rows (<mark>.p-datatable-striped</mark>) and smaller paddings (<mark>p-datatable-sm</mark>).</p>
<p-table #dtc [value]="customers2" [(selection)]="selectedCustomer" dataKey="id" selectionMode="single" <p-table #dtc [value]="customers2" [(selection)]="selectedCustomer" dataKey="id" selectionMode="single"
styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm" styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm" responsiveLayout="scroll"
[scrollable]="true" scrollHeight="600px" [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']"> [scrollable]="true" scrollHeight="600px" [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
<ng-template pTemplate="caption"> <ng-template pTemplate="caption">
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header"> <div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
@ -187,14 +194,49 @@
</div> </div>
</div> </div>
<div class="col-12">
<div class="card">
<h5>Frozen Columns</h5>
<p-toggleButton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Id'" offLabel="Freeze Id" [style]="{'width': '12rem'}"></p-toggleButton>
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th style="width:200px" pFrozenColumn>Name</th>
<th style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
<th style="width:200px">Country</th>
<th style="width:200px">Date</th>
<th style="width:200px">Company</th>
<th style="width:200px">Status</th>
<th style="width:200px">Activity</th>
<th style="width:200px">Representative</th>
<th style="width:200px">Balance</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="width:200px" pFrozenColumn>{{customer.name}}</td>
<td style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
<td style="width:200px">{{customer.country.name}}</td>
<td style="width:200px">{{customer.date}}</td>
<td style="width:200px">{{customer.company}}</td>
<td style="width:200px">{{customer.status}}</td>
<td style="width:200px">{{customer.activity}}</td>
<td style="width:200px">{{customer.representative.name}}</td>
<td style="width:200px">{{formatCurrency(customer.balance)}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<div class="col-12"> <div class="col-12">
<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 rowexpand-table"> <p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" styleClass="p-datatable-customers p-datatable-selectable rowexpand-table" responsiveLayout="scroll">
<ng-template pTemplate="caption"> <ng-template pTemplate="caption">
<button pButton icon="pi pi-fw pi-plus" label="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>
<button pButton icon="pi pi-fw pi-minus" class="ml-2" label="Collapse All" (click)="collapseAll()"></button>
<div class="flex table-header"> <div class="flex table-header">
</div> </div>
</ng-template> </ng-template>
@ -259,49 +301,49 @@
</ng-template> </ng-template>
</p-table> </p-table>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<h5>Row Group and Scrolling</h5> <h5>Row Group and Scrolling</h5>
<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" [scrollable]="true" scrollHeight="600px" <p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="600px"
styleClass="p-datatable-customers"> styleClass="p-datatable-customers">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Country</th> <th>Country</th>
<th>Company</th> <th>Company</th>
<th>Status</th> <th>Status</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex"> <ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex"> <tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<td colspan="5"> <td colspan="5">
<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="p-text-bold p-ml-2">{{customer.representative.name}}</span> <span class="p-text-bold ml-2">{{customer.representative.name}}</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><span class="p-column-title">Name</span> <td><span class="p-column-title">Name</span>
{{customer.name}} {{customer.name}}
</td> </td>
<td><span class="p-column-title">Country</span> <td><span class="p-column-title">Country</span>
<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><span class="p-column-title">Company</span> <td><span class="p-column-title">Company</span>
{{customer.company}} {{customer.company}}
</td> </td>
<td><span class="p-column-title">Status</span> <td><span class="p-column-title">Status</span>
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span> <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td> </td>
<td><span class="p-column-title">Date</span> <td><span class="p-column-title">Date</span>
{{customer.date}} {{customer.date}}
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
</div>
</div> </div>
</div> </div>
</div>

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

@ -49,6 +49,8 @@ export class TableDemoComponent implements OnInit {
isExpanded: boolean = false; isExpanded: boolean = false;
idFrozen: boolean = false;
@ViewChild('dt') table: Table; @ViewChild('dt') table: Table;
constructor(private customerService: CustomerService, private productService: ProductService, private messageService: MessageService, private confirmService: ConfirmationService, private cd: ChangeDetectorRef) {} constructor(private customerService: CustomerService, private productService: ProductService, private messageService: MessageService, private confirmService: ConfirmationService, private cd: ChangeDetectorRef) {}
@ -60,7 +62,7 @@ export class TableDemoComponent implements OnInit {
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.getCustomersMedium().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 = [
@ -125,7 +127,7 @@ export class TableDemoComponent implements OnInit {
this.isExpanded = !this.isExpanded; this.isExpanded = !this.isExpanded;
} }
collapseAll(){ formatCurrency(value) {
this.products.forEach(product => this.expandedRows[product.name] = false); return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
} }
} }

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

@ -3,6 +3,7 @@
.p-progressbar { .p-progressbar {
height: .5rem; height: .5rem;
background-color: #D8DADC; background-color: #D8DADC;
min-width:100px;
.p-progressbar-value { .p-progressbar-value {
background-color: #607D8B; background-color: #607D8B;
@ -180,8 +181,20 @@
} }
} }
} }
&.p-datatable-selectable{
.p-datatable-tbody>tr{
>td{
display:flex !important;
justify-content: space-between;
}
}
}
} }
} }
} }
} }

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

@ -77,40 +77,52 @@
<p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" styleClass="p-fluid"> <p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" styleClass="p-fluid">
<ng-template pTemplate="content"> <ng-template pTemplate="content">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" class="product-image" *ngIf="product.image"> <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" class="product-image" *ngIf="product.image">
<div class="p-field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus /> <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
<small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small> <small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
</div> </div>
<div class="p-field"> <div class="field">
<label for="description">Description</label> <label for="description">Description</label>
<textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea> <textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
</div> </div>
<div class="p-field"> <div class="field">
<label class="mb-3">Category</label> <label for="status">Inventory Status</label>
<div class="p-formgrid grid"> <p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="selectedStatus" placeholder="Select a Status" >
<div class="p-field-radiobutton col-6"> <ng-template pTemplate="selectedItem">
<span *ngIf="selectedStatus" [class]="'product-badge status-' + selectedStatus.value.toLowerCase()">{{selectedStatus.label}}</span>
</ng-template>
<ng-template let-status pTemplate="status">
<span [class]="'product-badge status-' + status.value.toLowerCase()">{{status.label}}</span>
</ng-template>
</p-dropdown>
</div>
<div class="field">
<label>Category</label>
<div class="formgrid grid">
<div class="field-radiobutton col-6">
<p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton> <p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
<label for="category1">Accessories</label> <label for="category1">Accessories</label>
</div> </div>
<div class="p-field-radiobutton col-6"> <div class="field-radiobutton col-6">
<p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton> <p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton>
<label for="category2">Clothing</label> <label for="category2">Clothing</label>
</div> </div>
<div class="p-field-radiobutton col-6"> <div class="field-radiobutton col-6">
<p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton> <p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton>
<label for="category3">Electronics</label> <label for="category3">Electronics</label>
</div> </div>
<div class="p-field-radiobutton col-6"> <div class="field-radiobutton col-6">
<p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton> <p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton>
<label for="category4">Fitness</label> <label for="category4">Fitness</label>
</div> </div>
</div> </div>
</div> </div>
<div class="p-formgrid grid"> <div class="formgrid grid">
<div class="p-field col"> <div class="field col">
<label for="price">Price</label> <label for="price">Price</label>
<p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber> <p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
</div> </div>

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

@ -40,6 +40,10 @@ export class AppCrudComponent implements OnInit {
cols: any[]; cols: any[];
statuses: any[];
selectedStatus:any;
rowsPerPageOptions = [5, 10, 20]; rowsPerPageOptions = [5, 10, 20];
constructor(private productService: ProductService, private messageService: MessageService, constructor(private productService: ProductService, private messageService: MessageService,
@ -55,6 +59,12 @@ export class AppCrudComponent implements OnInit {
{field: 'rating', header: 'Reviews'}, {field: 'rating', header: 'Reviews'},
{field: 'inventoryStatus', header: 'Status'} {field: 'inventoryStatus', header: 'Status'}
]; ];
this.statuses = [
{label: 'INSTOCK', value: 'instock'},
{label: 'LOWSTOCK', value: 'lowstock'},
{label: 'OUTOFSTOCK', value: 'outofstock'}
];
} }
openNew() { openNew() {

4
src/assets/sass/layout/_topbar.scss
View File

@ -118,8 +118,8 @@
top: 5rem; top: 5rem;
min-width: 15rem; min-width: 15rem;
display: none; display: none;
-webkit-animation: scalein 0.15s linear; // -webkit-animation: scalein 0.15s linear;
animation: scalein 0.15s linear; // animation: scalein 0.15s linear;
&.layout-topbar-menu-mobile-active { &.layout-topbar-menu-mobile-active {
display: block display: block

2
src/styles.scss
View File

@ -357,8 +357,6 @@
} }
} }
.crud-demo { .crud-demo {
.p-toolbar { .p-toolbar {
flex-wrap: wrap; flex-wrap: wrap;