add template
This commit is contained in:
Cetin Cakiroglu
20
src/app/demo/domain/customer.ts
Normal file
20
src/app/demo/domain/customer.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
export interface Country {
|
||||
name?: string;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
export interface Representative {
|
||||
name?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
export interface Customer {
|
||||
id?: number;
|
||||
name?: string;
|
||||
country?: Country;
|
||||
company?: string;
|
||||
date?: string;
|
||||
status?: string;
|
||||
activity?: number;
|
||||
representative?: Representative;
|
||||
}
|
||||
6
src/app/demo/domain/image.ts
Normal file
6
src/app/demo/domain/image.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface Image {
|
||||
previewImageSrc?;
|
||||
thumbnailImageSrc?;
|
||||
alt?;
|
||||
title?;
|
||||
}
|
||||
12
src/app/demo/domain/product.ts
Executable file
12
src/app/demo/domain/product.ts
Executable file
@@ -0,0 +1,12 @@
|
||||
export interface Product {
|
||||
id?: string;
|
||||
code?: string;
|
||||
name?: string;
|
||||
description?: string;
|
||||
price?: number;
|
||||
quantity?: number;
|
||||
inventoryStatus?: string;
|
||||
category?: string;
|
||||
image?: string;
|
||||
rating?: number;
|
||||
}
|
||||
15
src/app/demo/service/countryservice.ts
Executable file
15
src/app/demo/service/countryservice.ts
Executable file
@@ -0,0 +1,15 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class CountryService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getCountries() {
|
||||
return this.http.get<any>('assets/demo/data/countries.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as any[])
|
||||
.then(data => data);
|
||||
}
|
||||
}
|
||||
31
src/app/demo/service/customerservice.ts
Normal file
31
src/app/demo/service/customerservice.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Customer } from '../domain/customer';
|
||||
|
||||
@Injectable()
|
||||
export class CustomerService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getCustomersSmall() {
|
||||
return this.http.get<any>('assets/demo/data/customers-small.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Customer[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getCustomersMedium() {
|
||||
return this.http.get<any>('assets/demo/data/customers-medium.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Customer[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getCustomersLarge() {
|
||||
return this.http.get<any>('assets/demo/data/customers-large.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Customer[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
}
|
||||
15
src/app/demo/service/eventservice.ts
Executable file
15
src/app/demo/service/eventservice.ts
Executable file
@@ -0,0 +1,15 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class EventService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getEvents() {
|
||||
return this.http.get<any>('assets/demo/data/scheduleevents.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as any[])
|
||||
.then(data => data);
|
||||
}
|
||||
}
|
||||
22
src/app/demo/service/iconservice.ts
Executable file
22
src/app/demo/service/iconservice.ts
Executable file
@@ -0,0 +1,22 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import {map} from 'rxjs/operators';
|
||||
|
||||
@Injectable()
|
||||
export class IconService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
icons: any[];
|
||||
|
||||
selectedIcon: any;
|
||||
|
||||
apiUrl = 'assets/demo/data/icons.json';
|
||||
|
||||
getIcons() {
|
||||
return this.http.get(this.apiUrl).pipe(map((response: any) => {
|
||||
this.icons = response.icons;
|
||||
return this.icons;
|
||||
}));
|
||||
}
|
||||
}
|
||||
34
src/app/demo/service/nodeservice.ts
Executable file
34
src/app/demo/service/nodeservice.ts
Executable file
@@ -0,0 +1,34 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { TreeNode } from 'primeng/api';
|
||||
|
||||
@Injectable()
|
||||
export class NodeService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getFiles() {
|
||||
return this.http.get<any>('assets/demo/data/files.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as TreeNode[]);
|
||||
}
|
||||
|
||||
getLazyFiles() {
|
||||
return this.http.get<any>('assets/demo/data/files-lazy.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as TreeNode[]);
|
||||
}
|
||||
|
||||
getFilesystem() {
|
||||
return this.http.get<any>('assets/demo/data/filesystem.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as TreeNode[]);
|
||||
}
|
||||
|
||||
getLazyFilesystem() {
|
||||
return this.http.get<any>('assets/demo/data/filesystem-lazy.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as TreeNode[]);
|
||||
}
|
||||
}
|
||||
17
src/app/demo/service/photoservice.ts
Normal file
17
src/app/demo/service/photoservice.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Image } from '../domain/image';
|
||||
|
||||
@Injectable()
|
||||
export class PhotoService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getImages() {
|
||||
return this.http.get<any>('assets/demo/data/photos.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Image[])
|
||||
.then(data => data);
|
||||
}
|
||||
}
|
||||
38
src/app/demo/service/productservice.ts
Executable file
38
src/app/demo/service/productservice.ts
Executable file
@@ -0,0 +1,38 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Product } from '../domain/product';
|
||||
|
||||
@Injectable()
|
||||
export class ProductService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getProductsSmall() {
|
||||
return this.http.get<any>('assets/demo/data/products-small.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Product[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getProducts() {
|
||||
return this.http.get<any>('assets/demo/data/products.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Product[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getProductsMixed() {
|
||||
return this.http.get<any>('assets/demo/data/products-mixed.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Product[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getProductsWithOrdersSmall() {
|
||||
return this.http.get<any>('assets/demo/data/products-orders-small.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Product[])
|
||||
.then(data => data);
|
||||
}
|
||||
}
|
||||
127
src/app/demo/view/buttondemo.component.html
Normal file
127
src/app/demo/view/buttondemo.component.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<div class="grid button-demo">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<button pButton label="Submit" class="mr-2 mb-2"></button>
|
||||
<button pButton label="Disabled" disabled="true" class="mr-2 mb-2"></button>
|
||||
<p-button label="Link" styleClass="p-button-link mr-2 mb-2"></p-button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Text</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-success p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-info p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-help p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Outlined</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Button Set</h5>
|
||||
<span class="p-buttonset">
|
||||
<button pButton pRipple label="Save" icon="pi pi-check"></button>
|
||||
<button pButton pRipple label="Delete" icon="pi pi-trash"></button>
|
||||
<button pButton pRipple label="Cancel" icon="pi pi-times"></button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>SplitButton</h5>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger mr-2 mb-2"></p-splitButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Icons</h5>
|
||||
<button pButton icon="pi pi-star" class="mr-2 mb-2"></button>
|
||||
<button pButton label="Submit" icon="pi pi-bookmark" class="mr-2 mb-2"></button>
|
||||
<button pButton label="Submit" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Raised</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-raised mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-rounded mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Icons</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Text</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Outlined</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
20
src/app/demo/view/buttondemo.component.ts
Normal file
20
src/app/demo/view/buttondemo.component.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {MenuItem} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './buttondemo.component.html'
|
||||
})
|
||||
export class ButtonDemoComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
ngOnInit() {
|
||||
this.items = [
|
||||
{label: 'Update', icon: 'pi pi-refresh'},
|
||||
{label: 'Delete', icon: 'pi pi-times'},
|
||||
{label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io'},
|
||||
{separator: true},
|
||||
{label: 'Setup', icon: 'pi pi-cog'}
|
||||
];
|
||||
}
|
||||
}
|
||||
42
src/app/demo/view/chartsdemo.component.html
Executable file
42
src/app/demo/view/chartsdemo.component.html
Executable file
@@ -0,0 +1,42 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5 class="centerText">Linear Chart</h5>
|
||||
<p-chart type="line" [data]="lineData" [options]="lineOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="centerText">Pie Chart</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="centerText">Polar Area Chart</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5 class="centerText">Bar Chart</h5>
|
||||
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="centerText">Doughnut Chart</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="centerText">Radar Chart</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
239
src/app/demo/view/chartsdemo.component.ts
Executable file
239
src/app/demo/view/chartsdemo.component.ts
Executable file
@@ -0,0 +1,239 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './chartsdemo.component.html'
|
||||
})
|
||||
export class ChartsDemoComponent implements OnInit {
|
||||
|
||||
lineData: any;
|
||||
|
||||
barData: any;
|
||||
|
||||
pieData: any;
|
||||
|
||||
polarData: any;
|
||||
|
||||
radarData: any;
|
||||
|
||||
lineOptions: any;
|
||||
|
||||
barOptions: any;
|
||||
|
||||
pieOptions: any;
|
||||
|
||||
polarOptions: any;
|
||||
|
||||
radarOptions: any;
|
||||
|
||||
ngOnInit() {
|
||||
this.lineData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: '#2f4860',
|
||||
borderColor: '#2f4860',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: '#00bb7e',
|
||||
borderColor: '#00bb7e',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.lineOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#A0A7B5'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#A0A7B5'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.barData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: '#2f4860',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: '#00bb7e',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.barOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#A0A7B5'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#A0A7B5'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.pieData = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.polarData = {
|
||||
datasets: [{
|
||||
data: [
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
3,
|
||||
14
|
||||
],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#4BC0C0",
|
||||
"#FFCE56",
|
||||
"#E7E9ED",
|
||||
"#36A2EB"
|
||||
],
|
||||
label: 'My dataset'
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Green",
|
||||
"Yellow",
|
||||
"Grey",
|
||||
"Blue"
|
||||
]
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.radarData = {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.radarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
244
src/app/demo/view/dashboard.component.html
Executable file
244
src/app/demo/view/dashboard.component.html
Executable file
@@ -0,0 +1,244 @@
|
||||
<div class="layout-main">
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Orders</span>
|
||||
<div class="text-900 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-500">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Revenue</span>
|
||||
<div class="text-900 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-500">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Customers</span>
|
||||
<div class="text-900 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-500">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Comments</span>
|
||||
<div class="text-900 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-500">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="card">
|
||||
<h5>Recent Sales</h5>
|
||||
<p-table [value]="products" [paginator]="true" [rows]="5">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th>View</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-product>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="../../../assets/demo/images/product/{{product.image}}" alt="{{product.name}}" width="50px" height="50px">
|
||||
</td>
|
||||
<td>{{product.name}}</td>
|
||||
<td>{{product.price | currency:'USD'}}</td>
|
||||
<td>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="flex justify-content-between align-items-center mb-5">
|
||||
<h5>Best Selling Products</h5>
|
||||
<div>
|
||||
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
|
||||
<p-menu #menu [popup]="true" [model]="items"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
|
||||
<div class="mt-1 text-600">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-orange-500 h-full" [ngStyle]="{width: '50%'}"></div>
|
||||
</div>
|
||||
<span class="text-orange-500 ml-3 font-medium">%50</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-cyan-500 h-full" [ngStyle]="{width: '16%'}"></div>
|
||||
</div>
|
||||
<span class="text-cyan-500 ml-3 font-medium">%16</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-pink-500 h-full" [ngStyle]="{width: '67%'}"></div>
|
||||
</div>
|
||||
<span class="text-pink-500 ml-3 font-medium">%67</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
|
||||
<div class="mt-1 text-600">Office</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-green-500 h-full" [ngStyle]="{width: '35%'}"></div>
|
||||
</div>
|
||||
<span class="text-green-500 ml-3 font-medium">%35</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-purple-500 h-full" [ngStyle]="{width: '75%'}"></div>
|
||||
</div>
|
||||
<span class="text-purple-500 ml-3 font-medium">%75</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
|
||||
<div class="mt-1 text-600">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-teal-500 h-full" [ngStyle]="{width: '40%'}"></div>
|
||||
</div>
|
||||
<span class="text-teal-500 ml-3 font-medium">%40</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="card">
|
||||
<h5>Sales Overview</h5>
|
||||
<p-chart type="line" [data]="chartData"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<h5>Notifications</h5>
|
||||
<div>
|
||||
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
|
||||
<p-menu #menu [popup]="true" [model]="items"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="block text-600 font-medium mb-3">TODAY</span>
|
||||
<ul class="p-0 mx-0 mt-0 mb-4 list-none">
|
||||
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-dollar text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Richard Jones
|
||||
<span class="text-700"> has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex align-items-center py-2">
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-orange-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-download text-xl text-orange-500"></i>
|
||||
</div>
|
||||
<span class="text-700 line-height-3">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span class="block text-600 font-medium mb-3">YESTERDAY</span>
|
||||
<ul class="p-0 m-0 list-none">
|
||||
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-dollar text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Keyser Wick
|
||||
<span class="text-700"> has purchased a black jacket for <span class="text-blue-500">59$</span></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-question text-xl text-pink-500"></i>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Jane Davis
|
||||
<span class="text-700"> has posted a new questions about your product.</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3"
|
||||
[ngStyle]="{borderRadius: '1rem', background: 'linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)'}">
|
||||
<div>
|
||||
<div class="text-blue-100 font-medium text-xl mt-2 mb-3">TAKE THE NEXT STEP</div>
|
||||
<div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
|
||||
</div>
|
||||
<div class="mt-4 mr-auto md:mt-0 md:mr-0">
|
||||
<a routerLink="https://www.primefaces.org/primeblocks-react" class="p-button font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
51
src/app/demo/view/dashboarddemo.component.ts
Executable file
51
src/app/demo/view/dashboarddemo.component.ts
Executable file
@@ -0,0 +1,51 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {MenuModule} from 'primeng/menu';
|
||||
import {MenuItem} from 'primeng/api';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboarddemo.scss'],
|
||||
})
|
||||
export class DashboardDemoComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
products: Product[];
|
||||
|
||||
chartData:any;
|
||||
|
||||
constructor(private productService: ProductService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
|
||||
this.items = [
|
||||
{label: 'Add New', icon: 'pi pi-fw pi-plus'},
|
||||
{label: 'Remove', icon: 'pi pi-fw pi-minus'}
|
||||
];
|
||||
|
||||
this.chartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: '#2f4860',
|
||||
borderColor: '#2f4860',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: '#00bb7e',
|
||||
borderColor: '#00bb7e',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
2
src/app/demo/view/dashboarddemo.scss
Normal file
2
src/app/demo/view/dashboarddemo.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
.layout-dashboard {
|
||||
}
|
||||
1147
src/app/demo/view/documentation.component.html
Executable file
1147
src/app/demo/view/documentation.component.html
Executable file
File diff suppressed because it is too large
Load Diff
6
src/app/demo/view/documentation.component.ts
Executable file
6
src/app/demo/view/documentation.component.ts
Executable file
@@ -0,0 +1,6 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './documentation.component.html'
|
||||
})
|
||||
export class DocumentationComponent {}
|
||||
8
src/app/demo/view/emptydemo.component.html
Executable file
8
src/app/demo/view/emptydemo.component.html
Executable file
@@ -0,0 +1,8 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4>Empty Page</h4>
|
||||
<p>This is your empty page template to start building beautiful applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
6
src/app/demo/view/emptydemo.component.ts
Executable file
6
src/app/demo/view/emptydemo.component.ts
Executable file
@@ -0,0 +1,6 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './emptydemo.component.html'
|
||||
})
|
||||
export class EmptyDemoComponent {}
|
||||
18
src/app/demo/view/filedemo.component.html
Executable file
18
src/app/demo/view/filedemo.component.html
Executable file
@@ -0,0 +1,18 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
|
||||
multiple="multiple" accept="image/*" maxFileSize="1000000">
|
||||
<ng-template pTemplate="content">
|
||||
<ul *ngIf="uploadedFiles.length">
|
||||
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
|
||||
</ul>
|
||||
</ng-template>
|
||||
</p-fileUpload>
|
||||
|
||||
<h5>Basic</h5>
|
||||
<p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)" chooseLabel="Browse"></p-fileUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
src/app/demo/view/filedemo.component.ts
Executable file
25
src/app/demo/view/filedemo.component.ts
Executable file
@@ -0,0 +1,25 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {MessageService} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './filedemo.component.html',
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class FileDemoComponent {
|
||||
|
||||
uploadedFiles: any[] = [];
|
||||
|
||||
constructor(private messageService: MessageService) {}
|
||||
|
||||
onUpload(event) {
|
||||
for (const file of event.files) {
|
||||
this.uploadedFiles.push(file);
|
||||
}
|
||||
|
||||
this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
|
||||
}
|
||||
|
||||
onBasicUpload(event) {
|
||||
this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode'});
|
||||
}
|
||||
}
|
||||
71
src/app/demo/view/floatlabeldemo.component.html
Normal file
71
src/app/demo/view/floatlabeldemo.component.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<div class="card">
|
||||
<h5>Float Label</h5>
|
||||
<div class="grid p-fluid mt-3">
|
||||
<div class="p-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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<span class="p-float-label">
|
||||
<input type="text" inputId="inputgroup" pInputText [(ngModel)]="value7">
|
||||
<label for="inputgroup">InputGroup</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-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">
|
||||
<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">
|
||||
<span class="p-float-label">
|
||||
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value10" pInputTextarea></textarea>
|
||||
<label for="textarea">Textarea</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
71
src/app/demo/view/floatlabeldemo.component.ts
Normal file
71
src/app/demo/view/floatlabeldemo.component.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {CountryService} from '../service/countryservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './floatlabeldemo.component.html',
|
||||
styleUrls: ['./floatlabeldemo.scss']
|
||||
})
|
||||
export class FloatLabelDemoComponent implements OnInit {
|
||||
|
||||
countries: any[];
|
||||
|
||||
cities: any[];
|
||||
|
||||
filteredCountries: any[];
|
||||
|
||||
value1: any;
|
||||
|
||||
value2: any;
|
||||
|
||||
value3: any;
|
||||
|
||||
value4: any;
|
||||
|
||||
value5: any;
|
||||
|
||||
value6: any;
|
||||
|
||||
value7: any;
|
||||
|
||||
value8: any;
|
||||
|
||||
value9: any;
|
||||
|
||||
value10: any;
|
||||
|
||||
value11: any;
|
||||
|
||||
value12: any;
|
||||
|
||||
constructor(private countryService: CountryService) {
|
||||
this.cities = [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
}
|
||||
|
||||
searchCountry(event) {
|
||||
// in a real application, make a request to a remote url with the query and
|
||||
// return filtered results, for demo we filter at client side
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
// tslint:disable-next-line:prefer-for-of
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
9
src/app/demo/view/floatlabeldemo.scss
Normal file
9
src/app/demo/view/floatlabeldemo.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
:host ::ng-deep .floatlabel-demo {
|
||||
.p-field {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.p-multiselect-panel .p-multiselect-header {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
108
src/app/demo/view/formlayoutdemo.component.html
Normal file
108
src/app/demo/view/formlayoutdemo.component.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Vertical</h5>
|
||||
<div class="field">
|
||||
<label htmlFor="name1">Name</label>
|
||||
<input pInputText id="name1" type="text" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input pInputText id="email1" type="text" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="age1">Age</label>
|
||||
<input pInputText id="age1" type="text" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Vertical Grid</h5>
|
||||
<div class="p-formgrid grid">
|
||||
<div class="field col">
|
||||
<label htmlFor="name2">Name</label>
|
||||
<input pInputText id="name2" type="text" />
|
||||
</div>
|
||||
<div class="field col">
|
||||
<label htmlFor="email2">Email</label>
|
||||
<input pInputText id="email2" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Horizontal</h5>
|
||||
<div class="field grid">
|
||||
<label htmlFor="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<input pInputText id="name3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field grid">
|
||||
<label htmlFor="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<input pInputText id="email3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label htmlFor="firstname1" class="p-sr-only">Firstname</label>
|
||||
<input pInputText id="firstname1" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="lastname1" class="p-sr-only">Lastname</label>
|
||||
<input pInputText id="lastname1" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
<button pButton label="Submit"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="field p-fluid">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input pInputText id="username" type="text" />
|
||||
<small>Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<div class="p-fluid p-formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="firstname2">Firstname</label>
|
||||
<input pInputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="lastname2">Lastname</label>
|
||||
<input pInputText id="lastname2" type="text" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label htmlFor="address">Address</label>
|
||||
<input pInputTextarea id="address" rows="4" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="city">City</label>
|
||||
<input pInputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label htmlFor="state">State</label>
|
||||
<p-dropdown [options]="dropdownItems" optionLabel="name" [(ngModel)]="selectedState"></p-dropdown>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label htmlFor="zip">Zip</label>
|
||||
<input pInputText id="zip" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/app/demo/view/formlayoutdemo.component.ts
Normal file
15
src/app/demo/view/formlayoutdemo.component.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './formlayoutdemo.component.html'
|
||||
})
|
||||
export class FormLayoutDemoComponent {
|
||||
|
||||
selectedState:any;
|
||||
|
||||
dropdownItems = [
|
||||
{ name: 'Option 1', code: 'Option 1' },
|
||||
{ name: 'Option 2', code: 'Option 2' },
|
||||
{ name: 'Option 3', code: 'Option 3' }
|
||||
];
|
||||
}
|
||||
216
src/app/demo/view/inputdemo.component.html
Normal file
216
src/app/demo/view/inputdemo.component.html
Normal file
@@ -0,0 +1,216 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>InputText</h5>
|
||||
<div class="grid p-formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input pInputText type="text" placeholder="Default" />
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input pInputText type="text" placeholder="Disabled" disabled />
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input pInputText type="text" placeholder="Invalid" class="ng-invalid ng-dirty" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div class="grid p-formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-user"></i>
|
||||
<input pInputText type="text" placeholder="Username" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-right">
|
||||
<input pInputText type="text" placeholder="Search" />
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left p-input-icon-right">
|
||||
<i class="pi pi-user"></i>
|
||||
<input pInputText type="text" placeholder="Search" />
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Float Label</h5>
|
||||
<span class="p-float-label">
|
||||
<input pInputText id="username" type="text" />
|
||||
<label htmlFor="username">Username</label>
|
||||
</span>
|
||||
|
||||
<h5>Textarea</h5>
|
||||
<textarea pInputTextarea placeholder="Your Message" autoResize rows="3" cols="30"></textarea>
|
||||
|
||||
<h5>AutoComplete</h5>
|
||||
<p-autoComplete placeholder="Search" id="dd" dropdown multiple></p-autoComplete>
|
||||
|
||||
<h5>Calendar</h5>
|
||||
<p-calendar showIcon showButtonBar></p-calendar>
|
||||
|
||||
<h5>InputNumber</h5>
|
||||
<p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100">
|
||||
</p-inputNumber>
|
||||
|
||||
<h5>Chips</h5>
|
||||
<p-chips></p-chips>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h5>Slider</h5>
|
||||
<input type="text" pInputText [(ngModel)]="valSlider" readonly/>
|
||||
<p-slider [(ngModel)]="valSlider"></p-slider>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>Rating</h5>
|
||||
<p-rating></p-rating>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>ColorPicker</h5>
|
||||
<p-colorPicker [(ngModel)]="valColor"></p-colorPicker>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h5>Knob</h5>
|
||||
<p-knob [(ngModel)]="valueKnob" valueTemplate="{value}%" [step]="10" [min]="-50" [max]="50"></p-knob>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>RadioButton</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="Los Angeles" [(ngModel)]="valRadio"
|
||||
id="city2"></p-radioButton>
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="New York" [(ngModel)]="valRadio" id="city3"></p-radioButton>
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
|
||||
<label for="ny">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="valCheck" id="sf"></p-checkbox>
|
||||
<label for="sf">San Francisco</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="Los Angeles" [(ngModel)]="valCheck" id="la"></p-checkbox>
|
||||
<label for="la">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Input Switch</h5>
|
||||
<p-inputSwitch [(ngModel)]="valSwitch"></p-inputSwitch>
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Listbox</h5>
|
||||
<p-listbox [options]="cities" [(ngModel)]="selectedList" [filter]="true"></p-listbox>
|
||||
|
||||
<h5>Dropdown</h5>
|
||||
<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true"></p-dropdown>
|
||||
|
||||
<h5>Multiselect</h5>
|
||||
<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
|
||||
<ng-template let-value pTemplate="selectedItems">
|
||||
<div class="country-item country-item-value" *ngFor="let option of selectedMulti">
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<div *ngIf="!selectedMulti || selectedMulti.length === 0" class="country-placeholder">
|
||||
Select Countries
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template let-country pTemplate="item">
|
||||
<div class="country-item">
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
|
||||
<div>{{country.name}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>ToggleButton</h5>
|
||||
<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No"></p-toggleButton>
|
||||
|
||||
<h5>SelectButton</h5>
|
||||
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>
|
||||
|
||||
<h5>SelectButton - Multiple</h5>
|
||||
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect2" multiple="multiple" optionLabel="name"></p-selectButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>InputGroup</h5>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
|
||||
<input type="text" pInputText placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-tags" style="line-height: 1.25;"></i></span>
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart" style="line-height: 1.25;"></i></span>
|
||||
<input type="text" pInputText placeholder="Price">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<button type="button" pButton pRipple label="Search"></button>
|
||||
<input type="text" pInputText placeholder="Keyword">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon p-inputgroup-addon-checkbox">
|
||||
<p-checkbox name="group1" value="Confirm" [(ngModel)]="valCheck" id="cf"></p-checkbox>
|
||||
</span>
|
||||
<input type="text" pInputText placeholder="Confirm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
122
src/app/demo/view/inputdemo.component.ts
Normal file
122
src/app/demo/view/inputdemo.component.ts
Normal file
@@ -0,0 +1,122 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {CountryService} from '../service/countryservice';
|
||||
import {SelectItem} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './inputdemo.component.html',
|
||||
styles: [`:host ::ng-deep .p-multiselect {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom-virtual-scroll .p-multiselect {
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .p-multiselect-label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value {
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
margin-right: .5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item img.flag {
|
||||
width: 18px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-placeholder {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-colorpicker {
|
||||
width: 2.5em
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class InputDemoComponent implements OnInit{
|
||||
countries: any[];
|
||||
|
||||
filteredCountries: any[];
|
||||
|
||||
selectedCountryAdvanced: any[];
|
||||
|
||||
valSlider = 0;
|
||||
|
||||
valColor = '#424242';
|
||||
|
||||
valRadio: string;
|
||||
|
||||
valCheck: string[] = [];
|
||||
|
||||
valSwitch: boolean;
|
||||
|
||||
cities: SelectItem[];
|
||||
|
||||
selectedList: SelectItem;
|
||||
|
||||
selectedDrop: SelectItem;
|
||||
|
||||
selectedMulti: string[] = [];
|
||||
|
||||
valToggle = false;
|
||||
|
||||
paymentOptions: any[];
|
||||
|
||||
valSelect1: string;
|
||||
|
||||
valSelect2: string;
|
||||
|
||||
valueKnob = 20;
|
||||
|
||||
constructor(private countryService: CountryService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
|
||||
this.cities = [
|
||||
{label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}},
|
||||
{label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}},
|
||||
{label: 'London', value: {id: 3, name: 'London', code: 'LDN'}},
|
||||
{label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}},
|
||||
{label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}}
|
||||
];
|
||||
|
||||
this.paymentOptions = [
|
||||
{name: 'Option 1', value: 1},
|
||||
{name: 'Option 2', value: 2},
|
||||
{name: 'Option 3', value: 3}
|
||||
];
|
||||
}
|
||||
|
||||
filterCountry(event) {
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
55
src/app/demo/view/invalidstatedemo.component.html
Normal file
55
src/app/demo/view/invalidstatedemo.component.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
66
src/app/demo/view/invalidstatedemo.component.ts
Normal file
66
src/app/demo/view/invalidstatedemo.component.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {CountryService} from '../service/countryservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './invalidstatedemo.component.html'
|
||||
})
|
||||
export class InvalidStateDemoComponent implements OnInit {
|
||||
|
||||
|
||||
countries: any[];
|
||||
|
||||
cities: any[];
|
||||
|
||||
filteredCountries: any[];
|
||||
|
||||
value1: any;
|
||||
|
||||
value2: any;
|
||||
|
||||
value3: any;
|
||||
|
||||
value4: any;
|
||||
|
||||
value5: any;
|
||||
|
||||
value6: any;
|
||||
|
||||
value7: any;
|
||||
|
||||
value8: any;
|
||||
|
||||
value9: any;
|
||||
|
||||
value10: any;
|
||||
|
||||
constructor(private countryService: CountryService) {
|
||||
this.cities = [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
}
|
||||
|
||||
searchCountry(event) {
|
||||
// in a real application, make a request to a remote url with the query and return filtered results,
|
||||
// for demo we filter at client side
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
81
src/app/demo/view/listdemo.component.html
Normal file
81
src/app/demo/view/listdemo.component.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<div class="grid list-demo">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>DataView</h5>
|
||||
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name"
|
||||
[sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
|
||||
<ng-template pTemplate="header">
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)" styleClass="mb-2 mb-md-0"></p-dropdown>
|
||||
<span class="p-input-icon-left mb-2 mb-md-0"></span>
|
||||
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template let-product pTemplate="listItem">
|
||||
<div class="col-12">
|
||||
<div class="product-list-item">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
|
||||
<div class="product-list-detail">
|
||||
<div class="product-name">{{product.name}}</div>
|
||||
<div class="product-description">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
<i class="pi pi-tag product-category-icon"></i><span class="product-category">{{product.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<span class="product-price">${{product.price}}</span>
|
||||
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
|
||||
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template let-product pTemplate="gridItem">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="product-grid-item card">
|
||||
<div class="product-grid-item-top">
|
||||
<div>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{product.category}}</span>
|
||||
</div>
|
||||
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
<div class="product-grid-item-content">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
|
||||
<div class="product-name">{{product.name}}</div>
|
||||
<div class="product-description">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
</div>
|
||||
<div class="product-grid-item-bottom">
|
||||
<span class="product-price">${{product.price}}</span>
|
||||
<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-dataView>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<h5>PickList</h5>
|
||||
<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" dragdrop="true"
|
||||
[responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
|
||||
<ng-template let-city pTemplate="item">
|
||||
<div>{{city.name}}</div>
|
||||
</ng-template>
|
||||
</p-pickList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<h5>OrderList</h5>
|
||||
<p-orderList [value]="orderCities" [listStyle]="{'height':'auto'}" header="Cities" dragdrop="true">
|
||||
<ng-template let-city pTemplate="item">
|
||||
<div>{{city.name}}</div>
|
||||
</ng-template>
|
||||
</p-orderList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
67
src/app/demo/view/listdemo.component.ts
Normal file
67
src/app/demo/view/listdemo.component.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {SelectItem} from 'primeng/api';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './listdemo.component.html',
|
||||
styleUrls: ['./listdemo.scss']
|
||||
})
|
||||
export class ListDemoComponent implements OnInit {
|
||||
|
||||
products: Product[];
|
||||
|
||||
sortOptions: SelectItem[];
|
||||
|
||||
sortOrder: number;
|
||||
|
||||
sortField: string;
|
||||
|
||||
sourceCities: any[];
|
||||
|
||||
targetCities: any[];
|
||||
|
||||
orderCities: any[];
|
||||
|
||||
constructor(private productService: ProductService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
|
||||
this.sourceCities = [
|
||||
{name: 'San Francisco', code: 'SF'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Paris', code: 'PRS'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Berlin', code: 'BRL'},
|
||||
{name: 'Barcelona', code: 'BRC'},
|
||||
{name: 'Rome', code: 'RM'}];
|
||||
this.targetCities = [];
|
||||
|
||||
this.orderCities = [
|
||||
{name: 'San Francisco', code: 'SF'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Paris', code: 'PRS'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Berlin', code: 'BRL'},
|
||||
{name: 'Barcelona', code: 'BRC'},
|
||||
{name: 'Rome', code: 'RM'}];
|
||||
|
||||
this.sortOptions = [
|
||||
{label: 'Price High to Low', value: '!price'},
|
||||
{label: 'Price Low to High', value: 'price'}
|
||||
];
|
||||
}
|
||||
|
||||
onSortChange(event) {
|
||||
const value = event.value;
|
||||
|
||||
if (value.indexOf('!') === 0) {
|
||||
this.sortOrder = -1;
|
||||
this.sortField = value.substring(1, value.length);
|
||||
} else {
|
||||
this.sortOrder = 1;
|
||||
this.sortField = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
146
src/app/demo/view/listdemo.scss
Normal file
146
src/app/demo/view/listdemo.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
:host ::ng-deep {
|
||||
.p-dropdown {
|
||||
width: 14rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.product-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 150px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.product-list-detail {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.p-rating {
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: .5rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-button {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.product-grid-item {
|
||||
margin: .5em;
|
||||
border: 1px solid var(--surface-d);
|
||||
|
||||
.product-grid-item-top,
|
||||
.product-grid-item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.product-grid-item-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
:host ::ng-deep .product-list-item {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.product-list-detail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
margin-top: 2rem;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
src/app/demo/view/mediademo.scss
Normal file
38
src/app/demo/view/mediademo.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
.product-item {
|
||||
.product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 50%;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
83
src/app/demo/view/menusdemo.component.html
Executable file
83
src/app/demo/view/menusdemo.component.html
Executable file
@@ -0,0 +1,83 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>MenuBar</h5>
|
||||
<p-menubar [model]="tieredItems">
|
||||
<ng-template pTemplate="end">
|
||||
<span class="p-input-icon-right">
|
||||
<input type="text" pInputText placeholder="Search">
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</p-menubar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Breadcrumb</h5>
|
||||
<p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Steps</h5>
|
||||
<p-steps [model]="stepsItems" [activeIndex]="1"></p-steps>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>TabMenu</h5>
|
||||
<p-tabMenu [model]="tabMenuItems" [activeItem]="tabMenuItems[0]"></p-tabMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>TieredMenu</h5>
|
||||
<p-tieredMenu [model]="tieredItems"></p-tieredMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Plain Menu</h5>
|
||||
<p-menu [model]="items" [style]="{'width':'100%'}"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
|
||||
<div class="card">
|
||||
<h5>Overlay Menu</h5>
|
||||
|
||||
<p-menu #menu [popup]="true" [model]="items" style="width:175px"></p-menu>
|
||||
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>ContextMenu</h5>
|
||||
Right click to display.
|
||||
<p-contextMenu [global]="true" [model]="menuItems"></p-contextMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>MegaMenu - Horizontal</h5>
|
||||
<p-megaMenu [model]="megaMenuItems"></p-megaMenu>
|
||||
|
||||
<h5>MegaMenu - Vertical</h5>
|
||||
<p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>PanelMenu</h5>
|
||||
<p-panelMenu [model]="panelMenuItems"></p-panelMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
454
src/app/demo/view/menusdemo.component.ts
Executable file
454
src/app/demo/view/menusdemo.component.ts
Executable file
@@ -0,0 +1,454 @@
|
||||
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
|
||||
import {MegaMenuItem, MenuItem} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './menusdemo.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MenusDemoComponent implements OnInit {
|
||||
|
||||
breadcrumbItems: MenuItem[];
|
||||
|
||||
tieredItems: MenuItem[];
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
tabMenuItems: MenuItem[];
|
||||
|
||||
megaMenuItems: MegaMenuItem[];
|
||||
|
||||
panelMenuItems: MenuItem[];
|
||||
|
||||
stepsItems: MenuItem[];
|
||||
|
||||
slideItems: MenuItem[];
|
||||
|
||||
menuItems: MenuItem[];
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.tieredItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-sign-out'
|
||||
}
|
||||
];
|
||||
|
||||
this.items = [
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.menuItems = [
|
||||
{
|
||||
label: 'Save', icon: 'pi pi-fw pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update', icon: 'pi pi-fw pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete', icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Quit', icon: 'pi pi-fw pi-sign-out'
|
||||
},
|
||||
];
|
||||
|
||||
this.slideItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.breadcrumbItems = [];
|
||||
this.breadcrumbItems.push({ label: 'Electronics' });
|
||||
this.breadcrumbItems.push({ label: 'Computer' });
|
||||
this.breadcrumbItems.push({ label: 'Notebook' });
|
||||
this.breadcrumbItems.push({ label: 'Accessories' });
|
||||
this.breadcrumbItems.push({ label: 'Backpacks' });
|
||||
this.breadcrumbItems.push({ label: 'Item' });
|
||||
|
||||
this.tabMenuItems = [
|
||||
{label: 'Personal'},
|
||||
{label: 'Seat'},
|
||||
{label: 'Payment'},
|
||||
{label: 'Confirmation'}
|
||||
];
|
||||
|
||||
this.megaMenuItems = [
|
||||
{
|
||||
label: 'Fashion', icon: 'pi pi-fw pi-tag',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Women',
|
||||
items: [{label: 'Women Item'}, {label: 'Women Item'}, {label: 'Women Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Men',
|
||||
items: [{label: 'Men Item'}, {label: 'Men Item'}, {label: 'Men Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Kids',
|
||||
items: [{label: 'Kids Item'}, {label: 'Kids Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Luggage',
|
||||
items: [{label: 'Luggage Item'}, {label: 'Luggage Item'}, {label: 'Luggage Item'}]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Electronics', icon: 'pi pi-fw pi-desktop',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Computer',
|
||||
items: [{label: 'Computer Item'}, {label: 'Computer Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Camcorder',
|
||||
items: [{label: 'Camcorder Item'}, {label: 'Camcorder Item'}, {label: 'Camcorder Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'TV',
|
||||
items: [{label: 'TV Item'}, {label: 'TV Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Audio',
|
||||
items: [{label: 'Audio Item'}, {label: 'Audio Item'}, {label: 'Audio Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Sports.7',
|
||||
items: [{label: 'Sports.7.1'}, {label: 'Sports.7.2'}]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Furniture', icon: 'pi pi-fw pi-image',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Living Room',
|
||||
items: [{label: 'Living Room Item'}, {label: 'Living Room Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Kitchen',
|
||||
items: [{label: 'Kitchen Item'}, {label: 'Kitchen Item'}, {label: 'Kitchen Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Bedroom',
|
||||
items: [{label: 'Bedroom Item'}, {label: 'Bedroom Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Outdoor',
|
||||
items: [{label: 'Outdoor Item'}, {label: 'Outdoor Item'}, {label: 'Outdoor Item'}]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Sports', icon: 'pi pi-fw pi-star-o',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Basketball',
|
||||
items: [{label: 'Basketball Item'}, {label: 'Basketball Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Football',
|
||||
items: [{label: 'Football Item'}, {label: 'Football Item'}, {label: 'Football Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Tennis',
|
||||
items: [{label: 'Tennis Item'}, {label: 'Tennis Item'}]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
this.panelMenuItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.stepsItems = [
|
||||
{
|
||||
label: 'Personal'
|
||||
},
|
||||
{
|
||||
label: 'Seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
56
src/app/demo/view/messagesdemo.component.html
Executable file
56
src/app/demo/view/messagesdemo.component.html
Executable file
@@ -0,0 +1,56 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Toast</h5>
|
||||
<p-toast key="tst"></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>
|
||||
<button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger mb-2"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<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>
|
||||
<button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger mb-2"></button>
|
||||
|
||||
<p-messages [value]="msgs"></p-messages>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="mt-4 grid align-items-center">
|
||||
<label for="username" class="col-fixed w-9rem">Username</label>
|
||||
<div class="col">
|
||||
<input type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
|
||||
<p-message severity="error" text="Field is required"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid align-items-center">
|
||||
<label for="email" class="col-fixed w-9rem">Email</label>
|
||||
<div class="col">
|
||||
<input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid mr-2">
|
||||
<p-message severity="error"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
<input id="username" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid my-3" pInputText />
|
||||
<small id="username-help" class="p-error">Username is not available.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
58
src/app/demo/view/messagesdemo.component.ts
Executable file
58
src/app/demo/view/messagesdemo.component.ts
Executable file
@@ -0,0 +1,58 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {Message, MessageService} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './messagesdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-button {
|
||||
min-width: 8em;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-message {
|
||||
margin-left: .25em;
|
||||
}
|
||||
`],
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class MessagesDemoComponent {
|
||||
|
||||
msgs: Message[] = [];
|
||||
|
||||
constructor(private service: MessageService) {}
|
||||
|
||||
showInfoViaToast() {
|
||||
this.service.add({key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks'});
|
||||
}
|
||||
|
||||
showWarnViaToast() {
|
||||
this.service.add({key: 'tst', severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
|
||||
}
|
||||
|
||||
showErrorViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
|
||||
}
|
||||
|
||||
showSuccessViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
|
||||
showInfoViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
|
||||
}
|
||||
|
||||
showWarnViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
|
||||
}
|
||||
|
||||
showErrorViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
|
||||
}
|
||||
|
||||
showSuccessViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
}
|
||||
165
src/app/demo/view/miscdemo.component.html
Executable file
165
src/app/demo/view/miscdemo.component.html
Executable file
@@ -0,0 +1,165 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>ProgressBar</h5>
|
||||
<div class="grid">
|
||||
<div class="col">
|
||||
<p-progressBar [value]="value" [showValue]="false"></p-progressBar>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p-progressBar [value]="50" [showValue]="false"></p-progressBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h4>Badge</h4>
|
||||
<h5>Numbers</h5>
|
||||
<div class="badges">
|
||||
<p-badge [value]="2" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="8" severity="success" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="4" severity="info" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="12" severity="warning" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="3" severity="danger"></p-badge>
|
||||
</div>
|
||||
|
||||
<h5>Positioned Badge</h5>
|
||||
<i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>
|
||||
<i class="pi pi-calendar mr-4 p-text-secondary" pBadge style="font-size: 2rem" [value]="'10+'" severity="danger"></i>
|
||||
<i class="pi pi-envelope p-text-secondary" pBadge style="font-size: 2rem" severity="danger"></i>
|
||||
|
||||
|
||||
<h5>Inline Button Badge</h5>
|
||||
<p-button label="Emails" badge="8" styleClass="mr-2"></p-button>
|
||||
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<div class="badges">
|
||||
<p-badge [value]="2" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="4" size="large" severity="warning" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="6" size="xlarge" severity="success" styleClass="mr-2"></p-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Avatar</h4>
|
||||
<h5>Avatar Group</h5>
|
||||
<p-avatarGroup styleClass="mb-3">
|
||||
<p-avatar image="assets/demo/images/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/xuxuefeng.png" size="large"shape="circle"></p-avatar>
|
||||
<p-avatar label="+2" shape="circle" size="large" [style]="{'background-color':'#9c27b0', 'color': '#ffffff'}"></p-avatar>
|
||||
</p-avatarGroup>
|
||||
|
||||
<h5>Label - Circle</h5>
|
||||
<p-avatar label="P" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar label="V" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
|
||||
<p-avatar label="U" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
|
||||
|
||||
<h5>Icon - Badge</h5>
|
||||
<p-avatar icon="pi pi-user" pBadge value="4" severity="success" styleClass="mr-2" size="xlarge"></p-avatar>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>ScrollTop</h4>
|
||||
<p-scrollPanel [style]="{width: '250px', height: '200px'}">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Vitae et leo duis ut diam.
|
||||
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||
Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
<p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>
|
||||
</p-scrollPanel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h4>Tag</h4>
|
||||
<h5>Tags</h5>
|
||||
<p-tag styleClass="mr-2" value="Primary"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="success" value="Success"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="info" value="Info"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="warning" value="Warning"></p-tag>
|
||||
<p-tag severity="danger" value="Danger"></p-tag>
|
||||
|
||||
<h5>Pills</h5>
|
||||
<p-tag styleClass="mr-2" value="Primary" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="success" value="Success" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="info" value="Info" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="warning" value="Warning" [rounded]="true"></p-tag>
|
||||
<p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-user" value="Primary"></p-tag>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
|
||||
<p-tag styleClass="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
|
||||
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Chip</h4>
|
||||
<h5>Basic</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Action" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Comedy" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Mystery" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Thriller" styleClass="m-2" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Google" icon="pi pi-google" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-2" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-2" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Action" styleClass="m-2 custom-chip"></p-chip>
|
||||
<p-chip label="Comedy" styleClass="m-2 custom-chip"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-2 custom-chip"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="m-2 custom-chip"></p-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Skeleton</h4>
|
||||
<div class="border-round border-1 surface-border p-4">
|
||||
<div class="flex mb-3">
|
||||
<p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
|
||||
<div>
|
||||
<p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton height=".5rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<p-skeleton width="100%" height="150px"></p-skeleton>
|
||||
<div class="flex justify-content-between mt-3">
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
62
src/app/demo/view/miscdemo.component.ts
Executable file
62
src/app/demo/view/miscdemo.component.ts
Executable file
@@ -0,0 +1,62 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './miscdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .misc-demo .p-button.p-widget {
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .misc-demo .badges .p-badge {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .misc-demo .badges .p-tag {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-chip.custom-chip {
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-scrolltop{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-scrolltop .p-scrolltop-icon {
|
||||
font-size: 1rem;
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-scrolltop:hover {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-borderRadius: 4px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-skeleton ul {
|
||||
list-style: none;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MiscDemoComponent implements OnInit {
|
||||
|
||||
value = 0;
|
||||
|
||||
ngOnInit() {
|
||||
const interval = setInterval(() => {
|
||||
this.value = this.value + Math.floor(Math.random() * 10) + 1;
|
||||
if (this.value >= 100) {
|
||||
this.value = 100;
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
124
src/app/demo/view/overlaysdemo.component.html
Executable file
124
src/app/demo/view/overlaysdemo.component.html
Executable file
@@ -0,0 +1,124 @@
|
||||
<div class="grid">
|
||||
<p-toast></p-toast>
|
||||
<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'}">
|
||||
<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
|
||||
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
<p-footer>
|
||||
<button type="button" pButton icon="pi pi-check" (click)="display=false" label="Dismiss" class="p-button-secondary"></button>
|
||||
</p-footer>
|
||||
</p-dialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button type="text" (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<button type="button" pButton label="Image" (click)="op1.toggle($event)" class="p-button-success"></button>
|
||||
<p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width:'350px'}">
|
||||
<img src="assets/demo/images/nature/nature1.jpg" alt="Nature 1" style="width:100%"/>
|
||||
</p-overlayPanel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button type="button" pButton label="DataTable" (click)="op2.toggle($event)" class="p-button-success"></button>
|
||||
<p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '400px'}">
|
||||
<ng-template pTemplate>
|
||||
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-rowData let-product>
|
||||
<tr [pSelectableRow]="rowData">
|
||||
<td>{{product.name}}</td>
|
||||
<td><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" class="product-image" /></td>
|
||||
<td>{{formatCurrency(product.price)}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</ng-template>
|
||||
</p-overlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Confirmation</h5>
|
||||
<p-confirmDialog header="Confirmation" key="confirm1" icon="pi pi-exclamation-triangle" message="Are you sure you want to proceed?"
|
||||
[style]="{width: '300px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button type="text" (click)="confirm1()" pButton icon="pi pi-trash" label="Delete" class="p-button-danger"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Sidebar</h5>
|
||||
<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Left Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Right Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Top Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Bottom Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Full Screen Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Tooltip</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname5" class="p-sr-only">Username</label>
|
||||
<input id="firstname5" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
|
||||
</div>
|
||||
<button pButton pRipple type="button" label="Save" icon="pi pi-check" pTooltip="Click to proceed"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>ConfirmPopup</h5>
|
||||
|
||||
<p-toast></p-toast>
|
||||
<button (click)="confirm2($event)" pButton icon="pi pi-check" label="Confirm"></button>
|
||||
<p-confirmPopup key="confirm2"></p-confirmPopup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
80
src/app/demo/view/overlaysdemo.component.ts
Executable file
80
src/app/demo/view/overlaysdemo.component.ts
Executable file
@@ -0,0 +1,80 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {ConfirmationService, MessageService} from 'primeng/api';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './overlaysdemo.component.html',
|
||||
styleUrls: ['./overlaysdemo.scss'],
|
||||
providers: [ConfirmationService, MessageService]
|
||||
})
|
||||
export class OverlaysDemoComponent implements OnInit {
|
||||
|
||||
images: any[];
|
||||
|
||||
display: boolean;
|
||||
|
||||
products: Product[];
|
||||
|
||||
selectedProduct: Product;
|
||||
|
||||
visibleSidebar1;
|
||||
|
||||
visibleSidebar2;
|
||||
|
||||
visibleSidebar3;
|
||||
|
||||
visibleSidebar4;
|
||||
|
||||
visibleSidebar5;
|
||||
|
||||
constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(products => this.products = products);
|
||||
|
||||
this.images = [];
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos1.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos2.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos3.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos4.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4'
|
||||
});
|
||||
}
|
||||
|
||||
confirm1() {
|
||||
this.confirmationService.confirm({
|
||||
key: 'confirm1',
|
||||
message: 'Are you sure to perform this action?'
|
||||
});
|
||||
}
|
||||
|
||||
confirm2(event: Event) {
|
||||
this.confirmationService.confirm({
|
||||
key: 'confirm2',
|
||||
target: event.target,
|
||||
message: 'Are you sure that you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.messageService.add({severity: 'info', summary: 'Confirmed', detail: 'You have accepted'});
|
||||
},
|
||||
reject: () => {
|
||||
this.messageService.add({severity: 'error', summary: 'Rejected', detail: 'You have rejected'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
}
|
||||
8
src/app/demo/view/overlaysdemo.scss
Normal file
8
src/app/demo/view/overlaysdemo.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.product-image {
|
||||
width: 50px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||
}
|
||||
|
||||
:host ::ng-deep button {
|
||||
margin-right: .25em;
|
||||
}
|
||||
239
src/app/demo/view/panelsdemo.component.html
Executable file
239
src/app/demo/view/panelsdemo.component.html
Executable file
@@ -0,0 +1,239 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card panel-demo">
|
||||
<h5>Toolbar</h5>
|
||||
<p-toolbar>
|
||||
<div class="p-toolbar-group-left flex flex-wrap">
|
||||
<button pButton type="button" label="New" icon="pi pi-plus"></button>
|
||||
<button pButton type="button" label="Update" class="p-button-secondary"
|
||||
icon="pi pi-refresh"></button>
|
||||
|
||||
<i class="pi pi-bars p-toolbar-separator"></i>
|
||||
|
||||
<button pButton type="button" class="p-button-success" icon="pi pi-check"></button>
|
||||
<button pButton type="button" class="p-button-help" icon="pi pi-print"></button>
|
||||
<button pButton type="button" class="p-button-danger" icon="pi pi-trash"></button>
|
||||
</div>
|
||||
|
||||
<div class="p-toolbar-group-right">
|
||||
<p-splitButton label="Options" icon="pi pi-check" [model]="items"></p-splitButton>
|
||||
</div>
|
||||
</p-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>AccordionPanel</h5>
|
||||
<p-accordion>
|
||||
<p-accordionTab header="Header I" [selected]="true">
|
||||
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 in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
||||
est laborum.
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="Header II">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque
|
||||
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt.
|
||||
Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="Header III">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores
|
||||
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit
|
||||
quo minus.
|
||||
</p-accordionTab>
|
||||
</p-accordion>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>TabView</h5>
|
||||
<p-tabView orientation="left">
|
||||
<p-tabPanel header="Header I">
|
||||
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 in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
||||
est laborum.
|
||||
</p-tabPanel>
|
||||
<p-tabPanel header="Header II">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque
|
||||
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt.
|
||||
Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p-tabPanel>
|
||||
<p-tabPanel header="Header III">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores
|
||||
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit
|
||||
quo minus.
|
||||
</p-tabPanel>
|
||||
</p-tabView>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Panel</h5>
|
||||
<p-panel header="Header" [toggleable]="true">
|
||||
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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Fieldset</h5>
|
||||
<p-fieldset legend="Legend" toggleable="true">
|
||||
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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-fieldset>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-0 p-3 pb-0">
|
||||
<h5>Card</h5>
|
||||
<p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
|
||||
<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
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Divider</h5>
|
||||
<div class="grid">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<div class="p-fluid">
|
||||
<div class="p-field mb-3">
|
||||
<label for="username">Username</label>
|
||||
<input pInputText id="username" type="text"/>
|
||||
</div>
|
||||
<div class="p-field mb-3">
|
||||
<label for="password">Password</label>
|
||||
<input pInputText id="password" type="password"/>
|
||||
</div>
|
||||
<p-button label="Login" styleClass="m-0"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<p-divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</p-divider>
|
||||
</div>
|
||||
<div class="col-5 align-items-center justify-content-center">
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
|
||||
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
|
||||
<p-divider layout="horizontal" align="center">
|
||||
<span class="p-tag">Badge</span>
|
||||
</p-divider>
|
||||
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
|
||||
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
|
||||
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
|
||||
<p-divider align="right">
|
||||
<p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
|
||||
</p-divider>
|
||||
|
||||
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
|
||||
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
|
||||
a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
|
||||
doloribus asperiores repellat.
|
||||
Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien.
|
||||
Morbi dapibus luctus odio.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Splitter</h5>
|
||||
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5">
|
||||
<ng-template pTemplate="panel">
|
||||
<div class="col flex align-items-center justify-content-center p-2" style="overflow: auto">
|
||||
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
|
||||
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
||||
id est laborum.
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="panel">
|
||||
<p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" panelStyleClass="splitter-overflow">
|
||||
<ng-template pTemplate="panel">
|
||||
<div class="d-flex align-items-center justify-content-center p-2">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque
|
||||
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas
|
||||
sit
|
||||
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
|
||||
modi.
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="panel">
|
||||
<div class="d-flex align-items-center justify-content-center p-2">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
|
||||
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
|
||||
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
|
||||
rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit quo minus.
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
52
src/app/demo/view/panelsdemo.component.ts
Executable file
52
src/app/demo/view/panelsdemo.component.ts
Executable file
@@ -0,0 +1,52 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {MenuItem} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './panelsdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep button {
|
||||
margin-right: .25em;
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-splitbutton button {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-splitter-panel-nested {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.card.toolbar-demo {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class PanelsDemoComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
cardMenu: MenuItem[];
|
||||
|
||||
ngOnInit() {
|
||||
this.items = [
|
||||
{label: 'Angular.io', icon: 'pi pi-external-link', url: 'http://angular.io'},
|
||||
{label: 'Theming', icon: 'pi pi-bookmark', routerLink: ['/theming']}
|
||||
];
|
||||
|
||||
this.cardMenu = [
|
||||
{
|
||||
label: 'Save', icon: 'pi pi-fw pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update', icon: 'pi pi-fw pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete', icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
307
src/app/demo/view/tabledemo.component.html
Normal file
307
src/app/demo/view/tabledemo.component.html
Normal file
@@ -0,0 +1,307 @@
|
||||
<div class="grid table-demo">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<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"
|
||||
[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
|
||||
<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"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 3rem">
|
||||
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
|
||||
</th>
|
||||
<th pSortableColumn="name">
|
||||
<div class="flex align-items-center">
|
||||
Name
|
||||
<p-sortIcon field="name"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="country.name">
|
||||
<div class="flex align-items-center">
|
||||
Country
|
||||
<p-sortIcon field="country.name"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="representative.name">
|
||||
<div class="flex align-items-center">
|
||||
Agent
|
||||
<p-sortIcon field="representative.name"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="date">
|
||||
<div class="flex align-items-center">
|
||||
Date
|
||||
<p-sortIcon field="date"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="status">
|
||||
<div class="flex align-items-center">
|
||||
Status
|
||||
<p-sortIcon field="status"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="activity">
|
||||
<div class="flex align-items-center">
|
||||
Activity
|
||||
<p-sortIcon field="activity"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th style="width: 8rem"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr class="p-selectable-row">
|
||||
<td>
|
||||
<p-tableCheckbox [value]="customer"></p-tableCheckbox>
|
||||
</td>
|
||||
<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;vertical-align: middle">{{customer.country.name}}</span>
|
||||
</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>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
{{customer.date | date: 'MM/dd/yyyy'}}
|
||||
</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">Activity</span>
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="8">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<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"
|
||||
[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">
|
||||
List of Customers
|
||||
<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"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Name
|
||||
<p-sortIcon field="name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="country.name">Country
|
||||
<p-sortIcon field="country.name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="representative.name">Representative
|
||||
<p-sortIcon field="representative.name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="date">Date
|
||||
<p-sortIcon field="date"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="status">Status
|
||||
<p-sortIcon field="status"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="activity">Activity
|
||||
<p-sortIcon field="activity"></p-sortIcon>
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr [pSelectableRow]="customer">
|
||||
<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;vertical-align: middle">{{customer.country.name}}</span>
|
||||
</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>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</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">Activity</span>
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="8">No customers found.</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">
|
||||
<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>
|
||||
<div class="flex table-header">
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 3rem"></th>
|
||||
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
|
||||
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
|
||||
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-product let-expanded="expanded">
|
||||
<tr>
|
||||
<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="p-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>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="rowexpansion" let-product>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div class="p-3">
|
||||
<p-table [value]="product.orders" dataKey="id">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th pSortableColumn="customer">Customer <p-sortIcon field="customer"></p-sortIcon></th>
|
||||
<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th>
|
||||
<th pSortableColumn="amount">Amount <p-sortIcon field="amount"></p-sortIcon></th>
|
||||
<th pSortableColumn="stats">Status <p-sortIcon field="status"></p-sortIcon></th>
|
||||
<th style="width: 4rem"></th>
|
||||
</tr>
|
||||
</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><p-button type="button" icon="pi pi-search"></p-button></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="6">There are no order for this product yet.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
131
src/app/demo/view/tabledemo.component.ts
Normal file
131
src/app/demo/view/tabledemo.component.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
import {Component, OnInit, ViewChild, ChangeDetectorRef} from '@angular/core';
|
||||
import {Customer, Representative} from '../domain/customer';
|
||||
import {CustomerService} from '../service/customerservice';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
import {Table} from 'primeng/table';
|
||||
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 {
|
||||
|
||||
customers1: Customer[];
|
||||
|
||||
customers2: Customer[];
|
||||
|
||||
customers3: Customer[];
|
||||
|
||||
selectedCustomers1: Customer[];
|
||||
|
||||
selectedCustomer: Customer;
|
||||
|
||||
representatives: Representative[];
|
||||
|
||||
statuses: any[];
|
||||
|
||||
products: Product[];
|
||||
|
||||
rowGroupMetadata: any;
|
||||
|
||||
expandedRows = {};
|
||||
|
||||
activityValues: number[] = [0, 100];
|
||||
|
||||
isExpanded: boolean = false;
|
||||
|
||||
@ViewChild('dt') table: Table;
|
||||
|
||||
constructor(private customerService: CustomerService, private productService: ProductService, private messageService: MessageService, private confirmService: ConfirmationService, private cd: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.customerService.getCustomersLarge().then(customers => {
|
||||
this.customers1 = customers;
|
||||
// @ts-ignore
|
||||
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.productService.getProductsWithOrdersSmall().then(data => this.products = data);
|
||||
|
||||
this.representatives = [
|
||||
{name: 'Amy Elsner', image: 'amyelsner.png'},
|
||||
{name: 'Anna Fali', image: 'annafali.png'},
|
||||
{name: 'Asiya Javayant', image: 'asiyajavayant.png'},
|
||||
{name: 'Bernardo Dominic', image: 'bernardodominic.png'},
|
||||
{name: 'Elwin Sharvill', image: 'elwinsharvill.png'},
|
||||
{name: 'Ioni Bowcher', image: 'ionibowcher.png'},
|
||||
{name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png'},
|
||||
{name: 'Onyama Limba', image: 'onyamalimba.png'},
|
||||
{name: 'Stephen Shaw', image: 'stephenshaw.png'},
|
||||
{name: 'XuXue Feng', image: 'xuxuefeng.png'}
|
||||
];
|
||||
|
||||
this.statuses = [
|
||||
{label: 'Unqualified', value: 'unqualified'},
|
||||
{label: 'Qualified', value: 'qualified'},
|
||||
{label: 'New', value: 'new'},
|
||||
{label: 'Negotiation', value: 'negotiation'},
|
||||
{label: 'Renewal', value: 'renewal'},
|
||||
{label: 'Proposal', value: 'proposal'}
|
||||
];
|
||||
}
|
||||
|
||||
onSort() {
|
||||
this.updateRowGroupMetaData();
|
||||
}
|
||||
|
||||
updateRowGroupMetaData() {
|
||||
this.rowGroupMetadata = {};
|
||||
|
||||
if (this.customers3) {
|
||||
for (let i = 0; i < this.customers3.length; i++) {
|
||||
const rowData = this.customers3[i];
|
||||
const representativeName = rowData.representative.name;
|
||||
|
||||
if (i === 0) {
|
||||
this.rowGroupMetadata[representativeName] = { index: 0, size: 1 };
|
||||
}
|
||||
else {
|
||||
const previousRowData = this.customers3[i - 1];
|
||||
const previousRowGroup = previousRowData.representative.name;
|
||||
if (representativeName === previousRowGroup) {
|
||||
this.rowGroupMetadata[representativeName].size++;
|
||||
}
|
||||
else {
|
||||
this.rowGroupMetadata[representativeName] = { index: i, size: 1 };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
expandAll() {
|
||||
if(!this.isExpanded){
|
||||
this.products.forEach(product => this.expandedRows[product.name] = true);
|
||||
|
||||
} else {
|
||||
this.expandedRows={};
|
||||
}
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
|
||||
collapseAll(){
|
||||
this.products.forEach(product => this.expandedRows[product.name] = false);
|
||||
}
|
||||
}
|
||||
187
src/app/demo/view/tabledemo.scss
Normal file
187
src/app/demo/view/tabledemo.scss
Normal file
@@ -0,0 +1,187 @@
|
||||
:host ::ng-deep {
|
||||
|
||||
.p-progressbar {
|
||||
height: .5rem;
|
||||
background-color: #D8DADC;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
31
src/app/demo/view/treedemo.component.html
Normal file
31
src/app/demo/view/treedemo.component.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4>Tree</h4>
|
||||
<p-tree [value]="files1" selectionMode="checkbox" [(selection)]="selectedFiles1"></p-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4>TreeTable</h4>
|
||||
<p-treeTable [value]="files2" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedFiles2">
|
||||
<ng-template pTemplate="header" let-columns>
|
||||
<tr>
|
||||
<th *ngFor="let col of columns">
|
||||
{{col.header}}
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
|
||||
<tr>
|
||||
<td *ngFor="let col of columns; let i = index">
|
||||
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
|
||||
<p-treeTableCheckbox [value]="rowNode" *ngIf="i == 0"></p-treeTableCheckbox>
|
||||
{{rowData[col.field]}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-treeTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
43
src/app/demo/view/treedemo.component.ts
Normal file
43
src/app/demo/view/treedemo.component.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {NodeService} from '../service/nodeservice';
|
||||
import {TreeNode} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './treedemo.component.html'
|
||||
})
|
||||
export class TreeDemoComponent implements OnInit {
|
||||
|
||||
|
||||
files1: TreeNode[];
|
||||
|
||||
files2: TreeNode[];
|
||||
|
||||
files3: TreeNode[];
|
||||
|
||||
selectedFiles1: TreeNode;
|
||||
|
||||
selectedFiles2: TreeNode[];
|
||||
|
||||
selectedFiles3: TreeNode;
|
||||
|
||||
cols: any[];
|
||||
|
||||
constructor(private nodeService: NodeService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.nodeService.getFiles().then(files => this.files1 = files);
|
||||
this.nodeService.getFilesystem().then(files => this.files2 = files);
|
||||
this.nodeService.getFiles().then(files => {
|
||||
this.files3 = [{
|
||||
label: 'Root',
|
||||
children: files
|
||||
}];
|
||||
});
|
||||
|
||||
this.cols = [
|
||||
{ field: 'name', header: 'Name' },
|
||||
{ field: 'size', header: 'Size' },
|
||||
{ field: 'type', header: 'Type' }
|
||||
];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user