Merge pull request #611 from mansurskTarento/odcs-designations

Odcs designations
sunbird-cb · Aug 9, 2024 · 8b45388 · 8b45388
2 parents 5ba088b + df5eec5
commit 8b45388
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "@sunbird-cb/micro-surveys": "2.0.13",
     "@sunbird-cb/rain-dashboards": "0.4.33",
     "@sunbird-cb/resolver": "^1.0.0",
-    "@sunbird-cb/taxonomy-editor": "^0.0.31",
+    "@sunbird-cb/taxonomy-editor": "^0.0.32",
     "@sunbird-cb/utils": "^1.0.18",
     "@types/file-saver": "^2.0.1",
     "brace": "^0.11.1",

diff --git a/...rc/lib/routes/home/routes/designation/components/designations/designations.component.html b/...rc/lib/routes/home/routes/designation/components/designations/designations.component.html
@@ -17,18 +17,22 @@
         (click)="showTopSection = !showTopSection">keyboard_arrow_down</mat-icon>
     </div>
     <div class="mt-5" *ngIf="showTopSection">
-      <div class="flex">
+      <div class="flex gap-20">
         <div class="flex-1 flex-col gap-4">
           <p class="flex items-center" *ngFor="let step of designationConfig?.topsection?.steps">
             <mat-icon class="mat-icon mr-4">error_outline</mat-icon>
             <span [innerHTML]="step.title"></span>
           </p>
         </div>
-        <div *ngIf="designationConfig?.topsection?.guideVideo?.enabled">
-          <video width="173" height="102" controls>
-            <source src="{{designationConfig?.topsection?.guideVideo?.url}}"
-              type="{{designationConfig?.topsection?.guideVideo?.type}}">
-          </video>
+        <div class="">
+          <div class="videoDemo flex justify-end section-2">
+            <div class="videoDemoVideo flex flex-column flex-middle justify-center" (click)="openVideoPopup()">
+              <mat-icon class="video_icon mb-2">play_arrow</mat-icon>
+              <div>
+                Watch how it works
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -71,7 +75,7 @@
         </div>
       </div>
       <ng-container *ngIf="!showLoader">
-        <ng-container *ngIf="designationsList.length === 0; else designationsTable">
+        <ng-container *ngIf="designationsList?.length === 0; else designationsTable">
           <div class="w-full flex flex-col justify-center items-center emptyDesignations">
             <img src="/assets/icons/empty_data.svg" class="empty-desigantions-img">
             <div>

diff --git a/...rc/lib/routes/home/routes/designation/components/designations/designations.component.scss b/...rc/lib/routes/home/routes/designation/components/designations/designations.component.scss
@@ -4,6 +4,22 @@
    }
 }
 
