Merge pull request #591 from shikshalokam/pagination

Pagination

projects/collection-editor-library/package.json

 {
   "name": "@project-sunbird/sunbird-collection-editor",
-  "version": "5.3.0-beta.1",
+  "version": "5.3.0-beta.3",
   "dependencies": {
     "tslib": "^2.0.0"
   },

projects/collection-editor-library/src/lib/collection-editor-library.module.ts

@@ -54,20 +54,50 @@ import { AppLoaderComponent } from './components/app-loader/app-loader.component
 import { AssignPageNumberComponent } from './components/assign-page-number/assign-page-number.component';
 import { PlainTreeComponent } from './components/plain-tree/plain-tree.component';
 import { A11yModule } from '@angular/cdk/a11y';
+import { ProgressStatusComponent } from './components/progress-status/progress-status.component';
 import {TermAndConditionComponent} from './components/term-and-condition/term-and-condition.component';
 
 import { QualityParamsModalComponent } from './components/quality-params-modal/quality-params-modal.component';
 @NgModule({
-  declarations: [CollectionEditorLibraryComponent, InterpolatePipe, SanitizeHtmlPipe, ContentplayerPageComponent,
-    EditorComponent, QumlplayerPageComponent, HeaderComponent, FancyTreeComponent, MetaFormComponent, LibraryComponent,
-    LibraryFilterComponent, LibraryListComponent, QuestionComponent, OptionsComponent, AnswerComponent, CkeditorToolComponent,
-    LibraryPlayerComponent, ResourceReorderComponent, SkeletonLoaderComponent, TemplateComponent, DateFormatPipe,
-    TelemetryInteractDirective, AssetBrowserComponent, CollectionIconComponent,
-    QumlPlayerComponent, DialcodeComponent, BulkUploadComponent, CsvUploadComponent, ManageCollaboratorComponent,
-    PublishChecklistComponent, QuestionOptionSubMenuComponent, SliderComponent, TranslationsComponent,AppLoaderComponent,
+  declarations: [
+    CollectionEditorLibraryComponent,
+    InterpolatePipe,
+    SanitizeHtmlPipe,
+    ContentplayerPageComponent,
+    EditorComponent,
+    QumlplayerPageComponent,
+    HeaderComponent,
+    FancyTreeComponent,
+    MetaFormComponent,
+    LibraryComponent,
+    LibraryFilterComponent,
+    LibraryListComponent,
+    QuestionComponent,
+    OptionsComponent,
+    AnswerComponent,
+    CkeditorToolComponent,
+    LibraryPlayerComponent,
+    ResourceReorderComponent,
+    SkeletonLoaderComponent,
+    TemplateComponent,
+    DateFormatPipe,
+    TelemetryInteractDirective,
+    AssetBrowserComponent,
+    CollectionIconComponent,
+    QumlPlayerComponent,
+    DialcodeComponent,
+    BulkUploadComponent,
+    CsvUploadComponent,
+    ManageCollaboratorComponent,
+    PublishChecklistComponent,
+    QuestionOptionSubMenuComponent,
+    SliderComponent,
+    TranslationsComponent,
+    AppLoaderComponent,
     RelationalMetadataComponent,
     AssignPageNumberComponent,
     PlainTreeComponent,
+    ProgressStatusComponent,
     TermAndConditionComponent,
     QualityParamsModalComponent
   ],
@@ -77,8 +107,8 @@ import { QualityParamsModalComponent } from './components/quality-params-modal/q
   providers: [
     CacheService,
     { provide: CacheStorageAbstract, useClass: CacheSessionStorage },
-    { provide: DialcodeCursor, useExisting: DialcodeService }
+    { provide: DialcodeCursor, useExisting: DialcodeService },
   ],
-  exports: [EditorComponent]
+  exports: [EditorComponent],
 })
-export class CollectionEditorLibraryModule { }
+export class CollectionEditorLibraryModule {}

projects/collection-editor-library/src/lib/components/assign-page-number/assign-page-number.component.html

@@ -6,16 +6,30 @@
       <div class="ui">
         <div class="ui twelve column grid m-0">
           <div class="three wide column p-0 overflow-y  mb-40 h-100vh">
-            <lib-plain-tree class="sb-collectionTree-fancyTree sb-collectionTree-fancyTreelist sb-questionset-scroll" 
-            [treeData]="treeData" (treeEmitter)="treeEventListener($event)">
+            <lib-plain-tree class="sb-collectionTree-fancyTree sb-collectionTree-fancyTreelist sb-questionset-scroll"
+              [treeData]="treeData" (treeEmitter)="treeEventListener($event)">
             </lib-plain-tree>
           </div>
           <!-- Right Player Sections -->
           <div class="eight wide column bg-white pl-40 mb-10 w-73">
-           
+            <table aria-describedby="pagination">
+              <thead>
+                <tr>
+                  <th>Questions</th>
+                  <th class="right">Page no</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let question of questions;">
+                  <td innerHtml="{{question?.question}}"></td>
+                  <td><i class="close icon close-button"></i><input type="number" name="pageNo"
+                      (input)="onValueChange($event.target.value,question)" value="{{question?.pageNo}}"></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file

projects/collection-editor-library/src/lib/components/assign-page-number/assign-page-number.component.scss

 table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
-  width: 100%;
+  width: 97%;
   border: 1px solid #cccccc;
+  margin: 15px 25px 15px 15px;
+  thead {
+    tr {
+      background-color: rgb(237, 237, 237);
+
+      th {
+        margin-right: 86px;
+      }
+    }
+  }
 }
 
-td, th {
+td,
+th {
   text-align: left;
   padding: 15px;
 }
 
-tr:nth-child(odd) {
+tr:nth-child(even) {
   background-color: #f3f7fa;
+}
+
+tr {
+  border: 2px solid #cccccc;
+
+  td {
+    input {
+      float: right;
+      width: 14%;
+      border-radius: 6px;
+      border-width: 1px;
+      height: 42px;
+      text-align: center;
+      margin-right: 10px;
+    }
+  }
+
+  .right {
+    float: right;
+  }
+}
+
+h2 {
+  margin-left: 15px;
+}
+
+.close-button {
+  opacity: 0;
+  float: right;
+  margin-top: 5px;
+  margin-right: 15px;
+  color: #8b8080;
+  font-size: 20px;
+}
+
+.close-button:hover {
+  opacity: 1;
+  color: #8b8080;
+  float: right;
+  margin-top: 5px;
+  margin-right: 15px;
+  font-size: 20px;
 }
\ No newline at end of file

projects/collection-editor-library/src/lib/components/assign-page-number/assign-page-number.component.spec.ts

@@ -5,6 +5,8 @@ import { TreeService } from '../../services/tree/tree.service';
 import { mockTreeService } from '../fancy-tree/fancy-tree.component.spec.data';
 import { EditorService } from '../../services/editor/editor.service';
 import { of, throwError } from 'rxjs';
+import { QuestionService } from '../../services/question/question.service';
+import { mockQuestionData, mockTreeData } from './assign-page-number.component.spec.data';
 
 const mockEditorService = {
   getToolbarConfig: () => { },
@@ -16,23 +18,25 @@ describe('AssignPageNumberComponent', () => {
   let component: AssignPageNumberComponent;
   let fixture: ComponentFixture<AssignPageNumberComponent>;
   // tslint:disable-next-line:one-variable-per-declaration
-  let treeService, editorService;
-  beforeEach(waitForAsync(() => {
+  let treeService, editorService, questionService;
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
       declarations: [AssignPageNumberComponent],
       providers: [
+        QuestionService,
         { provide: TreeService, useValue: mockTreeService },
         { provide: EditorService, useValue: mockEditorService },
       ]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AssignPageNumberComponent);
     treeService = TestBed.inject(TreeService);
     editorService = TestBed.inject(EditorService);
+    questionService = TestBed.get(QuestionService);
     component = fixture.componentInstance;
     // fixture.detectChanges();
   });
@@ -42,14 +46,19 @@ describe('AssignPageNumberComponent', () => {
   });
 
   it('#ngOnInit should called', () => {
-    spyOn(component, 'ngOnInit').and.callThrough();
     spyOn(editorService, 'getToolbarConfig').and.returnValue({
       title: 'Observation Form'
     });
-    component.toolbarConfig.title = 'Observation Form';
+    editorService.treeData = mockTreeData;
+    spyOn(component, 'ngOnInit').and.callThrough();
+    spyOn(component, 'createSequence').and.callFake(() => {});
+    spyOn(component, 'treeEventListener').and.callFake(() => {});
     component.ngOnInit();
     expect(component.toolbarConfig).toBeDefined();
     expect(component.toolbarConfig.title).toEqual('Observation Form');
+    expect(component.treeData).toBe(editorService.treeData);
+    expect(component.treeEventListener).toHaveBeenCalled();
+    expect(component.createSequence).toHaveBeenCalled();
   });
 
   it('#toolbarEventListener() should call #handleRedirectToQuestionSet() if event is backContent', () => {
@@ -68,4 +77,82 @@ describe('AssignPageNumberComponent', () => {
     expect(component.assignPageEmitter.emit).toHaveBeenCalledWith({ status: false });
   });
 
+  it('#treeEventListener should call api call success', () => {
+    spyOn(component, 'treeEventListener').and.callThrough();
+    spyOn(editorService, 'getHierarchyObj').and.callFake(() => {
+      return {
+        '1234': {
+          children : []
+        }
+      };
+    });
+    spyOn(treeService, 'getFirstChild').and.callFake(() => {
+      return { data: { metadata: { identifier: '0123', allowScoring: 'Yes' } } };
+    });
+    spyOn(questionService, 'getQuestionList').and.returnValue(of({
+      result: {
+        questions: [
+          {
+            editorState: {
+              options: [
+                {
+                  answer: false,
+                  value: {
+                    body: '<p>Yes</p>',
+                    value: 0
+                  }
+                },
+              ],
+              question: '<p>Yes or No?</p>'
+            },
+            identifier: 'do_1234',
+            languageCode: [
+              'en'
+            ]
+          }
+        ],
+        count: 1
+      }
+    }));
+    component.treeEventListener({ event: { identifier: '1234' } });
+  });
+
+  it('#treeEventListener should call api call fail', () => {
+    spyOn(component, 'treeEventListener').and.callThrough();
+    spyOn(editorService, 'getHierarchyObj').and.callFake(() => {
+      return {
+        '1234': {
+          children : []
+        }
+      };
+    });
+    spyOn(treeService, 'getFirstChild').and.callFake(() => {
+      return { data: { metadata: { identifier: '0123', allowScoring: 'Yes' } } };
+    });
+    spyOn(treeService, 'getHierarchyObj').and.callFake(() => {
+      return { 1234: { children: ['1234567'] } };
+    });
+    spyOn(questionService, 'getQuestionList').and.returnValue(throwError({}));
+    component.treeEventListener({ event: { identifier: '1234' } });
+  });
+
+  it('#onValueChange should call to assign the page numbers', () => {
+    spyOn(component, 'onValueChange').and.callThrough();
+    component.questions = mockQuestionData;
+    const question = mockQuestionData[0];
+    component.onValueChange(1, question);
+    expect(component.onValueChange).toHaveBeenCalledWith(1, question);
+    expect(question.page_no).toBe(1);
+  });
+
+  it('#createSequence should call to create the sequence for pagination', () => {
+    spyOn(component, 'createSequence').and.callThrough();
+    component.treeData = mockTreeData;
+    component.createSequence(component.treeData);
+    expect(component.createSequence).toHaveBeenCalledWith(component.treeData);
+  });
+
+
 });
+
+

projects/collection-editor-library/src/lib/components/assign-page-number/assign-page-number.component.ts

 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { EditorService } from '../../services/editor/editor.service';
+import { QuestionService } from '../../services/question/question.service';
 import { TreeService } from '../../services/tree/tree.service';
 import * as _ from 'lodash-es';
 import { ConfigService } from '../../services/config/config.service';
@@ -14,14 +15,24 @@ export class AssignPageNumberComponent implements OnInit {
   toolbarConfig: any = {};
   pageId = 'pagination';
   treeData: any;
+  questions = [];
+  // tslint:disable-next-line:variable-name
+  rendering_sequence: any;
   @Output() assignPageEmitter = new EventEmitter<any>();
-
+  recordedBy: any;
+  criteriaId: any;
   constructor(private editorService: EditorService, private treeService: TreeService,
-              public configService: ConfigService) { }
+              private questionService: QuestionService) { }
 
   ngOnInit() {
     this.toolbarConfig = this.editorService.getToolbarConfig();
     this.toolbarConfig.title = 'Observation Form';
+    this.treeData = this.editorService.treeData;
+    this.createSequence(this.treeData);
+    this.treeEventListener({
+      identifier: _.get(this.treeData[0], 'children[0].id'),
+      criteriaName: _.get(this.treeData[0], 'children[0].title')
+    });
   }
 
   toolbarEventListener(event) {
@@ -32,10 +43,78 @@ export class AssignPageNumberComponent implements OnInit {
     }
   }
 
-  treeEventListener(event) {}
-
   redirectToQuestionSet() {
       this.assignPageEmitter.emit({ status: false });
   }
 
+  treeEventListener(event) {
+    this.criteriaId = event?.identifier;
+    const data = this.treeService.getFirstChild();
+    const hierarchy = this.editorService.getHierarchyObj(data, '', event?.identifier);
+    this.questionService.getQuestionList(_.get(hierarchy[event?.identifier], 'children'), 'editorState')
+    .subscribe((response: any) => {
+      this.questions = [];
+      const questionsArray = _.get(response, 'result.questions');
+      questionsArray.forEach(element => {
+        this.questions.push({
+          question: element?.editorState?.question,
+          identifier: element?.identifier,
+          page_no: null,
+        });
+      });
+    }, (error: any) => {
+      console.log(error);
+    });
+  }
+
+  onValueChange(event, question) {
+    question.page_no = +event;
+    console.log(this.questions);
+    const numArray = [];
+    // tslint:disable-next-line:no-shadowed-variable
+    _.forEach(this.questions, (question) => {
+      numArray.push(question.page_no);
+    });
+    const createArray = new Array(Math.max(...numArray));
+    console.log(createArray);
+    for (let i = 0; i < createArray.length; i++) {
+      createArray[i] = new Array(1);
+    }
+    for (const [index] of this.questions.entries()){
+      console.log(index);
+    }
+    _.forEach(this.rendering_sequence?.sequence, (data) => {
+      if (data.value === this.criteriaId) {
+        data.pages = createArray;
+      }
+    });
+    console.log(this.rendering_sequence);
+  }
+
+  createSequence(data) {
+    this.recordedBy = _.get(this.treeService.getFirstChild(), 'data.metadata.recordedBy');
+    // tslint:disable-next-line:variable-name
+    const dataArray = [];
+    // tslint:disable-next-line:variable-name
+    this.rendering_sequence = {
+      name: this.recordedBy === 'Self' ? 'Criteria' : 'Ecm',
+      sequence: []
+    };
+    _.forEach(data, (child: any) => {
+      if (child.children) {
+        _.forEach(child.children, (seq) => {
+          dataArray.push(seq);
+        });
+      }
+    });
+    _.forEach(dataArray, (seq, i) => {
+      this.rendering_sequence.sequence.push({
+        value: seq?.id,
+        name: seq?.title,
+        pages: [],
+        index: i
+      });
+    });
+    console.log(this.rendering_sequence);
+  }
 }

projects/collection-editor-library/src/lib/components/editor/editor.component.html

@@ -157,6 +157,9 @@
   <ng-container *ngSwitchCase="'pagination'">
     <lib-assign-page-number (assignPageEmitter)="assignPageEmitterListener($event)"></lib-assign-page-number>
   </ng-container>
+  <ng-container *ngSwitchCase="'progressStatus'">
+    <lib-progress-status (assignPageEmitter)="assignPageEmitterListener($event)"></lib-progress-status>
+  </ng-container>
 </ng-container>
 <ng-container *ngIf="addCollaborator">
   <lib-manage-collaborator [addCollaborator]="addCollaborator" [collectionId]="collectionId" (modalDismissEmitter)="toggleCollaboratorModalPoup()"></lib-manage-collaborator>

projects/collection-editor-library/src/lib/components/editor/editor.component.ts

@@ -517,7 +517,10 @@ export class EditorComponent implements OnInit, OnDestroy, AfterViewInit {
         break;
       case 'pagination':
         this.pageId = 'pagination';
-        break;      
+        break;
+      case 'progressStatus':
+        this.pageId = 'progressStatus';
+        break;
       // case 'showCorrectioncomments':
         // this.contentComment = _.get(this.editorConfig, 'context.correctionComments')
         // this.showReviewModal = !this.showReviewModal;

projects/collection-editor-library/src/lib/components/fancy-tree/fancy-tree.component.spec.ts

@@ -16,6 +16,7 @@ import { HelperService } from '../../services/helper/helper.service';
 import { BranchingLogic } from '../question/question.component.spec.data';
 import * as _ from 'lodash-es';
 import { of } from 'rxjs';
+import { mockTreeData } from '../assign-page-number/assign-page-number.component.spec.data';
 
 describe('FancyTreeComponent', () => {
   let component: FancyTreeComponent;
@@ -150,6 +151,7 @@ describe('FancyTreeComponent', () => {
     component.nodeParentDependentMap = undefined;
     // tslint:disable-next-line:no-shadowed-variable
     const editorService: EditorService = TestBed.inject(EditorService);
+    editorService.treeData = mockTreeData;
     spyOn(editorService, 'getParentDependentMap').and.returnValue({});
     editorConfig.config.renderTaxonomy = true;
     editorConfig.config.primaryCategory = 'Observation';

projects/collection-editor-library/src/lib/components/fancy-tree/fancy-tree.component.ts

@@ -94,6 +94,7 @@ export class FancyTreeComponent implements OnInit, AfterViewInit, OnDestroy {
     } else {
       treeData = this.buildTree(this.nodes.data);
     }
+    this.editorService.treeData = treeData;
     this.rootNode = [{
       id: data.identifier || UUID.UUID(),
       title: data.name,

projects/collection-editor-library/src/lib/components/header/header.component.html

@@ -47,6 +47,13 @@
       <em class="{{labelConfigData.submit_collection_btn_icon}}"></em>
       {{labelConfigData.add_page_numbers_to_questions_btn_label}}
     </button>
+    <button *ngIf="visibility && visibility?.submitContent && !bulkUploadStatus && labelConfigData?.hasChildren && !visibility.hideSubmitForReviewBtn && visibility.showPaginationBtn"
+    class="sb-btn sb-btn-normal sb-btn-primary mr-10" (click)="buttonEmitter({type:'progressStatus'})" libTelemetryInteract
+    [telemetryInteractEdata]="telemetryService.getTelemetryInteractEdata('submit','click','submit', telemetryService.telemetryPageId)"
+    >
+      <em class="{{labelConfigData.submit_collection_btn_icon}}"></em>
+      Progress
+    </button>
     <lib-bulk-upload *ngIf="visibility && visibility?.bulkUpload && labelConfigData?.showBulkUploadBtn" class="d-flex flex-ai-center mr-10" (bulkUploadEmitter)="bulkUploadListener($event)" ></lib-bulk-upload>
     <button *ngIf="visibility && visibility?.previewContent  && labelConfigData?.hasChildren && !bulkUploadStatus" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-10"
       [ngClass]="!buttonLoaders?.previewButtonLoader ? '': 'sb-btn-loading-spinner sb-btn-outline-disabled'"

projects/collection-editor-library/src/lib/components/meta-form/meta-form.component.ts

@@ -150,7 +150,6 @@ export class MetaFormComponent implements OnChanges, OnDestroy {
             moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format(this.helperService.getTimerFormat(field)) : '';
           }
         }
-        
         if (field.code === 'framework') {
           field.range = this.frameworkService.frameworkValues;
           field.options = this.getFramework;
@@ -209,12 +208,15 @@ export class MetaFormComponent implements OnChanges, OnDestroy {
         if (field.code === 'instructions') {
           field.default = _.get(metaDataFields, 'instructions.default') || '' ;
         }
-        if(field.code === 'setPeriod'){
+        if (field.code === 'setPeriod') {
           field.default = !_.isEmpty(metaDataFields, 'endDate') ? 'Yes' : 'No' ;
         }
+        if (field.code === 'allowECM') {
+          field.default = _.get(metaDataFields, 'recordedBy') !== 'Self' ? 'Yes' : 'No' ;
+        }
 
-        if(field.code === 'instances'){
-          field.default =  !_.isEmpty(metaDataFields, 'instances') ? _.get(metaDataFields,'instances.label') : '' ;
+        if (field.code === 'instances') {
+          field.default =  !_.isEmpty(metaDataFields, 'instances') ? _.get(metaDataFields, 'instances.label') : '' ;
         }
 
         if ((_.isEmpty(field.range) || _.isEmpty(field.terms)) &&

projects/collection-editor-library/src/lib/components/plain-tree/plain-tree.component.spec.ts

@@ -2,6 +2,8 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PlainTreeComponent } from './plain-tree.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { mockTreedata } from './plain-tree.component.spec.data';
+import { of, throwError } from 'rxjs';
 
 describe('PlainTreeComponent', () => {
   let component: PlainTreeComponent;
@@ -26,36 +28,30 @@ describe('PlainTreeComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('#buildTreeData should call', () => {
-  //    spyOn(component, 'buildTreeData').and.callThrough();
-  //    component.buildTreeData(mockTreedata);
-  //    expect(component.buildTreeData).toHaveBeenCalledWith(mockTreedata);
-  // });
-
-  // it('#ngAfterViewInit() should call #getTreeConfig() and #renderTree()', () => {
-  //   spyOn(component, 'ngAfterViewInit').and.callThrough();
-  //   spyOn(component, 'getTreeConfig').and.returnValue(mockTreedata);
-  //   spyOn(component, 'renderTree').and.callFake(() => {} );
-  //   component.ngAfterViewInit();
-  //   expect(component.renderTree).toHaveBeenCalled();
-  //   expect(component.getTreeConfig).toHaveBeenCalled();
-  // });
+  it('#buildTreeData should call', async () => {
+    expect(component.buildTreeData).toBeDefined();
+    component.buildTreeData(mockTreedata);
+  });
 
-  // it('#getQuestionsList should call', () => {
-  //   spyOn(component, 'getQuestionsList').and.callThrough();
-  //   spyOn(component.treeEmitter, 'emit');
-  //   component.getQuestionsList('do_123');
-  //   expect(component.treeEmitter.emit).toHaveBeenCalledWith({identifier : 'do_123'});
-  // });
+  it('#ngAfterViewInit() should call #getTreeConfig() and #renderTree()', () => {
+    spyOn(component, 'getTreeConfig').and.callFake(() => {});
+    spyOn(component, 'renderTree').and.callFake(() => {});
+    spyOn(component, 'ngAfterViewInit').and.callThrough();
+    component.ngAfterViewInit();
+    expect(component.getTreeConfig).toHaveBeenCalled();
+    expect(component.renderTree).toHaveBeenCalled();
+  });
 
-  // it('getTreeConfig should call', () => {
-  //   spyOn(component, 'getTreeConfig').and.callThrough();
-  //   spyOn(component, 'buildTreeData').and.returnValue(mockTreedata);
-  //   let data;
-  //   data = component.getTreeConfig();
-  //   expect(component.getTreeConfig).toHaveBeenCalled();
-  //   expect(data).toBeDefined();
-  //   expect(component.buildTreeData).toHaveBeenCalled();
-  // });
+  it('#getQuestionsList should call', () => {
+    spyOn(component, 'getQuestionsList').and.callThrough();
+    spyOn(component.treeEmitter, 'emit');
+    component.getQuestionsList({id: 'do_123', metadata: {name: 'Classroom'}});
+    expect(component.treeEmitter.emit).toHaveBeenCalledWith({identifier : 'do_123', criteriaName : 'Classroom'});
+  });
 
+  it('getTreeConfig should call', () => {
+    // spyOn(component, 'buildTreeData').and.returnValue(of(mockTreedata));
+    expect(component.getTreeConfig).toBeDefined();
+    component.getTreeConfig();
+  });
 });

projects/collection-editor-library/src/lib/components/plain-tree/plain-tree.component.ts

 import {
-  Component, ElementRef, EventEmitter, Input,
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
   OnInit,
-  Output, ViewChild
+  Output,
+  ViewChild,
 } from '@angular/core';
 import 'jquery.fancytree';
 import * as _ from 'lodash-es';
-declare var $: any;
+import { EditorService } from '../../services/editor/editor.service';
 
+declare var $: any;
 
 @Component({
   selector: 'lib-plain-tree',
   templateUrl: './plain-tree.component.html',
-  styleUrls: ['./plain-tree.component.scss']
+  styleUrls: ['./plain-tree.component.scss'],
 })
-export class PlainTreeComponent implements OnInit {
+export class PlainTreeComponent implements OnInit, AfterViewInit {
   @ViewChild('plainTree') public tree: ElementRef;
-  @Input() public treeData;
+  @Input() treeData;
   @Output() treeEmitter: EventEmitter<any> = new EventEmitter<any>();
 
-  ngOnInit() {
+  constructor(private editorService: EditorService) {}
+
+  ngOnInit(): void {}
+
+  ngAfterViewInit() {
+    this.renderTree(this.getTreeConfig());
+  }
+
+  renderTree(options) {
+    $(this.tree.nativeElement).fancytree(options);
+  }
+
+  buildTreeData(data) {
+    let tree = [];
+    _.forEach(data, (child: any) => {
+      if (child.children) {
+        _.forEach(child.children, (data) => {
+          tree.push({
+            id: data?.id,
+            title: data?.title,
+            tooltip: data?.title,
+            primaryCategory: _.get(
+              this.editorService,
+              'editorConfig.config.primaryCategory'
+            ),
+            metadata: {
+              objectType: _.get(
+                this.editorService,
+                'editorConfig.config.objectType'
+              ),
+              name: data?.title,
+            },
+            folder: true,
+            root: false,
+            icon: 'fa fa-folder-o',
+          });
+        });
+      }
+    });
+    return tree;
+  }
+
+  getQuestionsList(data) {
+    this.treeEmitter.emit({
+      identifier: _.get(data, 'id'),
+      criteriaName: _.get(data, 'metadata.name')
+    });
+  }
+
+  getTreeConfig() {
+    const rootNode = [
+      {
+        title: 'Criteria Name',
+        key: '2',
+        folder: true,
+        expanded: true,
+        root: true,
+        icon: 'fa fa-folder-o',
+        children: this.buildTreeData(this.treeData),
+      },
+    ];
+    const options: any = {
+      extensions: ['glyph', 'dnd5'],
+      clickFolderMode: 3,
+      source: rootNode,
+      escapeTitles: true,
+      glyph: {
+        preset: 'awesome4',
+        map: {
+          folder: 'icon folder sb-fancyTree-icon',
+          folderOpen: 'icon folder outline sb-fancyTree-icon',
+        },
+      },
+      dnd5: {
+        autoExpandMS: 400,
+        // focusOnClick: true,
+        preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+        preventRecursion: true, // Prevent dropping nodes on own descendants
+        filter: {
+          autoApply: true,
+          autoExpand: false,
+          counter: true,
+          fuzzy: false,
+          hideExpandedCounter: true,
+          hideExpanders: false,
+          highlight: true,
+          leavesOnly: false,
+          nodata: true,
+          mode: 'dimm',
+        },
+      },
+      init: (event, data) => {},
+      click: (event, data): boolean => {
+        this.tree.nativeElement.click();
+        return true;
+      },
+      activate: (event, data) => {
+        if (!_.isUndefined(data.node.data.id)){
+          this.getQuestionsList(_.get(data, 'node.data'));
+        }
+      },
+      renderNode: (event, data) => {
+        const node = data.node;
+        const $nodeSpan = $(node.span);
+
+        // check if span of node already rendered
+        if (!$nodeSpan.data('rendered')) {
+          // span rendered
+          $nodeSpan.data('rendered', true);
+        }
+      },
+    };
+    return options;
   }
 
 }

projects/collection-editor-library/src/lib/components/progress-status/progress-status.component.html

+<div class="sb-editor-container mb-0">
+    <lib-header [labelConfigData]="toolbarConfig" [pageId]="pageId" (toolbarEmitter)="toolbarEventListener($event)">
+    </lib-header>
+    <div class="add-to-library mb-0">
+        <div class="h-100vh sb-bg-white">
+            <div class="ui">
+                <div class="ui twelve column grid m-0">
+                    <div class="three wide column p-0 overflow-y  mb-40 h-100vh">
+                    </div>
+                    <!-- Right Player Sections -->
+                    <div class="eight wide column bg-white pl-40 mb-10 w-73">
+                        <table aria-describedby="progress">
+                            <thead>
+                                <tr>
+                                    <th class="width-40">Criteria</th>
+                                    <th class="width-13">Max Score</th>
+                                    <th class="width-13">Min Score</th>
+                                    <th class="width-24">Questions Created</th>
+                                    <th class="width-10"></th>
+                                </tr>
+                            </thead>
+                            <tbody *ngFor="let item of data;let i=index">
+                                <tr>
+                                    <td class="padding-x-25 font-blue font-bold">{{item.criteria}}</td>
+                                    <td><input type="number" value="{{item.maxScore}}" disabled></td>
+                                    <td><input type="number" value="{{item.minScore}}" disabled></td>
+                                    <td><input type="number" value="{{item.questionsCreated}}" disabled></td>
+                                    <td class="border flex" (click)="expand(item)"><i [class]="expandedElement==item?.criteria ? 'chevron up icon font-blue' : 'chevron down icon font-blue'"></i></td>
+                                </tr>
+                                <tr *ngIf="expandedElement==item?.criteria" class="hidden-block">
+                                    <td class="padding-x-20"></td>
+                                    <td><div><label class="label">Level 1</label></div><input class="hidden-input" type="number" value="{{item.maxScore}}" disabled></td>
+                                    <td><div><label class="label">Level 2</label></div><input class="hidden-input" type="number" value="{{item.minScore}}" disabled></td>
+                                    <td><div><label class="label">Level 3</label></div><input class="hidden-input" type="number" value="{{item.questionsCreated}}" disabled></td>
+                                    <td class="flex"></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

projects/collection-editor-library/src/lib/components/progress-status/progress-status.component.scss

+table {
+    font-family: arial, sans-serif;
+    width: 97%;
+    border-collapse: collapse;
+    thead {
+        tr{
+            .width-40{
+                width: 40%;
+            }
+            .width-13{
+                width: 13%;
+            }
+            .width-24{
+                width: 24%;
+            }
+            .width-10{
+                width: 10%;
+            }
+        }
+    }
+    tbody{
+        border-top: 15px solid white;
+        tr{ 
+            height: 60px;
+            background: #e9e8e8;
+            td{
+                input{
+                    max-width: 37%;
+                    box-sizing: border-box;
+                    height: 43px;
+                    border-radius: 6px;
+                    text-align: center;
+                    background: white;
+                }
+                .hidden-input{
+                    margin-bottom: 10px;
+                }
+                .label{
+                    font-size: 18px !important;
+                    margin-top: 5px;
+                }
+            }
+            .padding-x-25{
+                padding:0px 25px;
+            }
+            .font-blue{
+                color: rgb(47, 47, 176);
+            }
+            .font-bold{
+                font-weight: bold;
+            }
+        }
+        font-family: arial, sans-serif;
+    }
+  }
+  .border{
+    border-left: 1px solid rgb(126, 126, 126);
+  }
+  .flex{
+    display: flex;
+    justify-content: center;
+    height: inherit;
+    align-items: center;
+  }
+  .hidden-block{
+    display: table-row;
+    background: white !important;
+  }
\ No newline at end of file

projects/collection-editor-library/src/lib/components/progress-status/progress-status.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressStatusComponent } from './progress-status.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('ProgressStatusComponent', () => {
+  let component: ProgressStatusComponent;
+  let fixture: ComponentFixture<ProgressStatusComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      declarations: [ ProgressStatusComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProgressStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/collection-editor-library/src/lib/components/progress-status/progress-status.component.ts

+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { EditorService } from '../../services/editor/editor.service';
+
+@Component({
+  selector: 'lib-progress-status',
+  templateUrl: './progress-status.component.html',
+  styleUrls: ['./progress-status.component.scss']
+})
+export class ProgressStatusComponent implements OnInit {
+  toolbarConfig: any = {};
+  pageId = 'progressStatus';
+  data=[{criteria:"Classrooms",maxScore:10,minScore:10,questionsCreated:10,isExpanded:false},
+        {criteria:"Toilets",maxScore:10,minScore:10,questionsCreated:10,isExpanded:false},
+        {criteria:"Assembly",maxScore:10,minScore:10,questionsCreated:10,isExpanded:false},
+        {criteria:"Teaching and Learning",maxScore:10,minScore:10,questionsCreated:10,isExpanded:false}]
+  expandedElement="";
+  @Output() assignPageEmitter = new EventEmitter<any>();
+  
+  constructor(private editorService: EditorService) { }
+
+  ngOnInit(): void {
+    this.toolbarConfig = this.editorService.getToolbarConfig();
+    this.toolbarConfig.title = 'Observation Form';
+  }
+
+  toolbarEventListener(event) {
+    switch (event.button) {
+      case 'backContent':
+        this.redirectToQuestionSet();
+        break;
+      default :
+        break;
+    }
+  }
+
+  redirectToQuestionSet() {
+      this.assignPageEmitter.emit({ status: false });
+  }
+
+  expand(event){
+    this.expandedElement = (this.expandedElement==event.criteria)?"":event.criteria;
+  }
+
+}

projects/collection-editor-library/src/lib/services/editor/editor.service.ts

@@ -40,6 +40,8 @@ export class EditorService {
   selectedPrimaryCategory: any;
   leafParentIdentifier: any;
   questionIds = [];
+  outcomeDeclaration: any;
+  treeData: any;
   private _qualityFormConfig: any;
   private _isReviewerQualityCheckEnabled: boolean;
   constructor(public treeService: TreeService, private toasterService: ToasterService,