Implement typeahead

lkleisa · lkleisa · commit 64bf3a473895 · 2024-05-01T15:20:47.000+02:00
diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
@@ -68,25 +68,26 @@
           </div>
 
           <div class="d-flex flex-column gap-2 col-6">
-            <label class="text-black" for="alignment">Bezug (optional)</label>
-            <select
-              class="custom-select bg-white select-width"
+            <label class="text-black">Bezug (optional)</label>
+            <input
+              #input
+              type="text"
               formControlName="alignment"
-              id="alignment"
-              (change)="changeFirstAlignmentPossibility()"
-              [attr.data-testId]="'alignmentSelect'"
-            >
-              <ng-container *ngFor="let alignment of alignmentPossibilities$ | async; let i = index">
-                <option [value]="'O' + alignment.objectiveId">
-                  {{ alignment.objectiveTitle }}
-                </option>
-                <ng-container *ngFor="let keyResult of alignment.keyResultAlignmentsDtos; let i = index">
-                  <option [value]="'K' + keyResult.keyResultId">
-                    {{ keyResult.keyResultTitle }}
-                  </option>
-                </ng-container>
-              </ng-container>
-            </select>
+              class="custom-select bg-white select-width"
+              placeholder="Bezug wählen"
+              [matAutocomplete]="auto"
+              (input)="filter()"
+              (focus)="filter(); input.select()"
+              [value]="displayedValue"
+            />
+            <mat-autocomplete requireSelection #auto="matAutocomplete" [displayWith]="displayWith">
+              @for (option of filteredOptions; track option) {
+                <mat-option [value]="option">{{ option.objectiveTitle }}</mat-option>
+                @for (kroption of option.keyResultAlignmentsDtos; track kroption) {
+                  <mat-option [value]="kroption">{{ kroption.keyResultTitle }}</mat-option>
+                }
+              }
+            </mat-autocomplete>
           </div>
         </div>
         <mat-checkbox
diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.ts b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Quarter } from '../../types/model/Quarter';
 import { TeamService } from '../../services/team.service';
