Skip to content

Commit

Permalink
Change layout of workplace summary
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssrome
ssrome committed Jan 9, 2025
1 parent c1e7e12 commit 00bc759
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 249 deletions.
265 changes: 114 additions & 151 deletions frontend/src/app/shared/components/new-workplace-summary/workplace-summary.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,122 @@
<ng-container *ngIf="workplace">
<div class="govuk-width-container govuk-!-margin-top-5">
<h2 class="govuk-heading-m govuk-!-margin-bottom-5">Your workplace details</h2>
<p *ngIf="isParent" class="govuk-width-container govuk-!-margin-bottom-5">
<a [routerLink]="['/workplace/about-parents']">What you can do as a parent workplace</a>
</p>
</div>

<div data-testid="workplace-section">
<dl class="govuk-summary-list govuk-summary-list--medium govuk-!-margin-top-7 govuk-!-margin-bottom-0">
<div
class="govuk-summary-list__row"
[class.govuk-summary-list__row--no-bottom-border]="
!workplace.isRegulated && (numberOfStaffError || numberOfStaffWarning)
"
data-testid="workplace-name-and-address"
<ng-container *ngIf="!workplace?.showAddWorkplaceDetailsBanner">
<div [class.govuk-summary-list__warning]="noVacancyAndTurnoverData" data-testid="vacancies-and-turnover-section">
<h2
class="govuk-heading-m govuk-!-padding-top-1 govuk-!-margin-top-4"
[ngClass]="{ 'govuk-!-margin-bottom-1': noVacancyAndTurnoverData }"
>
<dt class="govuk-summary-list__key">
<div>Name</div>
<div *ngIf="workplace && workplace.address" class="govuk-!-padding-top-2">Address</div>
</dt>
<dd class="govuk-summary-list__value">
<div>
{{ workplace.name }}
Vacancies and turnover
</h2>
<span *ngIf="noVacancyAndTurnoverData" class="govuk-error-message govuk-summary-list__warning-message"
>You've not added any vacancy and turnover data</span
>
<div [class.govuk-summary-list__warning]="noVacancyData" data-testid="vacancies">
<dl
class="govuk-summary-list govuk-summary-list--medium govuk-!-margin-bottom-0 govuk-summary-list--top-border"
>
<div
class="govuk-summary-list__row"
[ngClass]="{
'govuk-summary-list__row--no-bottom-border': noVacancyData,
'govuk-summary-list__row--no-bottom-padding': noVacancyData
}"
data-testid="vacancies-top-row"
>
<dt class="govuk-summary-list__key">Current staff vacancies</dt>
<dd class="govuk-summary-list__value">
<app-summary-record-value>
<ng-container *ngIf="!workplace.vacancies?.length; else vacancies"> - </ng-container>
<ng-template #vacancies>
<ng-container *ngIf="isArray(workplace.vacancies)">
<ul class="govuk-list govuk-!-margin-bottom-0">
<li *ngFor="let vacancy of workplace.vacancies">{{ vacancy | formatSLV }}</li>
</ul>
</ng-container>
<ng-container *ngIf="!isArray(workplace.vacancies)">{{ workplace.vacancies }} </ng-container>
</ng-template>
</app-summary-record-value>
</dd>
<dd *ngIf="canEditEstablishment" class="govuk-summary-list__actions">
<app-summary-record-change
[explanationText]="' staff vacancies'"
[link]="['/workplace', workplace.uid, 'do-you-have-vacancies']"
[hasData]="workplace.vacancies?.length"
(setReturnClicked)="this.setReturn()"
></app-summary-record-change>
</dd>
</div>
<div *ngIf="workplace" class="govuk-!-padding-top-2">
<div *ngIf="workplace.address1">{{ workplace.address1 }}</div>
<div *ngIf="workplace.address2">{{ workplace.address2 }}</div>
<div *ngIf="workplace.address3">{{ workplace.address3 }}</div>
<div *ngIf="workplace.town">{{ workplace.town }}</div>
<div *ngIf="workplace.county">{{ workplace.county }}</div>
<div *ngIf="workplace.postcode">{{ workplace.postcode }}</div>
<div *ngIf="noVacancyData" class="govuk-summary-list__row govuk-summary-list__row--error-warning-message">
<dt class="govuk-summary-list__key govuk-error-message govuk-summary-list__warning-message govuk__nowrap">
You've not added any staff vacancy data
</dt>
<dd class="govuk-summary-list__value"></dd>
<dd class="govuk-summary-list__actions"></dd>
</div>
</dd>
<dd *ngIf="canEditEstablishment" class="govuk-summary-list__actions">
<app-summary-record-change
[explanationText]="''"
[link]="['/workplace', workplace.uid, 'update-workplace-details']"
[hasData]="workplace.name"
(setReturnClicked)="this.setReturn()"
></app-summary-record-change>
</dd>
</dl>
</div>
</dl>
<dl class="govuk-summary-list govuk-summary-list--medium govuk-!-margin-bottom-0">
<dl class="govuk-summary-list govuk-summary-list--medium">
<div class="govuk-summary-list__row" data-testid="starters">
<dt class="govuk-summary-list__key">New starters in the last 12 months</dt>
<dd class="govuk-summary-list__value">
<app-summary-record-value>
<ng-container *ngIf="!workplace.starters?.length; else starters"> - </ng-container>
<ng-template #starters>
<ng-container *ngIf="isArray(workplace.starters)">
<ul class="govuk-list govuk-!-margin-bottom-0">
<li *ngFor="let starter of workplace.starters">{{ starter | formatSLV }}</li>
</ul>
</ng-container>
<ng-container *ngIf="!isArray(workplace.starters)">
{{ workplace.starters }}
</ng-container>
</ng-template>
</app-summary-record-value>
</dd>
<dd *ngIf="canEditEstablishment" class="govuk-summary-list__actions">
<app-summary-record-change
[explanationText]="' new starters'"
[link]="['/workplace', workplace.uid, 'do-you-have-starters']"
[hasData]="workplace.starters?.length"
(setReturnClicked)="this.setReturn()"
></app-summary-record-change>
</dd>
</div>

