Feat/1321 home page no dropdown

src/app/app.component.html

@@ -6,7 +6,8 @@
     *ngIf="
       (standAloneAccount && newHomeDesignFlag && !isAdminSection) ||
         (parentAccount && newHomeDesignParentFlag && !isAdminSection) ||
-        (subsAccount && newHomeDesignParentFlag && !isAdminSection);
+        (subsAccount && newHomeDesignParentFlag && !isAdminSection) ||
+        (isSelectedWorkplace && newHomeDesignParentFlag && !isAdminSection);
       else otherView
     "
   >

src/app/app.component.ts

@@ -26,6 +26,7 @@ export class AppComponent implements OnInit {
   public newDataAreaFlag: boolean;
   public parentAccount: boolean;
   public subsAccount: boolean;
+  public isSelectedWorkplace: boolean;
   @ViewChild('top') top: ElementRef;
   @ViewChild('content') content: ElementRef;
 
@@ -66,7 +67,7 @@ export class AppComponent implements OnInit {
       this.standAloneAccount = this.establishmentService.standAloneAccount;
       this.parentAccount = this.establishmentService.primaryWorkplace?.isParent;
       this.subsAccount = this.establishmentService.primaryWorkplace?.parentName ? true : false;
-
+      this.isSelectedWorkplace = this.establishmentService.getIsSelectedWorkplace();
       window.scrollTo(0, 0);
       if (document.activeElement && document.activeElement !== document.body) {
         (document.activeElement as HTMLElement).blur();

src/app/core/breadcrumb/journey.workplaces.ts

@@ -146,7 +146,7 @@ export const myWorkplaceJourney: JourneyRoute = {
 export const allWorkplacesJourney: JourneyRoute = {
   children: [
     {
-      title: 'All workplaces',
+      title: 'Your other workplaces',
       path: Path.ALL_WORKPLACES,
       children: [
         {

src/app/core/components/standAloneAccount/standAloneAccount.component.html

@@ -1,4 +1,10 @@
 <div id="content">
+  <ng-container *ngIf="isSelectedWorkplace">
+    <app-back-to-parent-link
+      [primaryWorkplaceName]="primaryWorkplaceName"
+      (backToParentLinkClicked)="goBackToParent()"
+    ></app-back-to-parent-link>
+  </ng-container>
   <div class="asc-tabs-container">
     <div class="govuk-width-container">
       <app-new-tabs (selectedTabClick)="tabClickEvent($event)" [tabs]="tabs" [dashboardView]="dashboardView">

src/app/core/components/standAloneAccount/standAloneAccount.component.ts

@@ -1,16 +1,17 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
 import { BenchmarksService } from '@core/services/benchmarks.service';
 import { EstablishmentService } from '@core/services/establishment.service';
 import { PermissionsService } from '@core/services/permissions/permissions.service';
 import { TabsService } from '@core/services/tabs.service';
 import { Subscription } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-stand-alone-account',
   templateUrl: './standAloneAccount.component.html',
   styleUrls: ['./standAloneAccount.component.scss'],
 })
-export class StandAloneAccountComponent implements OnInit {
+export class StandAloneAccountComponent implements OnInit, OnChanges {
   @Input() dashboardView: boolean;
 
   private subscriptions: Subscription = new Subscription();
@@ -21,20 +22,29 @@ export class StandAloneAccountComponent implements OnInit {
   public canViewListOfWorkers: boolean;
   public canViewBenchmarks: boolean;
   public tabs: { title: string; slug: string; active: boolean }[];
+  public primaryWorkplaceName: string;
+  public isSelectedWorkplace: boolean;
 
   constructor(
     private establishmentService: EstablishmentService,
     private permissionsService: PermissionsService,
     private tabsService: TabsService,
     private benchmarksService: BenchmarksService,
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
-    const { uid, id } = this.establishmentService.primaryWorkplace;
+    const { uid, id, name, isParent } = this.establishmentService.primaryWorkplace;
     this.workplaceUid = uid;
     this.workplaceId = id;
     this.getPermissions();
     this.setTabs();
+    this.primaryWorkplaceName = isParent ? name : null;
+    this.isSelectedWorkplace = this.establishmentService.getIsSelectedWorkplace();
+  }
+
+  ngOnChanges(): void {
+    this.isSelectedWorkplace = this.establishmentService.getIsSelectedWorkplace();
   }
 
   public tabClickEvent(properties: { tabSlug: string }): void {
@@ -58,4 +68,9 @@ export class StandAloneAccountComponent implements OnInit {
 
     this.tabs = tabs;
   }
+
+  public goBackToParent(): void {
+    this.isSelectedWorkplace = false;
+    this.router.navigate(['/']);
+  }
 }

src/app/core/services/establishment.service.spec.ts

@@ -40,4 +40,17 @@ describe('EstablishmentService', () => {
       expect(req.request.body).toEqual(requestBody);
     });
   });
+
+  describe('is selected Workplace', () => {
+    it('sets the isSelectectedWorkplace value', async () => {
+      service.setIsSelectedWorkplace(true);
+      expect(service.getIsSelectedWorkplace()).toBeTrue();
+    });
+
+    it('gets the isSelectectedWorkplace value', async () => {
+      service.setIsSelectedWorkplace(false);
+      const isSelectectedWorkplace = service.getIsSelectedWorkplace();
+      expect(isSelectectedWorkplace).toBeFalse();
+    });
+  });
 });

src/app/core/services/establishment.service.ts

@@ -78,6 +78,7 @@ export class EstablishmentService {
   private _employerTypeHasValue: boolean = null;
   private _inStaffRecruitmentFlow: boolean;
   private _standAloneAccount$: boolean;
+  private _isSelectedWorkplace: boolean;
 
   constructor(private http: HttpClient) {}
 
@@ -115,6 +116,14 @@ export class EstablishmentService {
     this._establishment$.next(workplace);
   }
 
+  public setIsSelectedWorkplace(value: boolean) {
+    this._isSelectedWorkplace = value;
+  }
+
+  public getIsSelectedWorkplace(): boolean {
+    return this._isSelectedWorkplace;
+  }
+
   public get establishment$() {
     if (this._establishment$.value !== null) {
       return this._establishment$.asObservable();

src/app/features/new-dashboard/benchmarks-tab/benchmarks-tab.component.html

@@ -1,6 +1,7 @@
 <app-new-dashboard-header
   [tab]="'benchmarks'"
   [updatedDate]="tilesData?.meta.lastUpdated"
+  [workplace]="workplace"
   data-html2canvas-ignore
 ></app-new-dashboard-header>
 

src/app/features/new-dashboard/dashboard/dashboard.component.html

@@ -1,11 +1,17 @@
 <ng-container [ngSwitch]="selectedTab">
   <ng-container *ngSwitchCase="'home'">
     <ng-container *ngIf="!isParent; else parent">
-      <app-new-home-tab [workplace]="workplace" [meta]="tilesData?.meta" data-testid="home-tab"></app-new-home-tab>
+      <app-new-home-tab
+        [workplace]="workplace"
+        [primaryEstablishment]="primaryEstablishment"
+        [meta]="tilesData?.meta"
+        data-testid="home-tab"
+      ></app-new-home-tab>
     </ng-container>
     <ng-template #parent>
       <app-parent-home-tab
         [workplace]="workplace"
+        [primaryEstablishment]="primaryEstablishment"
         [meta]="tilesData?.meta"
         data-testid="parentHomeTab"
       ></app-parent-home-tab>

src/app/features/new-dashboard/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, OnChanges } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BenchmarksResponse } from '@core/model/benchmarks.model';
 import { Establishment } from '@core/model/establishment.model';
@@ -16,10 +16,12 @@ import { Subscription } from 'rxjs';
   selector: 'app-new-dashboard',
   templateUrl: './dashboard.component.html',
 })
-export class NewDashboardComponent implements OnInit, OnDestroy {
+export class NewDashboardComponent implements OnInit, OnDestroy, OnChanges {
   private subscriptions: Subscription = new Subscription();
   public selectedTab: string;
+  public primaryEstablishment: Establishment;
   public workplace: Establishment;
+  public subWorkplace: Establishment;
   public workerCount: number;
   public workers: Worker[];
   public trainingCounts: TrainingCounts;
@@ -33,6 +35,8 @@ export class NewDashboardComponent implements OnInit, OnDestroy {
   public isParent: boolean;
   @Input() isStandAloneAccount: boolean;
   @Input() isSubsAccount: boolean;
+  public primaryWorkplaceName: string;
+  public isSelectedWorkplace: boolean;
 
   constructor(
     private route: ActivatedRoute,
@@ -47,7 +51,11 @@ export class NewDashboardComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.newDataAreaFlag = this.featureFlagsService.newBenchmarksDataArea;
-    this.workplace = this.establishmentService.primaryWorkplace;
+    //this.workplace = this.establishmentService.primaryWorkplace;
+    this.isSelectedWorkplace = this.establishmentService.getIsSelectedWorkplace() ? true : false;
+    this.primaryEstablishment = this.establishmentService.primaryWorkplace;
+    this.subWorkplace = this.establishmentService?.establishment;
+    this.workplace = this.isSelectedWorkplace ? this.subWorkplace : this.primaryEstablishment;
     this.canSeeNewDataArea = [1, 2, 8].includes(this.workplace.mainService.reportingID);
     this.tilesData = this.benchmarksService.benchmarksData;
 
@@ -68,6 +76,10 @@ export class NewDashboardComponent implements OnInit, OnDestroy {
     }
   }
 
+  ngOnChanges(): void {
+    this.workplace = this.isSelectedWorkplace ? this.subWorkplace : this.primaryEstablishment;
+  }
+
   private getPermissions(): void {
     this.canViewListOfWorkers = this.permissionsService.can(this.workplace.uid, 'canViewListOfWorkers');
     this.canViewEstablishment = this.permissionsService.can(this.workplace.uid, 'canViewEstablishment');

src/app/features/new-dashboard/home-tab/home-tab.component.html

@@ -1,4 +1,4 @@
-<app-new-dashboard-header tab="home"></app-new-dashboard-header>
+<app-new-dashboard-header tab="home" [workplace]="workplace"></app-new-dashboard-header>
 <div class="govuk-width-container govuk-!-margin-top-7">
   <ng-container *ngIf="newHomeDesignParentFlag || newHomeDesignParentFlag">
     <app-alert></app-alert>

src/app/features/new-dashboard/parent-home-tab/parent-home-tab.component.html

@@ -1,4 +1,4 @@
-<app-new-dashboard-header tab="home"></app-new-dashboard-header>
+<app-new-dashboard-header tab="home" [workplace]="workplace"></app-new-dashboard-header>
 <div class="govuk-width-container govuk-!-margin-top-7">
   <ng-container *ngIf="newHomeDesignParentFlag && isParentApprovedBannerViewed === false">
     <app-alert

src/app/features/new-dashboard/staff-tab/staff-tab.component.html

@@ -2,6 +2,7 @@
   [tab]="'staff-records'"
   [canAddWorker]="canAddWorker"
   [updatedDate]="staffLastUpdated"
+  [workplace]="workplace"
   data-cy="dashboard-header"
 ></app-new-dashboard-header>
 <div class="govuk-width-container govuk-!-margin-top-2">

src/app/features/new-dashboard/training-tab/training-tab.component.html

@@ -4,6 +4,7 @@
   [updatedDate]="tAndQsLastUpdated"
   [tAndQCount]="totalRecords"
   [hasWorkers]="workers?.length > 0"
+  [workplace]="workplace"
 ></app-new-dashboard-header>
 <div class="govuk-width-container govuk-!-padding-top-2">
   <app-alert></app-alert>

src/app/features/new-dashboard/workplace-tab/workplace-tab.component.html

@@ -1,4 +1,8 @@
-<app-new-dashboard-header [tab]="'workplace'" [updatedDate]="workplace.updated"></app-new-dashboard-header>
+<app-new-dashboard-header
+  [tab]="'workplace'"
+  [updatedDate]="workplace.updated"
+  [workplace]="workplace"
+></app-new-dashboard-header>
 <div class="govuk-width-container govuk-!-padding-top-2">
   <ng-container *ngIf="canEditEstablishment && addWorkplaceDetailsBanner">
     <app-inset-text [color]="'todo'">

src/app/features/workplace/view-my-workplaces/view-my-workplaces.component.html

@@ -1,11 +1,12 @@
 <app-error-summary *ngIf="serverError" [serverError]="serverError"></app-error-summary>
 
-<div class="govuk-grid-row govuk-!-margin-bottom-5">
+<div class="govuk-grid-row govuk-!-margin-bottom-4">
   <div class="govuk-grid-column-full govuk__flex govuk__justify-content-space-between govuk__align-items-flex-end">
     <h1 class="govuk-heading-l govuk-!-margin-bottom-0">
       <span *ngIf="primaryWorkplace.name" class="govuk-caption-xl">{{ primaryWorkplace.name }}</span>
       Your other workplaces ({{ activeWorkplaceCount }})
     </h1>
+
     <a
       *ngIf="canAddEstablishment"
       class="govuk-button govuk-!-margin-bottom-0"
@@ -16,6 +17,9 @@ <h1 class="govuk-heading-l govuk-!-margin-bottom-0">
       Add a workplace
     </a>
   </div>
+  <div class="govuk-grid-column-full govuk__flex govuk__justify-content-space-between govuk-!-margin-top-4">
+    <a [routerLink]="['/about-parents']" class="govuk-body govuk-link">What you can do as a parent workplace</a>
+  </div>
 </div>
 
 <div *ngIf="totalWorkplaceCount; else noWorkplaces">
@@ -69,14 +73,14 @@ <h1 class="govuk-heading-l govuk-!-margin-bottom-0">
 <ng-template #noWorkplaces>
   <div data-testid="noWorkplacesMessage">
     <p><a [routerLink]="['/']">What you can do as a parent workplace</a></p>
-    <br/>
-      <p>You've not added any workplaces yet.</p>
-      <p>To add a workplace, you'll need to know:</p>
-      <ul class="govuk-list govuk-list--bullet">
-        <li>their main service and whether it's regulated by the Care Quality Commission (CQC)</li>
-        <li>the name and address of the workplace</li>
-        <li>what type of employer they are (for example, local authority, private)</li>
-        <li>how many members of staff they have</li>
-      </ul>
+    <br />
+    <p>You've not added any workplaces yet.</p>
+    <p>To add a workplace, you'll need to know:</p>
+    <ul class="govuk-list govuk-list--bullet">
+      <li>their main service and whether it's regulated by the Care Quality Commission (CQC)</li>
+      <li>the name and address of the workplace</li>
+      <li>what type of employer they are (for example, local authority, private)</li>
+      <li>how many members of staff they have</li>
+    </ul>
   </div>
 </ng-template>

src/app/features/workplace/view-my-workplaces/view-my-workplaces.component.spec.ts

@@ -262,4 +262,12 @@ describe('ViewMyWorkplacesComponent', () => {
       expect((getByLabelText('Search child workplace records') as HTMLInputElement).value).toBe('mysupersearch');
     });
   });
+
+  it('should show about parents link', async () => {
+    const { getByText } = await setup();
+    const aboutParentsLink = getByText('What you can do as a parent workplace');
+
+    expect(aboutParentsLink).toBeTruthy();
+    expect(aboutParentsLink.getAttribute('href')).toEqual('/about-parents');
+  });
 });

src/app/features/workplace/view-workplace/view-workplace.component.ts

@@ -40,6 +40,7 @@ export class ViewWorkplaceComponent implements OnInit, OnDestroy {
   private showBanner = false;
   public newDataAreaFlag: boolean;
   public canSeeNewDataArea: boolean;
+  public newHomeDesignParentFlag: boolean;
 
   constructor(
     private alertService: AlertService,
@@ -68,6 +69,7 @@ export class ViewWorkplaceComponent implements OnInit, OnDestroy {
     this.canDeleteEstablishment = this.permissionsService.can(this.workplace.uid, 'canDeleteEstablishment');
     this.newDataAreaFlag = this.featureFlagsService.newBenchmarksDataArea;
     this.canSeeNewDataArea = [1, 2, 8].includes(this.workplace.mainService.reportingID);
+    this.newHomeDesignParentFlag = this.featureFlagsService.newHomeDesignParentFlag;
 
     if (this.workplace && this.workplace.locationId) {
       this.subscriptions.add(

src/app/features/workplace/workplace-info-panel/workplace-info-panel.component.html

@@ -1,5 +1,5 @@
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-one-third">
+  <div class="govuk-grid-column-one-third govuk-!-width-one-quarter">
     <p>
       <ng-container *ngIf="canViewEstablishment; else noPermission">
         <a href="#" (click)="setEmployerType($event)">
@@ -10,11 +10,11 @@
         {{ workplace.name }}
       </ng-template>
     </p>
-    <p class="govuk-!-margin-bottom-1"><strong>Last updated</strong></p>
+    <p class="govuk-!-margin-bottom-1"><strong>Last update</strong></p>
     <p class="govuk-!-margin-bottom-0">{{ workplace.updated | date: 'd MMMM y' }}</p>
   </div>
 
-  <div class="govuk-grid-column-two-thirds">
+  <div class="govuk-grid-column-three-quarters">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <p>
@@ -44,14 +44,15 @@
         </p>
         <p class="govuk-!-margin-bottom-0">
           {{ workplace.dataPermissions | dataViewPermissions }}
+          <span *ngIf="workplace.dataPermissions !== 'None'">(view only)</span>
           <span class="govuk-util__float-right" *ngIf="canChangePermissionsForSubsidiary">
             <ng-container *ngIf="workplace.dataOwnershipRequested; else dataPermissions">
               <a (click)="cancelChangeDataOwnerRequest($event)" href="#">Data request pending</a>
             </ng-container>
             <ng-template #dataPermissions>
               <ng-container *ngIf="workplace.dataOwner === dataOwner.Parent; else workplaceIsDataOwner">
                 <ng-container *ngIf="primaryWorkplace.isParent; else notParent">
-                  <a (click)="setDataPermissions($event)" href="#">Set data permissions</a>
+                  <a (click)="setDataPermissions($event)" href="#">Change data permissions</a>
                 </ng-container>
                 <ng-template #notParent>
                   <a (click)="onChangeDataOwner($event)" href="#">Change data owner</a>