carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update tabledemo and add primeblocks & icons pages

Browse Source
This commit is contained in:
Çetin
2021-12-20 18:06:23 +03:00
parent 2b18107f22
commit bc08999a0a
22 changed files with 1345 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
src/app/demo/view/app.blocksdemo.component.html Normal file
View File

@@ -0,0 +1,409 @@
<block-viewer header="Hero" [code]="block1">
<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="assets/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>
</block-viewer>
<block-viewer header="Feature" [code]="block2">
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
<div class="mb-3 font-bold text-2xl">
<span class="text-900">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid">
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Built for Developers</div>
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Easy to Use</div>
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Open Source</div>
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>
</block-viewer>
<block-viewer header="Pricing" [code]="block3">
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid">
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Basic</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$9</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
<button pButton pRipple label="Buy Now" class="p-3 w-full mt-auto"></button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Premium</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$29</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<button pButton pRipple label="Buy Now" class="p-3 w-full"></button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$49</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<button pButton pRipple label="Buy Now" class="p-3 w-full p-button-outlined"></button>
</div>
</div>
</div>
</div>
</div>
</block-viewer>
<block-viewer header="Call to Action" [code]="block4">
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<button pButton pRipple label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></button>
</div>
</div>
</block-viewer>
<block-viewer header="Banner" [code]="block5" containerClass="surface-section py-8">
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
<div class="font-bold mr-8">🔥 Hot Deals!</div>
<div class="align-items-center hidden lg:flex">
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex align-items-center ml-2 mr-8">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a pRipple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>
</block-viewer>
<block-viewer header="Page Heading" [code]="block6">
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-500 line-height-3"></i>
</li>
<li>
<span class="text-900 line-height-3">Analytics</span>
</li>
</ul>
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-900">Customers</div>
<div class="flex align-items-center text-700 flex-wrap">
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex align-items-center mt-3">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-3 lg:mt-0">
<button pButton pRipple label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></button>
<button pButton pRipple label="Save" icon="pi pi-check"></button>
</div>
</div>
</div>
</block-viewer>
<block-viewer header="Stats" [code]="block7">
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
<div class="grid">
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<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" style="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 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<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" style="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 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<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" style="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 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<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" style="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>
</div>
</block-viewer>
<block-viewer header="Sign-In" [code]="block8" containerClass="surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center">
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="assets/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>
<div>
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
<input id="email1" type="text" pInputText class="w-full mb-3">
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
<input id="password1" type="password" pInputText class="w-full mb-3">
<div class="flex align-items-center justify-content-between mb-6">
<div class="flex align-items-center">
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
</div>
</div>
</block-viewer>
<block-viewer header="Description List" [code]="block9" containerClass="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="surface-section">
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
<p-chip label="Crime" class="mr-2"></p-chip>
<p-chip label="Drama" class="mr-2"></p-chip>
<p-chip label="Thriller"></p-chip>
</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
A group of professional bank robbers start to feel the heat from police
when they unknowingly leave a clue at their latest heist.</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
</ul>
</div>
</block-viewer>
<block-viewer header="Card" [code]="block10" containerClass="px-4 py-8 md:px-6 lg:px-8">
<div class="surface-card p-4 shadow-2 border-round">
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
</div>
</block-viewer>

0
src/app/demo/view/app.blocksdemo.component.scss Normal file
View File

408
src/app/demo/view/app.blocksdemo.component.ts Normal file
View File

