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

Update folder structure

Browse Source
This commit is contained in:
Çetin
2021-12-28 13:29:25 +03:00
parent e0762fdeb0
commit ab8f627bb3
71 changed files with 189 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/app/components/menus/menus.component.html Executable file
View File

@@ -0,0 +1,85 @@
<div class="grid p-fluid">
<div class="col-12">
<div class="card card-w-title">
<h5>MenuBar</h5>
<p-menubar [model]="tieredItems">
<ng-template pTemplate="end">
<span class="p-input-icon-right">
<input type="text" pInputText placeholder="Search">
<i class="pi pi-search"></i>
</span>
</ng-template>
</p-menubar>
</div>
</div>
<div class="col-12">
<div class="card card-w-title">
<h5>Breadcrumb</h5>
<p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
</div>
</div>
<div class="col-12">
<div class="card card-w-title flex flex-wrap">
<div class="col-12">
<h5>TabMenu and Steps</h5>
<p>TabMenu and Steps are integrated with the same child routes.</p>
</div>
<div class="col-12 md:col-8">
<p-tabMenu [model]="routeItems"></p-tabMenu>
<p-steps [model]="routeItems" styleClass="mt-5" [readonly]="false"></p-steps>
</div>
<div class="col-12 md:col-4 align-self-center h-full">
<router-outlet></router-outlet>
</div>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card card-w-title">
<h5>TieredMenu</h5>
<p-tieredMenu [model]="tieredItems"></p-tieredMenu>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card card-w-title">
<h5>Plain Menu</h5>
<p-menu [model]="plainMenuItems"></p-menu>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card card-w-title">
<h5>Overlay Menu</h5>
<p-menu #menu [popup]="true" [model]="menuItems"></p-menu>
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
</div>
<div class="card card-w-title">
<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 card-w-title">
<h5>MegaMenu - Horizontal</h5>
<p-megaMenu [model]="megaMenuItems"></p-megaMenu>
<h5>MegaMenu - Vertical</h5>
<p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card card-w-title">
<h5>PanelMenu</h5>
<p-panelMenu [model]="panelMenuItems"></p-panelMenu>
</div>
</div>
</div>

473
src/app/components/menus/menus.component.ts Executable file
View File

