Merge pull request #258 from christyfernandes/kcm-mapping

Kcm mapping

Author: christyfernandes

angular.json

@@ -17,6 +17,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
+            "preserveSymlinks": true,
             "assets": [
               "src/favicon.png",
               "src/dashboard-assets/"
@@ -87,7 +88,8 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/shepherd.js/dist/js/shepherd.min.js",
-              "node_modules/@project-sunbird/telemetry-sdk/index.js"
+              "node_modules/@project-sunbird/telemetry-sdk/index.js",
+              "node_modules/leader-line/leader-line.min.js"
             ]
           },
           "configurations": {

package.json

@@ -41,6 +41,7 @@
     "@angular/service-worker": "~8.2.1",
     "@project-sunbird/telemetry-sdk": "0.0.26",
     "@sunbird-cb/collection": "^1.0.34",
+    "@sunbird-cb/taxonomy-editor": "^0.0.7",
     "@sunbird-cb/rain-dashboards": "^0.3.9",
     "@sunbird-cb/resolver": "^1.0.0",
     "@sunbird-cb/utils": "^1.0.17",
@@ -57,6 +58,7 @@
     "jquery": "^3.4.1",
     "jsplumb": "2.11.2",
     "keycloak-angular": "^6.1.0",
+    "leader-line": "^1.0.7",
     "lodash": "^4.17.21",
     "material-icons": "^0.3.1",
     "moment": "^2.29.1",

project/ws/app/src/lib/routes/home/home.module.ts

@@ -1,5 +1,5 @@
 import { CommsComponent } from './routes/comms/comms.component'
-import { NgModule } from '@angular/core'
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { PipeFilterModule, PipeHtmlTagRemovalModule, PipeOrderByModule, PipeRelativeTimeModule } from '@sunbird-cb/utils'
 import { MatGridListModule } from '@angular/material/grid-list'
@@ -89,6 +89,8 @@ import { RequestCopyDetailsComponent } from './routes/request/request-copy-detai
 import { CompetencyViewComponent } from './routes/request/competency-view/competency-view.component'
 import { ConfirmationPopupComponent } from './routes/request/confirmation-popup/confirmation-popup.component'
 import { AssignListPopupComponent } from './routes/request/assign-list-popup/assign-list-popup.component'
+import { KCMMappingComponent } from './routes/kcm-mapping/kcm-mapping.component'
+import { TaxonomyEditorModule } from '@sunbird-cb/taxonomy-editor'
 import { SingleAssignPopupComponent } from './routes/request/single-assign-popup/single-assign-popup.component'
 @NgModule({
   declarations: [
@@ -132,6 +134,7 @@ import { SingleAssignPopupComponent } from './routes/request/single-assign-popup
     CompetencyViewComponent,
     ConfirmationPopupComponent,
     AssignListPopupComponent,
+    KCMMappingComponent,
     SingleAssignPopupComponent,
   ],
   imports: [
@@ -189,6 +192,7 @@ import { SingleAssignPopupComponent } from './routes/request/single-assign-popup
     // TO-DO need to enable for image crop
     // ImageCropModule,
     NgMultiSelectDropDownModule.forRoot(),
+    TaxonomyEditorModule,
   ],
   entryComponents: [
     UserPopupComponent,
@@ -212,7 +216,7 @@ import { SingleAssignPopupComponent } from './routes/request/single-assign-popup
     ConfirmationPopupComponent,
   ],
   exports: [AddThumbnailComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class HomeModule {
-
 }

project/ws/app/src/lib/routes/home/home.rounting.module.ts

@@ -11,7 +11,7 @@ import { CreateMdoComponent } from './routes/create-mdo/create-mdo.component'
 import { CreateUserComponent } from './routes/create-user/create-user.component'
 import { DepartmentResolve } from './resolvers/department-resolve'
 import { RolesResolver } from './resolvers/roles-resolver.service'
-// import { PageResolve } from '@sunbird-cb/utils'
+import { PageResolve } from '@sunbird-cb/utils'
 import { ModerationViewComponent } from './routes/moderation/moderation.component'
 import { RolesUsersComponent } from './routes/roles-users/roles-users.component'
 import { ReportsComponent } from './routes/reports/reports.component'
@@ -32,6 +32,7 @@ import { AddSectorComponent } from './routes/sectors/add-sector/add-sector.compo
 import { EditSectorComponent } from './routes/sectors/edit-sector/edit-sector.component'
 import { AllRequestComponent } from './routes/request/all-request/all-request.component'
 import { RequestCopyDetailsComponent } from './routes/request/request-copy-details/request-copy-details.component'
+import { KCMMappingComponent } from './routes/kcm-mapping/kcm-mapping.component'
 
 const routes: Routes = [
   {
@@ -371,7 +372,7 @@ const routes: Routes = [
       },
       {
         path: 'request-details',
-        component:  RequestCopyDetailsComponent,
+        component: RequestCopyDetailsComponent,
         data: {
           pageId: 'home/request-details',
           module: 'Request-Details',
@@ -382,6 +383,20 @@ const routes: Routes = [
           configService: ConfigResolveService,
         },
       },
+      {
+        path: 'kcm-mapping',
+        component: KCMMappingComponent,
+        data: {
+          pageId: 'home/KCM-mapping',
+          module: 'KCM-mapping',
+          pageType: 'feature',
+          pageKey: 'kcm',
+        },
+        resolve: {
+          configService: ConfigResolveService,
+          pageData: PageResolve,
+        },
+      },
 
     ],
   },

project/ws/app/src/lib/routes/home/routes/kcm-mapping/kcm-mapping.component.html

@@ -0,0 +1,30 @@
+<div class="flex flex-col gap-4">
+  <h1 class="mat-heading-1">{{kcmConfig?.mainHeading}}</h1>
+  <mat-card class="mb-4" [ngStyle]="{'background-color': showTopSection ? '#fff' : 'rgba(235, 235, 235, 1)'}">
+    <div class="flex">
+      <span class="mat-body-1 font-bold-imp flex-1">{{kcmConfig?.topsection?.heading}}</span>
+      <mat-icon class="cursor-pointer mat-icon mr-4" *ngIf="showTopSection"
+        (click)="showTopSection = !showTopSection">keyboard_arrow_up</mat-icon>
+      <mat-icon class="cursor-pointer mat-icon mr-4" *ngIf="!showTopSection"
+        (click)="showTopSection = !showTopSection">keyboard_arrow_down</mat-icon>
+    </div>
+    <div class="mt-5" *ngIf="showTopSection">
+      <div class="flex">
+        <div class="flex-1 flex-col gap-4">
+          <p class="flex items-center" *ngFor="let step of kcmConfig?.topsection?.steps">
+            <mat-icon class="mat-icon mr-4">error_outline</mat-icon>
+            {{step.title}}
+          </p>
+        </div>
+        <div *ngIf="kcmConfig?.topsection?.guideVideo?.enabled">
+          <video width="173" height="102" controls>
+            <source src="{{kcmConfig?.topsection?.guideVideo?.url}}" type="{{kcmConfig?.topsection?.guideVideo?.type}}">
+          </video>
+        </div>
+      </div>
+    </div>
+  </mat-card>
+  <div>
+    <lib-taxonomy-view [environment]="environmentVal" [taxonomyConfig]="taxonomyConfig"></lib-taxonomy-view>
+  </div>
+</div>

project/ws/app/src/lib/routes/home/routes/kcm-mapping/kcm-mapping.component.scss

@@ -0,0 +1,3 @@
+.font-bold-imp{
+  font-weight: 700 !important;
+}

project/ws/app/src/lib/routes/home/routes/kcm-mapping/kcm-mapping.component.spec.ts

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

project/ws/app/src/lib/routes/home/routes/kcm-mapping/kcm-mapping.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core'
+import { environment } from '../../../../../../../../../src/environments/environment'
+import { ActivatedRoute } from '@angular/router'
+
+@Component({
+  selector: 'ws-app-kcm-mapping',
+  templateUrl: './kcm-mapping.component.html',
+  styleUrls: ['./kcm-mapping.component.scss'],
+})
+export class KCMMappingComponent implements OnInit {
+  environmentVal: any
+  taxonomyConfig: any
+  showTopSection = true
+  kcmConfig: any
+  constructor(
+    private activateRoute: ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+    this.environmentVal = environment
+    this.environmentVal.frameworkName = environment.KCMframeworkName
+    // this.environmentVal.url = `https://localhost:3000`
+    this.activateRoute.data.subscribe(data => {
+      this.kcmConfig = data.pageData.data
+      this.taxonomyConfig = this.kcmConfig.frameworkConfig
+      // console.log('kcmConfig', this.kcmConfig)
+    })
+  }
+
+}