Issue #SH-31 merge: Merge pull request #998 from balakrishna10/releas…

…e-3.1.0 Issue #SH-31 feat: Activity details page
Sunbird-Ed · Jun 29, 2020 · bc5d630 · bc5d630
2 parents 5eebeb5 + fbe8204
commit bc5d630
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 18 deletions.
diff --git a/src/app/my-groups/activity-details/activity-details.module.ts b/src/app/my-groups/activity-details/activity-details.module.ts
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 
 import { ActivityDetailsPage } from './activity-details.page';
 import { CommonConsumptionModule } from '@project-sunbird/common-consumption';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes: Routes = [
   {
@@ -21,6 +22,7 @@ const routes: Routes = [
     FormsModule,
     IonicModule,
     CommonConsumptionModule,
+    TranslateModule.forChild(),
     RouterModule.forChild(routes)
   ],
   declarations: [ActivityDetailsPage]

diff --git a/src/app/my-groups/activity-details/activity-details.page.html b/src/app/my-groups/activity-details/activity-details.page.html
@@ -1,3 +1,20 @@
 <ion-content>
-  <sb-course-card [section]="null"></sb-course-card>
+  <div class="ad-container">
+    <sb-course-card [section]="null"></sb-course-card>
+    <div class="gd-member-search">
+      <ion-icon class="gd-member-search-icon" md="md-search"></ion-icon>
+      <input type="text" [(ngModel)]="searchMember" (ngModelChange)="onSearch(searchMember)" placeholder="{{'SEARCH_FOR_GROUP_MEMBER' | translate}}">
+    </div>
+    <div class="ad-timestamp" [innerHTML]="'LAST_UPDATED' | translate:  {'%s': timeStamp || 'time' }">
+    </div>
+    <div class="ad-mebers-container">
+      <div *ngFor="let member of memberList">
+        <sb-member-card [config]="{size:'medium', isBold:false, isSelectable:false, view:'horizontal'}"
+          [identifier]="member.identifier" [initial]="member.initial" [title]="member.title" [isMenu]="member.isMenu"
+          [isAdmin]="member.isAdmin" (menuClick)="memberMenuClick($event)">
+        </sb-member-card>
+      </div>
+    </div>
+  </div>
+
 </ion-content>
diff --git a/src/app/my-groups/activity-details/activity-details.page.scss b/src/app/my-groups/activity-details/activity-details.page.scss
@@ -0,0 +1,30 @@
+@import "src/assets/styles/_variables.scss";
+.ad-container{
+    padding: 16px;
+}
+.gd-member-search {
+    position: relative;
+    margin: 8px 0;
+    .gd-member-search-icon {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        font-size: 20px;
+        color: $gray-400;
+    }
+    input {
+        width: 100%;
+        height: 35px;
+        padding: 0 8px 0 30px;
+        border: 1px solid $blue;
+        border-radius: 4px;
+    }
+}
+.ad-timestamp{
+    color: $gray-300;
+    padding: 8px 0;
+    text-align: right;
+}
+.ad-mebers-container{
+    box-shadow: 0 2px 7px 0 rgba(0,0,0,0.25);
+}
diff --git a/src/app/my-groups/activity-details/activity-details.page.ts b/src/app/my-groups/activity-details/activity-details.page.ts
@@ -1,13 +1,20 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-activity-details',
   templateUrl: './activity-details.page.html',
   styleUrls: ['./activity-details.page.scss'],
 })
 export class ActivityDetailsPage implements OnInit {
-
-  constructor() { }
+  memberList: any;
+  constructor(
+    private router: Router
+  ) {
+    const extras = this.router.getCurrentNavigation().extras.state;
+    this.memberList = extras.memberList;
+    console.log('memberList', this.memberList);
+  }
 
   ngOnInit() {
   }

diff --git a/src/app/my-groups/create-edit-group/create-edit-group.page.html b/src/app/my-groups/create-edit-group/create-edit-group.page.html
@@ -6,13 +6,13 @@
       'cr-input-error': ((createGroupFormControls.groupName.touched || createGroupFormSubmitted) && createGroupFormControls.groupName.errors?.required)}">
       <ion-label position="stacked" class="label-font align-text">{{'GROUP_NAME' | translate }}<sup>*</sup></ion-label>
       <ion-input formControlName="groupName" maxlength="50" placeholder="{{'ENTER_GROUP_NAME' | translate}}"></ion-input>
