Issue #ED-4177 fix: Fixed categories value order in toc page

src/app/category-list/category-list-page.ts

@@ -591,7 +591,7 @@ export class CategoryListPage implements OnInit, OnDestroy {
     async getContentDetailsFrameworkCategory() {
         await this.formAndFrameworkUtilService.invokedGetFrameworkCategoryList(this.frameworkId).then((data) => {
             data.map((e) => e.label = this.translateJsonPipe.transform(e.label));
-            this.categoriesList = data;
+            this.categoriesList = JSON.parse(JSON.stringify(data));
             this.categoriesList.push({ code: 'lastPublishedBy', name: 'Published by' })
         });
     }

src/app/collection-detail-etb/collection-detail-etb-page.spec.ts

@@ -20,6 +20,7 @@ import {
     AppHeaderService,
     CommonUtilService,
     Environment,
+    FormAndFrameworkUtilService,
     ImpressionType,
     InteractSubtype,
     TelemetryGeneratorService
@@ -127,6 +128,7 @@ describe('collectionDetailEtbPage', () => {
         navigateTo: jest.fn(),
         navigateToCollection: jest.fn()
     };
+    const mockFormAndFrameworkUtilService: Partial<FormAndFrameworkUtilService> = {};
 
     global.window.segmentation = {
         init: jest.fn(),
@@ -164,7 +166,8 @@ describe('collectionDetailEtbPage', () => {
             mocktextbookTocService as TextbookTocService,
             mockContentPlayerHandler as ContentPlayerHandler,
             mockContentDeleteHandler as ContentDeleteHandler,
-            mockSbProgressLoader as SbProgressLoader
+            mockSbProgressLoader as SbProgressLoader,
+            mockFormAndFrameworkUtilService as FormAndFrameworkUtilService
         );
 
         collectionDetailEtbPage.ionContent = mockIonContent as any;
@@ -346,6 +349,24 @@ describe('collectionDetailEtbPage', () => {
         });
     });
 
+    describe('getFrameworkCategory', () => {
+        it('should get framework category', (done) => {
+            // arrange
+            collectionDetailEtbPage.profile = {
+                uid: 'sample-uid',
+                syllabus: ['sample-framework']
+            } as any;
+            mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList = jest.fn(() => Promise.resolve(JSON.parse(JSON.stringify([{index: 2}, {index: 1}]))));
+            // act
+            collectionDetailEtbPage.getFrameworkCategory()
+            // assert
+            setTimeout(() => {
+                expect(mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList).toHaveBeenCalled();
+                done();
+            }, 0);
+        })
+    })
+
     describe('IonViewWillEnter', () => {
 
         it('should set headerConfig, headerObservable, setContentDetails, and subscribeEvents', (done) => {
@@ -357,6 +378,9 @@ describe('collectionDetailEtbPage', () => {
             mockHeaderService.headerEventEmitted$ = {
                 subscribe: jest.fn((fn) => fn(mockHeaderEventsSubscription) as any)
             } as any;
+            jest.spyOn(collectionDetailEtbPage, 'getFrameworkCategory').mockImplementation(() => {
+                return Promise.resolve()
+            });
             jest.spyOn(collectionDetailEtbPage, 'handleHeaderEvents').mockImplementation();
             jest.spyOn(mockHeaderService, 'getDefaultPageConfig').mockReturnValue({
                 showHeader: false,
@@ -406,6 +430,9 @@ describe('collectionDetailEtbPage', () => {
             mockHeaderService.headerEventEmitted$ = {
                 subscribe: jest.fn((fn) => mockHeaderEventsSubscription as any)
             } as any;
+            jest.spyOn(collectionDetailEtbPage, 'getFrameworkCategory').mockImplementation(() => {
+                return Promise.resolve()
+            });
             jest.spyOn(collectionDetailEtbPage, 'handleHeaderEvents').mockImplementation();
             jest.spyOn(mockHeaderService, 'getDefaultPageConfig').mockReturnValue({
                 showHeader: false,

src/app/collection-detail-etb/collection-detail-etb.page.html

@@ -10,7 +10,7 @@
     [isDepthChild]='isDepthChild' 
     [defaultAppIcon]="defaultAppIcon"
     [trackDownloads]="trackDownloads$"
-    [frameworkCategories]="categories">
+    [frameworkCategories]="frameworkCategoryConfig">
     </app-detail-card>
     <!-- End of the Parent Card -->
 

src/app/collection-detail-etb/collection-detail-etb.page.ts

@@ -287,6 +287,7 @@ export class CollectionDetailEtbPage implements OnInit {
   showContentDetails = false;
   categories: any;
   profile: Profile;
+  frameworkCategoryConfig: any;
 
   constructor(
     @Inject('CONTENT_SERVICE') private contentService: ContentService,
@@ -381,7 +382,7 @@ export class CollectionDetailEtbPage implements OnInit {
       this.headerService.updatePageConfig(this.headerConfig);
       this.hiddenGroups.clear();
       this.shownGroups = undefined;
-      await this.getFrameworkCategory();
+      this.getFrameworkCategory();
       await this.assignCardData();
       this.resetVariables();
       await this.setContentDetails(this.identifier, true);
@@ -1579,13 +1580,11 @@ export class CollectionDetailEtbPage implements OnInit {
   }
 
   async getFrameworkCategory() {
-    this.categories = this.appGlobalService.getCachedFrameworkCategory().value;
-    if (!this.categories && this.commonUtilService.networkInfo.isNetworkAvailable) {
-      await this.formAndFrameworkUtilService.invokedGetFrameworkCategoryList(this.profile.syllabus[0]).then((categories) => {
-        if (categories) {
-          this.categories = categories.sort((a, b) => b.index - a.index)
-        }
-      });
-    }
+    await this.formAndFrameworkUtilService.invokedGetFrameworkCategoryList(this.profile.syllabus[0]).then((categories) => {
+      if (categories) {
+        this.frameworkCategoryConfig = JSON.parse(JSON.stringify(categories));
+        this.categories = JSON.parse(JSON.stringify(categories)).sort((a, b) => b.index - a.index);
+      }
+    });
   }
 }

src/app/components/toc-header/toc-header.component.html

@@ -8,8 +8,8 @@
         </div>
         <div class="sb-dt-class-info">
             <span *ngFor="let category of frameworkCategories; let i = index">
-                <span class="sb-dt-label sb-dt-subject" *ngIf="contentData?.[category.code] || contentData?.[category.alterNativeCode]">{{contentData[category.code] || contentData[category.alterNativeCode]}}</span>
-                <span class="sb-separator-dot" *ngIf="i < frameworkCategories.length-1 && (contentData?.[category.code] || contentData?.[category.alterNativeCode])"></span>
+                <span class="sb-dt-label sb-dt-subject" *ngIf="contentData?.[category.code]">{{contentData[category.code]}}</span>
+                <span class="sb-separator-dot" *ngIf="i < frameworkCategories.length-1 && contentData?.[category.code] && (contentData?.[frameworkCategories[i+1]?.code])"></span>
             </span>
         </div>
     </div>

src/app/enrolled-course-details-page/enrolled-course-details-page.html

@@ -1,7 +1,7 @@
 <ion-content>
 	<div class="p-8" *ngIf="!showOfflineSection">
 		<ion-card class="sb-dt-card">
-	        <app-toc-header [contentData]="course || courseCardData?.content" [frameworkCategories]="categories"></app-toc-header>
+	        <app-toc-header [contentData]="course || courseCardData?.content" [frameworkCategories]="frameworkCategory"></app-toc-header>
 			  <div class="hr-border-bottom"></div>
 			<ion-card-content class="sb-content-info">
 				<div *ngIf="isFromGroupFlow">

src/app/enrolled-course-details-page/enrolled-course-details-page.spec.ts

@@ -140,7 +140,6 @@ describe('EnrolledCourseDetailsPage', () => {
     };
 
     const mockFormAndFrameworkUtilService: Partial<FormAndFrameworkUtilService> = {
-        invokedGetFrameworkCategoryList: jest.fn(() => Promise.resolve())
     }
 
     global.window['segmentation'] = {
@@ -2680,6 +2679,24 @@ describe('EnrolledCourseDetailsPage', () => {
         });
     });
 
+    describe('getFrameworkCategory', () => {
+        it('should get framework category', (done) => {
+            // arrange
+            enrolledCourseDetailsPage.profile = {
+                uid: 'sample-uid',
+                syllabus: ['sample-framework']
+            } as any;
+            mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList = jest.fn(() => Promise.resolve(JSON.parse(JSON.stringify([{index: 2}, {index: 1}]))));
+            // act
+            enrolledCourseDetailsPage.getFrameworkCategory()
+            // assert
+            setTimeout(() => {
+                expect(mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList).toHaveBeenCalled();
+                done();
+            }, 0);
+        })
+    })
+
     describe('ionViewWillEnter()', () => {
         it('should be a guest user, ', (done) => {
             mockAppGlobalService.getActiveProfileUid = jest.fn(() => Promise.resolve('some_uid'));
@@ -2704,7 +2721,7 @@ describe('EnrolledCourseDetailsPage', () => {
                 return Promise.resolve();
             });
             mockProfileService.getActiveSessionProfile = jest.fn(() => of(mockProfileData)) as any;
-            mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList = jest.fn(() => Promise.resolve([{index: 2}, {index: 1}]))
+            mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList = jest.fn(() => Promise.resolve(JSON.parse(JSON.stringify([{index: 2}, {index: 1}]))));
             // assert
             enrolledCourseDetailsPage.ionViewWillEnter().then(() => {
                 expect(mockAppGlobalService.getActiveProfileUid).toHaveBeenCalled();
@@ -2750,7 +2767,7 @@ describe('EnrolledCourseDetailsPage', () => {
             mockCourseService.getEnrolledCourses = jest.fn(() => of(mockEnrolledCourses));
             mockHeaderService.showHeaderWithBackButton = jest.fn();
             mockProfileService.getActiveSessionProfile = jest.fn(() => of(mockProfileData));
-            mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList = jest.fn(() => Promise.resolve([{index: 2}, {index: 1}]))
+            mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList = jest.fn(() => Promise.resolve(JSON.parse(JSON.stringify([{index: 2}, {index: 1}]))));
             // act
             enrolledCourseDetailsPage.ionViewWillEnter();
             // assert
@@ -3110,18 +3127,4 @@ describe('EnrolledCourseDetailsPage', () => {
             expect(mockRouter.navigate).toHaveBeenCalled()
         });
     });
-
-    describe('getFrameworkCategory', () => {
-        it('should get framework category', (done) => {
-            // arrange
-            mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList = jest.fn(() => Promise.resolve([{index: 2}, {index: 1}]))
-            // act
-            enrolledCourseDetailsPage.getFrameworkCategory()
-            // assert
-            setTimeout(() => {
-                expect(mockFormAndFrameworkUtilService.invokedGetFrameworkCategoryList).toHaveBeenCalled();
-                done();
-            }, 0);
-        })
-    })
 });

src/app/enrolled-course-details-page/enrolled-course-details-page.ts

@@ -249,6 +249,7 @@ export class EnrolledCourseDetailsPage implements OnInit, OnDestroy, ConsentPopo
   isCourseMentor = false;
   profile?: Profile;
   categories: any;
+  frameworkCategory: any;
 
   constructor(
     @Inject('PROFILE_SERVICE') private profileService: ProfileService,
@@ -2628,7 +2629,8 @@ export class EnrolledCourseDetailsPage implements OnInit, OnDestroy, ConsentPopo
   async getFrameworkCategory() {
     await this.formAndFrameworkUtilService.invokedGetFrameworkCategoryList(this.profile.syllabus[0]).then((categories) => {
       if (categories) {
-        this.categories = categories.sort((a, b) => b.index - a.index)
+        this.frameworkCategory = JSON.parse(JSON.stringify(categories));
+        this.categories = JSON.parse(JSON.stringify(categories)).sort((a, b) => b.index - a.index);
       }
     });
   }

src/app/home/user-home/user-home.page.ts

@@ -183,6 +183,7 @@ export class UserHomePage implements OnInit, OnDestroy, OnTabViewWillEnter {
   }
 
   private async getUserProfileDetails() {
+    this.preferenceList = [];
     this.profile = await this.profileService.getActiveSessionProfile(
       { requiredFields: ProfileConstants.REQUIRED_FIELDS }
     ).toPromise();
@@ -198,7 +199,6 @@ export class UserHomePage implements OnInit, OnDestroy, OnTabViewWillEnter {
     });
     }
     await this.getFrameworkCategoriesLabel();
-    this.preferenceList = [];
     setTimeout(() => {
       this.preferenceList = [];
       if (this.profile.categories) {
@@ -929,7 +929,8 @@ export class UserHomePage implements OnInit, OnDestroy, OnTabViewWillEnter {
   }
 
   async getFrameworkCategoriesLabel() {
-    await this.formAndFrameworkUtilService.invokedGetFrameworkCategoryList(this.profile.syllabus[0]).then((categories) => {
+    let rootOrgId = this.profile?.serverProfile ? this.profile?.serverProfile['rootOrgId'] : undefined;
+    await this.formAndFrameworkUtilService.invokedGetFrameworkCategoryList(this.profile.syllabus[0], rootOrgId).then((categories) => {
       if (categories) {
         this.categoriesLabel = categories.sort((a, b) => a.index - b.index)
         if (this.profile.categories) {

src/services/formandframeworkutil.service.ts

@@ -741,25 +741,27 @@ export class FormAndFrameworkUtilService {
     getFrameworkCategoryList(frameworkId: string, formRequest?: any, isStore = false): Promise<any> {
         return new Promise((resolve, reject) => {
             const framework = this.appGlobalService.getCachedFrameworkCategory();
-                 this.getCategoriesConfig(frameworkId, formRequest).then((res) => {
-                    if(res) {
-                        if (isStore) {
-                            let fraeworkDetails = {id: frameworkId, value: res }
-                            this.appGlobalService.setFramewokCategory(fraeworkDetails);
-                        }
-                        let requiredCategories = res.map(e => e.code) ;
+            if (framework && framework.id === frameworkId && framework.root === formRequest.rootOrgId) {
+                resolve(framework.value)
+            } else {
+                this.getCategoriesConfig(frameworkId, formRequest).then((res) => {
+                    if (res) {
+                        let fraeworkDetails = { id: frameworkId, root: formRequest.rootOrgId, value: res }
+                        this.appGlobalService.setFramewokCategory(fraeworkDetails);
+                        let requiredCategories = res.map(e => e.code);
                         this.appGlobalService.setRequiredCategories(requiredCategories);
                         resolve(res);
                     }
                 }).catch((e) => console.error(e));
+            }
         });
     }
 
-    async invokedGetFrameworkCategoryList (frameworkId, rootOrgId?) {
+    async invokedGetFrameworkCategoryList (frameworkId, rootOrgId?: string) {
         if (!rootOrgId) {
             rootOrgId = await this.preferences.getString('defaultRootOrgId').toPromise();
         }
-        return this.getFrameworkCategoryList(frameworkId, {...FormConstants.FRAMEWORK_CONFIG, framework: frameworkId, rootOrgId: (rootOrgId || '*')}, true);
+        return this.getFrameworkCategoryList(frameworkId, {...FormConstants.FRAMEWORK_CONFIG, framework: frameworkId, rootOrgId: (rootOrgId || '*')});
     }
 
     async getFrameworkCategoryFilter (frameworkId: string, formRequest?: any,) {