PRIME-2750 HA site list enhancement (#2532)

* initial commit

* remove unwanted code change and fix unit test

* update

remove the code to pull the care types from caretypelookup, use the ones with site instead

* fix PR issue

prime-angular-frontend/src/app/modules/health-auth-site-reg/pages/site-management-page/site-management-page.component.html

@@ -25,29 +25,60 @@
     </app-summary-card>
 
     <hr class="divider">
-
-    <div class="add-site">
-      <button mat-button
-              type="button"
-              color="primary"
-              (click)="addSite()">
-        <mat-icon>add_business</mat-icon>
-        Add Site
-      </button>
+    <div class="row">
+      <div class="col-8">
+
+        <form [formGroup]="form"
+              novalidate>
+          <mat-form-field class="filter">
+            <mat-label>Vendor</mat-label>
+            <mat-select formControlName="vendorCode">
+              <mat-option value="all">All</mat-option>
+              <mat-option *ngFor="let vendor of vendors"
+                          [value]="vendor.code">
+                {{ vendor.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field class="filter">
+            <mat-label>Care Type</mat-label>
+            <mat-select formControlName="careTypeCode">
+              <mat-option value="all">All</mat-option>
+              <mat-option *ngFor="let careType of careTypes"
+                          [value]="careType">
+                {{ careType }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </form>
+      </div>
+      <div class="col-4">
+        <div class="add-site">
+          <button mat-button
+                  type="button"
+                  color="primary"
+                  (click)="addSite()">
+            <mat-icon>add_business</mat-icon>
+            Add Site
+          </button>
+        </div>
+      </div>
     </div>
 
   </ng-container>
 
-  <ng-container *ngFor="let healthAuthoritySite of healthAuthoritySites$ | async; trackBy: trackBySiteId">
+  <ng-container *ngFor="let healthAuthoritySite of healthAuthoritySites ; trackBy: trackBySiteId">
 
     <app-summary-card icon="store"
                       title="Site Information"
                       [menu]="healthAuthoritySiteMenu"
                       [menuOutletContext]="{ healthAuthoritySite: healthAuthoritySite, healthAuthorityId: healthAuthorityId }"
                       [properties]="[
-                            { key: 'Site Name', value: healthAuthoritySite?.siteName },
-                            { key: 'Site ID', value: healthAuthoritySite?.pec },
-                            { key: 'Vendor', value: healthAuthoritySite?.healthAuthorityVendor?.vendorCode | configCode : 'vendors' },
+                            { key: 'Site Name', value: healthAuthoritySite?.siteName, _50: true },
+                            { key: 'Site ID', value: healthAuthoritySite?.pec, _50: true },
+                            { key: 'Care Type', value: healthAuthoritySite?.healthAuthorityCareType?.careType, _50: true },
+                            { key: 'Vendor', value: healthAuthoritySite?.healthAuthorityVendor?.vendorCode | configCode : 'vendors', _50: true },
                             { key: healthAuthoritySite?.submittedDate ? 'Last Submitted by' : 'Last Updated by', value: getLastUpdatedUser(healthAuthoritySite?.authorizedUserName, healthAuthoritySite?.updatedTimeStamp)},
                       ]">
       <ng-container *ngIf="healthAuthoritySite.isIncomplete()"

prime-angular-frontend/src/app/modules/health-auth-site-reg/pages/site-management-page/site-management-page.component.scss

@@ -33,6 +33,7 @@ div.add-site {
     margin-left: -1rem;
     padding-top: .2rem;
   }
+
   .mat-card-content {
     div {
       color: theme-palette(blue, light);
@@ -48,6 +49,7 @@ div.add-site {
       }
     }
   }
+
   .mat-card-actions {
     text-align: right;
   }
@@ -64,3 +66,7 @@ div.add-site {
 .green-icon {
   color: theme-palette(green);
 }
+
+.filter {
+  margin-right: 10px;
+}

prime-angular-frontend/src/app/modules/health-auth-site-reg/pages/site-management-page/site-management-page.component.spec.ts

@@ -15,6 +15,8 @@ import { CapitalizePipe } from '@shared/pipes/capitalize.pipe';
 import { AuthorizedUserService } from '@health-auth/shared/services/authorized-user.service';
 import { SiteManagementPageComponent } from './site-management-page.component';
 import { AuthService } from '@auth/shared/services/auth.service';
+import { ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('SiteManagementPageComponent', () => {
   let component: SiteManagementPageComponent;
@@ -23,9 +25,11 @@ describe('SiteManagementPageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
+        ReactiveFormsModule,
         HttpClientTestingModule,
         RouterTestingModule,
-        NgxMaterialModule
+        NgxMaterialModule,
+        BrowserAnimationsModule
       ],
       declarations: [
         SiteManagementPageComponent,

prime-angular-frontend/src/app/modules/health-auth-site-reg/pages/site-management-page/site-management-page.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { Observable, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 
 import { ArrayUtils } from '@lib/utils/array-utils.class';
 import { RouteUtils } from '@lib/utils/route-utils.class';
@@ -16,6 +16,10 @@ import { HealthAuthoritySite } from '@health-auth/shared/models/health-authority
 import { HealthAuthoritySiteList } from '@health-auth/shared/models/health-authority-site-list.model';
 import { AuthorizedUserService } from '@health-auth/shared/services/authorized-user.service';
 import { FormatDatePipe } from '@shared/pipes/format-date.pipe';
+import { Config } from '@config/config.model';
+import { ConfigService } from '@config/config.service';
+import { CareSettingEnum } from '@shared/enums/care-setting.enum';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-site-management-page',
@@ -27,20 +31,38 @@ export class SiteManagementPageComponent implements OnInit {
   public busy: Subscription;
   public title: string;
   public healthAuthorityId: number;
-  public healthAuthoritySites$: Observable<HealthAuthoritySiteList[] | null>;
+  public healthAuthoritySites: HealthAuthoritySiteList[];
   public routeUtils: RouteUtils;
   public HealthAuthorityEnum = HealthAuthorityEnum;
   public SiteStatusType = SiteStatusType;
+  public vendors: Config<number>[];
+  public careTypes: string[];
+  public form: FormGroup;
 
   constructor(
     private route: ActivatedRoute,
+    private fb: FormBuilder,
     private router: Router,
     private authorizedUserService: AuthorizedUserService,
     private authorizedUserResource: AuthorizedUserResource,
-    private formatDatePipe: FormatDatePipe
+    private formatDatePipe: FormatDatePipe,
+    private configService: ConfigService,
   ) {
     this.title = this.route.snapshot.data.title;
     this.routeUtils = new RouteUtils(route, router, HealthAuthSiteRegRoutes.MODULE_PATH);
+
+    this.careTypes = ["All"];
+    this.vendors = this.configService.vendors
+      .filter(v => v.careSettingCode === CareSettingEnum.HEALTH_AUTHORITY)
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  public get vendorCode(): FormControl {
+    return this.form.get('vendorCode') as FormControl;
+  }
+
+  public get careTypeCode(): FormControl {
+    return this.form.get('careTypeCode') as FormControl;
   }
 
   public viewAuthorizedUser(healthAuthorityId: number): void {
@@ -82,11 +104,62 @@ export class SiteManagementPageComponent implements OnInit {
   }
 
   public ngOnInit(): void {
+    this.createFormInstance();
+    this.initForm();
     const authorizedUser = this.authorizedUserService.authorizedUser;
     this.healthAuthorityId = authorizedUser.healthAuthorityCode;
-    this.healthAuthoritySites$ = this.authorizedUserResource.getAuthorizedUserSites(authorizedUser.id);
+    this.authorizedUserResource.getAuthorizedUserSites(authorizedUser.id)
+      .subscribe((sites: HealthAuthoritySiteList[]) => {
+        this.healthAuthoritySites = sites.sort((a, b) => a.siteName && b.siteName ? a.siteName.toLocaleLowerCase().localeCompare(b.siteName.toLocaleLowerCase()) : 0)
+
+        const haVendors = this.healthAuthoritySites.map((s) => {
+          return s.healthAuthorityVendor.vendorCode;
+        });
+
+        const haCareTypes = this.healthAuthoritySites.map((s) => {
+          return s.healthAuthorityCareType.careType;
+        });
+
+        this.careTypes = [... new Set(haCareTypes)].sort((a, b) => a.localeCompare(b));
+        this.vendors = this.vendors.filter((v) => haVendors.some((hav) => hav === v.code)).sort((a, b) => a.name.localeCompare(b.name));
+      });
   }
 
+  private createFormInstance() {
+    this.form = this.fb.group({
+      vendorCode: ['all', []],
+      careTypeCode: ['all', []],
+    });
+  }
+
+  private initForm() {
+    this.vendorCode.valueChanges.subscribe(() => {
+      this.filterSites();
+    });
+    this.careTypeCode.valueChanges.subscribe(() => {
+      this.filterSites();
+    })
+  }
+
+  public filterSites() {
+    const authorizedUser = this.authorizedUserService.authorizedUser;
+    this.authorizedUserResource.getAuthorizedUserSites(authorizedUser.id)
+      .subscribe((sites: HealthAuthoritySiteList[]) => {
+        this.healthAuthoritySites = sites.sort((a, b) => a.siteName && b.siteName ? a.siteName.toLocaleLowerCase().localeCompare(b.siteName.toLocaleLowerCase()) : 0);
+        if (this.careTypeCode.value !== "all") {
+          this.healthAuthoritySites = this.healthAuthoritySites.filter((s) => {
+            return s.healthAuthorityCareType.careType === this.careTypeCode.value;
+          })
+        }
+        if (this.vendorCode.value !== "all") {
+          this.healthAuthoritySites = this.healthAuthoritySites.filter((s) => {
+            return s.healthAuthorityVendor.vendorCode === this.vendorCode.value;
+          })
+        }
+      });
+  }
+
+
   private redirectTo(healthAuthorityId: number, healthAuthoritySiteId: number, pagePath: string): void {
     this.routeUtils.routeRelativeTo([
       HealthAuthSiteRegRoutes.HEALTH_AUTHORITIES,

prime-angular-frontend/src/app/modules/health-auth-site-reg/shared/models/health-authority-site-list.model.ts

@@ -4,9 +4,11 @@ import { SiteStatusType } from '@lib/enums/site-status.enum';
 
 import { AbstractBaseHealthAuthoritySite } from '@health-auth/shared/models/abstract-base-health-authority-site.class';
 import { BaseHealthAuthoritySite } from '@health-auth/shared/models/base-health-authority-site.model';
+import { HealthAuthorityCareType } from './health-authority-care-type.model';
 
 export interface HealthAuthoritySiteListDto extends BaseHealthAuthoritySite {
   healthAuthorityVendor: HealthAuthorityVendor;
+  healthAuthorityCareType: HealthAuthorityCareType;
   siteName: string;
   pec: string;
   updatedTimeStamp: string;
@@ -18,6 +20,7 @@ export class HealthAuthoritySiteList extends AbstractBaseHealthAuthoritySite imp
     public id: number,
     public healthAuthorityOrganizationId: HealthAuthorityEnum,
     public healthAuthorityVendor: HealthAuthorityVendor,
+    public healthAuthorityCareType: HealthAuthorityCareType,
     public siteName,
     public pec: string,
     public readonly completed: boolean,
@@ -30,6 +33,7 @@ export class HealthAuthoritySiteList extends AbstractBaseHealthAuthoritySite imp
     super(id, healthAuthorityOrganizationId, completed, submittedDate, approvedDate, status);
 
     this.healthAuthorityVendor = healthAuthorityVendor;
+    this.healthAuthorityCareType = healthAuthorityCareType;
     this.siteName = siteName;
     this.pec = pec;
     this.updatedTimeStamp = updatedTimeStamp;
@@ -51,6 +55,7 @@ export class HealthAuthoritySiteList extends AbstractBaseHealthAuthoritySite imp
       healthAuthoritySiteListDto.id,
       healthAuthoritySiteListDto.healthAuthorityOrganizationId,
       healthAuthoritySiteListDto.healthAuthorityVendor,
+      healthAuthoritySiteListDto.healthAuthorityCareType,
       healthAuthoritySiteListDto.siteName,
       healthAuthoritySiteListDto.pec,
       healthAuthoritySiteListDto.completed,

prime-angular-frontend/src/app/shared/components/site/summary-card/summary-card.component.html

@@ -9,10 +9,12 @@
                   [ngTemplateOutletContext]="menuOutletContext"></ng-container>
   </mat-card-header>
   <mat-card-content>
-    <ng-container *ngFor="let prop of properties"
-                  [ngTemplateOutlet]="property"
-                  [ngTemplateOutletContext]="{ property: prop }">
-    </ng-container>
+    <div class="row">
+      <ng-container *ngFor="let prop of properties"
+                    [ngTemplateOutlet]="property"
+                    [ngTemplateOutletContext]="{ property: prop }">
+      </ng-container>
+    </div>
 
     <ng-content></ng-content>
   </mat-card-content>
@@ -29,8 +31,14 @@
 
 <ng-template #property
              let-property="property">
-  <div *ngIf="property.value">
+  <div *ngIf="property.value"
+       [ngClass]="property._50 ? 'col-md-6' : 'col-12'">
+    <!-- if _50 is true, take 50% wide by using col-md-6, otherwise 100% wide -->
     <strong>{{ property.key }}</strong>
-    <span [ngClass]="{ 'text-danger font-weight-bold' : property.danger }">{{ property.value | default }}</span>
+    <span [ngClass]="
+       { 'text-danger font-weight-bold'
+       :
+       property.danger
+       }">{{ property.value | default }}</span>
   </div>
 </ng-template>

prime-dotnet-webapi/ViewModels/Health Authority Sites/HealthAuthoritySiteListViewModel.cs

@@ -12,6 +12,7 @@ public class HealthAuthoritySiteListViewModel
         public string SiteName { get; set; }
         public string PEC { get; set; }
         public HealthAuthorityVendorViewModel HealthAuthorityVendor { get; set; }
+        public HealthAuthorityCareTypeViewModel HealthAuthorityCareType { get; set; }
         public bool Completed { get; set; }
         public DateTimeOffset? SubmittedDate { get; set; }
         public DateTimeOffset? ApprovedDate { get; set; }