💄 add alert notification

marcode24 · marcode24 · commit 0ef1824b7444 · 2023-05-06T14:53:15.000-06:00
diff --git a/src/app/core/interfaces/alert.interface.ts b/src/app/core/interfaces/alert.interface.ts
@@ -0,0 +1,4 @@
+export interface IAlert {
+  message: string;
+  type: 'success' | 'error';
+}
diff --git a/src/app/core/services/alert.service.spec.ts b/src/app/core/services/alert.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AlertService } from './alert.service';
+
+describe('AlertService', () => {
+  let service: AlertService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AlertService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/core/services/alert.service.ts b/src/app/core/services/alert.service.ts
@@ -0,0 +1,16 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+import { IAlert } from '@interfaces/alert.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AlertService {
+
+  alert: EventEmitter<IAlert> = new EventEmitter();
+
+  emitAlert(alert: IAlert): void {
+    this.alert.emit(alert);
+  }
+
+}
diff --git a/src/app/features/features.component.html b/src/app/features/features.component.html
@@ -4,6 +4,7 @@
   <div class="container">
     <div class="content">
       <router-outlet></router-outlet>
+      <app-alert></app-alert>
     </div>
   </div>
 </div>
diff --git a/src/app/features/features.component.scss b/src/app/features/features.component.scss
@@ -3,6 +3,7 @@
 .content {
   padding-top: 75px;
   height: 100%;
+  position: relative;
 
   @include width-medium {
     padding-top: 70px;
diff --git a/src/app/features/features.module.ts b/src/app/features/features.module.ts
@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { AlertsModule } from '@shared/alerts/alerts.module';
+
 import { ComponentsModule } from '@components/components.module';
 
 import { FeaturesComponent } from './features.component';
@@ -19,7 +21,8 @@ import { SearchModule } from './search/search.module';
     ComponentsModule,
     HomeModule,
     FolderModule,
-    SearchModule
+    SearchModule,
+    AlertsModule,
   ]
 })
 export class FeaturesModule { }
diff --git a/src/app/features/folder/folder.component.ts b/src/app/features/folder/folder.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { Subscription } from 'rxjs';
 
+import { AlertService } from '@services/alert.service';
 import { FileService } from '@services/file.service';
 import { FolderService } from '@services/folder.service';
 
@@ -28,6 +29,7 @@ export class FolderComponent implements OnInit, OnDestroy {
     private folderService: FolderService,
     private fileService: FileService,
     private activadedRoute: ActivatedRoute,
+    private alertService: AlertService,
   ) { }
 
   ngOnDestroy(): void {
@@ -40,19 +42,39 @@ export class FolderComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.folderCreatedSubscripion = this.folderService
       .folderCreated.subscribe(({ folder, isNew }) => {
-      if (isNew) this.folder.folders.push(folder);
-      else this.folder.folders = this.folder.folders.map((f) => f._id === folder._id ? folder : f);
+      if (isNew) {
+        this.folder.folders.push(folder);
+        this.alertService.emitAlert({
+          type: 'success',
+          message: 'Carpeta creada correctamente',
+        });
+      }
+      else {
+        this.folder.folders = this.folder.folders.map((f) => f._id === folder._id ? folder : f);
+        this.alertService.emitAlert({
+          type: 'success',
+          message: 'Carpeta actualizada correctamente',
+        });
+      }
       this.orderFolders();
       this.mixFilesAndFolders();
     });
     this.filesUploadedSubscription = this.fileService.filesCreated.subscribe((files: File[]) => {
       this.folder.files.push(...files);
       this.mixFilesAndFolders();
+      this.alertService.emitAlert({
+        type: 'success',
+        message: 'Archivos subidos correctamente',
+      });
     });
     this.routerSubscription = this.activadedRoute.params.subscribe(() => this.getFolder());
     this.fileDeletedSubscription = this.fileService.fileDeleted.subscribe((file) => {
       this.folder.files = this.folder.files.filter((f) => f._id !== file._id);
       this.mixFilesAndFolders();
+      this.alertService.emitAlert({
+        type: 'success',
+        message: 'Archivo eliminado correctamente',
+      });
     });
   }
 
diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts
@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
+import { AlertService } from '@services/alert.service';
 import { AuthService } from '@services/auth.service';
 import { FileService } from '@services/file.service';
 import { FolderService } from '@services/folder.service';
@@ -24,6 +25,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     private authService: AuthService,
     private folderService: FolderService,
     private fileService: FileService,
