Skip to content

Commit

Permalink
Fixed #9887 - Add Search to Showcase
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Feb 12, 2021
1 parent a29b567 commit c01a81c
Show file tree
Hide file tree
Showing 3 changed files with 353 additions and 5 deletions.
342 changes: 339 additions & 3 deletions src/app/showcase/app.menu.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import { Component, Input } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { Router } from '@angular/router';
import { FilterService } from 'primeng/api';

declare let gtag: Function;

@Component({
selector: 'app-menu',
template: `
<div class="layout-sidebar" [ngClass]="{'active': active}">
<div class="layout-sidebar-filter p-fluid p-input-filled">
<p-autoComplete [group]="true" [(ngModel)]="selectedRoute" [minLength]="2" [suggestions]="filteredRoutes" scrollHeight="300px" (onSelect)="onSelect($event)" placeholder="Search by name..." (completeMethod)="filterGroupedRoute($event)" field="label">
</p-autoComplete>
</div>
<div class="layout-menu">
<div class="menu-category">General</div>
<div class="menu-items">
Expand Down Expand Up @@ -314,13 +319,344 @@ declare let gtag: Function;
])
]
})
export class AppMenuComponent {
export class AppMenuComponent implements OnInit {

@Input() active: boolean;

activeSubmenus: {[key: string]: boolean} = {};

constructor(private router: Router) {}
constructor(private router: Router, private filterService: FilterService) {}

filteredRoutes: any[];

selectedRoute: any;

routes = [
{
label: 'General', value: 'general',
items: [
{label: 'Setup', value: '/setup'},
{label: 'I18N', value: '/i18n'}
]
},
{
label: 'Support', value: 'support',
items: [
{label: 'Long Term Support', value: '/lts'},
{label: 'PRO Support', value: '/support'}
]
},
{
label: 'Theming', value: 'theming',
items: [
{label: 'Guide', value: '/theming'}
]
},
{
label: 'PrimeFlex', value: 'primeflex',
items: [
{label: 'Setup', value: '/primeflex'},
{label: 'Display', value: '/primeflex/display'},
{label: 'Elevation', value: '/primeflex/elevation'},
{label: 'FlexBox', value: '/primeflex/flexbox'},
{label: 'Form Layout', value: '/primeflex/formlayout'},
{label: 'Spacing', value: '/primeflex/spacing'},
{label: 'Text', value: '/primeflex/text'}
]
},
{
label: 'PrimeIcons', value: 'primeicons',
items: [
{label: 'Icons v4.1', value: '/icons'}
]
},
{
label: 'Form', value: 'form',
items: [
{label: 'AutoComplete', value: '/autocomplete'},
{label: 'Calendar', value: '/calendar'},
{label: 'CascadeSelect', value: '/cascadeselect'},
{label: 'Checkbox', value: '/checkbox'},
{label: 'Chips', value: '/chips'},
{label: 'ColorPicker', value: '/colorpicker'},
{label: 'Dropdown', value: '/dropdown'},
{label: 'Editor', value: '/editor'},
{label: 'FloatLabel', value: '/floatlabel'},
{label: 'InputGroup', value: '/inputgroup'},
{label: 'InputMask', value: '/inputmask'},
{label: 'InputSwitch', value: '/inputswitch'},
{label: 'InputText', value: '/inputtext'},
{label: 'InputTextArea', value: '/inputtextarea'},
{label: 'InvalidState', value: '/invalid'},
{label: 'Knob', value: '/knob'},
{label: 'KeyFilter', value: '/keyfilter'},
{label: 'Listbox', value: '/listbox'},
{label: 'MultiSelect', value: '/multiselect'},
{label: 'Password', value: '/password'},
{label: 'RadioButton', value: '/radiobutton'},
{label: 'Rating', value: '/rating'},
{label: 'Slider', value: '/slider'},
{label: 'SelectButton', value: '/selectbutton'},
{label: 'ToggleButton', value: '/togglebutton'},
{label: 'TriCheckbox', value: '/tristatecheckbox'}
]
},
{
label: 'Button', value: 'button',
items: [
{label: 'Button', value: '/button'},
{label: 'SplitButton', value: '/splitbutton'}
]
},
{
label: 'Data', value: 'data',
items: [
{label: 'DataView', value: '/dataview'},
{label: 'FullCalendar', value: '/fullcalendar'},
{label: 'GMap', value: '/gmap'},
{label: 'OrderList', value: '/orderlist'},
{label: 'Org Chart', value: '/organizationchart'},
{label: 'Paginator', value: '/paginator'},
{label: 'PickList', value: '/picklist'},
{label: 'Timeline', value: '/timeline'},
{label: 'VirtualScroller', value: '/virtualscroller'},
]
},

{
label: 'Table', value: 'table',
items: [
{label: 'Documentation', value: '/table'},
{label: 'Basic', value: '/table/basic'},
{label: 'Dynamic', value: '/table/dynamic'},
{label: 'Templating', value: '/table/templating'},
{label: 'Size', value: '/table/size'},
{label: 'Gridlines', value: '/table/gridlines'},
{label: 'Striped', value: '/table/striped'},
{label: 'ColGroup', value: '/table/colgroup'},
{label: 'Page', value: '/table/page'},
{label: 'Sort', value: '/table/sort'},
{label: 'Filter', value: '/table/filter'},
{label: 'Selection', value: '/table/selection'},
{label: 'Scroll', value: '/table/scroll'},
{label: 'VirtualScroll', value: '/table/virtualscroll'},
{label: 'FlexScroll', value: '/table/flexscroll'},
{label: 'RowExpand', value: '/table/rowexpansion'},
{label: 'Edit', value: '/table/edit'},
{label: 'Toggle', value: '/table/coltoggle'},
{label: 'Resize', value: '/table/colresize'},
{label: 'Reorder', value: '/table/reorder'},
{label: 'RowGroup', value: '/table/rowgroup'},
{label: 'ContextMenu', value: '/table/contextmenu'},
{label: 'Responsive', value: '/table/responsive'},
{label: 'Export', value: '/table/export'},
{label: 'State', value: '/table/state'},
{label: 'Style', value: '/table/style'},
{label: 'Sticky', value: '/table/sticky'},
{label: 'Crud', value: '/table/crud'},
]
},
{
label: 'Tree', value: 'tree',
items: [
{label: 'Documentation', value: '/tree'},
{label: 'Templating', value: '/tree/templating'},
{label: 'Selection', value: '/tree/selection'},
{label: 'Filter', value: '/tree/filter'},
{label: 'Lazy', value: '/tree/lazy'},
{label: 'Scroll', value: '/tree/scroll'},
{label: 'ContextMenu', value: '/tree/contextmenu'},
{label: 'DragDrop', value: '/tree/dragdrop'},
{label: 'Horizontal', value: '/tree/horizontal'}
]
},
{
label: 'TreeTable', value: 'treetable',
items: [
{label: 'Documentation', value: '/treetable'},
{label: 'Templating', value: '/treetable/templating'},
{label: 'Page', value: '/treetable/page'},
{label: 'Sort', value: '/treetable/sort'},
{label: 'Selection', value: '/treetable/selection'},
{label: 'ColGroup', value: '/treetable/colgroup'},
{label: 'Lazy', value: '/treetable/lazy'},
{label: 'Edit', value: '/treetable/edit'},
{label: 'Scroll', value: '/treetable/scroll'},
{label: 'Resize', value: '/treetable/colresize'},
{label: 'Reorder', value: '/treetable/reorder'},
{label: 'Toggle', value: '/treetable/coltoggle'},
{label: 'Style', value: '/treetable/style'},
{label: 'ContextMenu', value: '/treetable/contextmenu'},
{label: 'Responsive', value: '/treetable/responsive'},
{label: 'Filter', value: '/treetable/filter'},
{label: 'Size', value: '/treetable/size'}
]
},
{
label: 'Panel', value: 'panel',
items: [
{label: 'Accordion', value: '/accordion'},
{label: 'Card', value: '/card'},
{label: 'Divider', value: '/divider'},
{label: 'Fieldset', value: '/fieldset'},
{label: 'Panel', value: '/panel'},
{label: 'Splitter', value: '/splitter'},
{label: 'ScrollPanel', value: '/scrollpanel'},
{label: 'TabView', value: '/tabview'},
{label: 'Toolbar', value: '/toolbar'}
]
},
{
label: 'Overlay', value: 'overlay',
items: [
{label: 'ConfirmDialog', value: '/confirmdialog'},
{label: 'ConfirmPopup', value: '/confirmpopup'},
{label: 'Dialog', value: '/dialog'},
{label: 'DynamicDialog', value: '/dynamicdialog'},
{label: 'Panel', value: '/panel'},
{label: 'OverlayPanel', value: '/overlaypanel'},
{label: 'Sidebar', value: '/sidebar'},
{label: 'Tooltip', value: '/tooltip'}
]
},
{
label: 'File', value: 'fileupload',
items: [
{label: 'Upload', value: '/fileupload'}
]
},
{
label: 'Overlay', value: 'overlay',
items: [
{label: 'ConfirmDialog', value: '/confirmdialog'},
{label: 'ConfirmPopup', value: '/confirmpopup'},
{label: 'Dialog', value: '/dialog'},
{label: 'DynamicDialog', value: '/dynamicdialog'},
{label: 'Panel', value: '/panel'},
{label: 'OverlayPanel', value: '/overlaypanel'},
{label: 'Sidebar', value: '/sidebar'},
{label: 'Tooltip', value: '/tooltip'}
]
},
{
label: 'Menu', value: 'menu',
items: [
{label: 'MenuModel', value: '/menumodel'},
{label: 'Breadcrumb', value: '/breadcrumb'},
{label: 'ContextMenu', value: '/contextmenu'},
{label: 'MegaMenu', value: '/megamenu'},
{label: 'Menu', value: '/menu'},
{label: 'Menubar', value: '/menubar'},
{label: 'PanelMenu', value: '/panelmenu'},
{label: 'SlideMenu', value: '/slidemenu'},
{label: 'Steps', value: '/steps'},
{label: 'TabMenu', value: '/tabmenu'},
{label: 'TieredMenu', value: '/tieredmenu'}
]
},
{
label: 'Chart', value: 'chart',
items: [
{label: 'ChartModel', value: '/chart'},
{label: 'Bar', value: '/chart/bar'},
{label: 'Doughnut', value: '/chart/doughnut'},
{label: 'Line', value: '/chart/line'},
{label: 'PolarArea', value: '/chart/polararea'},
{label: 'Pie', value: '/chart/pie'},
{label: 'Radar', value: '/chart/radar'}
]
},
{
label: 'Messages', value: 'messages',
items: [
{label: 'Messages', value: '/messages'},
{label: 'Toast', value: '/toast'}
]
},
{
label: 'Media', value: 'media',
items: [
{label: 'Carousel', value: '/carousel'}
]
},
{
label: 'Galleria', value: 'galleria',
items: [
{label: 'Documentation', value: '/galleria'},
{label: 'Programmatic', value: '/galleria/programmatic'},
{label: 'Indicator', value: '/galleria/indicator'},
{label: 'Thumbnail', value: '/galleria/thumbnail'},
{label: 'Navigator', value: '/galleria/navigator'},
{label: 'Responsive', value: '/galleria/responsive'},
{label: 'Fullscreen', value: '/galleria/fullscreen'},
{label: 'AutoPlay', value: '/galleria/autoplay'},
{label: 'Caption', value: '/galleria/caption'},
{label: 'Advanced', value: '/galleria/advanced'}
]
},
{
label: 'DragDrop', value: 'dragdrop',
items: [
{label: 'DragDrop', value: '/dragdrop'}
]
},
{
label: 'Misc', value: 'misc',
items: [
{label: 'Avatar', value: '/avatar'},
{label: 'Badge', value: '/badge'},
{label: 'BlockUI', value: '/blockui'},
{label: 'Captcha', value: '/captcha'},
{label: 'Chip', value: '/chip'},
{label: 'Inplace', value: '/inplace'},
{label: 'ProgressBar', value: '/progressbar'},
{label: 'ProgressSpinner', value: '/progressspinner'},
{label: 'Skeleton', value: '/skeleton'},
{label: 'Tag', value: '/tag'},
{label: 'Terminal', value: '/terminal'}
]
},
{
label: 'Directives', value: 'directives',
items: [
{label: 'Defer', value: '/defer'},
{label: 'FocusTrap', value: '/focustrap'},
{label: 'Ripple', value: '/ripple'}
]
},
{
label: 'Utilities', value: 'utilities',
items: [
{label: 'FilterService', value: '/filterservice'}
]
},
];

ngOnInit() {
}

filterGroupedRoute(event) {
let query = event.query;
let filteredGroups = [];

for (let optgroup of this.routes) {
let filteredSubOptions = this.filterService.filter(optgroup.items, ['value'], query, "contains");
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push({
label: optgroup.label,
value: optgroup.value,
items: filteredSubOptions
});
}
}

this.filteredRoutes = filteredGroups;
}

onSelect(event) {
this.selectedRoute = null;
this.router.navigate([event.value]);
}

toggleSubmenu(event: Event, name: string) {
this.activeSubmenus[name] = this.activeSubmenus[name] ? false: true;
Expand Down
2 changes: 2 additions & 0 deletions src/app/showcase/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { AppMenuComponent } from './app.menu.component';
import { AppConfigComponent } from './app.config.component';
import { AppFooterComponent } from './app.footer.component';
import { AppInputStyleSwitchModule } from './app.inputstyleswitch.component';
import { AutoCompleteModule } from 'primeng/autocomplete';

@NgModule({
declarations: [
Expand All @@ -47,6 +48,7 @@ import { AppInputStyleSwitchModule } from './app.inputstyleswitch.component';
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
AutoCompleteModule,
ButtonModule,
RadioButtonModule,
InputSwitchModule,
Expand Down
Loading

0 comments on commit c01a81c

Please sign in to comment.