Merge pull request #1 from arunpilli21/release-3.6.0-v8

Task#SB-22655 feat: configure driven menu options
sunbird-cb · Feb 18, 2021 · b747ea3 · b747ea3
2 parents a84673e + 8d41223
commit b747ea3
Show file tree

Hide file tree

Showing 15 changed files with 131 additions and 50 deletions.
diff --git a/projects/discussion-ui/src/lib/common/constants.json b/projects/discussion-ui/src/lib/common/constants.json
@@ -588,5 +588,24 @@
     "TOPIC": "/discussion-forum/topic/",
     "DISCUSSION": "/discussion-forum/",
     "CATEGORY": "/discussion-forum/category/"
-  }
+  },
+  "MENUOPTIONS":[
+    {
+      "route": "All discussions",
+      "enable": true
+    },
+    {   
+      "route": "categories",
+      "enable": true
+    },
+    {
+      "route": "tags",
+      "enable": true
+    },
+    {
+      "route": "my-discussion",
+      "enable": true
+    }
+
+  ]
 }
diff --git a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts
@@ -8,6 +8,7 @@ import { TelemetryUtilsService } from './../../telemetry-utils.service';
 import * as CONSTANTS from './../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 @Component({
@@ -36,6 +37,7 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
 
   constructor(
     public discussService: DiscussionService,
+    public configService: ConfigService,
     public router: Router,
     public activatedRoute: ActivatedRoute,
     private telemetryUtils: TelemetryUtilsService
@@ -97,7 +99,8 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy {
         });
       } else {
         this.discussService.setContext(CONTEXT_PROPS.cid, this.categoryId);
-        this.router.navigate([`${CONSTANTS.ROUTES.CATEGORY}`, `${this.categoryId}`]);
+        let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+        this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.CATEGORY}`, `${this.categoryId}`]);
       }
     }, error => {
       this.showLoader = false;

diff --git a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts
@@ -7,6 +7,7 @@ import * as CONSTANTS from './../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
 import { NSDiscussData } from '../../models/discuss.model';
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 @Component({
@@ -27,7 +28,8 @@ export class DiscussHomeComponent implements OnInit {
     public router: Router,
     private route: ActivatedRoute,
     private discussionService: DiscussionService,
-    private telemetryUtils: TelemetryUtilsService) {}
+    private configService: ConfigService,
+    private telemetryUtils: TelemetryUtilsService) { }
 
   ngOnInit() {
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
@@ -48,7 +50,8 @@ export class DiscussHomeComponent implements OnInit {
       id: _.get(discussionData, 'tid'),
       type: 'Topic'
     });
-    this.router.navigate([`${CONSTANTS.ROUTES.TOPIC}${_.trim(_.get(discussionData, 'slug'))}`]);
+    let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+    this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.TOPIC}${_.trim(_.get(discussionData, 'slug'))}`]);
   }
 
   getDiscussionList(slug: string) {

diff --git a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.ts b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.ts
@@ -33,9 +33,9 @@ export class DiscussTagsComponent implements OnInit {
   ngOnInit() {
     this.telemetryUtils.setContext([]);
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.TAGS);
-    this.configService.setConfig()
+    // this.configService.setConfig(this.activatedRoute)
     this.getParams = this.configService.getConfig()
-    this.cIds = JSON.parse(_.get(this.getParams, 'categories'))
+    this.cIds = _.get(this.getParams, 'categories')
     console.log(this.getParams, this.cIds)
 
     this.fetchAllTags();

diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts
@@ -8,6 +8,7 @@ import * as CONSTANTS from '../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
 import { Subscription } from 'rxjs';
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 
@@ -41,6 +42,7 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
   constructor(
     private route: ActivatedRoute,
     private discussionService: DiscussionService,
+    private configService: ConfigService,
     private formBuilder: FormBuilder,
     public router: Router,
     private telemetryUtils: TelemetryUtilsService,
@@ -253,7 +255,8 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy {
 
   navigateWithPage(page: any) {
     if (page !== this.currentActivePage) {
-      this.router.navigate([`${CONSTANTS.ROUTES.CATEGORY} ${this.topicId}`], { queryParams: { page } });
+      let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+      this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.CATEGORY} ${this.topicId}`], { queryParams: { page } });
     }
   }
 

diff --git a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.ts b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.ts
@@ -5,6 +5,8 @@ import { Location } from '@angular/common';
 
 /* tslint:disable */
 import * as _ from 'lodash'
+import { IdiscussionConfig } from '../../models/discussion-config.model';
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 @Component({
   selector: 'lib-lib-entry',
@@ -13,13 +15,24 @@ import * as _ from 'lodash'
 })
 export class LibEntryComponent implements OnInit {
 
+  data: IdiscussionConfig;
+
   constructor(
     public activatedRoute: ActivatedRoute,
     private discussionService: DiscussionService,
+    private configService: ConfigService,
     private location: Location
   ) { }
 
-  ngOnInit() {  }
+  ngOnInit() { 
+    this.configService.setConfig(this.activatedRoute)
+    // this.activatedRoute.data.subscribe((data) => {
+    this.data = this.configService.getConfig();
+    this.discussionService.userName = _.get(this.discussionService, 'userName');
+    const rawCategories = _.get(this.data, 'categories');
+    this.discussionService.forumIds = _.get(rawCategories, 'result');
+    this.discussionService.initializeUserDetails(this.discussionService.userName);
+   }
 
   goBack() {
     this.location.back();

diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html
@@ -26,7 +26,7 @@
             </div>
             <div class="flex flex-1" class="text-right mobile2">
               <!-- Enable lated when other user can visit your profile -->
-              <!-- <span class="noocoments" mat-card-subtitle>Last online {{data.lastonline | pipeRelativeTime}}</span> -->
+              <!-- <span class="noocoments" mat-card-subtitle>Last online {{data?.lastonline | pipeRelativeTime}}</span> -->
             </div>
           </div>
         </ng-container>

diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.ts
@@ -6,6 +6,7 @@ import { Router } from '@angular/router';
 import * as CONSTANTS from '../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
+import { ConfigService } from '../../services/config.service';
 /* tslint:enable */
 
 @Component({
@@ -25,8 +26,9 @@ export class MyDiscussionComponent implements OnInit {
   showLoader = false;
   constructor(
     private discussService: DiscussionService,
+    private configService: ConfigService,
     public router: Router,
-    private telemetryUtils: TelemetryUtilsService) {}
+    private telemetryUtils: TelemetryUtilsService) { }
 
   /** To fetch user details */
   fetchUserProfile(userName) {
@@ -52,8 +54,8 @@ export class MyDiscussionComponent implements OnInit {
   ngOnInit() {
     this.telemetryUtils.setContext([]);
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.MY_DISCUSSION);
-    if (localStorage.getItem('userName')) {
-      this.fetchUserProfile(localStorage.getItem('userName'));
+    if (this.discussService.userName) {
+      this.fetchUserProfile(this.discussService.userName);
     }
   }
 
@@ -131,7 +133,8 @@ export class MyDiscussionComponent implements OnInit {
 
   navigateToDiscussionDetails(discussionData) {
     console.log('discussionData', discussionData);
-    this.router.navigate([`${CONSTANTS.ROUTES.TOPIC}${_.get(discussionData, 'topic.slug')}`]);
+    let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+    this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.TOPIC}${_.get(discussionData, 'topic.slug')}`]);
   }
 
   logTelemetry(event) {

diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html
@@ -1,8 +1,7 @@
 <ul class="sb-sidebar-menu pl-0" *ngIf="!hideSidePanel">
-  <li class="df-sidebar-menu-list" *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li>
-  <li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'categories'}" (click)="navigate('categories', $event)" id="discussion-categories"><a>Categories</a></li>
-  <li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'tags'}" (click)="navigate('tags', $event)" id="discussion-tags"><a>Tags</a></li>
-  <li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'my-discussion'}" (click)="navigate('my-discussion', $event)" id="my-discussion"><a>My discussions</a></li>
+  <!-- <li class="df-sidebar-menu-list" *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li> -->
+  <li *ngFor='let d of menu' class="df-sidebar-menu-list" [ngClass]="{'menu-active': isActive(d.route)}"
+    (click)="navigate(d.route, $event)" id="d.route"><a>{{d.route}}</a></li>
 </ul>
 
 <!-- for mobile-view -->

diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.ts
@@ -9,6 +9,8 @@ import * as CONSTANTS from './../../common/constants.json';
 /* tslint:disable */
 import * as _ from 'lodash'
 import { first } from 'rxjs/operators';
+import { ConfigService } from '../../services/config.service';
+import { IdiscussionConfig, IMenuOptions } from '../../models/discussion-config.model';
 /* tslint:enable */
 
 @Component({
@@ -24,9 +26,9 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
   defaultPage = 'categories';
 
-  queryParams: any;
+  data: IdiscussionConfig;
   hideSidePanel: boolean;
-
+  menu: Array<IMenuOptions> = [];
   selectedTab: string;
   showSideMenu: Boolean = true;
 
@@ -35,27 +37,34 @@ export class SidePannelComponent implements OnInit, OnDestroy {
     public discussService: DiscussionService,
     public activatedRoute: ActivatedRoute,
     private telemetryUtils: TelemetryUtilsService,
+    private configService: ConfigService
   ) { }
 
   ngOnInit() {
     // TODO: loader or spinner
     this.hideSidePanel = document.body.classList.contains('widget');
     this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
-    this.paramsSubscription = this.activatedRoute.queryParams.pipe(first()).subscribe((params) => {
-      console.log('params', params);
-      this.queryParams = params;
-      this.discussService.userName = _.get(params, 'userName');
-      const rawCategories = JSON.parse(_.get(params, 'categories'));
-      this.discussService.forumIds = _.get(rawCategories , 'result');
-    });
-    localStorage.setItem('userName', _.get(this.queryParams, 'userName'));
-    this.discussService.initializeUserDetails(localStorage.getItem('userName'));
-    if (this.discussService.forumIds) {
-      this.navigate(this.defaultPage);
-    } else {
-      // TODO: Error toast
-      console.log('forum ids not found');
+    this.data = this.configService.getConfig()
+    let menuArr = this.data.menuOptions.length > 0 ? this.data.menuOptions : CONSTANTS.MENUOPTIONS
+    // })
+    for (let i = 0; i < menuArr.length; i++) {
+      if (menuArr[i].enable) {
+        this.menu.push(menuArr[i])
+      }
+    }
+
+  }
+
+  isActive(selectedItem) {
+    if (this.router.url.indexOf(`/${selectedItem}`) > -1 || this.selectedTab === selectedItem) {
+      if (!this.selectedTab) {
+        this.selectedTab = selectedItem
+      }
+      return true
+    } else if (selectedItem === 'categories' && !this.selectedTab) {
+      return true
     }
+    return false
   }
 
   navigate(pageName: string, event?) {
@@ -64,7 +73,7 @@ export class SidePannelComponent implements OnInit, OnDestroy {
     if (event) {
       this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.HOME);
     }
-    this.router.navigate([`${CONSTANTS.ROUTES.DISCUSSION}${pageName}`], { queryParams: this.queryParams });
+    this.router.navigate([`${pageName}`], { relativeTo: this.activatedRoute });
   }
 
   ngOnDestroy() {
@@ -75,10 +84,10 @@ export class SidePannelComponent implements OnInit, OnDestroy {
 
   showMenuButton() {
     this.showSideMenu = this.showSideMenu ? false : true;
- }
+  }
+
+  closeNav() {
+    this.showSideMenu = this.showSideMenu ? false : true;
+  }
 
- closeNav(){
-  this.showSideMenu = this.showSideMenu ? false : true;
- }
-
 }
diff --git a/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts b/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts
@@ -17,6 +17,11 @@ const routes: Routes = [
     path: '',
     component: LibEntryComponent,
     children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        component: DiscussCategoryComponent
+      },
       {
         path: 'home',
         pathMatch: 'full',

diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router'
+import { ConfigService } from '../../services/config.service';
 import * as CONSTANTS from './../../common/constants.json';
 
 @Component({
@@ -12,13 +13,16 @@ export class RelatedDiscussionComponent implements OnInit {
   @Input()
   relatedDiscussions!: []
 
-  constructor(private router: Router) { }
+  constructor(private router: Router,
+    private configService: ConfigService
+  ) { }
 
   ngOnInit() {
   }
 
   getDiscussion(discuss) {
-    this.router.navigate([`${CONSTANTS.ROUTES.DISCUSSION}topic/${discuss.slug}`]);
+    let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : ''
+    this.router.navigate([`${routerSlug}${CONSTANTS.ROUTES.DISCUSSION}topic/${discuss.slug}`]);
   }
 
 }
diff --git a/projects/discussion-ui/src/lib/models/discussion-config.model.ts b/projects/discussion-ui/src/lib/models/discussion-config.model.ts
@@ -0,0 +1,22 @@
+export interface IdiscussionConfig {
+    menuOptions?: Array<IMenuOptions>
+    userName: string
+    context: Object
+    categories: Icategory
+    path: string
+    routerSlug: string
+  }
+
+  export interface Icontext {
+   id: number
+  }
+
+  export interface IMenuOptions {
+    route: string
+    enable: boolean
+  }
+
+  export interface Icategory {
+    result : Array<string>
+  }
+