+    private alertService: AlertService,
   ) { }
 
   ngOnDestroy(): void {
@@ -43,16 +45,35 @@ export class HomeComponent implements OnInit, OnDestroy {
     ];
     this.folderCreatedSubscription = this.folderService
       .folderCreated.subscribe(({folder, isNew}) => {
-        if (isNew) this.root.folders.push(folder);
-        else this.root.folders = this.root.folders.map((f) => f._id === folder._id ? folder : f);
+        if (isNew) {
+          this.root.folders.push(folder);
+          this.alertService.emitAlert({
+            type: 'success',
+            message: 'Carpeta creada correctamente',
+          });
+        } else {
+          this.root.folders = this.root.folders.map((f) => f._id === folder._id ? folder : f);
+          this.alertService.emitAlert({
+            type: 'success',
+            message: 'Carpeta actualizada correctamente',
+          });
+        }
         this.orderFolders();
     });
     this.filesCreatedSubscription = this.fileService.filesCreated.subscribe((files) => {
       this.root.files.push(...files);
       this.orderFiles();
+      this.alertService.emitAlert({
+        type: 'success',
+        message: 'Archivos subidos correctamente',
+      });
     });
     this.fileDeletedSubscription = this.fileService.fileDeleted.subscribe((file) => {
       this.root.files = this.root.files.filter((f) => f._id !== file._id);
+      this.alertService.emitAlert({
+        type: 'success',
+        message: 'Archivo eliminado correctamente',
+      });
     });
     this.isLoading = false;
   }
diff --git a/src/app/shared/alerts/alert/alert.component.html b/src/app/shared/alerts/alert/alert.component.html
@@ -0,0 +1,8 @@
+<div class="alert" #alert [ngClass]="alertOptions.type">
+  <div class="alert-content">
+    <span class="title">{{ alertOptions.message }}</span>
+    <div class="icon" (click)="hideAlert()">
+      <i class="bx bx-x"></i>
+    </div>
+  </div>
+</div>
diff --git a/src/app/shared/alerts/alert/alert.component.scss b/src/app/shared/alerts/alert/alert.component.scss
@@ -0,0 +1,75 @@
+@import 'settings/_colors.scss';
+@import 'settings/_typography.scss';
+
+.alert {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 75%;
+  border-radius: 1rem;
+  padding: 0.6rem 0.8rem;
+  box-shadow: rgb(149 157 165 / 50%) 0px 8px 24px;
+  -webkit-box-shadow: rgb(149 157 165 / 50%) 0px 8px 24px;
+  -moz-box-shadow: rgb(149 157 165 / 50%) 0px 8px 24px;
+  pointer-events: none;
+  transform: translateY(100px);
+  transition: transform 0.5s ease-in;
+  max-width: 25rem;
+
+  &.success {
+    background-color: $green;
+
+    & .icon {
+      &:hover {
+        background-color: #36b158;
+      }
+    }
+  }
+
+  &.error {
+    background-color: $red;
+
+    & .icon {
+      &:hover {
+        background-color: #e74c3c;
+      }
+    }
+  }
+
+  &.show {
+    pointer-events: auto;
+    transform: translateY(0);
+    transition: transform 0.3s ease-in;
+  }
+
+  & .alert-content {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    @include fs-6;
+    @include fw-500;
+    color: var(--fc-white);
+
+    & .title {
+      width: 100%;
+    }
+
+    & .icon {
+      @include fs-5;
+      width: 25px;
+      height: 25px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      padding: 5px;
+      transition: 0.3s ease-in;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
diff --git a/src/app/shared/alerts/alert/alert.component.spec.ts b/src/app/shared/alerts/alert/alert.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertComponent } from './alert.component';
+
+describe('AlertComponent', () => {
+  let component: AlertComponent;
+  let fixture: ComponentFixture<AlertComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AlertComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/alerts/alert/alert.component.ts b/src/app/shared/alerts/alert/alert.component.ts
@@ -0,0 +1,43 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+
+import { Subscription } from 'rxjs';
+
+import { AlertService } from '@services/alert.service';
+
+import { IAlert } from '@interfaces/alert.interface';
+
+@Component({
+  selector: 'app-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss']
+})
+export class AlertComponent implements OnInit, OnDestroy {
+  subcriptionAlert: Subscription;
+  @ViewChild('alert') alert: ElementRef;
+
+  alertOptions: IAlert = { message: '', type: 'success' };
+
+  constructor(
+    private alertService: AlertService,
+  ) { }
+
+  ngOnDestroy(): void {
+    this.subcriptionAlert.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    this.subcriptionAlert = this.alertService.alert.subscribe(alert => this.showAlert(alert));
+  }
+
+  showAlert(alert: IAlert): void {
+    this.alertOptions = alert;
+    this.alert.nativeElement.classList.add('show');
+    setTimeout(() => {
+      this.hideAlert();
+    }, 3000);
+  }
+
+  hideAlert(): void {
+    this.alert.nativeElement.classList.remove('show');
+  }
+}
diff --git a/src/app/shared/alerts/alerts.module.ts b/src/app/shared/alerts/alerts.module.ts
@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { AlertComponent } from './alert/alert.component';
+
+@NgModule({
+  declarations: [
+    AlertComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    AlertComponent
+  ]
+})
+export class AlertsModule { }
