mylife: smoother myachievements (fixes #7639) (#7806)

Co-authored-by: mutugiii <[email protected]> Co-authored-by: dogi <[email protected]>
open-learning-exchange · Nov 26, 2024 · 5401d9d · 5401d9d
1 parent efb22c1
commit 5401d9d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.68",
+  "version": "0.15.69",
   "myplanet": {
     "latest": "v0.21.11",
     "min": "v0.20.11"

diff --git a/src/app/users/users-achievements/users-achievements.component.html b/src/app/users/users-achievements/users-achievements.component.html
@@ -23,19 +23,25 @@
   </mat-toolbar>
   <div class="view-container">
     <div *ngIf="achievements !== undefined" class="achievements-container">
-      <h2>{{user.firstName}} {{user.middleName}} {{user.lastName}}</h2>
-      <div>
-        <ng-container *ngIf="user.birthDate"><span i18n>Birthdate: {{' ' + (user.birthDate | date: medium) + ' '}}</span></ng-container><br/><br/>
-        <span *ngIf="user.birthplace" i18n>Birthplace: {{' ' + user.birthplace}} </span>
+      <div class="user-info">
+        <img class="profile-image" [src]="profileImg">
+        <h2>{{user.firstName}} {{user.middleName}} {{user.lastName}}</h2>
+        <div class="birth-info">
+          <ng-container *ngIf="user.birthDate"><span i18n>Birthdate: {{' ' + (user.birthDate | date: medium) + ' '}}</span></ng-container><br/><br/>
+          <span *ngIf="user.birthplace" i18n>Birthplace: {{' ' + user.birthplace}} </span>
+        </div>
       </div>
+      <mat-divider></mat-divider>
       <div *ngIf="achievements.purpose">
         <h3 i18n>My Purpose</h3>
         <td-markdown [content]="achievements.purpose"></td-markdown>
       </div>
+      <mat-divider></mat-divider>
       <div *ngIf="achievements.goals">
         <h3 i18n>My Goals</h3>
         <td-markdown [content]="achievements.goals"></td-markdown>
       </div>
+      <mat-divider></mat-divider>
       <ng-container *planetBeta>
         <div *ngIf="certifications.length > 0">
           <h3 i18n>My Certifications</h3>
@@ -46,6 +52,7 @@ <h3 i18n>My Certifications</h3>
           </mat-list>
         </div>
       </ng-container>
+      <mat-divider></mat-divider>
       <div *ngIf="achievements?.links?.length > 0">
         <h3 i18n>My Links</h3>
         <mat-list>
@@ -55,6 +62,7 @@ <h4 mat-line>{{link.title}}:</h4>
           </mat-list-item>
         </mat-list>
       </div>
+      <mat-divider></mat-divider>
       <div *ngIf="achievements.achievementsHeader || achievements.achievements.length > 0">
         <h3 i18n>My Achievements</h3>
         <td-markdown [content]="achievements.achievementsHeader"></td-markdown>
@@ -77,6 +85,7 @@ <h3 i18n>My Achievements</h3>
           </mat-list-item>
         </mat-list>
       </div>
+      <mat-divider></mat-divider>
       <div *ngIf="achievements.references.length > 0">
         <h3 i18n>My References</h3>
         <mat-list class="references-list">

diff --git a/src/app/users/users-achievements/users-achievements.component.ts b/src/app/users/users-achievements/users-achievements.component.ts
@@ -9,6 +9,7 @@ import { catchError, auditTime } from 'rxjs/operators';
 import { throwError, combineLatest } from 'rxjs';
 import { StateService } from '../../shared/state.service';
 import { CoursesService } from '../../courses/courses.service';
+import { environment } from '../../../environments/environment';
 import { CertificationsService } from '../../manager-dashboard/certifications/certifications.service';
 
 const pdfMake = require('pdfmake/build/pdfmake');
@@ -25,6 +26,7 @@ export class UsersAchievementsComponent implements OnInit {
   achievements: any;
   achievementNotFound = false;
   ownAchievements = false;
+  urlPrefix = environment.couchAddress + '/_users/org.couchdb.user:' + this.userService.get().name + '/';
   openAchievementIndex = -1;
   certifications: any[] = [];
 
@@ -103,6 +105,14 @@ export class UsersAchievementsComponent implements OnInit {
     return achievement.description.length > 0;
   }
 
+  get profileImg() {
+    const attachments = this.userService.get()._attachments;
+    if (attachments) {
+      return this.urlPrefix + Object.keys(attachments)[0];
+    }
+    return 'assets/image.png';
+  }
+
   setCertifications(courses = [], progress = [], certifications = []) {
     this.certifications = certifications.filter(certification => {
       const certificateCourses = courses

diff --git a/src/app/users/users-achievements/users-achievements.scss b/src/app/users/users-achievements/users-achievements.scss
@@ -1,9 +1,8 @@
 @import '../../variables';
 
 .achievements-container {
-  max-width: 800px;
+  max-width: 95%;
   margin: 0 auto;
-  text-align: center;
 
   .references-list {
     display: flex;
@@ -21,6 +20,41 @@
     text-align: left;
   }
 
+  mat-divider {
+    margin-top: 1rem;
+    background-color: $primary;
+  }
+
+  .profile-image{
+    max-width: 15vh;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+  }
+
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-bottom: 2rem;
+   }
+
+   .birth-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+   }
+
+   .logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem;
+   }
+
   .mat-list-base .mat-list-item {
     &.mat-list-item-word-wrap {
       height: initial;
@@ -56,7 +90,6 @@
         margin-right: 0;
       }
     }
-
   }
 
   .styled-link {
@@ -100,7 +133,7 @@
     gap: 0.2rem;
     width: 100%;
   }
-  
+
   .auto-adjust-buttons a {
     flex-grow: 1;
     text-align: center;