From 71b02269d354ad1c0c8ae66ee4fb1e217b8ac1a4 Mon Sep 17 00:00:00 2001 From: Matei <108479475+MateiHMCTS@users.noreply.github.com> Date: Wed, 12 Jul 2023 10:37:29 +0100 Subject: [PATCH] Feature/e UI 8481 (#1508) * EUI-8481 * EUI-8481 * EUI-8481 * Fix build issue * Fix merge conflicts * Added translation --------- Co-authored-by: DavidJayakumar Co-authored-by: David Rajkumar Jayakumar <107850923+DavidJayakumar@users.noreply.github.com> --- package.json | 2 +- projects/ccd-case-ui-toolkit/package.json | 2 +- .../components/palette/palette.module.ts | 2 - .../query-management/components/index.ts | 1 - .../query-details-table.component.html | 46 ------ .../query-details-table.component.scss | 17 --- .../query-details-table.component.spec.ts | 138 ------------------ .../query-details-table.component.ts | 11 -- .../query-details.component.html | 113 +++++++++----- .../query-details/query-details.component.ts | 1 + ...uery-write-respond-to-query.component.html | 2 +- ...read-query-management-field.component.html | 32 +++- ...d-query-management-field.component.spec.ts | 70 ++++++++- .../read-query-management-field.component.ts | 2 + 14 files changed, 171 insertions(+), 268 deletions(-) delete mode 100644 projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.html delete mode 100644 projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.scss delete mode 100644 projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.spec.ts delete mode 100644 projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.ts diff --git a/package.json b/package.json index 79c14de4bd..55eedc1570 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hmcts/ccd-case-ui-toolkit", - "version": "6.16.0-QM-respond-CYA-UI-changes-v2", + "version": "6.16.0-query-details-add-follow-up-button-v3", "engines": { "yarn": "^3.5.0", "npm": "^8.10.0" diff --git a/projects/ccd-case-ui-toolkit/package.json b/projects/ccd-case-ui-toolkit/package.json index de66efbb12..727788ae58 100644 --- a/projects/ccd-case-ui-toolkit/package.json +++ b/projects/ccd-case-ui-toolkit/package.json @@ -1,6 +1,6 @@ { "name": "@hmcts/ccd-case-ui-toolkit", - "version": "6.16.0-QM-respond-CYA-UI-changes-v2", + "version": "6.16.0-query-details-add-follow-up-button-v3", "engines": { "yarn": "^3.5.0", "npm": "^8.10.0" diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/palette.module.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/palette.module.ts index 7005fc4c94..ccb71d121b 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/palette.module.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/palette.module.ts @@ -123,7 +123,6 @@ import { QueryCaseDetailsHeaderComponent, QueryCheckYourAnswersComponent, QueryDetailsComponent, - QueryDetailsTableComponent, QueryListComponent, QueryWriteAddDocumentsComponent, QueryWriteDateInputComponent, @@ -256,7 +255,6 @@ const PALETTE_COMPONENTS = [ ReadQueryManagementFieldComponent, QueryDetailsComponent, QueryListComponent, - QueryDetailsTableComponent, QueryWriteRespondToQueryComponent, QueryWriteRaiseQueryComponent, QueryCaseDetailsHeaderComponent, diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/index.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/index.ts index 1b24c49381..19b6cd673c 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/index.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/index.ts @@ -2,7 +2,6 @@ export * from './qualifying-questions/qualifying-question-detail/qualifying-ques export * from './qualifying-questions/qualifying-question-options/qualifying-question-options.component'; export * from './query-case-details-header/query-case-details-header.component'; export * from './query-check-your-answers/query-check-your-answers.component'; -export * from './query-details-table/query-details-table.component'; export * from './query-details/query-details.component'; export * from './query-list/query-list.component'; export * from './query-write/query-write-date-input/query-write-date-input.component'; diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.html deleted file mode 100644 index b93c03da58..0000000000 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
{{ 'Query details' | rpxTranslate }}
-
{{ 'Submission date' | rpxTranslate }}{{ queryItem.createdOn | date: 'dd MMM yyyy' }}
{{ 'Last submitted by' | rpxTranslate }}{{ queryItem.lastSubmittedBy }}
{{ 'Query subject' | rpxTranslate }}{{ queryItem.subject }}
{{ 'Query detail' | rpxTranslate }}{{ queryItem.body }}
- {{ 'Is the query hearing related?' | rpxTranslate }} - - {{ 'Is the query hearing related?' | rpxTranslate: null : (queryItem.isHearingRelated ? 'Yes' : 'No') }}
{{ 'What is the date of the hearing?' | rpxTranslate }}{{ queryItem.hearingDate | date: 'dd MMM yyyy' }}
{{ 'Attachments' | rpxTranslate }} - - -
- diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.scss b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.scss deleted file mode 100644 index 1f4c31d166..0000000000 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -.query-details-table { - .govuk-table__header { - width: 330px; - } - .collection-field-table { - tr>td { - border-bottom: none; - } - } - - .govuk-table__header, - .govuk-table__cell { - &--no-border { - border-bottom: 0; - } - } -} diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.spec.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.spec.ts deleted file mode 100644 index d1512cf864..0000000000 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.spec.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { MockRpxTranslatePipe } from '../../../../../../shared/test/mock-rpx-translate.pipe'; -import { QueryListItem } from '../../models'; -import { QueryDetailsTableComponent } from './query-details-table.component'; - -describe('QueryDetailsTableComponent', () => { - let component: QueryDetailsTableComponent; - let fixture: ComponentFixture; - - const items = [ - { - id: '222-222', - subject: '', - name: 'Name 2', - body: 'Body 2', - attachments: [], - isHearingRelated: false, - hearingDate: '', - createdOn: new Date('2021-02-01'), - createdBy: 'Person A', - parentId: '111-111', - children: [] - }, - { - id: '333-333', - subject: '', - name: 'Name 3', - body: 'Body 3', - attachments: [], - isHearingRelated: false, - hearingDate: '', - createdOn: new Date('2021-03-01'), - createdBy: 'Person B', - parentId: '111-111', - children: [] - }, - { - id: '444-444', - subject: '', - name: 'Name 4', - body: 'Body 4', - attachments: [], - isHearingRelated: false, - hearingDate: '', - createdOn: new Date('2020-03-01'), - createdBy: 'Person C', - parentId: '222-222' - }, - // lastSubmittedBy - { - id: '555-555', - subject: '', - name: 'Name 5', - body: 'Body 5', - attachments: [], - isHearingRelated: false, - hearingDate: '', - createdOn: new Date('2023-06-01'), - createdBy: 'Person D', - parentId: '444-444', - } - ]; - - const childrenItems = items.map(item => { - const listItem = new QueryListItem(); - Object.assign(listItem, item); - return listItem; - }); - - const queryListItem = new QueryListItem(); - Object.assign(queryListItem, { - id: '111-111', - subject: 'Subject 1', - name: 'Name 1', - body: 'Body 1', - attachments: [ - { - _links: { - self: { - href: 'https://hmcts.internal/documents/111-111' - }, - binary: { - href: 'https://hmcts.internal/documents/111-111/binary' - } - }, - originalDocumentName: 'Document 1' - } - ], - isHearingRelated: true, - hearingDate: new Date('2023-06-29'), - createdOn: new Date('2023-06-25'), - createdBy: 'Person A', - children: [ - childrenItems[0], - childrenItems[1], - { - ...childrenItems[2], - children: [ - // lastSubmittedBy - childrenItems[3] - ] - } - ] - }); - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - QueryDetailsTableComponent, - MockRpxTranslatePipe - ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(QueryDetailsTableComponent); - component = fixture.componentInstance; - component.queryItem = queryListItem; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - it('should verify table column names', () => { - const columnHeaders = fixture.debugElement.queryAll(By.css('.govuk-table__header')); - expect(columnHeaders[0].nativeElement.textContent.trim()).toEqual('Submission date'); - expect(columnHeaders[1].nativeElement.textContent.trim()).toEqual('Last submitted by'); - expect(columnHeaders[2].nativeElement.textContent.trim()).toEqual('Query subject'); - expect(columnHeaders[3].nativeElement.textContent.trim()).toEqual('Query detail'); - expect(columnHeaders[4].nativeElement.textContent.trim()).toEqual('Is the query hearing related?'); - expect(columnHeaders[5].nativeElement.textContent.trim()).toEqual('What is the date of the hearing?'); - expect(columnHeaders[6].nativeElement.textContent.trim()).toEqual('Attachments'); - }); -}); diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.ts deleted file mode 100644 index e21779832f..0000000000 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details-table/query-details-table.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { QueryListItem } from '../../models'; - -@Component({ - selector: 'ccd-query-details-table', - templateUrl: './query-details-table.component.html', - styleUrls: ['./query-details-table.component.scss'] -}) -export class QueryDetailsTableComponent { - @Input() public queryItem: QueryListItem; -} diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details/query-details.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details/query-details.component.html index cd9d39ac7d..7e4ca55ea5 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details/query-details.component.html +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details/query-details.component.html @@ -1,12 +1,52 @@ -
-

- {{ 'Back to queries' | rpxTranslate }} -

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
{{ 'Query details' | rpxTranslate }}
+
{{ 'Last submitted by' | rpxTranslate }}{{ query.lastSubmittedBy }}
{{ 'Submission date' | rpxTranslate }}{{ query.createdOn | date: 'dd MMM yyyy' }}
{{ 'Query subject' | rpxTranslate }}{{ query.subject }}
{{ 'Query body' | rpxTranslate }}{{ query.body }}
+ {{ 'Is the query hearing related?' | rpxTranslate }} + + {{ 'Is the query hearing related?' | rpxTranslate: null : (query.isHearingRelated ? 'Yes' : 'No') }}
{{ 'What is the date of the hearing?' | rpxTranslate }}{{ query.hearingDate | date: 'dd MMM yyyy' }}
{{ 'Attachments' | rpxTranslate }} + + +
+
- - - + @@ -14,10 +54,10 @@
{{ 'Response' | rpxTranslate }}
- - - - + + + + @@ -29,16 +69,16 @@ - - - - + + + +
{{ 'Last response date' | rpxTranslate }}{{ child.createdOn | date: 'dd MMM yyyy' }}
{{ 'Last response date' | rpxTranslate }}{{ child.createdOn | date: 'dd MMM yyyy' }}
{{ 'Caseworker name' | rpxTranslate }}{{ child.body }}
{{ 'Attachments' | rpxTranslate }} - - -
{{ 'Attachments' | rpxTranslate }} + + +
@@ -50,30 +90,23 @@
{{ 'Follow up query' | rpxTranslate }}
- - {{ 'Last submission date' | rpxTranslate }} - {{ child.createdOn | date: 'dd MMM yyyy' }} - + + {{ 'Last submission date' | rpxTranslate }} + {{ child.createdOn | date: 'dd MMM yyyy' }} + - - {{ 'Last submitted by' | rpxTranslate }} - {{ child.name }} - + + {{ 'Last submitted by' | rpxTranslate }} + {{ child.name }} + - - {{ 'Query detail' | rpxTranslate }} - {{ child.body }} - + + {{ 'Query detail' | rpxTranslate }} + {{ child.body }} + - - -
-

{{ 'Your query is under review' | rpxTranslate }}

-

{{ 'Our team will read your query and will respond. Do not submit the same query more than once.' | rpxTranslate }}

-
- diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details/query-details.component.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details/query-details.component.ts index 3158b641c9..ca0a73c612 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details/query-details.component.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-details/query-details.component.ts @@ -10,6 +10,7 @@ import { QueryListItem } from '../../models'; export class QueryDetailsComponent { @Input() public query: QueryListItem; @Output() public backClicked: EventEmitter = new EventEmitter(); + @Input() public caseId: string; constructor(private sessionStorage: SessionStorageService) { } diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-write/query-write-respond-to-query/query-write-respond-to-query.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-write/query-write-respond-to-query/query-write-respond-to-query.component.html index 6ba1c1ed73..99c1221d8d 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-write/query-write-respond-to-query/query-write-respond-to-query.component.html +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/components/query-write/query-write-respond-to-query/query-write-respond-to-query.component.html @@ -9,7 +9,7 @@

{{ 'Query details' | rpxTran
- +
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.html index 6a1746845f..ce45011dca 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.html +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.html @@ -1,9 +1,35 @@ - +
- - + + +
+

+ {{ 'Back to queries' | rpxTranslate }} +

+ + + + + + + + +
+

{{ 'Your query is under review' | rpxTranslate }}

+

{{ 'Our team will read your query and will respond. Do not submit the same query more than once.' | rpxTranslate }}

+
+ + diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.spec.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.spec.ts index 7acb6d0862..57c84a6091 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.spec.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.spec.ts @@ -1,16 +1,32 @@ -import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { ActivatedRoute } from '@angular/router'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, PipeTransform } from '@angular/core'; +import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; +import { ActivatedRoute, Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; import { QueryListItem } from './models'; import { ReadQueryManagementFieldComponent } from './read-query-management-field.component'; +@Component({ + selector: 'dummy-component', + template: `` +}) +class DummyComponent { } + +@Pipe({ name: 'rpxTranslate' }) +class MockTranslatePipe implements PipeTransform { + public transform(value: any, ...args: any[]): any { + return value; + } +} + describe('ReadQueryManagementFieldComponent', () => { let component: ReadQueryManagementFieldComponent; let fixture: ComponentFixture; - + const caseId = '12345'; const mockRoute = { snapshot: { + params: { + cid: caseId + }, data: { case: { tabs: [ @@ -30,12 +46,25 @@ describe('ReadQueryManagementFieldComponent', () => { } } }; + let router: Router; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ReadQueryManagementFieldComponent], - imports: [RouterTestingModule], + declarations: [ + ReadQueryManagementFieldComponent, + MockTranslatePipe + ], + imports: [RouterTestingModule.withRoutes([ + { + path: ``, + component: DummyComponent + }, + { + path: `query-management/query/${caseId}/4`, + component: DummyComponent + }, + ])], providers: [ { provide: ActivatedRoute, useValue: mockRoute } ] @@ -46,6 +75,7 @@ describe('ReadQueryManagementFieldComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(ReadQueryManagementFieldComponent); component = fixture.componentInstance; + router = TestBed.inject(Router); fixture.detectChanges(); }); @@ -57,9 +87,35 @@ describe('ReadQueryManagementFieldComponent', () => { expect(component).toBeTruthy(); }); - it('should hide query list and show query detiails', () => { + it('should hide query list and show query details', () => { component.setQuery(new QueryListItem()); expect(component.showQueryList).toBeFalsy(); expect(component.query).toEqual(new QueryListItem()); }); + + describe('query is set', () => { + beforeEach(() => { + component.setQuery(new QueryListItem()); + fixture.detectChanges(); + }); + + describe('follow-up button', () => { + it('should not display if query has no children', () => { + component.query.children = []; + fixture.detectChanges(); + const followUpButton = fixture.nativeElement.querySelector('#ask-follow-up-question'); + expect(followUpButton).toBeFalsy(); + }); + + it('should display and navigate to query details page on click', fakeAsync(() => { + component.query.children = [new QueryListItem()]; + fixture.detectChanges(); + spyOn(router, 'navigate'); + const followUpButton = fixture.nativeElement.querySelector('#ask-follow-up-question'); + followUpButton.click(); + tick(); + expect(router.url).toBe(`/query-management/query/${caseId}/4`); + })); + }); + }); }); diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.ts index a4dd2ef96b..8ab3d93994 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/query-management/read-query-management-field.component.ts @@ -15,12 +15,14 @@ export class ReadQueryManagementFieldComponent extends AbstractFieldReadComponen public partyMessagesGroups: PartyMessagesGroup[]; public query: QueryListItem; public showQueryList: boolean = true; + public caseId: string; constructor(private readonly route: ActivatedRoute) { super(); } public ngOnInit(): void { + this.caseId = this.route.snapshot.params.cid; if (this.context === PaletteContext.DEFAULT) { // EUI-8303 Using mock data until CCD is ready with the API and data contract this.partyMessagesGroups = partyMessagesMockData;