mylife: add links to achievements (fixes #7442)

package.json

@@ -1,10 +1,10 @@
 {
  "name": "planet",
  "license": "AGPL-3.0",
- "version": "0.14.37",
+ "version": "0.14.38",
  "myplanet": {
- "latest": "v0.15.50",
- "min": "v0.14.50"
+ "latest": "v0.15.54",
+ "min": "v0.14.54"
  },
  "scripts": {
  "ng": "ng",

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

@@ -75,6 +75,16 @@
  </planet-step-list>
  <button type="button" (click)="addReference()" mat-stroked-button color="primary" i18n>Enter a Reference</button>
  </div>
+ <div>
+ <p class="mat-hint mat-caption" i18n>Add any links below</p>
+ <planet-step-list [steps]="links" [ignoreClick]="true">
+ <planet-step-list-item *ngFor="let link of links.controls; index as i">
+ <span>{{link.value.title}}</span>
+ <button mat-stroked-button type="button" class="margin-lr-4" (click)="addLink(i, link.value)" i18n>Edit</button>
+ </planet-step-list-item>
+ </planet-step-list>
+ <button type="button" (click)="addLink()" mat-stroked-button color="primary" i18n>Enter a Link</button>
+ </div>
  <mat-checkbox formControlName="sendToNation" class="full-width" i18n>
  Allow your achievements to be shared with the nation
  </mat-checkbox>

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

@@ -40,6 +40,9 @@ export class UsersAchievementsUpdateComponent implements OnInit, OnDestroy {
  get references(): FormArray {
  return <FormArray>this.editForm.controls.references;
  }
+ get links(): FormArray {
+ return <FormArray>this.editForm.controls.links;
+ }
  minBirthDate: Date = this.userService.minBirthDate;
 
  constructor(
@@ -67,6 +70,7 @@ export class UsersAchievementsUpdateComponent implements OnInit, OnDestroy {
  this.editForm.patchValue(achievements);
  this.editForm.controls.achievements = this.fb.array(achievements.achievements || []);
  this.editForm.controls.references = this.fb.array(achievements.references || []);
+ this.editForm.controls.links = this.fb.array(achievements.links || []);
  // Keeping older otherInfo property so we don't lose this info on database
  this.editForm.controls.otherInfo = this.fb.array(achievements.otherInfo || []);
  if (this.docInfo._id === achievements._id) {
@@ -92,6 +96,7 @@ export class UsersAchievementsUpdateComponent implements OnInit, OnDestroy {
  achievementsHeader: '',
  achievements: this.fb.array([]),
  references: this.fb.array([]),
+ links: this.fb.array([]),
  // Keeping older otherInfo property so we don't lose this info on database
  otherInfo: this.fb.array([]),
  sendToNation: false,
@@ -113,21 +118,23 @@ export class UsersAchievementsUpdateComponent implements OnInit, OnDestroy {
  });
  }
 
- addAchievement(index = -1, achievement = { title: '', description: '', date: '' }) {
+ addAchievement(index = -1, achievement = { title: '', description: '', link: '', date: '' }) {
  if (typeof achievement === 'string') {
- achievement = { title: '', description: achievement, date: '' };
+ achievement = { title: '', description: achievement, link: '', date: '' };
  }
  this.dialogsFormService.openDialogsForm(
  achievement.title !== '' ? $localize`Edit Achievement` : $localize`Add Achievement`,
  [
  { 'type': 'textbox', 'name': 'title', 'placeholder': $localize`Title`, required: true },
  { 'type': 'date', 'name': 'date', 'placeholder': $localize`Date`, 'required': false },
+ { 'type': 'textbox', 'name': 'link', 'placeholder': $localize`Link`, required: false },
  { 'type': 'textarea', 'name': 'description', 'placeholder': $localize`Description`, 'required': false },
  ],
  this.fb.group({
  ...achievement,
  title: [ achievement.title, CustomValidators.required ],
  description: [ achievement.description ],
+ link: [ achievement.link ],
  date: [ achievement.date, null, ac => this.validatorService.notDateInFuture$(ac) ]
  }),
  { onSubmit: (formValue, formGroup) => {
@@ -159,6 +166,22 @@ export class UsersAchievementsUpdateComponent implements OnInit, OnDestroy {
  );
  }
 
+ addLink(index = -1, link: any = { title: '', url: '' }) {
+ this.dialogsFormService.openDialogsForm(
+ link.title !== '' ? $localize`Edit Link` : $localize`Add Link`,
+ [
+ { 'type': 'textbox', 'name': 'title', 'placeholder': $localize`Link Title`, required: true },
+ { 'type': 'textbox', 'name': 'url', 'placeholder': $localize`URL`, 'required': true }
+ ],
+ this.fb.group({
+ ...link,
+ title: [ link.title, CustomValidators.required ],
+ url: [ link.url, CustomValidators.required ],
+ }),
+ { onSubmit: this.onDialogSubmit(this.links, index), closeOnSubmit: true }
+ );
+ }
+
  onDialogSubmit(formArray, index) {
  return (formValue, formGroup) => {
  if (formValue === undefined) {

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

@@ -42,6 +42,15 @@ <h3 i18n>My Certifications</h3>
  </mat-list>
  </div>
  </ng-container>
+ <div *ngIf="achievements?.links?.length > 0">
+ <h3 i18n>My Links</h3>
+ <mat-list>
+ <mat-list-item class="mat-list-item-word-wrap" *ngFor="let link of achievements.links">
+ <h4 mat-line>{{link.title}}:</h4>
+ <a href="{{link.url}}" target="_blank" class="styled-link"> {{link.url}} </a>
+ </mat-list-item>
+ </mat-list>
+ </div>
  <div *ngIf="achievements.achievementsHeader || achievements.achievements.length > 0">
  <h3 i18n>My Achievements</h3>
  <td-markdown [content]="achievements.achievementsHeader"></td-markdown>
@@ -56,7 +65,10 @@ <h3 i18n>My Achievements</h3>
  </span>
  <span class="achievement-date">{{achievement.date | date: medium}}</span>
  </p>
- <p mat-line *ngIf="openAchievementIndex === i">{{achievement.description}}</p>
+ <p mat-line *ngIf="openAchievementIndex === i">
+ {{achievement.description}}
+ <br><a href="{{achievement.link}}" target="_blank" class="styled-link"> - {{achievement.link}} </a>
+ </p>
  <span mat-line class="achievement-buttons" *ngIf="openAchievementIndex === i"></span>
  </mat-list-item>
  </mat-list>

src/app/users/users-achievements/users-achievements.scss

@@ -44,4 +44,15 @@
  }
 
  }
+
+ .styled-link {
+ color: #007bff;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ .styled-link:hover {
+ color: #0056b3;
+ text-decoration: underline;
+ }
 }