From 7dd0e90a7ffc96da6e08045771623a21688d25a8 Mon Sep 17 00:00:00 2001
From: Nate Otto <nate@ottonomy.net>
Date: Thu, 27 Apr 2023 12:00:03 -0700
Subject: [PATCH 1/2] Add user hint to save new keyword values Closes #112

---
 ...bstract-form-field-search-multi-select.component.html | 7 +++++++
 ...ract-form-field-search-multi-select.component.spec.ts | 9 +++++++++
 .../abstract-form-field-search-multi-select.component.ts | 5 +++++
 .../abstract-form-field-search-select.component.ts       | 8 +++++++-
 ...stract-form-field-search-single-select.component.html | 6 ++++++
 ...act-form-field-search-single-select.component.spec.ts | 9 +++++++++
 ui/src/app/richskill/form/rich-skill-form.component.html | 6 ++++++
 7 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html b/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html
index 683123559..e5c81fe25 100644
--- a/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html
+++ b/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html
@@ -73,6 +73,10 @@
               </span>
                 <span class="m-buttonText-x-text">{{labelFor(r)}}<span class="t-visuallyHidden">, </span></span>
               </button>
+              <!-- Save as new button if not perfect match -->
+              <button class="m-buttonText" type="button" *ngIf="allowSaveNew && !isExactMatchFound()" (click)="selectSearchValue()" [disabled]="false">
+                <span class="m-buttonText-x-icon">Save new: {{ searchControlResultValue }} (Enter)</span>
+              </button>
             </div>
 
             <!-- Empty results -->
@@ -81,6 +85,9 @@
                 <p class="m-selectMenu-x-message">
                   <span class="m-selectMenu-x-messageText">No Results</span>
                 </p>
+                <button class="m-buttonText" type="button" *ngIf="allowSaveNew" (click)="selectSearchValue()" [disabled]="false">
+                  <span class="m-buttonText-x-icon">Save new: {{ searchControlResultValue }} (Enter)</span>
+                </button>
               </div>
             </ng-template>
           </div>
diff --git a/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.spec.ts b/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.spec.ts
index ae5a83a40..7a07035af 100644
--- a/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.spec.ts
+++ b/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.spec.ts
@@ -143,4 +143,13 @@ describe("AbstractFormFieldSearchMultiSelectComponent", () => {
       return true
     })()).toEqual(true)
   })
+
+  it("exact match detection works", () => {
+    component.results = []
+    component.searchControlValue = "abc";
+    expect(component.isExactMatchFound()).toEqual(false)
+
+    component.results = [{value:'abc'}]
+    expect(component.isExactMatchFound()).toEqual(true)
+  })
 })
diff --git a/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.ts b/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.ts
index 64ec29040..b62bd765e 100644
--- a/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.ts
+++ b/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.ts
@@ -27,6 +27,11 @@ export abstract class AbstractFormFieldSearchMultiSelect<TValue>
     return false
   }
 
+  isExactMatchFound(): boolean {
+    if (!this.searchControlResultValue) return false
+    return !!(this.results?.find((r: TValue) => this.areSearchResultsEqual(r, this.searchControlResultValue as TValue)))
+  }
+
   selectResult(result: TValue): void {
     if (this.isSearchResultType(result) && !this.isResultSelected(result)){
       let selected: TValue[] = this.controlValue ?? []
diff --git a/ui/src/app/form/form-field-search-select/abstract-form-field-search-select.component.ts b/ui/src/app/form/form-field-search-select/abstract-form-field-search-select.component.ts
index 478c46df6..aa71d4f13 100644
--- a/ui/src/app/form/form-field-search-select/abstract-form-field-search-select.component.ts
+++ b/ui/src/app/form/form-field-search-select/abstract-form-field-search-select.component.ts
@@ -13,6 +13,7 @@ export abstract class AbstractFormFieldSearchSelect<TSearch, TValue>
   extends AbstractFormField<TValue|null> implements OnInit, OnDestroy {
 
   @Input() createNonExisting = false
+  @Input() allowSaveNew: boolean = false
 
   searchControl: FormControl = new FormControl("")
 
@@ -59,6 +60,11 @@ export abstract class AbstractFormFieldSearchSelect<TSearch, TValue>
     return this.searchControlValue.length <= 0
   }
 
+  isExactMatchFound(): boolean {
+    if (!this.searchControlResultValue) return false
+    return !!(this.results?.find((r: TSearch) => this.areSearchResultsEqual(r, this.searchControlResultValue as TSearch)))
+  }
+
   get searchControlValue(): string {
     return this.searchControl.value?.trim() ?? ""
   }
@@ -73,7 +79,7 @@ export abstract class AbstractFormFieldSearchSelect<TSearch, TValue>
     const searchResult = this.searchResultFromString(this.searchControlValue)
 
     if (searchResult) {
-      const existingResult =this.results?.find((r: TSearch) => this.areSearchResultsEqual(r, searchResult))
+      const existingResult = this.results?.find((r: TSearch) => this.areSearchResultsEqual(r, searchResult))
       return existingResult ?? (this.createNonExisting) ? searchResult : undefined
     }
 
diff --git a/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html b/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html
index d83d680f5..48bd1afce 100644
--- a/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html
+++ b/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html
@@ -57,6 +57,9 @@
               <button class="m-buttonText" *ngFor="let r of results" type="button" (click)="onSearchResultClicked(r)">
                 <span class="m-buttonText-x-text">{{labelFor(r)}}</span>
               </button>
+              <button class="m-buttonText" type="button" *ngIf="allowSaveNew && !isExactMatchFound()" (click)="selectSearchValue()" [disabled]="false">
+                <span class="m-buttonText-x-icon">Save new: {{ searchControlResultValue }} (Enter)</span>
+              </button>
             </div>
 
             <!-- Empty results -->
@@ -65,6 +68,9 @@
                 <p class="m-selectMenu-x-message">
                   <span class="m-selectMenu-x-messageText">No Results</span>
                 </p>
+                <button class="m-buttonText" type="button" *ngIf="allowSaveNew" (click)="selectSearchValue()" [disabled]="false">
+                  <span class="m-buttonText-x-icon">Save new: {{ searchControlResultValue }} (Enter)</span>
+                </button>
               </div>
             </ng-template>
           </div>
diff --git a/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.spec.ts b/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.spec.ts
index 9ffc5d976..26a2b278e 100644
--- a/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.spec.ts
+++ b/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.spec.ts
@@ -129,4 +129,13 @@ describe("AbstractFormFieldSearchSingleSelectComponent", () => {
       return true
     })()).toEqual(true)
   })
