Merge pull request #2398 from sunbird-cb/survey-popup

Survey popup changes

library/ws-widget/collection/src/lib/_common/profile-card-stats/profile-card-stats.component.scss

@@ -94,6 +94,7 @@
 }
 .profile-wrapper {
   margin-top: 32px;
+  position: relative;
   z-index: 10;
 
     @include breakpoint-xs {

library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.html

@@ -0,0 +1,30 @@
+<div class="tips-container" *ngIf="isVisible">
+    <ng-container *ngFor="let data of surveyFormData">
+    <div class="card-header flex  items-start justify-between">
+        <span class="card-title flex mat-subheading-1">{{data.title}}</span>
+        <a mat-icon-button class="close-button flex" (click)="closeCard()">
+          <mat-icon>close</mat-icon>
+        </a>
+      </div>
+    <div class="circle-box">
+        <div class="background-circle">
+        </div>
+    </div>
+
+    <div class="tip-content flex flex-col">
+        <div class="tip-content-top flex flex-row">
+            <div class="background flex items-center">
+                <img class="book-icon" src="{{data?.ImageUrl}}"
+                    alt="{{data?.ImageUrl}}">
+            </div>
+            <div class="tip-data flex">
+                <p>{{data?.content}}</p>
+            </div>
+        </div>
+
+    <div class="tip-count">
+        <a href="https://portal.igotkarmayogi.gov.in/surveyml/668e250da8bfb500083136b1" class="btn-title">{{data.btnTitle}}</a>
+    </div>
+</div>
+    </ng-container>
+</div>

library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.scss

@@ -0,0 +1,157 @@
+.tips-container {
+    background-color: #F9CB97;
+    padding: 16px;
+    padding-bottom: 0px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    overflow: hidden;
+    width: 385px;
+    box-sizing: border-box;
+
+
+  }
+
+  @media screen and (max-width: 1000px) {
+    .tips-container {
+      width: 100%;
+
+    }
+  }
+
+  .tips-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    z-index: 10;
+  }
+
+  .tips-header h3 {
+    margin: 0;
+    font-size: 1.2em;
+    color: #000000;
+    font-family: Montserrat;
+    font-size: 16px;
+    z-index: 10;
+  }
+
+  .tips-header button {
+    background: none;
+    border: none;
+    color: #01468f;
+    cursor: pointer;
+    font-family: Lato;
+    font-size: 14px;
+    z-index: 10;
+  }
+
+  .tip-content {
+    display: flex;
+    // justify-content: space-between;
+    z-index: 10;
+    padding-top: 6px;
+    margin-bottom: 8px;
+  }
+
+  .tip-content p {
+    margin-left: 12px;
+    margin-bottom: 4px;
+    color: #000000;
+    font-family: Lato;
+    font-size: 14px;
+    z-index: 10;
+    line-height: 16.8px;
+  }
+
+  .tip-count {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    font-family: Lato !important;
+    font-size: 14px !important;
+    z-index: 10;
+    font-weight: 600;
+    line-height: 19.5px;
+  }
+
+  // .tip-data {
+  //   width: calc(100% - 110px);
+  // }
+
+
+  .background-circle {
+    position: absolute;
+    z-index: 1;
+    right: -6.5em;
+    top: 2.8em;
+    width: 178px;
+    height: 178px;
+    border-radius: 100%;
+    background-color: #fcd2a3;
+  }
+
+  .circle-box {
+    position: relative;
+    width: 100%;
+    height: 0px;
+  }
+
+  .book-icon {
+    width: 50px;
+    height: 50px;
+    padding: 6px;
+    box-sizing: border-box;
+  }
+
+  .background {
+    background-color: white;
+    justify-content: center;
+    width: 100px;
+    height: 51px;
+    border-radius: 5px;
+    text-align: center;
+  }  
+  .view-more {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    height: 40px;
+    justify-content: center;
+  }
+
+  .view-more:hover {
+    background-color: #DCDFE5;
+  }
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .card-title {
+    font-weight: 600;
+    width: 85%;
+    font-family: 'Montserrat';
+    font-size: 16px;
+    line-height: 19.5px;
+  }
+
+  .close-button {
+    cursor: pointer;
+    vertical-align: top;
+    color: #1b4ca1; 
+  }
+  .btn-title {
+    color: #fff !important;
+    background-color: #1b4ca1;
+    border-radius: 16px;
+    padding: 8px 16px;
+    font-weight: 700;
+    font-size: 14px;
+    width: 102px;
+    text-align: center;
+    margin-bottom: 7px;
+
+  }

library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.spec.ts

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

library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core'
+
+@Component({
+  selector: 'ws-widget-survey-form-section',
+  templateUrl: './survey-form-section.component.html',
+  styleUrls: ['./survey-form-section.component.scss'],
+})
+export class SurveyFormSectionComponent implements OnInit {
+  isVisible = true
+  @Input() surveyFormData: any
+  surveyData: any
+
+  constructor() { }
+
+  ngOnInit() {
+  //  this.surveyData = this.surveyFormData
+  }
+
+  closeCard() {
+    this.isVisible = false
+  }
+}

library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { SurveyFormSectionComponent } from './survey-form-section/survey-form-section.component'
+import { MatIconModule } from '@angular/material'
+import { TranslateModule } from '@ngx-translate/core'
+
+@NgModule({
+  declarations: [SurveyFormSectionComponent],
+  imports: [
+    CommonModule,
+    MatIconModule,
+    TranslateModule,
+  ],
+  exports: [SurveyFormSectionComponent],
+})
+export class SurveyFormModule { }

library/ws-widget/collection/src/lib/registration.config.ts

@@ -181,6 +181,7 @@ import { CardEventHubModule } from './card-event-hub/card-event-hub.module'
 import { CardCompetencyComponent } from './card-competency/card-competency.component'
 import { CardCompetencyModule } from './card-competency/card-competency.module'
 import { TipsForLearnerModule } from './_common/tips-for-learner/tips-for-learner.module'
+import { SurveyFormModule } from './_common/survey-form-left-section/survey-form/survey-form.module'
 
 export const WIDGET_REGISTERED_MODULES = [
   AvatarPhotoModule,
@@ -273,6 +274,7 @@ export const WIDGET_REGISTERED_MODULES = [
   CardEventHubModule,
   CardCompetencyModule,
   TipsForLearnerModule,
+  SurveyFormModule,
 ]
 
 export const WIDGET_REGISTRATION_CONFIG: NsWidgetResolver.IRegistrationConfig[] = [

src/app/component/in-sight-side-bar/in-sight-side-bar.component.html

@@ -9,6 +9,9 @@
 
 
 <section class="hidden md:block" style="position: relative;" [ngClass]="{'':!collapsed, 'margin-bottom-m': collapsed}">
+    <div class="collapsible margin-top-m" [@collapse]="collapsed" *ngIf="surveyForm && surveyForm.active">
+        <ws-widget-survey-form-section [surveyFormData]="surveyForm.surveyFormData"></ws-widget-survey-form-section>
+    </div>
     <div class="assessment-box  collapsible" [@collapse]="collapsed"
         [ngClass]="{'margin-bottom-remove margin-top-remove':collapsed,'margin-top-l':!collapsed}">
         <ng-container [ngTemplateOutlet]="loadNewStrips"></ng-container>

src/app/component/in-sight-side-bar/in-sight-side-bar.component.ts

@@ -78,7 +78,7 @@ export class InsightSideBarComponent implements OnInit {
   learnAdvisoryData: any
   randomlearnAdvisoryObj: any
   learnAdvisoryDataLength: any
-
+  surveyForm: any
   constructor(
     private homePageSvc: HomePageService,
     private configSvc: ConfigurationsService,
@@ -100,6 +100,7 @@ export class InsightSideBarComponent implements OnInit {
     if (this.activatedRoute.snapshot.data.pageData && this.activatedRoute.snapshot.data.pageData.data) {
       this.homePageData = this.activatedRoute.snapshot.data.pageData.data
       this.learnAdvisoryData = this.activatedRoute.snapshot.data.pageData.data.learnerAdvisory
+      this.surveyForm = this.activatedRoute.snapshot.data.pageData.data.surveyForm
     }
 
     // this.learnAdvisoryDataLength = this.learnAdvisoryData.length

src/app/home/home.module.ts

@@ -41,6 +41,7 @@ import { HttpClient } from '@angular/common/http'
 import { UserLeaderboardModule } from '@sunbird-cb/collection/src/lib/_common/user-leaderboard/user-leaderboard.module'
 import { MatTooltipModule } from '@angular/material'
 import { ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule } from '@sunbird-cb/consumption'
+import { SurveyFormModule } from '@sunbird-cb/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form.module'
 
 @NgModule({
   declarations: [
@@ -82,6 +83,7 @@ import { ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule } from '
       },
     }),
     MatTooltipModule,
+    SurveyFormModule,
   ],
   exports: [
     HeaderModule,