<div class="govuk-summary-list__row" data-testid="leavers">
<dt class="govuk-summary-list__key">Staff leavers in the last 12 months</dt>
<dd class="govuk-summary-list__value">
<app-summary-record-value>
<ng-container *ngIf="!workplace.leavers?.length; else leavers"> - </ng-container>
<ng-template #leavers>
<ng-container *ngIf="isArray(workplace.leavers)">
<ul class="govuk-list govuk-!-margin-bottom-0">
<li *ngFor="let leaver of workplace.leavers">{{ leaver | formatSLV }}</li>
</ul>
</ng-container>
<ng-container *ngIf="!isArray(workplace.leavers)">
{{ workplace.leavers }}
</ng-container>
</ng-template>
</app-summary-record-value>
</dd>
<dd *ngIf="canEditEstablishment" class="govuk-summary-list__actions">
<app-summary-record-change
[explanationText]="' leavers'"
[link]="['/workplace', workplace.uid, 'do-you-have-leavers']"
[hasData]="workplace.leavers?.length"
(setReturnClicked)="this.setReturn()"
></app-summary-record-change>
</dd>
</div>
</dl>
</div>
</ng-container>
<div class="govuk-width-container govuk-!-margin-top-5">
<h2 class="govuk-heading-m govuk-!-margin-bottom-5">Workplace details</h2>
</div>

<div data-testid="workplace-section">
<dl class="govuk-summary-list govuk-summary-list--medium govuk-!-margin-bottom-0 govuk-summary-list--top-border">
<div
*ngIf="workplace?.isRegulated"
class="govuk-summary-list__row"
Expand Down Expand Up @@ -271,117 +345,6 @@ <h2 class="govuk-heading-m govuk-!-padding-top-1">Services</h2>
</dl>

