community: smoother services forms linking (fixes #9413)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.21.21",
+  "version": "0.21.22",
   "myplanet": {
     "latest": "v0.42.56",
     "min": "v0.37.60"

src/app/community/community-link-dialog.component.ts

@@ -1,26 +1,48 @@
 import { Component, ViewChild, Inject } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { NonNullableFormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { MatStepper } from '@angular/material/stepper';
+import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { CustomValidators } from '../validators/custom-validators';
 import { TeamsService } from '../teams/teams.service';
 import { switchMap } from 'rxjs/operators';
 import { ValidatorService } from '../validators/validator.service';
 import { PlanetMessageService } from '../shared/planet-message.service';
 
+interface CommunityLinkForm {
+  title: FormControl<string>;
+  route: FormControl<string>;
+  linkId: FormControl<string>;
+  teamType: FormControl<string>;
+  icon: FormControl<string>;
+  platform: FormControl<string>;
+}
+
+type CommunityLinkSelection = {
+  db: 'teams' | 'social';
+  title: string;
+  selector?: { type: 'team' | 'enterprise' };
+};
+
+type TeamSelectionEvent = {
+  mode: 'team' | 'enterprise';
+  teamId: string;
+  teamType: string;
+};
+
 @Component({
   templateUrl: './community-link-dialog.component.html',
 })
 export class CommunityLinkDialogComponent {
 
   @ViewChild('linkStepper') linkStepper: MatStepper;
-  selectedLink: { db, title, selector? };
-  links: { db, title, selector? }[] = [
+  selectedLink?: CommunityLinkSelection;
+  links: CommunityLinkSelection[] = [
     { db: 'teams', title: $localize`Teams`, selector: { type: 'team' } },
     { db: 'teams', title: $localize`Enterprises`, selector: { type: 'enterprise' } },
     { db: 'social', title: $localize`Web & Social` }
   ];
-  linkForm: UntypedFormGroup;
+  linkForm: FormGroup<CommunityLinkForm>;
   socialPlatforms = [
     { value: 'instagram', label: 'Instagram' },
     { value: 'facebook', label: 'Facebook' },
@@ -35,22 +57,29 @@ export class CommunityLinkDialogComponent {
   constructor(
     private dialogRef: MatDialogRef<CommunityLinkDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
-    private fb: UntypedFormBuilder,
+    private fb: NonNullableFormBuilder,
     private teamsService: TeamsService,
     private planetMessageService: PlanetMessageService,
     private validatorService: ValidatorService
   ) {
     this.linkForm = this.fb.group({
-      title: [ '', CustomValidators.required, ac => this.validatorService.isUnique$('teams', 'title', ac, {}) ],
-      route: [ '', CustomValidators.required ],
-      linkId: '',
-      teamType: '',
-      icon: '',
-      platform: ''
+      title: this.fb.control('', {
+        validators: [CustomValidators.required],
+        asyncValidators: [ac => this.validatorService.isUnique$('teams', 'title', ac, {})]
+      }),
+      route: this.fb.control('', { validators: [CustomValidators.required] }),
+      linkId: this.fb.control(''),
+      teamType: this.fb.control(''),
+      icon: this.fb.control(''),
+      platform: this.fb.control('')
     });
   }
 
-  teamSelect({ mode, teamId, teamType }) {
+  get linkTitleForm(): FormControl<string> {
+    return this.linkForm.controls.title;
+  }
+
+  teamSelect({ mode, teamId, teamType }: TeamSelectionEvent) {
     this.linkForm.controls.route.setValue(this.teamsService.teamLinkRoute(mode, teamId));
     this.linkForm.controls.linkId.setValue(teamId);
     this.linkForm.controls.teamType.setValue(teamType);
@@ -59,15 +88,24 @@ export class CommunityLinkDialogComponent {
     this.linkStepper.next();
   }
 
-  linkStepperChange({ selectedIndex }) {
+  linkStepperChange({ selectedIndex }: StepperSelectionEvent) {
     if (selectedIndex === 0 && this.linkForm.pristine !== true) {
-      this.linkForm.reset();
+      this.linkForm.reset({
+        title: '',
+        route: '',
+        linkId: '',
+        teamType: '',
+        icon: '',
+        platform: ''
+      });
     }
   }
 
   linkSubmit() {
-    const linkTitle = this.linkForm.get('title')?.value;
-    this.teamsService.createServicesLink(this.linkForm.value).pipe(
+    const linkTitle = this.linkForm.controls.title.value;
+    const link = this.linkForm.getRawValue();
+
+    this.teamsService.createServicesLink(link).pipe(
       switchMap(() => this.data.getLinks())
     ).subscribe({
       next: () => {