Issue #SB-15822 feat: User preference data saving implementation

src/app/client/projects/desktop/src/app/modules/offline/components/index.ts

@@ -13,3 +13,4 @@ export * from './library/library.component';
 export * from './library-filters/library-filters.component';
 export * from './onboarding/onboarding.component';
 export * from './onboarding-location/onboarding-location.component';
+export * from './onboarding-user/onboarding-user.component';

src/app/client/projects/desktop/src/app/modules/offline/components/onboarding-location/onboarding-location.component.html

@@ -31,11 +31,10 @@
 
     <div class="bullets-container">
         <div class="circle active"></div>
-        <div class="circle update" [ngClass]="{'completed': disableContinueBtn}"></div>
+        <div class="circle update"></div>
     </div>
     <button type="button" [disabled]="disableContinueBtn" class="sb-btn sb-btn-primary sb-btn-sm"
-        (click)="handleSubmitButton()" appTelemetryInteract [telemetryInteractEdata]="setTelemetry()"
-        [telemetryInteractContext]="{env:'onboarding'}">
+        (click)="handleSubmitButton()" appTelemetryInteract>
         {{continueLabel}}
         <span class='arrow-icon'><i class="arrow right icon"></i></span></button>
 </div>
\ No newline at end of file

src/app/client/projects/desktop/src/app/modules/offline/components/onboarding-location/onboarding-location.component.ts

@@ -32,6 +32,7 @@ export class OnboardingLocationComponent implements OnInit {
   }
 
   onOptionChanges(option) {
+    console.log('selected', option);
     if (option.type === 'state') {
       this.selectedDistrict = {};
       this.districtList = [];
@@ -72,12 +73,5 @@ export class OnboardingLocationComponent implements OnInit {
       this.toasterService.error(this.resourceService.messages.emsg.m0021);
     });
   }
-  setTelemetry() {
-    return {
-      id: 'onboarding_location',
-      type: 'click',
-      pageid: 'onboarding_location_setting'
-    };
-  }
 
 }

src/app/client/projects/desktop/src/app/modules/offline/components/onboarding-user/onboarding-user.component.html

+  <div class="loginform__content">
+    <div class="loginform__content__header">
+      <img src="assets/images/SUNBIRD.svg" alt="SUNBIRD">
+    </div>
+    <!-- Slides -->
+    <div class="d-flex">
+      <div class="swiper-slide">
+
+        <div class="swiper-slide__para pt-8">{{resourceService?.frmelmnts?.instn?.t0067}} </div>
+
+        <div class="d-flex flex-dc fields-selection">
+          <div class="sb-field" *ngIf="boardOption">
+            <label class="d-flex fields-selection__label"
+              for="board">{{resourceService?.frmelmnts?.lbl?.boards}}</label>
+            <sui-select placeholder="{{resourceService?.messages?.stmsg?.m0126}}" class="selection" id="board" [(ngModel)]="selectedBoard"
+              (ngModelChange)="onBoardChange(selectedBoard)" labelField="name" [isSearchable]="true" [(ngModel)]="selectedBoard">
+              <sui-select-option *ngFor="let option of boardOption" [value]="option">
+              </sui-select-option>
+            </sui-select>
+          </div>
+
+          <div class="sb-field" *ngIf="showMedium">
+            <label class="d-flex fields-selection__label"
+              for="medium">{{resourceService?.frmelmnts?.lbl?.medium}}</label>
+            <sui-multi-select [isSearchable]="true" placeholder="{{resourceService?.messages?.stmsg?.m0127}}" class="selection" id="medium" labelField="name" (ngModelChange)="onMediumChange($event)"
+              [(ngModel)]="selectedMedium" #multiSelect>
+              <sui-select-option *ngFor="let option of mediumOption" [value]="option">
+              </sui-select-option>
+            </sui-multi-select>
+          </div>
+
+          <div class="sb-field" *ngIf="showClass">
+            <label class="d-flex fields-selection__label" for="class">{{resourceService?.frmelmnts?.lbl?.class}}</label>
+            <sui-multi-select [isSearchable]="true" placeholder="{{resourceService?.messages?.stmsg?.m0128}}" class="selection" id="class" labelField="name" (ngModelChange)="onClassChange($event)"
+              [(ngModel)]="selectedClass" #multiSelect>
+              <sui-select-option *ngFor="let option of classOption" [value]="option">
+              </sui-select-option>
+            </sui-multi-select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bullets-container">
+      <div class="circle update"></div>
+      <div class="circle active"></div>
+    </div>
+    <button (click)="saveUserData()" type="button" [disabled]="disableContinueBtn"
+      class="sb-btn sb-btn-primary sb-btn-sm" appTelemetryInteract [telemetryInteractEdata]="telemetryInteractEdata"
+      [telemetryInteractContext]="{env:'onboarding'}">
+      {{resourceService?.frmelmnts?.btn?.submit}}
+      <span class='arrow-icon'></span></button>
+  </div>

