add template
This commit is contained in:
Cetin Cakiroglu
parent
cf85fcad02
commit
89b1bf58fa
@ -4,7 +4,7 @@ root = true
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
indent_size = 4
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
|
||||
211
angular.json
211
angular.json
@ -1,111 +1,112 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"sakai": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
},
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/sakai",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"sakai": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/sakai",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/prismjs/prism.js",
|
||||
"node_modules/prismjs/components/prism-typescript.js"
|
||||
],
|
||||
"allowedCommonJsDependencies": ["@fullcalendar/daygrid","@fullcalendar/timegrid","@fullcalendar/interaction","chart.js"]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "3mb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "sakai:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "sakai:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "sakai:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "sakai:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "sakai:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "sakai:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "sakai"
|
||||
},
|
||||
"defaultProject": "sakai"
|
||||
}
|
||||
|
||||
34132
package-lock.json
generated
34132
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
93
package.json
93
package.json
@ -1,39 +1,58 @@
|
||||
{
|
||||
"name": "sakai",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~13.0.0",
|
||||
"@angular/common": "~13.0.0",
|
||||
"@angular/compiler": "~13.0.0",
|
||||
"@angular/core": "~13.0.0",
|
||||
"@angular/forms": "~13.0.0",
|
||||
"@angular/platform-browser": "~13.0.0",
|
||||
"@angular/platform-browser-dynamic": "~13.0.0",
|
||||
"@angular/router": "~13.0.0",
|
||||
"rxjs": "~7.4.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~13.0.4",
|
||||
"@angular/cli": "~13.0.4",
|
||||
"@angular/compiler-cli": "~13.0.0",
|
||||
"@types/jasmine": "~3.10.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"jasmine-core": "~3.10.0",
|
||||
"karma": "~6.3.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "~1.7.0",
|
||||
"typescript": "~4.4.3"
|
||||
}
|
||||
"name": "sakai",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~13.0.0",
|
||||
"@angular/cdk": "~13.0.0",
|
||||
"@angular/common": "~13.0.0",
|
||||
"@angular/compiler": "~13.0.0",
|
||||
"@angular/core": "~13.0.0",
|
||||
"@angular/forms": "~13.0.0",
|
||||
"@angular/platform-browser": "~13.0.0",
|
||||
"@angular/platform-browser-dynamic": "~13.0.0",
|
||||
"@angular/router": "~13.0.0",
|
||||
"@fullcalendar/angular": "^5.8.0",
|
||||
"@fullcalendar/core": "^5.8.0",
|
||||
"@fullcalendar/daygrid": "^5.8.0",
|
||||
"@fullcalendar/interaction": "^5.8.0",
|
||||
"@fullcalendar/timegrid": "^5.8.0",
|
||||
"chart.js": "^3.3.2",
|
||||
"primeflex": "^3.1.0",
|
||||
"primeicons": "5.0.0",
|
||||
"primeng": "13.0.1",
|
||||
"prismjs": "1.9.0",
|
||||
"rxjs": "~7.4.0",
|
||||
"tslib": "^2.3.0",
|
||||
"web-animations-js": "^2.3.2",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~13.0.4",
|
||||
"@angular/cli": "~13.0.4",
|
||||
"@angular/compiler-cli": "~13.0.0",
|
||||
"@types/jasmine": "~3.10.0",
|
||||
"@types/jasminewd2": "~2.0.8",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"jasmine-core": "~3.10.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~6.3.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-coverage-istanbul-reporter": "~3.0.3",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "~1.7.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~4.4.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,59 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {DashboardDemoComponent} from './demo/view/dashboarddemo.component';
|
||||
import {FormLayoutDemoComponent} from './demo/view/formlayoutdemo.component';
|
||||
import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
|
||||
import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
|
||||
import {MenusDemoComponent} from './demo/view/menusdemo.component';
|
||||
import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
|
||||
import {MiscDemoComponent} from './demo/view/miscdemo.component';
|
||||
import {EmptyDemoComponent} from './demo/view/emptydemo.component';
|
||||
import {ChartsDemoComponent} from './demo/view/chartsdemo.component';
|
||||
import {FileDemoComponent} from './demo/view/filedemo.component';
|
||||
import {DocumentationComponent} from './demo/view/documentation.component';
|
||||
import {AppMainComponent} from './app.main.component';
|
||||
import {InputDemoComponent} from './demo/view/inputdemo.component';
|
||||
import {ButtonDemoComponent} from './demo/view/buttondemo.component';
|
||||
import {TableDemoComponent} from './demo/view/tabledemo.component';
|
||||
import {ListDemoComponent} from './demo/view/listdemo.component';
|
||||
import {TreeDemoComponent} from './demo/view/treedemo.component';
|
||||
import {AppCrudComponent} from './pages/app.crud.component';
|
||||
import {FloatLabelDemoComponent} from './demo/view/floatlabeldemo.component';
|
||||
import { InvalidStateDemoComponent } from './demo/view/invalidstatedemo.component';
|
||||
import { AppTimelineDemoComponent } from './pages/app.timelinedemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
imports: [
|
||||
RouterModule.forRoot([
|
||||
{
|
||||
path: '', component: AppMainComponent,
|
||||
children: [
|
||||
{path: '', component: DashboardDemoComponent},
|
||||
{path: 'uikit/formlayout', component: FormLayoutDemoComponent},
|
||||
{path: 'uikit/input', component: InputDemoComponent},
|
||||
{path: 'uikit/floatlabel', component: FloatLabelDemoComponent},
|
||||
{path: 'uikit/invalidstate', component: InvalidStateDemoComponent},
|
||||
{path: 'uikit/button', component: ButtonDemoComponent},
|
||||
{path: 'uikit/table', component: TableDemoComponent},
|
||||
{path: 'uikit/list', component: ListDemoComponent},
|
||||
{path: 'uikit/tree', component: TreeDemoComponent},
|
||||
{path: 'uikit/panel', component: PanelsDemoComponent},
|
||||
{path: 'uikit/overlay', component: OverlaysDemoComponent},
|
||||
{path: 'uikit/menu', component: MenusDemoComponent},
|
||||
{path: 'uikit/message', component: MessagesDemoComponent},
|
||||
{path: 'uikit/misc', component: MiscDemoComponent},
|
||||
{path: 'uikit/charts', component: ChartsDemoComponent},
|
||||
{path: 'uikit/file', component: FileDemoComponent},
|
||||
{path: 'pages/crud', component: AppCrudComponent},
|
||||
{path: 'pages/timeline', component: AppTimelineDemoComponent},
|
||||
{path: 'pages/empty', component: EmptyDemoComponent},
|
||||
{path: 'documentation', component: DocumentationComponent}
|
||||
]
|
||||
},
|
||||
{path: '**', redirectTo: '/notfound'},
|
||||
], {scrollPositionRestoration: 'enabled'})
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
export class AppRoutingModule {
|
||||
}
|
||||
|
||||
68
src/app/app.code.component.scss
Normal file
68
src/app/app.code.component.scss
Normal file
@ -0,0 +1,68 @@
|
||||
.p-d-flex > div,
|
||||
.box {
|
||||
background-color: var(--surface-e);
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
.p-d-flex > div {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
i:not([class~="pi"]) {
|
||||
background-color: var(--surface-b);
|
||||
color: var(--primary-color);
|
||||
font-family: Monaco, courier, monospace;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
letter-spacing: .5px;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
:host ::ng-deep pre[class*="language-"] {
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
|
||||
&:before, &:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
code {
|
||||
border-left: 10px solid var(--surface-d) !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-b) !important;
|
||||
margin: 1em 0;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
|
||||
.token {
|
||||
&.tag,
|
||||
&.keyword {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
&.attr-name,
|
||||
&.attr-string {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: #4CAF50 !important;
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.string {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/app/app.code.component.ts
Normal file
34
src/app/app.code.component.ts
Normal file
@ -0,0 +1,34 @@
|
||||
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>
|
||||
`,
|
||||
styleUrls: ['./app.code.component.scss']
|
||||
})
|
||||
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,484 +1 @@
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
|
||||
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
|
||||
<style>
|
||||
:host {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toolbar img {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.toolbar #twitter-logo {
|
||||
height: 40px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.toolbar #youtube-logo {
|
||||
height: 40px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.toolbar #twitter-logo:hover,
|
||||
.toolbar #youtube-logo:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
margin: 82px auto 32px;
|
||||
padding: 0 16px;
|
||||
max-width: 960px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg.material-icons {
|
||||
height: 24px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
svg.material-icons:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.card svg.material-icons path {
|
||||
fill: #888;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
all: unset;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eee;
|
||||
background-color: #fafafa;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
margin: 0 8px 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.card-container .card:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.card.card-small {
|
||||
height: 16px;
|
||||
width: 168px;
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card):hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card):hover .material-icons path {
|
||||
fill: rgb(105, 103, 103);
|
||||
}
|
||||
|
||||
.card.highlight-card {
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
width: auto;
|
||||
min-width: 30%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card.card.highlight-card span {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
svg#rocket {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
svg#rocket-smoke {
|
||||
height: calc(100vh - 95px);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 180px;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover {
|
||||
color: #1976d2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #125699;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
border-radius: 6px;
|
||||
padding-top: 45px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
background-color: rgb(15, 15, 16);
|
||||
}
|
||||
|
||||
.terminal::before {
|
||||
content: "\2022 \2022 \2022";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
background: rgb(58, 58, 58);
|
||||
color: #c2c3c4;
|
||||
width: 100%;
|
||||
font-size: 2rem;
|
||||
line-height: 0;
|
||||
padding: 14px 0;
|
||||
text-indent: 4px;
|
||||
}
|
||||
|
||||
.terminal pre {
|
||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
|
||||
color: white;
|
||||
padding: 0 1rem 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.circle-link {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 40px;
|
||||
margin: 8px;
|
||||
background-color: white;
|
||||
border: 1px solid #eeeeee;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
transition: 1s ease-out;
|
||||
}
|
||||
|
||||
.circle-link:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-star-badge {
|
||||
color: #24292e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(27,31,35,.2);
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
||||
margin-left: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.github-star-badge:hover {
|
||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
||||
border-color: rgba(27,31,35,.35);
|
||||
background-position: -.5em;
|
||||
}
|
||||
|
||||
.github-star-badge .material-icons {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
svg#clouds {
|
||||
position: fixed;
|
||||
bottom: -160px;
|
||||
left: -230px;
|
||||
z-index: -10;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media screen and (max-width: 767px) {
|
||||
.card-container > *:not(.circle-link) ,
|
||||
.terminal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card:not(.highlight-card) {
|
||||
height: 16px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.card.highlight-card span {
|
||||
margin-left: 72px;
|
||||
}
|
||||
|
||||
svg#rocket-smoke {
|
||||
right: 120px;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
svg#rocket-smoke {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="toolbar" role="banner">
|
||||
<img
|
||||
width="40"
|
||||
alt="Angular Logo"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
|
||||
/>
|
||||
<span>Welcome</span>
|
||||
<div class="spacer"></div>
|
||||
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
|
||||
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
||||
<rect width="400" height="400" fill="none"/>
|
||||
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
|
||||
<svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="content" role="main">
|
||||
|
||||
<!-- Highlight Card -->
|
||||
<div class="card highlight-card card-small">
|
||||
|
||||
<svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
|
||||
<title>Rocket Ship</title>
|
||||
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
|
||||
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
|
||||
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
|
||||
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
|
||||
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<span>{{ title }} app is running!</span>
|
||||
|
||||
<svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
|
||||
<title>Rocket Ship Smoke</title>
|
||||
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<h2>Resources</h2>
|
||||
<p>Here are some links to help you get started:</p>
|
||||
|
||||
<div class="card-container">
|
||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
|
||||
<span>Learn Angular</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
|
||||
|
||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
|
||||
<span>CLI Documentation</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
||||
</a>
|
||||
|
||||
<a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 21.813 23.453"><path d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#808080"/><path d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#808080"/><path d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/><path d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/><path d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/></svg>
|
||||
<span>Angular Material</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
||||
</a>
|
||||
|
||||
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
|
||||
<span>Angular Blog</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
||||
</a>
|
||||
|
||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
|
||||
<span>Angular DevTools</span>
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<h2>Next Steps</h2>
|
||||
<p>What do you want to do next with your app?</p>
|
||||
|
||||
<input type="hidden" #selection>
|
||||
|
||||
<div class="card-container">
|
||||
<button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>New Component</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Angular Material</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Add PWA Support</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Add Dependency</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Run and Watch Tests</span>
|
||||
</button>
|
||||
|
||||
<button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
||||
<span>Build for Production</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Terminal -->
|
||||
<div class="terminal" [ngSwitch]="selection.value">
|
||||
<pre *ngSwitchDefault>ng generate component xyz</pre>
|
||||
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
|
||||
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
|
||||
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
|
||||
<pre *ngSwitchCase="'test'">ng test</pre>
|
||||
<pre *ngSwitchCase="'build'">ng build</pre>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="card-container">
|
||||
<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
|
||||
<title>Meetup Logo</title>
|
||||
<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
|
||||
<title>Discord Logo</title>
|
||||
<path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
|
||||
<path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
Love Angular?
|
||||
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
|
||||
<div class="github-star-badge">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||||
Star
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
|
||||
<title>Gray Clouds Background</title>
|
||||
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
@ -1,35 +1,27 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
/* tslint:disable:no-unused-variable */
|
||||
|
||||
import {async, TestBed} from '@angular/core/testing';
|
||||
import {RouterTestingModule} from '@angular/router/testing';
|
||||
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
|
||||
import {AppComponent} from './app.component';
|
||||
import {AppMainComponent} from './app.main.component';
|
||||
import {AppMenuComponent} from './app.menu.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [NoopAnimationsModule, RouterTestingModule],
|
||||
declarations: [AppComponent,
|
||||
AppMainComponent,
|
||||
AppMenuComponent
|
||||
]
|
||||
});
|
||||
TestBed.compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'sakai'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('sakai');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('sakai app is running!');
|
||||
});
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,10 +1,28 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { PrimeNGConfig } from 'primeng/api';
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss']
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'sakai';
|
||||
menuMode = 'static';
|
||||
|
||||
inputStyle = 'outlined';
|
||||
|
||||
ripple: boolean;
|
||||
|
||||
darkMode: boolean = false;
|
||||
|
||||
lightMode: boolean = true;
|
||||
|
||||
theme = 'light';
|
||||
|
||||
constructor(private primengConfig: PrimeNGConfig) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.primengConfig.ripple = true;
|
||||
this.ripple = true;
|
||||
document.documentElement.style.fontSize = '14px';
|
||||
}
|
||||
}
|
||||
|
||||
315
src/app/app.config.component.html
Normal file
315
src/app/app.config.component.html
Normal file
@ -0,0 +1,315 @@
|
||||
<div id="layout-config" class="layout-config" [ngClass]="{'layout-config-active': appMain.configActive}" (click)="appMain.onConfigClick($event)">
|
||||
<a style="cursor: pointer" id="layout-config-button" class="layout-config-button" (click)="onConfigButtonClick($event)">
|
||||
<i class="pi pi-cog"></i>
|
||||
</a>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text layout-config-close" (click)="onConfigButtonClick($event)"></button>
|
||||
<div class="layout-config-content">
|
||||
<h6 class="mt-0">Component Scale</h6>
|
||||
<div class="config-scale">
|
||||
<button pButton pRipple type="button" icon="pi pi-minus" (click)="decrementScale()" class="p-button-rounded p-button-text" [disabled]="scale === scales[0]"></button>
|
||||
<i *ngFor="let item of scales" class="pi pi-circle-on" [ngClass]="{'scale-active': item === scale}"></i>
|
||||
<button pButton pRipple type="button" icon="pi pi-plus" (click)="incrementScale()" class="p-button-rounded p-button-text" [disabled]="scale === scales[scales.length - 1]"></button>
|
||||
</div>
|
||||
|
||||
<h6>Input Style</h6>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="inputStyle" value="outlined" [(ngModel)]="app.inputStyle"
|
||||
inputId="inputStyle1"></p-radioButton>
|
||||
<label for="inputStyle1">Outlined</label>
|
||||
</div>
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="inputStyle" value="filled" [(ngModel)]="app.inputStyle"
|
||||
inputId="inputStyle2"></p-radioButton>
|
||||
<label for="inputStyle2">Filled</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Ripple Effect</h6>
|
||||
<p-inputSwitch [ngModel]="app.ripple" (onChange)="appMain.onRippleChange($event)"></p-inputSwitch>
|
||||
|
||||
<h6>Menu Type</h6>
|
||||
<!-- <div class="p-formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="menuType" value="static" [(ngModel)]="app.menuMode"
|
||||
inputId="menuType1" ></p-radioButton>
|
||||
<label for="menuType1">Static</label>
|
||||
</div>
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="menuType" value="overlay" [(ngModel)]="app.menuMode"
|
||||
inputId="menuType2"></p-radioButton>
|
||||
<label for="menuType2">Overlay</label>
|
||||
</div> -->
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="menuType" value="static" [(ngModel)]="app.menuMode" (onClick)="appMain.isStatic()"
|
||||
inputId="menuType1" ></p-radioButton>
|
||||
<label for="menuType1">Static</label>
|
||||
</div>
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="menuType" value="overlay" [(ngModel)]="app.menuMode" (onClick)="appMain.isOverlay()"
|
||||
inputId="menuType2"></p-radioButton>
|
||||
<label for="menuType2">Overlay</label>
|
||||
</div>
|
||||
|
||||
<h6>Bootstrap</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('bootstrap4-light-blue', false)">
|
||||
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('bootstrap4-light-purple', false)">
|
||||
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('bootstrap4-dark-blue', true)">
|
||||
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('bootstrap4-dark-purple', true)">
|
||||
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Purple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Material Design</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('md-light-indigo', false)">
|
||||
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('md-light-deeppurple', false)">
|
||||
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('md-dark-indigo', true)">
|
||||
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('md-dark-deeppurple', true)">
|
||||
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Material Design Compact</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('mdc-light-indigo', false)">
|
||||
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('mdc-light-deeppurple', false)">
|
||||
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('mdc-dark-indigo', true)">
|
||||
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('mdc-dark-deeppurple', true)">
|
||||
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Tailwind</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('tailwind-light', false)">
|
||||
<img src="assets/layout/images/themes/tailwind-light.png" alt="Tailwind Light">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Fluent UI</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('fluent-light', false)">
|
||||
<img src="assets/layout/images/themes/fluent-light.png" alt="Fluent Light">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>PrimeOne Design - 2022</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('lara-light-indigo', false)">
|
||||
<img src="assets/layout/images/themes/lara-light-indigo.png" alt="Lara Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('lara-light-blue', false)">
|
||||
<img src="assets/layout/images/themes/lara-light-blue.png" alt="Lara Light Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('lara-light-purple', false)">
|
||||
<img src="assets/layout/images/themes/lara-light-purple.png" alt="Lara Light Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('lara-light-teal', false)">
|
||||
<img src="assets/layout/images/themes/lara-light-teal.png" alt="Lara Light Teal">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('lara-dark-indigo', true)">
|
||||
<img src="assets/layout/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('lara-dark-blue', true)">
|
||||
<img src="assets/layout/images/themes/lara-dark-blue.png" alt="Lara Dark Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('lara-dark-purple', true)">
|
||||
<img src="assets/layout/images/themes/lara-dark-purple.png" alt="Lara Dark Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('lara-dark-teal', true)">
|
||||
<img src="assets/layout/images/themes/lara-dark-teal.png" alt="Lara Dark Teal">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>PrimeOne Design - 2021</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('saga-blue', false)">
|
||||
<img src="assets/layout/images/themes/saga-blue.png" alt="Saga Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('saga-green', false)">
|
||||
<img src="assets/layout/images/themes/saga-green.png" alt="Saga Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('saga-orange', false)">
|
||||
<img src="assets/layout/images/themes/saga-orange.png" alt="Saga Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('saga-purple', false)">
|
||||
<img src="assets/layout/images/themes/saga-purple.png" alt="Saga Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('vela-blue', true)">
|
||||
<img src="assets/layout/images/themes/vela-blue.png" alt="Vela Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('vela-green', true)">
|
||||
<img src="assets/layout/images/themes/vela-green.png" alt="Vela Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('vela-orange', true)">
|
||||
<img src="assets/layout/images/themes/vela-orange.png" alt="Vela Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('vela-purple', true)">
|
||||
<img src="assets/layout/images/themes/vela-purple.png" alt="Vela Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('arya-blue', true)">
|
||||
<img src="assets/layout/images/themes/arya-blue.png" alt="Arya Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('arya-green', true)">
|
||||
<img src="assets/layout/images/themes/arya-green.png" alt="Arya Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('arya-orange', true)">
|
||||
<img src="assets/layout/images/themes/arya-orange.png" alt="Arya Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="appMain.toggleTheme('arya-purple', true)">
|
||||
<img src="assets/layout/images/themes/arya-purple.png" alt="Arya Purple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <h5>Menu Mode</h5>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radioButton name="menuMode" value="static" [(ngModel)]="app.menuMode" inputId="menuMode1" (click)="appMain.menuInactiveDesktop = true"></p-radioButton>
|
||||
<label for="menuMode1">Static</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radioButton name="menuMode" value="overlay" [(ngModel)]="app.menuMode" inputId="menuMode2" (click)="appMain.menuInactiveDesktop = true"></p-radioButton>
|
||||
<label for="menuMode2">Overlay</label>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h5>Menu Color</h5>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radioButton name="lightMenu" [value]="true" [(ngModel)]="app.lightMenu" inputId="lightMenu1"></p-radioButton>
|
||||
<label for="lightMenu1">Light</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radioButton name="lightMenu" [value]="false" [(ngModel)]="app.lightMenu" inputId="lightMenu2"></p-radioButton>
|
||||
<label for="lightMenu2">Dark</label>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h5>Input Style</h5>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radioButton name="inputStyle" value="outlined" [(ngModel)]="app.inputStyle"
|
||||
inputId="inputStyle1"></p-radioButton>
|
||||
<label for="inputStyle1">Outlined</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radioButton name="inputStyle" value="filled" [(ngModel)]="app.inputStyle"
|
||||
inputId="inputStyle2"></p-radioButton>
|
||||
<label for="inputStyle2">Filled</label>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h5>Ripple Effect</h5>
|
||||
<p-inputSwitch [ngModel]="app.ripple" (onChange)="appMain.onRippleChange($event)"></p-inputSwitch>
|
||||
|
||||
<hr />
|
||||
|
||||
<h5>Topbar Themes</h5>
|
||||
<div class="layout-themes">
|
||||
<div *ngFor="let theme of topbarThemes">
|
||||
<a style="cursor: pointer" (click)="changeTopbarTheme(theme.name)" [ngStyle]="{'background-color': theme.color}">
|
||||
<i class="pi pi-check" *ngIf="topbarColor === theme.name"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h5>Component Themes</h5>
|
||||
<div class="layout-themes">
|
||||
<div *ngFor="let theme of componentThemes">
|
||||
<a style="cursor: pointer" (click)="changeComponentTheme(theme.name)" [ngStyle]="{'background-color': theme.color}">
|
||||
<i class="pi pi-check" *ngIf="componentColor === theme.name"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
81
src/app/app.config.component.ts
Normal file
81
src/app/app.config.component.ts
Normal file
@ -0,0 +1,81 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {AppComponent} from './app.component';
|
||||
import {AppMainComponent} from './app.main.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-config',
|
||||
templateUrl:'./app.config.component.html'
|
||||
})
|
||||
export class AppConfigComponent implements OnInit{
|
||||
|
||||
topbarThemes: any[];
|
||||
|
||||
componentThemes: any[];
|
||||
|
||||
topbarColor = 'light';
|
||||
|
||||
componentColor = 'blue';
|
||||
|
||||
scale:number = 14;
|
||||
|
||||
scales:any[] = [12,13,14,15,16];
|
||||
|
||||
constructor(public app: AppComponent, public appMain: AppMainComponent) {}
|
||||
|
||||
ngOnInit() { }
|
||||
// TODO: TO BE REMOVED
|
||||
// changeComponentTheme(theme) {
|
||||
// this.componentColor = theme;
|
||||
// const element = document.getElementById('theme-css');
|
||||
// const urlTokens = element.getAttribute('href').split('/');
|
||||
// urlTokens[urlTokens.length - 1] = 'theme-' + theme + '.css';
|
||||
// const newURL = urlTokens.join('/');
|
||||
|
||||
// this.replaceLink(element, newURL);
|
||||
// }
|
||||
// TODO: TO BE REMOVED (MAYBE)
|
||||
replaceLink(linkElement, href) {
|
||||
if (this.isIE()) {
|
||||
linkElement.setAttribute('href', href);
|
||||
}
|
||||
else {
|
||||
const id = linkElement.getAttribute('id');
|
||||
const cloneLinkElement = linkElement.cloneNode(true);
|
||||
|
||||
cloneLinkElement.setAttribute('href', href);
|
||||
cloneLinkElement.setAttribute('id', id + '-clone');
|
||||
|
||||
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
|
||||
|
||||
cloneLinkElement.addEventListener('load', () => {
|
||||
linkElement.remove();
|
||||
cloneLinkElement.setAttribute('id', id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
isIE() {
|
||||
return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
|
||||
}
|
||||
|
||||
onConfigButtonClick(event) {
|
||||
this.appMain.configActive = !this.appMain.configActive;
|
||||
this.appMain.configClick = true;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
incrementScale(){
|
||||
this.scale++;
|
||||
this.applyScale();
|
||||
}
|
||||
|
||||
decrementScale(){
|
||||
this.scale--;
|
||||
this.applyScale();
|
||||
}
|
||||
|
||||
applyScale(){
|
||||
document.documentElement.style.fontSize = this.scale + 'px';
|
||||
}
|
||||
|
||||
}
|
||||
5
src/app/app.footer.component.html
Normal file
5
src/app/app.footer.component.html
Normal file
@ -0,0 +1,5 @@
|
||||
<div class="layout-footer">
|
||||
<img src="assets/layout/images/{{app.darkMode ? 'logo-white' : 'logo-dark'}}.svg" alt="Logo" height="20" class="mr-2"/>
|
||||
by
|
||||
<span class="font-medium ml-2">PrimeNG</span>
|
||||
</div>
|
||||
10
src/app/app.footer.component.ts
Normal file
10
src/app/app.footer.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
templateUrl: './app.footer.component.html'
|
||||
})
|
||||
export class AppFooterComponent{
|
||||
constructor(public app: AppComponent) {}
|
||||
}
|
||||
21
src/app/app.main.component.html
Normal file
21
src/app/app.main.component.html
Normal file
@ -0,0 +1,21 @@
|
||||
<div class="layout-wrapper" [ngClass]="{'layout-overlay':isOverlay(),
|
||||
'layout-static':isStatic(),
|
||||
'layout-theme-light':!app.darkMode,
|
||||
'layout-theme-dark':app.darkMode,
|
||||
'layout-overlay-sidebar-active': overlayMenuActive,
|
||||
'layout-static-sidebar-inactive': staticMenuInactive,
|
||||
'layout-mobile-sidebar-active':menuActiveMobile,
|
||||
'p-ripple-disabled': !app.ripple, 'p-input-filled': app.inputStyle === 'filled'}">
|
||||
<app-topbar></app-topbar>
|
||||
<div class="layout-sidebar">
|
||||
<app-menu></app-menu>
|
||||
</div>
|
||||
<div class="layout-main-container">
|
||||
<div class="layout-main">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
<app-config></app-config>
|
||||
<div *ngIf="menuActiveMobile" class="layout-mask p-component-overlay"></div>
|
||||
</div>
|
||||
173
src/app/app.main.component.ts
Normal file
173
src/app/app.main.component.ts
Normal file
@ -0,0 +1,173 @@
|
||||
import {Component, AfterViewInit, OnDestroy, ViewChild, Renderer2, OnInit} from '@angular/core';
|
||||
import {trigger, state, style, transition, animate} from '@angular/animations';
|
||||
import { PrimeNGConfig } from 'primeng/api';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main',
|
||||
templateUrl: './app.main.component.html',
|
||||
animations: [
|
||||
trigger('submenu', [
|
||||
state('hidden', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('visible', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('visible => hidden', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
|
||||
transition('hidden => visible', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
||||
])
|
||||
]
|
||||
})
|
||||
export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
|
||||
public menuInactiveDesktop: boolean;
|
||||
|
||||
public menuActiveMobile: boolean;
|
||||
|
||||
public overlayMenuActive: boolean;
|
||||
|
||||
public staticMenuInactive: boolean = false;
|
||||
|
||||
public profileActive: boolean;
|
||||
|
||||
public topMenuActive: boolean;
|
||||
|
||||
public topMenuLeaving: boolean;
|
||||
|
||||
public theme: string;
|
||||
|
||||
documentClickListener: () => void;
|
||||
|
||||
menuClick: boolean;
|
||||
|
||||
topMenuButtonClick: boolean;
|
||||
|
||||
configActive: boolean;
|
||||
|
||||
configClick: boolean;
|
||||
|
||||
constructor(public renderer: Renderer2, private primengConfig: PrimeNGConfig, public app: AppComponent) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.primengConfig.ripple = true;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
// hides the overlay menu and top menu if outside is clicked
|
||||
this.documentClickListener = this.renderer.listen('body', 'click', (event) => {
|
||||
if (!this.isDesktop()) {
|
||||
if (!this.menuClick) {
|
||||
this.menuActiveMobile = false;
|
||||
}
|
||||
|
||||
if (!this.topMenuButtonClick) {
|
||||
this.hideTopMenu();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (!this.menuClick && this.isOverlay()) {
|
||||
this.menuInactiveDesktop = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.configActive && !this.configClick) {
|
||||
this.configActive = false;
|
||||
}
|
||||
|
||||
this.configClick = false;
|
||||
this.menuClick = false;
|
||||
this.topMenuButtonClick = false;
|
||||
});
|
||||
}
|
||||
|
||||
toggleMenu(event: Event) {
|
||||
this.menuClick = true;
|
||||
|
||||
if (this.isDesktop()) {
|
||||
if (this.app.menuMode === 'overlay') {
|
||||
if(this.menuActiveMobile === true) {
|
||||
this.overlayMenuActive = true;
|
||||
}
|
||||
|
||||
this.overlayMenuActive = !this.overlayMenuActive;
|
||||
this.menuActiveMobile = false;
|
||||
}
|
||||
else if (this.app.menuMode === 'static') {
|
||||
this.staticMenuInactive = !this.staticMenuInactive;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.menuActiveMobile = !this.menuActiveMobile;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
toggleProfile(event: Event) {
|
||||
this.profileActive = !this.profileActive;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
toggleTopMenu(event: Event) {
|
||||
this.topMenuButtonClick = true;
|
||||
this.menuActiveMobile = false;
|
||||
|
||||
if (this.topMenuActive) {
|
||||
this.hideTopMenu();
|
||||
} else {
|
||||
this.topMenuActive = true;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
hideTopMenu() {
|
||||
this.topMenuLeaving = true;
|
||||
setTimeout(() => {
|
||||
this.topMenuActive = false;
|
||||
this.topMenuLeaving = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
onMenuClick() {
|
||||
this.menuClick = true;
|
||||
}
|
||||
|
||||
onRippleChange(event) {
|
||||
this.app.ripple = event.checked;
|
||||
this.primengConfig.ripple = event.checked;
|
||||
}
|
||||
|
||||
onConfigClick(event) {
|
||||
this.configClick = true;
|
||||
}
|
||||
|
||||
isStatic() {
|
||||
return this.app.menuMode === 'static';
|
||||
}
|
||||
|
||||
isOverlay() {
|
||||
return this.app.menuMode === 'overlay';
|
||||
}
|
||||
|
||||
isDesktop() {
|
||||
return window.innerWidth > 1024;
|
||||
}
|
||||
|
||||
onSearchClick() {
|
||||
this.topMenuButtonClick = true;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.documentClickListener) {
|
||||
this.documentClickListener();
|
||||
}
|
||||
}
|
||||
|
||||
toggleTheme(theme:string, darkMode:boolean){
|
||||
let themeElement = document.getElementById('theme-css');
|
||||
themeElement.setAttribute('href', 'assets/theme/' + theme + '/theme.css');
|
||||
this.app.darkMode = darkMode;
|
||||
}
|
||||
}
|
||||
121
src/app/app.menu.component.ts
Normal file
121
src/app/app.menu.component.ts
Normal file
@ -0,0 +1,121 @@
|
||||
import {Component, OnInit } from '@angular/core';
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
template: `
|
||||
<div class="layout-menu-container">
|
||||
<ul class="layout-menu">
|
||||
<li app-menu class="layout-menuitem-category" *ngFor="let item of model; let i = index;" [item]="item" [index]="i" [root]="true">
|
||||
<div class="layout-menuitem-root-text">{{item.label}}</div>
|
||||
<ul>
|
||||
<li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i"></li>
|
||||
</ul>
|
||||
</li>
|
||||
<a href="https://www.primefaces.org/primeblocks-ng/">
|
||||
<img src="assets/layout/images/{{app.darkMode ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class AppMenuComponent implements OnInit {
|
||||
|
||||
model: any[];
|
||||
|
||||
constructor(public app: AppComponent){}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.model = [
|
||||
{
|
||||
label: 'Home',
|
||||
items:[{
|
||||
label: 'Dashboard',
|
||||
icon: 'pi pi-fw pi-home', routerLink: ['/']
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: 'UI Kit',
|
||||
items: [
|
||||
{label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']},
|
||||
{label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']},
|
||||
{label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']},
|
||||
{label: 'Invalid State', icon: 'pi pi-exclamation-circle', routerLink: ['/uikit/invalidstate']},
|
||||
{label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'},
|
||||
{label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']},
|
||||
{label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']},
|
||||
{label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']},
|
||||
{label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']},
|
||||
{label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']},
|
||||
{label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']},
|
||||
{label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']},
|
||||
{label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']},
|
||||
{label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']},
|
||||
{label: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc']}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
items: [
|
||||
{label: 'Crud', icon: 'pi pi-fw pi-user-edit', routerLink: ['/pages/crud']},
|
||||
{label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']},
|
||||
{label: 'Empty', icon: 'pi pi-fw pi-circle-off', routerLink: ['/pages/empty']}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Hierarchy',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1', icon: 'pi pi-fw pi-align-left',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1.1', icon: 'pi pi-fw pi-align-left',
|
||||
items: [
|
||||
{label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-align-left'},
|
||||
{label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-align-left'},
|
||||
{label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-align-left'},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 1.2', icon: 'pi pi-fw pi-align-left',
|
||||
items: [
|
||||
{label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-align-left'}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2', icon: 'pi pi-fw pi-align-left',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 2.1', icon: 'pi pi-fw pi-align-left',
|
||||
items: [
|
||||
{label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-align-left'},
|
||||
{label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-align-left'},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2.2', icon: 'pi pi-fw pi-align-left',
|
||||
items: [
|
||||
{label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-align-left'},
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Get Started',
|
||||
items:[
|
||||
{
|
||||
label: 'Documentation', icon: 'pi pi-fw pi-question', routerLink: ['/documentation']
|
||||
},
|
||||
{
|
||||
label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-angular']
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
20
src/app/app.menu.service.ts
Normal file
20
src/app/app.menu.service.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
export class MenuService {
|
||||
|
||||
private menuSource = new Subject<string>();
|
||||
private resetSource = new Subject();
|
||||
|
||||
menuSource$ = this.menuSource.asObservable();
|
||||
resetSource$ = this.resetSource.asObservable();
|
||||
|
||||
onMenuStateChange(key: string) {
|
||||
this.menuSource.next(key);
|
||||
}
|
||||
|
||||
reset() {
|
||||
// this.resetSource.next();
|
||||
}
|
||||
}
|
||||
152
src/app/app.menuitem.component.ts
Normal file
152
src/app/app.menuitem.component.ts
Normal file
@ -0,0 +1,152 @@
|
||||
import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import {NavigationEnd, Router} from '@angular/router';
|
||||
import {animate, state, style, transition, trigger} from '@angular/animations';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {filter} from 'rxjs/operators';
|
||||
import {MenuService} from './app.menu.service';
|
||||
import {AppMainComponent} from './app.main.component';
|
||||
|
||||
@Component({
|
||||
/* tslint:disable:component-selector */
|
||||
selector: '[app-menuitem]',
|
||||
/* tslint:enable:component-selector */
|
||||
template: `
|
||||
<ng-container>
|
||||
<a [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.class"
|
||||
*ngIf="(!item.routerLink || item.items) && item.visible !== false" (keydown.enter)="itemClick($event)"
|
||||
[attr.target]="item.target" [attr.tabindex]="0" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<a (click)="itemClick($event)" *ngIf="(item.routerLink && !item.items) && item.visible !== false" [ngClass]="item.class"
|
||||
[routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink router-link-exact-active"
|
||||
[routerLinkActiveOptions]="{exact: true}" [attr.target]="item.target" [attr.tabindex]="0" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')">
|
||||
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
|
||||
<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</ng-container>
|
||||
`,
|
||||
host: {
|
||||
'[class.active-menuitem]': 'active'
|
||||
},
|
||||
animations: [
|
||||
trigger('children', [
|
||||
state('void', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('hiddenAnimated', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('visibleAnimated', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
|
||||
transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
|
||||
transition('void => visibleAnimated, visibleAnimated => void',
|
||||
animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
||||
])
|
||||
]
|
||||
})
|
||||
export class AppMenuitemComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Input() item: any;
|
||||
|
||||
@Input() index: number;
|
||||
|
||||
@Input() root: boolean;
|
||||
|
||||
@Input() parentKey: string;
|
||||
|
||||
active = false;
|
||||
|
||||
menuSourceSubscription: Subscription;
|
||||
|
||||
menuResetSubscription: Subscription;
|
||||
|
||||
key: string;
|
||||
|
||||
constructor(public app: AppMainComponent, public router: Router, private cd: ChangeDetectorRef, private menuService: MenuService) {
|
||||
this.menuSourceSubscription = this.menuService.menuSource$.subscribe(key => {
|
||||
// deactivate current active menu
|
||||
if (this.active && this.key !== key && key.indexOf(this.key) !== 0) {
|
||||
this.active = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
|
||||
this.active = false;
|
||||
});
|
||||
|
||||
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
|
||||
.subscribe(params => {
|
||||
if (this.item.routerLink) {
|
||||
this.updateActiveStateFromRoute();
|
||||
} else {
|
||||
this.active = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.item.routerLink) {
|
||||
this.updateActiveStateFromRoute();
|
||||
}
|
||||
|
||||
this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
|
||||
}
|
||||
|
||||
updateActiveStateFromRoute() {
|
||||
this.active = this.router.isActive(this.item.routerLink[0], this.item.items ? false : true);
|
||||
}
|
||||
|
||||
itemClick(event: Event) {
|
||||
event.stopPropagation();
|
||||
// avoid processing disabled items
|
||||
if (this.item.disabled) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// notify other items
|
||||
this.menuService.onMenuStateChange(this.key);
|
||||
|
||||
// execute command
|
||||
if (this.item.command) {
|
||||
this.item.command({originalEvent: event, item: this.item});
|
||||
}
|
||||
|
||||
// toggle active state
|
||||
if (this.item.items) {
|
||||
this.active = !this.active;
|
||||
} else {
|
||||
// activate item
|
||||
this.active = true;
|
||||
|
||||
// hide overlay menus
|
||||
this.app.menuActiveMobile = false;
|
||||
|
||||
if (this.app.isDesktop() && this.app.isOverlay()) {
|
||||
this.app.menuInactiveDesktop = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.menuSourceSubscription) {
|
||||
this.menuSourceSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
if (this.menuResetSubscription) {
|
||||
this.menuResetSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,18 +1,264 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
|
||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||
import {AppRoutingModule} from './app-routing.module';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import {AccordionModule} from 'primeng/accordion';
|
||||
import {AutoCompleteModule} from 'primeng/autocomplete';
|
||||
import {AvatarModule} from 'primeng/avatar';
|
||||
import {AvatarGroupModule} from 'primeng/avatargroup';
|
||||
import {BadgeModule} from 'primeng/badge';
|
||||
import {BreadcrumbModule} from 'primeng/breadcrumb';
|
||||
import {ButtonModule} from 'primeng/button';
|
||||
import {CalendarModule} from 'primeng/calendar';
|
||||
import {CardModule} from 'primeng/card';
|
||||
import {CarouselModule} from 'primeng/carousel';
|
||||
import {CascadeSelectModule} from 'primeng/cascadeselect';
|
||||
import {ChartModule} from 'primeng/chart';
|
||||
import {CheckboxModule} from 'primeng/checkbox';
|
||||
import {ChipModule} from 'primeng/chip';
|
||||
import {ChipsModule} from 'primeng/chips';
|
||||
import {CodeHighlighterModule} from 'primeng/codehighlighter';
|
||||
import {ConfirmDialogModule} from 'primeng/confirmdialog';
|
||||
import {ConfirmPopupModule} from 'primeng/confirmpopup';
|
||||
import {ColorPickerModule} from 'primeng/colorpicker';
|
||||
import {ContextMenuModule} from 'primeng/contextmenu';
|
||||
import {DataViewModule} from 'primeng/dataview';
|
||||
import {DialogModule} from 'primeng/dialog';
|
||||
import {DividerModule} from 'primeng/divider';
|
||||
import {DropdownModule} from 'primeng/dropdown';
|
||||
import {FieldsetModule} from 'primeng/fieldset';
|
||||
import {FileUploadModule} from 'primeng/fileupload';
|
||||
import {FullCalendarModule} from '@fullcalendar/angular';
|
||||
import {GalleriaModule} from 'primeng/galleria';
|
||||
import {ImageModule} from 'primeng/image';
|
||||
import {InplaceModule} from 'primeng/inplace';
|
||||
import {InputNumberModule} from 'primeng/inputnumber';
|
||||
import {InputMaskModule} from 'primeng/inputmask';
|
||||
import {InputSwitchModule} from 'primeng/inputswitch';
|
||||
import {InputTextModule} from 'primeng/inputtext';
|
||||
import {InputTextareaModule} from 'primeng/inputtextarea';
|
||||
import {KnobModule} from 'primeng/knob';
|
||||
import {LightboxModule} from 'primeng/lightbox';
|
||||
import {ListboxModule} from 'primeng/listbox';
|
||||
import {MegaMenuModule} from 'primeng/megamenu';
|
||||
import {MenuModule} from 'primeng/menu';
|
||||
import {MenubarModule} from 'primeng/menubar';
|
||||
import {MessagesModule} from 'primeng/messages';
|
||||
import {MessageModule} from 'primeng/message';
|
||||
import {MultiSelectModule} from 'primeng/multiselect';
|
||||
import {OrderListModule} from 'primeng/orderlist';
|
||||
import {OrganizationChartModule} from 'primeng/organizationchart';
|
||||
import {OverlayPanelModule} from 'primeng/overlaypanel';
|
||||
import {PaginatorModule} from 'primeng/paginator';
|
||||
import {PanelModule} from 'primeng/panel';
|
||||
import {PanelMenuModule} from 'primeng/panelmenu';
|
||||
import {PasswordModule} from 'primeng/password';
|
||||
import {PickListModule} from 'primeng/picklist';
|
||||
import {ProgressBarModule} from 'primeng/progressbar';
|
||||
import {RadioButtonModule} from 'primeng/radiobutton';
|
||||
import {RatingModule} from 'primeng/rating';
|
||||
import {RippleModule} from 'primeng/ripple';
|
||||
import {ScrollPanelModule} from 'primeng/scrollpanel';
|
||||
import {ScrollTopModule} from 'primeng/scrolltop';
|
||||
import {SelectButtonModule} from 'primeng/selectbutton';
|
||||
import {SidebarModule} from 'primeng/sidebar';
|
||||
import {SkeletonModule} from 'primeng/skeleton';
|
||||
import {SlideMenuModule} from 'primeng/slidemenu';
|
||||
import {SliderModule} from 'primeng/slider';
|
||||
import {SplitButtonModule} from 'primeng/splitbutton';
|
||||
import {SplitterModule} from 'primeng/splitter';
|
||||
import {StepsModule} from 'primeng/steps';
|
||||
import {TabMenuModule} from 'primeng/tabmenu';
|
||||
import {TableModule} from 'primeng/table';
|
||||
import {TabViewModule} from 'primeng/tabview';
|
||||
import {TagModule} from 'primeng/tag';
|
||||
import {TerminalModule} from 'primeng/terminal';
|
||||
import {TieredMenuModule} from 'primeng/tieredmenu';
|
||||
import {TimelineModule} from 'primeng/timeline';
|
||||
import {ToastModule} from 'primeng/toast';
|
||||
import {ToggleButtonModule} from 'primeng/togglebutton';
|
||||
import {ToolbarModule} from 'primeng/toolbar';
|
||||
import {TooltipModule} from 'primeng/tooltip';
|
||||
import {TreeModule} from 'primeng/tree';
|
||||
import {TreeTableModule} from 'primeng/treetable';
|
||||
import {VirtualScrollerModule} from 'primeng/virtualscroller';
|
||||
|
||||
import {AppCodeModule} from './app.code.component';
|
||||
import {AppComponent} from './app.component';
|
||||
import {AppMainComponent} from './app.main.component';
|
||||
import {AppTopBarComponent} from './app.topbar.component';
|
||||
import {AppFooterComponent} from './app.footer.component';
|
||||
import {AppConfigComponent} from './app.config.component';
|
||||
import {AppMenuComponent} from './app.menu.component';
|
||||
import {AppMenuitemComponent} from './app.menuitem.component';
|
||||
import {DashboardDemoComponent} from './demo/view/dashboarddemo.component';
|
||||
import {FormLayoutDemoComponent} from './demo/view/formlayoutdemo.component';
|
||||
import {FloatLabelDemoComponent} from './demo/view/floatlabeldemo.component';
|
||||
import {InvalidStateDemoComponent} from './demo/view/invalidstatedemo.component';
|
||||
import {InputDemoComponent} from './demo/view/inputdemo.component';
|
||||
import {ButtonDemoComponent} from './demo/view/buttondemo.component';
|
||||
import {TableDemoComponent} from './demo/view/tabledemo.component';
|
||||
import {ListDemoComponent} from './demo/view/listdemo.component';
|
||||
import {TreeDemoComponent} from './demo/view/treedemo.component';
|
||||
import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
|
||||
import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
|
||||
import {MenusDemoComponent} from './demo/view/menusdemo.component';
|
||||
import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
|
||||
import {MiscDemoComponent} from './demo/view/miscdemo.component';
|
||||
import {EmptyDemoComponent} from './demo/view/emptydemo.component';
|
||||
import {ChartsDemoComponent} from './demo/view/chartsdemo.component';
|
||||
import {FileDemoComponent} from './demo/view/filedemo.component';
|
||||
import {DocumentationComponent} from './demo/view/documentation.component';
|
||||
import {AppCrudComponent} from './pages/app.crud.component';
|
||||
import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
|
||||
|
||||
import {CountryService} from './demo/service/countryservice';
|
||||
import {CustomerService} from './demo/service/customerservice';
|
||||
import {EventService} from './demo/service/eventservice';
|
||||
import {IconService} from './demo/service/iconservice';
|
||||
import {NodeService} from './demo/service/nodeservice';
|
||||
import {PhotoService} from './demo/service/photoservice';
|
||||
import {ProductService} from './demo/service/productservice';
|
||||
import {MenuService} from './app.menu.service';
|
||||
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
|
||||
FullCalendarModule.registerPlugins([
|
||||
dayGridPlugin,
|
||||
timeGridPlugin,
|
||||
interactionPlugin
|
||||
]);
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule,
|
||||
BrowserAnimationsModule,
|
||||
AccordionModule,
|
||||
AutoCompleteModule,
|
||||
AvatarModule,
|
||||
AvatarGroupModule,
|
||||
BadgeModule,
|
||||
BreadcrumbModule,
|
||||
ButtonModule,
|
||||
CalendarModule,
|
||||
CardModule,
|
||||
CarouselModule,
|
||||
CascadeSelectModule,
|
||||
ChartModule,
|
||||
CheckboxModule,
|
||||
ChipsModule,
|
||||
ChipModule,
|
||||
CodeHighlighterModule,
|
||||
ConfirmDialogModule,
|
||||
ConfirmPopupModule,
|
||||
ColorPickerModule,
|
||||
ContextMenuModule,
|
||||
DataViewModule,
|
||||
DialogModule,
|
||||
DividerModule,
|
||||
DropdownModule,
|
||||
FieldsetModule,
|
||||
FileUploadModule,
|
||||
FullCalendarModule,
|
||||
GalleriaModule,
|
||||
ImageModule,
|
||||
InplaceModule,
|
||||
InputNumberModule,
|
||||
InputMaskModule,
|
||||
InputSwitchModule,
|
||||
InputTextModule,
|
||||
InputTextareaModule,
|
||||
KnobModule,
|
||||
LightboxModule,
|
||||
ListboxModule,
|
||||
MegaMenuModule,
|
||||
MenuModule,
|
||||
MenubarModule,
|
||||
MessageModule,
|
||||
MessagesModule,
|
||||
MultiSelectModule,
|
||||
OrderListModule,
|
||||
OrganizationChartModule,
|
||||
OverlayPanelModule,
|
||||
PaginatorModule,
|
||||
PanelModule,
|
||||
PanelMenuModule,
|
||||
PasswordModule,
|
||||
PickListModule,
|
||||
ProgressBarModule,
|
||||
RadioButtonModule,
|
||||
RatingModule,
|
||||
RippleModule,
|
||||
ScrollPanelModule,
|
||||
ScrollTopModule,
|
||||
SelectButtonModule,
|
||||
SidebarModule,
|
||||
SkeletonModule,
|
||||
SlideMenuModule,
|
||||
SliderModule,
|
||||
SplitButtonModule,
|
||||
SplitterModule,
|
||||
StepsModule,
|
||||
TagModule,
|
||||
TableModule,
|
||||
TabMenuModule,
|
||||
TabViewModule,
|
||||
TerminalModule,
|
||||
TieredMenuModule,
|
||||
TimelineModule,
|
||||
ToastModule,
|
||||
ToggleButtonModule,
|
||||
ToolbarModule,
|
||||
TooltipModule,
|
||||
TreeModule,
|
||||
TreeTableModule,
|
||||
VirtualScrollerModule,
|
||||
AppCodeModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AppMainComponent,
|
||||
AppTopBarComponent,
|
||||
AppFooterComponent,
|
||||
AppConfigComponent,
|
||||
AppMenuComponent,
|
||||
AppMenuitemComponent,
|
||||
DashboardDemoComponent,
|
||||
FormLayoutDemoComponent,
|
||||
FloatLabelDemoComponent,
|
||||
InvalidStateDemoComponent,
|
||||
InputDemoComponent,
|
||||
ButtonDemoComponent,
|
||||
TableDemoComponent,
|
||||
ListDemoComponent,
|
||||
TreeDemoComponent,
|
||||
PanelsDemoComponent,
|
||||
OverlaysDemoComponent,
|
||||
MenusDemoComponent,
|
||||
MessagesDemoComponent,
|
||||
MessagesDemoComponent,
|
||||
MiscDemoComponent,
|
||||
ChartsDemoComponent,
|
||||
EmptyDemoComponent,
|
||||
FileDemoComponent,
|
||||
DocumentationComponent,
|
||||
AppCrudComponent,
|
||||
AppTimelineDemoComponent,
|
||||
],
|
||||
providers: [
|
||||
{provide: LocationStrategy, useClass: HashLocationStrategy},
|
||||
CountryService, CustomerService, EventService, IconService, NodeService,
|
||||
PhotoService, ProductService, MenuService
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
29
src/app/app.topbar.component.html
Normal file
29
src/app/app.topbar.component.html
Normal file
@ -0,0 +1,29 @@
|
||||
<div class="layout-topbar">
|
||||
<a class="layout-topbar-logo" routerLink="">
|
||||
<img src="assets/layout/images/{{app.darkMode ? 'logo-white' : 'logo-dark'}}.svg" alt="logo">
|
||||
<span>SAKAI</span>
|
||||
</a>
|
||||
|
||||
<a class="p-link layout-menu-button layout-topbar-button" href="#" (click)="appMain.toggleMenu($event)">
|
||||
<i class="pi pi-bars"></i>
|
||||
</a>
|
||||
|
||||
<a class="p-link layout-topbar-menu-button layout-topbar-button" href="#" (click)="appMain.toggleTopMenu($event)">
|
||||
<i class="pi pi-ellipsis-v"></i>
|
||||
</a>
|
||||
|
||||
<div class="layout-topbar-menu lg flex origin-top layout-topbar-menu-mobile-active" *ngIf="appMain.topMenuActive">
|
||||
<a href="#" class="p-link layout-topbar-button">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Calendar</span>
|
||||
</a>
|
||||
<a href="#" class="p-link layout-topbar-button">
|
||||
<i class="pi pi-cog"></i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a href="#" class="p-link layout-topbar-button">
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
24
src/app/app.topbar.component.ts
Normal file
24
src/app/app.topbar.component.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import {Component, OnDestroy} from '@angular/core';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AppMainComponent } from './app.main.component';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
selector: 'app-topbar',
|
||||
templateUrl: './app.topbar.component.html'
|
||||
})
|
||||
export class AppTopBarComponent implements OnDestroy{
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
constructor(public app: AppComponent, public appMain: AppMainComponent) {}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/app/demo/domain/customer.ts
Normal file
20
src/app/demo/domain/customer.ts
Normal file
@ -0,0 +1,20 @@
|
||||
export interface Country {
|
||||
name?: string;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
export interface Representative {
|
||||
name?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
export interface Customer {
|
||||
id?: number;
|
||||
name?: string;
|
||||
country?: Country;
|
||||
company?: string;
|
||||
date?: string;
|
||||
status?: string;
|
||||
activity?: number;
|
||||
representative?: Representative;
|
||||
}
|
||||
6
src/app/demo/domain/image.ts
Normal file
6
src/app/demo/domain/image.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface Image {
|
||||
previewImageSrc?;
|
||||
thumbnailImageSrc?;
|
||||
alt?;
|
||||
title?;
|
||||
}
|
||||
12
src/app/demo/domain/product.ts
Executable file
12
src/app/demo/domain/product.ts
Executable file
@ -0,0 +1,12 @@
|
||||
export interface Product {
|
||||
id?: string;
|
||||
code?: string;
|
||||
name?: string;
|
||||
description?: string;
|
||||
price?: number;
|
||||
quantity?: number;
|
||||
inventoryStatus?: string;
|
||||
category?: string;
|
||||
image?: string;
|
||||
rating?: number;
|
||||
}
|
||||
15
src/app/demo/service/countryservice.ts
Executable file
15
src/app/demo/service/countryservice.ts
Executable file
@ -0,0 +1,15 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class CountryService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getCountries() {
|
||||
return this.http.get<any>('assets/demo/data/countries.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as any[])
|
||||
.then(data => data);
|
||||
}
|
||||
}
|
||||
31
src/app/demo/service/customerservice.ts
Normal file
31
src/app/demo/service/customerservice.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Customer } from '../domain/customer';
|
||||
|
||||
@Injectable()
|
||||
export class CustomerService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getCustomersSmall() {
|
||||
return this.http.get<any>('assets/demo/data/customers-small.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Customer[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getCustomersMedium() {
|
||||
return this.http.get<any>('assets/demo/data/customers-medium.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Customer[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getCustomersLarge() {
|
||||
return this.http.get<any>('assets/demo/data/customers-large.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Customer[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
}
|
||||
15
src/app/demo/service/eventservice.ts
Executable file
15
src/app/demo/service/eventservice.ts
Executable file
@ -0,0 +1,15 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class EventService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getEvents() {
|
||||
return this.http.get<any>('assets/demo/data/scheduleevents.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as any[])
|
||||
.then(data => data);
|
||||
}
|
||||
}
|
||||
22
src/app/demo/service/iconservice.ts
Executable file
22
src/app/demo/service/iconservice.ts
Executable file
@ -0,0 +1,22 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import {map} from 'rxjs/operators';
|
||||
|
||||
@Injectable()
|
||||
export class IconService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
icons: any[];
|
||||
|
||||
selectedIcon: any;
|
||||
|
||||
apiUrl = 'assets/demo/data/icons.json';
|
||||
|
||||
getIcons() {
|
||||
return this.http.get(this.apiUrl).pipe(map((response: any) => {
|
||||
this.icons = response.icons;
|
||||
return this.icons;
|
||||
}));
|
||||
}
|
||||
}
|
||||
34
src/app/demo/service/nodeservice.ts
Executable file
34
src/app/demo/service/nodeservice.ts
Executable file
@ -0,0 +1,34 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { TreeNode } from 'primeng/api';
|
||||
|
||||
@Injectable()
|
||||
export class NodeService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getFiles() {
|
||||
return this.http.get<any>('assets/demo/data/files.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as TreeNode[]);
|
||||
}
|
||||
|
||||
getLazyFiles() {
|
||||
return this.http.get<any>('assets/demo/data/files-lazy.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as TreeNode[]);
|
||||
}
|
||||
|
||||
getFilesystem() {
|
||||
return this.http.get<any>('assets/demo/data/filesystem.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as TreeNode[]);
|
||||
}
|
||||
|
||||
getLazyFilesystem() {
|
||||
return this.http.get<any>('assets/demo/data/filesystem-lazy.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as TreeNode[]);
|
||||
}
|
||||
}
|
||||
17
src/app/demo/service/photoservice.ts
Normal file
17
src/app/demo/service/photoservice.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Image } from '../domain/image';
|
||||
|
||||
@Injectable()
|
||||
export class PhotoService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getImages() {
|
||||
return this.http.get<any>('assets/demo/data/photos.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Image[])
|
||||
.then(data => data);
|
||||
}
|
||||
}
|
||||
38
src/app/demo/service/productservice.ts
Executable file
38
src/app/demo/service/productservice.ts
Executable file
@ -0,0 +1,38 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Product } from '../domain/product';
|
||||
|
||||
@Injectable()
|
||||
export class ProductService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getProductsSmall() {
|
||||
return this.http.get<any>('assets/demo/data/products-small.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Product[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getProducts() {
|
||||
return this.http.get<any>('assets/demo/data/products.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Product[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getProductsMixed() {
|
||||
return this.http.get<any>('assets/demo/data/products-mixed.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Product[])
|
||||
.then(data => data);
|
||||
}
|
||||
|
||||
getProductsWithOrdersSmall() {
|
||||
return this.http.get<any>('assets/demo/data/products-orders-small.json')
|
||||
.toPromise()
|
||||
.then(res => res.data as Product[])
|
||||
.then(data => data);
|
||||
}
|
||||
}
|
||||
127
src/app/demo/view/buttondemo.component.html
Normal file
127
src/app/demo/view/buttondemo.component.html
Normal file
@ -0,0 +1,127 @@
|
||||
<div class="grid button-demo">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<button pButton label="Submit" class="mr-2 mb-2"></button>
|
||||
<button pButton label="Disabled" disabled="true" class="mr-2 mb-2"></button>
|
||||
<p-button label="Link" styleClass="p-button-link mr-2 mb-2"></p-button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Text</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-success p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-info p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-help p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Outlined</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Button Set</h5>
|
||||
<span class="p-buttonset">
|
||||
<button pButton pRipple label="Save" icon="pi pi-check"></button>
|
||||
<button pButton pRipple label="Delete" icon="pi pi-trash"></button>
|
||||
<button pButton pRipple label="Cancel" icon="pi pi-times"></button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>SplitButton</h5>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger mr-2 mb-2"></p-splitButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Icons</h5>
|
||||
<button pButton icon="pi pi-star" class="mr-2 mb-2"></button>
|
||||
<button pButton label="Submit" icon="pi pi-bookmark" class="mr-2 mb-2"></button>
|
||||
<button pButton label="Submit" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Raised</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-raised mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-rounded mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Icons</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Text</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Outlined</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
20
src/app/demo/view/buttondemo.component.ts
Normal file
20
src/app/demo/view/buttondemo.component.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {MenuItem} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './buttondemo.component.html'
|
||||
})
|
||||
export class ButtonDemoComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
ngOnInit() {
|
||||
this.items = [
|
||||
{label: 'Update', icon: 'pi pi-refresh'},
|
||||
{label: 'Delete', icon: 'pi pi-times'},
|
||||
{label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io'},
|
||||
{separator: true},
|
||||
{label: 'Setup', icon: 'pi pi-cog'}
|
||||
];
|
||||
}
|
||||
}
|
||||
42
src/app/demo/view/chartsdemo.component.html
Executable file
42
src/app/demo/view/chartsdemo.component.html
Executable file
@ -0,0 +1,42 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5 class="centerText">Linear Chart</h5>
|
||||
<p-chart type="line" [data]="lineData" [options]="lineOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="centerText">Pie Chart</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="centerText">Polar Area Chart</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5 class="centerText">Bar Chart</h5>
|
||||
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="centerText">Doughnut Chart</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="centerText">Radar Chart</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
239
src/app/demo/view/chartsdemo.component.ts
Executable file
239
src/app/demo/view/chartsdemo.component.ts
Executable file
@ -0,0 +1,239 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './chartsdemo.component.html'
|
||||
})
|
||||
export class ChartsDemoComponent implements OnInit {
|
||||
|
||||
lineData: any;
|
||||
|
||||
barData: any;
|
||||
|
||||
pieData: any;
|
||||
|
||||
polarData: any;
|
||||
|
||||
radarData: any;
|
||||
|
||||
lineOptions: any;
|
||||
|
||||
barOptions: any;
|
||||
|
||||
pieOptions: any;
|
||||
|
||||
polarOptions: any;
|
||||
|
||||
radarOptions: any;
|
||||
|
||||
ngOnInit() {
|
||||
this.lineData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: '#2f4860',
|
||||
borderColor: '#2f4860',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: '#00bb7e',
|
||||
borderColor: '#00bb7e',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.lineOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#A0A7B5'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#A0A7B5'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.barData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: '#2f4860',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: '#00bb7e',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.barOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#A0A7B5'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#A0A7B5'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.pieData = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.polarData = {
|
||||
datasets: [{
|
||||
data: [
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
3,
|
||||
14
|
||||
],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#4BC0C0",
|
||||
"#FFCE56",
|
||||
"#E7E9ED",
|
||||
"#36A2EB"
|
||||
],
|
||||
label: 'My dataset'
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Green",
|
||||
"Yellow",
|
||||
"Grey",
|
||||
"Blue"
|
||||
]
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.radarData = {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.radarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: '#A0A7B5'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
244
src/app/demo/view/dashboard.component.html
Executable file
244
src/app/demo/view/dashboard.component.html
Executable file
@ -0,0 +1,244 @@
|
||||
<div class="layout-main">
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Orders</span>
|
||||
<div class="text-900 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-500">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Revenue</span>
|
||||
<div class="text-900 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-500">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Customers</span>
|
||||
<div class="text-900 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-500">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Comments</span>
|
||||
<div class="text-900 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-500">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="card">
|
||||
<h5>Recent Sales</h5>
|
||||
<p-table [value]="products" [paginator]="true" [rows]="5">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th>View</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-product>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="../../../assets/demo/images/product/{{product.image}}" alt="{{product.name}}" width="50px" height="50px">
|
||||
</td>
|
||||
<td>{{product.name}}</td>
|
||||
<td>{{product.price | currency:'USD'}}</td>
|
||||
<td>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="flex justify-content-between align-items-center mb-5">
|
||||
<h5>Best Selling Products</h5>
|
||||
<div>
|
||||
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
|
||||
<p-menu #menu [popup]="true" [model]="items"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
|
||||
<div class="mt-1 text-600">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-orange-500 h-full" [ngStyle]="{width: '50%'}"></div>
|
||||
</div>
|
||||
<span class="text-orange-500 ml-3 font-medium">%50</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-cyan-500 h-full" [ngStyle]="{width: '16%'}"></div>
|
||||
</div>
|
||||
<span class="text-cyan-500 ml-3 font-medium">%16</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-pink-500 h-full" [ngStyle]="{width: '67%'}"></div>
|
||||
</div>
|
||||
<span class="text-pink-500 ml-3 font-medium">%67</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
|
||||
<div class="mt-1 text-600">Office</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-green-500 h-full" [ngStyle]="{width: '35%'}"></div>
|
||||
</div>
|
||||
<span class="text-green-500 ml-3 font-medium">%35</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-purple-500 h-full" [ngStyle]="{width: '75%'}"></div>
|
||||
</div>
|
||||
<span class="text-purple-500 ml-3 font-medium">%75</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
|
||||
<div>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
|
||||
<div class="mt-1 text-600">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
|
||||
<div class="bg-teal-500 h-full" [ngStyle]="{width: '40%'}"></div>
|
||||
</div>
|
||||
<span class="text-teal-500 ml-3 font-medium">%40</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="card">
|
||||
<h5>Sales Overview</h5>
|
||||
<p-chart type="line" [data]="chartData"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<h5>Notifications</h5>
|
||||
<div>
|
||||
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
|
||||
<p-menu #menu [popup]="true" [model]="items"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="block text-600 font-medium mb-3">TODAY</span>
|
||||
<ul class="p-0 mx-0 mt-0 mb-4 list-none">
|
||||
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-dollar text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Richard Jones
|
||||
<span class="text-700"> has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex align-items-center py-2">
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-orange-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-download text-xl text-orange-500"></i>
|
||||
</div>
|
||||
<span class="text-700 line-height-3">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span class="block text-600 font-medium mb-3">YESTERDAY</span>
|
||||
<ul class="p-0 m-0 list-none">
|
||||
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-dollar text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Keyser Wick
|
||||
<span class="text-700"> has purchased a black jacket for <span class="text-blue-500">59$</span></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-question text-xl text-pink-500"></i>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Jane Davis
|
||||
<span class="text-700"> has posted a new questions about your product.</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3"
|
||||
[ngStyle]="{borderRadius: '1rem', background: 'linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)'}">
|
||||
<div>
|
||||
<div class="text-blue-100 font-medium text-xl mt-2 mb-3">TAKE THE NEXT STEP</div>
|
||||
<div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
|
||||
</div>
|
||||
<div class="mt-4 mr-auto md:mt-0 md:mr-0">
|
||||
<a routerLink="https://www.primefaces.org/primeblocks-react" class="p-button font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
51
src/app/demo/view/dashboarddemo.component.ts
Executable file
51
src/app/demo/view/dashboarddemo.component.ts
Executable file
@ -0,0 +1,51 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {MenuModule} from 'primeng/menu';
|
||||
import {MenuItem} from 'primeng/api';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboarddemo.scss'],
|
||||
})
|
||||
export class DashboardDemoComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
products: Product[];
|
||||
|
||||
chartData:any;
|
||||
|
||||
constructor(private productService: ProductService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
|
||||
this.items = [
|
||||
{label: 'Add New', icon: 'pi pi-fw pi-plus'},
|
||||
{label: 'Remove', icon: 'pi pi-fw pi-minus'}
|
||||
];
|
||||
|
||||
this.chartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: '#2f4860',
|
||||
borderColor: '#2f4860',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: '#00bb7e',
|
||||
borderColor: '#00bb7e',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
2
src/app/demo/view/dashboarddemo.scss
Normal file
2
src/app/demo/view/dashboarddemo.scss
Normal file
@ -0,0 +1,2 @@
|
||||
.layout-dashboard {
|
||||
}
|
||||
1147
src/app/demo/view/documentation.component.html
Executable file
1147
src/app/demo/view/documentation.component.html
Executable file
File diff suppressed because it is too large
Load Diff
6
src/app/demo/view/documentation.component.ts
Executable file
6
src/app/demo/view/documentation.component.ts
Executable file
@ -0,0 +1,6 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './documentation.component.html'
|
||||
})
|
||||
export class DocumentationComponent {}
|
||||
8
src/app/demo/view/emptydemo.component.html
Executable file
8
src/app/demo/view/emptydemo.component.html
Executable file
@ -0,0 +1,8 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4>Empty Page</h4>
|
||||
<p>This is your empty page template to start building beautiful applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
6
src/app/demo/view/emptydemo.component.ts
Executable file
6
src/app/demo/view/emptydemo.component.ts
Executable file
@ -0,0 +1,6 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './emptydemo.component.html'
|
||||
})
|
||||
export class EmptyDemoComponent {}
|
||||
18
src/app/demo/view/filedemo.component.html
Executable file
18
src/app/demo/view/filedemo.component.html
Executable file
@ -0,0 +1,18 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
|
||||
multiple="multiple" accept="image/*" maxFileSize="1000000">
|
||||
<ng-template pTemplate="content">
|
||||
<ul *ngIf="uploadedFiles.length">
|
||||
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
|
||||
</ul>
|
||||
</ng-template>
|
||||
</p-fileUpload>
|
||||
|
||||
<h5>Basic</h5>
|
||||
<p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)" chooseLabel="Browse"></p-fileUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
src/app/demo/view/filedemo.component.ts
Executable file
25
src/app/demo/view/filedemo.component.ts
Executable file
@ -0,0 +1,25 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {MessageService} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './filedemo.component.html',
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class FileDemoComponent {
|
||||
|
||||
uploadedFiles: any[] = [];
|
||||
|
||||
constructor(private messageService: MessageService) {}
|
||||
|
||||
onUpload(event) {
|
||||
for (const file of event.files) {
|
||||
this.uploadedFiles.push(file);
|
||||
}
|
||||
|
||||
this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
|
||||
}
|
||||
|
||||
onBasicUpload(event) {
|
||||
this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode'});
|
||||
}
|
||||
}
|
||||
71
src/app/demo/view/floatlabeldemo.component.html
Normal file
71
src/app/demo/view/floatlabeldemo.component.html
Normal file
@ -0,0 +1,71 @@
|
||||
<div class="card">
|
||||
<h5>Float Label</h5>
|
||||
<div class="grid p-fluid mt-3">
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<input type="text" id="inputtext" pInputText [(ngModel)]="value1">
|
||||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries"
|
||||
(completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-calendar inputId="calendar" [(ngModel)]="value3"></p-calendar>
|
||||
<label for="calendar">Calendar</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-chips inputId="chips" [(ngModel)]="value4"></p-chips>
|
||||
<label for="chips">Chips</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5"></p-inputMask>
|
||||
<label for="inputmask">InputMask</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputNumber inputId="inputnumber" [(ngModel)]="value6"></p-inputNumber>
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<span class="p-float-label">
|
||||
<input type="text" inputId="inputgroup" pInputText [(ngModel)]="value7">
|
||||
<label for="inputgroup">InputGroup</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value8" optionLabel="name"></p-dropdown>
|
||||
<label for="dropdown">Dropdown</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value9" optionLabel="name" [filter]="false"></p-multiSelect>
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value10" pInputTextarea></textarea>
|
||||
<label for="textarea">Textarea</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
71
src/app/demo/view/floatlabeldemo.component.ts
Normal file
71
src/app/demo/view/floatlabeldemo.component.ts
Normal file
@ -0,0 +1,71 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {CountryService} from '../service/countryservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './floatlabeldemo.component.html',
|
||||
styleUrls: ['./floatlabeldemo.scss']
|
||||
})
|
||||
export class FloatLabelDemoComponent implements OnInit {
|
||||
|
||||
countries: any[];
|
||||
|
||||
cities: any[];
|
||||
|
||||
filteredCountries: any[];
|
||||
|
||||
value1: any;
|
||||
|
||||
value2: any;
|
||||
|
||||
value3: any;
|
||||
|
||||
value4: any;
|
||||
|
||||
value5: any;
|
||||
|
||||
value6: any;
|
||||
|
||||
value7: any;
|
||||
|
||||
value8: any;
|
||||
|
||||
value9: any;
|
||||
|
||||
value10: any;
|
||||
|
||||
value11: any;
|
||||
|
||||
value12: any;
|
||||
|
||||
constructor(private countryService: CountryService) {
|
||||
this.cities = [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
}
|
||||
|
||||
searchCountry(event) {
|
||||
// in a real application, make a request to a remote url with the query and
|
||||
// return filtered results, for demo we filter at client side
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
// tslint:disable-next-line:prefer-for-of
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
9
src/app/demo/view/floatlabeldemo.scss
Normal file
9
src/app/demo/view/floatlabeldemo.scss
Normal file
@ -0,0 +1,9 @@
|
||||
:host ::ng-deep .floatlabel-demo {
|
||||
.p-field {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.p-multiselect-panel .p-multiselect-header {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
108
src/app/demo/view/formlayoutdemo.component.html
Normal file
108
src/app/demo/view/formlayoutdemo.component.html
Normal file
@ -0,0 +1,108 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Vertical</h5>
|
||||
<div class="field">
|
||||
<label htmlFor="name1">Name</label>
|
||||
<input pInputText id="name1" type="text" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input pInputText id="email1" type="text" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="age1">Age</label>
|
||||
<input pInputText id="age1" type="text" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Vertical Grid</h5>
|
||||
<div class="p-formgrid grid">
|
||||
<div class="field col">
|
||||
<label htmlFor="name2">Name</label>
|
||||
<input pInputText id="name2" type="text" />
|
||||
</div>
|
||||
<div class="field col">
|
||||
<label htmlFor="email2">Email</label>
|
||||
<input pInputText id="email2" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Horizontal</h5>
|
||||
<div class="field grid">
|
||||
<label htmlFor="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<input pInputText id="name3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field grid">
|
||||
<label htmlFor="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<input pInputText id="email3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label htmlFor="firstname1" class="p-sr-only">Firstname</label>
|
||||
<input pInputText id="firstname1" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="lastname1" class="p-sr-only">Lastname</label>
|
||||
<input pInputText id="lastname1" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
<button pButton label="Submit"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="field p-fluid">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input pInputText id="username" type="text" />
|
||||
<small>Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<div class="p-fluid p-formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="firstname2">Firstname</label>
|
||||
<input pInputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="lastname2">Lastname</label>
|
||||
<input pInputText id="lastname2" type="text" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label htmlFor="address">Address</label>
|
||||
<input pInputTextarea id="address" rows="4" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="city">City</label>
|
||||
<input pInputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label htmlFor="state">State</label>
|
||||
<p-dropdown [options]="dropdownItems" optionLabel="name" [(ngModel)]="selectedState"></p-dropdown>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label htmlFor="zip">Zip</label>
|
||||
<input pInputText id="zip" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/app/demo/view/formlayoutdemo.component.ts
Normal file
15
src/app/demo/view/formlayoutdemo.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './formlayoutdemo.component.html'
|
||||
})
|
||||
export class FormLayoutDemoComponent {
|
||||
|
||||
selectedState:any;
|
||||
|
||||
dropdownItems = [
|
||||
{ name: 'Option 1', code: 'Option 1' },
|
||||
{ name: 'Option 2', code: 'Option 2' },
|
||||
{ name: 'Option 3', code: 'Option 3' }
|
||||
];
|
||||
}
|
||||
216
src/app/demo/view/inputdemo.component.html
Normal file
216
src/app/demo/view/inputdemo.component.html
Normal file
@ -0,0 +1,216 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>InputText</h5>
|
||||
<div class="grid p-formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input pInputText type="text" placeholder="Default" />
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input pInputText type="text" placeholder="Disabled" disabled />
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input pInputText type="text" placeholder="Invalid" class="ng-invalid ng-dirty" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div class="grid p-formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-user"></i>
|
||||
<input pInputText type="text" placeholder="Username" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-right">
|
||||
<input pInputText type="text" placeholder="Search" />
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left p-input-icon-right">
|
||||
<i class="pi pi-user"></i>
|
||||
<input pInputText type="text" placeholder="Search" />
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Float Label</h5>
|
||||
<span class="p-float-label">
|
||||
<input pInputText id="username" type="text" />
|
||||
<label htmlFor="username">Username</label>
|
||||
</span>
|
||||
|
||||
<h5>Textarea</h5>
|
||||
<textarea pInputTextarea placeholder="Your Message" autoResize rows="3" cols="30"></textarea>
|
||||
|
||||
<h5>AutoComplete</h5>
|
||||
<p-autoComplete placeholder="Search" id="dd" dropdown multiple></p-autoComplete>
|
||||
|
||||
<h5>Calendar</h5>
|
||||
<p-calendar showIcon showButtonBar></p-calendar>
|
||||
|
||||
<h5>InputNumber</h5>
|
||||
<p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100">
|
||||
</p-inputNumber>
|
||||
|
||||
<h5>Chips</h5>
|
||||
<p-chips></p-chips>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h5>Slider</h5>
|
||||
<input type="text" pInputText [(ngModel)]="valSlider" readonly/>
|
||||
<p-slider [(ngModel)]="valSlider"></p-slider>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>Rating</h5>
|
||||
<p-rating></p-rating>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>ColorPicker</h5>
|
||||
<p-colorPicker [(ngModel)]="valColor"></p-colorPicker>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h5>Knob</h5>
|
||||
<p-knob [(ngModel)]="valueKnob" valueTemplate="{value}%" [step]="10" [min]="-50" [max]="50"></p-knob>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>RadioButton</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="Los Angeles" [(ngModel)]="valRadio"
|
||||
id="city2"></p-radioButton>
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="New York" [(ngModel)]="valRadio" id="city3"></p-radioButton>
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
|
||||
<label for="ny">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="valCheck" id="sf"></p-checkbox>
|
||||
<label for="sf">San Francisco</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="Los Angeles" [(ngModel)]="valCheck" id="la"></p-checkbox>
|
||||
<label for="la">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Input Switch</h5>
|
||||
<p-inputSwitch [(ngModel)]="valSwitch"></p-inputSwitch>
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Listbox</h5>
|
||||
<p-listbox [options]="cities" [(ngModel)]="selectedList" [filter]="true"></p-listbox>
|
||||
|
||||
<h5>Dropdown</h5>
|
||||
<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true"></p-dropdown>
|
||||
|
||||
<h5>Multiselect</h5>
|
||||
<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
|
||||
<ng-template let-value pTemplate="selectedItems">
|
||||
<div class="country-item country-item-value" *ngFor="let option of selectedMulti">
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<div *ngIf="!selectedMulti || selectedMulti.length === 0" class="country-placeholder">
|
||||
Select Countries
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template let-country pTemplate="item">
|
||||
<div class="country-item">
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
|
||||
<div>{{country.name}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>ToggleButton</h5>
|
||||
<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No"></p-toggleButton>
|
||||
|
||||
<h5>SelectButton</h5>
|
||||
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>
|
||||
|
||||
<h5>SelectButton - Multiple</h5>
|
||||
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect2" multiple="multiple" optionLabel="name"></p-selectButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>InputGroup</h5>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
|
||||
<input type="text" pInputText placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-tags" style="line-height: 1.25;"></i></span>
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart" style="line-height: 1.25;"></i></span>
|
||||
<input type="text" pInputText placeholder="Price">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<button type="button" pButton pRipple label="Search"></button>
|
||||
<input type="text" pInputText placeholder="Keyword">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon p-inputgroup-addon-checkbox">
|
||||
<p-checkbox name="group1" value="Confirm" [(ngModel)]="valCheck" id="cf"></p-checkbox>
|
||||
</span>
|
||||
<input type="text" pInputText placeholder="Confirm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
122
src/app/demo/view/inputdemo.component.ts
Normal file
122
src/app/demo/view/inputdemo.component.ts
Normal file
@ -0,0 +1,122 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {CountryService} from '../service/countryservice';
|
||||
import {SelectItem} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './inputdemo.component.html',
|
||||
styles: [`:host ::ng-deep .p-multiselect {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom-virtual-scroll .p-multiselect {
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .p-multiselect-label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value {
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
margin-right: .5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item img.flag {
|
||||
width: 18px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-placeholder {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-colorpicker {
|
||||
width: 2.5em
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class InputDemoComponent implements OnInit{
|
||||
countries: any[];
|
||||
|
||||
filteredCountries: any[];
|
||||
|
||||
selectedCountryAdvanced: any[];
|
||||
|
||||
valSlider = 0;
|
||||
|
||||
valColor = '#424242';
|
||||
|
||||
valRadio: string;
|
||||
|
||||
valCheck: string[] = [];
|
||||
|
||||
valSwitch: boolean;
|
||||
|
||||
cities: SelectItem[];
|
||||
|
||||
selectedList: SelectItem;
|
||||
|
||||
selectedDrop: SelectItem;
|
||||
|
||||
selectedMulti: string[] = [];
|
||||
|
||||
valToggle = false;
|
||||
|
||||
paymentOptions: any[];
|
||||
|
||||
valSelect1: string;
|
||||
|
||||
valSelect2: string;
|
||||
|
||||
valueKnob = 20;
|
||||
|
||||
constructor(private countryService: CountryService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
|
||||
this.cities = [
|
||||
{label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}},
|
||||
{label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}},
|
||||
{label: 'London', value: {id: 3, name: 'London', code: 'LDN'}},
|
||||
{label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}},
|
||||
{label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}}
|
||||
];
|
||||
|
||||
this.paymentOptions = [
|
||||
{name: 'Option 1', value: 1},
|
||||
{name: 'Option 2', value: 2},
|
||||
{name: 'Option 3', value: 3}
|
||||
];
|
||||
}
|
||||
|
||||
filterCountry(event) {
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
55
src/app/demo/view/invalidstatedemo.component.html
Normal file
55
src/app/demo/view/invalidstatedemo.component.html
Normal file
@ -0,0 +1,55 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<h5>Invalid State</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-field my-3">
|
||||
<label for="inputtext">InputText</label>
|
||||
<input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty">
|
||||
</div>
|
||||
<div class="p-field my-3">
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
<p-autoComplete inputId="autocomplete" [(ngModel)]="value1" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
|
||||
|
||||
</div>
|
||||
<div class="p-field my-3">
|
||||
<label for="calendar">Calendar</label>
|
||||
<p-calendar inputId="calendar" [(ngModel)]="value2" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field my-3">
|
||||
<label for="chips">Chips</label>
|
||||
<p-chips inputId="chips" [(ngModel)]="value3" class="ng-invalid ng-dirty"></p-chips>
|
||||
</div>
|
||||
<div class="p-field my-3">
|
||||
<label for="password">Password</label>
|
||||
<p-password [(ngModel)]="value8" class="ng-invalid ng-dirty"></p-password>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-field my-3">
|
||||
<label for="inputmask">InputMask</label>
|
||||
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask>
|
||||
</div>
|
||||
<div class="p-field my-3">
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
<p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber>
|
||||
</div>
|
||||
<div class="p-field my-3">
|
||||
<label for="dropdown">Dropdown</label>
|
||||
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value9" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown>
|
||||
</div>
|
||||
<div class="p-field my-3">
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value10" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
|
||||
</div>
|
||||
<div class="p-field my-3">
|
||||
<label for="textarea">Textarea</label>
|
||||
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value4" pInputTextarea class="ng-invalid ng-dirty"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
66
src/app/demo/view/invalidstatedemo.component.ts
Normal file
66
src/app/demo/view/invalidstatedemo.component.ts
Normal file
@ -0,0 +1,66 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {CountryService} from '../service/countryservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './invalidstatedemo.component.html'
|
||||
})
|
||||
export class InvalidStateDemoComponent implements OnInit {
|
||||
|
||||
|
||||
countries: any[];
|
||||
|
||||
cities: any[];
|
||||
|
||||
filteredCountries: any[];
|
||||
|
||||
value1: any;
|
||||
|
||||
value2: any;
|
||||
|
||||
value3: any;
|
||||
|
||||
value4: any;
|
||||
|
||||
value5: any;
|
||||
|
||||
value6: any;
|
||||
|
||||
value7: any;
|
||||
|
||||
value8: any;
|
||||
|
||||
value9: any;
|
||||
|
||||
value10: any;
|
||||
|
||||
constructor(private countryService: CountryService) {
|
||||
this.cities = [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
}
|
||||
|
||||
searchCountry(event) {
|
||||
// in a real application, make a request to a remote url with the query and return filtered results,
|
||||
// for demo we filter at client side
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
81
src/app/demo/view/listdemo.component.html
Normal file
81
src/app/demo/view/listdemo.component.html
Normal file
@ -0,0 +1,81 @@
|
||||
<div class="grid list-demo">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>DataView</h5>
|
||||
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name"
|
||||
[sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
|
||||
<ng-template pTemplate="header">
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)" styleClass="mb-2 mb-md-0"></p-dropdown>
|
||||
<span class="p-input-icon-left mb-2 mb-md-0"></span>
|
||||
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template let-product pTemplate="listItem">
|
||||
<div class="col-12">
|
||||
<div class="product-list-item">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
|
||||
<div class="product-list-detail">
|
||||
<div class="product-name">{{product.name}}</div>
|
||||
<div class="product-description">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
<i class="pi pi-tag product-category-icon"></i><span class="product-category">{{product.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<span class="product-price">${{product.price}}</span>
|
||||
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
|
||||
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template let-product pTemplate="gridItem">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="product-grid-item card">
|
||||
<div class="product-grid-item-top">
|
||||
<div>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{product.category}}</span>
|
||||
</div>
|
||||
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
<div class="product-grid-item-content">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
|
||||
<div class="product-name">{{product.name}}</div>
|
||||
<div class="product-description">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
</div>
|
||||
<div class="product-grid-item-bottom">
|
||||
<span class="product-price">${{product.price}}</span>
|
||||
<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-dataView>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<h5>PickList</h5>
|
||||
<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" dragdrop="true"
|
||||
[responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
|
||||
<ng-template let-city pTemplate="item">
|
||||
<div>{{city.name}}</div>
|
||||
</ng-template>
|
||||
</p-pickList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<h5>OrderList</h5>
|
||||
<p-orderList [value]="orderCities" [listStyle]="{'height':'auto'}" header="Cities" dragdrop="true">
|
||||
<ng-template let-city pTemplate="item">
|
||||
<div>{{city.name}}</div>
|
||||
</ng-template>
|
||||
</p-orderList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
67
src/app/demo/view/listdemo.component.ts
Normal file
67
src/app/demo/view/listdemo.component.ts
Normal file
@ -0,0 +1,67 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {SelectItem} from 'primeng/api';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './listdemo.component.html',
|
||||
styleUrls: ['./listdemo.scss']
|
||||
})
|
||||
export class ListDemoComponent implements OnInit {
|
||||
|
||||
products: Product[];
|
||||
|
||||
sortOptions: SelectItem[];
|
||||
|
||||
sortOrder: number;
|
||||
|
||||
sortField: string;
|
||||
|
||||
sourceCities: any[];
|
||||
|
||||
targetCities: any[];
|
||||
|
||||
orderCities: any[];
|
||||
|
||||
constructor(private productService: ProductService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
|
||||
this.sourceCities = [
|
||||
{name: 'San Francisco', code: 'SF'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Paris', code: 'PRS'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Berlin', code: 'BRL'},
|
||||
{name: 'Barcelona', code: 'BRC'},
|
||||
{name: 'Rome', code: 'RM'}];
|
||||
this.targetCities = [];
|
||||
|
||||
this.orderCities = [
|
||||
{name: 'San Francisco', code: 'SF'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Paris', code: 'PRS'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Berlin', code: 'BRL'},
|
||||
{name: 'Barcelona', code: 'BRC'},
|
||||
{name: 'Rome', code: 'RM'}];
|
||||
|
||||
this.sortOptions = [
|
||||
{label: 'Price High to Low', value: '!price'},
|
||||
{label: 'Price Low to High', value: 'price'}
|
||||
];
|
||||
}
|
||||
|
||||
onSortChange(event) {
|
||||
const value = event.value;
|
||||
|
||||
if (value.indexOf('!') === 0) {
|
||||
this.sortOrder = -1;
|
||||
this.sortField = value.substring(1, value.length);
|
||||
} else {
|
||||
this.sortOrder = 1;
|
||||
this.sortField = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
146
src/app/demo/view/listdemo.scss
Normal file
146
src/app/demo/view/listdemo.scss
Normal file
@ -0,0 +1,146 @@
|
||||
:host ::ng-deep {
|
||||
.p-dropdown {
|
||||
width: 14rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.product-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 150px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.product-list-detail {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.p-rating {
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: .5rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-button {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.product-grid-item {
|
||||
margin: .5em;
|
||||
border: 1px solid var(--surface-d);
|
||||
|
||||
.product-grid-item-top,
|
||||
.product-grid-item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.product-grid-item-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
|
||||
&.status-instock {
|
||||
background: #C8E6C9;
|
||||
color: #256029;
|
||||
}
|
||||
|
||||
&.status-outofstock {
|
||||
background: #FFCDD2;
|
||||
color: #C63737;
|
||||
}
|
||||
|
||||
&.status-lowstock {
|
||||
background: #FEEDAF;
|
||||
color: #8A5340;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
:host ::ng-deep .product-list-item {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.product-list-detail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-list-action {
|
||||
margin-top: 2rem;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
src/app/demo/view/mediademo.scss
Normal file
38
src/app/demo/view/mediademo.scss
Normal file
@ -0,0 +1,38 @@
|
||||
.product-item {
|
||||
.product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 50%;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||
}
|
||||
}
|
||||
|
||||
.product-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
|
||||
&.status-instock {
|
||||
background: #C8E6C9;
|
||||
color: #256029;
|
||||
}
|
||||
|
||||
&.status-outofstock {
|
||||
background: #FFCDD2;
|
||||
color: #C63737;
|
||||
}
|
||||
|
||||
&.status-lowstock {
|
||||
background: #FEEDAF;
|
||||
color: #8A5340;
|
||||
}
|
||||
}
|
||||
83
src/app/demo/view/menusdemo.component.html
Executable file
83
src/app/demo/view/menusdemo.component.html
Executable file
@ -0,0 +1,83 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>MenuBar</h5>
|
||||
<p-menubar [model]="tieredItems">
|
||||
<ng-template pTemplate="end">
|
||||
<span class="p-input-icon-right">
|
||||
<input type="text" pInputText placeholder="Search">
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</p-menubar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Breadcrumb</h5>
|
||||
<p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Steps</h5>
|
||||
<p-steps [model]="stepsItems" [activeIndex]="1"></p-steps>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>TabMenu</h5>
|
||||
<p-tabMenu [model]="tabMenuItems" [activeItem]="tabMenuItems[0]"></p-tabMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>TieredMenu</h5>
|
||||
<p-tieredMenu [model]="tieredItems"></p-tieredMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Plain Menu</h5>
|
||||
<p-menu [model]="items" [style]="{'width':'100%'}"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
|
||||
<div class="card">
|
||||
<h5>Overlay Menu</h5>
|
||||
|
||||
<p-menu #menu [popup]="true" [model]="items" style="width:175px"></p-menu>
|
||||
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>ContextMenu</h5>
|
||||
Right click to display.
|
||||
<p-contextMenu [global]="true" [model]="menuItems"></p-contextMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>MegaMenu - Horizontal</h5>
|
||||
<p-megaMenu [model]="megaMenuItems"></p-megaMenu>
|
||||
|
||||
<h5>MegaMenu - Vertical</h5>
|
||||
<p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>PanelMenu</h5>
|
||||
<p-panelMenu [model]="panelMenuItems"></p-panelMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
454
src/app/demo/view/menusdemo.component.ts
Executable file
454
src/app/demo/view/menusdemo.component.ts
Executable file
@ -0,0 +1,454 @@
|
||||
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
|
||||
import {MegaMenuItem, MenuItem} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './menusdemo.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MenusDemoComponent implements OnInit {
|
||||
|
||||
breadcrumbItems: MenuItem[];
|
||||
|
||||
tieredItems: MenuItem[];
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
tabMenuItems: MenuItem[];
|
||||
|
||||
megaMenuItems: MegaMenuItem[];
|
||||
|
||||
panelMenuItems: MenuItem[];
|
||||
|
||||
stepsItems: MenuItem[];
|
||||
|
||||
slideItems: MenuItem[];
|
||||
|
||||
menuItems: MenuItem[];
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.tieredItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-sign-out'
|
||||
}
|
||||
];
|
||||
|
||||
this.items = [
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.menuItems = [
|
||||
{
|
||||
label: 'Save', icon: 'pi pi-fw pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update', icon: 'pi pi-fw pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete', icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Quit', icon: 'pi pi-fw pi-sign-out'
|
||||
},
|
||||
];
|
||||
|
||||
this.slideItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.breadcrumbItems = [];
|
||||
this.breadcrumbItems.push({ label: 'Electronics' });
|
||||
this.breadcrumbItems.push({ label: 'Computer' });
|
||||
this.breadcrumbItems.push({ label: 'Notebook' });
|
||||
this.breadcrumbItems.push({ label: 'Accessories' });
|
||||
this.breadcrumbItems.push({ label: 'Backpacks' });
|
||||
this.breadcrumbItems.push({ label: 'Item' });
|
||||
|
||||
this.tabMenuItems = [
|
||||
{label: 'Personal'},
|
||||
{label: 'Seat'},
|
||||
{label: 'Payment'},
|
||||
{label: 'Confirmation'}
|
||||
];
|
||||
|
||||
this.megaMenuItems = [
|
||||
{
|
||||
label: 'Fashion', icon: 'pi pi-fw pi-tag',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Women',
|
||||
items: [{label: 'Women Item'}, {label: 'Women Item'}, {label: 'Women Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Men',
|
||||
items: [{label: 'Men Item'}, {label: 'Men Item'}, {label: 'Men Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Kids',
|
||||
items: [{label: 'Kids Item'}, {label: 'Kids Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Luggage',
|
||||
items: [{label: 'Luggage Item'}, {label: 'Luggage Item'}, {label: 'Luggage Item'}]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Electronics', icon: 'pi pi-fw pi-desktop',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Computer',
|
||||
items: [{label: 'Computer Item'}, {label: 'Computer Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Camcorder',
|
||||
items: [{label: 'Camcorder Item'}, {label: 'Camcorder Item'}, {label: 'Camcorder Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'TV',
|
||||
items: [{label: 'TV Item'}, {label: 'TV Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Audio',
|
||||
items: [{label: 'Audio Item'}, {label: 'Audio Item'}, {label: 'Audio Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Sports.7',
|
||||
items: [{label: 'Sports.7.1'}, {label: 'Sports.7.2'}]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Furniture', icon: 'pi pi-fw pi-image',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Living Room',
|
||||
items: [{label: 'Living Room Item'}, {label: 'Living Room Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Kitchen',
|
||||
items: [{label: 'Kitchen Item'}, {label: 'Kitchen Item'}, {label: 'Kitchen Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Bedroom',
|
||||
items: [{label: 'Bedroom Item'}, {label: 'Bedroom Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Outdoor',
|
||||
items: [{label: 'Outdoor Item'}, {label: 'Outdoor Item'}, {label: 'Outdoor Item'}]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Sports', icon: 'pi pi-fw pi-star-o',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Basketball',
|
||||
items: [{label: 'Basketball Item'}, {label: 'Basketball Item'}]
|
||||
},
|
||||
{
|
||||
label: 'Football',
|
||||
items: [{label: 'Football Item'}, {label: 'Football Item'}, {label: 'Football Item'}]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Tennis',
|
||||
items: [{label: 'Tennis Item'}, {label: 'Tennis Item'}]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
this.panelMenuItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.stepsItems = [
|
||||
{
|
||||
label: 'Personal'
|
||||
},
|
||||
{
|
||||
label: 'Seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
56
src/app/demo/view/messagesdemo.component.html
Executable file
56
src/app/demo/view/messagesdemo.component.html
Executable file
@ -0,0 +1,56 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Toast</h5>
|
||||
<p-toast key="tst"></p-toast>
|
||||
<button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2 mb-2"></button>
|
||||
<button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2 mb-2"></button>
|
||||
<button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger mb-2"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Messages</h5>
|
||||
<button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2 mb-2"></button>
|
||||
<button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2 mb-2"></button>
|
||||
<button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger mb-2"></button>
|
||||
|
||||
<p-messages [value]="msgs"></p-messages>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="mt-4 grid align-items-center">
|
||||
<label for="username" class="col-fixed w-9rem">Username</label>
|
||||
<div class="col">
|
||||
<input type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
|
||||
<p-message severity="error" text="Field is required"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid align-items-center">
|
||||
<label for="email" class="col-fixed w-9rem">Email</label>
|
||||
<div class="col">
|
||||
<input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid mr-2">
|
||||
<p-message severity="error"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
<input id="username" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid my-3" pInputText />
|
||||
<small id="username-help" class="p-error">Username is not available.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
58
src/app/demo/view/messagesdemo.component.ts
Executable file
58
src/app/demo/view/messagesdemo.component.ts
Executable file
@ -0,0 +1,58 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {Message, MessageService} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './messagesdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-button {
|
||||
min-width: 8em;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-message {
|
||||
margin-left: .25em;
|
||||
}
|
||||
`],
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class MessagesDemoComponent {
|
||||
|
||||
msgs: Message[] = [];
|
||||
|
||||
constructor(private service: MessageService) {}
|
||||
|
||||
showInfoViaToast() {
|
||||
this.service.add({key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks'});
|
||||
}
|
||||
|
||||
showWarnViaToast() {
|
||||
this.service.add({key: 'tst', severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
|
||||
}
|
||||
|
||||
showErrorViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
|
||||
}
|
||||
|
||||
showSuccessViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
|
||||
showInfoViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
|
||||
}
|
||||
|
||||
showWarnViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
|
||||
}
|
||||
|
||||
showErrorViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
|
||||
}
|
||||
|
||||
showSuccessViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
}
|
||||
165
src/app/demo/view/miscdemo.component.html
Executable file
165
src/app/demo/view/miscdemo.component.html
Executable file
@ -0,0 +1,165 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>ProgressBar</h5>
|
||||
<div class="grid">
|
||||
<div class="col">
|
||||
<p-progressBar [value]="value" [showValue]="false"></p-progressBar>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p-progressBar [value]="50" [showValue]="false"></p-progressBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h4>Badge</h4>
|
||||
<h5>Numbers</h5>
|
||||
<div class="badges">
|
||||
<p-badge [value]="2" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="8" severity="success" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="4" severity="info" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="12" severity="warning" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="3" severity="danger"></p-badge>
|
||||
</div>
|
||||
|
||||
<h5>Positioned Badge</h5>
|
||||
<i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>
|
||||
<i class="pi pi-calendar mr-4 p-text-secondary" pBadge style="font-size: 2rem" [value]="'10+'" severity="danger"></i>
|
||||
<i class="pi pi-envelope p-text-secondary" pBadge style="font-size: 2rem" severity="danger"></i>
|
||||
|
||||
|
||||
<h5>Inline Button Badge</h5>
|
||||
<p-button label="Emails" badge="8" styleClass="mr-2"></p-button>
|
||||
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<div class="badges">
|
||||
<p-badge [value]="2" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="4" size="large" severity="warning" styleClass="mr-2"></p-badge>
|
||||
<p-badge [value]="6" size="xlarge" severity="success" styleClass="mr-2"></p-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Avatar</h4>
|
||||
<h5>Avatar Group</h5>
|
||||
<p-avatarGroup styleClass="mb-3">
|
||||
<p-avatar image="assets/demo/images/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/xuxuefeng.png" size="large"shape="circle"></p-avatar>
|
||||
<p-avatar label="+2" shape="circle" size="large" [style]="{'background-color':'#9c27b0', 'color': '#ffffff'}"></p-avatar>
|
||||
</p-avatarGroup>
|
||||
|
||||
<h5>Label - Circle</h5>
|
||||
<p-avatar label="P" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar label="V" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
|
||||
<p-avatar label="U" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
|
||||
|
||||
<h5>Icon - Badge</h5>
|
||||
<p-avatar icon="pi pi-user" pBadge value="4" severity="success" styleClass="mr-2" size="xlarge"></p-avatar>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>ScrollTop</h4>
|
||||
<p-scrollPanel [style]="{width: '250px', height: '200px'}">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Vitae et leo duis ut diam.
|
||||
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||
Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
<p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>
|
||||
</p-scrollPanel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h4>Tag</h4>
|
||||
<h5>Tags</h5>
|
||||
<p-tag styleClass="mr-2" value="Primary"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="success" value="Success"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="info" value="Info"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="warning" value="Warning"></p-tag>
|
||||
<p-tag severity="danger" value="Danger"></p-tag>
|
||||
|
||||
<h5>Pills</h5>
|
||||
<p-tag styleClass="mr-2" value="Primary" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="success" value="Success" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="info" value="Info" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="warning" value="Warning" [rounded]="true"></p-tag>
|
||||
<p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-user" value="Primary"></p-tag>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
|
||||
<p-tag styleClass="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
|
||||
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Chip</h4>
|
||||
<h5>Basic</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Action" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Comedy" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Mystery" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Thriller" styleClass="m-2" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Google" icon="pi pi-google" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-2" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-2"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-2" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Action" styleClass="m-2 custom-chip"></p-chip>
|
||||
<p-chip label="Comedy" styleClass="m-2 custom-chip"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-2 custom-chip"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="m-2 custom-chip"></p-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Skeleton</h4>
|
||||
<div class="border-round border-1 surface-border p-4">
|
||||
<div class="flex mb-3">
|
||||
<p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
|
||||
<div>
|
||||
<p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton height=".5rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<p-skeleton width="100%" height="150px"></p-skeleton>
|
||||
<div class="flex justify-content-between mt-3">
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
62
src/app/demo/view/miscdemo.component.ts
Executable file
62
src/app/demo/view/miscdemo.component.ts
Executable file
@ -0,0 +1,62 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './miscdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .misc-demo .p-button.p-widget {
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .misc-demo .badges .p-badge {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .misc-demo .badges .p-tag {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-chip.custom-chip {
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-scrolltop{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-scrolltop .p-scrolltop-icon {
|
||||
font-size: 1rem;
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-scrolltop:hover {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-borderRadius: 4px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-skeleton ul {
|
||||
list-style: none;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MiscDemoComponent implements OnInit {
|
||||
|
||||
value = 0;
|
||||
|
||||
ngOnInit() {
|
||||
const interval = setInterval(() => {
|
||||
this.value = this.value + Math.floor(Math.random() * 10) + 1;
|
||||
if (this.value >= 100) {
|
||||
this.value = 100;
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
124
src/app/demo/view/overlaysdemo.component.html
Executable file
124
src/app/demo/view/overlaysdemo.component.html
Executable file
@ -0,0 +1,124 @@
|
||||
<div class="grid">
|
||||
<p-toast></p-toast>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Dialog</h5>
|
||||
<p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '40vw'}">
|
||||
<div style="line-height: 1.5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
|
||||
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
<p-footer>
|
||||
<button type="button" pButton icon="pi pi-check" (click)="display=false" label="Dismiss" class="p-button-secondary"></button>
|
||||
</p-footer>
|
||||
</p-dialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button type="text" (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<button type="button" pButton label="Image" (click)="op1.toggle($event)" class="p-button-success"></button>
|
||||
<p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width:'350px'}">
|
||||
<img src="assets/demo/images/nature/nature1.jpg" alt="Nature 1" style="width:100%"/>
|
||||
</p-overlayPanel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button type="button" pButton label="DataTable" (click)="op2.toggle($event)" class="p-button-success"></button>
|
||||
<p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '400px'}">
|
||||
<ng-template pTemplate>
|
||||
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-rowData let-product>
|
||||
<tr [pSelectableRow]="rowData">
|
||||
<td>{{product.name}}</td>
|
||||
<td><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" class="product-image" /></td>
|
||||
<td>{{formatCurrency(product.price)}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</ng-template>
|
||||
</p-overlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Confirmation</h5>
|
||||
<p-confirmDialog header="Confirmation" key="confirm1" icon="pi pi-exclamation-triangle" message="Are you sure you want to proceed?"
|
||||
[style]="{width: '300px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button type="text" (click)="confirm1()" pButton icon="pi pi-trash" label="Delete" class="p-button-danger"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Sidebar</h5>
|
||||
<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Left Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Right Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Top Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Bottom Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Full Screen Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Tooltip</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname5" class="p-sr-only">Username</label>
|
||||
<input id="firstname5" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
|
||||
</div>
|
||||
<button pButton pRipple type="button" label="Save" icon="pi pi-check" pTooltip="Click to proceed"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>ConfirmPopup</h5>
|
||||
|
||||
<p-toast></p-toast>
|
||||
<button (click)="confirm2($event)" pButton icon="pi pi-check" label="Confirm"></button>
|
||||
<p-confirmPopup key="confirm2"></p-confirmPopup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
80
src/app/demo/view/overlaysdemo.component.ts
Executable file
80
src/app/demo/view/overlaysdemo.component.ts
Executable file
@ -0,0 +1,80 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {ConfirmationService, MessageService} from 'primeng/api';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './overlaysdemo.component.html',
|
||||
styleUrls: ['./overlaysdemo.scss'],
|
||||
providers: [ConfirmationService, MessageService]
|
||||
})
|
||||
export class OverlaysDemoComponent implements OnInit {
|
||||
|
||||
images: any[];
|
||||
|
||||
display: boolean;
|
||||
|
||||
products: Product[];
|
||||
|
||||
selectedProduct: Product;
|
||||
|
||||
visibleSidebar1;
|
||||
|
||||
visibleSidebar2;
|
||||
|
||||
visibleSidebar3;
|
||||
|
||||
visibleSidebar4;
|
||||
|
||||
visibleSidebar5;
|
||||
|
||||
constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(products => this.products = products);
|
||||
|
||||
this.images = [];
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos1.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos2.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos3.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos4.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4'
|
||||
});
|
||||
}
|
||||
|
||||
confirm1() {
|
||||
this.confirmationService.confirm({
|
||||
key: 'confirm1',
|
||||
message: 'Are you sure to perform this action?'
|
||||
});
|
||||
}
|
||||
|
||||
confirm2(event: Event) {
|
||||
this.confirmationService.confirm({
|
||||
key: 'confirm2',
|
||||
target: event.target,
|
||||
message: 'Are you sure that you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.messageService.add({severity: 'info', summary: 'Confirmed', detail: 'You have accepted'});
|
||||
},
|
||||
reject: () => {
|
||||
this.messageService.add({severity: 'error', summary: 'Rejected', detail: 'You have rejected'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
}
|
||||
8
src/app/demo/view/overlaysdemo.scss
Normal file
8
src/app/demo/view/overlaysdemo.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.product-image {
|
||||
width: 50px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||
}
|
||||
|
||||
:host ::ng-deep button {
|
||||
margin-right: .25em;
|
||||
}
|
||||
239
src/app/demo/view/panelsdemo.component.html
Executable file
239
src/app/demo/view/panelsdemo.component.html
Executable file
@ -0,0 +1,239 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card panel-demo">
|
||||
<h5>Toolbar</h5>
|
||||
<p-toolbar>
|
||||
<div class="p-toolbar-group-left flex flex-wrap">
|
||||
<button pButton type="button" label="New" icon="pi pi-plus"></button>
|
||||
<button pButton type="button" label="Update" class="p-button-secondary"
|
||||
icon="pi pi-refresh"></button>
|
||||
|
||||
<i class="pi pi-bars p-toolbar-separator"></i>
|
||||
|
||||
<button pButton type="button" class="p-button-success" icon="pi pi-check"></button>
|
||||
<button pButton type="button" class="p-button-help" icon="pi pi-print"></button>
|
||||
<button pButton type="button" class="p-button-danger" icon="pi pi-trash"></button>
|
||||
</div>
|
||||
|
||||
<div class="p-toolbar-group-right">
|
||||
<p-splitButton label="Options" icon="pi pi-check" [model]="items"></p-splitButton>
|
||||
</div>
|
||||
</p-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>AccordionPanel</h5>
|
||||
<p-accordion>
|
||||
<p-accordionTab header="Header I" [selected]="true">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
||||
est laborum.
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="Header II">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque
|
||||
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt.
|
||||
Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="Header III">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores
|
||||
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit
|
||||
quo minus.
|
||||
</p-accordionTab>
|
||||
</p-accordion>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>TabView</h5>
|
||||
<p-tabView orientation="left">
|
||||
<p-tabPanel header="Header I">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
||||
est laborum.
|
||||
</p-tabPanel>
|
||||
<p-tabPanel header="Header II">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque
|
||||
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt.
|
||||
Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p-tabPanel>
|
||||
<p-tabPanel header="Header III">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores
|
||||
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit
|
||||
quo minus.
|
||||
</p-tabPanel>
|
||||
</p-tabView>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Panel</h5>
|
||||
<p-panel header="Header" [toggleable]="true">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Fieldset</h5>
|
||||
<p-fieldset legend="Legend" toggleable="true">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-fieldset>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-0 p-3 pb-0">
|
||||
<h5>Card</h5>
|
||||
<p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
|
||||
<button pButton type="button" icon="pi pi-plus" class="p-button-rounded p-button-plain p-button-text"
|
||||
(click)="menu.toggle($event)"></button>
|
||||
</div>
|
||||
|
||||
<p class="card-subtitle">Subtitle</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Divider</h5>
|
||||
<div class="grid">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<div class="p-fluid">
|
||||
<div class="p-field mb-3">
|
||||
<label for="username">Username</label>
|
||||
<input pInputText id="username" type="text"/>
|
||||
</div>
|
||||
<div class="p-field mb-3">
|
||||
<label for="password">Password</label>
|
||||
<input pInputText id="password" type="password"/>
|
||||
</div>
|
||||
<p-button label="Login" styleClass="m-0"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<p-divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</p-divider>
|
||||
</div>
|
||||
<div class="col-5 align-items-center justify-content-center">
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
|
||||
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
|
||||
<p-divider layout="horizontal" align="center">
|
||||
<span class="p-tag">Badge</span>
|
||||
</p-divider>
|
||||
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
|
||||
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
|
||||
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
|
||||
<p-divider align="right">
|
||||
<p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
|
||||
</p-divider>
|
||||
|
||||
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
|
||||
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
|
||||
a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
|
||||
doloribus asperiores repellat.
|
||||
Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien.
|
||||
Morbi dapibus luctus odio.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Splitter</h5>
|
||||
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5">
|
||||
<ng-template pTemplate="panel">
|
||||
<div class="col flex align-items-center justify-content-center p-2" style="overflow: auto">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
|
||||
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
||||
id est laborum.
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="panel">
|
||||
<p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" panelStyleClass="splitter-overflow">
|
||||
<ng-template pTemplate="panel">
|
||||
<div class="d-flex align-items-center justify-content-center p-2">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque
|
||||
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas
|
||||
sit
|
||||
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
|
||||
modi.
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="panel">
|
||||
<div class="d-flex align-items-center justify-content-center p-2">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
|
||||
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
|
||||
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
|
||||
rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit quo minus.
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
52
src/app/demo/view/panelsdemo.component.ts
Executable file
52
src/app/demo/view/panelsdemo.component.ts
Executable file
@ -0,0 +1,52 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {MenuItem} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './panelsdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep button {
|
||||
margin-right: .25em;
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-splitbutton button {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-splitter-panel-nested {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.card.toolbar-demo {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class PanelsDemoComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
cardMenu: MenuItem[];
|
||||
|
||||
ngOnInit() {
|
||||
this.items = [
|
||||
{label: 'Angular.io', icon: 'pi pi-external-link', url: 'http://angular.io'},
|
||||
{label: 'Theming', icon: 'pi pi-bookmark', routerLink: ['/theming']}
|
||||
];
|
||||
|
||||
this.cardMenu = [
|
||||
{
|
||||
label: 'Save', icon: 'pi pi-fw pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update', icon: 'pi pi-fw pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete', icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
307
src/app/demo/view/tabledemo.component.html
Normal file
307
src/app/demo/view/tabledemo.component.html
Normal file
@ -0,0 +1,307 @@
|
||||
<div class="grid table-demo">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<p>Pagination, sorting, filtering and checkbox selection.</p>
|
||||
<p-table #dt [value]="customers1" [(selection)]="selectedCustomers1" dataKey="id"
|
||||
styleClass="p-datatable-customers" [rowHover]="true" [rows]="10" [paginator]="true"
|
||||
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
|
||||
List of Customers
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 3rem">
|
||||
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
|
||||
</th>
|
||||
<th pSortableColumn="name">
|
||||
<div class="flex align-items-center">
|
||||
Name
|
||||
<p-sortIcon field="name"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="country.name">
|
||||
<div class="flex align-items-center">
|
||||
Country
|
||||
<p-sortIcon field="country.name"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="representative.name">
|
||||
<div class="flex align-items-center">
|
||||
Agent
|
||||
<p-sortIcon field="representative.name"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="date">
|
||||
<div class="flex align-items-center">
|
||||
Date
|
||||
<p-sortIcon field="date"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="status">
|
||||
<div class="flex align-items-center">
|
||||
Status
|
||||
<p-sortIcon field="status"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="activity">
|
||||
<div class="flex align-items-center">
|
||||
Activity
|
||||
<p-sortIcon field="activity"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
<th style="width: 8rem"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr class="p-selectable-row">
|
||||
<td>
|
||||
<p-tableCheckbox [value]="customer"></p-tableCheckbox>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Name</span>
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="assets/demo/flags/flag_placeholder.png"
|
||||
[class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Representative</span>
|
||||
<img [alt]="customer.representative.name"
|
||||
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
|
||||
style="vertical-align: middle"/>
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
{{customer.date | date: 'MM/dd/yyyy'}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Status</span>
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Activity</span>
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="8">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Customized</h5>
|
||||
<p>Scrollable table with gridlines (<mark>.p-datatable-gridlines</mark>), striped rows (<mark>.p-datatable-striped</mark>) and smaller paddings (<mark>p-datatable-sm</mark>).</p>
|
||||
<p-table #dtc [value]="customers2" [(selection)]="selectedCustomer" dataKey="id" selectionMode="single"
|
||||
styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm"
|
||||
[scrollable]="true" scrollHeight="600px" [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
|
||||
List of Customers
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Name
|
||||
<p-sortIcon field="name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="country.name">Country
|
||||
<p-sortIcon field="country.name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="representative.name">Representative
|
||||
<p-sortIcon field="representative.name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="date">Date
|
||||
<p-sortIcon field="date"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="status">Status
|
||||
<p-sortIcon field="status"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="activity">Activity
|
||||
<p-sortIcon field="activity"></p-sortIcon>
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr [pSelectableRow]="customer">
|
||||
<td>
|
||||
<span class="p-column-title">Name</span>
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="assets/demo/flags/flag_placeholder.png"
|
||||
[class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Representative</span>
|
||||
<img [alt]="customer.representative.name"
|
||||
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
|
||||
style="vertical-align: middle"/>
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Status</span>
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Activity</span>
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="8">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Expand</h5>
|
||||
<p-toast></p-toast>
|
||||
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" styleClass="p-datatable-customers rowexpand-table">
|
||||
<ng-template pTemplate="caption">
|
||||
<button pButton icon="pi pi-fw pi-plus" label="Expand All" (click)="expandAll()"></button>
|
||||
<button pButton icon="pi pi-fw pi-minus" class="ml-2" label="Collapse All" (click)="collapseAll()"></button>
|
||||
<div class="flex table-header">
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 3rem"></th>
|
||||
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
|
||||
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
|
||||
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-product let-expanded="expanded">
|
||||
<tr>
|
||||
<td>
|
||||
<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
|
||||
</td>
|
||||
<td><span class="p-column-title">Name</span>{{product.name}}</td>
|
||||
<td><span class="p-column-title">Image</span><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" /></td>
|
||||
<td><span class="p-column-title">Price</span>{{product.price | currency:'USD'}}</td>
|
||||
<td><span class="p-column-title">Category</span>{{product.category}}</td>
|
||||
<td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
|
||||
<td><span class="p-column-title">Status</span><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="rowexpansion" let-product>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div class="p-3">
|
||||
<p-table [value]="product.orders" dataKey="id">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th pSortableColumn="customer">Customer <p-sortIcon field="customer"></p-sortIcon></th>
|
||||
<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th>
|
||||
<th pSortableColumn="amount">Amount <p-sortIcon field="amount"></p-sortIcon></th>
|
||||
<th pSortableColumn="stats">Status <p-sortIcon field="status"></p-sortIcon></th>
|
||||
<th style="width: 4rem"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-order>
|
||||
<tr>
|
||||
<td><span class="p-column-title">Id</span>{{order.id}}</td>
|
||||
<td><span class="p-column-title">Customer</span>{{order.customer}}</td>
|
||||
<td><span class="p-column-title">Date</span>{{order.date}}</td>
|
||||
<td><span class="p-column-title">Amount</span>{{order.amount | currency:'USD'}}</td>
|
||||
<td><span class="p-column-title">Status</span><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
|
||||
<td><p-button type="button" icon="pi pi-search"></p-button></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="6">There are no order for this product yet.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Group and Scrolling</h5>
|
||||
<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" [scrollable]="true" scrollHeight="600px"
|
||||
styleClass="p-datatable-customers">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Country</th>
|
||||
<th>Company</th>
|
||||
<th>Status</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
|
||||
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
|
||||
<td colspan="5">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="p-text-bold p-ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="p-column-title">Name</span>
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Country</span>
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td><span class="p-column-title">Company</span>
|
||||
{{customer.company}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Status</span>
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td><span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
131
src/app/demo/view/tabledemo.component.ts
Normal file
131
src/app/demo/view/tabledemo.component.ts
Normal file
@ -0,0 +1,131 @@
|
||||
import {Component, OnInit, ViewChild, ChangeDetectorRef} from '@angular/core';
|
||||
import {Customer, Representative} from '../domain/customer';
|
||||
import {CustomerService} from '../service/customerservice';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
import {Table} from 'primeng/table';
|
||||
import { MessageService, ConfirmationService } from 'primeng/api'
|
||||
|
||||
@Component({
|
||||
templateUrl: './tabledemo.component.html',
|
||||
styleUrls: ['./tabledemo.scss'],
|
||||
styles: [`
|
||||
:host ::ng-deep .p-datatable-gridlines p-progressBar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
:host ::ng-deep .p-datatable.p-datatable-customers.rowexpand-table .p-datatable-tbody > tr > td:nth-child(6) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
`],
|
||||
providers: [MessageService, ConfirmationService]
|
||||
})
|
||||
export class TableDemoComponent implements OnInit {
|
||||
|
||||
customers1: Customer[];
|
||||
|
||||
customers2: Customer[];
|
||||
|
||||
customers3: Customer[];
|
||||
|
||||
selectedCustomers1: Customer[];
|
||||
|
||||
selectedCustomer: Customer;
|
||||
|
||||
representatives: Representative[];
|
||||
|
||||
statuses: any[];
|
||||
|
||||
products: Product[];
|
||||
|
||||
rowGroupMetadata: any;
|
||||
|
||||
expandedRows = {};
|
||||
|
||||
activityValues: number[] = [0, 100];
|
||||
|
||||
isExpanded: boolean = false;
|
||||
|
||||
@ViewChild('dt') table: Table;
|
||||
|
||||
constructor(private customerService: CustomerService, private productService: ProductService, private messageService: MessageService, private confirmService: ConfirmationService, private cd: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.customerService.getCustomersLarge().then(customers => {
|
||||
this.customers1 = customers;
|
||||
// @ts-ignore
|
||||
this.customers1.forEach(customer => customer.date = new Date(customer.date));
|
||||
});
|
||||
this.customerService.getCustomersMedium().then(customers => this.customers2 = customers);
|
||||
this.customerService.getCustomersMedium().then(customers => this.customers3 = customers);
|
||||
this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
|
||||
|
||||
this.representatives = [
|
||||
{name: 'Amy Elsner', image: 'amyelsner.png'},
|
||||
{name: 'Anna Fali', image: 'annafali.png'},
|
||||
{name: 'Asiya Javayant', image: 'asiyajavayant.png'},
|
||||
{name: 'Bernardo Dominic', image: 'bernardodominic.png'},
|
||||
{name: 'Elwin Sharvill', image: 'elwinsharvill.png'},
|
||||
{name: 'Ioni Bowcher', image: 'ionibowcher.png'},
|
||||
{name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png'},
|
||||
{name: 'Onyama Limba', image: 'onyamalimba.png'},
|
||||
{name: 'Stephen Shaw', image: 'stephenshaw.png'},
|
||||
{name: 'XuXue Feng', image: 'xuxuefeng.png'}
|
||||
];
|
||||
|
||||
this.statuses = [
|
||||
{label: 'Unqualified', value: 'unqualified'},
|
||||
{label: 'Qualified', value: 'qualified'},
|
||||
{label: 'New', value: 'new'},
|
||||
{label: 'Negotiation', value: 'negotiation'},
|
||||
{label: 'Renewal', value: 'renewal'},
|
||||
{label: 'Proposal', value: 'proposal'}
|
||||
];
|
||||
}
|
||||
|
||||
onSort() {
|
||||
this.updateRowGroupMetaData();
|
||||
}
|
||||
|
||||
updateRowGroupMetaData() {
|
||||
this.rowGroupMetadata = {};
|
||||
|
||||
if (this.customers3) {
|
||||
for (let i = 0; i < this.customers3.length; i++) {
|
||||
const rowData = this.customers3[i];
|
||||
const representativeName = rowData.representative.name;
|
||||
|
||||
if (i === 0) {
|
||||
this.rowGroupMetadata[representativeName] = { index: 0, size: 1 };
|
||||
}
|
||||
else {
|
||||
const previousRowData = this.customers3[i - 1];
|
||||
const previousRowGroup = previousRowData.representative.name;
|
||||
if (representativeName === previousRowGroup) {
|
||||
this.rowGroupMetadata[representativeName].size++;
|
||||
}
|
||||
else {
|
||||
this.rowGroupMetadata[representativeName] = { index: i, size: 1 };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
expandAll() {
|
||||
if(!this.isExpanded){
|
||||
this.products.forEach(product => this.expandedRows[product.name] = true);
|
||||
|
||||
} else {
|
||||
this.expandedRows={};
|
||||
}
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
|
||||
collapseAll(){
|
||||
this.products.forEach(product => this.expandedRows[product.name] = false);
|
||||
}
|
||||
}
|
||||
187
src/app/demo/view/tabledemo.scss
Normal file
187
src/app/demo/view/tabledemo.scss
Normal file
@ -0,0 +1,187 @@
|
||||
:host ::ng-deep {
|
||||
|
||||
.p-progressbar {
|
||||
height: .5rem;
|
||||
background-color: #D8DADC;
|
||||
|
||||
.p-progressbar-value {
|
||||
background-color: #607D8B;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-calendar .p-datepicker {
|
||||
min-width: 25rem;
|
||||
|
||||
td {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-customers {
|
||||
.p-datatable-header {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-dropdown-label:not(.p-placeholder) {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-customers:not(.p-datatable-gridlines) {
|
||||
.p-datatable-tbody > tr > td {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
.p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
|
||||
&.status-qualified {
|
||||
background: #C8E6C9;
|
||||
color: #256029;
|
||||
}
|
||||
|
||||
&.status-unqualified {
|
||||
background: #FFCDD2;
|
||||
color: #C63737;
|
||||
}
|
||||
|
||||
&.status-negotiation {
|
||||
background: #FEEDAF;
|
||||
color: #8A5340;
|
||||
}
|
||||
|
||||
&.status-new {
|
||||
background: #B3E5FC;
|
||||
color: #23547B;
|
||||
}
|
||||
|
||||
&.status-renewal {
|
||||
background: #ECCFFF;
|
||||
color: #694382;
|
||||
}
|
||||
|
||||
&.status-proposal {
|
||||
background: #FFD8B2;
|
||||
color: #805B36;
|
||||
}
|
||||
}
|
||||
|
||||
.product-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
|
||||
&.status-instock {
|
||||
background: #C8E6C9;
|
||||
color: #256029;
|
||||
}
|
||||
|
||||
&.status-outofstock {
|
||||
background: #FFCDD2;
|
||||
color: #C63737;
|
||||
}
|
||||
|
||||
&.status-lowstock {
|
||||
background: #FEEDAF;
|
||||
color: #8A5340;
|
||||
}
|
||||
}
|
||||
|
||||
.order-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
|
||||
&.order-delivered {
|
||||
background: #C8E6C9;
|
||||
color: #256029;
|
||||
}
|
||||
|
||||
&.order-cancelled {
|
||||
background: #FFCDD2;
|
||||
color: #C63737;
|
||||
}
|
||||
|
||||
&.order-pending {
|
||||
background: #FEEDAF;
|
||||
color: #8A5340;
|
||||
}
|
||||
|
||||
&.order-returned {
|
||||
background: #ECCFFF;
|
||||
color: #694382;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
:host ::ng-deep {
|
||||
.p-datatable {
|
||||
&.p-datatable-customers {
|
||||
.p-datatable-thead > tr > th,
|
||||
.p-datatable-tfoot > tr > td {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr {
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
|
||||
> td {
|
||||
text-align: left;
|
||||
display: block;
|
||||
border: 0 none !important;
|
||||
width: 100% !important;
|
||||
float: left;
|
||||
clear: left;
|
||||
border: 0 none;
|
||||
|
||||
.p-column-title {
|
||||
padding: .4rem;
|
||||
min-width: 30%;
|
||||
display: inline-block;
|
||||
margin: -.4rem 1rem -.4rem -.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.p-progressbar {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
31
src/app/demo/view/treedemo.component.html
Normal file
31
src/app/demo/view/treedemo.component.html
Normal file
@ -0,0 +1,31 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4>Tree</h4>
|
||||
<p-tree [value]="files1" selectionMode="checkbox" [(selection)]="selectedFiles1"></p-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4>TreeTable</h4>
|
||||
<p-treeTable [value]="files2" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedFiles2">
|
||||
<ng-template pTemplate="header" let-columns>
|
||||
<tr>
|
||||
<th *ngFor="let col of columns">
|
||||
{{col.header}}
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
|
||||
<tr>
|
||||
<td *ngFor="let col of columns; let i = index">
|
||||
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
|
||||
<p-treeTableCheckbox [value]="rowNode" *ngIf="i == 0"></p-treeTableCheckbox>
|
||||
{{rowData[col.field]}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-treeTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
43
src/app/demo/view/treedemo.component.ts
Normal file
43
src/app/demo/view/treedemo.component.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {NodeService} from '../service/nodeservice';
|
||||
import {TreeNode} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './treedemo.component.html'
|
||||
})
|
||||
export class TreeDemoComponent implements OnInit {
|
||||
|
||||
|
||||
files1: TreeNode[];
|
||||
|
||||
files2: TreeNode[];
|
||||
|
||||
files3: TreeNode[];
|
||||
|
||||
selectedFiles1: TreeNode;
|
||||
|
||||
selectedFiles2: TreeNode[];
|
||||
|
||||
selectedFiles3: TreeNode;
|
||||
|
||||
cols: any[];
|
||||
|
||||
constructor(private nodeService: NodeService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.nodeService.getFiles().then(files => this.files1 = files);
|
||||
this.nodeService.getFilesystem().then(files => this.files2 = files);
|
||||
this.nodeService.getFiles().then(files => {
|
||||
this.files3 = [{
|
||||
label: 'Root',
|
||||
children: files
|
||||
}];
|
||||
});
|
||||
|
||||
this.cols = [
|
||||
{ field: 'name', header: 'Name' },
|
||||
{ field: 'size', header: 'Size' },
|
||||
{ field: 'type', header: 'Type' }
|
||||
];
|
||||
}
|
||||
}
|
||||
132
src/app/pages/app.crud.component.html
Normal file
132
src/app/pages/app.crud.component.html
Normal file
@ -0,0 +1,132 @@
|
||||
<div class="grid crud-demo">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<p-toast></p-toast>
|
||||
<p-toolbar styleClass="mb-4">
|
||||
<ng-template pTemplate="left">
|
||||
<button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2 mb-2" (click)="openNew()"></button>
|
||||
<button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger mb-2" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="right">
|
||||
<p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 mb-2 inline-block"></p-fileUpload>
|
||||
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help mb-2" (click)="dt.exportCSV()"></button>
|
||||
</ng-template>
|
||||
</p-toolbar>
|
||||
|
||||
<p-table #dt [value]="products" [columns]="cols" [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" [rowHover]="true" dataKey="id" styleClass="p-datatable-customers" class="p-datatable-responsive">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex flex-md-row justify-content-md-between table-header">
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
<span class="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><span class="p-column-title">Code</span>
|
||||
{{product.code}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Name</span>
|
||||
{{product.name}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Image</span>
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" />
|
||||
</td>
|
||||
<td><span class="p-column-title">Price</span>
|
||||
{{product.price | currency:'USD'}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Category</span>
|
||||
{{product.category}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Reviews</span>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
</td>
|
||||
<td><span class="p-column-title">Status</span>
|
||||
<span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
|
||||
<p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" styleClass="p-fluid">
|
||||
<ng-template pTemplate="content">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" class="product-image" *ngIf="product.image">
|
||||
<div class="p-field">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
|
||||
<small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="p-formgrid grid">
|
||||
<div class="p-field-radiobutton col-6">
|
||||
<p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton col-6">
|
||||
<p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton>
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton col-6">
|
||||
<p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton>
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton col-6">
|
||||
<p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton>
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-formgrid grid">
|
||||
<div class="p-field col">
|
||||
<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-confirmDialog [style]="{width: '350px'}"></p-confirmDialog>
|
||||
</div>
|
||||
</div>
|
||||
142
src/app/pages/app.crud.component.ts
Normal file
142
src/app/pages/app.crud.component.ts
Normal file
@ -0,0 +1,142 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Product} from '../demo/domain/product';
|
||||
import {ProductService} from '../demo/service/productservice';
|
||||
import {ConfirmationService, MessageService} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './app.crud.component.html',
|
||||
styleUrls: ['../demo/view/tabledemo.scss'],
|
||||
styles: [`
|
||||
:host ::ng-deep .p-dialog .product-image {
|
||||
width: 150px;
|
||||
margin: 0 auto 2rem auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
:host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:last-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:nth-child(6) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
`],
|
||||
providers: [MessageService, ConfirmationService]
|
||||
})
|
||||
export class AppCrudComponent implements OnInit {
|
||||
|
||||
productDialog: boolean;
|
||||
|
||||
products: Product[];
|
||||
|
||||
product: Product;
|
||||
|
||||
selectedProducts: Product[];
|
||||
|
||||
submitted: boolean;
|
||||
|
||||
cols: 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'}
|
||||
];
|
||||
}
|
||||
|
||||
openNew() {
|
||||
this.product = {};
|
||||
this.submitted = false;
|
||||
this.productDialog = true;
|
||||
}
|
||||
|
||||
deleteSelectedProducts() {
|
||||
this.confirmationService.confirm({
|
||||
message: 'Are you sure you want to delete the selected products?',
|
||||
header: 'Confirm',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.products = this.products.filter(val => !this.selectedProducts.includes(val));
|
||||
this.selectedProducts = null;
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
editProduct(product: Product) {
|
||||
this.product = {...product};
|
||||
this.productDialog = true;
|
||||
}
|
||||
|
||||
deleteProduct(product: Product) {
|
||||
this.confirmationService.confirm({
|
||||
message: 'Are you sure you want to delete ' + product.name + '?',
|
||||
header: 'Confirm',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.products = this.products.filter(val => val.id !== product.id);
|
||||
this.product = {};
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
hideDialog() {
|
||||
this.productDialog = false;
|
||||
this.submitted = false;
|
||||
}
|
||||
|
||||
saveProduct() {
|
||||
this.submitted = true;
|
||||
|
||||
if (this.product.name.trim()) {
|
||||
if (this.product.id) {
|
||||
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.image = 'product-placeholder.svg';
|
||||
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;
|
||||
}
|
||||
}
|
||||
0
src/app/pages/app.empty.component.html
Normal file
0
src/app/pages/app.empty.component.html
Normal file
0
src/app/pages/app.empty.component.ts
Normal file
0
src/app/pages/app.empty.component.ts
Normal file
34
src/app/pages/app.timelinedemo.component.html
Normal file
34
src/app/pages/app.timelinedemo.component.html
Normal file
@ -0,0 +1,34 @@
|
||||
<div class="grid timeline-demo">
|
||||
<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 p-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="p-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>
|
||||
32
src/app/pages/app.timelinedemo.component.ts
Normal file
32
src/app/pages/app.timelinedemo.component.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {PrimeIcons} from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './app.timelinedemo.component.html',
|
||||
styleUrls: ['./app.timelinedemo.scss']
|
||||
})
|
||||
export class AppTimelineDemoComponent 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'
|
||||
];
|
||||
}
|
||||
}
|
||||
40
src/app/pages/app.timelinedemo.scss
Normal file
40
src/app/pages/app.timelinedemo.scss
Normal file
@ -0,0 +1,40 @@
|
||||
//timeline
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
246
src/assets/demo/data/countries.json
Normal file
246
src/assets/demo/data/countries.json
Normal file
@ -0,0 +1,246 @@
|
||||
{
|
||||
"data": [
|
||||
{"name": "Afghanistan", "code": "AF"},
|
||||
{"name": "Albania", "code": "AL"},
|
||||
{"name": "Algeria", "code": "DZ"},
|
||||
{"name": "American Samoa", "code": "AS"},
|
||||
{"name": "Andorra", "code": "AD"},
|
||||
{"name": "Angola", "code": "AO"},
|
||||
{"name": "Anguilla", "code": "AI"},
|
||||
{"name": "Antarctica", "code": "AQ"},
|
||||
{"name": "Antigua and Barbuda", "code": "AG"},
|
||||
{"name": "Argentina", "code": "AR"},
|
||||
{"name": "Armenia", "code": "AM"},
|
||||
{"name": "Aruba", "code": "AW"},
|
||||
{"name": "Australia", "code": "AU"},
|
||||
{"name": "Austria", "code": "AT"},
|
||||
{"name": "Azerbaijan", "code": "AZ"},
|
||||
{"name": "Bahamas", "code": "BS"},
|
||||
{"name": "Bahrain", "code": "BH"},
|
||||
{"name": "Bangladesh", "code": "BD"},
|
||||
{"name": "Barbados", "code": "BB"},
|
||||
{"name": "Belarus", "code": "BY"},
|
||||
{"name": "Belgium", "code": "BE"},
|
||||
{"name": "Belize", "code": "BZ"},
|
||||
{"name": "Benin", "code": "BJ"},
|
||||
{"name": "Bermuda", "code": "BM"},
|
||||
{"name": "Bhutan", "code": "BT"},
|
||||
{"name": "Bolivia", "code": "BO"},
|
||||
{"name": "Bosnia and Herzegovina", "code": "BA"},
|
||||
{"name": "Botswana", "code": "BW"},
|
||||
{"name": "Bouvet Island", "code": "BV"},
|
||||
{"name": "Brazil", "code": "BR"},
|
||||
{"name": "British Indian Ocean Territory", "code": "IO"},
|
||||
{"name": "Brunei Darussalam", "code": "BN"},
|
||||
{"name": "Bulgaria", "code": "BG"},
|
||||
{"name": "Burkina Faso", "code": "BF"},
|
||||
{"name": "Burundi", "code": "BI"},
|
||||
{"name": "Cambodia", "code": "KH"},
|
||||
{"name": "Cameroon", "code": "CM"},
|
||||
{"name": "Canada", "code": "CA"},
|
||||
{"name": "Cape Verde", "code": "CV"},
|
||||
{"name": "Cayman Islands", "code": "KY"},
|
||||
{"name": "Central African Republic", "code": "CF"},
|
||||
{"name": "Chad", "code": "TD"},
|
||||
{"name": "Chile", "code": "CL"},
|
||||
{"name": "China", "code": "CN"},
|
||||
{"name": "Christmas Island", "code": "CX"},
|
||||
{"name": "Cocos (Keeling) Islands", "code": "CC"},
|
||||
{"name": "Colombia", "code": "CO"},
|
||||
{"name": "Comoros", "code": "KM"},
|
||||
{"name": "Congo", "code": "CG"},
|
||||
{"name": "Congo, The Democratic Republic of the", "code": "CD"},
|
||||
{"name": "Cook Islands", "code": "CK"},
|
||||
{"name": "Costa Rica", "code": "CR"},
|
||||
{"name": "Cote D\"Ivoire", "code": "CI"},
|
||||
{"name": "Croatia", "code": "HR"},
|
||||
{"name": "Cuba", "code": "CU"},
|
||||
{"name": "Cyprus", "code": "CY"},
|
||||
{"name": "Czech Republic", "code": "CZ"},
|
||||
{"name": "Denmark", "code": "DK"},
|
||||
{"name": "Djibouti", "code": "DJ"},
|
||||
{"name": "Dominica", "code": "DM"},
|
||||
{"name": "Dominican Republic", "code": "DO"},
|
||||
{"name": "Ecuador", "code": "EC"},
|
||||
{"name": "Egypt", "code": "EG"},
|
||||
{"name": "El Salvador", "code": "SV"},
|
||||
{"name": "Equatorial Guinea", "code": "GQ"},
|
||||
{"name": "Eritrea", "code": "ER"},
|
||||
{"name": "Estonia", "code": "EE"},
|
||||
{"name": "Ethiopia", "code": "ET"},
|
||||
{"name": "Falkland Islands (Malvinas)", "code": "FK"},
|
||||
{"name": "Faroe Islands", "code": "FO"},
|
||||
{"name": "Fiji", "code": "FJ"},
|
||||
{"name": "Finland", "code": "FI"},
|
||||
{"name": "France", "code": "FR"},
|
||||
{"name": "French Guiana", "code": "GF"},
|
||||
{"name": "French Polynesia", "code": "PF"},
|
||||
{"name": "French Southern Territories", "code": "TF"},
|
||||
{"name": "Gabon", "code": "GA"},
|
||||
{"name": "Gambia", "code": "GM"},
|
||||
{"name": "Georgia", "code": "GE"},
|
||||
{"name": "Germany", "code": "DE"},
|
||||
{"name": "Ghana", "code": "GH"},
|
||||
{"name": "Gibraltar", "code": "GI"},
|
||||
{"name": "Greece", "code": "GR"},
|
||||
{"name": "Greenland", "code": "GL"},
|
||||
{"name": "Grenada", "code": "GD"},
|
||||
{"name": "Guadeloupe", "code": "GP"},
|
||||
{"name": "Guam", "code": "GU"},
|
||||
{"name": "Guatemala", "code": "GT"},
|
||||
{"name": "Guernsey", "code": "GG"},
|
||||
{"name": "Guinea", "code": "GN"},
|
||||
{"name": "Guinea-Bissau", "code": "GW"},
|
||||
{"name": "Guyana", "code": "GY"},
|
||||
{"name": "Haiti", "code": "HT"},
|
||||
{"name": "Heard Island and Mcdonald Islands", "code": "HM"},
|
||||
{"name": "Holy See (Vatican City State)", "code": "VA"},
|
||||
{"name": "Honduras", "code": "HN"},
|
||||
{"name": "Hong Kong", "code": "HK"},
|
||||
{"name": "Hungary", "code": "HU"},
|
||||
{"name": "Iceland", "code": "IS"},
|
||||
{"name": "India", "code": "IN"},
|
||||
{"name": "Indonesia", "code": "ID"},
|
||||
{"name": "Iran, Islamic Republic Of", "code": "IR"},
|
||||
{"name": "Iraq", "code": "IQ"},
|
||||
{"name": "Ireland", "code": "IE"},
|
||||
{"name": "Isle of Man", "code": "IM"},
|
||||
{"name": "Israel", "code": "IL"},
|
||||
{"name": "Italy", "code": "IT"},
|
||||
{"name": "Jamaica", "code": "JM"},
|
||||
{"name": "Japan", "code": "JP"},
|
||||
{"name": "Jersey", "code": "JE"},
|
||||
{"name": "Jordan", "code": "JO"},
|
||||
{"name": "Kazakhstan", "code": "KZ"},
|
||||
{"name": "Kenya", "code": "KE"},
|
||||
{"name": "Kiribati", "code": "KI"},
|
||||
{"name": "Korea, Democratic People\"S Republic of", "code": "KP"},
|
||||
{"name": "Korea, Republic of", "code": "KR"},
|
||||
{"name": "Kuwait", "code": "KW"},
|
||||
{"name": "Kyrgyzstan", "code": "KG"},
|
||||
{"name": "Lao People\"S Democratic Republic", "code": "LA"},
|
||||
{"name": "Latvia", "code": "LV"},
|
||||
{"name": "Lebanon", "code": "LB"},
|
||||
{"name": "Lesotho", "code": "LS"},
|
||||
{"name": "Liberia", "code": "LR"},
|
||||
{"name": "Libyan Arab Jamahiriya", "code": "LY"},
|
||||
{"name": "Liechtenstein", "code": "LI"},
|
||||
{"name": "Lithuania", "code": "LT"},
|
||||
{"name": "Luxembourg", "code": "LU"},
|
||||
{"name": "Macao", "code": "MO"},
|
||||
{"name": "Macedonia, The Former Yugoslav Republic of", "code": "MK"},
|
||||
{"name": "Madagascar", "code": "MG"},
|
||||
{"name": "Malawi", "code": "MW"},
|
||||
{"name": "Malaysia", "code": "MY"},
|
||||
{"name": "Maldives", "code": "MV"},
|
||||
{"name": "Mali", "code": "ML"},
|
||||
{"name": "Malta", "code": "MT"},
|
||||
{"name": "Marshall Islands", "code": "MH"},
|
||||
{"name": "Martinique", "code": "MQ"},
|
||||
{"name": "Mauritania", "code": "MR"},
|
||||
{"name": "Mauritius", "code": "MU"},
|
||||
{"name": "Mayotte", "code": "YT"},
|
||||
{"name": "Mexico", "code": "MX"},
|
||||
{"name": "Micronesia, Federated States of", "code": "FM"},
|
||||
{"name": "Moldova, Republic of", "code": "MD"},
|
||||
{"name": "Monaco", "code": "MC"},
|
||||
{"name": "Mongolia", "code": "MN"},
|
||||
{"name": "Montserrat", "code": "MS"},
|
||||
{"name": "Morocco", "code": "MA"},
|
||||
{"name": "Mozambique", "code": "MZ"},
|
||||
{"name": "Myanmar", "code": "MM"},
|
||||
{"name": "Namibia", "code": "NA"},
|
||||
{"name": "Nauru", "code": "NR"},
|
||||
{"name": "Nepal", "code": "NP"},
|
||||
{"name": "Netherlands", "code": "NL"},
|
||||
{"name": "Netherlands Antilles", "code": "AN"},
|
||||
{"name": "New Caledonia", "code": "NC"},
|
||||
{"name": "New Zealand", "code": "NZ"},
|
||||
{"name": "Nicaragua", "code": "NI"},
|
||||
{"name": "Niger", "code": "NE"},
|
||||
{"name": "Nigeria", "code": "NG"},
|
||||
{"name": "Niue", "code": "NU"},
|
||||
{"name": "Norfolk Island", "code": "NF"},
|
||||
{"name": "Northern Mariana Islands", "code": "MP"},
|
||||
{"name": "Norway", "code": "NO"},
|
||||
{"name": "Oman", "code": "OM"},
|
||||
{"name": "Pakistan", "code": "PK"},
|
||||
{"name": "Palau", "code": "PW"},
|
||||
{"name": "Palestinian Territory, Occupied", "code": "PS"},
|
||||
{"name": "Panama", "code": "PA"},
|
||||
{"name": "Papua New Guinea", "code": "PG"},
|
||||
{"name": "Paraguay", "code": "PY"},
|
||||
{"name": "Peru", "code": "PE"},
|
||||
{"name": "Philippines", "code": "PH"},
|
||||
{"name": "Pitcairn", "code": "PN"},
|
||||
{"name": "Poland", "code": "PL"},
|
||||
{"name": "Portugal", "code": "PT"},
|
||||
{"name": "Puerto Rico", "code": "PR"},
|
||||
{"name": "Qatar", "code": "QA"},
|
||||
{"name": "Reunion", "code": "RE"},
|
||||
{"name": "Romania", "code": "RO"},
|
||||
{"name": "Russian Federation", "code": "RU"},
|
||||
{"name": "RWANDA", "code": "RW"},
|
||||
{"name": "Saint Helena", "code": "SH"},
|
||||
{"name": "Saint Kitts and Nevis", "code": "KN"},
|
||||
{"name": "Saint Lucia", "code": "LC"},
|
||||
{"name": "Saint Pierre and Miquelon", "code": "PM"},
|
||||
{"name": "Saint Vincent and the Grenadines", "code": "VC"},
|
||||
{"name": "Samoa", "code": "WS"},
|
||||
{"name": "San Marino", "code": "SM"},
|
||||
{"name": "Sao Tome and Principe", "code": "ST"},
|
||||
{"name": "Saudi Arabia", "code": "SA"},
|
||||
{"name": "Senegal", "code": "SN"},
|
||||
{"name": "Serbia and Montenegro", "code": "CS"},
|
||||
{"name": "Seychelles", "code": "SC"},
|
||||
{"name": "Sierra Leone", "code": "SL"},
|
||||
{"name": "Singapore", "code": "SG"},
|
||||
{"name": "Slovakia", "code": "SK"},
|
||||
{"name": "Slovenia", "code": "SI"},
|
||||
{"name": "Solomon Islands", "code": "SB"},
|
||||
{"name": "Somalia", "code": "SO"},
|
||||
{"name": "South Africa", "code": "ZA"},
|
||||
{"name": "South Georgia and the South Sandwich Islands", "code": "GS"},
|
||||
{"name": "Spain", "code": "ES"},
|
||||
{"name": "Sri Lanka", "code": "LK"},
|
||||
{"name": "Sudan", "code": "SD"},
|
||||
{"name": "Suriname", "code": "SR"},
|
||||
{"name": "Svalbard and Jan Mayen", "code": "SJ"},
|
||||
{"name": "Swaziland", "code": "SZ"},
|
||||
{"name": "Sweden", "code": "SE"},
|
||||
{"name": "Switzerland", "code": "CH"},
|
||||
{"name": "Syrian Arab Republic", "code": "SY"},
|
||||
{"name": "Taiwan, Province of China", "code": "TW"},
|
||||
{"name": "Tajikistan", "code": "TJ"},
|
||||
{"name": "Tanzania, United Republic of", "code": "TZ"},
|
||||
{"name": "Thailand", "code": "TH"},
|
||||
{"name": "Timor-Leste", "code": "TL"},
|
||||
{"name": "Togo", "code": "TG"},
|
||||
{"name": "Tokelau", "code": "TK"},
|
||||
{"name": "Tonga", "code": "TO"},
|
||||
{"name": "Trinidad and Tobago", "code": "TT"},
|
||||
{"name": "Tunisia", "code": "TN"},
|
||||
{"name": "Turkey", "code": "TR"},
|
||||
{"name": "Turkmenistan", "code": "TM"},
|
||||
{"name": "Turks and Caicos Islands", "code": "TC"},
|
||||
{"name": "Tuvalu", "code": "TV"},
|
||||
{"name": "Uganda", "code": "UG"},
|
||||
{"name": "Ukraine", "code": "UA"},
|
||||
{"name": "United Arab Emirates", "code": "AE"},
|
||||
{"name": "United Kingdom", "code": "GB"},
|
||||
{"name": "United States", "code": "US"},
|
||||
{"name": "United States Minor Outlying Islands", "code": "UM"},
|
||||
{"name": "Uruguay", "code": "UY"},
|
||||
{"name": "Uzbekistan", "code": "UZ"},
|
||||
{"name": "Vanuatu", "code": "VU"},
|
||||
{"name": "Venezuela", "code": "VE"},
|
||||
{"name": "Viet Nam", "code": "VN"},
|
||||
{"name": "Virgin Islands, British", "code": "VG"},
|
||||
{"name": "Virgin Islands, U.S.", "code": "VI"},
|
||||
{"name": "Wallis and Futuna", "code": "WF"},
|
||||
{"name": "Western Sahara", "code": "EH"},
|
||||
{"name": "Yemen", "code": "YE"},
|
||||
{"name": "Zambia", "code": "ZM"},
|
||||
{"name": "Zimbabwe", "code": "ZW"}
|
||||
]
|
||||
}
|
||||
3604
src/assets/demo/data/customers-large.json
Normal file
3604
src/assets/demo/data/customers-large.json
Normal file
File diff suppressed because it is too large
Load Diff
804
src/assets/demo/data/customers-medium.json
Normal file
804
src/assets/demo/data/customers-medium.json
Normal file
@ -0,0 +1,804 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": 1000,
|
||||
"name": "James Butt",
|
||||
"country": {
|
||||
"name": "Algeria",
|
||||
"code": "dz"
|
||||
},
|
||||
"company": "Benton, John B Jr",
|
||||
"date": "2015-09-13",
|
||||
"status": "unqualified",
|
||||
"activity": 17,
|
||||
"representative": {
|
||||
"name": "Ioni Bowcher",
|
||||
"image": "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1001,
|
||||
"name": "Josephine Darakjy",
|
||||
"country": {
|
||||
"name": "Egypt",
|
||||
"code": "eg"
|
||||
},
|
||||
"company": "Chanay, Jeffrey A Esq",
|
||||
"date": "2019-02-09",
|
||||
"status": "proposal",
|
||||
"activity": 0,
|
||||
"representative": {
|
||||
"name": "Amy Elsner",
|
||||
"image": "amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1002,
|
||||
"name": "Art Venere",
|
||||
"country": {
|
||||
"name": "Panama",
|
||||
"code": "pa"
|
||||
},
|
||||
"company": "Chemel, James L Cpa",
|
||||
"date": "2017-05-13",
|
||||
"status": "qualified",
|
||||
"activity": 63,
|
||||
"representative": {
|
||||
"name": "Asiya Javayant",
|
||||
"image": "asiyajavayant.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1003,
|
||||
"name": "Lenna Paprocki",
|
||||
"country": {
|
||||
"name": "Slovenia",
|
||||
"code": "si"
|
||||
},
|
||||
"company": "Feltz Printing Service",
|
||||
"date": "2020-09-15",
|
||||
"status": "new",
|
||||
"activity": 37,
|
||||
"representative": {
|
||||
"name": "Xuxue Feng",
|
||||
"image": "xuxuefeng.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1004,
|
||||
"name": "Donette Foller",
|
||||
"country": {
|
||||
"name": "South Africa",
|
||||
"code": "za"
|
||||
},
|
||||
"company": "Printing Dimensions",
|
||||
"date": "2016-05-20",
|
||||
"status": "proposal",
|
||||
"activity": 33,
|
||||
"representative": {
|
||||
"name": "Asiya Javayant",
|
||||
"image": "asiyajavayant.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1005,
|
||||
"name": "Simona Morasca",
|
||||
"country": {
|
||||
"name": "Egypt",
|
||||
"code": "eg"
|
||||
},
|
||||
"company": "Chapman, Ross E Esq",
|
||||
"date": "2018-02-16",
|
||||
"status": "qualified",
|
||||
"activity": 68,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1006,
|
||||
"name": "Mitsue Tollner",
|
||||
"country": {
|
||||
"name": "Paraguay",
|
||||
"code": "py"
|
||||
},
|
||||
"company": "Morlong Associates",
|
||||
"date": "2018-02-19",
|
||||
"status": "renewal",
|
||||
"activity": 54,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1007,
|
||||
"name": "Leota Dilliard",
|
||||
"country": {
|
||||
"name": "Serbia",
|
||||
"code": "rs"
|
||||
},
|
||||
"company": "Commercial Press",
|
||||
"date": "2019-08-13",
|
||||
"status": "renewal",
|
||||
"activity": 69,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1008,
|
||||
"name": "Sage Wieser",
|
||||
"country": {
|
||||
"name": "Egypt",
|
||||
"code": "eg"
|
||||
},
|
||||
"company": "Truhlar And Truhlar Attys",
|
||||
"date": "2018-11-21",
|
||||
"status": "unqualified",
|
||||
"activity": 76,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1009,
|
||||
"name": "Kris Marrier",
|
||||
"country": {
|
||||
"name": "Mexico",
|
||||
"code": "mx"
|
||||
},
|
||||
"company": "King, Christopher A Esq",
|
||||
"date": "2015-07-07",
|
||||
"status": "proposal",
|
||||
"activity": 3,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1010,
|
||||
"name": "Minna Amigon",
|
||||
"country": {
|
||||
"name": "Romania",
|
||||
"code": "ro"
|
||||
},
|
||||
"company": "Dorl, James J Esq",
|
||||
"date": "2018-11-07",
|
||||
"status": "qualified",
|
||||
"activity": 38,
|
||||
"representative": {
|
||||
"name": "Anna Fali",
|
||||
"image": "annafali.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1011,
|
||||
"name": "Abel Maclead",
|
||||
"country": {
|
||||
"name": "Singapore",
|
||||
"code": "sg"
|
||||
},
|
||||
"company": "Rangoni Of Florence",
|
||||
"date": "2017-03-11",
|
||||
"status": "qualified",
|
||||
"activity": 87,
|
||||
"representative": {
|
||||
"name": "Bernardo Dominic",
|
||||
"image": "bernardodominic.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1012,
|
||||
"name": "Kiley Caldarera",
|
||||
"country": {
|
||||
"name": "Serbia",
|
||||
"code": "rs"
|
||||
},
|
||||
"company": "Feiner Bros",
|
||||
"date": "2015-10-20",
|
||||
"status": "unqualified",
|
||||
"activity": 80,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1013,
|
||||
"name": "Graciela Ruta",
|
||||
"country": {
|
||||
"name": "Chile",
|
||||
"code": "cl"
|
||||
},
|
||||
"company": "Buckley Miller \u0026 Wright",
|
||||
"date": "2016-07-25",
|
||||
"status": "negotiation",
|
||||
"activity": 59,
|
||||
"representative": {
|
||||
"name": "Amy Elsner",
|
||||
"image": "amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1014,
|
||||
"name": "Cammy Albares",
|
||||
"country": {
|
||||
"name": "Philippines",
|
||||
"code": "ph"
|
||||
},
|
||||
"company": "Rousseaux, Michael Esq",
|
||||
"date": "2019-06-25",
|
||||
"status": "new",
|
||||
"activity": 90,
|
||||
"representative": {
|
||||
"name": "Asiya Javayant",
|
||||
"image": "asiyajavayant.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1015,
|
||||
"name": "Mattie Poquette",
|
||||
"country": {
|
||||
"name": "Venezuela",
|
||||
"code": "ve"
|
||||
},
|
||||
"company": "Century Communications",
|
||||
"date": "2017-12-12",
|
||||
"status": "negotiation",
|
||||
"activity": 52,
|
||||
"representative": {
|
||||
"name": "Anna Fali",
|
||||
"image": "annafali.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1016,
|
||||
"name": "Meaghan Garufi",
|
||||
"country": {
|
||||
"name": "Malaysia",
|
||||
"code": "my"
|
||||
},
|
||||
"company": "Bolton, Wilbur Esq",
|
||||
"date": "2018-07-04",
|
||||
"status": "unqualified",
|
||||
"activity": 31,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1017,
|
||||
"name": "Gladys Rim",
|
||||
"country": {
|
||||
"name": "Netherlands",
|
||||
"code": "nl"
|
||||
},
|
||||
"company": "T M Byxbee Company Pc",
|
||||
"date": "2020-02-27",
|
||||
"status": "renewal",
|
||||
"activity": 48,
|
||||
"representative": {
|
||||
"name": "Stephen Shaw",
|
||||
"image": "stephenshaw.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1018,
|
||||
"name": "Yuki Whobrey",
|
||||
"country": {
|
||||
"name": "Israel",
|
||||
"code": "il"
|
||||
},
|
||||
"company": "Farmers Insurance Group",
|
||||
"date": "2017-12-21",
|
||||
"status": "negotiation",
|
||||
"activity": 16,
|
||||
"representative": {
|
||||
"name": "Bernardo Dominic",
|
||||
"image": "bernardodominic.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1019,
|
||||
"name": "Fletcher Flosi",
|
||||
"country": {
|
||||
"name": "Argentina",
|
||||
"code": "ar"
|
||||
},
|
||||
"company": "Post Box Services Plus",
|
||||
"date": "2016-01-04",
|
||||
"status": "renewal",
|
||||
"activity": 19,
|
||||
"representative": {
|
||||
"name": "Xuxue Feng",
|
||||
"image": "xuxuefeng.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1020,
|
||||
"name": "Bette Nicka",
|
||||
"country": {
|
||||
"name": "Paraguay",
|
||||
"code": "py"
|
||||
},
|
||||
"company": "Sport En Art",
|
||||
"date": "2016-10-21",
|
||||
"status": "renewal",
|
||||
"activity": 100,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1021,
|
||||
"name": "Veronika Inouye",
|
||||
"country": {
|
||||
"name": "Ecuador",
|
||||
"code": "ec"
|
||||
},
|
||||
"company": "C 4 Network Inc",
|
||||
"date": "2017-03-24",
|
||||
"status": "renewal",
|
||||
"activity": 72,
|
||||
"representative": {
|
||||
"name": "Ioni Bowcher",
|
||||
"image": "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1022,
|
||||
"name": "Willard Kolmetz",
|
||||
"country": {
|
||||
"name": "Tunisia",
|
||||
"code": "tn"
|
||||
},
|
||||
"company": "Ingalls, Donald R Esq",
|
||||
"date": "2017-04-15",
|
||||
"status": "renewal",
|
||||
"activity": 94,
|
||||
"representative": {
|
||||
"name": "Asiya Javayant",
|
||||
"image": "asiyajavayant.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1023,
|
||||
"name": "Maryann Royster",
|
||||
"country": {
|
||||
"name": "Belarus",
|
||||
"code": "by"
|
||||
},
|
||||
"company": "Franklin, Peter L Esq",
|
||||
"date": "2017-03-11",
|
||||
"status": "qualified",
|
||||
"activity": 56,
|
||||
"representative": {
|
||||
"name": "Elwin Sharvill",
|
||||
"image": "elwinsharvill.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1024,
|
||||
"name": "Alisha Slusarski",
|
||||
"country": {
|
||||
"name": "Iceland",
|
||||
"code": "is"
|
||||
},
|
||||
"company": "Wtlz Power 107 Fm",
|
||||
"date": "2018-03-27",
|
||||
"status": "qualified",
|
||||
"activity": 7,
|
||||
"representative": {
|
||||
"name": "Stephen Shaw",
|
||||
"image": "stephenshaw.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1025,
|
||||
"name": "Allene Iturbide",
|
||||
"country": {
|
||||
"name": "Italy",
|
||||
"code": "it"
|
||||
},
|
||||
"company": "Ledecky, David Esq",
|
||||
"date": "2016-02-20",
|
||||
"status": "qualified",
|
||||
"activity": 1,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1026,
|
||||
"name": "Chanel Caudy",
|
||||
"country": {
|
||||
"name": "Argentina",
|
||||
"code": "ar"
|
||||
},
|
||||
"company": "Professional Image Inc",
|
||||
"date": "2018-06-24",
|
||||
"status": "new",
|
||||
"activity": 26,
|
||||
"representative": {
|
||||
"name": "Ioni Bowcher",
|
||||
"image": "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1027,
|
||||
"name": "Ezekiel Chui",
|
||||
"country": {
|
||||
"name": "Ireland",
|
||||
"code": "ie"
|
||||
},
|
||||
"company": "Sider, Donald C Esq",
|
||||
"date": "2016-09-24",
|
||||
"status": "new",
|
||||
"activity": 76,
|
||||
"representative": {
|
||||
"name": "Amy Elsner",
|
||||
"image": "amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1028,
|
||||
"name": "Willow Kusko",
|
||||
"country": {
|
||||
"name": "Romania",
|
||||
"code": "ro"
|
||||
},
|
||||
"company": "U Pull It",
|
||||
"date": "2020-04-11",
|
||||
"status": "qualified",
|
||||
"activity": 7,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1029,
|
||||
"name": "Bernardo Figeroa",
|
||||
"country": {
|
||||
"name": "Israel",
|
||||
"code": "il"
|
||||
},
|
||||
"company": "Clark, Richard Cpa",
|
||||
"date": "2018-04-11",
|
||||
"status": "renewal",
|
||||
"activity": 81,
|
||||
"representative": {
|
||||
"name": "Ioni Bowcher",
|
||||
"image": "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1030,
|
||||
"name": "Ammie Corrio",
|
||||
"country": {
|
||||
"name": "Hungary",
|
||||
"code": "hu"
|
||||
},
|
||||
"company": "Moskowitz, Barry S",
|
||||
"date": "2016-06-11",
|
||||
"status": "negotiation",
|
||||
"activity": 56,
|
||||
"representative": {
|
||||
"name": "Asiya Javayant",
|
||||
"image": "asiyajavayant.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1031,
|
||||
"name": "Francine Vocelka",
|
||||
"country": {
|
||||
"name": "Honduras",
|
||||
"code": "hn"
|
||||
},
|
||||
"company": "Cascade Realty Advisors Inc",
|
||||
"date": "2017-08-02",
|
||||
"status": "qualified",
|
||||
"activity": 94,
|
||||
"representative": {
|
||||
"name": "Ioni Bowcher",
|
||||
"image": "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1032,
|
||||
"name": "Ernie Stenseth",
|
||||
"country": {
|
||||
"name": "Australia",
|
||||
"code": "au"
|
||||
},
|
||||
"company": "Knwz Newsradio",
|
||||
"date": "2018-06-06",
|
||||
"status": "renewal",
|
||||
"activity": 68,
|
||||
"representative": {
|
||||
"name": "Xuxue Feng",
|
||||
"image": "xuxuefeng.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1033,
|
||||
"name": "Albina Glick",
|
||||
"country": {
|
||||
"name": "Ukraine",
|
||||
"code": "ua"
|
||||
},
|
||||
"company": "Giampetro, Anthony D",
|
||||
"date": "2019-08-08",
|
||||
"status": "proposal",
|
||||
"activity": 85,
|
||||
"representative": {
|
||||
"name": "Bernardo Dominic",
|
||||
"image": "bernardodominic.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1034,
|
||||
"name": "Alishia Sergi",
|
||||
"country": {
|
||||
"name": "Qatar",
|
||||
"code": "qa"
|
||||
},
|
||||
"company": "Milford Enterprises Inc",
|
||||
"date": "2018-05-19",
|
||||
"status": "negotiation",
|
||||
"activity": 46,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1035,
|
||||
"name": "Solange Shinko",
|
||||
"country": {
|
||||
"name": "Cameroon",
|
||||
"code": "cm"
|
||||
},
|
||||
"company": "Mosocco, Ronald A",
|
||||
"date": "2015-02-12",
|
||||
"status": "qualified",
|
||||
"activity": 32,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1036,
|
||||
"name": "Jose Stockham",
|
||||
"country": {
|
||||
"name": "Italy",
|
||||
"code": "it"
|
||||
},
|
||||
"company": "Tri State Refueler Co",
|
||||
"date": "2018-04-25",
|
||||
"status": "qualified",
|
||||
"activity": 77,
|
||||
"representative": {
|
||||
"name": "Amy Elsner",
|
||||
"image": "amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1037,
|
||||
"name": "Rozella Ostrosky",
|
||||
"country": {
|
||||
"name": "Venezuela",
|
||||
"code": "ve"
|
||||
},
|
||||
"company": "Parkway Company",
|
||||
"date": "2016-02-27",
|
||||
"status": "unqualified",
|
||||
"activity": 66,
|
||||
"representative": {
|
||||
"name": "Amy Elsner",
|
||||
"image": "amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1038,
|
||||
"name": "Valentine Gillian",
|
||||
"country": {
|
||||
"name": "Paraguay",
|
||||
"code": "py"
|
||||
},
|
||||
"company": "Fbs Business Finance",
|
||||
"date": "2019-09-17",
|
||||
"status": "qualified",
|
||||
"activity": 25,
|
||||
"representative": {
|
||||
"name": "Bernardo Dominic",
|
||||
"image": "bernardodominic.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1039,
|
||||
"name": "Kati Rulapaugh",
|
||||
"country": {
|
||||
"name": "Puerto Rico",
|
||||
"code": "pr"
|
||||
},
|
||||
"company": "Eder Assocs Consltng Engrs Pc",
|
||||
"date": "2016-12-03",
|
||||
"status": "renewal",
|
||||
"activity": 51,
|
||||
"representative": {
|
||||
"name": "Ioni Bowcher",
|
||||
"image": "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1040,
|
||||
"name": "Youlanda Schemmer",
|
||||
"country": {
|
||||
"name": "Bolivia",
|
||||
"code": "bo"
|
||||
},
|
||||
"company": "Tri M Tool Inc",
|
||||
"date": "2017-12-15",
|
||||
"status": "negotiation",
|
||||
"activity": 49,
|
||||
"representative": {
|
||||
"name": "Xuxue Feng",
|
||||
"image": "xuxuefeng.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1041,
|
||||
"name": "Dyan Oldroyd",
|
||||
"country": {
|
||||
"name": "Argentina",
|
||||
"code": "ar"
|
||||
},
|
||||
"company": "International Eyelets Inc",
|
||||
"date": "2017-02-02",
|
||||
"status": "qualified",
|
||||
"activity": 5,
|
||||
"representative": {
|
||||
"name": "Amy Elsner",
|
||||
"image": "amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1042,
|
||||
"name": "Roxane Campain",
|
||||
"country": {
|
||||
"name": "France",
|
||||
"code": "fr"
|
||||
},
|
||||
"company": "Rapid Trading Intl",
|
||||
"date": "2018-12-25",
|
||||
"status": "unqualified",
|
||||
"activity": 100,
|
||||
"representative": {
|
||||
"name": "Anna Fali",
|
||||
"image": "annafali.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1043,
|
||||
"name": "Lavera Perin",
|
||||
"country": {
|
||||
"name": "Vietnam",
|
||||
"code": "vn"
|
||||
},
|
||||
"company": "Abc Enterprises Inc",
|
||||
"date": "2018-04-10",
|
||||
"status": "qualified",
|
||||
"activity": 71,
|
||||
"representative": {
|
||||
"name": "Stephen Shaw",
|
||||
"image": "stephenshaw.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1044,
|
||||
"name": "Erick Ferencz",
|
||||
"country": {
|
||||
"name": "Belgium",
|
||||
"code": "be"
|
||||
},
|
||||
"company": "Cindy Turner Associates",
|
||||
"date": "2018-05-06",
|
||||
"status": "unqualified",
|
||||
"activity": 54,
|
||||
"representative": {
|
||||
"name": "Amy Elsner",
|
||||
"image": "amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1045,
|
||||
"name": "Fatima Saylors",
|
||||
"country": {
|
||||
"name": "Canada",
|
||||
"code": "ca"
|
||||
},
|
||||
"company": "Stanton, James D Esq",
|
||||
"date": "2019-07-10",
|
||||
"status": "renewal",
|
||||
"activity": 93,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1046,
|
||||
"name": "Jina Briddick",
|
||||
"country": {
|
||||
"name": "Mexico",
|
||||
"code": "mx"
|
||||
},
|
||||
"company": "Grace Pastries Inc",
|
||||
"date": "2018-02-19",
|
||||
"status": "unqualified",
|
||||
"activity": 97,
|
||||
"representative": {
|
||||
"name": "Xuxue Feng",
|
||||
"image": "xuxuefeng.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1047,
|
||||
"name": "Kanisha Waycott",
|
||||
"country": {
|
||||
"name": "Ecuador",
|
||||
"code": "ec"
|
||||
},
|
||||
"company": "Schroer, Gene E Esq",
|
||||
"date": "2019-11-27",
|
||||
"status": "new",
|
||||
"activity": 80,
|
||||
"representative": {
|
||||
"name": "Xuxue Feng",
|
||||
"image": "xuxuefeng.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1048,
|
||||
"name": "Emerson Bowley",
|
||||
"country": {
|
||||
"name": "Finland",
|
||||
"code": "fi"
|
||||
},
|
||||
"company": "Knights Inn",
|
||||
"date": "2018-11-24",
|
||||
"status": "new",
|
||||
"activity": 63,
|
||||
"representative": {
|
||||
"name": "Stephen Shaw",
|
||||
"image": "stephenshaw.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1049,
|
||||
"name": "Blair Malet",
|
||||
"country": {
|
||||
"name": "Finland",
|
||||
"code": "fi"
|
||||
},
|
||||
"company": "Bollinger Mach Shp \u0026 Shipyard",
|
||||
"date": "2018-04-19",
|
||||
"status": "new",
|
||||
"activity": 92,
|
||||
"representative": {
|
||||
"name": "Asiya Javayant",
|
||||
"image": "asiyajavayant.png"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
164
src/assets/demo/data/customers-small.json
Normal file
164
src/assets/demo/data/customers-small.json
Normal file
@ -0,0 +1,164 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": 1000,
|
||||
"name": "James Butt",
|
||||
"country": {
|
||||
"name": "Algeria",
|
||||
"code": "dz"
|
||||
},
|
||||
"company": "Benton, John B Jr",
|
||||
"date": "2015-09-13",
|
||||
"status": "unqualified",
|
||||
"activity": 17,
|
||||
"representative": {
|
||||
"name": "Ioni Bowcher",
|
||||
"image": "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1001,
|
||||
"name": "Josephine Darakjy",
|
||||
"country": {
|
||||
"name": "Egypt",
|
||||
"code": "eg"
|
||||
},
|
||||
"company": "Chanay, Jeffrey A Esq",
|
||||
"date": "2019-02-09",
|
||||
"status": "proposal",
|
||||
"activity": 0,
|
||||
"representative": {
|
||||
"name": "Amy Elsner",
|
||||
"image": "amyelsner.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1002,
|
||||
"name": "Art Venere",
|
||||
"country": {
|
||||
"name": "Panama",
|
||||
"code": "pa"
|
||||
},
|
||||
"company": "Chemel, James L Cpa",
|
||||
"date": "2017-05-13",
|
||||
"status": "qualified",
|
||||
"activity": 63,
|
||||
"representative": {
|
||||
"name": "Asiya Javayant",
|
||||
"image": "asiyajavayant.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1003,
|
||||
"name": "Lenna Paprocki",
|
||||
"country": {
|
||||
"name": "Slovenia",
|
||||
"code": "si"
|
||||
},
|
||||
"company": "Feltz Printing Service",
|
||||
"date": "2020-09-15",
|
||||
"status": "new",
|
||||
"activity": 37,
|
||||
"representative": {
|
||||
"name": "Xuxue Feng",
|
||||
"image": "xuxuefeng.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1004,
|
||||
"name": "Donette Foller",
|
||||
"country": {
|
||||
"name": "South Africa",
|
||||
"code": "za"
|
||||
},
|
||||
"company": "Printing Dimensions",
|
||||
"date": "2016-05-20",
|
||||
"status": "proposal",
|
||||
"activity": 33,
|
||||
"representative": {
|
||||
"name": "Asiya Javayant",
|
||||
"image": "asiyajavayant.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1005,
|
||||
"name": "Simona Morasca",
|
||||
"country": {
|
||||
"name": "Egypt",
|
||||
"code": "eg"
|
||||
},
|
||||
"company": "Chapman, Ross E Esq",
|
||||
"date": "2018-02-16",
|
||||
"status": "qualified",
|
||||
"activity": 68,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1006,
|
||||
"name": "Mitsue Tollner",
|
||||
"country": {
|
||||
"name": "Paraguay",
|
||||
"code": "py"
|
||||
},
|
||||
"company": "Morlong Associates",
|
||||
"date": "2018-02-19",
|
||||
"status": "renewal",
|
||||
"activity": 54,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1007,
|
||||
"name": "Leota Dilliard",
|
||||
"country": {
|
||||
"name": "Serbia",
|
||||
"code": "rs"
|
||||
},
|
||||
"company": "Commercial Press",
|
||||
"date": "2019-08-13",
|
||||
"status": "renewal",
|
||||
"activity": 69,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1008,
|
||||
"name": "Sage Wieser",
|
||||
"country": {
|
||||
"name": "Egypt",
|
||||
"code": "eg"
|
||||
},
|
||||
"company": "Truhlar And Truhlar Attys",
|
||||
"date": "2018-11-21",
|
||||
"status": "unqualified",
|
||||
"activity": 76,
|
||||
"representative": {
|
||||
"name": "Ivan Magalhaes",
|
||||
"image": "ivanmagalhaes.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1009,
|
||||
"name": "Kris Marrier",
|
||||
"country": {
|
||||
"name": "Mexico",
|
||||
"code": "mx"
|
||||
},
|
||||
"company": "King, Christopher A Esq",
|
||||
"date": "2015-07-07",
|
||||
"status": "proposal",
|
||||
"activity": 3,
|
||||
"representative": {
|
||||
"name": "Onyama Limba",
|
||||
"image": "onyamalimba.png"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
26
src/assets/demo/data/files-lazy.json
Executable file
26
src/assets/demo/data/files-lazy.json
Executable file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"data":
|
||||
[
|
||||
{
|
||||
"label": "Lazy Node 0",
|
||||
"data": "Node 0",
|
||||
"expandedIcon": "pi pi-folder-open",
|
||||
"collapsedIcon": "pi pi-folder",
|
||||
"leaf": false
|
||||
},
|
||||
{
|
||||
"label": "Lazy Node 1",
|
||||
"data": "Node 1",
|
||||
"expandedIcon": "pi pi-folder-open",
|
||||
"collapsedIcon": "pi pi-folder",
|
||||
"leaf": false
|
||||
},
|
||||
{
|
||||
"label": "Lazy Node 1",
|
||||
"data": "Node 2",
|
||||
"expandedIcon": "pi pi-folder-open",
|
||||
"collapsedIcon": "pi pi-folder",
|
||||
"leaf": false
|
||||
}
|
||||
]
|
||||
}
|
||||
54
src/assets/demo/data/files.json
Executable file
54
src/assets/demo/data/files.json
Executable file
@ -0,0 +1,54 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"key": "0",
|
||||
"label": "Documents",
|
||||
"data": "Documents Folder",
|
||||
"icon": "pi pi-fw pi-inbox",
|
||||
"children": [{
|
||||
"key": "0-0",
|
||||
"label": "Work",
|
||||
"data": "Work Folder",
|
||||
"icon": "pi pi-fw pi-cog",
|
||||
"children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
|
||||
},
|
||||
{
|
||||
"key": "0-1",
|
||||
"label": "Home",
|
||||
"data": "Home Folder",
|
||||
"icon": "pi pi-fw pi-home",
|
||||
"children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
|
||||
}]
|
||||
},
|
||||
{
|
||||
"key": "1",
|
||||
"label": "Events",
|
||||
"data": "Events Folder",
|
||||
"icon": "pi pi-fw pi-calendar",
|
||||
"children": [
|
||||
{ "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
|
||||
{ "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
|
||||
{ "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
|
||||
},
|
||||
{
|
||||
"key": "2",
|
||||
"label": "Movies",
|
||||
"data": "Movies Folder",
|
||||
"icon": "pi pi-fw pi-star",
|
||||
"children": [{
|
||||
"key": "2-0",
|
||||
"icon": "pi pi-fw pi-star",
|
||||
"label": "Al Pacino",
|
||||
"data": "Pacino Movies",
|
||||
"children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
|
||||
},
|
||||
{
|
||||
"key": "2-1",
|
||||
"label": "Robert De Niro",
|
||||
"icon": "pi pi-fw pi-star",
|
||||
"data": "De Niro Movies",
|
||||
"children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
21
src/assets/demo/data/filesystem-lazy.json
Executable file
21
src/assets/demo/data/filesystem-lazy.json
Executable file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"data":
|
||||
[
|
||||
{
|
||||
"data":{
|
||||
"name":"Lazy Folder 0",
|
||||
"size":"75kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"leaf": false
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Lazy Folder 1",
|
||||
"size":"150kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"leaf": false
|
||||
}
|
||||
]
|
||||
}
|
||||
313
src/assets/demo/data/filesystem.json
Executable file
313
src/assets/demo/data/filesystem.json
Executable file
@ -0,0 +1,313 @@
|
||||
{
|
||||
"data":
|
||||
[
|
||||
{
|
||||
"data":{
|
||||
"name":"Applications",
|
||||
"size":"200mb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"Angular",
|
||||
"size":"25mb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"angular.app",
|
||||
"size":"10mb",
|
||||
"type":"Application"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"cli.app",
|
||||
"size":"10mb",
|
||||
"type":"Application"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"mobile.app",
|
||||
"size":"5mb",
|
||||
"type":"Application"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"editor.app",
|
||||
"size":"25mb",
|
||||
"type":"Application"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"settings.app",
|
||||
"size":"50mb",
|
||||
"type":"Application"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Cloud",
|
||||
"size":"20mb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"backup-1.zip",
|
||||
"size":"10mb",
|
||||
"type":"Zip"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"backup-2.zip",
|
||||
"size":"10mb",
|
||||
"type":"Zip"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"name":"Desktop",
|
||||
"size":"150kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"note-meeting.txt",
|
||||
"size":"50kb",
|
||||
"type":"Text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"note-todo.txt",
|
||||
"size":"100kb",
|
||||
"type":"Text"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Documents",
|
||||
"size":"75kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"Work",
|
||||
"size":"55kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"Expenses.doc",
|
||||
"size":"30kb",
|
||||
"type":"Document"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Resume.doc",
|
||||
"size":"25kb",
|
||||
"type":"Resume"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Home",
|
||||
"size":"20kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"Invoices",
|
||||
"size":"20kb",
|
||||
"type":"Text"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"name":"Downloads",
|
||||
"size":"25mb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data": {
|
||||
"name":"Spanish",
|
||||
"size":"10mb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"tutorial-a1.txt",
|
||||
"size":"5mb",
|
||||
"type":"Text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"tutorial-a2.txt",
|
||||
"size":"5mb",
|
||||
"type":"Text"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Travel",
|
||||
"size":"15mb",
|
||||
"type":"Text"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"Hotel.pdf",
|
||||
"size":"10mb",
|
||||
"type":"PDF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Flight.pdf",
|
||||
"size":"5mb",
|
||||
"type":"PDF"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"name":"Main",
|
||||
"size":"50mb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"bin",
|
||||
"size":"50kb",
|
||||
"type":"Link"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"etc",
|
||||
"size":"100kb",
|
||||
"type":"Link"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"var",
|
||||
"size":"100kb",
|
||||
"type":"Link"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Other",
|
||||
"size":"5mb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"todo.txt",
|
||||
"size":"3mb",
|
||||
"type":"Text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"logo.png",
|
||||
"size":"2mb",
|
||||
"type":"Picture"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Pictures",
|
||||
"size":"150kb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"barcelona.jpg",
|
||||
"size":"90kb",
|
||||
"type":"Picture"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"primeng.png",
|
||||
"size":"30kb",
|
||||
"type":"Picture"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"prime.jpg",
|
||||
"size":"30kb",
|
||||
"type":"Picture"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"Videos",
|
||||
"size":"1500mb",
|
||||
"type":"Folder"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"data":{
|
||||
"name":"primefaces.mkv",
|
||||
"size":"1000mb",
|
||||
"type":"Video"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data":{
|
||||
"name":"intro.avi",
|
||||
"size":"500mb",
|
||||
"type":"Video"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
1
src/assets/demo/data/icons.json
Normal file
1
src/assets/demo/data/icons.json
Normal file
File diff suppressed because one or more lines are too long
94
src/assets/demo/data/photos.json
Normal file
94
src/assets/demo/data/photos.json
Normal file
@ -0,0 +1,94 @@
|
||||
{
|
||||
"data":[
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria1.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria1s.jpg",
|
||||
"alt": "Description for Image 1",
|
||||
"title": "Title 1"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria2.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria2s.jpg",
|
||||
"alt": "Description for Image 2",
|
||||
"title": "Title 2"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria3.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria3s.jpg",
|
||||
"alt": "Description for Image 3",
|
||||
"title": "Title 3"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria4.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria4s.jpg",
|
||||
"alt": "Description for Image 4",
|
||||
"title": "Title 4"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria5.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria5s.jpg",
|
||||
"alt": "Description for Image 5",
|
||||
"title": "Title 5"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria6.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria6s.jpg",
|
||||
"alt": "Description for Image 6",
|
||||
"title": "Title 6"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria7.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria7s.jpg",
|
||||
"alt": "Description for Image 7",
|
||||
"title": "Title 7"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria8.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria8s.jpg",
|
||||
"alt": "Description for Image 8",
|
||||
"title": "Title 8"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria9.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria9s.jpg",
|
||||
"alt": "Description for Image 9",
|
||||
"title": "Title 9"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria10.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria10s.jpg",
|
||||
"alt": "Description for Image 10",
|
||||
"title": "Title 10"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria11.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria11s.jpg",
|
||||
"alt": "Description for Image 11",
|
||||
"title": "Title 11"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria12.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria12s.jpg",
|
||||
"alt": "Description for Image 12",
|
||||
"title": "Title 12"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria13.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria13s.jpg",
|
||||
"alt": "Description for Image 13",
|
||||
"title": "Title 13"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria14.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria14s.jpg",
|
||||
"alt": "Description for Image 14",
|
||||
"title": "Title 14"
|
||||
},
|
||||
{
|
||||
"itemImageSrc": "assets/demo/images/galleria/galleria15.jpg",
|
||||
"thumbnailImageSrc": "assets/demo/images/galleria/galleria15s.jpg",
|
||||
"alt": "Description for Image 15",
|
||||
"title": "Title 15"
|
||||
}
|
||||
]
|
||||
}
|
||||
364
src/assets/demo/data/products-mixed.json
Normal file
364
src/assets/demo/data/products-mixed.json
Normal file
@ -0,0 +1,364 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": "1007",
|
||||
"code": "mbvjkgip5",
|
||||
"name": "Galaxy Earrings",
|
||||
"description": "Product Description",
|
||||
"image": "galaxy-earrings.jpg",
|
||||
"price": 34,
|
||||
"category": "Accessories",
|
||||
"quantity": 23,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1024",
|
||||
"code": "lm2tny2k4",
|
||||
"name": "Shoes",
|
||||
"description": "Product Description",
|
||||
"image": "shoes.jpg",
|
||||
"price": 64,
|
||||
"category": "Clothing",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1016",
|
||||
"code": "k8l6j58jl",
|
||||
"name": "Lime Band",
|
||||
"description": "Product Description",
|
||||
"image": "lime-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 12,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1009",
|
||||
"code": "cm230f032",
|
||||
"name": "Gaming Set",
|
||||
"description": "Product Description",
|
||||
"image": "gaming-set.jpg",
|
||||
"price": 299,
|
||||
"category": "Electronics",
|
||||
"quantity": 63,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1002",
|
||||
"code": "zz21cz3c1",
|
||||
"name": "Blue Band",
|
||||
"description": "Product Description",
|
||||
"image": "blue-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1001",
|
||||
"code": "nvklal433",
|
||||
"name": "Black Watch",
|
||||
"description": "Product Description",
|
||||
"image": "black-watch.jpg",
|
||||
"price": 72,
|
||||
"category": "Accessories",
|
||||
"quantity": 61,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1003",
|
||||
"code": "244wgerg2",
|
||||
"name": "Blue T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "blue-t-shirt.jpg",
|
||||
"price": 29,
|
||||
"category": "Clothing",
|
||||
"quantity": 25,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1019",
|
||||
"code": "mnb5mb2m5",
|
||||
"name": "Pink Band",
|
||||
"description": "Product Description",
|
||||
"image": "pink-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 63,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1006",
|
||||
"code": "bib36pfvm",
|
||||
"name": "Chakra Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "chakra-bracelet.jpg",
|
||||
"price": 32,
|
||||
"category": "Accessories",
|
||||
"quantity": 5,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1025",
|
||||
"code": "nbm5mv45n",
|
||||
"name": "Sneakers",
|
||||
"description": "Product Description",
|
||||
"image": "sneakers.jpg",
|
||||
"price": 78,
|
||||
"category": "Clothing",
|
||||
"quantity": 52,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1008",
|
||||
"code": "vbb124btr",
|
||||
"name": "Game Controller",
|
||||
"description": "Product Description",
|
||||
"image": "game-controller.jpg",
|
||||
"price": 99,
|
||||
"category": "Electronics",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1010",
|
||||
"code": "plb34234v",
|
||||
"name": "Gold Phone Case",
|
||||
"description": "Product Description",
|
||||
"image": "gold-phone-case.jpg",
|
||||
"price": 24,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1011",
|
||||
"code": "4920nnc2d",
|
||||
"name": "Green Earbuds",
|
||||
"description": "Product Description",
|
||||
"image": "green-earbuds.jpg",
|
||||
"price": 89,
|
||||
"category": "Electronics",
|
||||
"quantity": 23,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1015",
|
||||
"code": "vb34btbg5",
|
||||
"name": "Light Green T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "light-green-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 34,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1012",
|
||||
"code": "250vm23cc",
|
||||
"name": "Green T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "green-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 74,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1014",
|
||||
"code": "waas1x2as",
|
||||
"name": "Headphones",
|
||||
"description": "Product Description",
|
||||
"image": "headphones.jpg",
|
||||
"price": 175,
|
||||
"category": "Electronics",
|
||||
"quantity": 8,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1017",
|
||||
"code": "v435nn85n",
|
||||
"name": "Mini Speakers",
|
||||
"description": "Product Description",
|
||||
"image": "mini-speakers.jpg",
|
||||
"price": 85,
|
||||
"category": "Clothing",
|
||||
"quantity": 42,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1005",
|
||||
"code": "av2231fwg",
|
||||
"name": "Brown Purse",
|
||||
"description": "Product Description",
|
||||
"image": "brown-purse.jpg",
|
||||
"price": 120,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1018",
|
||||
"code": "09zx9c0zc",
|
||||
"name": "Painted Phone Case",
|
||||
"description": "Product Description",
|
||||
"image": "painted-phone-case.jpg",
|
||||
"price": 56,
|
||||
"category": "Accessories",
|
||||
"quantity": 41,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1020",
|
||||
"code": "r23fwf2w3",
|
||||
"name": "Pink Purse",
|
||||
"description": "Product Description",
|
||||
"image": "pink-purse.jpg",
|
||||
"price": 110,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1021",
|
||||
"code": "pxpzczo23",
|
||||
"name": "Purple Band",
|
||||
"description": "Product Description",
|
||||
"image": "purple-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 6,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1022",
|
||||
"code": "2c42cb5cb",
|
||||
"name": "Purple Gemstone Necklace",
|
||||
"description": "Product Description",
|
||||
"image": "purple-gemstone-necklace.jpg",
|
||||
"price": 45,
|
||||
"category": "Accessories",
|
||||
"quantity": 62,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1023",
|
||||
"code": "5k43kkk23",
|
||||
"name": "Purple T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "purple-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1028",
|
||||
"code": "tx125ck42",
|
||||
"name": "Yoga Mat",
|
||||
"description": "Product Description",
|
||||
"image": "yoga-mat.jpg",
|
||||
"price": 20,
|
||||
"category": "Fitness",
|
||||
"quantity": 15,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1027",
|
||||
"code": "acvx872gc",
|
||||
"name": "Yellow Earbuds",
|
||||
"description": "Product Description",
|
||||
"image": "yellow-earbuds.jpg",
|
||||
"price": 89,
|
||||
"category": "Electronics",
|
||||
"quantity": 35,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1000",
|
||||
"code": "f230fh0g3",
|
||||
"name": "Bamboo Watch",
|
||||
"description": "Product Description",
|
||||
"image": "bamboo-watch.jpg",
|
||||
"price": 65,
|
||||
"category": "Accessories",
|
||||
"quantity": 24,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1013",
|
||||
"code": "fldsmn31b",
|
||||
"name": "Grey T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "grey-t-shirt.jpg",
|
||||
"price": 48,
|
||||
"category": "Clothing",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1026",
|
||||
"code": "zx23zc42c",
|
||||
"name": "Teal T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "teal-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 3,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1004",
|
||||
"code": "h456wer53",
|
||||
"name": "Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "bracelet.jpg",
|
||||
"price": 15,
|
||||
"category": "Accessories",
|
||||
"quantity": 73,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1029",
|
||||
"code": "gwuby345v",
|
||||
"name": "Yoga Set",
|
||||
"description": "Product Description",
|
||||
"image": "yoga-set.jpg",
|
||||
"price": 20,
|
||||
"category": "Fitness",
|
||||
"quantity": 25,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 8
|
||||
}
|
||||
]
|
||||
}
|
||||
341
src/assets/demo/data/products-orders-small.json
Normal file
341
src/assets/demo/data/products-orders-small.json
Normal file
@ -0,0 +1,341 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": "1000",
|
||||
"code": "f230fh0g3",
|
||||
"name": "Bamboo Watch",
|
||||
"description": "Product Description",
|
||||
"image": "bamboo-watch.jpg",
|
||||
"price": 65,
|
||||
"category": "Accessories",
|
||||
"quantity": 24,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1000",
|
||||
"productCode": "f230fh0g3",
|
||||
"date": "2020-09-13",
|
||||
"amount": 65,
|
||||
"quantity": 1,
|
||||
"customer": "David James",
|
||||
"status": "PENDING"
|
||||
},
|
||||
{
|
||||
"id": "1001",
|
||||
"productCode": "f230fh0g3",
|
||||
"date": "2020-05-14",
|
||||
"amount": 130,
|
||||
"quantity": 2,
|
||||
"customer": "Leon Rodrigues",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1002",
|
||||
"productCode": "f230fh0g3",
|
||||
"date": "2019-01-04",
|
||||
"amount": 65,
|
||||
"quantity": 1,
|
||||
"customer": "Juan Alejandro",
|
||||
"status": "RETURNED"
|
||||
},
|
||||
{
|
||||
"id": "1003",
|
||||
"productCode": "f230fh0g3",
|
||||
"date": "2020-09-13",
|
||||
"amount": 195,
|
||||
"quantity": 3,
|
||||
"customer": "Claire Morrow",
|
||||
"status": "CANCELLED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1001",
|
||||
"code": "nvklal433",
|
||||
"name": "Black Watch",
|
||||
"description": "Product Description",
|
||||
"image": "black-watch.jpg",
|
||||
"price": 72,
|
||||
"category": "Accessories",
|
||||
"quantity": 61,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "2000",
|
||||
"productCode": "nvklal433",
|
||||
"date": "2020-05-14",
|
||||
"amount": 72,
|
||||
"quantity": 1,
|
||||
"customer": "Maisha Jefferson",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "2001",
|
||||
"productCode": "nvklal433",
|
||||
"date": "2020-02-28",
|
||||
"amount": 144,
|
||||
"quantity": 2,
|
||||
"customer": "Octavia Murillo",
|
||||
"status": "PENDING"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1002",
|
||||
"code": "zz21cz3c1",
|
||||
"name": "Blue Band",
|
||||
"description": "Product Description",
|
||||
"image": "blue-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "3000",
|
||||
"productCode": "zz21cz3c1",
|
||||
"date": "2020-07-05",
|
||||
"amount": 79,
|
||||
"quantity": 1,
|
||||
"customer": "Stacey Leja",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "3001",
|
||||
"productCode": "zz21cz3c1",
|
||||
"date": "2020-02-06",
|
||||
"amount": 79,
|
||||
"quantity": 1,
|
||||
"customer": "Ashley Wickens",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1003",
|
||||
"code": "244wgerg2",
|
||||
"name": "Blue T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "blue-t-shirt.jpg",
|
||||
"price": 29,
|
||||
"category": "Clothing",
|
||||
"quantity": 25,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": []
|
||||
},
|
||||
{
|
||||
"id": "1004",
|
||||
"code": "h456wer53",
|
||||
"name": "Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "bracelet.jpg",
|
||||
"price": 15,
|
||||
"category": "Accessories",
|
||||
"quantity": 73,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "5000",
|
||||
"productCode": "h456wer53",
|
||||
"date": "2020-09-05",
|
||||
"amount": 60,
|
||||
"quantity": 4,
|
||||
"customer": "Mayumi Misaki",
|
||||
"status": "PENDING"
|
||||
},
|
||||
{
|
||||
"id": "5001",
|
||||
"productCode": "h456wer53",
|
||||
"date": "2019-04-16",
|
||||
"amount": 2,
|
||||
"quantity": 30,
|
||||
"customer": "Francesco Salvatore",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1005",
|
||||
"code": "av2231fwg",
|
||||
"name": "Brown Purse",
|
||||
"description": "Product Description",
|
||||
"image": "brown-purse.jpg",
|
||||
"price": 120,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "6000",
|
||||
"productCode": "av2231fwg",
|
||||
"date": "2020-01-25",
|
||||
"amount": 120,
|
||||
"quantity": 1,
|
||||
"customer": "Isabel Sinclair",
|
||||
"status": "RETURNED"
|
||||
},
|
||||
{
|
||||
"id": "6001",
|
||||
"productCode": "av2231fwg",
|
||||
"date": "2019-03-12",
|
||||
"amount": 240,
|
||||
"quantity": 2,
|
||||
"customer": "Lionel Clifford",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "6002",
|
||||
"productCode": "av2231fwg",
|
||||
"date": "2019-05-05",
|
||||
"amount": 120,
|
||||
"quantity": 1,
|
||||
"customer": "Cody Chavez",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1006",
|
||||
"code": "bib36pfvm",
|
||||
"name": "Chakra Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "chakra-bracelet.jpg",
|
||||
"price": 32,
|
||||
"category": "Accessories",
|
||||
"quantity": 5,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "7000",
|
||||
"productCode": "bib36pfvm",
|
||||
"date": "2020-02-24",
|
||||
"amount": 32,
|
||||
"quantity": 1,
|
||||
"customer": "Arvin Darci",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "7001",
|
||||
"productCode": "bib36pfvm",
|
||||
"date": "2020-01-14",
|
||||
"amount": 64,
|
||||
"quantity": 2,
|
||||
"customer": "Izzy Jones",
|
||||
"status": "PENDING"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1007",
|
||||
"code": "mbvjkgip5",
|
||||
"name": "Galaxy Earrings",
|
||||
"description": "Product Description",
|
||||
"image": "galaxy-earrings.jpg",
|
||||
"price": 34,
|
||||
"category": "Accessories",
|
||||
"quantity": 23,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": [
|
||||
{
|
||||
"id": "8000",
|
||||
"productCode": "mbvjkgip5",
|
||||
"date": "2020-06-19",
|
||||
"amount": 34,
|
||||
"quantity": 1,
|
||||
"customer": "Jennifer Smith",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1008",
|
||||
"code": "vbb124btr",
|
||||
"name": "Game Controller",
|
||||
"description": "Product Description",
|
||||
"image": "game-controller.jpg",
|
||||
"price": 99,
|
||||
"category": "Electronics",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "9000",
|
||||
"productCode": "vbb124btr",
|
||||
"date": "2020-01-05",
|
||||
"amount": 99,
|
||||
"quantity": 1,
|
||||
"customer": "Jeanfrancois David",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "9001",
|
||||
"productCode": "vbb124btr",
|
||||
"date": "2020-01-19",
|
||||
"amount": 198,
|
||||
"quantity": 2,
|
||||
"customer": "Ivar Greenwood",
|
||||
"status": "RETURNED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1009",
|
||||
"code": "cm230f032",
|
||||
"name": "Gaming Set",
|
||||
"description": "Product Description",
|
||||
"image": "gaming-set.jpg",
|
||||
"price": 299,
|
||||
"category": "Electronics",
|
||||
"quantity": 63,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "10000",
|
||||
"productCode": "cm230f032",
|
||||
"date": "2020-06-24",
|
||||
"amount": 299,
|
||||
"quantity": 1,
|
||||
"customer": "Kadeem Mujtaba",
|
||||
"status": "PENDING"
|
||||
},
|
||||
{
|
||||
"id": "10001",
|
||||
"productCode": "cm230f032",
|
||||
"date": "2020-05-11",
|
||||
"amount": 299,
|
||||
"quantity": 1,
|
||||
"customer": "Ashley Wickens",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "10002",
|
||||
"productCode": "cm230f032",
|
||||
"date": "2019-02-07",
|
||||
"amount": 299,
|
||||
"quantity": 1,
|
||||
"customer": "Julie Johnson",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "10003",
|
||||
"productCode": "cm230f032",
|
||||
"date": "2020-04-26",
|
||||
"amount": 299,
|
||||
"quantity": 1,
|
||||
"customer": "Tony Costa",
|
||||
"status": "CANCELLED"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
833
src/assets/demo/data/products-orders.json
Normal file
833
src/assets/demo/data/products-orders.json
Normal file
@ -0,0 +1,833 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": "1000",
|
||||
"code": "f230fh0g3",
|
||||
"name": "Bamboo Watch",
|
||||
"description": "Product Description",
|
||||
"image": "bamboo-watch.jpg",
|
||||
"price": 65,
|
||||
"category": "Accessories",
|
||||
"quantity": 24,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1000-0",
|
||||
"productCode": "f230fh0g3",
|
||||
"date": "2020-09-13",
|
||||
"amount": 65,
|
||||
"quantity": 1,
|
||||
"customer": "David James",
|
||||
"status": "PENDING"
|
||||
},
|
||||
{
|
||||
"id": "1001-1",
|
||||
"productCode": "f230fh0g3",
|
||||
"date": "2020-05-14",
|
||||
"amount": 130,
|
||||
"quantity": 2,
|
||||
"customer": "Leon Rodrigues",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1002-2",
|
||||
"productCode": "f230fh0g3",
|
||||
"date": "2019-01-04",
|
||||
"amount": 65,
|
||||
"quantity": 1,
|
||||
"customer": "Juan Alejandro",
|
||||
"status": "RETURNED"
|
||||
},
|
||||
{
|
||||
"id": "1003-3",
|
||||
"productCode": "f230fh0g3",
|
||||
"date": "2020-09-13",
|
||||
"amount": 195,
|
||||
"quantity": 3,
|
||||
"customer": "Claire Morrow",
|
||||
"status": "CANCELLED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1001",
|
||||
"code": "nvklal433",
|
||||
"name": "Black Watch",
|
||||
"description": "Product Description",
|
||||
"image": "black-watch.jpg",
|
||||
"price": 72,
|
||||
"category": "Accessories",
|
||||
"quantity": 61,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1001-0",
|
||||
"productCode": "nvklal433",
|
||||
"date": "2020-05-14",
|
||||
"amount": 72,
|
||||
"quantity": 1,
|
||||
"customer": "Maisha Jefferson",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1001-1",
|
||||
"productCode": "nvklal433",
|
||||
"date": "2020-02-28",
|
||||
"amount": 144,
|
||||
"quantity": 2,
|
||||
"customer": "Octavia Murillo",
|
||||
"status": "PENDING"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1002",
|
||||
"code": "zz21cz3c1",
|
||||
"name": "Blue Band",
|
||||
"description": "Product Description",
|
||||
"image": "blue-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1002-0",
|
||||
"productCode": "zz21cz3c1",
|
||||
"date": "2020-07-05",
|
||||
"amount": 79,
|
||||
"quantity": 1,
|
||||
"customer": "Stacey Leja",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1002-1",
|
||||
"productCode": "zz21cz3c1",
|
||||
"date": "2020-02-06",
|
||||
"amount": 79,
|
||||
"quantity": 1,
|
||||
"customer": "Ashley Wickens",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1003",
|
||||
"code": "244wgerg2",
|
||||
"name": "Blue T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "blue-t-shirt.jpg",
|
||||
"price": 29,
|
||||
"category": "Clothing",
|
||||
"quantity": 25,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": []
|
||||
},
|
||||
{
|
||||
"id": "1004",
|
||||
"code": "h456wer53",
|
||||
"name": "Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "bracelet.jpg",
|
||||
"price": 15,
|
||||
"category": "Accessories",
|
||||
"quantity": 73,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1004-0",
|
||||
"productCode": "h456wer53",
|
||||
"date": "2020-09-05",
|
||||
"amount": 60,
|
||||
"quantity": 4,
|
||||
"customer": "Mayumi Misaki",
|
||||
"status": "PENDING"
|
||||
},
|
||||
{
|
||||
"id": "1004-5",
|
||||
"productCode": "h456wer53",
|
||||
"date": "2019-04-16",
|
||||
"amount": 2,
|
||||
"quantity": 30,
|
||||
"customer": "Francesco Salvatore",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1005",
|
||||
"code": "av2231fwg",
|
||||
"name": "Brown Purse",
|
||||
"description": "Product Description",
|
||||
"image": "brown-purse.jpg",
|
||||
"price": 120,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1005-0",
|
||||
"productCode": "av2231fwg",
|
||||
"date": "2020-01-25",
|
||||
"amount": 120,
|
||||
"quantity": 1,
|
||||
"customer": "Isabel Sinclair",
|
||||
"status": "RETURNED"
|
||||
},
|
||||
{
|
||||
"id": "1005-1",
|
||||
"productCode": "av2231fwg",
|
||||
"date": "2019-03-12",
|
||||
"amount": 240,
|
||||
"quantity": 2,
|
||||
"customer": "Lionel Clifford",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1005-2",
|
||||
"productCode": "av2231fwg",
|
||||
"date": "2019-05-05",
|
||||
"amount": 120,
|
||||
"quantity": 1,
|
||||
"customer": "Cody Chavez",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1006",
|
||||
"code": "bib36pfvm",
|
||||
"name": "Chakra Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "chakra-bracelet.jpg",
|
||||
"price": 32,
|
||||
"category": "Accessories",
|
||||
"quantity": 5,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1006-0",
|
||||
"productCode": "bib36pfvm",
|
||||
"date": "2020-02-24",
|
||||
"amount": 32,
|
||||
"quantity": 1,
|
||||
"customer": "Arvin Darci",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1006-1",
|
||||
"productCode": "bib36pfvm",
|
||||
"date": "2020-01-14",
|
||||
"amount": 64,
|
||||
"quantity": 2,
|
||||
"customer": "Izzy Jones",
|
||||
"status": "PENDING"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1007",
|
||||
"code": "mbvjkgip5",
|
||||
"name": "Galaxy Earrings",
|
||||
"description": "Product Description",
|
||||
"image": "galaxy-earrings.jpg",
|
||||
"price": 34,
|
||||
"category": "Accessories",
|
||||
"quantity": 23,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1007-0",
|
||||
"productCode": "mbvjkgip5",
|
||||
"date": "2020-06-19",
|
||||
"amount": 34,
|
||||
"quantity": 1,
|
||||
"customer": "Jennifer Smith",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1008",
|
||||
"code": "vbb124btr",
|
||||
"name": "Game Controller",
|
||||
"description": "Product Description",
|
||||
"image": "game-controller.jpg",
|
||||
"price": 99,
|
||||
"category": "Electronics",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1008-0",
|
||||
"productCode": "vbb124btr",
|
||||
"date": "2020-01-05",
|
||||
"amount": 99,
|
||||
"quantity": 1,
|
||||
"customer": "Jeanfrancois David",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1008-1",
|
||||
"productCode": "vbb124btr",
|
||||
"date": "2020-01-19",
|
||||
"amount": 198,
|
||||
"quantity": 2,
|
||||
"customer": "Ivar Greenwood",
|
||||
"status": "RETURNED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1009",
|
||||
"code": "cm230f032",
|
||||
"name": "Gaming Set",
|
||||
"description": "Product Description",
|
||||
"image": "gaming-set.jpg",
|
||||
"price": 299,
|
||||
"category": "Electronics",
|
||||
"quantity": 63,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1009-0",
|
||||
"productCode": "cm230f032",
|
||||
"date": "2020-06-24",
|
||||
"amount": 299,
|
||||
"quantity": 1,
|
||||
"customer": "Kadeem Mujtaba",
|
||||
"status": "PENDING"
|
||||
},
|
||||
{
|
||||
"id": "1009-1",
|
||||
"productCode": "cm230f032",
|
||||
"date": "2020-05-11",
|
||||
"amount": 299,
|
||||
"quantity": 1,
|
||||
"customer": "Ashley Wickens",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1009-2",
|
||||
"productCode": "cm230f032",
|
||||
"date": "2019-02-07",
|
||||
"amount": 299,
|
||||
"quantity": 1,
|
||||
"customer": "Julie Johnson",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1009-3",
|
||||
"productCode": "cm230f032",
|
||||
"date": "2020-04-26",
|
||||
"amount": 299,
|
||||
"quantity": 1,
|
||||
"customer": "Tony Costa",
|
||||
"status": "CANCELLED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1010",
|
||||
"code": "plb34234v",
|
||||
"name": "Gold Phone Case",
|
||||
"description": "Product Description",
|
||||
"image": "gold-phone-case.jpg",
|
||||
"price": 24,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1010-0",
|
||||
"productCode": "plb34234v",
|
||||
"date": "2020-02-04",
|
||||
"amount": 24,
|
||||
"quantity": 1,
|
||||
"customer": "James Butt",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1010-1",
|
||||
"productCode": "plb34234v",
|
||||
"date": "2020-05-05",
|
||||
"amount": 48,
|
||||
"quantity": 2,
|
||||
"customer": "Josephine Darakjy",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1011",
|
||||
"code": "4920nnc2d",
|
||||
"name": "Green Earbuds",
|
||||
"description": "Product Description",
|
||||
"image": "green-earbuds.jpg",
|
||||
"price": 89,
|
||||
"category": "Electronics",
|
||||
"quantity": 23,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1011-0",
|
||||
"productCode": "4920nnc2d",
|
||||
"date": "2020-06-01",
|
||||
"amount": 89,
|
||||
"quantity": 1,
|
||||
"customer": "Art Venere",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1012",
|
||||
"code": "250vm23cc",
|
||||
"name": "Green T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "green-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 74,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1012-0",
|
||||
"productCode": "250vm23cc",
|
||||
"date": "2020-02-05",
|
||||
"amount": 49,
|
||||
"quantity": 1,
|
||||
"customer": "Lenna Paprocki",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1012-1",
|
||||
"productCode": "250vm23cc",
|
||||
"date": "2020-02-15",
|
||||
"amount": 49,
|
||||
"quantity": 1,
|
||||
"customer": "Donette Foller",
|
||||
"status": "PENDING"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1013",
|
||||
"code": "fldsmn31b",
|
||||
"name": "Grey T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "grey-t-shirt.jpg",
|
||||
"price": 48,
|
||||
"category": "Clothing",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1013-0",
|
||||
"productCode": "fldsmn31b",
|
||||
"date": "2020-04-01",
|
||||
"amount": 48,
|
||||
"quantity": 1,
|
||||
"customer": "Simona Morasca",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1014",
|
||||
"code": "waas1x2as",
|
||||
"name": "Headphones",
|
||||
"description": "Product Description",
|
||||
"image": "headphones.jpg",
|
||||
"price": 175,
|
||||
"category": "Electronics",
|
||||
"quantity": 8,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 5,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1014-0",
|
||||
"productCode": "waas1x2as",
|
||||
"date": "2020-05-15",
|
||||
"amount": 175,
|
||||
"quantity": 1,
|
||||
"customer": "Lenna Paprocki",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1014-1",
|
||||
"productCode": "waas1x2as",
|
||||
"date": "2020-01-02",
|
||||
"amount": 175,
|
||||
"quantity": 1,
|
||||
"customer": "Donette Foller",
|
||||
"status": "CANCELLED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1015",
|
||||
"code": "vb34btbg5",
|
||||
"name": "Light Green T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "light-green-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 34,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1015-0",
|
||||
"productCode": "vb34btbg5",
|
||||
"date": "2020-07-02",
|
||||
"amount": 98,
|
||||
"quantity": 2,
|
||||
"customer": "Mitsue Tollner",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1016",
|
||||
"code": "k8l6j58jl",
|
||||
"name": "Lime Band",
|
||||
"description": "Product Description",
|
||||
"image": "lime-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 12,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3,
|
||||
"orders": []
|
||||
},
|
||||
{
|
||||
"id": "1017",
|
||||
"code": "v435nn85n",
|
||||
"name": "Mini Speakers",
|
||||
"description": "Product Description",
|
||||
"image": "mini-speakers.jpg",
|
||||
"price": 85,
|
||||
"category": "Clothing",
|
||||
"quantity": 42,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1017-0",
|
||||
"productCode": "v435nn85n",
|
||||
"date": "2020-07-12",
|
||||
"amount": 85,
|
||||
"quantity": 1,
|
||||
"customer": "Minna Amigon",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1018",
|
||||
"code": "09zx9c0zc",
|
||||
"name": "Painted Phone Case",
|
||||
"description": "Product Description",
|
||||
"image": "painted-phone-case.jpg",
|
||||
"price": 56,
|
||||
"category": "Accessories",
|
||||
"quantity": 41,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1018-0",
|
||||
"productCode": "09zx9c0zc",
|
||||
"date": "2020-07-01",
|
||||
"amount": 56,
|
||||
"quantity": 1,
|
||||
"customer": "Abel Maclead",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1018-1",
|
||||
"productCode": "09zx9c0zc",
|
||||
"date": "2020-05-02",
|
||||
"amount": 56,
|
||||
"quantity": 1,
|
||||
"customer": "Minna Amigon",
|
||||
"status": "RETURNED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1019",
|
||||
"code": "mnb5mb2m5",
|
||||
"name": "Pink Band",
|
||||
"description": "Product Description",
|
||||
"image": "pink-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 63,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": []
|
||||
},
|
||||
{
|
||||
"id": "1020",
|
||||
"code": "r23fwf2w3",
|
||||
"name": "Pink Purse",
|
||||
"description": "Product Description",
|
||||
"image": "pink-purse.jpg",
|
||||
"price": 110,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1020-0",
|
||||
"productCode": "r23fwf2w3",
|
||||
"date": "2020-05-29",
|
||||
"amount": 110,
|
||||
"quantity": 1,
|
||||
"customer": "Kiley Caldarera",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1020-1",
|
||||
"productCode": "r23fwf2w3",
|
||||
"date": "2020-02-11",
|
||||
"amount": 220,
|
||||
"quantity": 2,
|
||||
"customer": "Graciela Ruta",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1021",
|
||||
"code": "pxpzczo23",
|
||||
"name": "Purple Band",
|
||||
"description": "Product Description",
|
||||
"image": "purple-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 6,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1021-0",
|
||||
"productCode": "pxpzczo23",
|
||||
"date": "2020-02-02",
|
||||
"amount": 79,
|
||||
"quantity": 1,
|
||||
"customer": "Cammy Albares",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1022",
|
||||
"code": "2c42cb5cb",
|
||||
"name": "Purple Gemstone Necklace",
|
||||
"description": "Product Description",
|
||||
"image": "purple-gemstone-necklace.jpg",
|
||||
"price": 45,
|
||||
"category": "Accessories",
|
||||
"quantity": 62,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1022-0",
|
||||
"productCode": "2c42cb5cb",
|
||||
"date": "2020-06-29",
|
||||
"amount": 45,
|
||||
"quantity": 1,
|
||||
"customer": "Mattie Poquette",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1022-1",
|
||||
"productCode": "2c42cb5cb",
|
||||
"date": "2020-02-11",
|
||||
"amount": 135,
|
||||
"quantity": 3,
|
||||
"customer": "Meaghan Garufi",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1023",
|
||||
"code": "5k43kkk23",
|
||||
"name": "Purple T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "purple-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 5,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1023-0",
|
||||
"productCode": "5k43kkk23",
|
||||
"date": "2020-04-15",
|
||||
"amount": 49,
|
||||
"quantity": 1,
|
||||
"customer": "Gladys Rim",
|
||||
"status": "RETURNED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1024",
|
||||
"code": "lm2tny2k4",
|
||||
"name": "Shoes",
|
||||
"description": "Product Description",
|
||||
"image": "shoes.jpg",
|
||||
"price": 64,
|
||||
"category": "Clothing",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": []
|
||||
},
|
||||
{
|
||||
"id": "1025",
|
||||
"code": "nbm5mv45n",
|
||||
"name": "Sneakers",
|
||||
"description": "Product Description",
|
||||
"image": "sneakers.jpg",
|
||||
"price": 78,
|
||||
"category": "Clothing",
|
||||
"quantity": 52,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1025-0",
|
||||
"productCode": "nbm5mv45n",
|
||||
"date": "2020-02-19",
|
||||
"amount": 78,
|
||||
"quantity": 1,
|
||||
"customer": "Yuki Whobrey",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1025-1",
|
||||
"productCode": "nbm5mv45n",
|
||||
"date": "2020-05-21",
|
||||
"amount": 78,
|
||||
"quantity": 1,
|
||||
"customer": "Fletcher Flosi",
|
||||
"status": "PENDING"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1026",
|
||||
"code": "zx23zc42c",
|
||||
"name": "Teal T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "teal-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 3,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1026-0",
|
||||
"productCode": "zx23zc42c",
|
||||
"date": "2020-04-24",
|
||||
"amount": 98,
|
||||
"quantity": 2,
|
||||
"customer": "Bette Nicka",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1027",
|
||||
"code": "acvx872gc",
|
||||
"name": "Yellow Earbuds",
|
||||
"description": "Product Description",
|
||||
"image": "yellow-earbuds.jpg",
|
||||
"price": 89,
|
||||
"category": "Electronics",
|
||||
"quantity": 35,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1027-0",
|
||||
"productCode": "acvx872gc",
|
||||
"date": "2020-01-29",
|
||||
"amount": 89,
|
||||
"quantity": 1,
|
||||
"customer": "Veronika Inouye",
|
||||
"status": "DELIVERED"
|
||||
},
|
||||
{
|
||||
"id": "1027-1",
|
||||
"productCode": "acvx872gc",
|
||||
"date": "2020-06-11",
|
||||
"amount": 89,
|
||||
"quantity": 1,
|
||||
"customer": "Willard Kolmetz",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1028",
|
||||
"code": "tx125ck42",
|
||||
"name": "Yoga Mat",
|
||||
"description": "Product Description",
|
||||
"image": "yoga-mat.jpg",
|
||||
"price": 20,
|
||||
"category": "Fitness",
|
||||
"quantity": 15,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5,
|
||||
"orders": []
|
||||
},
|
||||
{
|
||||
"id": "1029",
|
||||
"code": "gwuby345v",
|
||||
"name": "Yoga Set",
|
||||
"description": "Product Description",
|
||||
"image": "yoga-set.jpg",
|
||||
"price": 20,
|
||||
"category": "Fitness",
|
||||
"quantity": 25,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 8,
|
||||
"orders": [
|
||||
{
|
||||
"id": "1026-0",
|
||||
"productCode": "gwuby345v",
|
||||
"date": "2020-02-14",
|
||||
"amount": 4,
|
||||
"quantity": 80,
|
||||
"customer": "Maryann Royster",
|
||||
"status": "DELIVERED"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
124
src/assets/demo/data/products-small.json
Normal file
124
src/assets/demo/data/products-small.json
Normal file
@ -0,0 +1,124 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": "1000",
|
||||
"code": "f230fh0g3",
|
||||
"name": "Bamboo Watch",
|
||||
"description": "Product Description",
|
||||
"image": "bamboo-watch.jpg",
|
||||
"price": 65,
|
||||
"category": "Accessories",
|
||||
"quantity": 24,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1001",
|
||||
"code": "nvklal433",
|
||||
"name": "Black Watch",
|
||||
"description": "Product Description",
|
||||
"image": "black-watch.jpg",
|
||||
"price": 72,
|
||||
"category": "Accessories",
|
||||
"quantity": 61,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1002",
|
||||
"code": "zz21cz3c1",
|
||||
"name": "Blue Band",
|
||||
"description": "Product Description",
|
||||
"image": "blue-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1003",
|
||||
"code": "244wgerg2",
|
||||
"name": "Blue T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "blue-t-shirt.jpg",
|
||||
"price": 29,
|
||||
"category": "Clothing",
|
||||
"quantity": 25,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1004",
|
||||
"code": "h456wer53",
|
||||
"name": "Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "bracelet.jpg",
|
||||
"price": 15,
|
||||
"category": "Accessories",
|
||||
"quantity": 73,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1005",
|
||||
"code": "av2231fwg",
|
||||
"name": "Brown Purse",
|
||||
"description": "Product Description",
|
||||
"image": "brown-purse.jpg",
|
||||
"price": 120,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1006",
|
||||
"code": "bib36pfvm",
|
||||
"name": "Chakra Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "chakra-bracelet.jpg",
|
||||
"price": 32,
|
||||
"category": "Accessories",
|
||||
"quantity": 5,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1007",
|
||||
"code": "mbvjkgip5",
|
||||
"name": "Galaxy Earrings",
|
||||
"description": "Product Description",
|
||||
"image": "galaxy-earrings.jpg",
|
||||
"price": 34,
|
||||
"category": "Accessories",
|
||||
"quantity": 23,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1008",
|
||||
"code": "vbb124btr",
|
||||
"name": "Game Controller",
|
||||
"description": "Product Description",
|
||||
"image": "game-controller.jpg",
|
||||
"price": 99,
|
||||
"category": "Electronics",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1009",
|
||||
"code": "cm230f032",
|
||||
"name": "Gaming Set",
|
||||
"description": "Product Description",
|
||||
"image": "gaming-set.jpg",
|
||||
"price": 299,
|
||||
"category": "Electronics",
|
||||
"quantity": 63,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3
|
||||
}
|
||||
]
|
||||
}
|
||||
364
src/assets/demo/data/products.json
Normal file
364
src/assets/demo/data/products.json
Normal file
@ -0,0 +1,364 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": "1000",
|
||||
"code": "f230fh0g3",
|
||||
"name": "Bamboo Watch",
|
||||
"description": "Product Description",
|
||||
"image": "bamboo-watch.jpg",
|
||||
"price": 65,
|
||||
"category": "Accessories",
|
||||
"quantity": 24,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1001",
|
||||
"code": "nvklal433",
|
||||
"name": "Black Watch",
|
||||
"description": "Product Description",
|
||||
"image": "black-watch.jpg",
|
||||
"price": 72,
|
||||
"category": "Accessories",
|
||||
"quantity": 61,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1002",
|
||||
"code": "zz21cz3c1",
|
||||
"name": "Blue Band",
|
||||
"description": "Product Description",
|
||||
"image": "blue-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1003",
|
||||
"code": "244wgerg2",
|
||||
"name": "Blue T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "blue-t-shirt.jpg",
|
||||
"price": 29,
|
||||
"category": "Clothing",
|
||||
"quantity": 25,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1004",
|
||||
"code": "h456wer53",
|
||||
"name": "Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "bracelet.jpg",
|
||||
"price": 15,
|
||||
"category": "Accessories",
|
||||
"quantity": 73,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1005",
|
||||
"code": "av2231fwg",
|
||||
"name": "Brown Purse",
|
||||
"description": "Product Description",
|
||||
"image": "brown-purse.jpg",
|
||||
"price": 120,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1006",
|
||||
"code": "bib36pfvm",
|
||||
"name": "Chakra Bracelet",
|
||||
"description": "Product Description",
|
||||
"image": "chakra-bracelet.jpg",
|
||||
"price": 32,
|
||||
"category": "Accessories",
|
||||
"quantity": 5,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1007",
|
||||
"code": "mbvjkgip5",
|
||||
"name": "Galaxy Earrings",
|
||||
"description": "Product Description",
|
||||
"image": "galaxy-earrings.jpg",
|
||||
"price": 34,
|
||||
"category": "Accessories",
|
||||
"quantity": 23,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1008",
|
||||
"code": "vbb124btr",
|
||||
"name": "Game Controller",
|
||||
"description": "Product Description",
|
||||
"image": "game-controller.jpg",
|
||||
"price": 99,
|
||||
"category": "Electronics",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1009",
|
||||
"code": "cm230f032",
|
||||
"name": "Gaming Set",
|
||||
"description": "Product Description",
|
||||
"image": "gaming-set.jpg",
|
||||
"price": 299,
|
||||
"category": "Electronics",
|
||||
"quantity": 63,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1010",
|
||||
"code": "plb34234v",
|
||||
"name": "Gold Phone Case",
|
||||
"description": "Product Description",
|
||||
"image": "gold-phone-case.jpg",
|
||||
"price": 24,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1011",
|
||||
"code": "4920nnc2d",
|
||||
"name": "Green Earbuds",
|
||||
"description": "Product Description",
|
||||
"image": "green-earbuds.jpg",
|
||||
"price": 89,
|
||||
"category": "Electronics",
|
||||
"quantity": 23,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1012",
|
||||
"code": "250vm23cc",
|
||||
"name": "Green T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "green-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 74,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1013",
|
||||
"code": "fldsmn31b",
|
||||
"name": "Grey T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "grey-t-shirt.jpg",
|
||||
"price": 48,
|
||||
"category": "Clothing",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1014",
|
||||
"code": "waas1x2as",
|
||||
"name": "Headphones",
|
||||
"description": "Product Description",
|
||||
"image": "headphones.jpg",
|
||||
"price": 175,
|
||||
"category": "Electronics",
|
||||
"quantity": 8,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1015",
|
||||
"code": "vb34btbg5",
|
||||
"name": "Light Green T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "light-green-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 34,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1016",
|
||||
"code": "k8l6j58jl",
|
||||
"name": "Lime Band",
|
||||
"description": "Product Description",
|
||||
"image": "lime-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 12,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1017",
|
||||
"code": "v435nn85n",
|
||||
"name": "Mini Speakers",
|
||||
"description": "Product Description",
|
||||
"image": "mini-speakers.jpg",
|
||||
"price": 85,
|
||||
"category": "Clothing",
|
||||
"quantity": 42,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1018",
|
||||
"code": "09zx9c0zc",
|
||||
"name": "Painted Phone Case",
|
||||
"description": "Product Description",
|
||||
"image": "painted-phone-case.jpg",
|
||||
"price": 56,
|
||||
"category": "Accessories",
|
||||
"quantity": 41,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1019",
|
||||
"code": "mnb5mb2m5",
|
||||
"name": "Pink Band",
|
||||
"description": "Product Description",
|
||||
"image": "pink-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 63,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1020",
|
||||
"code": "r23fwf2w3",
|
||||
"name": "Pink Purse",
|
||||
"description": "Product Description",
|
||||
"image": "pink-purse.jpg",
|
||||
"price": 110,
|
||||
"category": "Accessories",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "OUTOFSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1021",
|
||||
"code": "pxpzczo23",
|
||||
"name": "Purple Band",
|
||||
"description": "Product Description",
|
||||
"image": "purple-band.jpg",
|
||||
"price": 79,
|
||||
"category": "Fitness",
|
||||
"quantity": 6,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1022",
|
||||
"code": "2c42cb5cb",
|
||||
"name": "Purple Gemstone Necklace",
|
||||
"description": "Product Description",
|
||||
"image": "purple-gemstone-necklace.jpg",
|
||||
"price": 45,
|
||||
"category": "Accessories",
|
||||
"quantity": 62,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1023",
|
||||
"code": "5k43kkk23",
|
||||
"name": "Purple T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "purple-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 2,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1024",
|
||||
"code": "lm2tny2k4",
|
||||
"name": "Shoes",
|
||||
"description": "Product Description",
|
||||
"image": "shoes.jpg",
|
||||
"price": 64,
|
||||
"category": "Clothing",
|
||||
"quantity": 0,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1025",
|
||||
"code": "nbm5mv45n",
|
||||
"name": "Sneakers",
|
||||
"description": "Product Description",
|
||||
"image": "sneakers.jpg",
|
||||
"price": 78,
|
||||
"category": "Clothing",
|
||||
"quantity": 52,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": "1026",
|
||||
"code": "zx23zc42c",
|
||||
"name": "Teal T-Shirt",
|
||||
"description": "Product Description",
|
||||
"image": "teal-t-shirt.jpg",
|
||||
"price": 49,
|
||||
"category": "Clothing",
|
||||
"quantity": 3,
|
||||
"inventoryStatus": "LOWSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1027",
|
||||
"code": "acvx872gc",
|
||||
"name": "Yellow Earbuds",
|
||||
"description": "Product Description",
|
||||
"image": "yellow-earbuds.jpg",
|
||||
"price": 89,
|
||||
"category": "Electronics",
|
||||
"quantity": 35,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 3
|
||||
},
|
||||
{
|
||||
"id": "1028",
|
||||
"code": "tx125ck42",
|
||||
"name": "Yoga Mat",
|
||||
"description": "Product Description",
|
||||
"image": "yoga-mat.jpg",
|
||||
"price": 20,
|
||||
"category": "Fitness",
|
||||
"quantity": 15,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 5
|
||||
},
|
||||
{
|
||||
"id": "1029",
|
||||
"code": "gwuby345v",
|
||||
"name": "Yoga Set",
|
||||
"description": "Product Description",
|
||||
"image": "yoga-set.jpg",
|
||||
"price": 20,
|
||||
"category": "Fitness",
|
||||
"quantity": 25,
|
||||
"inventoryStatus": "INSTOCK",
|
||||
"rating": 8
|
||||
}
|
||||
]
|
||||
}
|
||||
68
src/assets/demo/data/scheduleevents.json
Executable file
68
src/assets/demo/data/scheduleevents.json
Executable file
@ -0,0 +1,68 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "All Day Event",
|
||||
"start": "2021-07-01"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "Long Event",
|
||||
"start": "2021-07-07",
|
||||
"end": "2021-07-10"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "Repeating Event",
|
||||
"start": "2021-07-09T16:00:00"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "Repeating Event",
|
||||
"start": "2021-07-16T16:00:00"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "Conference",
|
||||
"start": "2021-07-11",
|
||||
"end": "2021-07-13"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"title": "Meeting",
|
||||
"start": "2021-07-12T10:30:00",
|
||||
"end": "2021-07-12T12:30:00"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"title": "Lunch",
|
||||
"start": "2021-07-12T12:00:00"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"title": "Meeting",
|
||||
"start": "2021-07-12T14:30:00"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"title": "Happy Hour",
|
||||
"start": "2021-07-12T17:30:00"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"title": "Dinner",
|
||||
"start": "2021-07-12T20:00:00"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"title": "Birthday Party",
|
||||
"start": "2021-07-13T07:00:00"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"title": "Click for Google",
|
||||
"url": "http://google.com/",
|
||||
"start": "2021-07-28"
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
src/assets/demo/flags/flag_placeholder.png
Executable file
BIN
src/assets/demo/flags/flag_placeholder.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
1
src/assets/demo/flags/flags.css
Executable file
1
src/assets/demo/flags/flags.css
Executable file
File diff suppressed because one or more lines are too long
BIN
src/assets/demo/flags/flags_responsive.png
Executable file
BIN
src/assets/demo/flags/flags_responsive.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user