@@ -24,12 +24,15 @@ import { AlignmentPossibility } from '../../types/model/AlignmentPossibility';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ObjectiveFormComponent implements OnInit {
+  @ViewChild('input') input!: ElementRef<HTMLInputElement>;
+  filteredOptions: AlignmentPossibility[] = [];
+
   objectiveForm = new FormGroup({
     title: new FormControl<string>('', [Validators.required, Validators.minLength(2), Validators.maxLength(250)]),
     description: new FormControl<string>('', [Validators.maxLength(4096)]),
     quarter: new FormControl<number>(0, [Validators.required]),
     team: new FormControl<number>({ value: 0, disabled: true }, [Validators.required]),
-    alignment: new FormControl<string>(''),
+    alignment: new FormControl<AlignmentPossibility | null>(null),
     createKeyResults: new FormControl<boolean>(false),
   });
   quarters$: Observable<Quarter[]> = of([]);
@@ -65,6 +68,19 @@ export class ObjectiveFormComponent implements OnInit {
   onSubmit(submitType: any): void {
     const value = this.objectiveForm.getRawValue();
     const state = this.data.objective.objectiveId == null ? submitType : this.state;
+
+    let alignmentEntity: string | null = '';
+    let alignment: any = value.alignment;
+    if (alignment) {
+      if (alignment?.objectiveId) {
+        alignmentEntity = 'O' + alignment.objectiveId;
+      } else {
+        alignmentEntity = 'K' + alignment.keyResultId;
+      }
+    } else {
+      alignmentEntity = null;
+    }
+
     let objectiveDTO: Objective = {
       id: this.data.objective.objectiveId,
       version: this.version,
@@ -73,7 +89,7 @@ export class ObjectiveFormComponent implements OnInit {
       title: value.title,
       teamId: value.team,
       state: state,
-      alignedEntityId: value.alignment == 'Onull' ? null : value.alignment,
+      alignedEntityId: alignmentEntity,
     } as unknown as Objective;
 
     const submitFunction = this.getSubmitFunction(objectiveDTO.id, objectiveDTO);
@@ -106,14 +122,15 @@ export class ObjectiveFormComponent implements OnInit {
       this.teams$.subscribe((value) => {
         this.currentTeam.next(value.filter((team) => team.id == teamId)[0]);
       });
-      this.generateAlignmentPossibilities(quarterId);
+      this.generateAlignmentPossibilities(quarterId, objective);
 
       this.objectiveForm.patchValue({
         title: objective.title,
         description: objective.description,
         team: teamId,
         quarter: quarterId,
-        alignment: objective.alignedEntityId ? objective.alignedEntityId : 'Onull',
+        // alignment: null,
+        // alignment: objective.alignedEntityId ? objective.alignedEntityId : 'Onull',
       });
     });
   }
@@ -238,47 +255,110 @@ export class ObjectiveFormComponent implements OnInit {
     return GJ_REGEX_PATTERN.test(label);
   }
 
-  generateAlignmentPossibilities(quarterId: number) {
+  generateAlignmentPossibilities(quarterId: number, objective: Objective | null) {
     this.alignmentPossibilities$ = this.objectiveService.getAlignmentPossibilities(quarterId);
     this.alignmentPossibilities$.subscribe((value: AlignmentPossibility[]) => {
       if (this.objective?.id) {
         value = value.filter((item: AlignmentPossibility) => !(item.objectiveId == this.objective!.id));
       }
-      let firstSelectOption = {
-        objectiveId: null,
-        objectiveTitle: 'Kein Alignment',
-        keyResultAlignmentsDtos: [],
-      };
-      if (value.length != 0) {
-        if (this.objective?.alignedEntityId) {
-          if (value[0].objectiveTitle == 'Bitte wählen') {
-            value.splice(0, 1);
+      // let firstSelectOption = {
+      //   objectiveId: null,
+      //   objectiveTitle: 'Kein Alignment',
+      //   keyResultAlignmentsDtos: [],
+      // };
+      // if (value.length != 0) {
+      //   if (this.objective?.alignedEntityId) {
+      //     if (value[0].objectiveTitle == 'Bitte wählen') {
+      //       value.splice(0, 1);
+      //     }
+      //   } else {
+      //     firstSelectOption.objectiveTitle = 'Bitte wählen';
+      //   }
+      // }
+      // value.unshift(firstSelectOption);
+
+      if (objective) {
+        let alignment = objective.alignedEntityId;
+        if (alignment) {
+          let alignmentType = alignment.charAt(0);
+          let alignmentId = parseInt(alignment.substring(1));
+          if (alignmentType == 'O') {
+            let element = value.find((ap) => ap.objectiveId == alignmentId) || null;
+            this.objectiveForm.patchValue({
+              alignment: element,
+            });
+          } else {
+            for (let objectiveAlignment of value) {
+              let keyResult = objectiveAlignment.keyResultAlignmentsDtos.find((kr) => kr.keyResultId == alignmentId);
+              if (keyResult) {
+                // TODO change this to keyresult
+                this.objectiveForm.patchValue({
+                  alignment: objectiveAlignment,
+                });
+              }
+            }
           }
-        } else {
-          firstSelectOption.objectiveTitle = 'Bitte wählen';
         }
+      } else {
+        this.objectiveForm.patchValue({
+          alignment: null,
+        });
       }
-      value.unshift(firstSelectOption);
+
+      this.filteredOptions = value.slice();
       this.alignmentPossibilities$ = of(value);
     });
   }
 
   updateAlignments() {
-    this.generateAlignmentPossibilities(this.objectiveForm.value.quarter!);
-    this.objectiveForm.patchValue({
-      alignment: 'Onull',
-    });
+    this.generateAlignmentPossibilities(this.objectiveForm.value.quarter!, null);
+    // this.objectiveForm.patchValue({
+    //   alignment: 'Onull',
+    // });
   }
 
-  changeFirstAlignmentPossibility() {
-    this.alignmentPossibilities$.subscribe((value: AlignmentPossibility[]) => {
-      let element: AlignmentPossibility = value[0];
-      element.objectiveTitle = 'Kein Alignment';
-      value.splice(0, 1);
-      value.unshift(element);
-      this.alignmentPossibilities$ = of(value);
+  // changeFirstAlignmentPossibility() {
+  //   this.alignmentPossibilities$.subscribe((value: AlignmentPossibility[]) => {
+  //     let element: AlignmentPossibility = value[0];
+  //     element.objectiveTitle = 'Kein Alignment';
+  //     value.splice(0, 1);
+  //     value.unshift(element);
+  //     this.alignmentPossibilities$ = of(value);
+  //   });
+  // }
+
+  filter() {
+    let filterValue = this.input.nativeElement.value.toLowerCase();
+    this.alignmentPossibilities$.subscribe((value) => {
+      // this.filteredOptions = value.filter((o) => o.objectiveTitle.toLowerCase().includes(filterValue));
+      this.filteredOptions = value.filter(
+        (o) =>
+          o.objectiveTitle.toLowerCase().includes(filterValue) || // Check if objectiveTitle includes the filterValue
+          o.keyResultAlignmentsDtos.some((kr) => kr.keyResultTitle.toLowerCase().includes(filterValue)), // Check if any keyResultTitle includes the filterValue
+      );
     });
   }
 
+  displayWith(value: any): string {
+    if (value) {
+      if (value.objectiveId) {
+        return value.objectiveTitle;
+      } else {
+        return value.keyResultTitle;
+      }
+    } else {
+      return 'Bitte wählen';
+    }
+  }
+
+  get displayedValue(): string {
+    if (this.input) {
+      const inputValue = this.input.nativeElement.value;
+      return inputValue.length > 40 ? inputValue.slice(0, 40) + '...' : inputValue;
+    } else {
+      return '';
+    }
+  }
+
   protected readonly getQuarterLabel = getQuarterLabel;
 }