src/app/client/projects/desktop/src/app/modules/offline/components/onboarding-user/onboarding-user.component.spec.ts

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

src/app/client/projects/desktop/src/app/modules/offline/components/onboarding-user/onboarding-user.component.ts

+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { OnboardingService } from './../../services';
+import { OrgDetailsService, ChannelService, FrameworkService } from '@sunbird/core';
+import * as _ from 'lodash-es';
+import { ResourceService, ToasterService } from '@sunbird/shared';
+
+@Component({
+  selector: 'app-onboarding-user',
+  templateUrl: './onboarding-user.component.html',
+  styleUrls: ['./onboarding-user.component.scss']
+})
+export class OnboardingUserComponent implements OnInit {
+
+  boardOption: Array<any>;
+  mediumOption: Array<any>;
+  classOption: Array<any>;
+  selectedBoard: any;
+  selectedMedium: any;
+  selectedClass: any;
+  frameworkCategories: any;
+  showMedium = false;
+  showClass = false;
+  disableContinueBtn = true;
+  @Output() userPreferenceSaved = new EventEmitter();
+
+  constructor(public onboardingService: OnboardingService,
+    public orgDetailsService: OrgDetailsService, public channelService: ChannelService,
+    public frameworkService: FrameworkService,
+    public resourceService: ResourceService, public toasterService: ToasterService) { }
+
+  ngOnInit() {
+    this.orgDetailsService.getOrgDetails().subscribe(orgdata => {
+      this.readChannel();
+    }, err => {
+      this.toasterService.error(this.resourceService.messages.emsg.m0005);
+    });
+  }
+
+  readChannel() {
+    this.channelService.getFrameWork(_.get(this.orgDetailsService, 'orgDetails.hashTagId')).subscribe(data => {
+      this.boardOption = _.get(data, 'result.channel.frameworks');
+    }, err => {
+      this.toasterService.error(this.resourceService.messages.emsg.m0005);
+    });
+  }
+
+  onBoardChange(option) {
+    this.mediumOption = [];
+    this.selectedMedium = '';
+    this.classOption = [];
+    this.selectedClass = '';
+    this.showMedium = false;
+    this.showClass = false;
+    this.disableContinueBtn = true;
+    this.frameworkService.getFrameworkCategories(_.get(option, 'identifier')).subscribe((data) => {
+      if (data && _.get(data, 'result.framework.categories')) {
+        this.frameworkCategories = _.get(data, 'result.framework.categories');
+        this.setFrmeworkData();
+      }
+    });
+  }
+
+  setFrmeworkData() {
+    this.frameworkCategories.forEach(element => {
+      switch (element.code) {
+        case 'medium':
+          this.mediumOption = element.terms.map(medium => medium);
+          this.showMedium = true;
+          break;
+        case 'gradeLevel':
+          this.classOption = element.terms.map(gradeLevel => gradeLevel);
+          break;
+      }
+    });
+  }
+
+  onMediumChange(mediumData) {
+    this.showClass = true;
+    this.selectedMedium = mediumData;
+    this.disableContinueBtn = _.isEmpty(this.selectedMedium) || _.isEmpty(this.selectedClass) ? true : false;
+  }
+
+  onClassChange(classData) {
+    this.selectedClass = classData;
+    this.disableContinueBtn = _.isEmpty(this.selectedMedium) || _.isEmpty(this.selectedClass) ? true : false;
+  }
+
+  saveUserData() {
+    const requestData = {
+      'request': {
+        'framework': {
+          'id': _.get(this.orgDetailsService, 'orgDetails.hashTagId'),
+          'board': this.selectedBoard.name,
+          'medium': _.map(this.selectedMedium, 'name'),
+          'gradeLevel': _.map(this.selectedClass, 'name')
+        }
+      }
+    };
+
+    this.onboardingService.saveUserPreference(requestData).subscribe(data => {
+      this.toasterService.success(this.resourceService.messages.smsg.m0058);
+      this.userPreferenceSaved.emit('SUCCUSS');
+    }, err => {
+      this.toasterService.error(this.resourceService.messages.emsg.m0022);
+      this.userPreferenceSaved.emit('ERROR');
+    });
+  }
+}

