feat(front-end): Implement a preview version of notifications

Kaizen/ClientApp/src/app/core/material.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -32,6 +33,7 @@ import { MatTreeModule } from '@angular/material/tree';
 
 const MaterialModules = [
   MatAutocompleteModule,
+  MatBadgeModule,
   MatButtonModule,
   MatCardModule,
   MatCheckboxModule,

Kaizen/ClientApp/src/app/shared/components/notifications/notifications.component.html

@@ -0,0 +1,21 @@
+<button mat-icon-button [matTooltip]="'Notificaciones'" [matMenuTriggerFor]="notificationsMenu">
+  <mat-icon [matBadge]="notifications.length" [matBadgeHidden]="notifications.length === 0">notifications</mat-icon>
+</button>
+<mat-menu #notificationsMenu="matMenu">
+  <div mat-menu-item class="notification-button" *ngFor="let notification of notifications">
+    <div class="icon-text-container">
+      <mat-icon>{{ notification.icon }}</mat-icon>
+      <span>
+        {{ notification.title }}
+        <small>
+          {{ notification.message }}
+        </small>
+      </span>
+    </div>
+    <div class="spacer"></div>
+    <mat-icon [routerLink]="notification.url" *ngIf="notification.url; else notUrl">visibility</mat-icon>
+    <ng-template  #notUrl>
+      <mat-icon [matTooltip]="'Eliminar notificación'">delete</mat-icon>
+    </ng-template>
+  </div>
+</mat-menu>

Kaizen/ClientApp/src/app/shared/components/notifications/notifications.component.scss

@@ -0,0 +1,34 @@
+.notification-button {
+  max-width: 600px;
+  max-height: 300px;
+  min-height: 70px;
+  height: auto;
+  align-content: center !important;
+  align-items: center !important;
+  display: flex !important;
+  line-height: 30px !important;
+  white-space: normal;
+
+  span {
+    display: block;
+  }
+  small {
+    display: block;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 20px;
+  }
+}
+
+.mat-menu-panel {
+  max-width: fit-content !important;
+  max-height: 300px;
+}
+
+::ng-deep.notification-menu {
+  width: fit-content;
+}
+
+::ng-deep.mat-menu-panel {
+  max-width: none !important;
+  max-height: 300px !important;
+}

Kaizen/ClientApp/src/app/shared/components/notifications/notifications.component.spec.ts

@@ -0,0 +1,28 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppModule } from '@app/app.module';
+import { SharedModule } from '@shared/shared.module';
+import { NotificationsComponent } from './notifications.component';
+
+describe('NotificationsComponent', () => {
+  let component: NotificationsComponent;
+  let fixture: ComponentFixture<NotificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule, RouterTestingModule, SharedModule, AppModule ],
+      declarations: [ NotificationsComponent ]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Kaizen/ClientApp/src/app/shared/components/notifications/notifications.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NewClientSignalrService } from '@modules/clients/services/new-client-signalr.service';
+import { NotificationItem } from '@shared/models/notification-item';
+
+@Component({
+  selector: 'app-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: [ './notifications.component.scss' ]
+})
+export class NotificationsComponent implements OnInit, OnDestroy {
+  notifications: NotificationItem[] = [];
+
+  constructor(private clientSignalR: NewClientSignalrService) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {}
+}

Kaizen/ClientApp/src/app/shared/layouts/dashboard-layout/dashboard-layout.component.html

@@ -84,9 +84,7 @@
       </button>
       <span>Ecolplag</span>
       <div class="spacer"></div>
-      <button mat-icon-button [matTooltip]="'Notificaciones'">
-        <mat-icon>notifications</mat-icon>
-      </button>
+      <app-notifications></app-notifications>
       <button mat-icon-button [matMenuTriggerFor]="accountMenu" [matTooltip]="'Opciones de cuenta'">
         <mat-icon>account_circle</mat-icon>
       </button>

Kaizen/ClientApp/src/app/shared/models/notification-item.ts

@@ -0,0 +1,6 @@
+export interface NotificationItem {
+  icon: string;
+  title: string;
+  message: string;
+  url?: string;
+}

Kaizen/ClientApp/src/app/shared/shared.module.ts

@@ -42,6 +42,7 @@ import { PaymentMethodPipe } from './pipes/payment-method.pipe';
 import { PeriodicityPipe } from './pipes/periodicity.pipe';
 import { ServiceRequestStatePipe } from './pipes/service-request-state.pipe';
 import { WorkOrderStatePipe } from './pipes/work-order-state.pipe';
+import { NotificationsComponent } from './components/notifications/notifications.component';
 
 @NgModule({
   declarations: [
@@ -81,7 +82,8 @@ import { WorkOrderStatePipe } from './pipes/work-order-state.pipe';
     PaymentMethodPipe,
     PeriodicityPipe,
     ServiceRequestStatePipe,
-    WorkOrderStatePipe
+    WorkOrderStatePipe,
+    NotificationsComponent
   ],
   imports: [ CommonModule, FlexLayoutModule, FormsModule, MaterialModule, ReactiveFormsModule, RouterModule ],
   exports: [