Update to new structure
This commit is contained in:
Çetin
@@ -1,22 +0,0 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%);">
|
||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
<div class="grid flex flex-column align-items-center">
|
||||
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width:3.2rem; height:3.2rem;">
|
||||
<i class="text-50 pi pi-fw pi-lock text-2xl"></i>
|
||||
</div>
|
||||
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||
<span class="text-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
|
||||
<img src="assets/layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%">
|
||||
<div class="col-12 mt-5 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-access',
|
||||
templateUrl: './access.component.html',
|
||||
})
|
||||
export class AccessComponent {}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { Component, ElementRef, AfterViewInit, Input, NgModule, ViewChild } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-code',
|
||||
template: `
|
||||
<pre [ngClass]="'language-' + lang"><code #code><ng-content></ng-content>
|
||||
</code></pre>
|
||||
`,
|
||||
})
|
||||
export class AppCodeComponent implements AfterViewInit {
|
||||
|
||||
@Input() lang = 'markup';
|
||||
|
||||
@ViewChild('code') codeViewChild: ElementRef;
|
||||
|
||||
constructor(public el: ElementRef) { }
|
||||
|
||||
ngAfterViewInit() {
|
||||
// @ts-ignore
|
||||
if (window['Prism']) {
|
||||
// @ts-ignore
|
||||
window['Prism'].highlightElement(this.codeViewChild.nativeElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
exports: [AppCodeComponent],
|
||||
declarations: [AppCodeComponent]
|
||||
})
|
||||
export class AppCodeModule { }
|
||||
@@ -1,409 +0,0 @@
|
||||
<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> 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>
|
||||
@@ -1,407 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './blocks.component.html'
|
||||
})
|
||||
export class BlocksComponent{
|
||||
|
||||
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> 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>`;
|
||||
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
.block-section {
|
||||
margin-bottom: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.block-header {
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--surface-section);
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
border:1px solid var(--surface-d);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.block-title {
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.badge-free {
|
||||
border-radius: 4px;
|
||||
padding: .25rem .5rem;
|
||||
background-color: var(--orange-500);
|
||||
color: white;
|
||||
margin-left: 1rem;
|
||||
font-weight: 700;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.block-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
margin-left: 1rem;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .75rem;
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color .2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:not(.block-action-disabled):hover {
|
||||
background-color: var(--surface-c);
|
||||
}
|
||||
|
||||
&.block-action-active {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&.block-action-copy {
|
||||
i {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.block-action-disabled {
|
||||
opacity: .6;
|
||||
cursor: auto !important;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-content {
|
||||
padding: 0;
|
||||
border:1px solid var(--surface-d);
|
||||
border-top: 0 none;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host ::ng-deep pre[class*="language-"] {
|
||||
margin: 0 !important;
|
||||
|
||||
&:before, &:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
code {
|
||||
border-left: 0 none !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-e) !important;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
padding: 0 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.block-header {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
.block-actions {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
enum BlockView {
|
||||
PREVIEW,
|
||||
CODE
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'block-viewer',
|
||||
template: `
|
||||
<div class="block-section">
|
||||
<div class="block-header">
|
||||
<span class="block-title">
|
||||
<span>{{header}}</span>
|
||||
<span class="badge-free" *ngIf="free">Free</span>
|
||||
<span class="badge-new" *ngIf="new">New</span>
|
||||
</span>
|
||||
<div class="block-actions">
|
||||
<a tabindex="0" [ngClass]="{'block-action-active': blockView == BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
|
||||
<a [attr.tabindex]="'0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE}" (click)="activateView($event, BlockView.CODE)">
|
||||
<span>Code</span>
|
||||
</a>
|
||||
<a [attr.tabindex]="'0'" class="block-action-copy" (click)="copyCode($event)"
|
||||
pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom"><i class="pi pi-copy m-0"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-content">
|
||||
<div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView == BlockView.PREVIEW">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
<div *ngIf="blockView == BlockView.CODE">
|
||||
<app-code lang="markup" ngPreserveWhitespaces>{{code}}
|
||||
</app-code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./blockviewer.component.scss']
|
||||
})
|
||||
export class BlockViewer {
|
||||
|
||||
@Input() header: string;
|
||||
|
||||
@Input() code: string;
|
||||
|
||||
@Input() containerClass: string;
|
||||
|
||||
@Input() previewStyle: string;
|
||||
|
||||
@Input() free: boolean = true;
|
||||
|
||||
@Input() new: boolean = false;
|
||||
|
||||
BlockView = BlockView;
|
||||
|
||||
blockView: BlockView = BlockView.PREVIEW;
|
||||
|
||||
activateView(event: Event, blockView: BlockView) {
|
||||
|
||||
this.blockView = blockView;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
async copyCode(event: Event) {
|
||||
await navigator.clipboard.writeText(this.code);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,147 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<button pButton pRipple label="Submit" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple 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 class="card">
|
||||
<h5>Templating</h5>
|
||||
<p-button styleClass="mr-2 mb-2 px-3">
|
||||
<ng-template pTemplate="content">
|
||||
<img alt="logo" src="https://primefaces.org/primeng/showcase/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
|
||||
</ng-template>
|
||||
</p-button>
|
||||
|
||||
<p-button styleClass="p-button-outlined mr-2 mb-2">
|
||||
<img alt="logo" src="https://primefaces.org/primeng/showcase/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
|
||||
<span class="ml-2 font-bold">PrimeNG</span>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Icons</h5>
|
||||
<button pButton pRipple icon="pi pi-star-fill" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple label="Submit" icon="pi pi-bookmark" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple 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 class="card">
|
||||
<h5>Loading</h5>
|
||||
<p-button label="Search" icon="pi pi-search" styleClass="mr-2 mb-2" [loading]="loading[0]" (onClick)="load(0)"></p-button>
|
||||
<p-button label="Search" icon="pi pi-search" iconPos="right" styleClass="mr-2 mb-2" [loading]="loading[1]" (onClick)="load(1)"></p-button>
|
||||
<p-button icon="pi pi-search" styleClass="mr-2 mb-2" [loading]="loading[2]" (onClick)="load(2)"></p-button>
|
||||
<p-button label="Search" styleClass="mr-2 mb-2" [loading]="loading[3]" (onClick)="load(3)"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,27 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './button.component.html'
|
||||
})
|
||||
export class ButtonComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
loading = [false, false, false, false]
|
||||
|
||||
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'}
|
||||
];
|
||||
}
|
||||
|
||||
load(index) {
|
||||
this.loading[index] = true;
|
||||
setTimeout(() => this.loading[index] = false, 1000);
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>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="text-left w-full">Pie Chart</h5>
|
||||
<p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Polar Area Chart</h5>
|
||||
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>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="text-left w-full">Doughnut Chart</h5>
|
||||
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Radar Chart</h5>
|
||||
<p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,374 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { AppConfig } from 'src/app/api/appconfig';
|
||||
import { ConfigService } from 'src/app/service/app.config.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './charts.component.html'
|
||||
})
|
||||
export class ChartsComponent implements OnInit, OnDestroy {
|
||||
|
||||
lineData: any;
|
||||
|
||||
barData: any;
|
||||
|
||||
pieData: any;
|
||||
|
||||
polarData: any;
|
||||
|
||||
radarData: any;
|
||||
|
||||
lineOptions: any;
|
||||
|
||||
barOptions: any;
|
||||
|
||||
pieOptions: any;
|
||||
|
||||
polarOptions: any;
|
||||
|
||||
radarOptions: any;
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(public configService: ConfigService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
this.updateChartOptions();
|
||||
});
|
||||
|
||||
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.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.pieData = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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.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.updateChartOptions();
|
||||
}
|
||||
|
||||
updateChartOptions() {
|
||||
if (this.config.dark)
|
||||
this.applyDarkTheme();
|
||||
else
|
||||
this.applyLightTheme();
|
||||
}
|
||||
|
||||
applyLightTheme() {
|
||||
this.lineOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.barOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.radarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
applyDarkTheme() {
|
||||
this.lineOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.barOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.radarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<p-toast></p-toast>
|
||||
<p-toolbar styleClass="mb-4">
|
||||
<ng-template pTemplate="left">
|
||||
<div class="my-2">
|
||||
<button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2" (click)="openNew()"></button>
|
||||
<button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="right">
|
||||
<p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileUpload>
|
||||
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help" (click)="dt.exportCSV()"></button>
|
||||
</ng-template>
|
||||
</p-toolbar>
|
||||
|
||||
<p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" selectionMode="multiple" [rowHover]="true" dataKey="id">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
<span class="block mt-2 md:mt-0 p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 3rem">
|
||||
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
|
||||
</th>
|
||||
<th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></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>
|
||||
<th></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-product>
|
||||
<tr>
|
||||
<td>
|
||||
<p-tableCheckbox [value]="product"></p-tableCheckbox>
|
||||
</td>
|
||||
<td style="width:14%; min-width:10rem;"><span class="p-column-title">Code</span>
|
||||
{{product.code || product.id}}
|
||||
</td>
|
||||
<td style="width:14%; min-width:10rem;">
|
||||
<span class="p-column-title">Name</span>
|
||||
{{product.name}}
|
||||
</td>
|
||||
<td style="width:14%; min-width:10rem;"><span class="p-column-title">Image</span>
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" />
|
||||
</td>
|
||||
<td style="width:14%; min-width:8rem;">
|
||||
<span class="p-column-title">Price</span>
|
||||
{{product.price | currency:'USD'}}
|
||||
</td>
|
||||
<td style="width:14%; min-width:10rem;">
|
||||
<span class="p-column-title">Category</span>
|
||||
{{product.category}}
|
||||
</td>
|
||||
<td style="width:14%; min-width: 10rem;"><span class="p-column-title">Reviews</span>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
</td>
|
||||
<td style="width:14%; min-width: 10rem;"><span class="p-column-title">Status</span>
|
||||
<span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex">
|
||||
<button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button>
|
||||
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(product)"></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
|
||||
<p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" class="p-fluid">
|
||||
<ng-template pTemplate="content">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" *ngIf="product.image">
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus [ngClass]="{'ng-invalid ng-dirty' : submitted && !product.name}"/>
|
||||
<small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="status">Inventory Status</label>
|
||||
<p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="product.inventoryStatus" placeholder="Select a Status">
|
||||
<ng-template pTemplate="selectedItem">
|
||||
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.value">{{product.inventoryStatus.label}}</span>
|
||||
</ng-template>
|
||||
<ng-template let-status pTemplate="status">
|
||||
<span [class]="'product-badge status-' + status.value.toLowerCase()">{{status.label}}</span>
|
||||
</ng-template>
|
||||
</p-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="formgrid grid">
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton>
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton>
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton>
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<label for="price">Price</label>
|
||||
<p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
|
||||
</div>
|
||||
<div class="field col">
|
||||
<label for="quantity">Quantity</label>
|
||||
<p-inputNumber id="quantity" [(ngModel)]="product.quantity"></p-inputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="footer">
|
||||
<button pButton pRipple label="Cancel" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"></button>
|
||||
<button pButton pRipple label="Save" icon="pi pi-check" class="p-button-text" (click)="saveProduct()"></button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
|
||||
<p-dialog [(visible)]="deleteProductDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
|
||||
<span *ngIf="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
|
||||
</div>
|
||||
<ng-template pTemplate="footer">
|
||||
<button pButton pRipple icon="pi pi-times" class="p-button-text" label="No" (click)="deleteProductDialog = false"></button>
|
||||
<button pButton pRipple icon="pi pi-check" class="p-button-text" label="Yes" (click)="confirmDelete()"></button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
|
||||
<p-dialog [(visible)]="deleteProductsDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
|
||||
<span>Are you sure you want to delete selected products?</span>
|
||||
</div>
|
||||
<ng-template pTemplate="footer">
|
||||
<button pButton pRipple icon="pi pi-times" class="p-button-text" label="No" (click)="deleteProductsDialog = false"></button>
|
||||
<button pButton pRipple icon="pi pi-check" class="p-button-text" label="Yes" (click)="confirmDeleteSelected()"></button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,138 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
import { ConfirmationService, MessageService } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './crud.component.html',
|
||||
providers: [MessageService, ConfirmationService],
|
||||
styleUrls: ['../../../assets/demo/badges.scss']
|
||||
})
|
||||
export class CrudComponent implements OnInit {
|
||||
|
||||
productDialog: boolean;
|
||||
|
||||
deleteProductDialog: boolean = false;
|
||||
|
||||
deleteProductsDialog: boolean = false;
|
||||
|
||||
products: Product[];
|
||||
|
||||
product: Product;
|
||||
|
||||
selectedProducts: Product[];
|
||||
|
||||
submitted: boolean;
|
||||
|
||||
cols: any[];
|
||||
|
||||
statuses: any[];
|
||||
|
||||
rowsPerPageOptions = [5, 10, 20];
|
||||
|
||||
constructor(private productService: ProductService, private messageService: MessageService,
|
||||
private confirmationService: ConfirmationService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
|
||||
this.cols = [
|
||||
{field: 'name', header: 'Name'},
|
||||
{field: 'price', header: 'Price'},
|
||||
{field: 'category', header: 'Category'},
|
||||
{field: 'rating', header: 'Reviews'},
|
||||
{field: 'inventoryStatus', header: 'Status'}
|
||||
];
|
||||
|
||||
this.statuses = [
|
||||
{label: 'INSTOCK', value: 'instock'},
|
||||
{label: 'LOWSTOCK', value: 'lowstock'},
|
||||
{label: 'OUTOFSTOCK', value: 'outofstock'}
|
||||
];
|
||||
}
|
||||
|
||||
openNew() {
|
||||
this.product = {};
|
||||
this.submitted = false;
|
||||
this.productDialog = true;
|
||||
}
|
||||
|
||||
deleteSelectedProducts() {
|
||||
this.deleteProductsDialog = true;
|
||||
}
|
||||
|
||||
editProduct(product: Product) {
|
||||
this.product = {...product};
|
||||
this.productDialog = true;
|
||||
}
|
||||
|
||||
deleteProduct(product: Product) {
|
||||
this.deleteProductDialog = true;
|
||||
this.product = {...product};
|
||||
}
|
||||
|
||||
confirmDeleteSelected(){
|
||||
this.deleteProductsDialog = false;
|
||||
this.products = this.products.filter(val => !this.selectedProducts.includes(val));
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
|
||||
this.selectedProducts = null;
|
||||
}
|
||||
|
||||
confirmDelete(){
|
||||
this.deleteProductDialog = false;
|
||||
this.products = this.products.filter(val => val.id !== this.product.id);
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
|
||||
this.product = {};
|
||||
}
|
||||
|
||||
hideDialog() {
|
||||
this.productDialog = false;
|
||||
this.submitted = false;
|
||||
}
|
||||
|
||||
saveProduct() {
|
||||
this.submitted = true;
|
||||
|
||||
if (this.product.name.trim()) {
|
||||
if (this.product.id) {
|
||||
// @ts-ignore
|
||||
this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus;
|
||||
this.products[this.findIndexById(this.product.id)] = this.product;
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
|
||||
} else {
|
||||
this.product.id = this.createId();
|
||||
this.product.code = this.createId();
|
||||
this.product.image = 'product-placeholder.svg';
|
||||
// @ts-ignore
|
||||
this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
|
||||
this.products.push(this.product);
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000});
|
||||
}
|
||||
|
||||
this.products = [...this.products];
|
||||
this.productDialog = false;
|
||||
this.product = {};
|
||||
}
|
||||
}
|
||||
|
||||
findIndexById(id: string): number {
|
||||
let index = -1;
|
||||
for (let i = 0; i < this.products.length; i++) {
|
||||
if (this.products[i].id === id) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return index;
|
||||
}
|
||||
|
||||
createId(): string {
|
||||
let id = '';
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
for (let i = 0; i < 5; i++) {
|
||||
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return id;
|
||||
}
|
||||
}
|
||||
@@ -1,243 +0,0 @@
|
||||
<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" responsiveLayout="scroll">
|
||||
<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 style="width: 15%; min-width: 5rem;">
|
||||
<img src="assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50">
|
||||
</td>
|
||||
<td style="width: 35%; min-width: 7rem;">{{product.name}}</td>
|
||||
<td style="width: 35%; min-width: 8rem;">{{product.price | currency:'USD'}}</td>
|
||||
<td style="width: 15%;">
|
||||
<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" [options]="chartOptions"></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 target="_blank" href="https://www.primefaces.org/primeblocks-ng" 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>
|
||||
|
||||
@@ -1,131 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { ConfigService } from '../../service/app.config.service';
|
||||
import { AppConfig } from '../../api/appconfig';
|
||||
|
||||
@Component({
|
||||
templateUrl: './dashboard.component.html',
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
products: Product[];
|
||||
|
||||
chartData: any;
|
||||
|
||||
chartOptions: any;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
constructor(private productService: ProductService, public configService: ConfigService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
this.updateChartOptions();
|
||||
});
|
||||
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
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
updateChartOptions() {
|
||||
if (this.config.dark)
|
||||
this.applyDarkTheme();
|
||||
else
|
||||
this.applyLightTheme();
|
||||
|
||||
}
|
||||
|
||||
applyDarkTheme() {
|
||||
this.chartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
applyLightTheme() {
|
||||
this.chartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card docs">
|
||||
<h3>Current Version</h3>
|
||||
<p>Angular 13 and PrimeNG 13</p>
|
||||
|
||||
<h4>Getting Started</h4>
|
||||
<p>Sakai is an application template for Angular and is distributed as a CLI project. In case CLI is not installed already, use
|
||||
the command below to set it up.
|
||||
</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
npm install -g @angular/cli
|
||||
</app-code>
|
||||
|
||||
<p>Once CLI is ready in your system, clone the github repository, 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">
|
||||
git clone https://github.com/primefaces/sakai-ng.git
|
||||
cd sakai-ng
|
||||
npm install
|
||||
ng serve
|
||||
</app-code>
|
||||
|
||||
<p>The application should run at <i>http://localhost:4200/</i>, you may now start with the development of your application.</p>
|
||||
|
||||
<h5>Important CLI Commands</h5>
|
||||
<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.
|
||||
|
||||
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 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 help' for more options.
|
||||
</app-code>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>Sakai has no direct dependency other than PrimeNG. More information about dependencies of PrimeNG templates is available at <a href="https://www.primefaces.org/why-primeng-templates/">Why PrimeNG Templates</a> article.</p>
|
||||
|
||||
<h4>Structure</h4>
|
||||
<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,
|
||||
required resources for the layout are placed inside the <i>src/assets/layout</i> folder and similarly theme resources are inside <i>src/assets/theme</i> folder.
|
||||
</p>
|
||||
|
||||
<h5>Application Template</h5>
|
||||
<p>Main layout is the html template of the app.main.component.ts, it is divided into a couple of sections such as topbar, sidebar, right panel and footer. Here is the code for
|
||||
the main template. The component class app.main.component.ts implements the logic such as opening menus and managing layout modes.
|
||||
</p>
|
||||
|
||||
<h5>Menu</h5>
|
||||
<p>Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems,
|
||||
navigate to this file and define your own model as a nested structure. Here is the menu component from the sample application.</p>
|
||||
|
||||
<h5>Theme</h5>
|
||||
<p>Sakai layout derives the color scheme from the PrimeNG theme being used so that it can be combined any theme such as PrimeOne, Material, Bootstrap and others with dark mode alternatives.</p>
|
||||
|
||||
<h5>SASS Variables</h5>
|
||||
<p>In case you'd like to customize the layout variables, open <i>_variables.scss</i> file under src/assets/sass/layout folder. Saving the changes
|
||||
will be reflected instantly at your browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './documentation.component.html'
|
||||
})
|
||||
export class DocumentationComponent {}
|
||||
@@ -1,8 +0,0 @@
|
||||
<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>
|
||||
@@ -1,6 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './empty.component.html'
|
||||
})
|
||||
export class EmptyComponent {}
|
||||
@@ -1,22 +0,0 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%;">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/logo-error.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
|
||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
<div class="grid flex flex-column align-items-center">
|
||||
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height:3.2rem; width:3.2rem;">
|
||||
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
|
||||
</div>
|
||||
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
|
||||
<span class="text-600">Requested resource is not available.</span>
|
||||
<img src="assets/layout/images/asset-error.svg" alt="Error" class="mt-5" width="80%">
|
||||
<div class="col-12 mt-5 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-error',
|
||||
templateUrl: './error.component.html',
|
||||
})
|
||||
export class ErrorComponent {}
|
||||
@@ -1,18 +0,0 @@
|
||||
<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)="onUpload($event)" chooseLabel="Browse"></p-fileUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,21 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MessageService } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './file.component.html',
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class FileComponent {
|
||||
|
||||
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'});
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
<div class="card">
|
||||
<h5>Float Label</h5>
|
||||
<div class="grid p-fluid mt-3">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<input type="text" id="inputtext" pInputText [(ngModel)]="value1">
|
||||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="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="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="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="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="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="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="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="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="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>
|
||||
@@ -1,69 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CountryService } from '../../service/countryservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './floatlabel.component.html',
|
||||
})
|
||||
export class FloatLabelComponent 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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
<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>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './formlayout.component.html'
|
||||
})
|
||||
export class FormLayoutComponent {
|
||||
|
||||
selectedState:any;
|
||||
|
||||
dropdownItems = [
|
||||
{ name: 'Option 1', code: 'Option 1' },
|
||||
{ name: 'Option 2', code: 'Option 2' },
|
||||
{ name: 'Option 3', code: 'Option 3' }
|
||||
];
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
<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-{icon}</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>
|
||||
<i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
</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>
|
||||
<i class="pi pi-check"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
</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>
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
</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" class="w-full p-3 mt-3 mb-5 w-full p-3 mt-3 mb-5">
|
||||
</div>
|
||||
|
||||
<div class="grid text-center">
|
||||
<div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" *ngFor="let icon of filteredIcons">
|
||||
<i class="text-2xl pi pi-{{icon.properties.name}}"></i>
|
||||
<div>pi-{{icon.properties.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,52 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { IconService } from '../../service/iconservice';
|
||||
|
||||
@Component({
|
||||
selector: 'app-iconsdemo',
|
||||
templateUrl: './icons.component.html'
|
||||
})
|
||||
export class IconsComponent 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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,219 +0,0 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>InputText</h5>
|
||||
<div class="grid 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 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]="true" [multiple]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
|
||||
|
||||
<h5>Calendar</h5>
|
||||
<p-calendar [showIcon]="true" [showButtonBar]="true" [(ngModel)]="selectedDate"></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 mb-0">
|
||||
<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 mb-0">
|
||||
<p-checkbox name="group1" value="Chicago" [(ngModel)]="valCheck" id="ch"></p-checkbox>
|
||||
<label for="ch">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox mb-0">
|
||||
<p-checkbox name="group1" value="Los Angeles" [(ngModel)]="valCheck" id="la"></p-checkbox>
|
||||
<label for="la">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox mb-0">
|
||||
<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
|
||||
<label for="ny">New York</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 inline-flex align-items-center py-1 px-2 bg-primary text-primary border-round mr-2" *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="flex align-items-center country-item">
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'mr-2 flag flag-' + country.code.toLowerCase()" style="width:18px; height:12px;"/>
|
||||
<div>{{country.name}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
|
||||
<h5>TreeSelect</h5>
|
||||
<p-treeSelect [(ngModel)]="selectedNode" [options]="treeSelectNodes" placeholder="Select Item"></p-treeSelect>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>ToggleButton</h5>
|
||||
<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No" [style]="{width:'10em'}"></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>
|
||||
@@ -1,128 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CountryService } from '../../service/countryservice';
|
||||
import { NodeService } from '../../service/nodeservice';
|
||||
import { SelectItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './input.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: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
`]
|
||||
})
|
||||
export class InputComponent implements OnInit{
|
||||
countries: any[];
|
||||
|
||||
filteredCountries: any[];
|
||||
|
||||
selectedCountryAdvanced: any[];
|
||||
|
||||
valSlider = 50;
|
||||
|
||||
valColor = '#424242';
|
||||
|
||||
valRadio: string;
|
||||
|
||||
valCheck: string[] = [];
|
||||
|
||||
valSwitch: boolean;
|
||||
|
||||
cities: SelectItem[];
|
||||
|
||||
selectedList: SelectItem;
|
||||
|
||||
selectedDrop: SelectItem;
|
||||
|
||||
selectedMulti: string[] = [];
|
||||
|
||||
treeSelectNodes: any[];
|
||||
|
||||
selectedNode: SelectItem;
|
||||
|
||||
valToggle = false;
|
||||
|
||||
paymentOptions: any[];
|
||||
|
||||
valSelect1: string;
|
||||
|
||||
valSelect2: string;
|
||||
|
||||
valueKnob = 20;
|
||||
|
||||
selectedDate:any;
|
||||
|
||||
constructor(private countryService: CountryService, private nodeService: NodeService) {}
|
||||
|
||||
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}
|
||||
];
|
||||
|
||||
this.nodeService.getFiles().then(files => this.treeSelectNodes = files)
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
<div class="card">
|
||||
<h5>Invalid State</h5>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field mt-3">
|
||||
<label for="inputtext">InputText</label>
|
||||
<input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
<p-autoComplete inputId="autocomplete" [(ngModel)]="value1" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
|
||||
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="calendar">Calendar</label>
|
||||
<p-calendar inputId="calendar" [(ngModel)]="value2" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="chips">Chips</label>
|
||||
<p-chips inputId="chips" [(ngModel)]="value3" class="ng-invalid ng-dirty"></p-chips>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<p-password [(ngModel)]="value8" class="ng-invalid ng-dirty"></p-password>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field mt-3">
|
||||
<label for="inputmask">InputMask</label>
|
||||
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
<p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="dropdown">Dropdown</label>
|
||||
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value9" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value10" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="textarea">Textarea</label>
|
||||
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value4" pInputTextarea class="ng-invalid ng-dirty"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,65 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CountryService } from '../../service/countryservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './invalidstate.component.html'
|
||||
})
|
||||
export class InvalidStateComponent 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;
|
||||
}
|
||||
}
|
||||
@@ -1,357 +0,0 @@
|
||||
<div id="home" class="surface-0 overflow-hidden">
|
||||
<div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static">
|
||||
<a class="flex align-items-center" href="#">
|
||||
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
|
||||
</a>
|
||||
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
|
||||
<i class="pi pi-bars text-4xl"></i>
|
||||
</a>
|
||||
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:92%">
|
||||
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Features</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Highlights</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Pricing</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
|
||||
<button pButton pRipple label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></button>
|
||||
<button pButton pRipple label="Register" class="p-button-rounded border-none ml-5 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hero" class="grid py-4 px-4 lg:px-8 relative">
|
||||
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
|
||||
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
|
||||
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-3 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
|
||||
</div>
|
||||
<img src="assets/layout/images/screen-1.png" alt="" class="sm:mt-5 md:mt-0" style="right:10%;">
|
||||
</div>
|
||||
|
||||
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-12 text-center mt-8 mb-4">
|
||||
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
|
||||
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Easy to Use</h5>
|
||||
<span class="text-600">Posuere morbi leo urna molestie.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Fresh Design</h5>
|
||||
<span class="text-600">Semper risus in hendrerit.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Well Documented</h5>
|
||||
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Responsive Layout</h5>
|
||||
<span class="text-600">Nulla malesuada pellentesque elit.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Clean Code</h5>
|
||||
<span class="text-600">Condimentum lacinia quis vel eros.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Dark Mode</h5>
|
||||
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Ready to Use</h5>
|
||||
<span class="text-600">Mauris sit amet massa vitae.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Modern Practices</h5>
|
||||
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Privacy</h5>
|
||||
<span class="text-600">Neque egestas congue quisque.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius:20px; background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);">
|
||||
<div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
|
||||
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
|
||||
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
||||
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“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>
|
||||
<img src="assets/layout/images/peak-logo.svg" class="mt-4" alt="Company logo">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
|
||||
<div class="text-center">
|
||||
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid mt-8 pb-2 md:pb-8">
|
||||
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius:8px;">
|
||||
<img src="assets/layout/images/mockup.svg" class="w-11" alt="mockup mobile">
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
|
||||
<div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end" style="width:4.2rem; height:4.2rem; border-radius: 10px;">
|
||||
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
|
||||
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width:650px;">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid my-8 pt-2 md:pt-8">
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
|
||||
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start" style="width:4.2rem; height:4.2rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
||||
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width:650px;">Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius:8px;">
|
||||
<img src="assets/layout/images/mockup-desktop.svg" class="w-11" alt="mockup">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid justify-content-between mt-8 md:mt-0">
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Free</h3>
|
||||
<img src="assets/layout/images/free.svg" class="w-10 h-10 mx-auto" alt="free">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Startup</h3>
|
||||
<img src="assets/layout/images/startup.svg" class="w-10 h-10 mx-auto" alt="startup">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Enterprise</h3>
|
||||
<img src="assets/layout/images/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
|
||||
<div class="grid justify-content-between">
|
||||
<div class="col-12 md:col-2" style="margin-top:-1.5rem;">
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
|
||||
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="footer sections" width="50" height="50" class="mr-2">
|
||||
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-10 lg:col-7">
|
||||
<div class="grid text-center md:text-left">
|
||||
<div class="col-12 md:col-3">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor Relations</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="assets/layout/images/new-badge.svg" class="ml-2"/></a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,83 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ConfigService } from '../../service/app.config.service';
|
||||
import { AppConfig } from '../../api/appconfig';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { Router } from '@angular/router';
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
templateUrl: './landing.component.html',
|
||||
styles: [`
|
||||
#hero{
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%);
|
||||
height:700px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.pricing-card:hover{
|
||||
border:2px solid var(--cyan-200) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#hero{
|
||||
-webkit-clip-path: ellipse(150% 87% at 93% 13%);
|
||||
clip-path: ellipse(150% 87% at 93% 13%);
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px){
|
||||
#hero > img {
|
||||
position: absolute;
|
||||
transform:scale(1.2);
|
||||
top:15%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px){
|
||||
#hero {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
#hero > img {
|
||||
position:static;
|
||||
transform: scale(1);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#hero > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingComponent implements OnInit, OnDestroy {
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(public configService: ConfigService, public router: Router) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if(this.subscription){
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
<div class="grid">
|
||||
<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 flex-column md:flex-row justify-content-between">
|
||||
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
|
||||
<span class="p-input-icon-left mb-2 md:mb-0">
|
||||
<i class="pi pi-search"></i>
|
||||
<input type="search" pInputText placeholder="Search by Name" (input)="dv.filter($event.target.value)">
|
||||
</span>
|
||||
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template let-product pTemplate="listItem">
|
||||
<div class="col-12">
|
||||
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<div class="font-bold text-2xl">{{product.name}}</div>
|
||||
<div class="mb-3">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
<div class="flex align-items-center mt-2">
|
||||
<i class="pi pi-tag mr-2"></i>
|
||||
<span class="font-semibold">{{product.category}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
|
||||
<span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{product.price}}</span>
|
||||
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></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="card m-3 border-1 surface-border">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-tag mr-2"></i>
|
||||
<span class="font-semibold">{{product.category}}</span>
|
||||
</div>
|
||||
<span [class]="'sm:ml-2 product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="w-9 shadow-2 my-3 mx-0"/>
|
||||
<div class="text-2xl font-bold">{{product.name}}</div>
|
||||
<div class="mb-3">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span class="text-2xl font-semibold">${{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':'250px'}" [targetStyle]="{'height':'250px'}">
|
||||
<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" header="Cities" dragdrop="true" [listStyle]="{'height':'250px'}">
|
||||
<ng-template let-city pTemplate="item">
|
||||
<div>{{city.name}}</div>
|
||||
</ng-template>
|
||||
</p-orderList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,67 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { SelectItem } from 'primeng/api';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './list.component.html',
|
||||
styleUrls: ['../../../assets/demo/badges.scss']
|
||||
})
|
||||
export class ListComponent 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
|
||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
<div class="text-center mb-5">
|
||||
<img src="assets/layout/images/avatar.png" alt="Image" height="50" class="mb-3">
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
|
||||
<span class="text-600 font-medium">Sign in to continue</span>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-10 mx-auto">
|
||||
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
|
||||
<input id="email1" type="text" placeholder="Email address" pInputText class="w-full mb-3" style="padding:1rem;">
|
||||
|
||||
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
|
||||
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="w-full mb-3"></p-password>
|
||||
|
||||
<div class="flex align-items-center justify-content-between mb-5">
|
||||
<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-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
|
||||
</div>
|
||||
<button pButton pRipple label="Sign In" class="w-full p-3 text-xl"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,51 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ConfigService } from '../../service/app.config.service';
|
||||
import { AppConfig } from '../../api/appconfig';
|
||||
import { Subscription } from 'rxjs';
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styles:[`
|
||||
:host ::ng-deep .p-password input {
|
||||
width: 100%;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pi-eye{
|
||||
transform:scale(1.6);
|
||||
margin-right: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pi-eye-slash{
|
||||
transform:scale(1.6);
|
||||
margin-right: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LoginComponent implements OnInit, OnDestroy {
|
||||
|
||||
valCheck: string[] = ['remember'];
|
||||
|
||||
password: string;
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(public configService: ConfigService){ }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if(this.subscription){
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Carousel</h5>
|
||||
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselResponsiveOptions">
|
||||
<ng-template let-product pTemplate="item">
|
||||
<div class="border-round m-2 text-center p-2" style="border: 1px solid var(--surface-d)">
|
||||
<div class="my-5">
|
||||
<img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="shadow-4" width="50%"/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-1">{{product.name}}</h5>
|
||||
<h6 class="mt-0 mb-3">${{product.price}}</h6>
|
||||
<span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
<div class="my-5">
|
||||
<button pButton pRipple icon="pi pi-search" class="mr-2 p-button-rounded"></button>
|
||||
<button pButton pRipple icon="pi pi-star-fill" class="mr-2 p-button-rounded p-button-success"></button>
|
||||
<button pButton pRipple icon="pi pi-cog" class="p-button-rounded p-button-info"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<div class="flex justify-content-center">
|
||||
<p-image src="assets/demo/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true"></p-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Galleria</h5>
|
||||
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions"
|
||||
[containerStyle]="{'max-width': '800px', 'margin':'auto'}" [numVisible]="6" [circular]="true">
|
||||
<ng-template pTemplate="item" let-item>
|
||||
<img [src]="item.itemImageSrc" style="width: 100%; display: block;"/>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="thumbnail" let-item>
|
||||
<div class="grid nogutter justify-center">
|
||||
<img [src]="item.thumbnailImageSrc" style="display: block;"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-galleria>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,70 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
import { PhotoService } from '../../service/photoservice';
|
||||
import { Product } from '../../api/product';
|
||||
|
||||
@Component({
|
||||
selector: 'app-media',
|
||||
templateUrl: './media.component.html',
|
||||
styleUrls: ['../../../assets/demo/badges.scss'],
|
||||
styles:[`
|
||||
:host ::ng-deep .p-carousel-indicators .p-link{
|
||||
border-radius:5px !important;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MediaComponent implements OnInit {
|
||||
|
||||
products: Product[];
|
||||
|
||||
images: any[];
|
||||
|
||||
galleriaResponsiveOptions: any[] = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '960px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
];
|
||||
|
||||
carouselResponsiveOptions: any[] = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private productService: ProductService, private photoService: PhotoService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(products => {
|
||||
this.products = products;
|
||||
});
|
||||
|
||||
this.photoService.getImages().then(images => {
|
||||
this.images = images;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirmation',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-check mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ConfirmationComponent {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12">
|
||||
<div class="card card-w-title">
|
||||
<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 card-w-title">
|
||||
<h5>Breadcrumb</h5>
|
||||
<p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card card-w-title flex flex-wrap">
|
||||
<div class="col-12 md:col-8 h-full">
|
||||
<h5>TabMenu</h5>
|
||||
<p-tabMenu styleClass="mb-5" [model]="routeItems"></p-tabMenu>
|
||||
|
||||
<h5>Steps</h5>
|
||||
<p-steps [model]="routeItems" styleClass="mt-5" [readonly]="false"></p-steps>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mt-5 md:mt-0">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card card-w-title">
|
||||
<h5>TieredMenu</h5>
|
||||
<p-tieredMenu [model]="tieredItems"></p-tieredMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card card-w-title">
|
||||
<h5>Plain Menu</h5>
|
||||
<p-menu [model]="plainMenuItems"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
|
||||
<div class="card card-w-title">
|
||||
<h5>Overlay Menu</h5>
|
||||
|
||||
<p-menu #menu [popup]="true" [model]="menuItems"></p-menu>
|
||||
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
|
||||
</div>
|
||||
|
||||
<div class="card card-w-title" #anchor>
|
||||
<h5>ContextMenu</h5>
|
||||
Right click to display.
|
||||
<p-contextMenu [target]="anchor" [model]="menuItems"></p-contextMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card card-w-title">
|
||||
<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 card-w-title">
|
||||
<h5>PanelMenu</h5>
|
||||
<p-panelMenu [model]="panelMenuItems"></p-panelMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,473 +0,0 @@
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MegaMenuItem, MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './menus.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MenusComponent implements OnInit {
|
||||
|
||||
breadcrumbItems: MenuItem[];
|
||||
|
||||
tieredItems: MenuItem[];
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
routeItems: MenuItem[];
|
||||
|
||||
megaMenuItems: MegaMenuItem[];
|
||||
|
||||
panelMenuItems: MenuItem[];
|
||||
|
||||
stepsItems: MenuItem[];
|
||||
|
||||
slideItems: MenuItem[];
|
||||
|
||||
menuItems: MenuItem[];
|
||||
|
||||
plainMenuItems: MenuItem[];
|
||||
|
||||
pageIndex: number = 0;
|
||||
|
||||
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: 'Home', icon: 'pi pi-fw pi-home'
|
||||
},
|
||||
];
|
||||
|
||||
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.plainMenuItems = [
|
||||
{
|
||||
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'
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
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.routeItems = [
|
||||
{label: 'Personal', routerLink:'personal'},
|
||||
{label: 'Seat', routerLink:'seat'},
|
||||
{label: 'Payment', routerLink:'payment'},
|
||||
{label: 'Confirmation', routerLink:'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',
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { PaymentComponent } from './payment.component';
|
||||
import { SeatComponent } from './seat.component';
|
||||
import { PersonalComponent } from './personal.component';
|
||||
import { ConfirmationComponent } from './confirmation.component';
|
||||
import { MenusComponent } from './menus.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild([
|
||||
{path:'',component: MenusComponent, children:[
|
||||
{path:'', redirectTo: 'personal', pathMatch: 'full'},
|
||||
{path: 'personal', component: PersonalComponent},
|
||||
{path: 'confirmation', component: ConfirmationComponent},
|
||||
{path: 'seat', component: SeatComponent},
|
||||
{path: 'payment', component: PaymentComponent}
|
||||
]}
|
||||
])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MenusModule { }
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-payment',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PaymentComponent{
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-personal',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-user mr-2 text-2xl"></i>
|
||||
<p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PersonalComponent{
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-seat',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class SeatComponent{
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Toast</h5>
|
||||
<p-toast key="tst" [baseZIndex]="99999"></p-toast>
|
||||
<button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2"></button>
|
||||
<button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2"></button>
|
||||
<button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card z-3">
|
||||
<h5>Messages</h5>
|
||||
<button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2"></button>
|
||||
<button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2"></button>
|
||||
<button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger"></button>
|
||||
|
||||
<p-messages [value]="msgs"></p-messages>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="field grid">
|
||||
<label for="username" class="col-fixed w-9rem">Username</label>
|
||||
<div class="col">
|
||||
<input id="username" 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="field grid">
|
||||
<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="field p-fluid">
|
||||
<label for="username2">Username</label>
|
||||
<input id="username2" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid" pInputText />
|
||||
<small id="username-help" class="p-error">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,59 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Message, MessageService } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './messages.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-message {
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-toast{
|
||||
margin-top: 5.70em;
|
||||
z-index:99999;
|
||||
}
|
||||
`],
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class MessagesComponent {
|
||||
|
||||
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' });
|
||||
}
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>ProgressBar</h5>
|
||||
<div class="grid">
|
||||
<div class="col">
|
||||
<p-progressBar [value]="value" [showValue]="true"></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>
|
||||
<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>
|
||||
<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-1"></p-chip>
|
||||
<p-chip label="Comedy" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Mystery" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Thriller" styleClass="m-1" [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-1"></p-chip>
|
||||
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Google" icon="pi pi-google" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-1" [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-1"></p-chip>
|
||||
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-1" [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-1 custom-chip"></p-chip>
|
||||
<p-chip label="Comedy" styleClass="m-1 custom-chip"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1 custom-chip"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="m-1 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>
|
||||
@@ -1,19 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './misc.component.html',
|
||||
})
|
||||
export class MiscComponent 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);
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
|
||||
<div class="flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
<div class="grid flex-column align-items-center">
|
||||
<span class="text-blue-500 font-bold text-3xl">404</span>
|
||||
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Looks like you are lost</h1>
|
||||
<span class="text-600">Requested resource is not available.</span>
|
||||
<a href="/" class="col-12 flex align-items-center py-5 mt-6 border-300 border-bottom-1">
|
||||
<div class="flex justify-content-center align-items-center bg-cyan-400 border-round" style="height:3.5rem; width:3.5rem;">
|
||||
<i class="text-50 pi pi-fw pi-table text-2xl"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-900 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</p>
|
||||
<span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/" class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
|
||||
<div class="flex justify-content-center align-items-center bg-orange-400 border-round" style="height:3.5rem; width:3.5rem;">
|
||||
<i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-900 lg:text-xl font-medium mb-0">Solution Center</p>
|
||||
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/" class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
|
||||
<div class="flex justify-content-center align-items-center bg-indigo-400 border-round" style="height:3.5rem; width:3.5rem;">
|
||||
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-900 lg:text-xl font-medium mb-0">Permission Manager</p>
|
||||
<span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="col-12 mt-5 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-notfound',
|
||||
templateUrl: './notfound.component.html',
|
||||
})
|
||||
export class NotfoundComponent {}
|
||||
@@ -1,124 +0,0 @@
|
||||
<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: '30vw'}" [breakpoints]="{'960px': '75vw'}">
|
||||
<p class="line-height-3 m-0">
|
||||
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>
|
||||
<ng-template pTemplate="footer">
|
||||
<button pButton icon="pi pi-check" (click)="display=false" label="Ok" class="p-button-outlined"></button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button (click)="display=true" pButton icon="pi pi-external-link" label="Show" style="width:auto;"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div class="grid formgrid">
|
||||
<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: '450px'}">
|
||||
<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: '450px'}">
|
||||
<ng-template pTemplate>
|
||||
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()" responsiveLayout="scroll">
|
||||
<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 style="min-width: 10rem;">{{product.name}}</td>
|
||||
<td style="min-width: 10rem;"><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="100" class="shadow-2"/></td>
|
||||
<td style="min-width: 12rem;">{{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: '350px'}" 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" style="width:auto;"></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 mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning mr-2"></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>
|
||||
@@ -1,80 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ConfirmationService, MessageService } from 'primeng/api';
|
||||
import { Product } from '../../api/product';
|
||||
import { AppMainComponent } from 'src/app/app.main.component';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './overlays.component.html',
|
||||
providers: [ConfirmationService, MessageService]
|
||||
})
|
||||
export class OverlaysComponent 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, public appMain: AppMainComponent) {}
|
||||
|
||||
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'});
|
||||
}
|
||||
}
|
||||
@@ -1,236 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Toolbar</h5>
|
||||
<p-toolbar>
|
||||
<div class="p-toolbar-group-left flex flex-wrap">
|
||||
<button pButton type="button" label="New" icon="pi pi-plus" class="mr-2"></button>
|
||||
<button pButton type="button" label="Open" icon="pi pi-folder-open" class="p-button-secondary mr-2"></button>
|
||||
|
||||
<i class="pi pi-bars p-toolbar-separator"></i>
|
||||
|
||||
<button pButton type="button" icon="pi pi-check" class="p-button-success mr-2"></button>
|
||||
<button pButton type="button" icon="pi pi-trash" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" icon="pi pi-print" class="p-button-danger"></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" class="line-height-3 m-0">
|
||||
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" class="line-height-3 m-0">
|
||||
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" class="line-height-3 m-0">
|
||||
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" class="line-height-3 m-0">
|
||||
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" class="line-height-3 m-0">
|
||||
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" class="line-height-3 m-0">
|
||||
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" class="line-height-3 m-0">
|
||||
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" class="line-height-3 m-0">
|
||||
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">
|
||||
<h5>Card</h5>
|
||||
<p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
|
||||
<button pButton type="button" icon="pi pi-plus" class="p-button-text"
|
||||
(click)="menu.toggle($event)"></button>
|
||||
</div>
|
||||
<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="field">
|
||||
<label for="username">Username</label>
|
||||
<input pInputText id="username" type="text"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input pInputText id="password" type="password"/>
|
||||
</div>
|
||||
<p-button label="Login" class="mt-2"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</p-divider>
|
||||
</div>
|
||||
<div class="col-5 align-items-center justify-content-center">
|
||||
<p class="line-height-3 m-0">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 class="line-height-3 m-0">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 class="line-height-3 m-0">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'}" [minSizes]="[10,0]" styleClass="mb-5" [panelStyle]="{'overflow': 'scroll'}">
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
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>
|
||||
</ng-template>
|
||||
<ng-template pTemplate>
|
||||
<p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" [style]="{'overflow':'scroll'}">
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
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>
|
||||
</ng-template>
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
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>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,31 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './panels.component.html',
|
||||
})
|
||||
export class PanelsComponent 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'
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -1,303 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Filter Menu</h5>
|
||||
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex justify-content-between flex-column sm:flex-row">
|
||||
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
|
||||
<span class="p-input-icon-left mb-2">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search Keyword" class="w-full"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Name
|
||||
<p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Country
|
||||
<p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Agent
|
||||
<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="font-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/demo/images/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="ml-2">{{option.name}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Date
|
||||
<p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<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-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" [style]="{'min-width': '12rem'}" >
|
||||
<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>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Activity
|
||||
<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" [style]="{'min-width': '12rem'}" ></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>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr>
|
||||
<td style="min-width: 12rem;">
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td style="min-width: 12rem;">
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text ml-2">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td style="min-width: 14rem;">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
|
||||
<span class="image-text ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
<td style="min-width: 10rem;">
|
||||
{{customer.date | date: 'MM/dd/yyyy'}}
|
||||
</td>
|
||||
<td style="min-width: 10rem;">
|
||||
{{customer.balance | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
<td style="min-width: 12rem;">
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td style="min-width: 12rem; ">
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
<td class="text-center" style="min-width: 8rem;">
|
||||
<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500 ': !customer.verified}"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="7">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="loadingbody">
|
||||
<tr>
|
||||
<td colspan="7">Loading customers data. Please wait.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<p-toggleButton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Id'" offLabel="Freeze Id" [style]="{'width': '12rem'}"></p-toggleButton>
|
||||
|
||||
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width:200px" pFrozenColumn>Name</th>
|
||||
<th style="width: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>
|
||||
<th style="width:200px">Status</th>
|
||||
<th style="width:200px">Activity</th>
|
||||
<th style="width:200px">Representative</th>
|
||||
<th style="width:200px" pFrozenColumn alignFrozen="right">Balance</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr>
|
||||
<td style="width:200px" pFrozenColumn>{{customer.name}}</td>
|
||||
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
|
||||
<td style="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 style="width:200px">{{customer.date}}</td>
|
||||
<td style="width:200px">{{customer.company}}</td>
|
||||
<td style="width:200px">
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td style="width:200px">{{customer.activity}}</td>
|
||||
<td style="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 style="width:200px" pFrozenColumn alignFrozen="right">{{formatCurrency(customer.balance)}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Expand</h5>
|
||||
<p-toast></p-toast>
|
||||
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="caption">
|
||||
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
|
||||
<div class="flex table-header">
|
||||
</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 style="min-width: 12rem;">{{product.name}}</td>
|
||||
<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
|
||||
<td style="min-width: 8rem;">{{product.price | currency:'USD'}}</td>
|
||||
<td style="min-width: 10rem;">{{product.category}}</td>
|
||||
<td style="min-width: 10rem;"><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
|
||||
<td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="rowexpansion" let-product>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div class="p-3">
|
||||
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
|
||||
<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>{{order.id}}</td>
|
||||
<td>{{order.customer}}</td>
|
||||
<td>{{order.date}}</td>
|
||||
<td>{{order.amount | currency:'USD'}}</td>
|
||||
<td><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
|
||||
<td><p-button type="button" icon="pi pi-search"></p-button></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<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>Subheader Grouping</h5>
|
||||
<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="400px">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<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 pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
|
||||
<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="font-bold ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<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" style="margin-left: .5em">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.company}}
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.date}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,145 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, ChangeDetectorRef, ElementRef } from '@angular/core';
|
||||
import { Customer, Representative } from '../../api/customer';
|
||||
import { CustomerService } from '../../service/customerservice';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
import { Table } from 'primeng/table';
|
||||
import { MessageService, ConfirmationService } from 'primeng/api'
|
||||
|
||||
@Component({
|
||||
templateUrl: './table.component.html',
|
||||
providers: [MessageService, ConfirmationService],
|
||||
styleUrls: ['../../../assets/demo/badges.scss'],
|
||||
styles: [`
|
||||
:host ::ng-deep .p-frozen-column {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-datatable-frozen-tbody {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-progressbar {
|
||||
height:.5rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class TableComponent 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;
|
||||
|
||||
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));
|
||||
});
|
||||
this.customerService.getCustomersMedium().then(customers => this.customers2 = customers);
|
||||
this.customerService.getCustomersLarge().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;
|
||||
}
|
||||
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
|
||||
clear(table: Table) {
|
||||
table.clear();
|
||||
this.filter.nativeElement.value = '';
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4>Timeline</h4>
|
||||
|
||||
<h5>Custom Timeline</h5>
|
||||
<p-timeline [value]="customEvents" align="alternate" styleClass="customized-timeline">
|
||||
<ng-template pTemplate="marker" let-event>
|
||||
<span class="custom-marker shadow-2" [style.backgroundColor]="event.color">
|
||||
<i [ngClass]="event.icon"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="content" let-event>
|
||||
<p-card [header]="event.status" [subheader]="event.date">
|
||||
<img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
|
||||
<button pButton label="Read more" class="p-button-text"></button>
|
||||
</p-card>
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
|
||||
<h5 style="margin-top: 5em">Horizontal - Alternate Align</h5>
|
||||
<p-timeline [value]="horizontalEvents" layout="horizontal" align="alternate">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
{{event}}
|
||||
</ng-template>
|
||||
<ng-template pTemplate="opposite" let-event>
|
||||
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,72 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { PrimeIcons } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './timeline.component.html',
|
||||
styles: [`
|
||||
.custom-marker {
|
||||
display: flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
.p-timeline-event-content,
|
||||
.p-timeline-event-opposite {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
::ng-deep {
|
||||
.customized-timeline {
|
||||
.p-timeline-event:nth-child(even) {
|
||||
flex-direction: row !important;
|
||||
|
||||
.p-timeline-event-content {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.p-card {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class TimelineComponent implements OnInit{
|
||||
|
||||
customEvents: any[];
|
||||
|
||||
horizontalEvents: any[];
|
||||
|
||||
ngOnInit() {
|
||||
this.customEvents = [
|
||||
{
|
||||
status: 'Ordered',
|
||||
date: '15/10/2020 10:30',
|
||||
icon: PrimeIcons.SHOPPING_CART,
|
||||
color: '#9C27B0',
|
||||
image: 'game-controller.jpg'
|
||||
},
|
||||
{status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7'},
|
||||
{status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800'},
|
||||
{status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B'}
|
||||
];
|
||||
|
||||
this.horizontalEvents = [
|
||||
'2020', '2021', '2022', '2023'
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
<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="caption">
|
||||
FileSystem
|
||||
</ng-template>
|
||||
<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>
|
||||
@@ -1,43 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NodeService } from '../../service/nodeservice';
|
||||
import { TreeNode } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './tree.component.html'
|
||||
})
|
||||
export class TreeComponent 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