From 32dd547082e1be13784f31120e3bd9a258b4d54a Mon Sep 17 00:00:00 2001 From: Yang Li Date: Thu, 10 Oct 2024 23:36:28 +1100 Subject: [PATCH 01/21] Add aside - - - - - +
+ + +
({{ model.recipientType | recipientTypeName: model.giverType }})
From 23491f8e61ebaf3dd43340461d9681e42959caa3 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Thu, 10 Oct 2024 23:36:42 +1100 Subject: [PATCH 02/21] Add new style for select-input --- .../question-submission-form.component.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) 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 index daf994c5bfa..f5c2a921510 100644 --- 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 @@ -54,3 +54,22 @@ .collapse-caret { margin-right: 10px; } + +.select-editable { + position: relative; + border: 0; +} + +.select-input { + position: absolute; + left: 0; + top: 0; + width: 80%; + border: 0; + background-color: transparent; + padding: .75rem 1.5rem; +} + +.select-input:focus { + box-shadow: none; +} From 48f4cb172a7777de7f027c7f386bb582dbcd66c2 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Thu, 10 Oct 2024 23:37:26 +1100 Subject: [PATCH 03/21] Add field and method handling select-input value --- .../question-submission-form.component.ts | 8 ++++++++ 1 file changed, 8 insertions(+) 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 index 59d83d25227..d47844c483a 100644 --- 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 @@ -59,6 +59,8 @@ export class QuestionSubmissionFormComponent implements DoCheck { isSaved: boolean = false; hasResponseChanged: boolean = false; + searchName: string[] = []; + @Input() formMode: QuestionSubmissionFormMode = QuestionSubmissionFormMode.FIXED_RECIPIENT; @@ -94,6 +96,7 @@ export class QuestionSubmissionFormComponent implements DoCheck { this.model.isTabExpandedForRecipients.set(recipient.recipientIdentifier, true); }); this.hasResponseChanged = Array.from(this.model.hasResponseChangedForRecipients.values()).some((value) => value); + this.searchName = new Array(this.model.recipientSubmissionForms.length).fill(""); } @Input() @@ -361,6 +364,11 @@ export class QuestionSubmissionFormComponent implements DoCheck { recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier); } + triggerRecipientIdentifierChange(index: number, data: any): void { + this.searchName[index] = ""; + this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data); + } + /** * Triggers the change of the recipient submission form. */ From 4a8dfb4a74e56667fb4f6670a22e7a4049ee7ca7 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Fri, 11 Oct 2024 00:05:02 +1100 Subject: [PATCH 04/21] Correct value binding --- .../question-submission-form.component.html | 2 +- .../question-submission-form.component.scss | 2 +- .../question-submission-form.component.ts | 6 ++++++ 3 files changed, 8 insertions(+), 2 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 index ea3e6c923d0..78077b4c013 100644 --- 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 @@ -80,7 +80,7 @@

