[#13054] Make substrings of the name in dropdown selections of recipient to be searchable

src/web/app/components/question-submission-form/question-submission-form.component.html

@@ -70,15 +70,24 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
                 <b>{{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} </b> <span>({{ model.recipientType | recipientTypeName:model.giverType }})</span>
               </div>
               <div class="row evaluee-select align-items-center" *ngIf="formMode === QuestionSubmissionFormMode.FLEXIBLE_RECIPIENT">
-                <select id="recipient-dropdown-qn-{{ model.questionNumber }}-idx-{{ i }}" class="form-control form-select fw-bold col" [ngModel]="recipientSubmissionFormModel.recipientIdentifier"
-                        (ngModelChange)="triggerRecipientSubmissionFormChange(i, 'recipientIdentifier', $event)"
-                        [disabled]="isFormsDisabled"
-                        [attr.aria-label]="'Select recipient dropdown question ' + model.questionNumber + ' index ' + i">
-                  <option value=""></option>
-                  <ng-container *ngFor="let recipient of model.recipientList">
-                    <option *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier" [ngValue]="recipient.recipientIdentifier">{{ getSelectionOptionLabel(recipient) }}</option>
-                  </ng-container>
-                </select>
+                <div class="input-selection-wrapper col">
+                  <input type="text" class="form-control form-select fw-bold" id="recipient-dropdown-qn-{{ model.questionNumber }}-idx-{{ i }}"
+                          [(ngModel)]="searchNameTexts[i]"
+                          (ngModelChange)="triggerSelectInputChange(i)"
+                          [disabled]="isFormsDisabled"
+                          [attr.aria-label]="'Recipient names filter ' + model.questionNumber + ' index ' + i"
+                          [ngClass]="(feedbackRecipients[i] === null && filterRecipientsBySearchText(searchNameTexts[i],model.recipientList).length === 0) ? 'no-match' : ''"
+                          (focus)="triggerSelectInputFocus(i)"
+                          autocomplete="off" />
+                  <div class="form-control input-selection-option-wrapper" [ngClass]="feedbackRecipients[i] !== null ? 'selected-input' : ''">
+                    <ng-container *ngFor="let recipient of filterRecipientsBySearchText(searchNameTexts[i],model.recipientList)">
+                      <option class="input-selection-option" *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier"
+                      [ngValue]="recipient.recipientIdentifier"
+                      (click)="triggerRecipientOptionSelect(i, recipient, $event)"
+                      tabindex="0">{{ getSelectionOptionLabel(recipient) }}</option>
+                    </ng-container>
+                  </div>
+                </div>
                 <div class="col-auto text-start">
                   ({{ model.recipientType | recipientTypeName: model.giverType }})
                 </div>

src/web/app/components/question-submission-form/question-submission-form.component.scss

@@ -54,3 +54,43 @@
 .collapse-caret {
   margin-right: 10px;
 }
+
+.input-selection-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: content-box;
+}
+
+.input-selection-wrapper:focus-within .input-selection-option-wrapper:not(.selected-input){
+  display: flex;
+}
+
+.input-selection-option-wrapper {
+  position: absolute;
+  z-index: 10;
+  top: 100%;
+  width: auto;
+  left:calc(var(--bs-gutter-x) * 0.5);
+  right:calc(var(--bs-gutter-x) * 0.5);
+  max-height: 9rem;
+  box-sizing: content-box;
+  display: none;
+  flex-direction: column;
+  overflow: hidden auto;
+}
+
+.input-selection-option {
+  cursor: pointer;
+  user-select: none;
+}
+
+.input-selection-option:hover {
+  color: white;
+  background-color: var(--bs-blue);
+  border-radius: 0.15rem;
+}
+
+.no-match {
+  color: var(--bs-danger)
+}

src/web/app/components/question-submission-form/question-submission-form.component.spec.ts

@@ -483,6 +483,32 @@ describe('QuestionSubmissionFormComponent', () => {
     expect(component.isRecipientSelected(feedbackResponseRecipient)).toBeFalsy();
   });
 
+  it('filterRecipientsBySearchText: should return correct filtered names', () => {
+    const doubleLucy = { recipientIdentifier: 'lucyLucy', recipientName: 'Lucy Lucy' };
+    const charlie = { recipientIdentifier: 'charlieBrown', recipientName: 'Charlie Brown' };
+    const lucy = { recipientIdentifier: 'lucyVanPelt', recipientName: 'Lucy van Pelt' };
+    const sally = { recipientIdentifier: 'sallyBrown', recipientName: 'Sally Brown' };
+    const snoopy = { recipientIdentifier: 'snoopy', recipientName: 'Snoopy' };
+    const linus = { recipientIdentifier: 'linusVanPelt', recipientName: 'Linus van Pelt' };
+    const benny = { recipientIdentifier: 'bennyCharles', recipientName: 'Benny Charles' };
+    const charlieDavis = { recipientIdentifier: 'charlieDavis', recipientName: 'Charlie Davis' };
+    const francis = { recipientIdentifier: 'francisGabriel', recipientName: 'Francis Gabriel' };
+
+    const recipients = [doubleLucy, charlie, lucy, sally, snoopy, linus, benny, charlieDavis, francis];
+    expect(component.filterRecipientsBySearchText('', recipients)).toStrictEqual(recipients);
+    expect(component.filterRecipientsBySearchText('  ', recipients)).toStrictEqual(recipients);
+    expect(component.filterRecipientsBySearchText('Lucy', recipients)).toStrictEqual([doubleLucy, lucy]);
+    expect(component.filterRecipientsBySearchText('s', recipients))
+      .toStrictEqual([sally, snoopy, linus, benny, charlieDavis, francis]);
+    expect(component.filterRecipientsBySearchText('Brow', recipients)).toStrictEqual([charlie, sally]);
+    expect(component.filterRecipientsBySearchText('van pel', recipients)).toStrictEqual([lucy, linus]);
+    expect(component.filterRecipientsBySearchText('van Pelt', recipients)).toStrictEqual([lucy, linus]);
+    expect(component.filterRecipientsBySearchText('cy', recipients)).toStrictEqual([doubleLucy, lucy]);
+    expect(component.filterRecipientsBySearchText('char', recipients))
+      .toStrictEqual([charlie, benny, charlieDavis]);
+    expect(component.filterRecipientsBySearchText('is', recipients)).toStrictEqual([charlieDavis, francis]);
+  });
+
   it('triggerDeleteCommentEvent: should emit the correct index to deleteCommentEvent', () => {
     let emittedIndex: number | undefined;
     testEventEmission(component.deleteCommentEvent, (index) => { emittedIndex = index; });

src/web/app/components/question-submission-form/question-submission-form.component.ts

@@ -59,6 +59,9 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   isSaved: boolean = false;
   hasResponseChanged: boolean = false;
 
+  searchNameTexts: string[] = [];
+  feedbackRecipients: Array<FeedbackResponseRecipient | null> = [];
+
   @Input()
   formMode: QuestionSubmissionFormMode = QuestionSubmissionFormMode.FIXED_RECIPIENT;
 
@@ -94,6 +97,8 @@ export class QuestionSubmissionFormComponent implements DoCheck {
       this.model.isTabExpandedForRecipients.set(recipient.recipientIdentifier, true);
     });
     this.hasResponseChanged = Array.from(this.model.hasResponseChangedForRecipients.values()).some((value) => value);
+    this.searchNameTexts = new Array(this.model.recipientSubmissionForms.length).fill('');
+    this.feedbackRecipients = new Array(this.model.recipientSubmissionForms.length).fill(null);
   }
 
   @Input()
@@ -320,6 +325,19 @@ export class QuestionSubmissionFormComponent implements DoCheck {
     this.updateSubmissionFormIndexes();
   }
 
+  filterRecipientsBySearchText(searchText: string, recipients: FeedbackResponseRecipient[])
+  : FeedbackResponseRecipient[] {
+    if (!searchText) return recipients;
+    const searchName = searchText.trim().toLowerCase();
+    if (searchName.length === 0) return recipients;
+    if (searchName.includes(' ')) {
+      return recipients.filter((r) => !this.isRecipientSelected(r)
+        && r.recipientName.toLowerCase().includes(searchName));
+    }
+    return recipients.filter((r) => !this.isRecipientSelected(r)
+      && r.recipientName.split(' ').some((s) => s.toLowerCase().includes(searchName)));
+  }
+
   private sortRecipientsBySectionTeam(): void {
     if (this.recipientLabelType === FeedbackRecipientLabelType.INCLUDE_SECTION) {
       this.model.recipientList.sort((firstRecipient, secondRecipient) => {
@@ -361,6 +379,54 @@ export class QuestionSubmissionFormComponent implements DoCheck {
         recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier);
   }
 
+  /**
+   * Triggers the changes of the recipient selection
+   */
+  triggerRecipientIdentifierChange(index: number, data: any): void {
+    this.searchNameTexts[index] = '';
+    this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data);
+  }
+
+  /**
+   * Update the texts in the recipient selection inputs to fit the Show Section/Team checkbox
+   */
+  updateSearchNameTextByShowSection(): void {
+    this.searchNameTexts = this.searchNameTexts.map(
+      (s, i) => {
+        return this.feedbackRecipients[i] === null ? s : this.getSelectionOptionLabel(this.feedbackRecipients[i]!);
+      },
+    );
+  }
+
+  /**
+   * Triggers when the input is focused
+   */
+  triggerSelectInputFocus(index: number): void {
+    if (this.feedbackRecipients[index] !== null) {
+      this.searchNameTexts[index] = '';
+      this.model.recipientSubmissionForms[index].recipientIdentifier = '';
+      this.feedbackRecipients[index] = null;
+    }
+  }
+
+  /**
+   * Triggers the changes of the recipient search text input
+   */
+  triggerSelectInputChange(index: number): void {
+    this.model.recipientSubmissionForms[index].recipientIdentifier = '';
+    this.feedbackRecipients[index] = null;
+  }
+
+  /**
+   * Triggers the changes of the recipient selection by options's click-events
+   */
+  triggerRecipientOptionSelect(index: number, recipient: FeedbackResponseRecipient, event: any): void {
+    event.target.blur();
+    this.searchNameTexts[index] = this.getSelectionOptionLabel(recipient);
+    this.feedbackRecipients[index] = recipient;
+    this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', recipient.recipientIdentifier);
+  }
+
   /**
    * Triggers the change of the recipient submission form.
    */
@@ -523,6 +589,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
       this.isSectionTeamShown = false;
       this.sortRecipientsByName();
     }
+    this.updateSearchNameTextByShowSection();
   }
 
   /**