From 793b547e2da9978fac203adc8bc9fb2c0deb73fc Mon Sep 17 00:00:00 2001
From: chaw <cshen_581@hotmail.com>
Date: Tue, 25 Jul 2023 12:30:55 +0800
Subject: [PATCH 1/8] [CORE-5930] save indicator

---
 .../assessment/assessment.component.html      | 10 +++++++
 .../assessment/assessment.component.scss      |  1 +
 .../assessment/assessment.component.ts        | 27 +++++++++++++++++++
 3 files changed, 38 insertions(+)

diff --git a/projects/v3/src/app/components/assessment/assessment.component.html b/projects/v3/src/app/components/assessment/assessment.component.html
index 4e7ebfd44..173196fee 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.html
+++ b/projects/v3/src/app/components/assessment/assessment.component.html
@@ -4,6 +4,16 @@
   <ion-skeleton-text animated ></ion-skeleton-text>
 </div>
 
+<div class="tick-container">
+  <!-- Add your tick icon here, e.g., an SVG or an image -->
+  <ion-icon name="checkmark-circle-outline" class="tick-icon"
+    [@tickAnimation]="saved ? 'visible' : 'hidden'"
+    (@tickAnimation.done)="onAnimationEnd($event)"
+  ></ion-icon>
+</div>
+
+<ion-button (click)="change()">asdasdad</ion-button>
+
 <!-- Manual Save -->
 <div class="save-info" *ngIf="assessment && (doAssessment || isPendingReview)">
   <p class="body-2 grey-75">{{ savingMessage$ | async }}</p>
diff --git a/projects/v3/src/app/components/assessment/assessment.component.scss b/projects/v3/src/app/components/assessment/assessment.component.scss
index b9fe895d1..fa46ac3aa 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.scss
+++ b/projects/v3/src/app/components/assessment/assessment.component.scss
@@ -181,3 +181,4 @@ ion-footer {
   margin-left: auto;
   margin-right: auto;
 }
+
diff --git a/projects/v3/src/app/components/assessment/assessment.component.ts b/projects/v3/src/app/components/assessment/assessment.component.ts
index 38d96f3d3..68b1b770b 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.ts
+++ b/projects/v3/src/app/components/assessment/assessment.component.ts
@@ -7,6 +7,7 @@ import { BrowserStorageService } from '@v3/services/storage.service';
 import { SharedService } from '@v3/services/shared.service';
 import { BehaviorSubject, Observable, of, Subject, Subscription, throwError } from 'rxjs';
 import { concatMap, delay, tap } from 'rxjs/operators';
+import { trigger, state, style, animate, transition } from '@angular/animations';
 
 // const SAVE_PROGRESS_TIMEOUT = 10000; - AV2-1326
 
@@ -14,6 +15,14 @@ import { concatMap, delay, tap } from 'rxjs/operators';
   selector: 'app-assessment',
   templateUrl: './assessment.component.html',
   styleUrls: ['./assessment.component.scss'],