-      <span class="char-info" *ngIf="!((createGroupFormControls.groupName.touched || createGroupFormSubmitted) && createGroupFormControls.groupName.errors?.required)">{{50 - createGroupFormControls.groupName.value?.length}} {{'CHARECTERS_REMAINING' | translate}}</span>
+      <span class="char-info" *ngIf="!((createGroupFormControls.groupName.touched || createGroupFormSubmitted) && createGroupFormControls.groupName.errors?.required)">{{50 - createGroupFormControls.groupName.value?.length}} {{'CHARACTERS_REMAINING' | translate}}</span>
       <span *ngIf="(createGroupFormControls.groupName.touched || createGroupFormSubmitted) && createGroupFormControls.groupName.errors?.required" class="cr-error">{{ errorMessages.groupName.message | translate }}</span>
     </ion-item>
     <ion-item class="input-item cr-input-primary">
       <ion-label position="stacked" class="label-font align-text">{{'GROUP_DESCRIPTION' | translate }}</ion-label>
       <ion-textarea class="cr-desc" formControlName="groupDesc" maxlength="150" rows="4" placeholder="{{'GROUP_DESCRIPTION_PLACEHOLDER' | translate}}"></ion-textarea>
-      <span class="char-info">{{150 - createGroupFormControls.groupDesc.value?.length}} {{'CHARECTERS_REMAINING' | translate}}</span>
+      <span class="char-info">{{150 - createGroupFormControls.groupDesc.value?.length}} {{'CHARACTERS_REMAINING' | translate}}</span>
     </ion-item>
     <div>
       <ion-item class="input-item cr-input-primary" lines="none">

diff --git a/src/app/my-groups/group-details/group-details.page.scss b/src/app/my-groups/group-details/group-details.page.scss
@@ -16,34 +16,31 @@
 
         .gd-name {
             padding-right: 60px;
-            color: #333333;
+            color: $gray-800;
             font-family: "Noto Sans";
             font-size: 16px;
             font-weight: bold;
             letter-spacing: 0;
             line-height: 20px;
 
             .gd-created-by {
-                color: #666666;
+                color: $gray-400;
                 font-family: "Noto Sans";
                 font-size: 11px;
                 letter-spacing: 0;
                 line-height: 20px;
             }
         }
 
-
         .gd-opts {
             position: absolute;
             right: 8px;
             top: 16px;
-
             .add-member-icon {
                 position: relative;
                 bottom: 6px;
                 margin-right: 8px;
             }
-
             ion-icon {
                 color: $blue;
             }
@@ -62,7 +59,6 @@
 
         &.active {
             border-bottom: 2px solid $blue;
-
             .gd-tab-name {
                 font-weight: bold;
             }
@@ -74,7 +70,7 @@
         text-align: center;
         margin-bottom: 5px;
         margin-top: 8px;
-        color: #024f9d;
+        color: $blue;
         font-size: 16px;
 
         &.gd-tab-border {
@@ -86,21 +82,21 @@
 .gd-member-search {
     position: relative;
     margin: 8px 0;
-    border: 1px solid $blue;
-    border-radius: 4px;
 
     .gd-member-search-icon {
         position: absolute;
         top: 8px;
         left: 8px;
         font-size: 20px;
-        color: #969696;
+        color: $gray-400;
     }
 
     input {
         width: 100%;
         height: 35px;
         padding: 0 8px 0 30px;
+        border: 1px solid $blue;
+        border-radius: 4px;
     }
 }
 

diff --git a/src/app/my-groups/group-details/group-details.page.ts b/src/app/my-groups/group-details/group-details.page.ts
@@ -408,7 +408,8 @@ export class GroupDetailsPage {
   navigateToActivityDetails() {
     const navigationExtras: NavigationExtras = {
       state: {
-        groupId: this.groupId
+        groupId: this.groupId,
+        memberList: this.memberList
       }
     };
     this.router.navigate([`/${RouterLinks.MY_GROUPS}/${RouterLinks.ACTIVITY_DETAILS}`], navigationExtras);

diff --git a/src/app/my-groups/my-groups.page.scss b/src/app/my-groups/my-groups.page.scss
@@ -28,6 +28,10 @@
   box-shadow: 0 3px 5px 4px rgba(0,0,0,0.05);
   margin: 0 8px;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  height: 80vh;
+  justify-content: space-between;
 }
 
 .my-cr-card-img{

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -782,8 +782,10 @@
   "EXP_VIDEOS": "explanation videos",
   "QUES_BANKS": "question banks",
   "INTERACTIVE_MATERIAL": "interactive study material",
-  "CHARECTERS_REMAINING": "Charecters remaining",
+  "CHARACTERS_REMAINING": "Characters remaining",
   "WHAT_IS_MEMBER_ID": "What is a DIKSHA ID? ",
   "I_AGREE_TO": "I agree to",
-  "TERMS_OF_SERVICES": "terms of services"
+  "TERMS_OF_SERVICES": "terms of services",
+  "LAST_UPDATED": "Last updated: {{%s}}%",
+  "SEARCH_FOR_GROUP_MEMBER": "Search for group member"
 }