Issue #ED-3422 fix: Fixed see more book contents in library

src/app/resources/explore-books-sort/explore-books-sort.component.html

@@ -1,21 +1,15 @@
 <ion-content>
     <h4 class="sort-heading">{{'SORT_BY' | translate}}</h4>
     <form novalidate [formGroup]="sortForm" class="form-position">
-        <ion-item>
-            <ion-label position="stacked" class="label-font">{{'BOARD' | translate }}</ion-label>
-            <ion-select multiple="true" #boardSelect class="ion-text-capitalize" formControlName="board" [interfaceOptions]="boardOptions"
-                        okText="{{'BTN_SUBMIT' | translate}}" cancelText="{{'CANCEL' | translate}}" placeholder="{{'BOARD_OPTION_TEXT' | translate}}">
-                <ion-select-option *ngFor="let board of boardList" value="{{board?.name}}">{{board?.name | aliased}}&lrm;</ion-select-option>
-            </ion-select>
-        </ion-item>
-
-        <ion-item>
-            <ion-label position="stacked" class="label-font">{{'MEDIUM' | translate }}</ion-label>
-            <ion-select formControlName="medium" #mediumSelect multiple="true" class="ion-text-capitalize" [interfaceOptions]="mediumOptions"
-                        okText="{{'BTN_SUBMIT' | translate}}" cancelText="{{'CANCEL' | translate}}" placeholder="{{'MEDIUM_OPTION_TEXT' | translate}}">
-                <ion-select-option *ngFor="let medium of mediumList" class="ion-text-capitalize" value="{{medium?.name}}">{{medium?.name}}</ion-select-option>
-            </ion-select>
-        </ion-item>
+        <div *ngFor="let category of facetFilterList; let i = index">
+            <ion-item>
+                <ion-label position="stacked" class="label-font">{{category?.label | translateJson}}</ion-label>
+                <ion-select multiple="true" #boardSelect class="ion-text-capitalize" [formControlName]="category.code" [interfaceOptions]="boardOptions"
+                            okText="{{'BTN_SUBMIT' | translate}}" cancelText="{{'CANCEL' | translate}}" placeholder="{{category.placeHolder | translateJson}}">
+                    <ion-select-option *ngFor="let filter of category?.values" value="{{filter?.name}}">{{filter?.name | aliased}}&lrm;</ion-select-option>
+                </ion-select>
+            </ion-item>
+        </div>
     </form>
 </ion-content>
 <ion-footer class="bottom-button">

src/app/resources/explore-books-sort/explore-books-sort.component.ts

@@ -1,4 +1,4 @@
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
 import { Component, ViewChild } from '@angular/core';
 import { NavParams, ModalController } from '@ionic/angular';
 import { CommonUtilService } from '../../../services/common-util.service';