<ng-container *ngIf="!workplace?.showAddWorkplaceDetailsBanner">
<div [class.govuk-summary-list__warning]="noVacancyAndTurnoverData" data-testid="vacancies-and-turnover-section">
<h2
class="govuk-heading-m govuk-!-padding-top-1"
[ngClass]="{ 'govuk-!-margin-bottom-1': noVacancyAndTurnoverData }"
>
Vacancies and turnover
</h2>
<span *ngIf="noVacancyAndTurnoverData" class="govuk-error-message govuk-summary-list__warning-message"
>You've not added any vacancy and turnover data</span
>
<div [class.govuk-summary-list__warning]="noVacancyData" data-testid="vacancies">
<dl
class="govuk-summary-list govuk-summary-list--medium govuk-summary-list--top-border govuk-!-margin-bottom-0"
>
<div
class="govuk-summary-list__row"
[ngClass]="{
'govuk-summary-list__row--no-bottom-border': noVacancyData,
'govuk-summary-list__row--no-bottom-padding': noVacancyData
}"
data-testid="vacancies-top-row"
>
<dt class="govuk-summary-list__key">Current staff vacancies</dt>
<dd class="govuk-summary-list__value">
<app-summary-record-value>
<ng-container *ngIf="!workplace.vacancies?.length; else vacancies"> - </ng-container>
<ng-template #vacancies>
<ng-container *ngIf="isArray(workplace.vacancies)">
<ul class="govuk-list govuk-!-margin-bottom-0">
<li *ngFor="let vacancy of workplace.vacancies">{{ vacancy | formatSLV }}</li>
</ul>
</ng-container>
<ng-container *ngIf="!isArray(workplace.vacancies)">{{ workplace.vacancies }} </ng-container>
</ng-template>
</app-summary-record-value>
</dd>
<dd *ngIf="canEditEstablishment" class="govuk-summary-list__actions">
<app-summary-record-change
[explanationText]="' staff vacancies'"
[link]="['/workplace', workplace.uid, 'do-you-have-vacancies']"
[hasData]="workplace.vacancies?.length"
(setReturnClicked)="this.setReturn()"
></app-summary-record-change>
</dd>
</div>
<div *ngIf="noVacancyData" class="govuk-summary-list__row govuk-summary-list__row--error-warning-message">
<dt class="govuk-summary-list__key govuk-error-message govuk-summary-list__warning-message govuk__nowrap">
You've not added any staff vacancy data
</dt>
<dd class="govuk-summary-list__value"></dd>
<dd class="govuk-summary-list__actions"></dd>
</div>
</dl>
</div>
<dl class="govuk-summary-list govuk-summary-list--medium">
<div class="govuk-summary-list__row" data-testid="starters">
<dt class="govuk-summary-list__key">New starters in the last 12 months</dt>
<dd class="govuk-summary-list__value">
<app-summary-record-value>
<ng-container *ngIf="!workplace.starters?.length; else starters"> - </ng-container>
<ng-template #starters>
<ng-container *ngIf="isArray(workplace.starters)">
<ul class="govuk-list govuk-!-margin-bottom-0">
<li *ngFor="let starter of workplace.starters">{{ starter | formatSLV }}</li>
</ul>
</ng-container>
<ng-container *ngIf="!isArray(workplace.starters)">
{{ workplace.starters }}
</ng-container>
</ng-template>
</app-summary-record-value>
</dd>
<dd *ngIf="canEditEstablishment" class="govuk-summary-list__actions">
<app-summary-record-change
[explanationText]="' new starters'"
[link]="['/workplace', workplace.uid, 'do-you-have-starters']"
[hasData]="workplace.starters?.length"
(setReturnClicked)="this.setReturn()"
></app-summary-record-change>
</dd>
</div>

<div class="govuk-summary-list__row" data-testid="leavers">
<dt class="govuk-summary-list__key">Staff leavers in the last 12 months</dt>
<dd class="govuk-summary-list__value">
<app-summary-record-value>
<ng-container *ngIf="!workplace.leavers?.length; else leavers"> - </ng-container>
<ng-template #leavers>
<ng-container *ngIf="isArray(workplace.leavers)">
<ul class="govuk-list govuk-!-margin-bottom-0">
<li *ngFor="let leaver of workplace.leavers">{{ leaver | formatSLV }}</li>
</ul>
</ng-container>
<ng-container *ngIf="!isArray(workplace.leavers)">
{{ workplace.leavers }}
</ng-container>
</ng-template>
</app-summary-record-value>
</dd>
<dd *ngIf="canEditEstablishment" class="govuk-summary-list__actions">
<app-summary-record-change
[explanationText]="' leavers'"
[link]="['/workplace', workplace.uid, 'do-you-have-leavers']"
[hasData]="workplace.leavers?.length"
(setReturnClicked)="this.setReturn()"
></app-summary-record-change>
</dd>
</div>
</dl>
</div>