src/app/client/projects/desktop/src/app/modules/offline/components/onboarding/onboarding.component.html

 <div class="bg-image" [appTelemetryImpression]="setTelemetryData()">
     <div class="loginform">
         <app-onboarding-location *ngIf="slide === 'location'" (locationSaved)="handleLocationSaveEvent($event)"></app-onboarding-location>
+        <app-onboarding-user *ngIf="slide === 'contentPreference'" (userPreferenceSaved)="handleContentPreferenceSaveEvent($event)" #userPreference></app-onboarding-user>
     </div>
 </div>
\ No newline at end of file

src/app/client/projects/desktop/src/app/modules/offline/components/onboarding/onboarding.component.ts

@@ -26,8 +26,7 @@ export class OnboardingComponent implements OnInit {
   }
 
   handleLocationSaveEvent() {
-    // this.slide = 'contentPreference';
-    this.onboardingService.onboardCompletion.emit('SUCCESS');
+    this.slide = 'contentPreference';
   }
 
   handleContentPreferenceSaveEvent() {

src/app/client/projects/desktop/src/app/modules/offline/offline.module.ts

@@ -13,7 +13,7 @@ import {
   BrowseComponent, ContentManagerComponent, OfflineHelpCenterComponent, DesktopAppUpdateComponent,
   LibraryComponent, DesktopHeaderComponent, LibraryFiltersComponent,
   OfflineFaqComponent, OfflineReportIssuesComponent, OfflineHelpVideosComponent, OnboardingComponent,
-  OnboardingLocationComponent
+  OnboardingLocationComponent, OnboardingUserComponent
 } from './components';
 import { WebExtensionModule } from '@project-sunbird/web-extensions';
 import { FileSizeModule } from 'ngx-filesize';
@@ -57,7 +57,8 @@ import { CommonConsumptionModule } from '@project-sunbird/common-consumption';
     OfflineReportIssuesComponent,
     OfflineHelpVideosComponent,
     OnboardingComponent,
-    OnboardingLocationComponent
+    OnboardingLocationComponent,
+    OnboardingUserComponent
   ],
   entryComponents: [
     ContentImportHeaderComponent,
@@ -68,6 +69,6 @@ import { CommonConsumptionModule } from '@project-sunbird/common-consumption';
     ContentImportHeaderComponent,
   ],
   exports: [DesktopAppUpdateComponent, DesktopHeaderComponent, LibraryFiltersComponent, OnboardingComponent,
-    OnboardingLocationComponent]
+    OnboardingLocationComponent, OnboardingUserComponent]
 })
 export class OfflineModule { }

src/app/client/projects/desktop/src/app/modules/offline/services/onboarding/onboarding.service.ts

@@ -36,4 +36,11 @@ export class OnboardingService {
     };
     return this.publicDataService.post(options);
   }
+  saveUserPreference(request) {
+    const options = {
+      url: this.configService.urlConFig.URLS.OFFLINE.CREATE_USER,
+      data: request
+    };
+    return this.publicDataService.post(options);
+  }
 }

src/app/resourcebundles/data/consumption/en.properties

@@ -758,6 +758,7 @@ frmelmnts.btn.connectToInternet = Please connect to the internet to play the con
 frmelmnts.btn.copytoclipboard = Copy to clipboard
 frmelmnts.instn.t0012 = Please save the Process ID for your reference .You can track progress with Process ID
 frmelmnts.instn.t0066 = Score Report
+frmelmnts.instn.t0067 = Provide the details below for suggesting content that is relevant for you.
 frmelmnts.instn.t0086 = Copy Content from Pendrive
 frmelmnts.instn.t0087 = Offline Library
 frmelmnts.instn.t0088 = Browse online for {instance} content
@@ -870,5 +871,7 @@ frmelmnts.lbl.validDescription = Enter valid description
 frmelmnts.lbl.errorWhileGeneratingTicket = Unable to raise ticket. please try again after some times.
 messages.imsg.m0075 = Your Location
 messages.emsg.m0021 = Unable to save location. please try again after some time.
+messages.emsg.m0022 = Unable to save user preference. please try again after some time.
 messages.smsg.m0057 = Location saved successfully...
+messages.smsg.m0058 = User preference saved successfully...
 frmelmnts.lbl.playVideo = Play Video