Merge pull request #108 from sancsoft/92-add-saving-indicator-to-pm-r…

…eport-tab-on-psr-details Add saving indicator to pm report tab on psr details
sancsoft · Jun 10, 2024 · b69cba5 · b69cba5
2 parents a5ee089 + 722befb
commit b69cba5
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/angular/hq/.vscode/settings.json b/src/angular/hq/.vscode/settings.json
@@ -1,13 +1,13 @@
 {
-    "files.associations": {
-        "*.css": "tailwindcss"
-    },
-    "editor.quickSuggestions": {
-        "strings": "on"
-    },
-    "files.watcherExclude": {
-      "**/.git/objects/**": true,
-      "**/.git/subtree-cache/**": true,
-      "**/node_modules/*/**": true
-    }
-}
+  "files.associations": {
+      ".css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+      "strings": "on"
+  },
+  "files.watcherExclude": {
+    "/.git/objects/": true,
+    "/.git/subtree-cache/": true,
+    "**/node_modules//**": true
+  }
+}
diff --git a/src/angular/hq/src/app/psr/psrreport/psrreport.component.html b/src/angular/hq/src/app/psr/psrreport/psrreport.component.html
@@ -1,6 +1,23 @@
 <div class="bg-black-alt border-steel-blue-600 border-t sticky top-0 z-50">
-  <div class="bg-blue-900 border-steel-blue-600 border-y py-3 px-2 text-nowrap flex justify-end">
-    <div class="flex space-x-2 pr-5">
+  <div class="bg-blue-900 border-steel-blue-600 border-y py-3 px-2 text-nowrap flex">
+
+
+    <div class= "ml-5 py-2">
+      @if(savedStatus == "loading"){
+        <div class=" rounded min-w-[120px]">
+          <i class ="bi bi-cloud-upload-fill text-gray-50"></i> Saving...
+        </div>
+        }@else if(savedStatus == "success"){
+        <div>
+          <i class ="bi bi-check-circle-fill text-green-400"></i>
+        </div>
+        }@else if(savedStatus == "fail"){
+        <div>
+          <i class ="bi bi-exclamation-diamond-fill text-yellow-400"></i> Error saving
+        </div>
+      }
+    </div>
+    <div class="ml-auto space-x-2 pr-5">
       <button
         class="px-2 py-2 border border-orange-500 bg-orange-500 hover:bg-orange-600 hover:border-orange-600 text-white rounded min-w-[120px] font-normal"
         (click)="onReportSubmit()"

diff --git a/src/angular/hq/src/app/psr/psrreport/psrreport.component.ts b/src/angular/hq/src/app/psr/psrreport/psrreport.component.ts
@@ -12,6 +12,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, NgModel } from '@angular/forms';
 import { PsrService } from '../psr-service';
 
+
 import {
   BehaviorSubject,
   Observable,
@@ -20,6 +21,7 @@ import {
   combineLatest,
   debounceTime,
   map,
+  tap,
   skip,
   startWith,
   switchMap,
@@ -30,7 +32,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { APIError } from '../../errors/apierror';
 import { MarkdownModule } from 'ngx-markdown';
 import { HQMarkdownComponent } from '../../common/markdown/markdown.component';
-
 @Component({
   selector: 'hq-psrreport',
   standalone: true,
@@ -47,6 +48,8 @@ export class PSRReportComponent implements OnInit, OnDestroy {
 
   report$ = new Subject<string | null>();
   psrId$: Observable<string>;
+  savedStatus?: string;
+
 
   ngOnInit(): void {
     this.psrService.resetFilter();
@@ -65,7 +68,8 @@ export class PSRReportComponent implements OnInit, OnDestroy {
     private hqService: HQService,
     private router: Router,
     private route: ActivatedRoute,
-    private psrService: PsrService
+    private psrService: PsrService,
+
   ) {
     const psrId$ = this.route.parent!.params.pipe(
       map((params) => params['psrId'])
@@ -97,28 +101,36 @@ export class PSRReportComponent implements OnInit, OnDestroy {
       }
     });
 
+
     const apiResponse$ = request$.pipe(
       debounceTime(1000),
       skip(1),
       takeUntil(this.destroyed$),
+      tap(()=> {this.savedStatus = "loading"; console.log(this.savedStatus);}),
       switchMap((request) =>
         this.hqService.updateProjectStatusReportMarkdownV1(request)
       )
     );
     apiResponse$.subscribe({
       next: (response) => {
+        this.savedStatus ="success";
+        console.log(this.savedStatus);
         console.log('API Response:', response);
       },
       error: (err) => {
+        this.savedStatus = "fail";
+        console.log(this.savedStatus);
         console.error('Error:', err);
-        window.alert('There was an error saving the PM report.')
+        window.alert('There was an error saving the PM report.');
+        tap(()=> {this.savedStatus = "fail"; });
       },
     });
   }
 
   updateReport(value: string) {
     this.report$.next(value);
   }
+
   onReportSubmit() {
     if (window.confirm('Are you sure you want to submit this report?')) {
       const request$ = combineLatest({