hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

added type doc to menu related files

Browse Source
This commit is contained in:
lotte
2018-12-11 15:47:41 +01:00
parent c0a4fdc797
commit e13d743e32
35 changed files with 765 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
View File

@@ -1,9 +1,12 @@
import { Component, Inject, Injector, Input, OnInit } from '@angular/core';
import { Component, Inject, Injector, OnInit } from '@angular/core';
import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-section.component';
import { MenuID } from '../../../shared/menu/initial-menus-state';
import { rendersSectionForMenu } from '../../../shared/menu/menu.decorator';
import { MenuService } from '../../../shared/menu/menu.service';
import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
/**
* Represents a non-expandable section in the admin sidebar
*/
@Component({
selector: 'ds-admin-sidebar-section',
templateUrl: './admin-sidebar-section.component.html',
@@ -12,6 +15,9 @@ import { MenuService } from '../../../shared/menu/menu.service';
})
@rendersSectionForMenu(MenuID.ADMIN, false)
export class AdminSidebarSectionComponent extends MenuSectionComponent implements OnInit {
/**
* This section resides in the Admin Sidebar
*/
menuID: MenuID = MenuID.ADMIN;
constructor(@Inject('sectionDataProvider') menuSection, protected menuService: MenuService, protected injector: Injector,) {

191
src/app/+admin/admin-sidebar/admin-sidebar.component.ts
View File

@@ -3,14 +3,17 @@ import { Observable } from 'rxjs/internal/Observable';
import { slide, slideHorizontal, slideSidebar } from '../../shared/animations/slide';
import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
import { MenuService } from '../../shared/menu/menu.service';
import { MenuID, SectionType } from '../../shared/menu/initial-menus-state';
import { MenuID, MenuItemType } from '../../shared/menu/initial-menus-state';
import { MenuComponent } from '../../shared/menu/menu.component';
import { TextSectionTypeModel } from '../../shared/menu/models/section-types/text.model';
import { LinkSectionTypeModel } from '../../shared/menu/models/section-types/link.model';
import { TextMenuItemModel } from '../../shared/menu/menu-item/models/text.model';
import { LinkMenuItemModel } from '../../shared/menu/menu-item/models/link.model';
import { AuthService } from '../../core/auth/auth.service';
import { first, map } from 'rxjs/operators';
import { combineLatest as combineLatestObservable } from 'rxjs';
/**
* Component representing the admin sidebar
*/
@Component({
selector: 'ds-admin-sidebar',
templateUrl: './admin-sidebar.component.html',
@@ -18,10 +21,32 @@ import { combineLatest as combineLatestObservable } from 'rxjs';
animations: [slideHorizontal, slideSidebar]
})
export class AdminSidebarComponent extends MenuComponent implements OnInit {
/**
* The menu ID of the Navbar is PUBLIC
* @type {MenuID.ADMIN}
*/
menuID = MenuID.ADMIN;
/**
* Observable that emits the width of the collapsible menu sections
*/
sidebarWidth: Observable<string>;
/**
* Is true when the sidebar is open, is false when the sidebar is animating or closed
* @type {boolean}
*/
sidebarOpen = true; // Open in UI, animation finished
/**
* Is true when the sidebar is closed, is false when the sidebar is animating or open
* @type {boolean}
*/
sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished
/**
* Emits true when either the menu OR the menu's preview is expanded, else emits false
*/
sidebarExpanded: Observable<boolean>;
constructor(protected menuService: MenuService,
@@ -32,6 +57,9 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
super(menuService, injector);
}
/**
* Set and calculate all initial values of the instance variables
*/
ngOnInit(): void {
this.createMenu();
super.ngOnInit();
@@ -53,6 +81,9 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
);
}
/**
* Initialize all menu sections and items for this menu
*/
createMenu() {
const menuList = [
/* News */
@@ -61,10 +92,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.TEXT,
type: MenuItemType.TEXT,
text: 'admin.sidebar.section.new'
} as TextSectionTypeModel,
icon: 'plus-circle'
} as TextMenuItemModel,
icon: 'plus-circle',
index: 0
},
{
id: 'new_community',
@@ -72,10 +104,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.new_community',
link: '/communities/submission'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'new_collection',
@@ -83,10 +115,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.new_collection',
link: '/collections/submission'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'new_item',
@@ -94,10 +126,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.new_item',
link: '/items/submission'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'new_item_version',
@@ -105,10 +137,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.new_item_version',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
/* Edit */
@@ -117,10 +149,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.TEXT,
type: MenuItemType.TEXT,
text: 'admin.sidebar.section.edit'
} as TextSectionTypeModel,
icon: 'pencil-alt'
} as TextMenuItemModel,
icon: 'pencil-alt',
index: 1
},
{
id: 'edit_community',
@@ -128,10 +161,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.edit_community',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'edit_collection',
@@ -139,10 +172,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.edit_collection',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'edit_item',
@@ -150,10 +183,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.edit_item',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
/* Import */
@@ -162,11 +195,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.TEXT,
type: MenuItemType.TEXT,
text: 'admin.sidebar.section.import'
} as TextSectionTypeModel,
} as TextMenuItemModel,
icon: 'sign-in-alt',
index: -1
index: 2
},
{
id: 'import_metadata',
@@ -174,11 +207,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.import_metadata',
link: '#'
} as LinkSectionTypeModel,
index: 1
} as LinkMenuItemModel,
},
{
id: 'import_batch',
@@ -186,10 +218,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.import_batch',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
/* Export */
@@ -198,10 +230,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.TEXT,
type: MenuItemType.TEXT,
text: 'admin.sidebar.section.export'
} as TextSectionTypeModel,
icon: 'sign-out-alt'
} as TextMenuItemModel,
icon: 'sign-out-alt',
index: 3
},
{
id: 'export_community',
@@ -209,10 +242,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.export_community',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'export_collection',
@@ -220,10 +253,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.export_collection',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'export_item',
@@ -231,20 +264,20 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.export_item',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
}, {
id: 'export_metadata',
parentID: 'export',
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.export_metadata',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
/* Access Control */
@@ -253,10 +286,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.TEXT,
type: MenuItemType.TEXT,
text: 'admin.sidebar.section.access_control'
} as TextSectionTypeModel,
icon: 'key'
} as TextMenuItemModel,
icon: 'key',
index: 4
},
{
id: 'access_control_people',
@@ -264,10 +298,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.access_control_people',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'access_control_groups',
@@ -275,10 +309,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.access_control_groups',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'access_control_authorizations',
@@ -286,10 +320,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.access_control_authorizations',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
/* Search */
@@ -298,10 +332,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.TEXT,
type: MenuItemType.TEXT,
text: 'admin.sidebar.section.find'
} as TextSectionTypeModel,
icon: 'search'
} as TextMenuItemModel,
icon: 'search',
index: 5
},
{
id: 'find_items',
@@ -309,10 +344,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.find_items',
link: '/search'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'find_withdrawn_items',
@@ -320,10 +355,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.find_withdrawn_items',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'find_private_items',
@@ -331,10 +366,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.find_private_items',
link: '/admin/items'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
/* Registries */
@@ -343,10 +378,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.TEXT,
type: MenuItemType.TEXT,
text: 'admin.sidebar.section.registries'
} as TextSectionTypeModel,
icon: 'list'
} as TextMenuItemModel,
icon: 'list',
index: 6
},
{
id: 'registries_metadata',
@@ -354,10 +390,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.registries_metadata',
link: '/registries/metadata'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'registries_format',
@@ -365,10 +401,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.registries_format',
link: '/registries/format'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
/* Curation tasks */
@@ -377,11 +413,12 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.curation_task',
link: '/curation'
} as LinkSectionTypeModel,
icon: 'filter'
} as LinkMenuItemModel,
icon: 'filter',
index: 7
},
/* Statistics */
@@ -390,11 +427,12 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.statistics_task',
link: '#'
} as LinkSectionTypeModel,
icon: 'chart-bar'
} as LinkMenuItemModel,
icon: 'chart-bar',
index: 8
},
/* Control Panel */
@@ -403,11 +441,12 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.control_panel',
link: '#'
} as LinkSectionTypeModel,
icon: 'cogs'
} as LinkMenuItemModel,
icon: 'cogs',
index: 9
},
];
menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));