@@ -0,0 +1,408 @@
import { Component } from '@angular/core';
@Component({
templateUrl: './app.blocksdemo.component.html',
styleUrls: ['./app.blocksdemo.component.scss']
})
export class AppBlocksDemoComponent{
block1: string = `
<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="assets/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>`;
block2: string = `
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
<div class="mb-3 font-bold text-2xl">
<span class="text-900">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid">
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Built for Developers</div>
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Easy to Use</div>
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-12 md:col-4 mb-4 px-5">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Open Source</div>
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>`;
block3: string = `
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid">
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Basic</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$9</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
<button pButton pRipple label="Buy Now" class="p-3 w-full mt-auto"></button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Premium</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$29</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<button pButton pRipple label="Buy Now" class="p-3 w-full"></button>
</div>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="p-3 h-full">
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
<div class="text-600">Plan description</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div class="flex align-items-center">
<span class="font-bold text-2xl text-900">$49</span>
<span class="ml-2 font-medium text-600">per month</span>
</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
<button pButton pRipple label="Buy Now" class="p-3 w-full p-button-outlined"></button>
</div>
</div>
</div>
</div>
</div>`;
block4: string = `
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<button pButton pRipple label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></button>
</div>
</div>`;
block5: string = `
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
<div class="font-bold mr-8">🔥 Hot Deals!</div>
<div class="align-items-center hidden lg:flex">
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex align-items-center ml-2 mr-8">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a pRipple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>`;
block6: string = `
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-500 line-height-3"></i>
</li>
<li>
<span class="text-900 line-height-3">Analytics</span>
</li>
</ul>
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-900">Customers</div>
<div class="flex align-items-center text-700 flex-wrap">
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-5 flex align-items-center mt-3">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex align-items-center mt-3">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-3 lg:mt-0">
<button pButton pRipple label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></button>
<button pButton pRipple label="Save" icon="pi pi-check"></button>
</div>
</div>
</div>`;
block7: string = `
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
<div class="grid">
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<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" style="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 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<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" style="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 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<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" style="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 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
<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" style="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>
</div>`;
block8: string = `
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="assets/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>
<div>
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
<input id="email1" type="text" pInputText class="w-full mb-3">
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
<input id="password1" type="password" pInputText class="w-full mb-3">
<div class="flex align-items-center justify-content-between mb-6">
<div class="flex align-items-center">
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
</div>
</div>`;
block9: string = `
<div class="surface-section">
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
<p-chip label="Crime" class="mr-2"></p-chip>
<p-chip label="Drama" class="mr-2"></p-chip>
<p-chip label="Thriller"></p-chip>
</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
A group of professional bank robbers start to feel the heat from police
when they unknowingly leave a clue at their latest heist.</div>
<div class="w-6 md:w-2 flex justify-content-end">
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
</div>
</li>
</ul>
</div>`;
block10: string = `
<div class="surface-card p-4 shadow-2 border-round">
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
</div>`;
}

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

@@ -76,7 +76,7 @@
<ng-template pTemplate="body" let-product>
<tr>
<td>
<img src="../../../assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="100">
<img src="../../../assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50">
</td>
<td>{{product.name}}</td>
<td>{{product.price | currency:'USD'}}</td>

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

@@ -13,36 +13,36 @@
<h4>Dependencies</h4>
<p>Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at <a href="https://www.primefaces.org/why-primeng-templates/">Why PrimeNG Templates</a> article.</p>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
npm install -g @angular/cli
</app-code>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
npm install -g @angular/cli
</app-code>
<p>Once CLI is ready in your system, extract the contents of the Sakai zip file distribution, cd to the directory,
install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
cd sakai-ng
npm install
ng serve
</app-code>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
cd sakai-ng
npm install
ng serve
</app-code>
<p>The application should run at http://localhost:4200/, you may now start with the development of your application.</p>
<h4>Important CLI Commands</h4>
<p>Following commands are derived from CLI.</p>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Run 'ng help' for more options.
</app-code>
Run 'ng help' for more options.
</app-code>
<h5>Structure</h5>
<p>Sakai consists of 2 main parts; the application layout, layout resources. <i>app.component.html</i> inside app folder is the html template for the base layout,
@@ -204,18 +204,18 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
</ul>
<p>Install PrimeNG</p>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
npm install primeng@latest --save
npm install primeicons@latest --save
</app-code>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
npm install primeng@latest --save
npm install primeicons@latest --save
</app-code>
<p>Add PrimeNG CSS at styles section in angular.json.</p>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
"styles": [
"styles.scss" //your styles and overrides
],
</app-code>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
"styles": [
"styles.scss" //your styles and overrides
],
</app-code>
<p>Last part is adding theme and layout css files, in the CLI app they are defined using link tags in index.html so the demo can switch them on
the fly by changing the path however if this is not a requirement, you may also add them to the styles configuration above so they go inside the bundle.</p>
@@ -326,7 +326,6 @@ $menuTooltipTextColor:#ffffff !default;
<div style="height:400px;overflow: auto;">
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
//reused color variables
//reused color variables
$shade000:#ffffff !default; //surface
$shade100:#FCFCFC !default; //header background
$shade200:rgba($primaryColor,.2) !default; //hover background

57
src/app/demo/view/iconsdemo.component.html Normal file
View File

