feat(loading): loading and shared notification added

* feat(loading): loading works * fix(loading): for add graph * fix(loading): added loading for category * fix(loading): added loading for data analysis * fix(loading): fixed graph section and added a notification for everything with a shared file * fix(loading): added loading for shared modules * fix(loading): added loading to user modules * fix(add-user): fixed add user roles * fix(code): deleted unnecesary logs
Star-Academy · Aug 28, 2024 · dfe9e0b · dfe9e0b
1 parent ac2e716
commit dfe9e0b
Show file tree

Hide file tree

Showing 28 changed files with 390 additions and 144 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,5 +1,6 @@
 :host {
   .loading {
-    position: "fixed";
+    position: fixed;
+    z-index: 3;
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,11 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { LoadingService } from './shared/services/loading.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   displayLoading = 'none';
-  //block
+
+  constructor(private loadingService: LoadingService) {}
+
+  ngOnInit() {
+    this.loadingService.loading$.subscribe(
+      (data) => (this.displayLoading = data ? 'block' : 'none')
+    );
+  }
 }
diff --git a/src/app/graph/components/add-graph/add-graph.component.ts b/src/app/graph/components/add-graph/add-graph.component.ts
@@ -2,10 +2,11 @@ import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { Papa } from 'ngx-papaparse';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
-import { UserManageNotificationComponent } from '../../../user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { AddGraphService } from '../../services/add-graph/add-graph.service';
 import { CategoryData } from '../../model/Category';
+import { LoadingService } from '../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-add-graph',
@@ -36,12 +37,26 @@ export class AddGraphComponent {
     private papaParseService: Papa,
     private changeDetector: ChangeDetectorRef,
     private _snackBar: MatSnackBar,
-    private addGraphService: AddGraphService
-  ) {}
+    private addGraphService: AddGraphService,
+    private loadingService: LoadingService
+  ) {
+    this.loadingService.setLoading(false);
+  }
 
   loadCategory() {
-    this.addGraphService.getCategories().subscribe((data) => {
-      this.categories = data.paginateList;
+    this.addGraphService.getCategories().subscribe({
+      next: (data) => {
+        this.categories = data.paginateList;
+        this.loadingService.setLoading(false);
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
     });
   }
 
@@ -54,6 +69,7 @@ export class AddGraphComponent {
   }
 
   readFile(event: Event) {
+    this.loadingService.setLoading(true);
     this.wrongFormat = false;
     this.isLoaded = false;
     this.isHighlighted = false;
@@ -64,11 +80,12 @@ export class AddGraphComponent {
 
     if (fileExtension !== 'csv') {
       this.wrongFormat = true;
-      this._snackBar.openFromComponent(UserManageNotificationComponent, {
+      this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
         data: 'Please upload a CSV file',
         panelClass: ['notification-class-danger'],
         duration: 2000,
       });
+      this.loadingService.setLoading(false);
       return;
     }
 
@@ -92,30 +109,40 @@ export class AddGraphComponent {
       if (!this.categories.length) {
         this.loadCategory();
       }
+      this.loadingService.setLoading(false);
     };
   }
 
   uploadFile() {
     this.isUploading = true;
+    this.loadingService.setLoading(true);
     if (this.csvType === 'node') {
       this.addGraphService
         .uploadNode(this.selectedFile, this.selectedId, this.categoryName)
         .subscribe({
           next: () => {
             this.reset();
-            this._snackBar.openFromComponent(UserManageNotificationComponent, {
-              data: 'Node added successfully!',
-              panelClass: ['notification-class-success'],
-              duration: 2000,
-            });
+            this._snackBar.openFromComponent(
+              DangerSuccessNotificationComponent,
+              {
+                data: 'Node added successfully!',
+                panelClass: ['notification-class-success'],
+                duration: 2000,
+              }
+            );
+            this.loadingService.setLoading(false);
           },
           error: (error) => {
             this.isUploading = false;
-            this._snackBar.openFromComponent(UserManageNotificationComponent, {
-              data: error.error.message,
-              panelClass: ['notification-class-danger'],
-              duration: 2000,
-            });
+            this._snackBar.openFromComponent(
+              DangerSuccessNotificationComponent,
+              {
+                data: error.error.message,
+                panelClass: ['notification-class-danger'],
+                duration: 2000,
+              }
+            );
+            this.loadingService.setLoading(false);
           },
         });
     } else {
@@ -128,19 +155,27 @@ export class AddGraphComponent {
         .subscribe({
           next: () => {
             this.reset();
-            this._snackBar.openFromComponent(UserManageNotificationComponent, {
-              data: 'Edge added successfully!',
-              panelClass: ['notification-class-success'],
-              duration: 2000,
-            });
+            this._snackBar.openFromComponent(
+              DangerSuccessNotificationComponent,
+              {
+                data: 'Edge added successfully!',
+                panelClass: ['notification-class-success'],
+                duration: 2000,
+              }
+            );
+            this.loadingService.setLoading(false);
           },
           error: (error) => {
             this.isUploading = false;
-            this._snackBar.openFromComponent(UserManageNotificationComponent, {
-              data: error.error.message,
-              panelClass: ['notification-class-danger'],
-              duration: 2000,
-            });
+            this._snackBar.openFromComponent(
+              DangerSuccessNotificationComponent,
+              {
+                data: error.error.message,
+                panelClass: ['notification-class-danger'],
+                duration: 2000,
+              }
+            );
+            this.loadingService.setLoading(false);
           },
         });
     }
@@ -160,5 +195,6 @@ export class AddGraphComponent {
     this.selectedSource = '';
     this.selectedDestination = '';
     this.categoryName = '';
+    this.name = '';
   }
 }
diff --git a/src/app/graph/components/category/cat-delete-confirm/cat-delete-confirm.component.ts b/src/app/graph/components/category/cat-delete-confirm/cat-delete-confirm.component.ts
@@ -2,8 +2,9 @@ import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { CategoryService } from '../../../services/category/category.service';
 import { CategoryData } from '../../../model/Category';
-import { UserManageNotificationComponent } from '../../../../user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { LoadingService } from '../../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-cat-delete-confirm',
@@ -36,28 +37,31 @@ export class CatDeleteConfirmComponent {
     },
     private categoryService: CategoryService,
     private _snackBar: MatSnackBar,
+    private loadingService: LoadingService
   ) {}
 
   deleteUser() {
+    this.loadingService.setLoading(true);
     this.categoryService.deleteCategory(this.data.category.id).subscribe({
       next: () => {
-        console.log(12121212);
         this.categoryService.getCategories(
           this.data.pageSize,
-          this.data.pageIndex,
+          this.data.pageIndex
         );
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: 'Category created successfully.',
           panelClass: ['notification-class-success'],
           duration: 2000,
         });
+        this.loadingService.setLoading(false);
       },
       error: (error) => {
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: error.error.message,
           panelClass: ['notification-class-danger'],
           duration: 2000,
         });
+        this.loadingService.setLoading(false);
       },
     });
   }

