mylife: smoother achievements sharing (fixes #8082) (#8095)

Co-authored-by: dogi <[email protected]>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.60",
+  "version": "0.16.61",
   "myplanet": {
     "latest": "v0.22.7",
     "min": "v0.21.7"

src/app/users/users-achievements/users-achievements.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar>
+<mat-toolbar *ngIf="!publicView">
   <button mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
   <span i18n>Achievements</span>
   <span class="toolbar-fill"></span>
@@ -19,14 +19,17 @@
         <span *ngIf="achievementNotFound" i18n>Add Achievements</span>
         <span *ngIf="!achievementNotFound" i18n>Edit Achievements</span>
       </a>
+      <button mat-icon-button matTooltip="Copy Achievements Link" i18n-matTooltip (click)="copyLink()">
+        <mat-icon>link</mat-icon>
+      </button>
     </div>
   </mat-toolbar>
   <div class="view-container">
     <div *ngIf="achievements !== undefined" class="achievements-container">
       <div class="user-info">
         <img class="profile-image" [src]="profileImg">
         <h2>{{user.firstName}} {{user.middleName}} {{user.lastName}}</h2>
-        <div class="birth-info">
+        <div class="birth-info" *ngIf="!publicView">
           <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>

src/app/users/users-achievements/users-achievements.component.ts

@@ -1,6 +1,7 @@
 import { format } from 'date-fns';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Clipboard } from '@angular/cdk/clipboard';
 import { CouchService } from '../../shared/couchdb.service';
 import { UserService } from '../../shared/user.service';
 import { PlanetMessageService } from '../../shared/planet-message.service';
@@ -29,6 +30,7 @@ export class UsersAchievementsComponent implements OnInit {
   urlPrefix = environment.couchAddress + '/_users/org.couchdb.user:' + this.userService.get().name + '/';
   openAchievementIndex = -1;
   certifications: any[] = [];
+  publicView = this.route.snapshot.data.requiresAuth === false;
 
   constructor(
     private couchService: CouchService,
@@ -39,7 +41,8 @@ export class UsersAchievementsComponent implements OnInit {
     private usersAchievementsService: UsersAchievementsService,
     private stateService: StateService,
     private coursesService: CoursesService,
-    private certificationsService: CertificationsService
+    private certificationsService: CertificationsService,
+    private clipboard: Clipboard
   ) { }
 
   ngOnInit() {
@@ -122,6 +125,11 @@ export class UsersAchievementsComponent implements OnInit {
     });
   }
 
+  copyLink() {
+    const link = `${window.location.origin}/profile/${this.user.name}/achievements;planet=${this.stateService.configuration.code}`;
+    this.clipboard.copy(link);
+  }
+
   generatePDF() {
     const formattedBirthDate = format(new Date(this.user.birthDate), 'MMM d, y');
     let contentArray = [

src/app/users/users-achievements/users-achievements.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MaterialModule } from '../../shared/material.module';
 import { PlanetFormsModule } from '../../shared/forms/planet-forms.module';
 import { SharedComponentsModule } from '../../shared/shared-components.module';
@@ -10,7 +11,7 @@ import { UsersAchievementsUpdateComponent } from './users-achievements-update.co
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, ReactiveFormsModule, RouterModule, MaterialModule, PlanetFormsModule, SharedComponentsModule
+    CommonModule, FormsModule, ReactiveFormsModule, RouterModule, MaterialModule, PlanetFormsModule, SharedComponentsModule, ClipboardModule
   ],
   exports: [
     UsersAchievementsUpdateComponent,

src/app/users/users-profile/users-profile.component.html

@@ -1,13 +1,3 @@
-<mat-toolbar *ngIf="!isDialog">
-  <mat-toolbar-row>
-    <button mat-icon-button (click)="goBack()">
-      <mat-icon>arrow_back</mat-icon>
-    </button>
-    <span i18n>Member Profile</span>
-    <span class="toolbar-fill"></span>
-  </mat-toolbar-row>
-</mat-toolbar>
-
 <div class="space-container">
   <mat-toolbar class="primary-color font-size-1">
     <span>{{userDetail.name}}</span>

src/app/users/users-router.module.ts

@@ -13,7 +13,7 @@ const routes: Routes = [
   { path: 'delete/request', component: UsersArchiveComponent },
   { path: 'profile/:name', component: UsersProfileComponent },
   { path: 'update/:name', component: UsersUpdateComponent },
-  { path: 'profile/:name/achievements', component: UsersAchievementsComponent },
+  { path: 'profile/:name/achievements', component: UsersAchievementsComponent, data: { requiresAuth: false } },
   { path: 'profile/:name/achievements/update', component: UsersAchievementsUpdateComponent },
   { path: 'submission', component: UsersUpdateComponent, data: { submission: true } }
 ];