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

133 lines
3.0 KiB
TypeScript
Raw Normal View History

2018-11-06 15:35:51 +01:00
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
2018-10-12 11:05:24 +02:00
import { ViewportService } from '../../../core/services/viewport.service';
import { MainMenuService } from '../../../core/services/main-menu.service';
/**
* Reusable head bar component for Apps.
*
* Will translate the title automatically.
*
* ## Examples:
*
* ### Usage of the selector:
*
* ```html
* <os-head-bar
2018-11-06 15:35:51 +01:00
* [nav]="false"
* [mainButton]="opCanEdit()"
2018-11-08 17:38:44 +01:00
* [mainButtonIcon]="edit"
2018-11-06 15:35:51 +01:00
* [editMode]="editMotion"
* (mainEvent)="setEditMode(!editMotion)"
* (saveEvent)="saveMotion()">
*
* <!-- Title -->
* <div class="title-slot">
* My Component Title
* </div>
*
* <!-- Menu -->
* <div class="menu-slot">
* <button type="button" mat-icon-button [matMenuTriggerFor]="myComponentMenu">
* <mat-icon>more_vert</mat-icon>
* </button>
* </div>
* </os-head-bar>
* ```
*/
@Component({
selector: 'os-head-bar',
templateUrl: './head-bar.component.html',
styleUrls: ['./head-bar.component.scss']
})
2018-11-06 15:35:51 +01:00
export class HeadBarComponent {
/**
* Determine if the the navigation "hamburger" icon should be displayed in mobile mode
*/
@Input()
public nav = true;
/**
2018-11-06 15:35:51 +01:00
* Custom icon if necessary
*/
@Input()
2018-11-08 17:38:44 +01:00
public mainButtonIcon = 'add';
/**
* Determine edit mode
*/
2018-09-19 15:18:57 +02:00
@Input()
public editMode = false;
/**
2018-11-06 15:35:51 +01:00
* Determine if there should be the main action button
*/
2018-09-19 15:18:57 +02:00
@Input()
2018-11-06 15:35:51 +01:00
public mainButton = false;
/**
* Set to true if the component should use location.back instead
* of navigating to the parent component
*/
@Input()
public goBack = false;
/**
2018-11-06 15:35:51 +01:00
* Emit a signal to the parent component if the main button was clicked
*/
@Output()
2018-11-06 15:35:51 +01:00
public mainEvent = new EventEmitter<void>();
/**
* Sends a signal if a detail view should be saved
*/
2018-09-19 15:18:57 +02:00
@Output()
public saveEvent = new EventEmitter<boolean>();
/**
* Empty constructor
*/
public constructor(
public vp: ViewportService,
private menu: MainMenuService,
private router: Router,
private route: ActivatedRoute,
private location: Location
) {}
/**
* Emits a signal to the parent if
*/
2018-11-06 15:35:51 +01:00
public sendMainEvent(): void {
this.mainEvent.next();
}
/**
* Clicking the burger-menu-icon should toggle the menu
*/
public clickHamburgerMenu(): void {
this.menu.toggleMenu();
}
/**
* Send a save signal and set edit mode
*/
public save(): void {
2018-11-06 15:35:51 +01:00
this.saveEvent.next(true);
}
/**
* Exits the view to return to the previous page or
* visit the parent view again.
*/
public onBackButton(): void {
if (this.goBack) {
this.location.back();
} else {
this.router.navigate(['../'], { relativeTo: this.route });
}
}
}