<h2 class="govuk-heading-m govuk-!-padding-top-1">Recruitment</h2>
<dl
class="govuk-summary-list govuk-summary-list--medium govuk-summary-list--top-border"
Expand Down
98 changes: 0 additions & 98 deletions frontend/src/app/shared/components/new-workplace-summary/workplace-summary.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,104 +87,6 @@ describe('NewWorkplaceSummaryComponent', () => {
});

describe('workplace-section', () => {
describe('Workplace name', () => {
it('should render the workplace name and address', async () => {
const { component, fixture, getByText } = await setup();

component.workplace.name = 'Care 1';
component.workplace.address = 'Care Home, Leeds';
component.workplace.address1 = 'Care Home';
component.workplace.address2 = 'Care Street';
component.workplace.address3 = 'Town';
component.workplace.town = 'Leeds';
component.workplace.county = 'Yorkshire';
component.workplace.postcode = 'LS1 1AB';

fixture.detectChanges();

const workplace = component.workplace;

expect(getByText('Name')).toBeTruthy();
expect(getByText('Address')).toBeTruthy();
expect(getByText(workplace.name)).toBeTruthy();
expect(getByText(workplace.address1)).toBeTruthy();
expect(getByText(workplace.address2)).toBeTruthy();
expect(getByText(workplace.address3)).toBeTruthy();
expect(getByText(workplace.town)).toBeTruthy();
expect(getByText(workplace.county)).toBeTruthy();
expect(getByText(workplace.postcode)).toBeTruthy();
});

it('should render a Change link', async () => {
const { component, fixture, getByTestId } = await setup();

component.workplace.name = 'Care Home';
component.canEditEstablishment = true;
fixture.detectChanges();

const workplaceRow = getByTestId('workplace-name-and-address');
const link = within(workplaceRow).queryByText('Change');

expect(link).toBeTruthy();
expect(link.getAttribute('href')).toEqual(`/workplace/${component.workplace.uid}/update-workplace-details`);
});

it('should render a conditional class if the workplace is not regulated and there is a number of staff error', async () => {
const { component, fixture, getByTestId } = await setup();

component.canEditEstablishment = true;
component.workplace.isRegulated = false;
component.numberOfStaffError = true;

fixture.detectChanges();

const workplaceRow = getByTestId('workplace-name-and-address');

expect(workplaceRow.getAttribute('class')).toContain('govuk-summary-list__row--no-bottom-border');
});

it('should render a conditional class if the workplace is not regulated and there is a number of staff warning', async () => {
const { component, fixture, getByTestId } = await setup();

component.canEditEstablishment = true;
component.workplace.isRegulated = false;
component.numberOfStaffWarning = true;
fixture.detectChanges();

const workplaceRow = getByTestId('workplace-name-and-address');

expect(workplaceRow.getAttribute('class')).toContain('govuk-summary-list__row--no-bottom-border');
});

it('should not render a conditional class if the workplace is regulated and there is a number of staff error', async () => {
const { component, fixture, getByTestId } = await setup();

component.canEditEstablishment = true;
component.workplace.isRegulated = true;
component.numberOfStaffError = true;

fixture.detectChanges();

const workplaceRow = getByTestId('workplace-name-and-address');

expect(workplaceRow.getAttribute('class')).not.toContain('govuk-summary-list__row--no-bottom-border');
});

it('should not render a conditional class if the workplace is regulated and there is a number of staff warning', async () => {
const { component, fixture, getByTestId } = await setup();

component.canEditEstablishment = true;
component.workplace.isRegulated = true;
component.numberOfStaffWarning = true;

fixture.detectChanges();

const workplaceRow = getByTestId('workplace-name-and-address');

expect(workplaceRow.getAttribute('class')).not.toContain('govuk-summary-list__row--no-bottom-border');
});
});

describe('CQC Location ID', () => {
it('should render the locationID and a Change link if the workplace is regulated', async () => {
const { component, fixture, getByTestId } = await setup();
Expand Down

0 comments on commit 00bc759

Please sign in to comment.