ISSUE #ED-431 feat : Added Program details page

scripts/deleteUnUsableIosIcon.js

@@ -134,7 +134,9 @@ function deleteUnUsableIosIcon(ionicIconFilePath) {
                 "arrow-up-circle-outline.svg",
                 "arrow-down-circle-outline.svg",
                 "caret-forward-circle.svg",
-                "ribbon.svg"
+                "ribbon.svg",
+                "chevron-up.svg",
+                "chevron-down.svg"
             ].includes(file))) {
                 fs.unlinkSync(ionicIconFilePath + '/' + file);
             }

src/app/manage-learn/core/services/attachment/attachment.service.ts

@@ -140,7 +140,7 @@ export class AttachmentService {
     await actionSheet.present();
     return actionSheet.onDidDismiss();
   }
-  takePicture(sourceType: PictureSourceType, mediaType: MediaType = this.camera.MediaType.ALLMEDIA) {
+  async takePicture(sourceType: PictureSourceType, mediaType: MediaType = this.camera.MediaType.ALLMEDIA) {
     var options: CameraOptions = {
       quality: 20,
       sourceType: sourceType,
@@ -150,15 +150,15 @@ export class AttachmentService {
       destinationType: this.camera.DestinationType.FILE_URI
     };
 
-    this.camera
+    await this.camera
       .getPicture(options)
-      .then((imagePath) => {
+      .then(async(imagePath) => {
         if (this.platform.is("android") && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
           let newFilePath = imagePath;
           if (!newFilePath.includes("file://")) {
             newFilePath = "file://" + imagePath
           }
-            this.checkForFileSizeRestriction(newFilePath).then(isValidFile => {
+            await this.checkForFileSizeRestriction(newFilePath).then(isValidFile => {
               if (isValidFile) {
                 this.filePath
                   .resolveNativePath(newFilePath)
@@ -169,7 +169,7 @@ export class AttachmentService {
               }
             })
         } else {
-          this.checkForFileSizeRestriction(imagePath).then(isValidFile => {
+          await this.checkForFileSizeRestriction(imagePath).then(isValidFile => {
             if (isValidFile) {
               this.copyFile(imagePath);
             }
@@ -329,13 +329,13 @@ export class AttachmentService {
     this.payload = payload;
     switch (type) {
       case 'openCamera':
-        this.takePicture(this.camera.PictureSourceType.CAMERA);
+       await this.takePicture(this.camera.PictureSourceType.CAMERA);
         break;
       case 'openGallery':
-        this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
+       await this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
         break;
       case 'openFiles':
-        this.openFile();
+       await this.openFile();
         break;
     }
   }

src/app/manage-learn/core/services/utils.service.ts

@@ -20,6 +20,8 @@ import { Events } from '@app/util/events';
 import { Location } from "@angular/common";
 import { ToastService } from "./toast/toast.service";
 import { TranslateService } from "@ngx-translate/core";
+import { PopoverController } from "@ionic/angular";
+import { PiiConsentPopupComponent } from "../../shared";
 
 @Injectable({
   providedIn: "root"
@@ -41,6 +43,7 @@ export class UtilsService {
   filters: any = {};
   statuses = statuses;
   numberTasksCompleted =0;
+  consentPopup
   constructor(
     @Inject("PROFILE_SERVICE") private profileService: ProfileService,
     @Inject("AUTH_SERVICE") public authService: AuthService,
@@ -54,6 +57,7 @@ export class UtilsService {
     private location : Location,
     private toast : ToastService,
     private translate: TranslateService,
+    private popoverCtrl : PopoverController
 
   ) {
     this.events.subscribe("loggedInProfile:update", _ => {
@@ -780,4 +784,42 @@ return data;
     ];
     return tabs;
   }
+
+  async showConsentPopup(type){
+    let componentProps={}
+    switch (type) {
+      case 'program':
+        componentProps={
+          consentMessage1 : "FRMELEMNTS_LBL_CONSENT_POPUP_MSG1",
+          consentMessage2 : "FRMELEMNTS_LBL_CONSENT_POPUP_POLICY_MSG",
+          consentMessage3 : "FRMELEMNTS_LBL_CONSENT_POPUP_MSG2",
+          redirectLink : RouterLinks.TERM_OF_USE
+        }
+        break;
+
+      default:
+        componentProps={
+          consentMessage1 : "FRMELEMNTS_LBL_CONSENT_POPUP_MSG1",
+          consentMessage2 : "FRMELEMNTS_LBL_CONSENT_POPUP_POLICY_MSG",
+          consentMessage3 : "FRMELEMNTS_LBL_CONSENT_POPUP_MSG2",
+          redirectLink : RouterLinks.TERM_OF_USE
+        }
+        break;
+    }
+    this.consentPopup = await this.popoverCtrl.create({
+      component : PiiConsentPopupComponent,
+      componentProps : componentProps,
+      cssClass: 'sb-popover back-drop-hard',
+      backdropDismiss: false
+    })
+    await this.consentPopup.present()
+    let {data} = await this.consentPopup.onDidDismiss()
+    return data
+  }
+
+  async closeConsentPopup(){
+    this.consentPopup ? await this.consentPopup.dismiss() : null
+  }
+
+
 }

src/app/manage-learn/programs/program-details/program-details.component.html

@@ -0,0 +1,50 @@
+<ion-content class="ion-padding">
+  <ion-card class="details-block w-100">
+    <div class="title">{{programDetails?.programName}}</div>
+    <div class="description">{{description}}
+      <span class="read-more" (click)="showMore=!showMore; readMoreOrLess()" *ngIf="programDetails?.description?.length > characterLimit">
+        {{ (showMore ? 'READ_LESS' : 'READ_MORE') | translate }}
+      </span>
+    </div>
+    <div class="hr-line"></div>
+    <ion-button class="custom-btn-txt-transform-none" (click)="showConsentPopup()" expand="block" *ngIf="!programDetails?.programJoined; else showMessage">
+      {{"FRMELEMNTS_LBL_JOIN_PROGRAM_POPUP" | translate}}
+    </ion-button>
+    <ng-template #showMessage>
+      <div class="program-joined-message">
+        {{"FRMELEMNTS_MSG_PROGRAM_JOINED"  | translate:{'date':(endDate | date: 'd/M/yyyy')}  }}
+			</div>
+    </ng-template>
+  </ion-card>
+
+  <div class="section-filter">
+    <sb-library-filters [list]="filtersList" [layout]="layout" selectedItems="{{[selectedFilterIndex]}}"  
+        (selectedFilter)="onFilterChange($event);" *ngIf="filtersList?.length">
+    </sb-library-filters>
+  </div>
+
+  <ion-card class="section-card" *ngFor="let data of filteredList">
+    <div class="d-flex flex-jc-space-between p-10 section-details" (click)="selectSection(data?.sectionName)">
+      <div class="section-name">{{data?.sectionName}}</div>
+      <div class="icon">
+        <ion-icon name="{{selectedSection == data?.sectionName?'chevron-up':'chevron-down'}}"></ion-icon>
+      </div>
+    </div>
+    <div *ngIf="selectedSection == data?.sectionName">
+      <div *ngFor="let section of data?.sectionList">
+        <app-item-list-card [title]="section?.name" (click)="cardClick()">
+        </app-item-list-card>
+      </div>
+    </div>
+  </ion-card>
+
+  <div *ngIf="!solutionsList.length" class="no-data">
+    <app-no-data message="{{'FRMELEMNTS_MSG_PROGRAM_NO_RESOURCES'|translate}}" [color]="'text-primary'"></app-no-data>
+  </div>
+  <div class="text-center no-data" *ngIf="solutionsList.length && !filteredList.length">
+    <div class="message-1"><b>{{"EMPTY_SEARCH_RESULTS" | translate}}.</b></div>
+    <div>{{"FRMELEMNTS_MSG_NO_SOLUTIONS_FOR_PROGRAM" | translate:{'type':selectedSection} }}</div>
+  </div>
+  <app-share-profile-data (save)="save($event)" [dataSharingStatus]="sharingStatus" [type]="'program'" [lastUpdatedOn]="endDate" *ngIf="programDetails?.programJoined">
+  </app-share-profile-data>
+</ion-content>

src/app/manage-learn/programs/program-details/program-details.component.scss

@@ -0,0 +1,79 @@
+@import 'src/assets/styles/_custom-mixins';
+@import "src/assets/styles/variables";
+@import "src/assets/styles/_variables.scss";
+
+.details-block{
+    margin-left: 0px;
+    padding: 15px;
+    .title{
+        font-size: 18px;
+        font-weight: 700;
+        padding: 0px 15px;
+        margin-bottom: 10px;
+        color: $black;
+    }
+    .description{
+        color: $black;
+        padding: 0px 15px;
+        font-weight: 600;
+    }
+}
+
+.hr-line {
+    height: 1px;
+    border: 1px solid map-get($colors, medium_gray);
+    margin: 10px 0px;
+}
+
+.program-joined-message{
+    background-color: map-get($colors, light_red);
+    padding: 10px;
+    font-weight: 700;
+    margin: 0px 15px;
+    border-radius: 10px;
+    font-size: 12px;
+}
+
+.read-more{
+    color: $blue;
+    text-decoration-line: underline;
+    font-weight: 600;
+}
+
+.section-filter{
+    background-color: var(--app-secondary-background);
+    border-radius: 25px;
+}
+
+.section-card{
+    border-radius: 25px !important;
+    padding: 5px;
+    margin: 10px 0px;
+    background-color: var(--app-secondary-background);
+    .icon{
+        background-color: $white;
+        box-shadow: var(--button-style-shadow);
+        height: 22px;
+        border-radius: 50%;
+    }
+}
+
+.section-details{
+    .section-name{
+        font-size: 18px;
+        font-weight: 600;
+        color: map-get($colors, bright_blue);
+        text-transform:capitalize;
+    }
+    ion-icon{
+        font-size: 22px;
+    }
+}
+
+.no-data{
+    margin: 100px 0px 50px 0px;
+    .message-1{
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+}