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

217 lines
5.3 KiB
TypeScript
Raw Normal View History

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
2018-10-12 11:05:24 +02:00
import { MainMenuService } from 'app/core/core-services/main-menu.service';
import { OverlayService } from 'app/core/ui-services/overlay.service';
import { RoutingStateService } from 'app/core/ui-services/routing-state.service';
import { ViewportService } from 'app/core/ui-services/viewport.service';
/**
* Reusable head bar component for Apps.
*
* Will translate the title automatically.
*
* ## Examples:
*
* ### Usage of the selector:
*
* ```html
* <os-head-bar
* prevUrl="../.."
* saveText="Create"
2018-11-06 15:35:51 +01:00
* [nav]="false"
* [goBack]="true"
2018-11-06 15:35:51 +01:00
* [mainButton]="opCanEdit()"
2018-11-08 17:38:44 +01:00
* [mainButtonIcon]="edit"
* [backButtonIcon]="arrow_back"
2018-11-06 15:35:51 +01:00
* [editMode]="editMotion"
* [isSaveButtonEnabled]="myConditionIsTrue()"
2018-11-05 17:40:32 +01:00
* [multiSelectMode]="isMultiSelect"
2018-11-06 15:35:51 +01:00
* (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>
2018-11-05 17:40:32 +01:00
* <!-- MultiSelect info -->
* <div class="central-info-slot">
* <button mat-icon-button (click)="toggleMultiSelect()">
* <mat-icon>arrow_back</mat-icon>
* </button>
* <span>{{ selectedRows.length }}&nbsp;</span><span translate>selected</span>
* </div>
* </os-head-bar>
* ```
*/
@Component({
selector: 'os-head-bar',
templateUrl: './head-bar.component.html',
styleUrls: ['./head-bar.component.scss']
})
export class HeadBarComponent implements OnInit {
/**
* 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()
public mainButtonIcon = 'add_circle';
/**
* Custom text to show as "save"
*/
@Input()
public saveText = 'Save';
/**
* Determine edit mode
*/
2018-09-19 15:18:57 +02:00
@Input()
public editMode = false;
/**
* The save button can manually be disabled.
*/
@Input()
public isSaveButtonEnabled = true;
2018-11-05 17:40:32 +01:00
/**
* Determine multiSelect mode: changed interactions and head bar
*/
@Input()
public multiSelectMode = 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;
/**
* Determine the back URL. Default is ".." (previous parent page)
* Lazy Loaded modules sometimes have different routing events or require
* special "back" logic.
* Has only an effect if goBack is set to false
*/
@Input()
public prevUrl = '../';
/**
* Optional tooltip for the main action
*/
@Input()
public mainActionTooltip: string;
/**
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>();
/**
* Optional custom event for cancel the edit
*/
@Output()
public cancelEditEvent = new EventEmitter<void>();
/**
* To detect if the cancel event was used
*/
public isCancelEditUsed = false;
/**
* Sends a signal if a detail view should be saved
*/
2018-09-19 15:18:57 +02:00
@Output()
public saveEvent = new EventEmitter<boolean>();
public get showBackButton(): boolean {
return !this.nav && !this.multiSelectMode && (this.routingState.isSafePrevUrl || !this.goBack);
}
/**
* Empty constructor
*/
public constructor(
public vp: ViewportService,
private menu: MainMenuService,
private router: Router,
private route: ActivatedRoute,
private routingState: RoutingStateService,
private overlayService: OverlayService
) {}
/**
* Detect if the cancel edit event was used
*/
public ngOnInit(): void {
this.isCancelEditUsed = this.cancelEditEvent.observers.length > 0;
}
/**
* Emits a signal to the parent if
*/
2018-11-06 15:35:51 +01:00
public sendMainEvent(): void {
this.mainEvent.next();
}
/**
* Emits a signal to for custom cancel edits
*/
public sendCancelEditEvent(): void {
this.cancelEditEvent.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);
}
/**
* Opens the `super-search.component`.
*/
public openSearch(): void {
this.overlayService.showSearch();
}
/**
* Exits the view to return to the previous page or
* visit the parent view again.
*/
public onBackButton(): void {
if (this.goBack) {
this.routingState.goBack();
} else {
this.router.navigate([this.prevUrl], { relativeTo: this.route });
}
}
}