Move to simple col-stacked design

GraceXiehahaha · Oct 15, 2024 · 40c2c14 · 40c2c14
1 parent e0ccbc0
commit 40c2c14
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 92 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,7 +70,14 @@ <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 form-control select-editable col">
+                <div class="row col">
+                  <input type="text" class="form-control name-search-input"
+                          placeholder="Input Student Name..."
+                          [(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"
@@ -80,31 +87,7 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
                       <option *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier" [ngValue]="recipient.recipientIdentifier">{{ getSelectionOptionLabel(recipient) }}</option>
                     </ng-container>
                   </select>
-                  <input type="text" class="select-input fw-bold form-control"
-                          [(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' : ''" />
-                  
-                </div> -->
-
-                <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' : ''" />
-                  <div class="form-control input-selection-option-wrapper">
-                    <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>
                 <div class="col-auto text-start">
                   ({{ model.recipientType | recipientTypeName: model.giverType }})
                 </div>

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,56 +55,8 @@
   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{
-  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-y: auto;
-  overflow-x: hidden;
-}
-
-.input-selection-option {
-  cursor: pointer;
-  user-select: none;
-}
-
-.input-selection-option:hover {
-  color: white;
-  background-color: var(--bs-blue);
-  border-radius: 0.15rem;
-}
-
-.select-editable {
-  position: relative;
-  border: 0;
-}
-
-.select-input {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 75%;
-  border: 0;
-  background-color: transparent;
-  padding: .75rem 1.5rem;
+.name-search-input {
+  margin-block-end: .375rem;
 }
 
 .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
@@ -326,18 +326,12 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   filterRecipientsBySearchText(searchText: string, recipients: FeedbackResponseRecipient[])
   : FeedbackResponseRecipient[] {
     if (!searchText) return recipients;
-    if (this.isSectionTeamShown){
-      const labelComponents = searchText.split(" | ");
-      if (labelComponents && labelComponents.length > 0){
-        searchText = labelComponents.at(-1) || "";
-      }
-    }
     const searchName = searchText.trim().toLowerCase();
     if (searchName.length === 0) return recipients;
     if (searchName.includes(' ')) {
-      return recipients.filter((s) => s.recipientName.toLowerCase().includes(searchName));
+      return recipients.filter((r) => !this.isRecipientSelected(r) && r.recipientName.toLowerCase().includes(searchName));
     }
-    return recipients.filter((r) => r.recipientName.split(' ').some((s) => s.toLowerCase().includes(searchName)));
+    return recipients.filter((r) => !this.isRecipientSelected(r) && r.recipientName.split(' ').some((s) => s.toLowerCase().includes(searchName)));
   }
 
   private sortRecipientsBySectionTeam(): void {
@@ -387,7 +381,6 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   triggerRecipientIdentifierChange(index: number, data: any): void {
     this.searchNameTexts[index] = '';
     this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data);
-    console.log(this.model.recipientSubmissionForms[index].recipientIdentifier);
   }
 
   /**
@@ -397,13 +390,6 @@ export class QuestionSubmissionFormComponent implements DoCheck {
     this.model.recipientSubmissionForms[index].recipientIdentifier = '';
   }
 
-  triggerRecipientOptionSelect(index: number, recipient: FeedbackResponseRecipient, event: any): void {
-    event.target.blur();
-    console.log(recipient);
-    this.searchNameTexts[index] = this.getSelectionOptionLabel(recipient);
-    this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', recipient.recipientIdentifier);
-  }
-
   /**
    * Triggers the change of the recipient submission form.
    */