Question {{ model.questionNumber }}: {{ mode - +
({{ 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 index f5c2a921510..86aa0dae45a 100644 --- 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 @@ -64,7 +64,7 @@ position: absolute; left: 0; top: 0; - width: 80%; + width: 75%; border: 0; background-color: transparent; padding: .75rem 1.5rem; 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 index d47844c483a..64656c4282c 100644 --- 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 @@ -367,6 +367,12 @@ export class QuestionSubmissionFormComponent implements DoCheck { triggerRecipientIdentifierChange(index: number, data: any): void { this.searchName[index] = ""; this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data); + console.log("Select triggered"); + } + + triggerSelectInputChange(index: number){ + this.model.recipientSubmissionForms[index].recipientIdentifier = ""; + console.log(index + " input triggered"); } /** From 7d7f70fee103987d16676500c5942b70893e4941 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Fri, 11 Oct 2024 10:51:01 +1100 Subject: [PATCH 05/21] Implement filter function --- .../question-submission-form.component.html | 9 +++++-- .../question-submission-form.component.scss | 4 +++ .../question-submission-form.component.ts | 25 +++++++++++++++---- 3 files changed, 31 insertions(+), 7 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 index 78077b4c013..6b7be02eb3e 100644 --- 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 @@ -76,11 +76,16 @@

Question {{ model.questionNumber }}: {{ mode [disabled]="isFormsDisabled" [attr.aria-label]="'Select recipient dropdown question ' + model.questionNumber + ' index ' + i"> - + - +

({{ 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 index 86aa0dae45a..f0832f545a9 100644 --- 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 @@ -73,3 +73,7 @@ .select-input:focus { box-shadow: none; } + +.no-match { + color: var(--bs-danger) +} 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 index 64656c4282c..c08d231fa12 100644 --- 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 @@ -59,7 +59,7 @@ export class QuestionSubmissionFormComponent implements DoCheck { isSaved: boolean = false; hasResponseChanged: boolean = false; - searchName: string[] = []; + searchNameTexts: string[] = []; @Input() formMode: QuestionSubmissionFormMode = QuestionSubmissionFormMode.FIXED_RECIPIENT; @@ -96,7 +96,7 @@ export class QuestionSubmissionFormComponent implements DoCheck { this.model.isTabExpandedForRecipients.set(recipient.recipientIdentifier, true); }); this.hasResponseChanged = Array.from(this.model.hasResponseChangedForRecipients.values()).some((value) => value); - this.searchName = new Array(this.model.recipientSubmissionForms.length).fill(""); + this.searchNameTexts = new Array(this.model.recipientSubmissionForms.length).fill(""); } @Input() @@ -323,6 +323,17 @@ export class QuestionSubmissionFormComponent implements DoCheck { this.updateSubmissionFormIndexes(); } + filterRecipientsBySearchText(searchText: string, recipients: FeedbackResponseRecipient[]): FeedbackResponseRecipient[]{ + if (!searchText) return recipients; + let 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(s=>s.recipientName.split(" ").some(s=>s.toLowerCase().startsWith(searchName))); + } + private sortRecipientsBySectionTeam(): void { if (this.recipientLabelType === FeedbackRecipientLabelType.INCLUDE_SECTION) { this.model.recipientList.sort((firstRecipient, secondRecipient) => { @@ -364,15 +375,19 @@ export class QuestionSubmissionFormComponent implements DoCheck { recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier); } + /** + * Triggers the changes of the recipient selection + */ triggerRecipientIdentifierChange(index: number, data: any): void { - this.searchName[index] = ""; + this.searchNameTexts[index] = ""; this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data); - console.log("Select triggered"); } + /** + * Triggers the changes of the recipient search text input + */ triggerSelectInputChange(index: number){ this.model.recipientSubmissionForms[index].recipientIdentifier = ""; - console.log(index + " input triggered"); } /** From 859d6cb9751689c7135a03d23713a7f48bec3a6a Mon Sep 17 00:00:00 2001 From: Yang Li Date: Fri, 11 Oct 2024 10:51:23 +1100 Subject: [PATCH 06/21] Add unit tests for filterRecipientsBySearchText --- ...question-submission-form.component.spec.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts index 1ff82d95cac..927f0fd3691 100644 --- a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts +++ b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts @@ -483,6 +483,25 @@ 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 recipients = [doubleLucy, charlie, lucy, sally, snoopy, linus]; + 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]); + 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([]); + }) + it('triggerDeleteCommentEvent: should emit the correct index to deleteCommentEvent', () => { let emittedIndex: number | undefined; testEventEmission(component.deleteCommentEvent, (index) => { emittedIndex = index; }); From a231c6b698c6e3022101a15eee68cfdd84bd38d3 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Fri, 11 Oct 2024 11:06:54 +1100 Subject: [PATCH 07/21] Tidy up to pass lint --- ...question-submission-form.component.spec.ts | 30 +++++++++---------- .../question-submission-form.component.ts | 17 ++++++----- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts index 927f0fd3691..67c39f8d5f1 100644 --- a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts +++ b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts @@ -484,23 +484,23 @@ describe('QuestionSubmissionFormComponent', () => { }); 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 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 recipients = [doubleLucy, charlie, lucy, sally, snoopy, linus]; - 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]); - 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([]); - }) + 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]); + 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([]); + }); it('triggerDeleteCommentEvent: should emit the correct index to deleteCommentEvent', () => { let emittedIndex: number | undefined; 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 index c08d231fa12..dac0c416cec 100644 --- 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 @@ -96,7 +96,7 @@ 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.searchNameTexts = new Array(this.model.recipientSubmissionForms.length).fill(''); } @Input() @@ -323,15 +323,16 @@ export class QuestionSubmissionFormComponent implements DoCheck { this.updateSubmissionFormIndexes(); } - filterRecipientsBySearchText(searchText: string, recipients: FeedbackResponseRecipient[]): FeedbackResponseRecipient[]{ + filterRecipientsBySearchText(searchText: string, recipients: FeedbackResponseRecipient[]) + : FeedbackResponseRecipient[] { if (!searchText) return recipients; - let searchName = searchText.trim().toLowerCase(); + const searchName = searchText.trim().toLowerCase(); if (searchName.length === 0) return recipients; - if (searchName.includes(" ")){ - return recipients.filter(s=>s.recipientName.toLowerCase().includes(searchName)); + if (searchName.includes(' ')) { + return recipients.filter((s) => s.recipientName.toLowerCase().includes(searchName)); } - return recipients.filter(s=>s.recipientName.split(" ").some(s=>s.toLowerCase().startsWith(searchName))); + return recipients.filter((r) => r.recipientName.split(' ').some((s) => s.toLowerCase().startsWith(searchName))); } private sortRecipientsBySectionTeam(): void { @@ -386,8 +387,8 @@ export class QuestionSubmissionFormComponent implements DoCheck { /** * Triggers the changes of the recipient search text input */ - triggerSelectInputChange(index: number){ - this.model.recipientSubmissionForms[index].recipientIdentifier = ""; + triggerSelectInputChange(index: number): void { + this.model.recipientSubmissionForms[index].recipientIdentifier = ''; } /** From 5e6e1ab06b57131bbc793f67af33307fc023d3e3 Mon Sep 17 00:00:00 2001 From: u7199817 Date: Sat, 12 Oct 2024 14:36:22 +1100 Subject: [PATCH 08/21] update filter function to allow search for all possible substrings --- .../question-submission-form.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index dac0c416cec..55ff46fb737 100644 --- 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 @@ -332,7 +332,7 @@ export class QuestionSubmissionFormComponent implements DoCheck { return recipients.filter((s) => s.recipientName.toLowerCase().includes(searchName)); } - return recipients.filter((r) => r.recipientName.split(' ').some((s) => s.toLowerCase().startsWith(searchName))); + return recipients.filter((r) => r.recipientName.split(' ').some((s) => s.toLowerCase().includes(searchName))); } private sortRecipientsBySectionTeam(): void { From 11ebfab0a6f604f2ea765be904f8dac5d6290938 Mon Sep 17 00:00:00 2001 From: u7199817 Date: Sat, 12 Oct 2024 14:37:09 +1100 Subject: [PATCH 09/21] update test cases --- .../question-submission-form.component.spec.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts index 67c39f8d5f1..b0cb8c24e22 100644 --- a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts +++ b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts @@ -490,16 +490,21 @@ describe('QuestionSubmissionFormComponent', () => { 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]; + 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]); + 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([]); + 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', () => { From a3558288ef5fe69555fb4a5777b822325588e11e Mon Sep 17 00:00:00 2001 From: Yang Li Date: Sat, 12 Oct 2024 15:29:36 +1100 Subject: [PATCH 10/21] Fix lint errors --- .../question-submission-form.component.spec.ts | 6 ++++-- .../question-submission-form.component.ts | 3 +-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts index b0cb8c24e22..56e516a7890 100644 --- a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts +++ b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts @@ -498,12 +498,14 @@ describe('QuestionSubmissionFormComponent', () => { 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('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('char', recipients)) + .toStrictEqual([charlie, benny, charlieDavis]); expect(component.filterRecipientsBySearchText('is', recipients)).toStrictEqual([charlieDavis, francis]); }); 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 index 55ff46fb737..0cfa6a13965 100644 --- 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 @@ -331,7 +331,6 @@ export class QuestionSubmissionFormComponent implements DoCheck { if (searchName.includes(' ')) { return recipients.filter((s) => s.recipientName.toLowerCase().includes(searchName)); } - return recipients.filter((r) => r.recipientName.split(' ').some((s) => s.toLowerCase().includes(searchName))); } @@ -380,7 +379,7 @@ export class QuestionSubmissionFormComponent implements DoCheck { * Triggers the changes of the recipient selection */ triggerRecipientIdentifierChange(index: number, data: any): void { - this.searchNameTexts[index] = ""; + this.searchNameTexts[index] = ''; this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data); } From d512c97ad063e022b966e7f97b5744dff8b1e8ee Mon Sep 17 00:00:00 2001 From: Yang Li Date: Mon, 14 Oct 2024 23:05:40 +1100 Subject: [PATCH 11/21] Add input-selection styles --- .../question-submission-form.component.html | 15 +++++++- .../question-submission-form.component.scss | 36 +++++++++++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) 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 index 6b7be02eb3e..63b6d53fade 100644 --- 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,7 @@

Question {{ model.questionNumber }}: {{ mode {{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} ({{ model.recipientType | recipientTypeName:model.giverType }})

-
+ + +
+ +
+ + + +
+ + +
({{ 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 index f0832f545a9..66a5c1f849c 100644 --- 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,6 +55,42 @@ 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; +} + +.input-selection-option:hover { + color: white; + background-color: var(--bs-blue); + border-radius: 0.25rem; +} + .select-editable { position: relative; border: 0; From e0ccbc059fe0d4beff095e9e15205792c7701650 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Tue, 15 Oct 2024 20:51:14 +1100 Subject: [PATCH 12/21] implement input-mocked selection --- .../question-submission-form.component.html | 17 +++++++++++------ .../question-submission-form.component.scss | 7 ++----- .../question-submission-form.component.ts | 14 ++++++++++++++ 3 files changed, 27 insertions(+), 11 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 index 63b6d53fade..93f09d9520d 100644 --- 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 @@ -90,16 +90,21 @@

Question {{ model.questionNumber }}: {{ mode

-->
- +
- +
-
- - - +
({{ 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 index 66a5c1f849c..ff761eec6f2 100644 --- 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 @@ -83,12 +83,13 @@ .input-selection-option { cursor: pointer; + user-select: none; } .input-selection-option:hover { color: white; background-color: var(--bs-blue); - border-radius: 0.25rem; + border-radius: 0.15rem; } .select-editable { @@ -106,10 +107,6 @@ padding: .75rem 1.5rem; } -.select-input:focus { - box-shadow: none; -} - .no-match { color: var(--bs-danger) } 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 index 0cfa6a13965..adf1671d295 100644 --- 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,6 +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(' ')) { @@ -381,6 +387,7 @@ 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); } /** @@ -390,6 +397,13 @@ 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. */ From 40c2c142bed250ecdf3aa791a1968b3c2889c9e7 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Tue, 15 Oct 2024 21:14:26 +1100 Subject: [PATCH 13/21] Move to simple col-stacked design --- .../question-submission-form.component.html | 35 ++++--------- .../question-submission-form.component.scss | 52 +------------------ .../question-submission-form.component.ts | 18 +------ 3 files changed, 13 insertions(+), 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 index 93f09d9520d..c164bc5580c 100644 --- 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 @@

Question {{ model.questionNumber }}: {{ mode {{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} ({{ model.recipientType | recipientTypeName:model.giverType }})
- - -
- -
- - - -
-
+
({{ 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 index ff761eec6f2..2a5de3ccd10 100644 --- 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 index adf1671d295..23fc0f4b3bc 100644 --- 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. */ From 62f61827d7cda7dcd3b43c69652adf912f433459 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Tue, 15 Oct 2024 21:45:42 +1100 Subject: [PATCH 14/21] Fix lint error --- .../question-submission-form.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 index 23fc0f4b3bc..f452e70587a 100644 --- 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 @@ -329,9 +329,11 @@ export class QuestionSubmissionFormComponent implements DoCheck { 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.toLowerCase().includes(searchName)); } - return recipients.filter((r) => !this.isRecipientSelected(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 { From 8f9b2eee314497fe81a1a81302dce651d30703e6 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Sat, 19 Oct 2024 12:21:43 +1100 Subject: [PATCH 15/21] Revert "Move to simple col-stacked design" This reverts commit 40c2c142bed250ecdf3aa791a1968b3c2889c9e7. --- .../question-submission-form.component.html | 35 +++++++++---- .../question-submission-form.component.scss | 52 ++++++++++++++++++- .../question-submission-form.component.ts | 14 +++++ 3 files changed, 90 insertions(+), 11 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 index c164bc5580c..93f09d9520d 100644 --- 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,14 +70,7 @@

Question {{ model.questionNumber }}: {{ mode {{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} ({{ model.recipientType | recipientTypeName:model.giverType }})
-
- + + +
+ +
+ + + +
+
({{ 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 index 2a5de3ccd10..ff761eec6f2 100644 --- 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,56 @@ 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{ + 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; } .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 index f452e70587a..a117f4c1588 100644 --- 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,6 +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(' ')) { @@ -383,6 +389,7 @@ 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); } /** @@ -392,6 +399,13 @@ 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. */ From cae895c0e9cd3d97cfcb34dabb853a76785382f4 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Sat, 19 Oct 2024 15:48:21 +1100 Subject: [PATCH 16/21] Implement input-mocked select --- .../question-submission-form.component.html | 9 +++-- .../question-submission-form.component.scss | 9 ++--- .../question-submission-form.component.ts | 38 +++++++++++++++---- 3 files changed, 39 insertions(+), 17 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 index 93f09d9520d..7bcadc173d4 100644 --- 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 @@ -86,7 +86,6 @@

Question {{ model.questionNumber }}: {{ mode [disabled]="isFormsDisabled" [attr.aria-label]="'Recipient names filter ' + model.questionNumber + ' index ' + i" [ngClass]="filterRecipientsBySearchText(searchNameTexts[i],model.recipientList).length === 0 ? 'no-match' : ''" /> -

-->
@@ -95,8 +94,10 @@

Question {{ model.questionNumber }}: {{ mode (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' : ''" /> -
+ [ngClass]="(feedbackRecipients[i] === null && filterRecipientsBySearchText(searchNameTexts[i],model.recipientList).length === 0) ? 'no-match' : ''" + (focus)="triggerSelectInputFocus(i)" + autocomplete="off" /> +
-
+

({{ 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 index ff761eec6f2..2264b5fd754 100644 --- 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 @@ -62,7 +62,7 @@ box-sizing: content-box; } -.input-selection-wrapper:focus-within .input-selection-option-wrapper{ +.input-selection-wrapper:focus-within .input-selection-option-wrapper:not(.selected-input){ display: flex; } @@ -71,14 +71,13 @@ z-index: 10; top: 100%; width: auto; - left:calc(var(--bs-gutter-x)*0.5); - right:calc(var(--bs-gutter-x)*0.5); + 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; + overflow: hidden auto; } .input-selection-option { 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 index a117f4c1588..a4a16a3a317 100644 --- 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 = []; @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() @@ -326,12 +328,6 @@ 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(' ')) { @@ -389,7 +385,28 @@ 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); + } + + /** + * 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; + } } /** @@ -397,12 +414,16 @@ export class QuestionSubmissionFormComponent implements DoCheck { */ 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(); - console.log(recipient); this.searchNameTexts[index] = this.getSelectionOptionLabel(recipient); + this.feedbackRecipients[index] = recipient; this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', recipient.recipientIdentifier); } @@ -568,6 +589,7 @@ export class QuestionSubmissionFormComponent implements DoCheck { this.isSectionTeamShown = false; this.sortRecipientsByName(); } + this.updateSearchNameTextByShowSection(); } /** From 5aa33d5541ffa39dc79becea3c18cb832d89d90f Mon Sep 17 00:00:00 2001 From: Yang Li Date: Sat, 19 Oct 2024 15:54:20 +1100 Subject: [PATCH 17/21] Tidy up --- .../question-submission-form.component.html | 18 ------------------ .../question-submission-form.component.scss | 15 --------------- 2 files changed, 33 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 index 7bcadc173d4..f8e2e31efb6 100644 --- 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,24 +70,6 @@

Question {{ model.questionNumber }}: {{ mode {{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} ({{ model.recipientType | recipientTypeName:model.giverType }})

- -
Date: Sat, 19 Oct 2024 20:37:56 +1100 Subject: [PATCH 18/21] Add hidden select for e2e tests --- .../question-submission-form.component.html | 13 +++++++++++-- .../question-submission-form.component.ts | 8 ++++++-- 2 files changed, 17 insertions(+), 4 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 index f8e2e31efb6..06c2996724f 100644 --- 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,8 +70,8 @@

Question {{ model.questionNumber }}: {{ mode {{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} ({{ model.recipientType | recipientTypeName:model.giverType }})

-
- + Question {{ model.questionNumber }}: {{ mode tabindex="0">{{ getSelectionOptionLabel(recipient) }}
+
({{ model.recipientType | recipientTypeName: model.giverType }}) 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 index a4a16a3a317..4cd22f56012 100644 --- 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 @@ -383,8 +383,12 @@ export class QuestionSubmissionFormComponent implements DoCheck { * Triggers the changes of the recipient selection */ triggerRecipientIdentifierChange(index: number, data: any): void { - this.searchNameTexts[index] = ''; - this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data); + const recipient = this.model.recipientList.find((r) => r.recipientIdentifier === data); + if (recipient) { + this.searchNameTexts[index] = this.getSelectionOptionLabel(recipient); + this.feedbackRecipients[index] = recipient; + this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data); + } } /** From f75c90852f1addfed30675e2fbb7b366a7ed2e54 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Sat, 19 Oct 2024 20:47:47 +1100 Subject: [PATCH 19/21] Change div id --- .../question-submission-form.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 06c2996724f..5a166d64941 100644 --- 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,7 @@

Question {{ model.questionNumber }}: {{ mode {{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} ({{ model.recipientType | recipientTypeName:model.giverType }})

-
+
Date: Sat, 19 Oct 2024 22:39:34 +1100 Subject: [PATCH 20/21] Try to fix e2e tests --- .../question-submission-form.component.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 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 index 5a166d64941..6ea94b5a1bb 100644 --- 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,6 +70,15 @@

Question {{ model.questionNumber }}: {{ mode {{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} ({{ model.recipientType | recipientTypeName:model.giverType }})

+
Question {{ model.questionNumber }}: {{ mode tabindex="0">{{ getSelectionOptionLabel(recipient) }}
-
({{ model.recipientType | recipientTypeName: model.giverType }}) From 62fc52f09b88ab920e5af7f3acf42204669d0e54 Mon Sep 17 00:00:00 2001 From: Yang Li Date: Sat, 19 Oct 2024 23:35:15 +1100 Subject: [PATCH 21/21] Revert "Add hidden select for e2e tests" --- .../question-submission-form.component.html | 13 ++----------- .../question-submission-form.component.ts | 8 ++------ 2 files changed, 4 insertions(+), 17 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 index 6ea94b5a1bb..f8e2e31efb6 100644 --- 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,17 +70,8 @@

Question {{ model.questionNumber }}: {{ mode {{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} ({{ model.recipientType | recipientTypeName:model.giverType }})

- -
- + r.recipientIdentifier === data); - if (recipient) { - this.searchNameTexts[index] = this.getSelectionOptionLabel(recipient); - this.feedbackRecipients[index] = recipient; - this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data); - } + this.searchNameTexts[index] = ''; + this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data); } /**