diff --git a/src/app/graph/components/category/category.component.ts b/src/app/graph/components/category/category.component.ts
@@ -5,7 +5,8 @@ import { PageEvent } from '@angular/material/paginator';
 import { CategoryData, GetCategoriesResponse } from '../../model/Category';
 import { CatDeleteConfirmComponent } from './cat-delete-confirm/cat-delete-confirm.component';
 import { CategoryService } from '../../services/category/category.service';
-import { UserManageNotificationComponent } from '../../../user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component';
+import { LoadingService } from '../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-category',
@@ -32,16 +33,26 @@ export class CategoryComponent implements OnInit {
     private readonly dialog: MatDialog,
     private _snackBar: MatSnackBar,
     private categoryService: CategoryService,
+    private loadingService: LoadingService
   ) {}
 
   ngOnInit(): void {
-    this.categoryService.categoriesData$.subscribe(
-      (response: GetCategoriesResponse) => {
+    this.categoryService.categoriesData$.subscribe({
+      next: (response: GetCategoriesResponse) => {
         this.categoriesData = response.paginateList;
         this.length = response.totalCount;
         this.pageIndex = response.pageIndex;
+        this.loadingService.setLoading(false);
       },
-    );
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
+    });
 
     this.categoryService.notification$.subscribe(
       (data: { status: boolean; message: string }) => {
@@ -56,10 +67,11 @@ export class CategoryComponent implements OnInit {
         if (data.status) {
           this.dialog.closeAll();
         }
-      },
+      }
     );
 
     this.categoryService.getCategories(this.pageSize, this.pageIndex);
+    this.loadingService.setLoading(false);
   }
 
   addCategory() {
@@ -82,23 +94,26 @@ export class CategoryComponent implements OnInit {
   }
 
   saveNewCategory() {
+    this.loadingService.setLoading(true);
     this.categoryService.createCategory(this.nameValue).subscribe({
       next: () => {
         this.categoryService.getCategories(this.pageSize, this.pageIndex);
         this.isAdding = false;
         this.nameValue = '';
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: 'Category created successfully.',
           panelClass: ['notification-class-success'],
           duration: 2000,
         });
+        this.loadingService.setLoading(false);
       },
       error: (error) => {
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: error.error.message,
           panelClass: ['notification-class-danger'],
           duration: 2000,
         });
+        this.loadingService.setLoading(false);
       },
     });
   }