9c06cccd35
* Removed adv, which isn't needed. * Updated zone * Updated to angular 16 * Updated to angular 16 (partially) * Updated to angular 16 * Package update for Angular 16 (and other dependencies) is complete. * Replaced all takeUntil(this.onDestroy) with new takeUntilDestroyed() * Updated all inputs that have ! to be required and deleted all unit tests. * Corrected how takeUntilDestroyed() is supposed to be implemented.
88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import {
|
|
Component,
|
|
DestroyRef,
|
|
EventEmitter,
|
|
inject,
|
|
Input,
|
|
OnDestroy,
|
|
OnInit,
|
|
Output,
|
|
TemplateRef
|
|
} from '@angular/core';
|
|
import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
|
|
import { Subject, takeUntil } from 'rxjs';
|
|
import { Breakpoint, UtilityService } from 'src/app/shared/_services/utility.service';
|
|
import { NavService } from 'src/app/_services/nav.service';
|
|
import { ToggleService } from 'src/app/_services/toggle.service';
|
|
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
|
|
|
|
/**
|
|
* This should go on all pages which have the side nav present and is not Settings related.
|
|
* Content inside [main] selector should not have any padding top or bottom, they are included in this component.
|
|
*/
|
|
@Component({
|
|
selector: 'app-side-nav-companion-bar',
|
|
templateUrl: './side-nav-companion-bar.component.html',
|
|
styleUrls: ['./side-nav-companion-bar.component.scss']
|
|
})
|
|
export class SideNavCompanionBarComponent implements OnInit {
|
|
/**
|
|
* If the page should show a filter
|
|
*/
|
|
@Input() hasFilter: boolean = false;
|
|
/**
|
|
* If the page should show an extra section button
|
|
*/
|
|
@Input() hasExtras: boolean = false;
|
|
|
|
/**
|
|
* Is the input open by default
|
|
*/
|
|
@Input() filterOpenByDefault: boolean = false;
|
|
|
|
/**
|
|
* This implies there is a filter in effect on the underlying page. Will show UI styles to imply this to the user.
|
|
*/
|
|
@Input() filterActive: boolean = false;
|
|
|
|
@Input() extraDrawer!: TemplateRef<any>;
|
|
|
|
|
|
@Output() filterOpen: EventEmitter<boolean> = new EventEmitter();
|
|
|
|
isFilterOpen = false;
|
|
isExtrasOpen = false;
|
|
|
|
private readonly destroyRef = inject(DestroyRef);
|
|
|
|
constructor(private navService: NavService, private utilityService: UtilityService, public toggleService: ToggleService,
|
|
private offcanvasService: NgbOffcanvas) {
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.isFilterOpen = this.filterOpenByDefault;
|
|
|
|
// If user opens side nav while filter is open on mobile, then collapse filter (as it doesn't render well) TODO: Change this when we have new drawer
|
|
this.navService.sideNavCollapsed$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(sideNavCollapsed => {
|
|
if (this.isFilterOpen && sideNavCollapsed && this.utilityService.getActiveBreakpoint() < Breakpoint.Tablet) {
|
|
this.isFilterOpen = false;
|
|
this.filterOpen.emit(this.isFilterOpen);
|
|
}
|
|
});
|
|
}
|
|
|
|
toggleFilter() {
|
|
this.isFilterOpen = !this.isFilterOpen;
|
|
this.filterOpen.emit(this.isFilterOpen);
|
|
}
|
|
|
|
openExtrasDrawer() {
|
|
if (this.extraDrawer === undefined) return;
|
|
|
|
this.isExtrasOpen = true;
|
|
const drawerRef = this.offcanvasService.open(this.extraDrawer, {position: 'end', scroll: true});
|
|
drawerRef.closed.subscribe(() => this.isExtrasOpen = false);
|
|
drawerRef.dismissed.subscribe(() => this.isExtrasOpen = false);
|
|
}
|
|
|
|
}
|