Skip to content

Commit

Permalink
Fix linting errors and improving code readability
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wieln
Wieln committed Oct 19, 2024
1 parent c422815 commit 279428d
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 47 deletions.
3 changes: 1 addition & 2 deletions src/web/app/components/question-submission-form/question-submission-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
<div id="recipient-name-qn-{{ model.questionNumber }}-idx-{{ i }}" *ngIf="formMode === QuestionSubmissionFormMode.FIXED_RECIPIENT">
<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 evaluee-select align-items-center" *ngIf="formMode === QuestionSubmissionFormMode.FLEXIBLE_RECIPIENT">
<input type="text"
id="recipient-input-qn-{{ model.questionNumber }}-idx-{{ i }}"
class="form-control fw-bold col"
Expand All @@ -92,7 +92,6 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
{{ getSelectionOptionLabel(recipient) }}
</div>
</div>

</div>
<div class="margin-top-20px" [ngClass]="isMCQDropDownEnabled ? 'col-12' : 'col'">
<tm-contribution-question-edit-answer-form *ngIf="model.questionType === FeedbackQuestionType.CONTRIB" [questionDetails]="model.questionDetails"
Expand Down
34 changes: 6 additions & 28 deletions src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1158,26 +1158,7 @@ describe('QuestionSubmissionFormComponent', () => {
expect(component.isSavedForRecipient('recipientId')).toBeTruthy();
});

it('filterRecipients: should filter recipient list in the dropdown list and update dropdown visibility', ()=>{

const value = 'alice';
const index = 0;

component.model.recipientList = [
{ recipientIdentifier: '0', recipientName: 'Alice Betsy' },
{ recipientIdentifier: '1', recipientName: 'Benny Charles' }
];

component.getSelectionOptionLabel = (recipient: any) => recipient.recipientName;
component.filterRecipients(value, index);

expect(component.filteredRecipients[index].length).toBe(1);
expect(component.filteredRecipients[index][0].recipientName).toBe('Alice Betsy');

expect(component.dropdownVisible[index]).toBe(true);
})

it('filterRecipients: should filter recipient list in the dropdown list and update dropdown visibility', ()=>{
it('filterRecipients: should filter recipient list in the dropdown list and update dropdown visibility', () => {

const value = 'alex';
const index = 0;
Expand All @@ -1188,38 +1169,35 @@ describe('QuestionSubmissionFormComponent', () => {
{ recipientIdentifier: '2', recipientName: 'Group 2 | Tutorial 13 | Alex Kim' },
{ recipientIdentifier: '3', recipientName: 'Lecture #1 @ Room A | Jason Doe' },
{ recipientIdentifier: '4', recipientName: 'Lab Session *10* | Annie K. & John L.' },
{ recipientIdentifier: '5', recipientName: 'Group 3: Research Team | Dr. Alex Smith' }
{ recipientIdentifier: '5', recipientName: 'Group 3: Research Team | Dr. Alex Smith' },
];

component.getSelectionOptionLabel = (recipient: any) => recipient.recipientName;
component.filterRecipients(value, index);

// Testing for the filtered recipients based on 'alex'
expect(component.filteredRecipients[index].length).toBe(2);
expect(component.filteredRecipients[index][0].recipientName).toBe('Group 2 | Tutorial 13 | Alex Kim');
expect(component.filteredRecipients[index][1].recipientName).toBe('Group 3: Research Team | Dr. Alex Smith');

// Dropdown should be visible for the filtered results
expect(component.dropdownVisible[index]).toBe(true);
});
it('filterRecipients: should filter recipient list and resuld should be empty and dropdown should not be visible', ()=>{

it('filterRecipients: should filter the list with no results, hiding the dropdown', () => {

const value = 'alice';
const index = 0;

component.model.recipientList = [
{ recipientIdentifier: '0', recipientName: 'Matty Betsy' },
{ recipientIdentifier: '1', recipientName: 'Benny Charles' }
{ recipientIdentifier: '1', recipientName: 'Benny Charles' },
];

component.getSelectionOptionLabel = (recipient: any) => recipient.recipientName;
component.filterRecipients(value, index);

expect(component.filteredRecipients[index].length).toBe(0);
expect(component.filteredRecipients[index][0]).toBeUndefined();

expect(component.dropdownVisible[index]).toBe(false);
})
});

});
33 changes: 16 additions & 17 deletions src/web/app/components/question-submission-form/question-submission-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ export class QuestionSubmissionFormComponent implements DoCheck {
isMCQDropDownEnabled: boolean = false;
isSaved: boolean = false;
hasResponseChanged: boolean = false;
dropdownVisible: boolean[] = [];
filteredRecipients: any[][] = [];
dropdownVisible: boolean[] = [];
filteredRecipients: any[][] = [];
displayedRecipientName: string[] = [];

@Input()
Expand Down Expand Up @@ -600,40 +600,40 @@ export class QuestionSubmissionFormComponent implements DoCheck {
}

/**
* Filters the recipient list based on the input value and updates the filtered recipients array at the specified index.
* Filters the recipient list by input value and updates the filtered recipients array at the given index.
*/
filterRecipients(value: string, index: number) {
filterRecipients(value: string, index: number): void {

this.filteredRecipients[index] = this.model.recipientList.filter(recipient =>
this.getSelectionOptionLabel(recipient).toLowerCase().includes(value.toLowerCase())
this.filteredRecipients[index] = this.model.recipientList.filter((recipient) =>
this.getSelectionOptionLabel(recipient).toLowerCase().includes(value.toLowerCase()),
);
this.dropdownVisible[index] = this.filteredRecipients[index].length > 0;
this.dropdownVisible[index] = this.filteredRecipients[index].length > 0;
}

/**
* Sets the dropdown visibility to true for the specified recipient index.
*/
showDropdown(index: number) {
showDropdown(index: number): void {
this.dropdownVisible[index] = true;
}

/**
* Hides the dropdown for the specified recipient index after a short delay.
*/
hideDropdown(index: number) {
hideDropdown(index: number): void {
setTimeout(() => {
this.dropdownVisible[index] = false;
}, 100);
this.dropdownVisible[index] = false;
}, 100);
}

/**
* Updates the recipient selection in the form model and sets the displayed name for the selected recipient.
*/
selectRecipient(recipient: any, recipientSubmissionFormModel: any, index: number) {
recipientSubmissionFormModel.recipientIdentifier = recipient.recipientIdentifier;
this.displayedRecipientName[index] = recipient.recipientName;
this.filteredRecipients[index] = [];
this.dropdownVisible[index] = false;
selectRecipient(recipient: any, recipientSubmissionFormModel: any, index: number): void {
recipientSubmissionFormModel.recipientIdentifier = recipient.recipientIdentifier;
this.displayedRecipientName[index] = recipient.recipientName;
this.filteredRecipients[index] = [];
this.dropdownVisible[index] = false;
}

/**
Expand All @@ -646,5 +646,4 @@ export class QuestionSubmissionFormComponent implements DoCheck {
(r: FeedbackResponseRecipient) => r.recipientIdentifier === recipientIdentifier);
return recipient ? recipient.recipientName : '';
}

}

0 comments on commit 279428d

Please sign in to comment.