@@ -0,0 +1,57 @@
<div class="card">
<h4>Icons</h4>
<h5>Download</h5>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
npm install primeicons --save
</app-code>
<h5>Getting Started</h5>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>.
A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;
</app-code>
<i class="pi pi-check" style="margin-right: .5rem"></i>
<i class="pi pi-times"></i>
<h5>Size</h5>
<p>Size of the icons can easily be changed using font-size property.</p>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
</app-code>
<i class="pi pi-check"></i>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
</app-code>
<i class="pi pi-check" style="font-size: 2rem"></i>
<h5>Spinning Animation</h5>
<p>Special pi-spin class applies infinite rotate to an icon.</p>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
</app-code>
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
<h5>List of Icons</h5>
<p>Here is the current list of PrimeIcons, more icons will be added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
<div>
<input class="icon-filter" (input)="onFilter($event)" pInputText placeholder="Search an icon">
</div>
<div class="grid icons-list">
<div class="md:col-2 sm:col-12 md-2" *ngFor="let icon of filteredIcons">
<i class="pi pi-{{icon.properties.name}}"></i>
<div>pi-{{icon.properties.name}}</div>
</div>
</div>
</div>

19
src/app/demo/view/iconsdemo.component.scss Normal file
View File

@@ -0,0 +1,19 @@
.icon-filter {
width: 100%;
padding: 1rem;
margin: 1rem 0 1.5rem 0;
}
.icons-list {
text-align: center;
i {
font-size: 1.5rem;
color: var(--text-color-secondary);
margin-bottom: .5rem;
}
.md-2 {
padding-bottom: 2rem;
}
}

53
src/app/demo/view/iconsdemo.component.ts Normal file
View File

@@ -0,0 +1,53 @@
import { Component, OnInit } from '@angular/core';
import { IconService } from '../service/iconservice';
@Component({
selector: 'app-iconsdemo',
templateUrl: './iconsdemo.component.html',
styleUrls: ['./iconsdemo.component.scss']
})
export class IconsDemoComponent implements OnInit {
icons: any[];
filteredIcons: any[];
selectedIcon: any;
constructor(private iconService : IconService) { }
ngOnInit() {
this.iconService.getIcons().subscribe(data => {
data = data.filter(value => {
return value.icon.tags.indexOf('deprecate') === -1;
});
let icons = data;
icons.sort((icon1, icon2) => {
if(icon1.properties.name < icon2.properties.name)
return -1;
else if(icon1.properties.name < icon2.properties.name)
return 1;
else
return 0;
});
this.icons = icons;
this.filteredIcons = data;
});
}
onFilter(event: KeyboardEvent): void {
const searchText = (event.target as HTMLInputElement).value;
if (!searchText) {
this.filteredIcons = this.icons;
}
else {
this.filteredIcons = this.icons.filter( it => {
return it.icon.tags[0].includes(searchText);
});
}
}
}

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

