diff --git a/src/app/client/src/app/modules/groups/components/group-details/group-details.component.html b/src/app/client/src/app/modules/groups/components/group-details/group-details.component.html
index 3f9856819a13db001e01988b1c62058f55c6d90d..15c27c2ed2af9b09fabf9c2cd3aa27fb6972026c 100644
--- a/src/app/client/src/app/modules/groups/components/group-details/group-details.component.html
+++ b/src/app/client/src/app/modules/groups/components/group-details/group-details.component.html
@@ -1,6 +1,9 @@
<app-landing-section [textToDisplay]=""
[layoutConfiguration]="layoutConfiguration" [noTitle]="true"></app-landing-section>
+<app-ftu-popup *ngIf="showMemberPopup" [showMemberPopup]="showMemberPopup" (close)="toggleFtuModal(false)">
+</app-ftu-popup>
+
<div [ngClass]="layoutConfiguration ? 'sbt-center-container sbt-back-header sbt-mygroups-details relative9' : ''">
<div class="ui container" *ngIf="isLoader" >
@@ -8,7 +11,7 @@
</div>
<div *ngIf="groupData && !isLoader" [appTelemetryImpression]="telemetryImpression">
- <app-group-header [groupData]="groupData"></app-group-header>
+ <app-group-header [groupData]="groupData" (handleFtuModal)="showMemberPopup=!showMemberPopup"></app-group-header>
<div class="ui container">
<div class="sb-g mt-24 sbt-sb-g">
<div class="sb-g-col-xs-12 sb-g-col-md-9 sb-g-col-lg-9 sb-g-col-xxxl-12 ">
diff --git a/src/app/client/src/app/modules/groups/components/group-details/group-details.component.spec.ts b/src/app/client/src/app/modules/groups/components/group-details/group-details.component.spec.ts
index 161b718699c6566168c3f964aeb2376bc6f9014c..c0738e29510e02df8d09bb72e6505dbee3f94eef 100644
--- a/src/app/client/src/app/modules/groups/components/group-details/group-details.component.spec.ts
+++ b/src/app/client/src/app/modules/groups/components/group-details/group-details.component.spec.ts
@@ -128,4 +128,10 @@ describe('GroupDetailsComponent', () => {
expect(component.telemetryImpression).toEqual(impressionObj);
expect(component['groupService'].getImpressionObject).toHaveBeenCalled();
});
+
+ it('show change dropdownMenuContent', () => {
+ component.showMemberPopup = false;
+ component.toggleFtuModal(true);
+ expect(component.showMemberPopup).toBeTruthy();
+ });
});
diff --git a/src/app/client/src/app/modules/groups/components/group-details/group-details.component.ts b/src/app/client/src/app/modules/groups/components/group-details/group-details.component.ts
index b560ac8e8110250ed8649b65c73857c0cb3b21d3..b689cff4fcaa8db5a72bf8340e70a7a231db6b34 100644
--- a/src/app/client/src/app/modules/groups/components/group-details/group-details.component.ts
+++ b/src/app/client/src/app/modules/groups/components/group-details/group-details.component.ts
@@ -27,6 +27,7 @@ export class GroupDetailsComponent implements OnInit, OnDestroy {
isAdmin = false;
layoutConfiguration: any;
activityList;
+ showMemberPopup = false;
config: IGroupMemberConfig = {
showMemberCount: true,
@@ -111,6 +112,10 @@ export class GroupDetailsComponent implements OnInit, OnDestroy {
this.groupService.addTelemetry(id, this.activatedRoute.snapshot, []);
}
+ toggleFtuModal(visibility: boolean = false) {
+ this.showMemberPopup = visibility;
+ }
+
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
diff --git a/src/app/client/src/app/modules/groups/components/group-header/group-header.component.html b/src/app/client/src/app/modules/groups/components/group-header/group-header.component.html
index 442bef2d58e9b5447a2ebf61198cd3eb61246381..a5cf4295400e2550215401588e54042eaea717fd 100644
--- a/src/app/client/src/app/modules/groups/components/group-header/group-header.component.html
+++ b/src/app/client/src/app/modules/groups/components/group-header/group-header.component.html
@@ -57,8 +57,6 @@
</div>
</sui-modal>
-<app-ftu-popup *ngIf="showMemberPopup" [showMemberPopup]="showMemberPopup" (close)="toggleFtuModal(false)">
-</app-ftu-popup>
<app-member-actions *ngIf="showLeaveGroupModal" [action]="'leaveFromGroup'" [groupName]="groupData?.name"
(modalClose)="showLeaveGroupModal=false" (actionConfirm)="leaveGroup()"></app-member-actions>
diff --git a/src/app/client/src/app/modules/groups/components/group-header/group-header.component.spec.ts b/src/app/client/src/app/modules/groups/components/group-header/group-header.component.spec.ts
index 7b0046985a282a4d8e4a1f76a102655940514a66..997d43e2a673ab87e75a06481df541bbdaa69266 100644
--- a/src/app/client/src/app/modules/groups/components/group-header/group-header.component.spec.ts
+++ b/src/app/client/src/app/modules/groups/components/group-header/group-header.component.spec.ts
@@ -129,10 +129,10 @@ describe('GroupHeaderComponent', () => {
expect(component.dropdownContent).toBeFalsy();
});
- it('show change dropdownMenuContent', () => {
- component.showMemberPopup = false;
+ it('show emit closeModal event dropdownMenuContent', () => {
+ spyOn(component.handleFtuModal, 'emit');
component.toggleFtuModal(true);
- expect(component.showMemberPopup).toBeTruthy();
+ expect(component.handleFtuModal.emit).toHaveBeenCalledWith(true);
});
it('should call addTelemetry', () => {
diff --git a/src/app/client/src/app/modules/groups/components/group-header/group-header.component.ts b/src/app/client/src/app/modules/groups/components/group-header/group-header.component.ts
index 022f4a22b68e7898f90762ca347cf46ae3379349..d668bbf81b102350aba6ab95c4834966ec04f576 100644
--- a/src/app/client/src/app/modules/groups/components/group-header/group-header.component.ts
+++ b/src/app/client/src/app/modules/groups/components/group-header/group-header.component.ts
@@ -1,5 +1,5 @@
import { Router, ActivatedRoute } from '@angular/router';
-import { Component, ViewChild, Input, Renderer2, OnInit, OnDestroy } from '@angular/core';
+import { Component, ViewChild, Input, Renderer2, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { ResourceService, NavigationHelperService, ToasterService } from '@sunbird/shared';
import { MY_GROUPS, CREATE_GROUP, GROUP_DETAILS, IGroupCard } from './../../interfaces';
import { GroupsService } from '../../services';
@@ -16,10 +16,10 @@ export class GroupHeaderComponent implements OnInit, OnDestroy {
dropdownContent = true;
@ViewChild('modal') modal;
@Input() groupData: IGroupCard;
+ @Output() handleFtuModal = new EventEmitter();
showModal = false;
showEditModal: boolean;
creator: string;
- showMemberPopup = false;
showLeaveGroupModal = false;
showLoader = false;
private unsubscribe$ = new Subject<void>();
@@ -80,7 +80,7 @@ export class GroupHeaderComponent implements OnInit, OnDestroy {
}
toggleFtuModal(visibility: boolean = false) {
- this.showMemberPopup = visibility;
+ this.handleFtuModal.emit(visibility);
}
addTelemetry(id) {
diff --git a/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html b/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
index 9ef672d70e753f708d80abac64481235f3dd3d0d..76e3683b6b1b7ea8cfdeeb7c21b02fd0426eb092 100644
--- a/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
+++ b/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
@@ -69,13 +69,12 @@
</div>
<div class="sb-g-col-xs-12 sb-g-col-md-3 sb-g-col-lg-3 sb-g-col-xxxl-4 certified-course">
-
- <div class="certified-course__btn">
+ <div class="certified-course__btn" *ngIf="showAddGroup">
<button class="sb-btn sb-btn-secondary sb-btn-normal ml-auto textbook__addbtn"
appAddToGroup [identifier]="courseHierarchy?.identifier" [pageId]="courseHierarchy?.contentType.toLowerCase()">
{{resourceService?.frmelmnts?.lbl?.AddtoGroup}}</button>
</div>
- <!-- join course, start learning, continue learning, view dashboard buttons -->
+ <!-- join course, start learning, continue learning, view dashboard buttons -->
<div *ngIf="!showAddGroup && isTrackable">
<div class="certified-course__btn" *ngIf="!enrolledCourse && !viewDashboard">
<button [disabled]="!(courseConsumptionService.enableCourseEntrollment | async)" [ngClass]="{'sb-btn-disabled': !(courseConsumptionService.enableCourseEntrollment | async)}" class="sb-btn sb-btn-secondary sb-btn-normal ml-auto textbook__addbtn"