@@ -19,6 +19,8 @@ export class ExploreBooksSortComponent {
   searchForm: FormGroup;
   boardList: Array<FilterValue>;
   mediumList: Array<FilterValue>;
+  facetFilterList: any;
+  group: any = {};
   boardOptions = {
     title: this.commonUtilService.translateMessage('BOARD_OPTION_TEXT'),
     cssClass: 'select-box'
@@ -40,19 +42,20 @@ export class ExploreBooksSortComponent {
 
   initForm() {
     this.searchForm = this.navParams.get('searchForm');
-    this.boardList = this.navParams.get('boardList');
-    this.mediumList = this.navParams.get('mediumList');
-    this.sortForm = this.fb.group({
-      board: [this.searchForm.value.board || []],
-      medium: [this.searchForm.value.medium || []]
-    });
+    this.facetFilterList = this.navParams.get('facetFilterList');
+    this.facetFilterList.forEach((ele: any, index) => {
+      this.group[ele.code] = new FormControl(this.searchForm.value[ele.code] || []);
+      });
+      this.sortForm = new FormGroup(this.group);
   }
 
   async dismiss() {
-    if ((this.sortForm.value.board !== this.searchForm.value.board) || (this.sortForm.value.medium !== this.searchForm.value.medium)) {
-      await this.modalCtrl.dismiss({ values: this.sortForm.value });
-    } else {
-      await this.modalCtrl.dismiss(null);
-    }
+    this.facetFilterList.forEach(async (e) => {
+      if (this.searchForm.value[e.code] !== this.sortForm.value[e.code]) {
+        await this.modalCtrl.dismiss({ values: this.sortForm.value });
+      }
+    })
+
+    await this.modalCtrl.dismiss(null);
   }
 }

src/app/resources/explore-books/explore-books.page.html

@@ -1,22 +1,22 @@
-<ion-content class="ion-no-padding">
+<ion-content class="ion-no-padding" *ngIf="isLoaded">
   <form [formGroup]="searchForm">
     <div class="sb-slider-pills-container">
       <div class="sb-pills-container sb-grade-pills-container" id="gradeScroll">
         <div class="pill" *ngFor="let grade of categoryGradeLevels; let i = index; let first = first"
-          [class.active]="searchForm.get('grade').value[0] === grade.name" attr.id="gradeLevel{{i}}"
-          [attr.aria-label]="(searchForm.get('grade').value[0] === grade.name) ? grade?.name + ', selected' : grade?.name"
+          [class.active]="searchForm.get(grade?.category).value[0] === grade.name" attr.id="gradeLevel{{i}}"
+          [attr.aria-label]="(searchForm.get(grade?.category).value[0] === grade.name) ? grade?.name + ', selected' : grade?.name"
           role="button"
-          (click)="searchForm.get('grade').patchValue([grade.name]); classClick(i); classClickedForTelemetry(grade.name)">
+          (click)="searchForm.get(grade?.category).patchValue([grade.name]); classClick(i); classClickedForTelemetry(grade)">
           {{grade?.name}}</div>
       </div>
     </div>
     <div class="sb-slider-pills-container">
       <div class="sb-pills-container sb-medium-pills-container">
         <div class="pill" *ngFor="let subject of subjects; let i = index;"
-          [class.active]="searchForm.get('subject').value[0] ? searchForm.get('subject').value[0] === subject.name : subject.name === 'All'"
-          [attr.aria-label]="(searchForm.get('subject').value[0] ? searchForm.get('subject').value[0] === subject.name : subject.name === 'All') ? subject?.name + ', selected' : subject?.name "
+          [class.active]="searchForm.get(subject?.category).value[0] ? searchForm.get(subject?.category).value[0] === subject.name : subject.name === 'All'"
+          [attr.aria-label]="(searchForm.get(subject?.category).value[0] ? searchForm.get(subject?.category).value[0] === subject.name : subject.name === 'All') ? subject?.name + ', selected' : subject?.name "
           role="button"
-          [@appear] (click)="searchForm.get('subject').patchValue([subject.name]); subjectClicked(i, subject.name)">
+          [@appear] (click)="searchForm.get(subject?.category).patchValue([subject.name]); subjectClicked(i, subject.name)">
           {{subject?.name}}
         </div>
       </div>

src/app/resources/explore-books/explore-books.page.ts

@@ -124,10 +124,6 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
   selectedPrimartCategory = 'all';
 
   searchForm: FormGroup = new FormGroup({
-    grade: new FormControl([]),
-    subject: new FormControl([]),
-    board: new FormControl([]),
-    medium: new FormControl([]),
     query: new FormControl('', { updateOn: 'submit' }),
     mimeType: new FormControl([])
   });
@@ -136,6 +132,12 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
   corRelationList: Array<CorrelationData>;
   checkedSortByButton = true;
   currentSelectedClass: any;
+  facets = Search.FACETS;
+  requiredCategory: any;
+  userFrameworkCategories: any;
+  isLoaded = false;
+  categories = [];
+  facetFilterList = [];
 
   constructor(
     @Inject('CONTENT_SERVICE') private contentService: ContentService,
@@ -157,20 +159,22 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
       this.selectedMedium = extras.selectedMedium;
       this.categoryGradeLevels = extras.categoryGradeLevels;
       this.subjects = extras.subjects;
-      this.subjects.unshift({ name: this.commonUtilService.translateMessage('ALL'), selected: true });
+      this.subjects.unshift({ name: this.commonUtilService.translateMessage('ALL'), selected: true, category: this.subjects[0]?.category });
       this.primaryCategories = extras.primaryCategories;
+      this.facets = extras.facets || this.facets;
+      this.requiredCategory = extras.requiredCategory;
+      this.userFrameworkCategories = extras.userFrameworkCategories;
+      this.categories = extras.categories;
 
       this.corRelationList = [
         ... this.populateCData(this.selectedGrade, CorReleationDataType.CLASS),
         ... this.populateCData(this.selectedMedium, CorReleationDataType.MEDIUM)
       ];
-
-      const index = this.categoryGradeLevels.findIndex((grade) => grade.name === this.searchForm.value['grade'][0]);
-      this.classClick(index);
     }
   }
 
   async ngOnInit() {
+    this.initializedSearchForm(this.userFrameworkCategories)
     this.telemetryGeneratorService.generateImpressionTelemetry(
       ImpressionType.VIEW,
       ImpressionSubtype.EXPLORE_MORE_CONTENT,
@@ -184,16 +188,19 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
   }
 
   async ionViewWillEnter() {
-    this.searchFormSubscription = this.onSearchFormChange()
+    if (this.isLoaded) {
+      this.searchFormSubscription = this.onSearchFormChange()
       .subscribe(() => { });
+    }
 
     this.searchForm.patchValue({
-      grade: this.selectedGrade,
-      medium: this.selectedMedium
+      mimeType: []
     });
     this.headerObservable = this.headerService.headerEventEmitted$.subscribe(eventName => {
       this.handleHeaderEvents(eventName);
     });
+    const index = this.categoryGradeLevels.findIndex((grade) => grade.name === this.searchForm.value[grade.category][0]);
+      this.classClick(index);
     this.handleBackButton();
     await this.headerService.showHeaderWithBackButton();
     window.addEventListener('keyboardDidHide', this.showSortByButton);
@@ -241,9 +248,7 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
   }
 
   union(arrA: { name: string }[], arrB: { name: string }[]): { name: string }[] {
-    return [
-      ...arrA, ...arrB.filter((bItem) => !arrA.find((aItem) => bItem.name === aItem.name))
-    ];
+    return arrA.map(t1 => ({...t1, ...arrB.find(t2 => t2.name.toLowerCase() === t1.name.toLowerCase())}))
   }
 
   private onSearchFormChange(): Observable<undefined> {
@@ -253,16 +258,16 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
       debounceTime(200),
       switchMap(() => {
         const searchCriteria: ContentSearchCriteria = {
-          ...this.searchForm.getRawValue(),
+          ...this.searchForm.value,
           query: this.searchInputRef.nativeElement['value'],
           searchType: SearchType.SEARCH,
           primaryCategories: this.selectedPrimartCategory === CsPrimaryCategory.DIGITAL_TEXTBOOK ?
             [CsPrimaryCategory.DIGITAL_TEXTBOOK] : this.primaryCategories,
-          facets: Search.FACETS,
+          facets: this.facets,
           audience: [],
           mode: 'soft',
           languageCode: this.translate.currentLang,
-          fields: ExploreConstants.REQUIRED_FIELDS
+          fields: this.requiredCategory.concat(ExploreConstants.REQUIRED_FIELDS)
         };
         const values = new Map();
         values['searchCriteria'] = searchCriteria;
@@ -276,7 +281,7 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
         this.showLoader = true;
         this.contentSearchResult = [];
         if (this.currentSelectedClass) {
-          searchCriteria.grade[0] = this.currentSelectedClass;
+          searchCriteria[this.currentSelectedClass.category] = this.currentSelectedClass.name;
         }
         return this.contentService.searchContent(searchCriteria).pipe(
           catchError(() => {
@@ -303,10 +308,13 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
 
             this.fetchingBoardMediumList(facetFilters);
             this.showLoader = false;
-            const gradeLevel = result.filterCriteria.facetFilters.find((f) => f.name === 'se_gradeLevels').values;
+             const gradeLevel = result.filterCriteria.facetFilters.find((f) =>
+              f.name === this.categories[2].alterNativeCode || this.categories[2].code).values;
             gradeLevel.sort((a, b) => b.count - a.count);
             this.categoryGradeLevels = this.union(this.categoryGradeLevels, gradeLevel);
-            const subjects = result.filterCriteria.facetFilters.find((f) => f.name === 'subject').values;
+            let subjectalterNativeCode = this.categories[this.categories.length-1].alterNativeCode || '';
+            let subjectCode = this.categories[this.categories.length-1].code || '';
+            const subjects = result.filterCriteria.facetFilters.find((f) => f.name === subjectCode || f.name === subjectalterNativeCode).values;
             subjects.sort((a, b) => b.count - a.count);
             this.subjects = this.union(this.subjects, subjects);
             this.contentSearchResult = result.contentDataList || [];
@@ -379,17 +387,13 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
       componentProps:
       {
         searchForm: this.searchForm,
-        boardList: this.boardList,
-        mediumList: this.mediumList
+        facetFilterList: this.facetFilterList
       }
     });
     await sortOptionsModal.present();
     const { data } = await sortOptionsModal.onDidDismiss();
     if (data && data.values) {
-      this.searchForm.patchValue({
-        board: data.values.board || [],
-        medium: data.values.medium || []
-      });
+      this.initializedSearchForm(data.values);
       this.telemetryGeneratorService.generateInteractTelemetry(
         InteractType.TOUCH,
         InteractSubtype.SORT_BY_FILTER_SET,
@@ -436,13 +440,12 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
   }
 
   fetchingBoardMediumList(facetFilters) {
-    return facetFilters.filter(value => {
-      if (value.name === 'se_boards') {
-        this.boardList = value.values;
-      }
-
-      if (value.name === 'se_mediums') {
-        this.mediumList = value.values;
+    this.facetFilterList = [];
+    let frameworkCategory = this.categories.slice(0, 2);
+    frameworkCategory.forEach((category) => {
+      category['values'] = facetFilters.find((e) => (e.name === category.alterNativeCode || e.name === category.code)).values;
+      if (category['values']) {
+        this.facetFilterList.push(category)
       }
     });
   }
@@ -456,8 +459,8 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
     }, 0);
   }
 
-  classClickedForTelemetry(currentClass: string) {
-    this.currentSelectedClass = currentClass;
+  classClickedForTelemetry(categoryTerm: any) {
+    this.currentSelectedClass = categoryTerm;
     this.telemetryGeneratorService.generateInteractTelemetry(
       InteractType.TOUCH,
       InteractSubtype.CLASS_CLICKED,
@@ -467,7 +470,7 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
       undefined,
       undefined,
       [{
-        id: currentClass,
+        id: this.currentSelectedClass.name,
         type: CorReleationDataType.CLASS
       }]
     );
@@ -514,4 +517,15 @@ export class ExploreBooksPage implements OnInit, OnDestroy {
       this.checkedSortByButton = true;
     });
   }
+
+  initializedSearchForm(updatedCategory) {
+    for (const [key, value] of Object.entries(updatedCategory)) {
+      if (this.searchForm.get(key)) {
+        this.searchForm.get(key).patchValue(value)
+      } else {
+        this.searchForm.addControl(key,new FormControl(value))
+      }
+    }
+    this.isLoaded = true;
+  }
 }

src/app/resources/resources.component.ts

@@ -398,9 +398,8 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy, Fra
     this.profile = this.appGlobalService.getCurrentUser();
     if (this.profile && this.profile.serverProfile && this.profile.serverProfile.framework && Object.keys(this.profile.serverProfile.framework).length>1) {
       this.userFrameworkCategories = this.profile.serverProfile.framework;
-    } else {
-      await this.getFrameworkCategoriesLabel();
-    }
+    } 
+    await this.getFrameworkCategoriesLabel();
     await this.getLocalContent();
   }
 
@@ -980,14 +979,24 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy, Fra
   }
 
   async exploreOtherContents() {
+    let searchFilter = await this.formAndFrameworkUtilService.getFrameworkCategoryFilter(this.profile.syllabus[0], {...FormConstants.SEARCH_FILTER, framework: this.profile.syllabus[0]});
+    const facets = searchFilter.reduce((acc, filterConfig) => {
+      acc.push(filterConfig.code);
+      return acc;
+    }, []);
+    const requiredCategory = this.listofCategory ? this.listofCategory.map(e => e.code) : this.appGlobalService.getRequiredCategories();
     const navigationExtras = {
       state: {
         subjects: this.subjects ? [...this.subjects] : [],
         categoryGradeLevels: this.categoryGradeLevels,
         storyAndWorksheets: this.storyAndWorksheets,
         primaryCategories: PrimaryCategory.FOR_LIBRARY_TAB,
         selectedGrade: this.getGroupByPageReq.grade,
-        selectedMedium: this.getGroupByPageReq.medium
+        selectedMedium: this.getGroupByPageReq.medium,
+        facets,
+        requiredCategory,
+        userFrameworkCategories: this.userFrameworkCategories,
+        categories: this.listofCategory
       }
     };
     await this.router.navigate([RouterLinks.EXPLORE_BOOK], navigationExtras);
@@ -1243,7 +1252,7 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy, Fra
     await this.formAndFrameworkUtilService.invokedGetFrameworkCategoryList(this.profile.syllabus[0]).then((categories) => {
       if (categories) {
         this.listofCategory = categories.sort((a, b) => a.index - b.index)
-        if (this.profile.categories) {
+        if (this.profile.categories && !this.profile.serverProfile) {
           this.userFrameworkCategories = {}
           let frameworkValue =typeof this.profile.categories === 'string' ? JSON.parse(this.profile.categories) : this.profile.categories;
           this.listofCategory.forEach((e) => {