@@ -1,197 +1,139 @@
<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"
responsiveLayout="scroll"
styleClass="p-datatable-customers p-datatable-selectable" [rowHover]="true" [rows]="10" [paginator]="true"
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
<h5>Filter Menu</h5>
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [showCurrentPageReport]="true" [loading]="loading" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<ng-template pTemplate="caption">
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header md:align-items-end">
<h6>
List of Customers
</h6>
<span class="p-input-icon-left">
<div class="flex">
<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
<span class="p-input-icon-left ml-auto">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
</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">
<th>
<div class="flex justify-content-between align-items-center">
Name
<p-sortIcon field="name"></p-sortIcon>
<p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
</div>
</th>
<th pSortableColumn="country.name">
<div class="flex align-items-center">
<th>
<div class="flex justify-content-between align-items-center">
Country
<p-sortIcon field="country.name"></p-sortIcon>
<p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
</div>
</th>
<th pSortableColumn="representative.name">
<div class="flex align-items-center">
<th>
<div class="flex justify-content-between align-items-center">
Agent
<p-sortIcon field="representative.name"></p-sortIcon>
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header">
<div class="px-3 pt-3 pb-0">
<span class="p-text-bold">Agent Picker</span>
</div>
</ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option">
<img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
<span class="ml-1">{{option.name}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</div>
</th>
<th pSortableColumn="date">
<div class="flex align-items-center">
<th>
<div class="flex justify-content-between align-items-center">
Date
<p-sortIcon field="date"></p-sortIcon>
<p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
</div>
</th>
<th pSortableColumn="status">
<div class="flex align-items-center">
<th>
<div class="flex justify-content-between align-items-center">
Balance
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
</div>
</th>
<th>
<div class="flex justify-content-between align-items-center">
Status
<p-sortIcon field="status"></p-sortIcon>
<p-columnFilter field="status" matchMode="equals" display="menu">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
<ng-template let-option pTemplate="item">
<span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
</ng-template>
</p-dropdown>
</ng-template>
</p-columnFilter>
</div>
</th>
<th pSortableColumn="activity">
<div class="flex align-items-center">
<th>
<div class="flex justify-content-between align-items-center">
Activity
<p-sortIcon field="activity"></p-sortIcon>
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="filter" let-filter="filterCallback">
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
<div class="flex align-items-center justify-content-between px-2">
<span>{{activityValues[0]}}</span>
<span>{{activityValues[1]}}</span>
</div>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="width: 8rem">
<div class="flex justify-content-between align-items-center">
Verified
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
</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>
<tr>
<td style="min-width: 200px;">
{{customer.name}}
</td>
<td>
<span class="p-column-title">Country</span>
<div>
<img src="assets/demo/flags/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
</div>
<td style="min-width: 200px;">
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text ml-2">{{customer.country.name}}</span>
</td>
<td>
<span class="p-column-title">Representative</span>
<div>
<img [alt]="customer.representative.name"
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
style="vertical-align: middle"/>
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
</div>
<td style="min-width: 200px;">
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
<span class="image-text ml-2">{{customer.representative.name}}</span>
</td>
<td>
<span class="p-column-title">Date</span>
<td style="min-width: 200px;">
{{customer.date | date: 'MM/dd/yyyy'}}
</td>
<td>
<span class="p-column-title">Status</span>
<td style="min-width: 200px;">
{{customer.balance | currency:'USD':'symbol'}}
</td>
<td style="min-width: 200px;">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td>
<span class="p-column-title">Activity</span>
<td style="min-width: 200px;">
<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 class="text-center" style="min-width: 50px;">
<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500 ': !customer.verified}"></i>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="8">No customers found.</td>
<td colspan="7">No customers found.</td>
</tr>
</ng-template>
</p-table>
</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" responsiveLayout="scroll"
[scrollable]="true" scrollHeight="600px" [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
<ng-template pTemplate="caption">
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
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">
@@ -203,7 +145,7 @@
<ng-template pTemplate="header">
<tr>
<th style="width:200px" pFrozenColumn>Name</th>
<th style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
<th style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
<th style="width:200px">Country</th>
<th style="width:200px">Date</th>
<th style="width:200px">Company</th>
@@ -216,7 +158,7 @@
<ng-template pTemplate="body" let-customer>
<tr>
<td style="width:200px" pFrozenColumn>{{customer.name}}</td>
<td style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
<td style="width:200px">{{customer.country.name}}</td>
<td style="width:200px">{{customer.date}}</td>
<td style="width:200px">{{customer.company}}</td>
@@ -305,7 +247,7 @@
<div class="col-12">
<div class="card">
<h5>Row Group and Scrolling</h5>
<h5>Subheader Grouping</h5>
<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="600px"
styleClass="p-datatable-customers">
<ng-template pTemplate="header">
@@ -319,26 +261,26 @@
</ng-template>
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
<td colspan="5">
<td colspan="5" style="min-width: 200px;">
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="p-text-bold ml-2">{{customer.representative.name}}</span>
</td>
</tr>
<tr>
<td><span class="p-column-title">Name</span>
<td style="min-width: 220px;"><span class="p-column-title">Name</span>
{{customer.name}}
</td>
<td><span class="p-column-title">Country</span>
<td style="min-width: 220px;"><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>
<td style="min-width: 300px;"><span class="p-column-title">Company</span>
{{customer.company}}
</td>
<td><span class="p-column-title">Status</span>
<td style="min-width: 220px;"><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>
<td style="min-width: 220px;"><span class="p-column-title">Date</span>
{{customer.date}}
</td>
</tr>

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

@@ -1,9 +1,10 @@
import {Component, OnInit, ViewChild, ChangeDetectorRef} from '@angular/core';
import {Component, OnInit, ViewChild, ChangeDetectorRef, ElementRef} 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 {InputText} from 'primeng/inputtext';
import { MessageService, ConfirmationService } from 'primeng/api'
@Component({
@@ -51,13 +52,19 @@ export class TableDemoComponent implements OnInit {
idFrozen: boolean = false;
loading:boolean = true;
@ViewChild('dt') table: Table;
@ViewChild('filter') filter: ElementRef;
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;
this.loading = false;
// @ts-ignore
this.customers1.forEach(customer => customer.date = new Date(customer.date));
});
@@ -130,4 +137,9 @@ export class TableDemoComponent implements OnInit {
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
clear(table: Table) {
table.clear();
this.filter.nativeElement.value = '';
}
}