-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #427 from funidata/DS-269-alert
[Alert, Alert Group, Alert Service]: New components and service
- Loading branch information
Showing
59 changed files
with
641 additions
and
729 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 3 additions & 6 deletions
9
ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,15 @@ | ||
| <section | ||
| *ngIf="_visible" | ||
| *ngIf="(_visible | async) && (_alertService.alerts | async) as alerts" | ||
| class="fudis-alert-group fudis-alert-group__{{ position }}" | ||
| [attr.aria-label]="_alertList().length > 0 ? _alertGroupLabel + ': ' + _alertList().length : null" | ||
| [attr.aria-label]="alerts.length > 0 ? (_alertGroupLabel | async) + ': ' + alerts.length : null" | ||
| > | ||
| <ng-container *ngFor="let alert of _alertList()"> | ||
| <ng-container *ngFor="let alert of alerts"> | ||
| <fudis-alert | ||
| [initialFocus]="alert.initialFocus" | ||
| [variant]="alert.type" | ||
| [message]="alert.message" | ||
| [id]="alert.id" | ||
| [htmlId]="alert.htmlId" | ||
| [buttonId]="alert.buttonId" | ||
| [linkTitle]="alert.linkTitle" | ||
| [link]="alert.routerLinkUrl" | ||
| /> | ||
| </ng-container> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 39 additions & 36 deletions
75
ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,85 @@ | ||
| import { ChangeDetectorRef, Component, Input, AfterViewInit, Signal, effect } from '@angular/core'; | ||
|
|
||
| import { FudisAlertElement } from '../../../types/miscellaneous'; | ||
| import { Component, Input, effect, OnChanges, ChangeDetectionStrategy } from '@angular/core'; | ||
| import { BehaviorSubject } from 'rxjs'; | ||
| import { | ||
| FudisAlertElement, | ||
| FudisAlertPosition, | ||
| FudisComponentChanges, | ||
| } from '../../../types/miscellaneous'; | ||
| import { FudisTranslationService } from '../../../services/translation/translation.service'; | ||
| import { FudisAlertService } from '../../../services/alert/alert.service'; | ||
| import { FudisDialogService } from '../../../services/dialog/dialog.service'; | ||
| import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; | ||
|
|
||
| @Component({ | ||
| selector: 'fudis-alert-group', | ||
| templateUrl: './alert-group.component.html', | ||
| styleUrls: ['./alert-group.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class AlertGroupComponent implements AfterViewInit { | ||
| export class AlertGroupComponent implements OnChanges { | ||
| constructor( | ||
| private _alertService: FudisAlertService, | ||
| protected _alertService: FudisAlertService, | ||
| private _translationService: FudisTranslationService, | ||
| private readonly _changeDetectorRef: ChangeDetectorRef, | ||
| private _dialogService: FudisDialogService, | ||
| ) { | ||
| effect(() => { | ||
| this._alertList = this._alertService.getAlertsSignal(); | ||
| // TODO: To Observable | ||
| this._alertGroupLabel = this._translationService.getTranslations()().ALERT.HEADING_LABEL; | ||
| this._dialogService | ||
| .getDialogOpenStatus() | ||
| .pipe(takeUntilDestroyed()) | ||
| .subscribe((value) => { | ||
| this._setVisibility(value); | ||
| }); | ||
|
|
||
| this._dialogStatus = this._dialogService.getDialogOpenSignal()(); | ||
|
|
||
| this._setVisibility(); | ||
| effect(() => { | ||
| this._alertGroupLabel.next(this._translationService.getTranslations()().ALERT.HEADING_LABEL); | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * CSS position of alerts. Defaults to fixed. | ||
| * CSS position of alerts | ||
| */ | ||
| @Input() position: 'fixed' | 'absolute' | 'static' = 'fixed'; | ||
| @Input() position: FudisAlertPosition = 'fixed'; | ||
|
|
||
| /** | ||
| * Boolean to determine if Alert Group is used as child in Fudis Dialog. | ||
| * Boolean to determine if Alert Group is used inside Fudis Dialog Component | ||
| */ | ||
| @Input() insideDialog: boolean = false; | ||
| @Input() insideDialog: boolean; | ||
|
|
||
| /** | ||
| * List of Alerts fetched from service | ||
| * List of Alerts fetched from Alert Service | ||
| */ | ||
| protected _alertList: Signal<FudisAlertElement[]>; | ||
| protected _alertList = new BehaviorSubject<FudisAlertElement[]>([]); | ||
|
|
||
| /** | ||
| * Label for section element containing alerts | ||
| */ | ||
| protected _alertGroupLabel: string; | ||
| protected _alertGroupLabel = new BehaviorSubject<string>(''); | ||
|
|
||
| /** | ||
| * Boolean to determine if Alert group is visible. Used with _dialogStatus boolean. | ||
| * Boolean to determine if Alert group is visible | ||
| */ | ||
| protected _visible: boolean = false; | ||
| protected _visible = new BehaviorSubject<boolean>(false); | ||
|
|
||
| /** | ||
| * Boolean from service to determine if Fudis Dialog is open. | ||
| */ | ||
| private _dialogStatus: boolean; | ||
|
|
||
| ngAfterViewInit(): void { | ||
| this._setVisibility(); | ||
| ngOnChanges(changes: FudisComponentChanges<AlertGroupComponent>): void { | ||
| if (changes.insideDialog?.currentValue !== changes.insideDialog?.previousValue) { | ||
| this._setVisibility(this._dialogService.getDialogOpenStatus().value); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Getter for visible status | ||
| * Get Alert Group's visible status | ||
| */ | ||
| public getVisibleStatus(): boolean { | ||
| return this._visible; | ||
| return this._visible.value; | ||
| } | ||
|
|
||
| /** | ||
| * Set visibility when Fudis Dialog is opened and closed. | ||
| * Set visibility when Fudis Dialog is opened and closed | ||
| */ | ||
| private _setVisibility(): void { | ||
| if ((this._dialogStatus && this.insideDialog) || (!this._dialogStatus && !this.insideDialog)) { | ||
| this._visible = true; | ||
| private _setVisibility(dialogStatus: boolean): void { | ||
| if ((dialogStatus && this.insideDialog) || (!dialogStatus && !this.insideDialog)) { | ||
| this._visible.next(true); | ||
| } else { | ||
| this._visible = false; | ||
| this._visible.next(false); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.