+
+  it("exact match detection works", () => {
+    component.results = []
+    component.searchControlValue = "abc";
+    expect(component.isExactMatchFound()).toEqual(false)
+
+    component.results = [{value:'abc'}]
+    expect(component.isExactMatchFound()).toEqual(true)
+  })
 })
diff --git a/ui/src/app/richskill/form/rich-skill-form.component.html b/ui/src/app/richskill/form/rich-skill-form.component.html
index fe98bf4a8..8b0668616 100644
--- a/ui/src/app/richskill/form/rich-skill-form.component.html
+++ b/ui/src/app/richskill/form/rich-skill-form.component.html
@@ -42,6 +42,7 @@ <h3 class="m-iconTitle">
                 [errorMessage]="authorErrorMessage"
                 [keywordType]="keywordType.Author"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -74,6 +75,7 @@ <h3 class="m-iconTitle">
                 helpMessage="Industry-recognized, general terms that represents a broad group of related RSDs."
                 [keywordType]="keywordType.Category"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -87,6 +89,7 @@ <h3 class="m-iconTitle">
                 errorMessage="Keywords are required"
                 [keywordType]="keywordType.Keyword"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -99,6 +102,7 @@ <h3 class="m-iconTitle">
                 helpMessage="Names of professional standards that define skill mastery, sourced from industry-recognized frameworks."
                 [keywordType]="keywordType.Standard"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -111,6 +115,7 @@ <h3 class="m-iconTitle">
                 helpMessage="Related academic and professional certifications that support career advancement."
                 [keywordType]="keywordType.Certification"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 
@@ -133,6 +138,7 @@ <h3 class="m-iconTitle">
                 helpMessage="Employers who require this skill for a given job. Employers are not visible in the public view of an RSD."
                 [keywordType]="keywordType.Employer"
                 [createNonExisting]="true"
+                [allowSaveNew]="true"
               ></app-form-field-keyword-search-multi-select>
             </div>
 

From cef764eae73c63172e087f55592c40f9b5e5d84d Mon Sep 17 00:00:00 2001
From: Nate Otto <nate@ottonomy.net>
Date: Wed, 3 May 2023 21:42:27 -0700
Subject: [PATCH 2/2] Fix error for non-string TSearch values

---
 .../abstract-form-field-search-multi-select.component.html    | 4 ++--
 .../abstract-form-field-search-single-select.component.html   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html b/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html
index e5c81fe25..63d718461 100644
--- a/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html
+++ b/ui/src/app/form/form-field-search-select/abstract-form-field-search-multi-select.component.html
@@ -75,7 +75,7 @@
               </button>
               <!-- Save as new button if not perfect match -->
               <button class="m-buttonText" type="button" *ngIf="allowSaveNew && !isExactMatchFound()" (click)="selectSearchValue()" [disabled]="false">
-                <span class="m-buttonText-x-icon">Save new: {{ searchControlResultValue }} (Enter)</span>
+                <span class="m-buttonText-x-icon">Save new: {{ labelFor(searchControlResultValue) }} (Enter)</span>
               </button>
             </div>
 
@@ -86,7 +86,7 @@
                   <span class="m-selectMenu-x-messageText">No Results</span>
                 </p>
                 <button class="m-buttonText" type="button" *ngIf="allowSaveNew" (click)="selectSearchValue()" [disabled]="false">
-                  <span class="m-buttonText-x-icon">Save new: {{ searchControlResultValue }} (Enter)</span>
+                  <span class="m-buttonText-x-icon">Save new: {{ labelFor(searchControlResultValue) }} (Enter)</span>
                 </button>
               </div>
             </ng-template>
diff --git a/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html b/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html
index 48bd1afce..5983f570f 100644
--- a/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html
+++ b/ui/src/app/form/form-field-search-select/abstract-form-field-search-single-select.component.html
@@ -58,7 +58,7 @@
                 <span class="m-buttonText-x-text">{{labelFor(r)}}</span>
               </button>
               <button class="m-buttonText" type="button" *ngIf="allowSaveNew && !isExactMatchFound()" (click)="selectSearchValue()" [disabled]="false">
-                <span class="m-buttonText-x-icon">Save new: {{ searchControlResultValue }} (Enter)</span>
+                <span class="m-buttonText-x-icon">Save new: {{ labelFor(searchControlResultValue) }} (Enter)</span>
               </button>
             </div>
 
@@ -69,7 +69,7 @@
                   <span class="m-selectMenu-x-messageText">No Results</span>
                 </p>
                 <button class="m-buttonText" type="button" *ngIf="allowSaveNew" (click)="selectSearchValue()" [disabled]="false">
-                  <span class="m-buttonText-x-icon">Save new: {{ searchControlResultValue }} (Enter)</span>
+                  <span class="m-buttonText-x-icon">Save new: {{ labelFor(searchControlResultValue) }} (Enter)</span>
                 </button>
               </div>
             </ng-template>