OpenSlides/client/src/app/shared/components/head-bar/head-bar.component.ts

106 lines
2.4 KiB
TypeScript
Raw Normal View History

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
/**
* Reusable head bar component for Apps.
*
* Will translate the title automatically.
*
* Use `PlusButton=true` and `(plusButtonClicked)=myFunction()` if a plus button is needed
*
* Use `[menuLust]=myArray` and `(ellipsisMenuItem)=myFunction($event)` if a menu is needed
*
* ## Examples:
*
* ### Usage of the selector:
*
* ```html
* <app-head-bar
* appName="Files"
* PlusButton=true
* [menuList]=myMenu
* (plusButtonClicked)=onPlusButton()
* (ellipsisMenuItem)=onEllipsisItem($event)>
* </app-head-bar>
* ```
*
* ### Declaration of a menu provided as `[menuList]=myMenu`:
*
* ```ts
* myMenu = [
* {
* text: 'Download All',
* icon: 'download',
* action: 'downloadAllFiles'
* },
* ];
* ```
* The parent needs to react to `action` like the following.
* This will execute a function with the name provided in the
* `action` field.
* ```ts
* onEllipsisItem(event: any) {
* if (event.action) {
* this[event.action]();
* }
* }
* ```
*/
@Component({
selector: 'app-head-bar',
templateUrl: './head-bar.component.html',
styleUrls: ['./head-bar.component.scss']
})
export class HeadBarComponent implements OnInit {
/**
* Input declaration for the app name
*/
2018-08-29 13:21:25 +02:00
@Input() public appName: string;
/**
* Determine if there should be a plus button.
*/
2018-08-29 13:21:25 +02:00
@Input() public plusButton: false;
/**
* If not empty shows a ellipsis menu on the right side
*
* The parent needs to provide a menu, i.e `[menuList]=myMenu`.
*/
2018-08-29 13:21:25 +02:00
@Input() public menuList: any[];
/**
* Emit a signal to the parent component if the plus button was clicked
*/
2018-08-29 13:21:25 +02:00
@Output() public plusButtonClicked = new EventEmitter<boolean>();
/**
* Emit a signal to the parent of an item in the menuList was selected.
*/
2018-08-29 13:21:25 +02:00
@Output() public ellipsisMenuItem = new EventEmitter<any>();
/**
* Empty constructor
*/
2018-08-29 13:21:25 +02:00
public constructor() {}
/**
* empty onInit
*/
2018-08-29 13:21:25 +02:00
public ngOnInit() {}
/**
* Emits a signal to the parent if an item in the menu was clicked.
* @param item
*/
2018-08-29 13:21:25 +02:00
public clickMenu(item: any) {
this.ellipsisMenuItem.emit(item);
}
/**
* Emits a signal to the parent if
*/
2018-08-29 13:21:25 +02:00
public clickPlusButton() {
this.plusButtonClicked.emit(true);
}
}