34
src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
View File

@@ -5,13 +5,14 @@ import { slide } from '../../../shared/animations/slide';
import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service';
import { bgColor } from '../../../shared/animations/bgColor';
import { MenuID } from '../../../shared/menu/initial-menus-state';
import { rendersSectionForMenu } from '../../../shared/menu/menu.decorator';
import { MenuService } from '../../../shared/menu/menu.service';
import { MenuSection } from '../../../shared/menu/menu.reducer';
import { Observable } from 'rxjs';
import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { combineLatest as combineLatestObservable } from 'rxjs';
import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
/**
* Represents a expandable section in the sidebar
*/
@Component({
selector: 'ds-expandable-admin-sidebar-section',
templateUrl: './expandable-admin-sidebar-section.component.html',
@@ -21,19 +22,40 @@ import { combineLatest as combineLatestObservable } from 'rxjs';
})
@rendersSectionForMenu(MenuID.ADMIN, true)
export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionComponent implements OnInit {
subSections: Observable<MenuSection[]>;
/**
* This section resides in the Admin Sidebar
*/
menuID = MenuID.ADMIN;
/**
* The background color of the section when it's active
*/
sidebarActiveBg;
/**
* Emits true when the sidebar is currently collapsed, true when it's expanded
*/
sidebarCollapsed: Observable<boolean>;
/**
* Emits true when the sidebar's preview is currently collapsed, true when it's expanded
*/
sidebarPreviewCollapsed: Observable<boolean>;
/**
* Emits true when the menu section is expanded, else emits false
* This is true when the section is active AND either the sidebar or it's preview is open
*/
expanded: Observable<boolean>;
constructor(@Inject('sectionDataProvider') menuSection, protected menuService: MenuService,
private variableService: CSSVariableService, protected injector: Injector) {
super(menuSection, menuService, injector);
}
/**
* Set initial values for instance variables
*/
ngOnInit(): void {
super.ngOnInit();
this.subSections = this.menuService.getSubSectionsByParentID(this.menuID, this.section.id);

2
src/app/app.component.html
View File

@@ -1,7 +1,7 @@
<div class="outer-wrapper">
<ds-admin-sidebar></ds-admin-sidebar>
<div class="inner-wrapper" [@slideSidebarPadding]="{
value: (!(sidebarVisible | async) ? 'hidden' : (sidebarCollapsed | async) ? 'shown' : 'expanded'),
value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
}">
<ds-header-navbar-wrapper></ds-header-navbar-wrapper>

17
src/app/app.component.ts
View File

@@ -1,4 +1,4 @@
import { filter, first, take } from 'rxjs/operators';
import { filter, first, map, take } from 'rxjs/operators';
import {
AfterViewInit,
ChangeDetectionStrategy,
@@ -29,6 +29,8 @@ import { MenuService } from './shared/menu/menu.service';
import { MenuID } from './shared/menu/initial-menus-state';
import { Observable } from 'rxjs/internal/Observable';
import { slideSidebarPadding } from './shared/animations/slide';
import { combineLatest as combineLatestObservable } from 'rxjs';
import { HostWindowService } from './shared/host-window.service';
@Component({
selector: 'ds-app',
@@ -41,7 +43,7 @@ import { slideSidebarPadding } from './shared/animations/slide';
export class AppComponent implements OnInit, AfterViewInit {
isLoading = true;
sidebarVisible: Observable<boolean>;
sidebarCollapsed: Observable<boolean>;
slideSidebarOver: Observable<boolean>;
collapsedSidebarWidth: Observable<string>;
totalSidebarWidth: Observable<string>;
@@ -55,7 +57,8 @@ export class AppComponent implements OnInit, AfterViewInit {
private authService: AuthService,
private router: Router,
private cssService: CSSVariableService,
private menuService: MenuService
private menuService: MenuService,
private windowService: HostWindowService
) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
@@ -83,10 +86,16 @@ export class AppComponent implements OnInit, AfterViewInit {
filter((authenticated) => !authenticated)
).subscribe((authenticated) => this.authService.checkAuthenticationToken());
this.sidebarVisible = this.menuService.isMenuVisible(MenuID.ADMIN);
this.sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
this.collapsedSidebarWidth = this.cssService.getVariable('collapsedSidebarWidth');
this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth');
const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
//TODO FIX THIS:
this.slideSidebarOver = combineLatestObservable(sidebarCollapsed, this.windowService.isXsOrSm())
.pipe(
map(([collapsed, mobile]) => collapsed || mobile)
);
}
private storeCSSVariables() {

27
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
View File

@@ -2,15 +2,14 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
import { MenuService } from '../../shared/menu/menu.service';
import { MenuID } from '../../shared/menu/initial-menus-state';
import { rendersSectionForMenu } from '../../shared/menu/menu.decorator';
import { Observable } from 'rxjs/internal/Observable';
import { MenuSection } from '../../shared/menu/menu.reducer';
import { slide } from '../../shared/animations/slide';
import { first } from 'rxjs/operators';
import { HostWindowService } from '../../shared/host-window.service';
import { GenericConstructor } from '../../core/shared/generic-constructor';
import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component';
import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator';
/**
* Represents an expandable section in the navbar
*/
@Component({
selector: 'ds-expandable-navbar-section',
templateUrl: './expandable-navbar-section.component.html',
@@ -19,6 +18,9 @@ import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-sectio
})
@rendersSectionForMenu(MenuID.PUBLIC, true)
export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements OnInit {
/**
* This section resides in the Public Navbar
*/
menuID = MenuID.PUBLIC;
constructor(@Inject('sectionDataProvider') menuSection,
@@ -33,6 +35,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
super.ngOnInit();
}
/**
* Overrides the super function that activates this section (triggered on hover)
* Has an extra check to make sure the section can only be activated on non-mobile devices
* @param {Event} event The user event that triggered this function
*/
activateSection(event): void {
this.windowService.isXsOrSm().pipe(
first()
@@ -43,6 +50,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
});
}
/**
* Overrides the super function that deactivates this section (triggered on hover)
* Has an extra check to make sure the section can only be deactivated on non-mobile devices
* @param {Event} event The user event that triggered this function
*/
deactivateSection(event): void {
this.windowService.isXsOrSm().pipe(
first()
@@ -53,6 +65,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
});
}
/**
* Overrides the super function that toggles this section (triggered on click)
* Has an extra check to make sure the section can only be toggled on mobile devices
* @param {Event} event The user event that triggered this function
*/
toggleSection(event): void {
event.preventDefault();
this.windowService.isXsOrSm().pipe(

9
src/app/navbar/navbar-section/navbar-section.component.ts
View File

@@ -2,9 +2,11 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component';
import { MenuService } from '../../shared/menu/menu.service';
import { MenuID } from '../../shared/menu/initial-menus-state';
import { rendersSectionForMenu } from '../../shared/menu/menu.decorator';
import { HostWindowService } from '../../shared/host-window.service';
import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator';
/**
* Represents a non-expandable section in the navbar
*/
@Component({
selector: 'ds-navbar-section',
templateUrl: './navbar-section.component.html',
@@ -12,6 +14,9 @@ import { HostWindowService } from '../../shared/host-window.service';
})
@rendersSectionForMenu(MenuID.PUBLIC, false)
export class NavbarSectionComponent extends MenuSectionComponent implements OnInit {
/**
* This section resides in the Public Navbar
*/
menuID = MenuID.PUBLIC;
constructor(@Inject('sectionDataProvider') menuSection,

36
src/app/navbar/navbar.component.ts
View File

@@ -2,11 +2,14 @@ import { Component, Injector, OnInit } from '@angular/core';
import { slideMobileNav } from '../shared/animations/slide';
import { MenuComponent } from '../shared/menu/menu.component';
import { MenuService } from '../shared/menu/menu.service';
import { MenuID, SectionType } from '../shared/menu/initial-menus-state';
import { TextSectionTypeModel } from '../shared/menu/models/section-types/text.model';
import { LinkSectionTypeModel } from '../shared/menu/models/section-types/link.model';
import { MenuID, MenuItemType } from '../shared/menu/initial-menus-state';
import { TextMenuItemModel } from '../shared/menu/menu-item/models/text.model';
import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
import { HostWindowService } from '../shared/host-window.service';
/**
* Component representing the public navbar
*/
@Component({
selector: 'ds-navbar',
styleUrls: ['navbar.component.scss'],
@@ -14,6 +17,10 @@ import { HostWindowService } from '../shared/host-window.service';
animations: [slideMobileNav]
})
export class NavbarComponent extends MenuComponent implements OnInit {
/**
* The menu ID of the Navbar is PUBLIC
* @type {MenuID.PUBLIC}
*/
menuID = MenuID.PUBLIC;
constructor(protected menuService: MenuService,
@@ -28,6 +35,9 @@ export class NavbarComponent extends MenuComponent implements OnInit {
super.ngOnInit();
}
/**
* Initialize all menu sections and items for this menu
*/
createMenu() {
const menuList = [
/* News */
@@ -36,9 +46,9 @@ export class NavbarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.TEXT,
type: MenuItemType.TEXT,
text: 'admin.sidebar.section.browse_global'
} as TextSectionTypeModel,
} as TextMenuItemModel,
},
{
id: 'browse_global_communities_and_collections',
@@ -46,10 +56,10 @@ export class NavbarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.browse_global_communities_and_collections',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'browse_global_global_by_issue_date',
@@ -57,10 +67,10 @@ export class NavbarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.browse_global_by_issue_date',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
{
id: 'browse_global_by_author',
@@ -68,10 +78,10 @@ export class NavbarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.browse_global_by_author',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
/* Statistics */
@@ -80,10 +90,10 @@ export class NavbarComponent extends MenuComponent implements OnInit {
active: false,
visible: true,
model: {
type: SectionType.LINK,
type: MenuItemType.LINK,
text: 'admin.sidebar.section.statistics',
link: '#'
} as LinkSectionTypeModel,
} as LinkMenuItemModel,
},
];
menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));

8
src/app/navbar/navbar.effects.ts
View File

@@ -10,12 +10,20 @@ import { MenuID } from '../shared/menu/initial-menus-state';
@Injectable()
export class NavbarEffects {
menuID = MenuID.PUBLIC;
/**
* Effect that collapses the public menu on window resize
* @type {Observable<CollapseMenuAction>}
*/
@Effect() resize$ = this.actions$
.pipe(
ofType(HostWindowActionTypes.RESIZE),
map(() => new CollapseMenuAction(this.menuID))
);
/**
* Effect that collapses the public menu on reroute
* @type {Observable<CollapseMenuAction>}
*/
@Effect() routeChange$ = this.actions$
.pipe(
ofType(fromRouter.ROUTER_NAVIGATION),

11
src/app/shared/menu/initial-menus-state.ts
View File

@@ -1,14 +1,23 @@
import { MenusState } from './menu.reducer';
/**
* Availavle Menu IDs
*/
export enum MenuID {
ADMIN = 'admin-sidebar',
PUBLIC = 'public'
}
export enum SectionType {
/**
* List of possible MenuItemTypes
*/
export enum MenuItemType {
TEXT, LINK, ALTMETRIC, SEARCH
}
/**
* The initial state of the menus
*/
export const initialMenusState: MenusState = {
[MenuID.ADMIN]:
{

26
src/app/shared/menu/menu-item.decorator.ts Normal file
View File

@@ -0,0 +1,26 @@
import { MenuItemType } from './initial-menus-state';
const menuMenuItemComponentMap = new Map();
/**
* Decorator function to link a MenuItemType to a Component
* @param {MenuItemType} type The MenuItemType of the MenuSection's model
* @returns {(sectionComponent: GenericContructor) => void}
*/
export function rendersMenuItemForType(type: MenuItemType) {
return function decorator(sectionComponent: any) {
if (!sectionComponent) {
return;
}
menuMenuItemComponentMap.set(type, sectionComponent);
};
}
/**
* Retrieves the Component matching a given MenuItemType
* @param {MenuItemType} type The given MenuItemType
* @returns {GenericConstructor} The constructor of the Component that matches the MenuItemType
*/
export function getComponentForMenuItemType(type: MenuItemType) {
return menuMenuItemComponentMap.get(type);
}

0
src/app/shared/menu/type-components/link-type.component.html → src/app/shared/menu/menu-item/link-menu-item.component.html
View File

19
src/app/shared/menu/menu-item/link-menu-item.component.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Component, Inject, Input } from '@angular/core';
import { LinkMenuItemModel } from './models/link.model';
import { MenuItemType } from '../initial-menus-state';
import { rendersMenuItemForType } from '../menu-item.decorator';
/**
* Component that renders a menu section of type LINK
*/
@Component({
selector: 'ds-link-menu-item',
templateUrl: './link-menu-item.component.html'
})
@rendersMenuItemForType(MenuItemType.LINK)
export class LinkMenuItemComponent {
@Input() item: LinkMenuItemModel;
constructor(@Inject('itemModelProvider') item) {
this.item = item;
}
}

10
src/app/shared/menu/menu-item/models/altmetric.model.ts Normal file
View File

@@ -0,0 +1,10 @@
import { MenuItemType } from '../../initial-menus-state';
import { MenuItemModel } from './menu-item.model';
/**
* Model representing an Altmetric Menu Section
*/
export class AltmetricMenuItemModel implements MenuItemModel {
type = MenuItemType.ALTMETRIC;
url: string;
}

11
src/app/shared/menu/menu-item/models/link.model.ts Normal file
View File

@@ -0,0 +1,11 @@
import { MenuItemModel } from './menu-item.model';
import { MenuItemType } from '../../initial-menus-state';
/**
* Model representing an Link Menu Section
*/
export class LinkMenuItemModel implements MenuItemModel {
type = MenuItemType.LINK;
text: string;
link: string;
}

8
src/app/shared/menu/menu-item/models/menu-item.model.ts Normal file
View File

@@ -0,0 +1,8 @@
import { MenuItemType } from '../../initial-menus-state';
/**
* Interface for models representing a Menu Section
*/
export interface MenuItemModel {
type: MenuItemType;
}

11
src/app/shared/menu/menu-item/models/search.model.ts Normal file
View File

@@ -0,0 +1,11 @@
import { MenuItemType } from '../../initial-menus-state';
import { MenuItemModel } from './menu-item.model';
/**
* Model representing an Search Bar Menu Section
*/
export class SearchMenuItemModel implements MenuItemModel {
type = MenuItemType.SEARCH;
placeholder: string;
action: string;
}

10
src/app/shared/menu/menu-item/models/text.model.ts Normal file
View File

@@ -0,0 +1,10 @@
import { MenuItemType } from '../../initial-menus-state';
import { MenuItemModel } from './menu-item.model';
/**
* Model representing an Text Menu Section
*/
export class TextMenuItemModel implements MenuItemModel {
type = MenuItemType.TEXT;
text: string;
}

0
src/app/shared/menu/type-components/text-type.component.html → src/app/shared/menu/menu-item/text-menu-item.component.html
View File

19
src/app/shared/menu/menu-item/text-menu-item.component.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Component, Inject, Input } from '@angular/core';
import { TextMenuItemModel } from './models/text.model';
import { MenuItemType } from '../initial-menus-state';
import { rendersMenuItemForType } from '../menu-item.decorator';
/**
* Component that renders a menu section of type TEXT
*/
@Component({
selector: 'ds-text-menu-item',
templateUrl: './text-menu-item.component.html',
})
@rendersMenuItemForType(MenuItemType.TEXT)
export class TextMenuItemComponent {
@Input() item: TextMenuItemModel;
constructor(@Inject('itemModelProvider') item) {
this.item = item;
}
}

31
src/app/shared/menu/menu-section.decorator.ts
View File

@@ -1,16 +1,31 @@
import { SectionType } from './initial-menus-state';
import { MenuID } from './initial-menus-state';
const menuSectionTypeComponentMap = new Map();
const menuComponentMap = new Map();
export function rendersSectionForType(type: SectionType) {
return function decorator(sectionComponent: any) {
if (!sectionComponent) {
/**
* Decorator function to render a MenuSection for a menu
* @param {MenuID} menuID The ID of the Menu in which the section is rendered
* @param {boolean} expandable True when the section should be expandable, false when if should not
* @returns {(menuSectionWrapperComponent: GenericConstructor) => void}
*/
export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) {
return function decorator(menuSectionWrapperComponent: any) {
if (!menuSectionWrapperComponent) {
return;
}
menuSectionTypeComponentMap.set(type, sectionComponent);
if (!menuComponentMap.get(menuID)) {
menuComponentMap.set(menuID, new Map());
}
menuComponentMap.get(menuID).set(expandable, menuSectionWrapperComponent);
};
}
export function getComponentForSectionType(type: SectionType) {
return menuSectionTypeComponentMap.get(type);
/**
* Retrieves the component matching the given MenuID and whether or not it should be expandable
* @param {MenuID} menuID The ID of the Menu in which the section is rendered
* @param {boolean} expandable True when the section should be expandable, false when if should not
* @returns {GenericConstructor} The constructor of the matching Component
*/
export function getComponentForMenu(menuID: MenuID, expandable: boolean) {
return menuComponentMap.get(menuID).get(expandable);
}

69
src/app/shared/menu/menu-section/menu-section.component.ts
View File

@@ -1,48 +1,89 @@
import { Component, Injector, Input } from '@angular/core';
import { Component, Injector } from '@angular/core';
import { MenuService } from '../menu.service';
import { MenuSection } from '../menu.reducer';
import { getComponentForSectionType } from '../menu-section.decorator';
import { MenuID, SectionType } from '../initial-menus-state';
import { hasNoValue, hasValue } from '../../empty.util';
import { getComponentForMenuItemType } from '../menu-item.decorator';
import { MenuID, MenuItemType } from '../initial-menus-state';
import { hasNoValue } from '../../empty.util';
import { Observable } from 'rxjs/internal/Observable';
import { SectionTypeModel } from '../models/section-types/section-type.model';
import { MenuItemModel } from '../menu-item/models/menu-item.model';
import { distinctUntilChanged } from 'rxjs/operators';
import { GenericConstructor } from '../../../core/shared/generic-constructor';
/**
* A basic implementation of a menu section's component
*/
@Component({
selector: 'ds-menu-section',
template: ''
})
export class MenuSectionComponent {
/**
* Observable that emits whether or not this section is currently active
*/
active: Observable<boolean>;
/**
* The ID of the menu this section resides in
*/
menuID: MenuID;
/**
* List of Injectors for each dynamically rendered menu item of this section
*/
itemInjectors: Map<string, Injector> = new Map<string, Injector>();
/**
* List of child Components for each dynamically rendered menu item of this section
*/
itemComponents: Map<string, GenericConstructor<MenuSectionComponent>> = new Map<string, GenericConstructor<MenuSectionComponent>>();
/**
* List of available subsections in this section
*/
subSections: Observable<MenuSection[]>;
constructor(public section: MenuSection, protected menuService: MenuService, protected injector: Injector) {
}
/**
* Set initial values for instance variables
*/
ngOnInit(): void {
this.active = this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged());
this.initializeInjectorData();
}
/**
* Activate this section if it's currently inactive, deactivate it when it's currently active
* @param {Event} event The user event that triggered this method
*/
toggleSection(event: Event) {
event.preventDefault();
this.menuService.toggleActiveSection(this.menuID, this.section.id);
}
/**
* Activate this section
* @param {Event} event The user event that triggered this method
*/
activateSection(event: Event) {
event.preventDefault();
this.menuService.activateSection(this.menuID, this.section.id);
}
/**
* Deactivate this section
* @param {Event} event The user event that triggered this method
*/
deactivateSection(event: Event) {
event.preventDefault();
this.menuService.deactivateSection(this.menuID, this.section.id);
}
/**
* Method for initializing all injectors and component constructors for the menu items in this section
*/
initializeInjectorData() {
this.itemInjectors.set(this.section.id, this.getItemModelInjector(this.section.model));
this.itemComponents.set(this.section.id, this.getMenuItemComponent(this.section.model));
@@ -55,15 +96,25 @@ export class MenuSectionComponent {
})
}
getMenuItemComponent(itemModel?: SectionTypeModel) {
/**
* Retrieve the component for a given MenuItemModel object
* @param {MenuItemModel} itemModel The given MenuItemModel
* @returns {GenericConstructor} Emits the constructor of the Component that should be used to render this menu item model
*/
getMenuItemComponent(itemModel?: MenuItemModel) {
if (hasNoValue(itemModel)) {
itemModel = this.section.model;
}
const type: SectionType = itemModel.type;
return getComponentForSectionType(type);
const type: MenuItemType = itemModel.type;
return getComponentForMenuItemType(type);
}
getItemModelInjector(itemModel?: SectionTypeModel) {
/**
* Retrieve the Injector for a given MenuItemModel object
* @param {MenuItemModel} itemModel The given MenuItemModel
* @returns {Injector} The Injector that injects the data for this menu item into the item's component
*/
getItemModelInjector(itemModel?: MenuItemModel) {
if (hasNoValue(itemModel)) {
itemModel = this.section.model;
}

54
src/app/shared/menu/menu.actions.ts
View File

@@ -3,6 +3,14 @@ import { MenuID } from './initial-menus-state';
import { type } from '../ngrx/type';
import { MenuSection } from './menu.reducer';
/**
* For each action type in an action group, make a simple
* enum object for all of this group's action types.
*
* The 'type' utility function coerces strings into string
* literal types and runs a simple check to guarantee all
* action types in the application are unique.
*/
export const MenuActionTypes = {
COLLAPSE_MENU: type('dspace/menu/COLLAPSE_MENU'),
TOGGLE_MENU: type('dspace/menu/TOGGLE_MENU'),
@@ -23,6 +31,9 @@ export const MenuActionTypes = {
/* tslint:disable:max-classes-per-file */
// MENU STATE ACTIONS
/**
* Action used to collapse a single menu
*/
export class CollapseMenuAction implements Action {
type = MenuActionTypes.COLLAPSE_MENU;
menuID: MenuID;
@@ -32,6 +43,9 @@ export class CollapseMenuAction implements Action {
}
}
/**
* Action used to expand a single menu
*/
export class ExpandMenuAction implements Action {
type = MenuActionTypes.EXPAND_MENU;
menuID: MenuID;
@@ -41,6 +55,9 @@ export class ExpandMenuAction implements Action {
}
}
/**
* Action used to collapse a single menu when it's expanded and expanded it when it's collapse
*/
export class ToggleMenuAction implements Action {
type = MenuActionTypes.TOGGLE_MENU;
menuID: MenuID;
@@ -50,6 +67,9 @@ export class ToggleMenuAction implements Action {
}
}
/**
* Action used to show a single menu
*/
export class ShowMenuAction implements Action {
type = MenuActionTypes.SHOW_MENU;
menuID: MenuID;
@@ -59,6 +79,9 @@ export class ShowMenuAction implements Action {
}
}
/**
* Action used to hide a single menu
*/
export class HideMenuAction implements Action {
type = MenuActionTypes.HIDE_MENU;
menuID: MenuID;
@@ -68,6 +91,9 @@ export class HideMenuAction implements Action {
}
}
/**
* Action used to collapse a single menu's preview
*/
export class CollapseMenuPreviewAction implements Action {
type = MenuActionTypes.COLLAPSE_MENU_PREVIEW;
menuID: MenuID;
@@ -77,6 +103,9 @@ export class CollapseMenuPreviewAction implements Action {
}
}
/**
* Action used to expand a single menu's preview
*/
export class ExpandMenuPreviewAction implements Action {
type = MenuActionTypes.EXPAND_MENU_PREVIEW;
menuID: MenuID;
@@ -86,8 +115,10 @@ export class ExpandMenuPreviewAction implements Action {
}
}
// MENU STRUCTURING ACTIONS
// MENU SECTION ACTIONS
/**
* Action used to perform state changes for a section of a certain menu
*/
export abstract class MenuSectionAction implements Action {
type;
menuID: MenuID;
@@ -99,6 +130,9 @@ export abstract class MenuSectionAction implements Action {
}
}
/**
* Action used to add a section to a certain menu
*/
export class AddMenuSectionAction extends MenuSectionAction {
type = MenuActionTypes.ADD_SECTION;
section: MenuSection;
@@ -109,6 +143,9 @@ export class AddMenuSectionAction extends MenuSectionAction {
}
}
/**
* Action used to remove a section from a certain menu
*/
export class RemoveMenuSectionAction extends MenuSectionAction {
type = MenuActionTypes.REMOVE_SECTION;
@@ -118,6 +155,9 @@ export class RemoveMenuSectionAction extends MenuSectionAction {
}
}
/**
* Action used to hide a section of a certain menu
*/
export class HideMenuSectionAction extends MenuSectionAction {
type = MenuActionTypes.HIDE_SECTION;
@@ -127,7 +167,7 @@ export class HideMenuSectionAction extends MenuSectionAction {
}
/**
* Used to expand a section
* Action used to show a section of a certain menu
*/
export class ShowMenuSectionAction extends MenuSectionAction {
type = MenuActionTypes.SHOW_SECTION;
@@ -137,6 +177,9 @@ export class ShowMenuSectionAction extends MenuSectionAction {
}
}
/**
* Action used to make a section of a certain menu active
*/
export class ActivateMenuSectionAction extends MenuSectionAction {
type = MenuActionTypes.ACTIVATE_SECTION;
@@ -146,7 +189,7 @@ export class ActivateMenuSectionAction extends MenuSectionAction {
}
/**
* Used to expand a section
* Action used to make a section of a certain menu inactive
*/
export class DeactivateMenuSectionAction extends MenuSectionAction {
type = MenuActionTypes.DEACTIVATE_SECTION;
@@ -156,6 +199,9 @@ export class DeactivateMenuSectionAction extends MenuSectionAction {
}
}
/**
* Action used to make an active section of a certain menu inactive or an inactive section of a certain menu active
*/
export class ToggleActiveMenuSectionAction extends MenuSectionAction {
type = MenuActionTypes.TOGGLE_ACTIVE_SECTION;

70
src/app/shared/menu/menu.component.ts
View File

@@ -4,27 +4,64 @@ import { MenuService } from '../../shared/menu/menu.service';
import { MenuID } from '../../shared/menu/initial-menus-state';
import { MenuSection } from '../../shared/menu/menu.reducer';
import { first, map } from 'rxjs/operators';
import { getComponentForMenu } from './menu.decorator';
import { GenericConstructor } from '../../core/shared/generic-constructor';
import { MenuSectionComponent } from './menu-section/menu-section.component';
import { getComponentForMenu } from './menu-section.decorator';
/**
* A basic implementation of a MenuComponent
*/
@Component({
selector: 'ds-menu',
template: ''
})
export class MenuComponent implements OnInit {
/**
* The ID of the Menu (See MenuID)
*/
menuID: MenuID;
/**
* Observable that emits whether or not this menu is currently collapsed
*/
menuCollapsed: Observable<boolean>;
/**
* Observable that emits whether or not this menu's preview is currently collapsed
*/
menuPreviewCollapsed: Observable<boolean>;
/**
* Observable that emits whether or not this menu is currently visible
*/
menuVisible: Observable<boolean>;
/**
* List of top level sections in this Menu
*/
sections: Observable<MenuSection[]>;
/**
* List of Injectors for each dynamically rendered menu section
*/
sectionInjectors: Map<string, Injector> = new Map<string, Injector>();
/**
* List of child Components for each dynamically rendered menu section
*/
sectionComponents: Map<string, GenericConstructor<MenuSectionComponent>> = new Map<string, GenericConstructor<MenuSectionComponent>>();
/**
* Prevent unnecessary rerendering
*/
changeDetection: ChangeDetectionStrategy.OnPush;
constructor(protected menuService: MenuService, protected injector: Injector) {
}
/**
* Sets all instance variables to their initial values
*/
ngOnInit(): void {
this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
@@ -38,32 +75,56 @@ export class MenuComponent implements OnInit {
})
}
/**
* Collapse this menu when it's currently expanded, expand it when its currently collapsed
* @param {Event} event The user event that triggered this method
*/
toggle(event: Event) {
event.preventDefault();
this.menuService.toggleMenu(this.menuID);
}
/**
* Expand this menu
* @param {Event} event The user event that triggered this method
*/
expand(event: Event) {
event.preventDefault();
this.menuService.expandMenu(this.menuID);
}
/**
* Collapse this menu
* @param {Event} event The user event that triggered this method
*/
collapse(event: Event) {
event.preventDefault();
this.menuService.collapseMenu(this.menuID);
}
/**
* Expand this menu's preview
* @param {Event} event The user event that triggered this method
*/
expandPreview(event: Event) {
console.log("HOI IK HOVER");
event.preventDefault();
this.menuService.expandMenuPreview(this.menuID);
}
/**
* Collapse this menu's preview
* @param {Event} event The user event that triggered this method
*/
collapsePreview(event: Event) {
event.preventDefault();
this.menuService.collapseMenuPreview(this.menuID);
}
/**
* Retrieve the component for a given MenuSection object
* @param {MenuSection} section The given MenuSection
* @returns {Observable<GenericConstructor<MenuSectionComponent>>} Emits the constructor of the Component that should be used to render this object
*/
getSectionComponent(section: MenuSection): Observable<GenericConstructor<MenuSectionComponent>> {
return this.menuService.hasSubSections(this.menuID, section.id).pipe(
map((expandable: boolean) => {
@@ -73,6 +134,11 @@ export class MenuComponent implements OnInit {
);
}
/**
* Retrieve the Injector for a given MenuSection object
* @param {MenuSection} section The given MenuSection
* @returns {Injector} The Injector that injects the data for this menu section into the section's component
*/
getSectionDataInjector(section: MenuSection) {
return Injector.create({
providers: [{ provide: 'sectionDataProvider', useFactory: () => (section), deps: [] }],

19
src/app/shared/menu/menu.decorator.ts
View File

@@ -1,19 +0,0 @@
import { MenuID } from './initial-menus-state';
const menuComponentMap = new Map();
export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) {
return function decorator(menuSectionWrapperComponent: any) {
if (!menuSectionWrapperComponent) {
return;
}
if (!menuComponentMap.get(menuID)) {
menuComponentMap.set(menuID, new Map());
}
menuComponentMap.get(menuID).set(expandable, menuSectionWrapperComponent);
};
}
export function getComponentForMenu(menuID: MenuID, expandable: boolean) {
return menuComponentMap.get(menuID).get(expandable);
}

14
src/app/shared/menu/menu.module.ts
View File

@@ -1,21 +1,21 @@
import { MenuSectionComponent } from './menu-section/menu-section.component';
import { MenuComponent } from './menu.component';
import { LinkTypeMenuItemComponent } from './type-components/link-type.component';
import { TextTypeMenuItemComponent } from './type-components/text-type.component';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule } from '@angular/router';
import { LinkMenuItemComponent } from './menu-item/link-menu-item.component';
import { TextMenuItemComponent } from './menu-item/text-menu-item.component';
const COMPONENTS = [
MenuSectionComponent,
MenuComponent,
LinkTypeMenuItemComponent,
TextTypeMenuItemComponent
LinkMenuItemComponent,
TextMenuItemComponent
];
const ENTRY_COMPONENTS = [
LinkTypeMenuItemComponent,
TextTypeMenuItemComponent
LinkMenuItemComponent,
TextMenuItemComponent
];
const MODULES = [
@@ -47,7 +47,7 @@ const PROVIDERS = [
})
/**
* This module handles all components and pipes that need to be shared among multiple other modules
* This module handles all components, providers and modules that are needed for the menu
*/
export class MenuModule {

103
src/app/shared/menu/menu.reducer.ts
View File

@@ -1,21 +1,29 @@
import {
ActivateMenuSectionAction,
AddMenuSectionAction, DeactivateMenuSectionAction,
AddMenuSectionAction,
DeactivateMenuSectionAction,
HideMenuSectionAction,
MenuAction,
MenuActionTypes,
MenuSectionAction,
RemoveMenuSectionAction,
ShowMenuSectionAction, ToggleActiveMenuSectionAction
ShowMenuSectionAction,
ToggleActiveMenuSectionAction
} from './menu.actions';
import { initialMenusState, MenuID, SectionType } from './initial-menus-state';
import { initialMenusState, MenuID } from './initial-menus-state';
import { hasValue } from '../empty.util';
import { SectionTypeModel } from './models/section-types/section-type.model';
import { MenuItemModel } from './menu-item/models/menu-item.model';
/**
* Represents the state of all menus in the store
*/
export type MenusState = {
[id in MenuID]: MenuState;
}
/**
* Represents the state of a single menu in the store
*/
export interface MenuState {
id: MenuID;
collapsed: boolean
@@ -25,24 +33,39 @@ export interface MenuState {
sectionToSubsectionIndex: MenuSectionIndex;
}
/**
* Represents the a mapping of all sections to their subsections for a menu in the store
*/
export interface MenuSectionIndex {
[id: string]: string[]
}
/**
* Represents the state of all menu sections in the store
*/
export interface MenuSections {
[id: string]: MenuSection;
}
/**
* Represents the state of a single menu section in the store
*/
export class MenuSection {
id: string;
parentID?: string;
visible: boolean;
active: boolean;
model: SectionTypeModel;
model: MenuItemModel;
index?: number;
icon?: string;
}
/**
* Reducer that handles MenuActions to update the MenusState
* @param {MenusState} state The initial MenusState
* @param {MenuAction} action The Action to be performed on the state
* @returns {MenusState} The new, reducer MenusState
*/
export function menusReducer(state: MenusState = initialMenusState, action: MenuAction): MenusState {
const menuState: MenuState = state[action.menuID];
switch (action.type) {
@@ -102,16 +125,29 @@ export function menusReducer(state: MenusState = initialMenusState, action: Menu
}
}
/**
* Add a section the a certain menu
* @param {MenusState} state The initial state
* @param {AddMenuSectionAction} action Action containing the new section and the menu's ID
* @returns {MenusState} The new reduced state
*/
function addSection(state: MenusState, action: AddMenuSectionAction) {
// let newState = addToIndex(state, action.section, action.menuID);
const newState = putSectionState(state, action, action.section);
return reorderSections(newState, action)
}
/**
* Reorder all sections based on their index field
* @param {MenusState} state The initial state
* @param {MenuSectionAction} action Action containing the menu ID of the menu that is to be reordered
* @returns {MenusState} The new reduced state
*/
function reorderSections(state: MenusState, action: MenuSectionAction) {
const menuState: MenuState = state[action.menuID];
const newSectionState: MenuSections = {};
const newSectionIndexState: MenuSectionIndex = {};
Object.values(menuState.sections).sort((sectionA: MenuSection, sectionB: MenuSection) => {
const indexA = sectionA.index || 0;
const indexB = sectionB.index || 0;
@@ -130,6 +166,12 @@ function reorderSections(state: MenusState, action: MenuSectionAction) {
return Object.assign({}, state, { [action.menuID]: newMenuState });
}
/**
* Remove a section from a certain menu
* @param {MenusState} state The initial state
* @param {RemoveMenuSectionAction} action Action containing the section ID and menu ID of the section that should be removed
* @returns {MenusState} The new reduced state
*/
function removeSection(state: MenusState, action: RemoveMenuSectionAction) {
const menuState: MenuState = state[action.menuID];
const id = action.id;
@@ -139,6 +181,13 @@ function removeSection(state: MenusState, action: RemoveMenuSectionAction) {
return Object.assign({}, newState, { [action.menuID]: newMenuState });
}
/**
* Remove a section from the index of a certain menu
* @param {MenusState} state The initial state
* @param {MenuSection} action The MenuSection of which the ID should be removed from the index
* @param {MenuID} action The Menu ID to which the section belonged
* @returns {MenusState} The new reduced state
*/
function removeFromIndex(state: MenusState, section: MenuSection, menuID: MenuID) {
const sectionID = section.id;
const parentID = section.parentID;
@@ -153,14 +202,32 @@ function removeFromIndex(state: MenusState, section: MenuSection, menuID: MenuID
return state;
}
/**
* Hide a certain section
* @param {MenusState} state The initial state
* @param {HideMenuSectionAction} action Action containing data to identify the section to be updated
* @returns {MenusState} The new reduced state
*/
function hideSection(state: MenusState, action: HideMenuSectionAction) {
return updateSectionState(state, action, { visible: false });
}
/**
* Show a certain section
* @param {MenusState} state The initial state
* @param {ShowMenuSectionAction} action Action containing data to identify the section to be updated
* @returns {MenusState} The new reduced state
*/
function showSection(state: MenusState, action: ShowMenuSectionAction) {
return updateSectionState(state, action, { visible: true });
}
/**
* Deactivate a certain section
* @param {MenusState} state The initial state
* @param {DeactivateMenuSectionAction} action Action containing data to identify the section to be updated
* @returns {MenusState} The new reduced state
*/
function deactivateSection(state: MenusState, action: DeactivateMenuSectionAction) {
const sectionState: MenuSection = state[action.menuID].sections[action.id];
if (hasValue(sectionState)) {
@@ -168,6 +235,12 @@ function deactivateSection(state: MenusState, action: DeactivateMenuSectionActio
}
}
/**
* Activate a certain section
* @param {MenusState} state The initial state
* @param {DeactivateMenuSectionAction} action Action containing data to identify the section to be updated
* @returns {MenusState} The new reduced state
*/
function activateSection(state: MenusState, action: ActivateMenuSectionAction) {
const sectionState: MenuSection = state[action.menuID].sections[action.id];
if (hasValue(sectionState)) {
@@ -175,6 +248,12 @@ function activateSection(state: MenusState, action: ActivateMenuSectionAction) {
}
}
/**
* Deactivate a certain section when it's currently active, activate a certain section when it's currently inactive
* @param {MenusState} state The initial state
* @param {DeactivateMenuSectionAction} action Action containing data to identify the section to be updated
* @returns {MenusState} The new reduced state
*/
function toggleActiveSection(state: MenusState, action: ToggleActiveMenuSectionAction) {
const sectionState: MenuSection = state[action.menuID].sections[action.id];
if (hasValue(sectionState)) {
@@ -183,6 +262,13 @@ function toggleActiveSection(state: MenusState, action: ToggleActiveMenuSectionA
return state;
}
/**
* Add or replace a section in the state
* @param {MenusState} state The initial state
* @param {MenuAction} action The action which contains the menu ID of the menu of which the state is to be updated
* @param {MenuSection} section The section that will be added or replaced in the state
* @returns {MenusState} The new reduced state
*/
function putSectionState(state: MenusState, action: MenuAction, section: MenuSection): MenusState {
const menuState: MenuState = state[action.menuID];
const newSections = Object.assign({}, menuState.sections, {
@@ -194,6 +280,13 @@ function putSectionState(state: MenusState, action: MenuAction, section: MenuSec
return Object.assign({}, state, { [action.menuID]: newMenuState });
}
/**
* Update a section
* @param {MenusState} state The initial state
* @param {MenuSectionAction} action The action containing the menu ID and section ID
* @param {any} update A partial section that represents the part that should be updated in an existing section
* @returns {MenusState} The new reduced state
*/
function updateSectionState(state: MenusState, action: MenuSectionAction, update: any): MenusState {
const menuState: MenuState = state[action.menuID];
const sectionState = menuState.sections[action.id];

110
src/app/shared/menu/menu.service.ts
View File

@@ -44,10 +44,21 @@ export class MenuService {
constructor(private store: Store<MenusState>) {
}
/**
* Retrieve a menu's state by its ID
* @param {MenuID} id ID of the requested Menu
* @returns {Observable<MenuState>} Observable that emits the current state of the requested Menu
*/
getMenu(id: MenuID): Observable<MenuState> {
return this.store.pipe(select(menuByIDSelector(id)));
}
/**
* Retrieve all top level sections of a certain menu
* @param {MenuID} menuID ID of the Menu
* @param {boolean} mustBeVisible True if you only want to request visible sections, false if you want to request all top level sections
* @returns {Observable<MenuSection[]>} Observable that emits a list of MenuSections that are top sections of the given menu
*/
getMenuTopSections(menuID: MenuID, mustBeVisible = true): Observable<MenuSection[]> {
return this.store.pipe(
select(menuByIDSelector(menuID)),
@@ -61,6 +72,13 @@ export class MenuService {
);
}
/**
* Retrieve all sub level sections of a certain top section in a given menu
* @param {MenuID} menuID The ID of the menu
* @param {string} parentID The ID of the parent section
* @param {boolean} mustBeVisible True if you only want to request visible sections, false if you want to request all sections
* @returns {Observable<MenuSection[]>} Observable that emits a list of MenuSections that are sub sections of the given menu and parent section
*/
getSubSectionsByParentID(menuID: MenuID, parentID: string, mustBeVisible = true): Observable<MenuSection[]> {
return this.store.pipe(
select(menuByIDSelector(menuID)),
@@ -73,6 +91,12 @@ export class MenuService {
);
}
/**
* Check if the a menu's top level section has subsections
* @param {MenuID} menuID The ID of the Menu
* @param {string} parentID The ID of the top level parent section
* @returns {Observable<boolean>} Observable that emits true when the given parent section has sub sections, false if the given parent section does not have any sub sections
*/
hasSubSections(menuID: MenuID, parentID: string): Observable<boolean> {
return this.store.pipe(
select(menuByIDSelector(menuID)),
@@ -81,6 +105,12 @@ export class MenuService {
);
}
/**
* Retrieve a specific menu section by its menu ID and section ID
* @param {MenuID} menuID The ID of the menu the section resides in
* @param {string} sectionId The ID of the requested section
* @returns {Observable<MenuSection>} Observable that emits the found MenuSection
*/
getMenuSection(menuID: MenuID, sectionId: string): Observable<MenuSection> {
return this.store.pipe(
select(menuByIDSelector(menuID)),
@@ -88,76 +118,156 @@ export class MenuService {
);
}
/**
* Add a new section to the store
* @param {MenuID} menuID The menu to which the new section is to be added
* @param {MenuSection} section The section to be added
*/
addSection(menuID: MenuID, section: MenuSection) {
this.store.dispatch(new AddMenuSectionAction(menuID, section));
}
/**
* Remove a section from the store
* @param {MenuID} menuID The menu from which the section is to be removed
* @param {string} sectionID The ID of the section that should be removed
*/
removeSection(menuID: MenuID, sectionID: string) {
this.store.dispatch(new RemoveMenuSectionAction(menuID, sectionID));
}
/**
* Check if a given menu is collapsed
* @param {MenuID} menuID The ID of the menu that is to be checked
* @returns {Observable<boolean>} Emits true if the given menu is collapsed, emits falls when it's expanded
*/
isMenuCollapsed(menuID: MenuID): Observable<boolean> {
return this.getMenu(menuID).pipe(
map((state: MenuState) => state.collapsed)
);
}
/**
* Check if a given menu's preview is collapsed
* @param {MenuID} menuID The ID of the menu that is to be checked
* @returns {Observable<boolean>} Emits true if the given menu's preview is collapsed, emits falls when it's expanded
*/
isMenuPreviewCollapsed(menuID: MenuID): Observable<boolean> {
return this.getMenu(menuID).pipe(
map((state: MenuState) => state.previewCollapsed)
);
}
/**
* Check if a given menu is visible
* @param {MenuID} menuID The ID of the menu that is to be checked
* @returns {Observable<boolean>} Emits true if the given menu is visible, emits falls when it's hidden
*/
isMenuVisible(menuID: MenuID): Observable<boolean> {
return this.getMenu(menuID).pipe(
map((state: MenuState) => state.visible)
);
}
/**
* Expands a given menu
* @param {MenuID} menuID The ID of the menu
*/
expandMenu(menuID: MenuID): void {
this.store.dispatch(new ExpandMenuAction(menuID));
}
/**
* Collapses a given menu
* @param {MenuID} menuID The ID of the menu
*/
collapseMenu(menuID: MenuID): void {
this.store.dispatch(new CollapseMenuAction(menuID));
}
/**
* Expands a given menu's preview
* @param {MenuID} menuID The ID of the menu
*/
expandMenuPreview(menuID: MenuID): void {
this.store.dispatch(new ExpandMenuPreviewAction(menuID));
}
/**
* Collapses a given menu's preview
* @param {MenuID} menuID The ID of the menu
*/
collapseMenuPreview(menuID: MenuID): void {
this.store.dispatch(new CollapseMenuPreviewAction(menuID));
}
/**
* Collapse a given menu when it's currently expanded or expand it when it's currently collapsed
* @param {MenuID} menuID The ID of the menu
*/
toggleMenu(menuID: MenuID): void {
this.store.dispatch(new ToggleMenuAction(menuID));
}
/**
* Show a given menu
* @param {MenuID} menuID The ID of the menu
*/
showMenu(menuID: MenuID): void {
this.store.dispatch(new ShowMenuAction(menuID));
}
/**
* Hide a given menu
* @param {MenuID} menuID The ID of the menu
*/
hideMenu(menuID: MenuID): void {
this.store.dispatch(new HideMenuAction(menuID));
}
/**
* Activate a given menu section when it's currently inactive or deactivate it when it's currently active
* @param {MenuID} menuID The ID of the menu
* @param {string} id The ID of the section
*/
toggleActiveSection(menuID: MenuID, id: string): void {
this.store.dispatch(new ToggleActiveMenuSectionAction(menuID, id));
}
/**
* Activate a given menu section
* @param {MenuID} menuID The ID of the menu
* @param {string} id The ID of the section
*/
activateSection(menuID: MenuID, id: string): void {
this.store.dispatch(new ActivateMenuSectionAction(menuID, id));
}
/**
* Deactivate a given menu section
* @param {MenuID} menuID The ID of the menu
* @param {string} id The ID of the section
*/
deactivateSection(menuID: MenuID, id: string): void {
this.store.dispatch(new DeactivateMenuSectionAction(menuID, id));
}
/**
* Check whether a given section is currently active or not
* @param {MenuID} menuID The ID of the Menu the section resides in
* @param {string} id The ID of the menu section to check
* @returns {Observable<boolean>} Emits true when the given section is currently active, false when the given section is currently inactive
*/
isSectionActive(menuID: MenuID, id: string): Observable<boolean> {
return this.getMenuSection(menuID, id).pipe(map((section) => section.active));
}
/**
* Check whether a given section is currently visible or not
* @param {MenuID} menuID The ID of the Menu the section resides in
* @param {string} id The ID of the menu section to check
* @returns {Observable<boolean>} Emits true when the given section is currently visible, false when the given section is currently hidden
*/
isSectionVisible(menuID: MenuID, id: string): Observable<boolean> {
return this.getMenuSection(menuID, id).pipe(map((section) => section.visible));
}

7
src/app/shared/menu/models/section-types/altmetric.model.ts
View File

@@ -1,7 +0,0 @@
import { SectionType } from '../../initial-menus-state';
import { SectionTypeModel } from './section-type.model';
export class AltmetricSectionTypeModel implements SectionTypeModel {
type = SectionType.ALTMETRIC;
url: string;
}

8
src/app/shared/menu/models/section-types/link.model.ts
View File

@@ -1,8 +0,0 @@
import { SectionTypeModel } from './section-type.model';
import { SectionType } from '../../initial-menus-state';
export class LinkSectionTypeModel implements SectionTypeModel {
type = SectionType.LINK;
text: string;
link: string;
}

8
src/app/shared/menu/models/section-types/search.model.ts
View File

@@ -1,8 +0,0 @@
import { SectionTypeModel } from './section-type.model';
import { SectionType } from '../../initial-menus-state';
export class SearchSectionTypeModel implements SectionTypeModel {
type = SectionType.SEARCH;
placeholder: string;
action: string;
}

5
src/app/shared/menu/models/section-types/section-type.model.ts
View File

@@ -1,5 +0,0 @@
import { SectionType } from '../../initial-menus-state';
export interface SectionTypeModel {
type: SectionType;
}

7
src/app/shared/menu/models/section-types/text.model.ts
View File

@@ -1,7 +0,0 @@
import { SectionTypeModel } from './section-type.model';
import { SectionType } from '../../initial-menus-state';
export class TextSectionTypeModel implements SectionTypeModel {
type = SectionType.TEXT;
text: string;
}

16
src/app/shared/menu/type-components/link-type.component.ts
View File

@@ -1,16 +0,0 @@
import { Component, Inject, Input } from '@angular/core';
import { LinkSectionTypeModel } from '../models/section-types/link.model';
import { SectionType } from '../initial-menus-state';
import { rendersSectionForType } from '../menu-section.decorator';
@Component({
selector: 'ds-link-type-menu-item',
templateUrl: './link-type.component.html'
})
@rendersSectionForType(SectionType.LINK)
export class LinkTypeMenuItemComponent {
@Input() item: LinkSectionTypeModel;
constructor(@Inject('itemModelProvider') item) {
this.item = item;
}
}

16
src/app/shared/menu/type-components/text-type.component.ts
View File

@@ -1,16 +0,0 @@
import { Component, Inject, Input } from '@angular/core';
import { TextSectionTypeModel } from '../models/section-types/text.model';
import { SectionType } from '../initial-menus-state';
import { rendersSectionForType } from '../menu-section.decorator';
@Component({
selector: 'ds-text-type-menu-item',
templateUrl: './text-type.component.html',
})
@rendersSectionForType(SectionType.TEXT)
export class TextTypeMenuItemComponent {
@Input() item: TextSectionTypeModel;
constructor(@Inject('itemModelProvider') item) {
this.item = item;
}
}