Support the creation of general achievement page links

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,
@@ -161,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.scss

@@ -52,7 +52,7 @@
  }
 
  .styled-link:hover {
-  color: #0056b3;
-  text-decoration: underline;
+ color: #0056b3;
+ text-decoration: underline;
  }
 }