+.videoDemo {
+  .videoDemoVideo {
+    width: 173px;
+    height: 102px;
+    border-radius: 5px;
+    background-color: #FDEAD5;
+    font-weight: 600;
+    pointer-events: all;
+    cursor: pointer;
+
+    .video_icon {
+      font-size: 32px;
+    }
+  }
+}
+
 .importBtn {
   background: #1b4ca1 !important;
   color: #ffffff !important;

diff --git a/.../src/lib/routes/home/routes/designation/components/designations/designations.component.ts b/.../src/lib/routes/home/routes/designation/components/designations/designations.component.ts
@@ -8,6 +8,7 @@ import { MatDialog, MatSnackBar } from '@angular/material'
 import { ConformationPopupComponent } from '../../dialog-boxes/conformation-popup/conformation-popup.component'
 import { ActivatedRoute } from '@angular/router'
 import { environment } from '../../../../../../../../../../../src/environments/environment'
+import { ReportsVideoComponent } from '../../../reports-video/reports-video.component'
 
 @Component({
   selector: 'ws-app-designations',
@@ -115,25 +116,28 @@ export class DesignationsComponent implements OnInit {
     const departmentName = _.get(this.configSvc, 'userProfile.departmentName')
     const masterFrameWorkName = this.environment.ODCSMasterFramework
     this.designationsService.createFrameWork(masterFrameWorkName, this.orgId, departmentName).subscribe((res: any) => {
-      if (res) {
+      if (_.get(res, 'result.framework')) {
+        this.environment.frameworkName = _.get(res, 'result.framework')
         this.getOrgReadData()
+        // this.publishFrameWork('', true)
+        // this.getFrameworkInfo(res.frameworkid)
       }
       // console.log('frameworkCreated: ', res)
     })
   }
 
   getOrgReadData() {
     this.designationsService.getOrgReadData(this.orgId).subscribe((res: any) => {
-      if (_.get(res, 'frameworkid')) {
-        this.showLoader = true
-        this.showCreateLoader = false
-        this.environment.frameworkName = _.get(res, 'frameworkid')
-        this.getFrameworkInfo(res.frameworkid)
-      } else {
-        setTimeout(() => {
-          this.getOrgReadData()
-        }, _.get(this.designationConfig, 'refreshDelayTime', 10000))
-      }
+      // if (_.get(res, 'frameworkid')) {
+      this.showLoader = true
+      this.showCreateLoader = false
+      this.environment.frameworkName = _.get(res, 'frameworkid')
+      this.getFrameworkInfo(res.frameworkid)
+      // } else {
+      //   setTimeout(() => {
+      //     this.getOrgReadData()
+      //   }, _.get(this.designationConfig, 'refreshDelayTime', 10000))
+      // }
       // console.log('orgFramework Details', res)
     })
   }
@@ -176,7 +180,7 @@ export class DesignationsComponent implements OnInit {
   }
 
   getDesignations() {
-    this.designationsList = _.get(this.organisationsList, '[0].children')
+    this.designationsList = _.get(this.organisationsList, '[0].children', [])
     this.designationsService.setCurrentOrgDesignationsList(this.designationsList)
     this.filterDesignations()
   }
@@ -196,10 +200,10 @@ export class DesignationsComponent implements OnInit {
 
   filterDesignations(key?: string) {
     if (key) {
-      this.filteredDesignationsList = this.designationsList
+      this.filteredDesignationsList = (this.designationsList || [])
         .filter((designation: any) => designation.name.toLowerCase().includes(key.toLowerCase()))
     } else {
-      const filteredData: any = (this.designationsList && this.designationsList) && this.designationsList.sort((a: any, b: any) => {
+      const filteredData: any = (this.designationsList || []).sort((a: any, b: any) => {
         const timestampA = a.additionalProperties && a.additionalProperties.timeStamp ?
           new Date(Number(a.additionalProperties.timeStamp)).getTime() : 0
         const timestampB = b.additionalProperties && b.additionalProperties.timeStamp ?
@@ -208,12 +212,25 @@ export class DesignationsComponent implements OnInit {
         return timestampB - timestampA
 
       })
-      this.filteredDesignationsList = filteredData
+      this.filteredDesignationsList = filteredData ? filteredData : []
     }
   }
 
   //#region (ui interactions like click)
 
+  openVideoPopup() {
+    const url = `${environment.karmYogiPath}${_.get(this.designationConfig, 'topsection.guideVideo.url')}`
+    this.dialog.open(ReportsVideoComponent, {
+      data: {
+        videoLink: url,
+      },
+      disableClose: true,
+      width: '50%',
+      height: '60%',
+      panelClass: 'overflow-visable',
+    })
+  }
+
   menuSelected(event: any) {
     switch (event.action) {
       // case 'edit':
@@ -300,7 +317,7 @@ export class DesignationsComponent implements OnInit {
   }
 
   publishFrameWork(action?: string) {
-    const frameworkName = _.get(this.frameworkDetails, 'code')
+    const frameworkName = _.get(this.frameworkDetails, 'code', _.get(this.environment, 'frameworkName'))
     this.designationsService.publishFramework(frameworkName).subscribe({
       next: response => {
         if (response) {
@@ -317,7 +334,7 @@ export class DesignationsComponent implements OnInit {
             if (action && action === 'delete') {
               this.openSnackbar(_.get(this.designationConfig, 'termRemoveMsg'))
             }
-          }, refreshTime)
+          },         refreshTime)
         }
       },
       error: () => {

diff --git a/...tes/home/routes/designation/components/import-designation/import-designation.component.ts b/...tes/home/routes/designation/components/import-designation/import-designation.component.ts
@@ -294,7 +294,7 @@ export class ImportDesignationComponent implements OnInit, OnDestroy {
             (this.designationsImportSuccessResponses.length / 2) * 1000 : 10000
           setTimeout(() => {
             this.dialogRef.close(true)
-          }, refreshTime)
+          },         refreshTime)
 
         }
       },

diff --git a/project/ws/app/src/lib/routes/home/routes/designation/services/designations.service.ts b/project/ws/app/src/lib/routes/home/routes/designation/services/designations.service.ts
@@ -202,7 +202,7 @@ export class DesignationsService {
       frameworkId,
       categoryId,
       categoryTermCode
-    )}`, reguestBody)
+    )}`,                   reguestBody)
   }
 
   publishFramework(frameworkName: string) {

diff --git a/project/ws/app/src/lib/routes/home/routes/odcs-mapping/odcs-mapping.component.html b/project/ws/app/src/lib/routes/home/routes/odcs-mapping/odcs-mapping.component.html
@@ -16,18 +16,22 @@ <h1 class="mat-heading-1">{{odcConfig?.mainHeading}}</h1>
           (click)="showTopSection = !showTopSection; callResizeEvent($event)">keyboard_arrow_down</mat-icon>
       </div>
       <div class="mt-5" *ngIf="showTopSection">
-        <div class="flex">
+        <div class="flex gap-20">
           <div class="flex-1 flex-col gap-4">
             <p class="flex items-center" *ngFor="let step of odcConfig?.topsection?.steps">
               <mat-icon class="mat-icon mr-4">error_outline</mat-icon>
               <span [innerHTML]="step.title"></span>
             </p>
           </div>
-          <div *ngIf="odcConfig?.topsection?.guideVideo?.enabled">
-            <video width="173" height="102" controls>
-              <source src="{{odcConfig?.topsection?.guideVideo?.url}}"
-                type="{{odcConfig?.topsection?.guideVideo?.type}}">
-            </video>
+          <div class="">
+            <div class="videoDemo flex justify-end section-2">
+              <div class="videoDemoVideo flex flex-column flex-middle justify-center" (click)="openVideoPopup()">
+                <mat-icon class="video_icon mb-2">play_arrow</mat-icon>
+                <div>
+                  Watch how it works
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/project/ws/app/src/lib/routes/home/routes/odcs-mapping/odcs-mapping.component.scss b/project/ws/app/src/lib/routes/home/routes/odcs-mapping/odcs-mapping.component.scss
@@ -1,3 +1,19 @@
 .font-bold-imp{
   font-weight: 700 !important;
-}
+}
+
+.videoDemo {
+  .videoDemoVideo {
+    width: 173px;
+    height: 102px;
+    border-radius: 5px;
+    background-color: #FDEAD5;
+    font-weight: 600;
+    pointer-events: all;
+    cursor: pointer;
+
+    .video_icon {
+      font-size: 32px;
+    }
+  }
+}
diff --git a/project/ws/app/src/lib/routes/home/routes/odcs-mapping/odcs-mapping.component.ts b/project/ws/app/src/lib/routes/home/routes/odcs-mapping/odcs-mapping.component.ts
@@ -3,6 +3,8 @@ import { environment } from '../../../../../../../../../src/environments/environ
 import { ActivatedRoute } from '@angular/router'
 import * as _ from 'lodash'
 import { DesignationsService } from '../designation/services/designations.service'
+import { MatDialog, MatSnackBar } from '@angular/material'
+import { ReportsVideoComponent } from '../reports-video/reports-video.component'
 // import { OdcsService } from '../../services/odcs.service'
 
 @Component({
@@ -22,6 +24,8 @@ export class OdcsMappingComponent implements OnInit {
   constructor(
     private activateRoute: ActivatedRoute,
     private designationsService: DesignationsService,
+    private snackBar: MatSnackBar,
+    private dialog: MatDialog
     // private odcsSvc: OdcsService
   ) { }
 
@@ -44,7 +48,7 @@ export class OdcsMappingComponent implements OnInit {
       this.odcConfig.defaultKCMConfig[0].frameworkId = environment.KCMframeworkName
       this.taxonomyConfig = [...this.odcConfig.defaultOdcsConfig, ...this.odcConfig.defaultKCMConfig, ...this.odcConfig.frameworkConfig]
     } else {
-      this.showLoader = false
+      this.showLoader = true
       this.loaderMsg = this.odcConfig.frameworkCreationMSg
       this.createFreamwork()
     }
@@ -53,35 +57,45 @@ export class OdcsMappingComponent implements OnInit {
   callResizeEvent(_event: any) {
     setTimeout(() => {
       window.dispatchEvent(new Event('resize'))
-    }, 100)
+    },         100)
   }
 
   createFreamwork() {
     this.loaderMsg = this.odcConfig.frameworkCreationMSg
     const departmentName = _.get(this.configSvc, 'userProfile.departmentName')
     const masterFrameWorkName = this.environmentVal.ODCSMasterFramework
-    this.designationsService.createFrameWork(masterFrameWorkName, this.orgId, departmentName).subscribe((res: any) => {
-      if (res) {
-        this.getOrgReadData()
-      }
+    this.designationsService.createFrameWork(masterFrameWorkName, this.orgId, departmentName).subscribe({
+      next: res => {
+        if (_.get(res, 'result.framework')) {
+          this.getOrgReadData()
+        }
+      },
+      error: () => {
+        this.showLoader = false
+        const errorMessage = _.get(this.odcConfig, 'internalErrorMsg')
+        this.openSnackbar(errorMessage)
+      },
+
       // console.log('frameworkCreated: ', res)
     })
   }
 
   getOrgReadData() {
     this.showLoader = true
     this.designationsService.getOrgReadData(this.orgId).subscribe((res: any) => {
-      if (_.get(res, 'frameworkid')) {
-        this.environmentVal.frameworkName = (_.get(res, 'frameworkid'))
-        this.environmentVal.frameworkType = 'MDO_DESIGNATION'
-        this.odcConfig.defaultOdcsConfig[0].frameworkId = (_.get(res, 'frameworkid'))
-        this.taxonomyConfig = [...this.odcConfig.defaultOdcsConfig, ...this.odcConfig.frameworkConfig]
-        this.environmentVal.kcmFrameworkName = environment.KCMframeworkName
-      } else {
-        setTimeout(() => {
-          this.getOrgReadData()
-        }, 10000)
-      }
+      // if (_.get(res, 'frameworkid')) {
+      this.environmentVal.frameworkName = (_.get(res, 'frameworkid'))
+      this.odcConfig.defaultOdcsConfig[0].frameworkId = (_.get(res, 'frameworkid'))
+      this.environmentVal.frameworkType = 'MDO_DESIGNATION'
+      this.environmentVal.kcmFrameworkName = environment.KCMframeworkName
+      this.odcConfig.defaultKCMConfig[0].frameworkId = environment.KCMframeworkName
+      this.taxonomyConfig = [...this.odcConfig.defaultOdcsConfig, ...this.odcConfig.frameworkConfig]
+      this.showLoader = false
+      // } else {
+      //   setTimeout(() => {
+      //     this.getOrgReadData()
+      //   }, 10000)
+      // }
     })
   }
 
@@ -197,4 +211,23 @@ export class OdcsMappingComponent implements OnInit {
   //   })
   // }
 
+  openVideoPopup() {
+    const url = `${environment.karmYogiPath}${_.get(this.odcConfig, 'topsection.guideVideo.url')}`
+    this.dialog.open(ReportsVideoComponent, {
+      data: {
+        videoLink: url,
+      },
+      disableClose: true,
+      width: '50%',
+      height: '60%',
+      panelClass: 'overflow-visable',
+    })
+  }
+
+  private openSnackbar(primaryMsg: any, duration: number = 5000) {
+    this.snackBar.open(primaryMsg, 'X', {
+      duration,
+    })
+  }
+
 }