diff --git a/ui/src/app/modules/clinic/pages/patient-consultation/patient-consultation.component.ts b/ui/src/app/modules/clinic/pages/patient-consultation/patient-consultation.component.ts index d14aa6ebb..c81c8d30d 100644 --- a/ui/src/app/modules/clinic/pages/patient-consultation/patient-consultation.component.ts +++ b/ui/src/app/modules/clinic/pages/patient-consultation/patient-consultation.component.ts @@ -16,6 +16,11 @@ import { getFormPrivilegesConfigs, getFormPrivilegesConfigsLoadingState, } from "src/app/store/selectors/form-privileges-configs.selectors"; + +import { Notification } from "src/app/shared/services/notification.service"; +import { NotificationService } from 'src/app/shared/services/notification.service'; +import { MatSnackBar } from '@angular/material/snack-bar'; + @Component({ selector: "app-patient-consultation", templateUrl: "./patient-consultation.component.html", @@ -28,7 +33,11 @@ export class PatientConsultationComponent implements OnInit { patientIdentifier: string; userPrivileges$: Observable; userPrivilegesSet$: Observable; - constructor(private store: Store, private route: ActivatedRoute) {} + constructor(private store: Store, + private route: ActivatedRoute, + private notificationService: NotificationService, + private snackBar: MatSnackBar + ) {} ngOnInit(): void { const patientId = this.route.snapshot.params["patientID"]; @@ -38,13 +47,19 @@ export class PatientConsultationComponent implements OnInit { // this.store.dispatch(loadActiveVisit({ patientId })); this.store.dispatch(loadCurrentPatient({ uuid: patientId })); this.privilegesConfigs$ = this.store.select(getFormPrivilegesConfigs); - this.formPrivilegesConfigsLoadingState$ = this.store.select( - getFormPrivilegesConfigsLoadingState - ); + this.formPrivilegesConfigsLoadingState$ = this.store.select(getFormPrivilegesConfigsLoadingState ); this.currentUser$ = this.store.select(getCurrentUserDetails); this.userPrivileges$ = this.store.select(getCurrentUserPrivileges); this.userPrivilegesSet$ = this.store.select( getIfCurrentUserPrivilegesAreSet ); +this.notificationService.getClinicNotification().subscribe((notification) => { + this.displayNotification(notification); + }); + } + + displayNotification(notification: any) { + const message = `${notification.patientName}'s ${notification.labName} results are ready! Review them now and take the necessary action.`; + this.snackBar.open(message, 'Close', { duration: 5000 }); } } diff --git a/ui/src/app/modules/laboratory/modules/sample-acceptance-and-results/components/shared-results-entry-and-view-modal/shared-results-entry-and-view-modal.component.ts b/ui/src/app/modules/laboratory/modules/sample-acceptance-and-results/components/shared-results-entry-and-view-modal/shared-results-entry-and-view-modal.component.ts index 42a7023be..609ae66e9 100644 --- a/ui/src/app/modules/laboratory/modules/sample-acceptance-and-results/components/shared-results-entry-and-view-modal/shared-results-entry-and-view-modal.component.ts +++ b/ui/src/app/modules/laboratory/modules/sample-acceptance-and-results/components/shared-results-entry-and-view-modal/shared-results-entry-and-view-modal.component.ts @@ -28,6 +28,8 @@ import { calculateFieldValueFromCalculationExpression } from "src/app/core/helpe import { getDataValuesEntities } from "src/app/store/selectors"; import { upsertEnteredDataValues } from "src/app/store/actions"; +import { NotificationService, NotificationInterface } from 'src/app/shared/services/notification.service'; // Import the service and interface + @Component({ selector: "app-shared-results-entry-and-view-modal", templateUrl: "./shared-results-entry-and-view-modal.component.html", @@ -77,7 +79,8 @@ export class SharedResultsEntryAndViewModalComponent implements OnInit { private store: Store, private sampleService: SamplesService, private snackBar: MatSnackBar, - private dialog: MatDialog + private dialog: MatDialog, + private notificationService: NotificationService ) {} ngOnInit(): void { @@ -799,6 +802,11 @@ export class SharedResultsEntryAndViewModalComponent implements OnInit { // console.log(this.data?.currentUser); //finalResultsFedBy } + const notification = { + message: `${order.sample.patient.givenName} ${order.sample.patient.familyName}'s ${order.concept.display} results are ready!`, + details: 'Please review and take the necessary actions.', + }; + this.notificationService.show(notification); } onCancelAuthorize(event: Event): void { diff --git a/ui/src/app/shared/components/notification-dialog/notification-dialog.component.html b/ui/src/app/shared/components/notification-dialog/notification-dialog.component.html new file mode 100644 index 000000000..6c4e94dbc --- /dev/null +++ b/ui/src/app/shared/components/notification-dialog/notification-dialog.component.html @@ -0,0 +1 @@ +

notification-dialog works!

diff --git a/ui/src/app/shared/components/notification-dialog/notification-dialog.component.scss b/ui/src/app/shared/components/notification-dialog/notification-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/src/app/shared/components/notification-dialog/notification-dialog.component.spec.ts b/ui/src/app/shared/components/notification-dialog/notification-dialog.component.spec.ts new file mode 100644 index 000000000..b92e65024 --- /dev/null +++ b/ui/src/app/shared/components/notification-dialog/notification-dialog.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotificationDialogComponent } from './notification-dialog.component'; + +describe('NotificationDialogComponent', () => { + let component: NotificationDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NotificationDialogComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NotificationDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/src/app/shared/components/notification-dialog/notification-dialog.component.ts b/ui/src/app/shared/components/notification-dialog/notification-dialog.component.ts new file mode 100644 index 000000000..8723c077f --- /dev/null +++ b/ui/src/app/shared/components/notification-dialog/notification-dialog.component.ts @@ -0,0 +1,36 @@ +import { Component, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA } from '@angular/material/dialog'; + +@Component({ + selector: 'app-notification-dialog', + template: ` +

Notification

+ +

{{ data.message }}

+

Details: {{ data.details }}

+
+ + + + `, + styles: [ + ` + h2 { + font-size: 20px; + margin: 0; + } + mat-dialog-content { + font-size: 16px; + } + mat-dialog-actions { + justify-content: flex-end; + } + `, + ], +}) +export class NotificationDialogComponent { + constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} +} + + + diff --git a/ui/src/app/shared/services/notification.service.ts b/ui/src/app/shared/services/notification.service.ts index 751240fa4..241d7c92f 100644 --- a/ui/src/app/shared/services/notification.service.ts +++ b/ui/src/app/shared/services/notification.service.ts @@ -4,17 +4,46 @@ import { MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, } from '@angular/material/snack-bar'; +import { Subject } from 'rxjs'; +import { MatDialog } from '@angular/material/dialog'; +import { NotificationDialogComponent } from '../components/notification-dialog/notification-dialog.component'; + export interface NotificationInterface { type: 'SUCCESS' | 'ERROR' | 'WARNING' | 'LOADING'; message: string; duration?: number; action?: string; + + patientName?: string; + labName?: string; + horizontalPosition?: MatSnackBarHorizontalPosition; verticalPosition?: MatSnackBarVerticalPosition; - autoClose?: boolean; -} + autoClose?: boolean; } + + @Injectable({providedIn: 'root'}) + +export class NotificationService { + constructor(private dialog: MatDialog) {} + + show(notification: { message: string; details?: string }) { + this.dialog.open(NotificationDialogComponent, { + data: notification, + width: '400px', + }); + } + + private clinicNotificationSubject = new Subject(); + notifyClinic(notification: any): void { + this.clinicNotificationSubject.next(notification); + } + getClinicNotification() { + return this.clinicNotificationSubject.asObservable(); + } + +} export class Notification implements NotificationInterface { type: 'SUCCESS' | 'ERROR' | 'WARNING' | 'LOADING'; message: string; @@ -85,20 +114,7 @@ export class Notification implements NotificationInterface { return type === 'ERROR' ? 'top' : verticalPosition || 'bottom'; } } - -@Injectable({ providedIn: 'root' }) -export class NotificationService { - constructor(private snackBar: MatSnackBar) {} - - /** - * Show notification snack bar for the supplied options - * @param notification Notification - */ - show(notification: Notification): void { - this.snackBar.open(notification?.message, notification?.action, { - duration: notification?.displayDuration, - horizontalPosition: notification?.horizontalPosition, - verticalPosition: notification?.verticalPosition, - }); - } +function handleIncomingNotification(notification: any, any: any) { + throw new Error('Function not implemented.'); } + diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts index f29ae8932..964c6af03 100644 --- a/ui/src/app/shared/shared.module.ts +++ b/ui/src/app/shared/shared.module.ts @@ -20,12 +20,17 @@ import { sharedStoreModals } from "./store-modals"; import { sharedStorePages } from "./store-pages"; import { sharedStoreComponents } from "./store-components"; import { NgxMatSelectSearchModule } from "ngx-mat-select-search"; +import { NotificationDialogComponent } from '../shared/components/notification-dialog/notification-dialog.component'; + +import { MatDialogModule } from '@angular/material/dialog'; + @NgModule({ imports: [ CommonModule, ...materialModules, ...modules, NgxMatSelectSearchModule, + MatDialogModule ], exports: [ CommonModule, @@ -41,6 +46,7 @@ import { NgxMatSelectSearchModule } from "ngx-mat-select-search"; ...sharedEntryComponents, HttpClientModule, NgxMatSelectSearchModule, + NotificationDialogComponent ], declarations: [ ...components, @@ -57,6 +63,7 @@ import { NgxMatSelectSearchModule } from "ngx-mat-select-search"; FilterItemsBySelectionsPipe, SearchTestDetailsPipe, FormatLabelCharCountDisplayPipe, + NotificationDialogComponent ], providers: [...sharedServices], })