Skip to content

Commit

Permalink
Implement typeahead
Browse files Browse the repository at this point in the history
  • Loading branch information
@lkleisa
lkleisa committed May 1, 2024
1 parent d04f222 commit 64bf3a4
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 47 deletions.
37 changes: 19 additions & 18 deletions frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
138 changes: 109 additions & 29 deletions frontend/src/app/shared/dialog/objective-dialog/objective-form.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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([]);
Expand Down Expand Up @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -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',
});
});
}
Expand Down Expand Up @@ -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;
}

0 comments on commit 64bf3a4

Please sign in to comment.