show create icon only if not existing

puzzle · Jan 27, 2025 · 3c930c9 · 3c930c9
1 parent 92bd19a
commit 3c930c9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/frontend/src/app/components/key-result-type/key-result-type.component.html b/frontend/src/app/components/key-result-type/key-result-type.component.html
@@ -45,7 +45,7 @@
             (opened)="setUnits()"
             [displayWith]="displayFn"
           >
-            <mat-option (click)="createNew()" *ngIf="(this.filteredUnitOptions | async)?.length === 0">Create new</mat-option>
+            <mat-option (click)="createNewUnit()" *ngIf="canCreate((this.filteredUnitOptions | async)!)">Create new</mat-option>
 
             <mat-option *ngFor="let unit of this.filteredUnitOptions | async" [value]="unit">
               {{unit.unitName}}

diff --git a/frontend/src/app/components/key-result-type/key-result-type.component.ts b/frontend/src/app/components/key-result-type/key-result-type.component.ts
@@ -157,7 +157,7 @@ export class KeyResultTypeComponent implements AfterContentInit {
     }), map((value) => this._filter(value || '')));
   }
 
-  createNew() {
+  createNewUnit() {
     const newUnit = { unitName: this.unitSearchTerm };
     this.unitOptions.push(newUnit);
     this.keyResultForm.get('metric')
@@ -166,7 +166,6 @@ export class KeyResultTypeComponent implements AfterContentInit {
   }
 
   private _filter(value: string): Unit[] {
-    console.log(value === '');
     const filterValue = value.toString()
       .toLowerCase();
     return this.unitOptions.filter((option) => option.unitName.toLowerCase()
@@ -182,5 +181,16 @@ export class KeyResultTypeComponent implements AfterContentInit {
           ?.updateValueAndValidity();
       });
   }
+
+  canCreate(options: Unit[]) {
+    const rawValue = this.keyResultForm.get('metric')
+      ?.get('unit')
+      ?.getRawValue();
+    const value = rawValue?.unitName || rawValue;
+    const doesSearchAlreadyExist = this.unitOptions.some((option) => option.unitName.toLowerCase()
+      .trim() === value.toLowerCase()
+      .trim());
+    return options.length === 0 && !doesSearchAlreadyExist;
+  }
 }