@@ -0,0 +1,473 @@
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {MegaMenuItem, MenuItem} from 'primeng/api';
@Component({
templateUrl: './menus.component.html',
encapsulation: ViewEncapsulation.None
})
export class MenusComponent implements OnInit {
breadcrumbItems: MenuItem[];
tieredItems: MenuItem[];
items: MenuItem[];
routeItems: MenuItem[];
megaMenuItems: MegaMenuItem[];
panelMenuItems: MenuItem[];
stepsItems: MenuItem[];
slideItems: MenuItem[];
menuItems: MenuItem[];
plainMenuItems: MenuItem[];
pageIndex: number = 0;
ngOnInit() {
this.tieredItems = [
{
label: 'Customers',
icon: 'pi pi-fw pi-table',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Customer',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Duplicate',
icon: 'pi pi-fw pi-copy'
},
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-user-edit'
}
]
},
{
label: 'Orders',
icon: 'pi pi-fw pi-shopping-cart',
items: [
{
label: 'View',
icon: 'pi pi-fw pi-list'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search'
}
]
},
{
label: 'Shipments',
icon: 'pi pi-fw pi-envelope',
items: [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass',
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker',
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
]
},
{
label: 'Profile',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'Settings',
icon: 'pi pi-fw pi-cog'
},
{
label: 'Billing',
icon: 'pi pi-fw pi-file'
}
]
},
{ separator: true },
{
label: 'Quit',
icon: 'pi pi-fw pi-sign-out'
}
];
this.items = [
{
label: 'Customers',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-user-edit'
}
]
},
{
label: 'Orders',
items: [
{
label: 'View',
icon: 'pi pi-fw pi-list'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search'
}
]
},
{
label: 'Shipments',
items: [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass',
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker',
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
]
}
];
this.menuItems = [
{
label: 'Save', icon: 'pi pi-fw pi-check'
},
{
label: 'Update', icon: 'pi pi-fw pi-refresh'
},
{
label: 'Delete', icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Home', icon: 'pi pi-fw pi-home'
},
];
this.slideItems = [
{
label: 'Customers',
icon: 'pi pi-fw pi-table',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-user-edit'
}
]
},
{
label: 'Orders',
icon: 'pi pi-fw pi-shopping-cart',
items: [
{
label: 'View',
icon: 'pi pi-fw pi-list'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search'
}
]
},
{
label: 'Shipments',
icon: 'pi pi-fw pi-envelope',
items: [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass',
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker',
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
]
},
{
label: 'Profile',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'Settings',
icon: 'pi pi-fw pi-cog'
},
{
label: 'Billing',
icon: 'pi pi-fw pi-file'
}
]
}
];
this.plainMenuItems = [
{
label: 'Customers',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-user-edit'
}
]
},
{
label: 'Orders',
items: [
{
label: 'View',
icon: 'pi pi-fw pi-list'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search'
}
]
}
];
this.breadcrumbItems = [];
this.breadcrumbItems.push({ label: 'Electronics' });
this.breadcrumbItems.push({ label: 'Computer' });
this.breadcrumbItems.push({ label: 'Notebook' });
this.breadcrumbItems.push({ label: 'Accessories' });
this.breadcrumbItems.push({ label: 'Backpacks' });
this.breadcrumbItems.push({ label: 'Item' });
this.routeItems = [
{label: 'Personal', routerLink:'personal'},
{label: 'Seat', routerLink:'seat'},
{label: 'Payment', routerLink:'payment'},
{label: 'Confirmation', routerLink:'confirmation'},
];
this.megaMenuItems = [
{
label: 'Fashion', icon: 'pi pi-fw pi-tag',
items: [
[
{
label: 'Women',
items: [{label: 'Women Item'}, {label: 'Women Item'}, {label: 'Women Item'}]
},
{
label: 'Men',
items: [{label: 'Men Item'}, {label: 'Men Item'}, {label: 'Men Item'}]
}
],
[
{
label: 'Kids',
items: [{label: 'Kids Item'}, {label: 'Kids Item'}]
},
{
label: 'Luggage',
items: [{label: 'Luggage Item'}, {label: 'Luggage Item'}, {label: 'Luggage Item'}]
}
]
]
},
{
label: 'Electronics', icon: 'pi pi-fw pi-desktop',
items: [
[
{
label: 'Computer',
items: [{label: 'Computer Item'}, {label: 'Computer Item'}]
},
{
label: 'Camcorder',
items: [{label: 'Camcorder Item'}, {label: 'Camcorder Item'}, {label: 'Camcorder Item'}]
}
],
[
{
label: 'TV',
items: [{label: 'TV Item'}, {label: 'TV Item'}]
},
{
label: 'Audio',
items: [{label: 'Audio Item'}, {label: 'Audio Item'}, {label: 'Audio Item'}]
}
],
[
{
label: 'Sports.7',
items: [{label: 'Sports.7.1'}, {label: 'Sports.7.2'}]
}
]
]
},
{
label: 'Furniture', icon: 'pi pi-fw pi-image',
items: [
[
{
label: 'Living Room',
items: [{label: 'Living Room Item'}, {label: 'Living Room Item'}]
},
{
label: 'Kitchen',
items: [{label: 'Kitchen Item'}, {label: 'Kitchen Item'}, {label: 'Kitchen Item'}]
}
],
[
{
label: 'Bedroom',
items: [{label: 'Bedroom Item'}, {label: 'Bedroom Item'}]
},
{
label: 'Outdoor',
items: [{label: 'Outdoor Item'}, {label: 'Outdoor Item'}, {label: 'Outdoor Item'}]
}
]
]
},
{
label: 'Sports', icon: 'pi pi-fw pi-star',
items: [
[
{
label: 'Basketball',
items: [{label: 'Basketball Item'}, {label: 'Basketball Item'}]
},
{
label: 'Football',
items: [{label: 'Football Item'}, {label: 'Football Item'}, {label: 'Football Item'}]
}
],
[
{
label: 'Tennis',
items: [{label: 'Tennis Item'}, {label: 'Tennis Item'}]
}
]
]
},
];
this.panelMenuItems = [
{
label: 'Customers',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Customer',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Duplicate',
icon: 'pi pi-fw pi-copy'
},
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-user-edit'
}
]
},
{
label: 'Orders',
items: [
{
label: 'View',
icon: 'pi pi-fw pi-list'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search'
}
]
},
{
label: 'Shipments',
items: [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass',
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker',
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
]
},
{
label: 'Profile',
items: [
{
label: 'Settings',
icon: 'pi pi-fw pi-cog'
},
{
label: 'Billing',
icon: 'pi pi-fw pi-file'
}
]
}
];
}
}

15
src/app/components/menus/stepsmenu/confirmationdemo.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-confirmationdemo',
template: `
<div class="flex flex-column align-items-center py-5 px-3">
<i class="pi pi-fw pi-check mr-2 text-2xl"></i>
<p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
</div>
`
})
export class ConfirmationDemoComponent {
constructor() { }
}

15
src/app/components/menus/stepsmenu/paymentdemo.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-paymentdemo',
template: `
<div class="flex flex-column align-items-center py-5 px-3">
<i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
<p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
</div>
`
})
export class PaymentDemoComponent{
constructor() { }
}

15
src/app/components/menus/stepsmenu/personaldemo.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-personaldemo',
template: `
<div class="flex flex-column align-items-center py-5 px-3">
<i class="pi pi-fw pi-user mr-2 text-2xl"></i>
<p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
</div>
`
})
export class PersonalDemoComponent{
constructor() { }
}

15
src/app/components/menus/stepsmenu/seatdemo.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-seatdemo',
template: `
<div class="flex flex-column align-items-center py-5 px-3">
<i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
<p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
</div>
`
})
export class SeatDemoComponent{
constructor() { }
}

27
src/app/components/menus/stepsmenu/stepsmenu.module.ts Normal file
View File

@@ -0,0 +1,27 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { PaymentDemoComponent } from './paymentdemo.component';
import { SeatDemoComponent } from './seatdemo.component';
import { PersonalDemoComponent } from './personaldemo.component';
import { ConfirmationDemoComponent } from './confirmationdemo.component';
// import { MenusDemoComponent } from '../menusdemo.component';
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forChild([
// {path:'',component: MenusDemoComponent, children:[
// {path:'', redirectTo: 'personal', pathMatch: 'full'},
// {path: 'personal', component: PersonalDemoComponent},
// {path: 'confirmation', component: ConfirmationDemoComponent},
// {path: 'seat', component: SeatDemoComponent},
// {path: 'payment', component: PaymentDemoComponent}
// ]}
])
],
exports: [RouterModule]
})
export class MenudemoModule { }