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 {
this.menuActiveMobile = !this.menuActiveMobile;
this.topMenuActive = false;
}
event.preventDefault();
@ -127,7 +128,7 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
setTimeout(() => {
this.topMenuActive = false;
this.topMenuLeaving = false;
}, 500);
}, 1);
}
onMenuClick() {
@ -155,6 +156,10 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
return window.innerWidth > 1024;
}
isMobile(){
return window.innerWidth < 1024;
}
onSearchClick() {
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>
</ul>
</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"/>
</a>
</ul>
@ -41,7 +41,7 @@ export class AppMenuComponent implements OnInit {
{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: '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: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']},
{label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']},
@ -67,38 +67,38 @@ export class AppMenuComponent implements OnInit {
label: 'Hierarchy',
items: [
{
label: 'Submenu 1', icon: 'pi pi-fw pi-align-left',
label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
items: [
{
label: 'Submenu 1.1', icon: 'pi pi-fw pi-align-left',
label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
items: [
{label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-align-left'},
{label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-align-left'},
{label: 'Submenu 1.1.3', 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-bookmark'},
{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: [
{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: [
{
label: 'Submenu 2.1', icon: 'pi pi-fw pi-align-left',
label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
items: [
{label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-align-left'},
{label: 'Submenu 2.1.2', 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-bookmark'},
]
},
{
label: 'Submenu 2.2', icon: 'pi pi-fw pi-align-left',
label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
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() {
// 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>
<span>{{item.label}}</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 (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"
@ -26,7 +26,7 @@ import {AppMainComponent} from './app.main.component';
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
<span>{{item.label}}</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>
<ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')">
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
@ -36,7 +36,7 @@ import {AppMainComponent} from './app.main.component';
</ng-container>
`,
host: {
'[class.active-menuitem]': 'active'
'[class.active-menuitem]': 'active',
},
animations: [
trigger('children', [

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

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

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

@ -64,7 +64,7 @@
<div class="col-12 xl:col-6">
<div class="card">
<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">
<tr>
<th>Image</th>
@ -76,7 +76,7 @@
<ng-template pTemplate="body" let-product>
<tr>
<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>{{product.name}}</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 = [
&#123;label: 'Dashboard', icon: 'pi pi-home', routerLink: ['/']&#125;,
&#123;
label: 'UI Kit', icon: 'pi pi-star-o', routerLink: ['/uikit'],
label: 'UI Kit', icon: 'pi pi-star', routerLink: ['/uikit'],
items: [
&#123;label: 'Form Layout', icon: 'pi pi-id-card', routerLink: ['/uikit/formlayout']&#125;,
&#123;label: 'Input', icon: 'pi pi-check-square', routerLink: ['/uikit/input']&#125;,
&#123;label: 'Float Label', icon: 'pi pi-bookmark', routerLink: ['/uikit/floatlabel']&#125;,
&#123;label: 'Invalid State', icon: 'pi pi-exclamation-circle', routerLink: ['/uikit/invalidstate']&#125;,
&#123;label: 'Button', icon: 'pi pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'&#125;,
&#123;label: 'Table', icon: 'pi pi-table', routerLink: ['/uikit/table']&#125;,
&#123;label: 'List', icon: 'pi pi-list', routerLink: ['/uikit/list']&#125;,
&#123;label: 'Tree', icon: 'pi pi-share-alt', routerLink: ['/uikit/tree']&#125;,
&#123;label: 'Panel', icon: 'pi pi-tablet', routerLink: ['/uikit/panel']&#125;,
&#123;label: 'Overlay', icon: 'pi pi-clone', routerLink: ['/uikit/overlay']&#125;,
&#123;label: 'Media', icon: 'pi pi-image', routerLink: ['/uikit/media']&#125;,
&#123;label: 'Menu', icon: 'pi pi-bars', routerLink: ['/uikit/menu']&#125;,
&#123;label: 'Message', icon: 'pi pi-comment', routerLink: ['/uikit/message']&#125;,
&#123;label: 'File', icon: 'pi pi-file', routerLink: ['/uikit/file']&#125;,
&#123;label: 'Chart', icon: 'pi pi-chart-bar', routerLink: ['/uikit/charts']&#125;,
&#123;label: 'Misc', icon: 'pi pi-circle-off', routerLink: ['/uikit/misc']&#125;
&#123;label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']&#125;,
&#123;label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']&#125;,
&#123;label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']&#125;,
&#123;label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate']&#125;,
&#123;label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'&#125;,
&#123;label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']&#125;,
&#123;label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']&#125;,
&#123;label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']&#125;,
&#123;label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']&#125;,
&#123;label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']&#125;,
&#123;label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']&#125;,
&#123;label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']&#125;,
&#123;label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']&#125;,
&#123;label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']&#125;,
&#123;label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']&#125;,
&#123;label: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc']&#125;
]
&#125;,
&#123;
label: 'Pages', icon: 'pi pi-briefcase', routerLink: ['/pages'],
label: 'Pages', icon: 'pi pi-fw pi-briefcase', routerLink: ['/pages'],
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: 'Not Found', icon: 'pi pi-exclamation-circle', routerLink: ['/notfound']&#125;,
&#123;label: 'Empty', icon: 'pi pi-circle-off', routerLink: ['/pages/empty']&#125;
&#123;label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/notfound']&#125;,
&#123;label: 'Empty', icon: 'pi pi-fw pi-circle-off', routerLink: ['/pages/empty']&#125;
]
&#125;,
&#123;
label: 'Hierarchy', icon: 'pi pi-align-left',
label: 'Hierarchy', icon: 'pi pi-fw pi-align-left',
items: [
&#123;
label: 'Submenu 1', icon: 'pi pi-align-left',
label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
items: [
&#123;
label: 'Submenu 1.1', icon: 'pi pi-align-left',
label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
items: [
&#123;label: 'Submenu 1.1.1', icon: 'pi pi-align-left'&#125;,
&#123;label: 'Submenu 1.1.2', icon: 'pi pi-align-left'&#125;,
&#123;label: 'Submenu 1.1.3', 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-fw pi-bookmark'&#125;,
&#123;label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark'&#125;,
]
&#125;,
&#123;
label: 'Submenu 1.2', icon: 'pi pi-align-left',
label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
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;,
&#123;
label: 'Submenu 2', icon: 'pi pi-align-left',
label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
items: [
&#123;
label: 'Submenu 2.1', icon: 'pi pi-align-left',
label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
items: [
&#123;label: 'Submenu 2.1.1', icon: 'pi pi-align-left'&#125;,
&#123;label: 'Submenu 2.1.2', 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-fw pi-bookmark'&#125;,
]
&#125;,
&#123;
label: 'Submenu 2.2', icon: 'pi pi-align-left',
label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
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;,
]
@ -179,13 +179,13 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
]
&#125;,
&#123;
label: 'Start', icon: 'pi pi-download',
label: 'Start', icon: 'pi pi-fw pi-download',
items: [
&#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;,
&#123;
label: 'Documentation', icon: 'pi pi-info-circle', routerLink: ['/documentation']
label: 'Documentation', icon: 'pi pi-fw pi-info-circle', routerLink: ['/documentation']
&#125;
]
&#125;
@ -322,7 +322,7 @@ $menuTooltipTextColor:#ffffff !default;
</app-code>
<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;">
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
//reused color variables

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

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

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

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

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

@ -2,7 +2,7 @@
<div class="col-12 lg:col-6">
<div class="card">
<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)="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>
@ -11,7 +11,7 @@
</div>
<div class="col-12 lg:col-6">
<div class="card">
<div class="card z-3">
<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)="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: [`
:host ::ng-deep .p-button {
min-width: 8em;
z-index:10000;
}
:host ::ng-deep .p-message {
margin-left: .25em;
z-index:10000;
}
:host ::ng-deep .p-toast{
margin-top: 5em;
z-index:99999;
}
`],
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="card p-fluid">
<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">
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

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

@ -1,6 +1,7 @@
import {Component, OnInit} from '@angular/core';
import {ConfirmationService, MessageService} from 'primeng/api';
import {Product} from '../domain/product';
import {AppMainComponent} from 'src/app/app.main.component';
import {ProductService} from '../service/productservice';
@Component({
@ -28,7 +29,7 @@ export class OverlaysDemoComponent implements OnInit {
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() {
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 {
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"
(click)="menu.toggle($event)"></button>
</div>
<p class="card-subtitle">Subtitle</p>
<p>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

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

@ -4,11 +4,14 @@
<h5>Default</h5>
<p>Pagination, sorting, filtering and checkbox selection.</p>
<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']">
<ng-template pTemplate="caption">
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
List of Customers
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header md:align-items-end">
<h6>
List of Customers
</h6>
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
@ -70,16 +73,20 @@
</td>
<td>
<span class="p-column-title">Country</span>
<img src="assets/demo/flags/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
<div>
<img src="assets/demo/flags/flag_placeholder.png"
[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>
<span class="p-column-title">Representative</span>
<img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle"/>
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
<div>
<img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle"/>
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
</div>
</td>
<td>
<span class="p-column-title">Date</span>
@ -112,7 +119,7 @@
<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-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']">
<ng-template pTemplate="caption">
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
@ -187,14 +194,49 @@
</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="card">
<h5>Row Expand</h5>
<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">
<button pButton icon="pi pi-fw pi-plus" label="Expand All" (click)="expandAll()"></button>
<button pButton icon="pi pi-fw pi-minus" class="ml-2" label="Collapse All" (click)="collapseAll()"></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>
</ng-template>
@ -259,49 +301,49 @@
</ng-template>
</p-table>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<h5>Row Group and Scrolling</h5>
<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" [scrollable]="true" scrollHeight="600px"
styleClass="p-datatable-customers">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Status</th>
<th>Date</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<td colspan="5">
<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>
</td>
</tr>
<tr>
<td><span class="p-column-title">Name</span>
{{customer.name}}
</td>
<td><span class="p-column-title">Country</span>
<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><span class="p-column-title">Company</span>
{{customer.company}}
</td>
<td><span class="p-column-title">Status</span>
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td><span class="p-column-title">Date</span>
{{customer.date}}
</td>
</tr>
</ng-template>
</p-table>
<div class="col-12">
<div class="card">
<h5>Row Group and Scrolling</h5>
<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="600px"
styleClass="p-datatable-customers">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Status</th>
<th>Date</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<td colspan="5">
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="p-text-bold ml-2">{{customer.representative.name}}</span>
</td>
</tr>
<tr>
<td><span class="p-column-title">Name</span>
{{customer.name}}
</td>
<td><span class="p-column-title">Country</span>
<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><span class="p-column-title">Company</span>
{{customer.company}}
</td>
<td><span class="p-column-title">Status</span>
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td><span class="p-column-title">Date</span>
{{customer.date}}
</td>
</tr>
</ng-template>
</p-table>
</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;
idFrozen: boolean = false;
@ViewChild('dt') table: Table;
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.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.representatives = [
@ -125,7 +127,7 @@ export class TableDemoComponent implements OnInit {
this.isExpanded = !this.isExpanded;
}
collapseAll(){
this.products.forEach(product => this.expandedRows[product.name] = false);
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
}

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

@ -3,6 +3,7 @@
.p-progressbar {
height: .5rem;
background-color: #D8DADC;
min-width:100px;
.p-progressbar-value {
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">
<ng-template pTemplate="content">
<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>
<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>
</div>
<div class="p-field">
<div class="field">
<label for="description">Description</label>
<textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
</div>
<div class="p-field">
<label class="mb-3">Category</label>
<div class="p-formgrid grid">
<div class="p-field-radiobutton col-6">
<div class="field">
<label for="status">Inventory Status</label>
<p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="selectedStatus" placeholder="Select a Status" >
<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>
<label for="category1">Accessories</label>
</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>
<label for="category2">Clothing</label>
</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>
<label for="category3">Electronics</label>
</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>
<label for="category4">Fitness</label>
</div>
</div>
</div>
<div class="p-formgrid grid">
<div class="p-field col">
<div class="formgrid grid">
<div class="field col">
<label for="price">Price</label>
<p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
</div>

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

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

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

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

2
src/styles.scss
View File

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