+  animations: [
+    trigger('tickAnimation', [
+      state('visible', style({ transform: 'scale(1)', opacity: 1 })),
+      state('hidden', style({ transform: 'scale(0)', opacity: 0 })),
+      transition('hidden => visible', animate('200ms ease-out')),
+      transition('visible => hidden', animate('100ms ease-in')),
+    ]),
+  ],
 })
 export class AssessmentComponent implements OnChanges, OnDestroy {
   /**
@@ -47,6 +56,24 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
   // continue to the next task
   @Output() continue = new EventEmitter();
 
+  saved: boolean = false;
+
+  onAutoSaveSuccess() {
+    this.saved = true;
+  }
+  change() {
+    this.saved = !this.saved;
+  }
+
+  onAnimationEnd(event) {
+    if (event.toState === 'visible') {
+      // Animation has ended with the tick being visible, now toggle the saved flag after a short delay
+      setTimeout(() => {
+        this.saved = false;
+      }, 1000); // Adjust the delay as per your preference (in milliseconds)
+    }
+  }
+
   submitActions = new Subject<{
     saveInProgress: boolean;
     goBack: boolean;

From cf0011721f716248a9e322f847c12eb6f8f3429c Mon Sep 17 00:00:00 2001
From: chaw <cshen_581@hotmail.com>
Date: Wed, 26 Jul 2023 10:15:08 +0800
Subject: [PATCH 2/8] [CORE-5930] save indicates on new edit

---
 .../assessment/assessment.component.html      | 21 ++++++++-------
 .../assessment/assessment.component.scss      |  6 +++++
 .../assessment/assessment.component.ts        | 26 +++++++++++--------
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/projects/v3/src/app/components/assessment/assessment.component.html b/projects/v3/src/app/components/assessment/assessment.component.html
index 173196fee..c66df9f60 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.html
+++ b/projects/v3/src/app/components/assessment/assessment.component.html
@@ -4,16 +4,6 @@
   <ion-skeleton-text animated ></ion-skeleton-text>
 </div>
 
-<div class="tick-container">
-  <!-- Add your tick icon here, e.g., an SVG or an image -->
-  <ion-icon name="checkmark-circle-outline" class="tick-icon"
-    [@tickAnimation]="saved ? 'visible' : 'hidden'"
-    (@tickAnimation.done)="onAnimationEnd($event)"
-  ></ion-icon>
-</div>
-
-<ion-button (click)="change()">asdasdad</ion-button>
-
 <!-- Manual Save -->
 <div class="save-info" *ngIf="assessment && (doAssessment || isPendingReview)">
   <p class="body-2 grey-75">{{ savingMessage$ | async }}</p>
@@ -153,6 +143,17 @@ <h3 [attr.aria-describedby]="randomCode(group.name)">{{ group.name }}</h3>
             </ion-item>
 
             <ng-container *ngIf="question" [ngSwitch]="question.type">
+              <!-- <ion-button (click)="change(question.id)">sim-save</ion-button> -->
+
+              <div class="tick-container">
+                <!-- Add your tick icon here, e.g., an SVG or an image -->
+                <ion-icon name="checkmark-circle-outline"
+                  class="tick-icon"
+                  [@tickAnimation]="saved[question.id] ? 'visible' : 'hidden'"
+                  (@tickAnimation.done)="onAnimationEnd($event, question.id)"
+                ></ion-icon>
+              </div>
+
               <ion-item *ngIf="!doAssessment && (
                 (!question.reviewerOnly && utils.isEmpty(submission?.answers[question.id]?.answer)) ||
                 (question.reviewerOnly && !review?.answers[question.id] && !isPendingReview)
diff --git a/projects/v3/src/app/components/assessment/assessment.component.scss b/projects/v3/src/app/components/assessment/assessment.component.scss
index fa46ac3aa..74ea7fa84 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.scss
+++ b/projects/v3/src/app/components/assessment/assessment.component.scss
@@ -182,3 +182,9 @@ ion-footer {
   margin-right: auto;
 }
 
+.tick-container {
+  position: absolute;
+  bottom: 1px;
+  right: 1px;
+  z-index: 1;
+}
diff --git a/projects/v3/src/app/components/assessment/assessment.component.ts b/projects/v3/src/app/components/assessment/assessment.component.ts
index 68b1b770b..4d747c9af 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.ts
+++ b/projects/v3/src/app/components/assessment/assessment.component.ts
@@ -56,20 +56,15 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
   // continue to the next task
   @Output() continue = new EventEmitter();
 
-  saved: boolean = false;
+  saved: {
+    [key:number]: boolean
+  } = {};
 
-  onAutoSaveSuccess() {
-    this.saved = true;
-  }
-  change() {
-    this.saved = !this.saved;
-  }
-
-  onAnimationEnd(event) {
+  onAnimationEnd(event, questionId: number) {
     if (event.toState === 'visible') {
       // Animation has ended with the tick being visible, now toggle the saved flag after a short delay
       setTimeout(() => {
-        this.saved = false;
+        this.saved[questionId] = false;
       }, 1000); // Adjust the delay as per your preference (in milliseconds)
     }
   }
@@ -122,9 +117,11 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
       this.submitActions.pipe(
         concatMap(request => {
           if (request?.reviewSave) {
+            // this.saved[request.reviewSave.questionId] = true;
             return this.saveReviewAnswer(request.reviewSave);
           }
           if (request?.questionSave) {
+            this.saved[request.questionSave.questionId] = true;
             return this.saveQuestionAnswer(request.questionSave);
           }
           return of(request);
@@ -181,7 +178,10 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
       questionInput.questionId,
       answer,
     ).pipe(
-      delay(1000)
+      delay(1000),
+      tap((_res) => {
+        this.saved[questionInput.questionId] = false;
+      })
     );
   }
 
@@ -206,6 +206,10 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
     );
   }
 
+  change(questionId) {
+    this.saved[questionId] = true;
+  }
+
   ngOnChanges() {
     if (!this.assessment) {
       return;

From f234319be9c23d29db5cf5fefa1d8e68180116b7 Mon Sep 17 00:00:00 2001
From: chaw <cshen_581@hotmail.com>
Date: Thu, 27 Jul 2023 16:59:58 +0800
Subject: [PATCH 3/8] [CORE-5930] can handle object type innerValue now

---
 .../review-rating/review-rating.component.ts  |  2 +-
 .../event-detail.component.spec.ts            |  2 +-
 .../notifications/notifications.page.spec.ts  |  4 +-
 .../v3/src/app/services/utils.service.spec.ts | 30 +++++++++++--
 projects/v3/src/app/services/utils.service.ts | 42 +++++++++++++------
 5 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/projects/v3/src/app/components/review-rating/review-rating.component.ts b/projects/v3/src/app/components/review-rating/review-rating.component.ts
index cd94f80fe..2e44ea85b 100644
--- a/projects/v3/src/app/components/review-rating/review-rating.component.ts
+++ b/projects/v3/src/app/components/review-rating/review-rating.component.ts
@@ -135,7 +135,7 @@ export class ReviewRatingComponent implements OnInit {
   }
 
   addOrRemoveTags(tag) {
-    this.ratingData.tags = this.utils.addOrRemove(this.ratingData.tags, tag);
+    this.ratingData.tags = this.utils.addOrRemove<any[]>(this.ratingData.tags, tag);
   }
 
   rateMood(mood: number): void {
diff --git a/projects/v3/src/app/pages/events/event-detail/event-detail.component.spec.ts b/projects/v3/src/app/pages/events/event-detail/event-detail.component.spec.ts
index 631c7be61..4b7ebc035 100644
--- a/projects/v3/src/app/pages/events/event-detail/event-detail.component.spec.ts
+++ b/projects/v3/src/app/pages/events/event-detail/event-detail.component.spec.ts
@@ -158,7 +158,7 @@ describe('EventDetailComponent', () => {
       component.event = tmpEvent;
       fixture.detectChanges();
       component.event = tmpEvent;
-      expect(component.buttonText()).toEqual(expected);
+      expect(component.buttonText).toEqual(expected);
       expect(page.eventName.innerHTML).toEqual(tmpEvent.name);
       expect(page.activityName.innerHTML).toEqual(tmpEvent.activityName);
       if (expected === 'Expired') {
diff --git a/projects/v3/src/app/pages/notifications/notifications.page.spec.ts b/projects/v3/src/app/pages/notifications/notifications.page.spec.ts
index 47c27f783..6c936279a 100644
--- a/projects/v3/src/app/pages/notifications/notifications.page.spec.ts
+++ b/projects/v3/src/app/pages/notifications/notifications.page.spec.ts
@@ -243,7 +243,7 @@ describe('NotificationsPage', () => {
           assessment_submission_id: 4,
         },
         type: 'any type',
-      }, keyboardEvent).then(clickTodoItem => {
+      }).then(clickTodoItem => {
         expect(clickTodoItem).toBeUndefined();
       });
       const showEventDetail = component.showEventDetail({} as any, keyboardEvent);
@@ -273,7 +273,7 @@ describe('NotificationsPage', () => {
           assessment_submission_id: 4,
         },
         type: 'any type',
-      }, keyboardEvent);
+      });
       const showEventDetail = component.showEventDetail({} as any, keyboardEvent);
       component.goBack(keyboardEvent);
       flushMicrotasks();
diff --git a/projects/v3/src/app/services/utils.service.spec.ts b/projects/v3/src/app/services/utils.service.spec.ts
index 2b456293d..afc0de349 100644
--- a/projects/v3/src/app/services/utils.service.spec.ts
+++ b/projects/v3/src/app/services/utils.service.spec.ts
@@ -4,6 +4,7 @@ import * as _ from 'lodash';
 import * as moment from 'moment';
 import { TestUtils } from '@testing/utils';
 import { ApolloService } from '@v3/services/apollo.service';
+import { ModalController } from '@ionic/angular';
 
 describe('UtilsService', () => {
   moment.updateLocale('en', {
@@ -34,6 +35,10 @@ describe('UtilsService', () => {
             },
           }),
         },
+        {
+          provide: ModalController,
+          useValue: jasmine.createSpyObj('ModalController', ['dismiss', 'create'])
+        },
       ],
     });
 
@@ -118,6 +123,23 @@ describe('UtilsService', () => {
       expect(result.length).toEqual(0);
       expect(result.length).not.toEqual(1);
     });
+
+    it('should accept object and remove subject from it', () => {
+      const result = service.addOrRemove<object>({
+        subject1: 'new value 1',
+        subject2: 'new value 2',
+        subject3: 'new value 3',
+        subject4: 'new value 4',
+        subject5: 'new value 5',
+      }, 'new value 3');
+
+      expect(result).toEqual({
+        subject1: 'new value 1',
+        subject2: 'new value 2',
+        subject4: 'new value 4',
+        subject5: 'new value 5',
+      });
+    });
   });
 
   describe('changeThemeColor()', () => {
@@ -610,12 +632,12 @@ describe('UtilsService', () => {
       };
       const targetLocale = 'sample-locale';
 
-      jasmine.createSpy('service.getCurrentLocation').and.returnValue(subject);
-      jasmine.createSpy('service.getCurrentLocale').and.returnValue('en-US');
-      const redirection = jasmine.createSpy('service.redirectToUrl');
+      service.getCurrentLocation = jasmine.createSpy('service.getCurrentLocation').and.returnValue(subject);
+      service.getCurrentLocale = jasmine.createSpy('service.getCurrentLocale').and.returnValue('en-US');
+      service.redirectToUrl = jasmine.createSpy('service.redirectToUrl');
       service.moveToNewLocale(targetLocale);
 
-      expect(redirection).toHaveBeenCalledWith(`${subject.origin}/${targetLocale}${subject.pathname}`);
+      expect(service.redirectToUrl).toHaveBeenCalledWith(`${subject.origin}/${targetLocale}${subject.pathname}`);
     });
   });
 });
diff --git a/projects/v3/src/app/services/utils.service.ts b/projects/v3/src/app/services/utils.service.ts
index 00d75fa86..f513632e8 100644
--- a/projects/v3/src/app/services/utils.service.ts
+++ b/projects/v3/src/app/services/utils.service.ts
@@ -96,12 +96,12 @@ export class UtilsService {
     return this.lodash.has(object, path);
   }
 
-  flatten(array) {
-    return this.lodash.flatten(array);
+  flatten(values: any[]) {
+    return this.lodash.flatten(values);
   }
 
-  indexOf(array, value, fromIndex = 0) {
-    return this.lodash.indexOf(array, value, fromIndex);
+  indexOf(values: any[], value, fromIndex = 0) {
+    return this.lodash.indexOf(values, value, fromIndex);
   }
 
   remove(collections, callback) {
@@ -114,16 +114,28 @@ export class UtilsService {
   }
 
   // given an array and a value, check if this value is in this array, if it is, remove it, if not, add it to the array
-  addOrRemove(array: Array<any>, value) {
-    const position = this.indexOf(array, value);
-    if (position > -1) {
-      // find the position of this value and remove it
-      array.splice(position, 1);
-    } else {
-      // add it to the value array
-      array.push(value);
+  addOrRemove<T extends {} | any[]>(comparand: T, subject: number | string): T {
+    if (Array.isArray(comparand)) {
+      const position = this.indexOf(comparand, subject);
+      if (position > -1) {
+        // find the index position of this subject and remove it
+        comparand.splice(position, 1);
+      } else {
+        // add it to the subject comparand
+        comparand.push(subject);
+      }
+      return comparand as T;
     }
-    return array;
+
+    // treat comparand as object & remove the subject from it
+    let result = Object.entries(comparand).reduce((acc, [key, value]) => {
+      if (value !== subject) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+
+    return result as T;
   }
 
   /**
@@ -674,6 +686,8 @@ export class UtilsService {
   moveToNewLocale(newLocale: string) {
     const currentURL = this.getCurrentLocation();
     const currentLocale = this.getCurrentLocale();
+console.log(currentURL);
+console.log(currentLocale);
 
     if (currentLocale === newLocale) {
       return;
@@ -686,6 +700,8 @@ export class UtilsService {
     }
 
     // if pathname begin with different locale
+console.log(pathname);
+
     const newPath = currentURL.pathname.replace(pathname[0], `/${newLocale}/`);
     return this.redirectToUrl(`${currentURL.origin}${newPath}`);
   }

From 91a672ee37e8efa9119f1b9fbb9d2bd7d84acab2 Mon Sep 17 00:00:00 2001
From: chaw <cshen_581@hotmail.com>
Date: Thu, 27 Jul 2023 17:00:36 +0800
Subject: [PATCH 4/8] Update utils.service.ts

---
 projects/v3/src/app/services/utils.service.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/projects/v3/src/app/services/utils.service.ts b/projects/v3/src/app/services/utils.service.ts
index f513632e8..b5e9249b5 100644
--- a/projects/v3/src/app/services/utils.service.ts
+++ b/projects/v3/src/app/services/utils.service.ts
@@ -686,8 +686,6 @@ export class UtilsService {
   moveToNewLocale(newLocale: string) {
     const currentURL = this.getCurrentLocation();
     const currentLocale = this.getCurrentLocale();
-console.log(currentURL);
-console.log(currentLocale);
 
     if (currentLocale === newLocale) {
       return;
@@ -700,8 +698,6 @@ console.log(currentLocale);
     }
 
     // if pathname begin with different locale
-console.log(pathname);
-
     const newPath = currentURL.pathname.replace(pathname[0], `/${newLocale}/`);
     return this.redirectToUrl(`${currentURL.origin}${newPath}`);
   }

From e6d50e89bf443b2fe7c6d7a37ca1cb235c81ca68 Mon Sep 17 00:00:00 2001
From: chaw <cshen_581@hotmail.com>
Date: Thu, 3 Aug 2023 14:10:04 +0800
Subject: [PATCH 5/8] [CORE-5930] oneoff & multi fixed debounce

---
 .../assessment/assessment.component.ts        | 12 ++-
 .../multiple/multiple.component.html          |  1 +
 .../components/multiple/multiple.component.ts | 84 +++++++++++--------
 .../app/components/oneof/oneof.component.ts   | 73 +++++++++-------
 .../src/app/components/text/text.component.ts | 10 +--
 5 files changed, 102 insertions(+), 78 deletions(-)

diff --git a/projects/v3/src/app/components/assessment/assessment.component.ts b/projects/v3/src/app/components/assessment/assessment.component.ts
index 4d747c9af..c49b0cfd8 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.ts
+++ b/projects/v3/src/app/components/assessment/assessment.component.ts
@@ -5,8 +5,8 @@ import { NotificationsService } from '@v3/services/notifications.service';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { BrowserStorageService } from '@v3/services/storage.service';
 import { SharedService } from '@v3/services/shared.service';
-import { BehaviorSubject, Observable, of, Subject, Subscription, throwError } from 'rxjs';
-import { concatMap, delay, tap } from 'rxjs/operators';
+import { BehaviorSubject, Observable, of, Subject, Subscription, timer } from 'rxjs';
+import { concatMap, take, tap } from 'rxjs/operators';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 
 // const SAVE_PROGRESS_TIMEOUT = 10000; - AV2-1326
@@ -63,9 +63,9 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
   onAnimationEnd(event, questionId: number) {
     if (event.toState === 'visible') {
       // Animation has ended with the tick being visible, now toggle the saved flag after a short delay
-      setTimeout(() => {
+      timer(1000).pipe(take(1)).subscribe(() => {
         this.saved[questionId] = false;
-      }, 1000); // Adjust the delay as per your preference (in milliseconds)
+      });
     }
   }
 
@@ -178,10 +178,9 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
       questionInput.questionId,
       answer,
     ).pipe(
-      delay(1000),
       tap((_res) => {
         this.saved[questionInput.questionId] = false;
-      })
+      }),
     );
   }
 
@@ -201,7 +200,6 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
       answer,
       comment,
     ).pipe(
-      delay(1000),
       tap((res) => { console.log(res) })
     );
   }
diff --git a/projects/v3/src/app/components/multiple/multiple.component.html b/projects/v3/src/app/components/multiple/multiple.component.html
index 6ffa2e30d..c6eb2277f 100644
--- a/projects/v3/src/app/components/multiple/multiple.component.html
+++ b/projects/v3/src/app/components/multiple/multiple.component.html
@@ -87,6 +87,7 @@ <h3 class="for-accessibility" [id]="'multiple-choice-question-' + question.id">{
       ></ion-checkbox>
     </ion-item>
   </ion-list>
+
   <ion-textarea
     [attr.aria-label]="'expert\'s review feedback'"
     *ngIf="question.canComment && submission.answer"
diff --git a/projects/v3/src/app/components/multiple/multiple.component.ts b/projects/v3/src/app/components/multiple/multiple.component.ts
index d7936507d..976d95c5b 100644
--- a/projects/v3/src/app/components/multiple/multiple.component.ts
+++ b/projects/v3/src/app/components/multiple/multiple.component.ts
@@ -1,7 +1,9 @@
-import { Component, Input, Output, EventEmitter, forwardRef, ViewChild, ElementRef, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, forwardRef, ViewChild, ElementRef, OnInit, QueryList, OnDestroy, ViewChildren } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor, AbstractControl } from '@angular/forms';
+import { IonCheckbox } from '@ionic/angular';
 import { UtilsService } from '@v3/app/services/utils.service';
-import { Subject } from 'rxjs';
+import { from, fromEvent, merge, Subject, Subscription } from 'rxjs';
+import { debounceTime, map, switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-multiple',
@@ -15,7 +17,7 @@ import { Subject } from 'rxjs';
     }
   ]
 })
-export class MultipleComponent implements ControlValueAccessor, OnInit {
+export class MultipleComponent implements ControlValueAccessor, OnInit, OnDestroy {
   @Input() submitActions$: Subject<any>;
 
   @Input() question;
@@ -33,17 +35,19 @@ export class MultipleComponent implements ControlValueAccessor, OnInit {
   @Input() doReview: Boolean;
   // FormControl that is passed in from parent component
   @Input() control: AbstractControl;
-  // answer field for submitter & reviewer
-  @ViewChild('answer') answerRef: ElementRef;
   // comment field for reviewer
   @ViewChild('commentEle') commentRef: ElementRef;
 
+  autosave$ = new Subject<any>();
+
   // the value of answer
   innerValue: any;
   comment: string;
   // validation errors array
   errors: Array<any> = [];
 
+  subscriptions: Subscription[] = [];
+
   constructor(
     private utils: UtilsService,
   ) {}
@@ -52,6 +56,46 @@ export class MultipleComponent implements ControlValueAccessor, OnInit {
     this._showSavedAnswers();
   }
 
+  ngAfterViewInit() {
+    this.autosave$.pipe(
+      debounceTime(800),
+    ).subscribe(() => {
+      const action: {
+        saveInProgress?: boolean;
+        goBack?: boolean;
+        questionSave?: {};
+        reviewSave?: {};
+      } = {
+        saveInProgress: true,
+        goBack: false,
+      };
+
+      if (this.doReview === true) {
+        action.reviewSave = {
+          reviewId: this.reviewId,
+          submissionId: this.submissionId,
+          questionId: this.question.id,
+          answer: this.innerValue.answer,
+          comment: this.innerValue.comment,
+        };
+      }
+
+      if (this.doAssessment === true) {
+        action.questionSave = {
+          submissionId: this.submissionId,
+          questionId: this.question.id,
+          answer: this.innerValue,
+        };
+      }
+
+      this.submitActions$.next(action);
+    });
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
   // propagate changes into the form control
   propagateChange = (_: any) => {};
 
@@ -98,35 +142,7 @@ export class MultipleComponent implements ControlValueAccessor, OnInit {
       }
     }
 
-    const action: {
-      saveInProgress?: boolean;
-      goBack?: boolean;
-      questionSave?: {};
-      reviewSave?: {};
-    } = {
-      saveInProgress: true,
-      goBack: false,
-    };
-
-    if (this.doReview === true) {
-      action.reviewSave = {
-        reviewId: this.reviewId,
-        submissionId: this.submissionId,
-        questionId: this.question.id,
-        answer: this.innerValue.answer,
-        comment: this.innerValue.comment,
-      };
-    }
-
-    if (this.doAssessment === true) {
-      action.questionSave = {
-        submissionId: this.submissionId,
-        questionId: this.question.id,
-        answer: this.innerValue,
-      };
-    }
-
-    this.submitActions$.next(action);
+    this.autosave$.next();
   }
 
   // From ControlValueAccessor interface
diff --git a/projects/v3/src/app/components/oneof/oneof.component.ts b/projects/v3/src/app/components/oneof/oneof.component.ts
index e868be038..ae07d5fe4 100644
--- a/projects/v3/src/app/components/oneof/oneof.component.ts
+++ b/projects/v3/src/app/components/oneof/oneof.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input, Output, EventEmitter, forwardRef, ViewChild, ElementRef, OnInit } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl, AbstractControl } from '@angular/forms';
+import { Component, Input, forwardRef, ViewChild, ElementRef, OnInit } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor, AbstractControl } from '@angular/forms';
 import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 
 @Component({
   selector: 'app-oneof',
@@ -43,12 +44,50 @@ export class OneofComponent implements ControlValueAccessor, OnInit {
   // validation errors array
   errors: Array<any> = [];
 
+  autosave$ = new Subject<any>();
+
   constructor() {}
 
   ngOnInit() {
     this._showSavedAnswers();
   }
 
+  ngAfterViewInit() {
+    this.autosave$.pipe(
+      debounceTime(800),
+    ).subscribe(() => {
+      const action: {
+        saveInProgress?: boolean;
+        goBack?: boolean;
+        questionSave?: {};
+        reviewSave?: {};
+      } = {
+        saveInProgress: true,
+        goBack: false,
+      };
+
+      if (this.doReview === true) {
+        action.reviewSave = {
+          reviewId: this.reviewId,
+          submissionId: this.submissionId,
+          questionId: this.question.id,
+          answer: this.innerValue.answer,
+          comment: this.innerValue.comment,
+        };
+      }
+
+      if (this.doAssessment === true) {
+        action.questionSave = {
+          submissionId: this.submissionId,
+          questionId: this.question.id,
+          answer: this.innerValue,
+        };
+      }
+
+      this.submitActions$.next(action);
+    });
+  }
+
   // propagate changes into the form control
   propagateChange = (_: any) => {};
 
@@ -83,35 +122,7 @@ export class OneofComponent implements ControlValueAccessor, OnInit {
       }
     }
 
-    const action: {
-      saveInProgress?: boolean;
-      goBack?: boolean;
-      questionSave?: {};
-      reviewSave?: {};
-    } = {
-      saveInProgress: true,
-      goBack: false,
-    };
-
-    if (this.doReview === true) {
-      action.reviewSave = {
-        reviewId: this.reviewId,
-        submissionId: this.submissionId,
-        questionId: this.question.id,
-        answer: this.innerValue.answer,
-        comment: this.innerValue.comment,
-      };
-    }
-
-    if (this.doAssessment === true) {
-      action.questionSave = {
-        submissionId: this.submissionId,
-        questionId: this.question.id,
-        answer: this.innerValue,
-      };
-    }
-
-    this.submitActions$.next(action);
+    this.autosave$.next();
   }
 
   // From ControlValueAccessor interface
diff --git a/projects/v3/src/app/components/text/text.component.ts b/projects/v3/src/app/components/text/text.component.ts
index 1d78d3efe..3624a7a8b 100644
--- a/projects/v3/src/app/components/text/text.component.ts
+++ b/projects/v3/src/app/components/text/text.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, forwardRef, ViewChild, ElementRef, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl, AbstractControl } from '@angular/forms';
 import { IonTextarea } from '@ionic/angular';
-import { AssessmentService, Question } from '@v3/services/assessment.service';
+import { Question } from '@v3/services/assessment.service';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 
@@ -48,9 +48,7 @@ export class TextComponent implements ControlValueAccessor, OnInit, AfterViewIni
   // validation errors array
   errors: Array<any> = [];
 
-  constructor(
-    private assessmentService: AssessmentService,
-  ) {}
+  constructor() {}
 
   ngOnInit() {
     this._showSavedAnswers();
@@ -60,8 +58,8 @@ export class TextComponent implements ControlValueAccessor, OnInit, AfterViewIni
     if (this.answerRef?.ionInput) {
       this.subcriptions.push(this.answerRef.ionInput.pipe(
         map(e => (e.target as HTMLInputElement).value),
-        filter(text => text.length > 0),
-        debounceTime(1250),
+        filter(text => text.length >= 0),
+        debounceTime(800),
         distinctUntilChanged(),
       ).subscribe(_data => {
         const action: {

From 46a45246bc2e14e0bb82f16b01d68271b71ba19c Mon Sep 17 00:00:00 2001
From: chaw <cshen_581@hotmail.com>
Date: Tue, 29 Aug 2023 01:53:09 +0800
Subject: [PATCH 6/8] [CORE-5930] bad merge leftover

---
 .../review-rating/review-rating.component.ts  |  2 +-
 .../v3/src/app/services/utils.service.spec.ts | 33 -------------------
 2 files changed, 1 insertion(+), 34 deletions(-)

diff --git a/projects/v3/src/app/components/review-rating/review-rating.component.ts b/projects/v3/src/app/components/review-rating/review-rating.component.ts
index 2e44ea85b..cd94f80fe 100644
--- a/projects/v3/src/app/components/review-rating/review-rating.component.ts
+++ b/projects/v3/src/app/components/review-rating/review-rating.component.ts
@@ -135,7 +135,7 @@ export class ReviewRatingComponent implements OnInit {
   }
 
   addOrRemoveTags(tag) {
-    this.ratingData.tags = this.utils.addOrRemove<any[]>(this.ratingData.tags, tag);
+    this.ratingData.tags = this.utils.addOrRemove(this.ratingData.tags, tag);
   }
 
   rateMood(mood: number): void {
diff --git a/projects/v3/src/app/services/utils.service.spec.ts b/projects/v3/src/app/services/utils.service.spec.ts
index abc345876..f969a9383 100644
--- a/projects/v3/src/app/services/utils.service.spec.ts
+++ b/projects/v3/src/app/services/utils.service.spec.ts
@@ -123,39 +123,6 @@ describe('UtilsService', () => {
       expect(result.length).toEqual(0);
       expect(result.length).not.toEqual(1);
     });
-
-    it('should accept object and remove subject from it', () => {
-      const result = service.addOrRemove<object>({
-        subject1: 'new subject 1',
-        subject2: 'new subject 2',
-        subject3: 'new subject 3',
-        subject4: 'new subject 4',
-        subject5: 'new subject 5',
-      }, 'new subject 3');
-
-      expect(result).toEqual({
-        subject1: 'new subject 1',
-        subject2: 'new subject 2',
-        subject4: 'new subject 4',
-        subject5: 'new subject 5',
-      });
-    });
-
-
-    it('should add value if the subject is not already available in the provided object', () => {
-      const result = service.addOrRemove<object>({
-        subject1: 'new subject 1',
-        subject2: 'new subject 2',
-        subject3: 'new subject 3',
-      }, 'new subject 4');
-
-      expect(result).toEqual({
-        subject1: 'new subject 1',
-        subject2: 'new subject 2',
-        subject3: 'new subject 3',
-        4: 'new subject 4',
-      });
-    });
   });
 
   describe('changeThemeColor()', () => {

From 7501d54ffdf020fc42b646d60826a09ba7999401 Mon Sep 17 00:00:00 2001
From: chaw <cshen_581@hotmail.com>
Date: Tue, 5 Sep 2023 08:35:17 +0800
Subject: [PATCH 7/8] [CORE-5930] loading indicator

---
 .../components/assessment/assessment.component.html   | 10 ++++++++--
 .../app/components/assessment/assessment.component.ts | 11 ++++++++---
 .../branding-logo/branding-logo.component.html        |  2 +-
 .../branding-logo/branding-logo.component.ts          |  4 +++-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/projects/v3/src/app/components/assessment/assessment.component.html b/projects/v3/src/app/components/assessment/assessment.component.html
index b2e96588a..e9c98a282 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.html
+++ b/projects/v3/src/app/components/assessment/assessment.component.html
@@ -147,11 +147,17 @@ <h3 [attr.aria-describedby]="randomCode(group.name)">{{ group.name }}</h3>
               <!-- <ion-button (click)="change(question.id)">sim-save</ion-button> -->
 
               <div class="tick-container">
-                <!-- Add your tick icon here, e.g., an SVG or an image -->
+                <ion-spinner name="dots" class="tick-icon"
+                  style="max-width: 16px; max-height: 16px;"
+                  *ngIf="autosaving[question.id]"
+                  [@tickAnimation]="autosaving[question.id] ? 'visible' : 'hidden'"
+                  (@tickAnimation.done)="onAnimationEnd($event, question.id)"
+                ></ion-spinner>
+
                 <ion-icon name="checkmark-circle-outline"
                   class="tick-icon"
+                  *ngIf="saved[question.id]"
                   [@tickAnimation]="saved[question.id] ? 'visible' : 'hidden'"
-                  (@tickAnimation.done)="onAnimationEnd($event, question.id)"
                 ></ion-icon>
               </div>
 
diff --git a/projects/v3/src/app/components/assessment/assessment.component.ts b/projects/v3/src/app/components/assessment/assessment.component.ts
index da5e9961d..2814edacf 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.ts
+++ b/projects/v3/src/app/components/assessment/assessment.component.ts
@@ -55,6 +55,9 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
   // continue to the next task
   @Output() continue = new EventEmitter();
 
+  autosaving: {
+    [key: number]: boolean
+  } = {};
   saved: {
     [key:number]: boolean
   } = {};
@@ -63,7 +66,7 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
     if (event.toState === 'visible') {
       // Animation has ended with the tick being visible, now toggle the saved flag after a short delay
       timer(1000).pipe(take(1)).subscribe(() => {
-        this.saved[questionId] = false;
+        this.autosaving[questionId] = false;
       });
     }
   }
@@ -126,7 +129,8 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
             return this.saveReviewAnswer(request.reviewSave);
           }
           if (request?.questionSave) {
-            this.saved[request.questionSave.questionId] = true;
+            this.autosaving[request.questionSave.questionId] = true;
+            this.saved[request.questionSave.questionId] = false;
             return this.saveQuestionAnswer(request.questionSave);
           }
           return of(request);
@@ -196,7 +200,8 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
       answer,
     ).pipe(
       tap((_res) => {
-        this.saved[questionInput.questionId] = false;
+        this.autosaving[questionInput.questionId] = false;
+        this.saved[questionInput.questionId] = true;
       }),
       delay(800)
     );
diff --git a/projects/v3/src/app/components/branding-logo/branding-logo.component.html b/projects/v3/src/app/components/branding-logo/branding-logo.component.html
index cdc48b1ec..4dbb2d8e7 100644
--- a/projects/v3/src/app/components/branding-logo/branding-logo.component.html
+++ b/projects/v3/src/app/components/branding-logo/branding-logo.component.html
@@ -1 +1 @@
-<img [src]="storage.getConfig().logo || './assets/logo.svg'" width="100%" [attr.alt]="(!storage.getConfig().logo) ? 'Practera logo' : (name || 'branding logo')" i18n-alt>
+<img [src]="logo || './assets/logo.svg'" width="100%" [attr.alt]="!logo ? 'Practera logo' : (name || 'branding logo')" i18n-alt>
diff --git a/projects/v3/src/app/components/branding-logo/branding-logo.component.ts b/projects/v3/src/app/components/branding-logo/branding-logo.component.ts
index 57b7550d3..b9df6abe8 100644
--- a/projects/v3/src/app/components/branding-logo/branding-logo.component.ts
+++ b/projects/v3/src/app/components/branding-logo/branding-logo.component.ts
@@ -9,5 +9,7 @@ export class BrandingLogoComponent {
   @Input() logo: string;
   @Input() name?: string;
 
-  constructor(public storage: BrowserStorageService) {}
+  constructor(public storage: BrowserStorageService) {
+    this.logo = this.logo || this.storage.getConfig().logo;
+  }
 }

From 1285a55c8d9c1214ed797da378e51891177748fc Mon Sep 17 00:00:00 2001
From: chaw <cshen_581@hotmail.com>
Date: Tue, 5 Sep 2023 10:38:04 +0800
Subject: [PATCH 8/8] [CORE-5930]

---
 .../src/app/components/assessment/assessment.component.html   | 2 --
 .../v3/src/app/components/assessment/assessment.component.ts  | 4 ----
 2 files changed, 6 deletions(-)

diff --git a/projects/v3/src/app/components/assessment/assessment.component.html b/projects/v3/src/app/components/assessment/assessment.component.html
index e9c98a282..c4165efdf 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.html
+++ b/projects/v3/src/app/components/assessment/assessment.component.html
@@ -144,8 +144,6 @@ <h3 [attr.aria-describedby]="randomCode(group.name)">{{ group.name }}</h3>
             </ion-item>
 
             <ng-container *ngIf="question" [ngSwitch]="question.type">
-              <!-- <ion-button (click)="change(question.id)">sim-save</ion-button> -->
-
               <div class="tick-container">
                 <ion-spinner name="dots" class="tick-icon"
                   style="max-width: 16px; max-height: 16px;"
diff --git a/projects/v3/src/app/components/assessment/assessment.component.ts b/projects/v3/src/app/components/assessment/assessment.component.ts
index 2814edacf..06cb72ec9 100644
--- a/projects/v3/src/app/components/assessment/assessment.component.ts
+++ b/projects/v3/src/app/components/assessment/assessment.component.ts
@@ -228,10 +228,6 @@ export class AssessmentComponent implements OnChanges, OnDestroy {
     );
   }
 
-  change(questionId) {
-    this.saved[questionId] = true;
-  }
-
   ngOnChanges() {
     if (!this.assessment) {
       return;