Merge pull request #2 from GraceXiehahaha/retry-input-design

Retry input design
TEAMMATES · Oct 19, 2024 · e8a37ef · e8a37ef
2 parents 62f6182 + 5aa33d5
commit e8a37ef
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 13 deletions.
diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.html b/src/web/app/components/question-submission-form/question-submission-form.component.html
@@ -70,23 +70,23 @@ <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">
-                <div class="row col">
-                  <input type="text" class="form-control name-search-input"
-                          placeholder="Input Student Name..."
+                <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]="filterRecipientsBySearchText(searchNameTexts[i],model.recipientList).length === 0 ? 'no-match' : ''" />
-                  <select id="recipient-dropdown-qn-{{ model.questionNumber }}-idx-{{ i }}" class="form-control form-select fw-bold" [ngModel]="recipientSubmissionFormModel.recipientIdentifier"
-                          (ngModelChange)="triggerRecipientIdentifierChange(i, $event)"
-                          [disabled]="isFormsDisabled"
-                          [attr.aria-label]="'Select recipient dropdown question ' + model.questionNumber + ' index ' + i">
-                    <option value=""></option>
+                          [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 *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier" [ngValue]="recipient.recipientIdentifier">{{ getSelectionOptionLabel(recipient) }}</option>
+                      <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>
-                  </select>
+                  </div>
                 </div>
                 <div class="col-auto text-start">
                   ({{ model.recipientType | recipientTypeName: model.giverType }})

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.scss b/src/web/app/components/question-submission-form/question-submission-form.component.scss
@@ -55,8 +55,40 @@
   margin-right: 10px;
 }
 
-.name-search-input {
-  margin-block-end: .375rem;
+.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 {

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.ts b/src/web/app/components/question-submission-form/question-submission-form.component.ts
@@ -60,6 +60,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   hasResponseChanged: boolean = false;
 
   searchNameTexts: string[] = [];
+  feedbackRecipients: Array<FeedbackResponseRecipient | null> = [];
 
   @Input()
   formMode: QuestionSubmissionFormMode = QuestionSubmissionFormMode.FIXED_RECIPIENT;
@@ -97,6 +98,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
     });
     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()
@@ -385,11 +387,44 @@ export class QuestionSubmissionFormComponent implements DoCheck {
     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);
   }
 
   /**
@@ -554,6 +589,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
       this.isSectionTeamShown = false;
       this.sortRecipientsByName();
     }
+    this.updateSearchNameTextByShowSection();
   }
 
   /**