menu: add prefix and suffix

Allows you to add prefix and suffix on the menu item.

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>

projects/ng-core-tester/src/app/service/menu.service.ts

@@ -76,6 +76,8 @@ export class MenuService {
     records.addChild('UNISI records')
       .setRouterLink(['/unisi', 'record', 'search', 'documents']);
     records.addChild('Backend records')
+      .setPrefix('[admin]')
+      .setSuffix('[search]', 'text-warning')
       .setRouterLink(['/admin', 'record', 'search', 'documents']);
     records.addChild('Document records')
       .setRouterLink(['/records', 'documents']);

projects/rero/ng-core/src/lib/core.module.ts

@@ -39,6 +39,7 @@ import { TranslateLoader } from './translate/translate-loader';
 import { MenuComponent } from './widget/menu/menu.component';
 import { MenuWidgetComponent } from './menu/menu-widget/menu-widget.component';
 import { SortListComponent } from './widget/sort-list/sort-list.component';
+import { MenuWidgetPrefixSuffixComponent } from './menu/menu-widget/menu-widget-prefix-suffix/menu-widget-prefix-suffix.component';
 
 @NgModule({
   declarations: [
@@ -57,7 +58,8 @@ import { SortListComponent } from './widget/sort-list/sort-list.component';
     ErrorComponent,
     FilesizePipe,
     MenuWidgetComponent,
-    SortListComponent
+    SortListComponent,
+    MenuWidgetPrefixSuffixComponent
   ],
   imports: [
     CommonModule,

projects/rero/ng-core/src/lib/menu/extension/core-extension.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { cloneDeep } from 'lodash-es';
-import { ItemInterface } from '../item-interface';
+import { MenuItemInterface } from '../menu-item-interface';
 import { ExtensionInterface } from './extension-interface';
 import { OptionsInterface } from './options-interface';
 
@@ -46,7 +46,7 @@ export class CoreExtension implements ExtensionInterface {
    * @param item - ItemInterface
    * @param options - OptionsInterface
    */
-  buildItem(item: ItemInterface, options: OptionsInterface) {
+  buildItem(item: MenuItemInterface, options: OptionsInterface) {
     item
       .setUri(options.uri)
       .setRouterLink(options.routerLink)

projects/rero/ng-core/src/lib/menu/extension/extension-interface.ts

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { ItemInterface } from '../item-interface';
+import { MenuItemInterface } from '../menu-item-interface';
 
 export interface ExtensionInterface {
   /**
@@ -29,5 +29,5 @@ export interface ExtensionInterface {
    * @param item - ItemInterface
    * @param options - array
    */
-  buildItem(item: ItemInterface, options: {}): void;
+  buildItem(item: MenuItemInterface, options: {}): void;
 }

projects/rero/ng-core/src/lib/menu/menu-factory-interface.ts

@@ -1,5 +1,3 @@
-import { ItemInterface } from './item-interface';
-
 /*
  * Invenio angular core
  * Copyright (C) 2020 RERO
@@ -16,12 +14,14 @@ import { ItemInterface } from './item-interface';
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { MenuItemInterface } from './menu-item-interface';
+
 export interface MenuFactoryInterface {
   /**
    * Creates a menu item
    * @param name - string
    * @param options - array
    * @return ItemInterface
    */
-  createItem(name: string, options?: {}): ItemInterface;
+  createItem(name: string, options?: {}): MenuItemInterface;
 }

projects/rero/ng-core/src/lib/menu/menu-factory.spec.ts

@@ -17,13 +17,13 @@
 import { MenuFactory } from './menu-factory';
 import { MenuItem } from './menu-item';
 import { ExtensionInterface } from './extension/extension-interface';
-import { ItemInterface } from './item-interface';
+import { MenuItemInterface } from './menu-item-interface';
 
 class ExtensionMock implements ExtensionInterface {
   buildOptions(options: {}): {} {
     return {};
   }
-  buildItem(item: ItemInterface, options: {}): void {
+  buildItem(item: MenuItemInterface, options: {}): void {
   }
 }
 

projects/rero/ng-core/src/lib/menu/item-interface.ts → projects/rero/ng-core/src/lib/menu/menu-item-interface.ts

@@ -16,10 +16,16 @@
  */
 import { MenuFactoryInterface } from './menu-factory-interface';
 
-export interface ItemInterface {
+export interface MenuItemInterface {
   setFactory(factory: MenuFactoryInterface): this;
   getName(): string;
   setName(name: string): this;
+  getPrefix(): { name: string, class: string };
+  setPrefix(name: string, htmlClasses?: string): this;
+  removePrefix(): this;
+  getSuffix(): { name: string, class: string };
+  setSuffix(name: string, htmlClasses?: string): this;
+  removeSuffix(): this;
   getUri(): null | string;
   setUri(uri?: string): this;
   getRouterLink(): string[];
@@ -28,28 +34,28 @@ export interface ItemInterface {
   setLabel(label?: string): this;
   getAttributes(): {};
   setAttributes(attributes: {}): this;
-  getAttribute(name: string, defaultValue?: null | string): null | string;
+  getAttribute(name: string, defaultValue?: string): null | string;
   setAttribute(name: string, value: string): this;
   deleteAttribute(name: string): boolean;
   getLabelAttributes(): {};
   setLabelAttributes(labelAttributes: {}): this;
-  getLabelAttribute(name: string, defaultValue?: null | string): null | string;
+  getLabelAttribute(name: string, defaultValue?: string): null | string;
   setLabelAttribute(name: string, value: string): this;
   deleteLabelAttribute(name: string): boolean;
   hasExtra(name: string): boolean;
   getExtras(): {};
   setExtras(extras: {}): this;
-  getExtra(name: string, defaultValue?: null | string): null | string;
+  getExtra(name: string, defaultValue?: string): null | string;
   setExtra(name: string, value: string): this;
   deleteExtraAttribute(name: string): boolean;
   isActive(): boolean;
   setActive(active: boolean): this;
-  addChild(child: ItemInterface | string, options?: []): ItemInterface;
-  getChild(name: string): ItemInterface;
+  addChild(child: MenuItemInterface | string, options?: []): MenuItemInterface;
+  getChild(name: string): MenuItemInterface;
   getChildren(): {};
   hasChildren(): boolean;
   getLevel(): number;
-  getParent(): ItemInterface;
+  getParent(): MenuItemInterface;
   setParent(parent?: any): this;
   count(): number;
 }

projects/rero/ng-core/src/lib/menu/menu-item.spec.ts

@@ -52,6 +52,20 @@ describe('MenuItem', () => {
     expect(menuItem.hasUri()).toBeFalsy();
   });
 
+  it('should have prefix', () => {
+    menuItem.setPrefix('menu-prefix');
+    expect(menuItem.getPrefix()).toEqual(
+      { name: 'menu-prefix', class: undefined }
+    );
+  });
+
+  it('should have suffix', () => {
+    menuItem.setSuffix('menu-prefix', 'foo');
+    expect(menuItem.getSuffix()).toEqual(
+      { name: 'menu-prefix', class: 'foo' }
+    );
+  });
+
   it('should have uri', () => {
     const uri = 'http://myUri.com';
     menuItem.setUri(uri);