From 61ab849ddbac039b0fa172c5c1f15fafcbb2b14e Mon Sep 17 00:00:00 2001
From: Jack Wong <108699279+bergomi02@users.noreply.github.com>
Date: Wed, 27 Nov 2024 14:23:08 -0800
Subject: [PATCH] PRIME-2794 Change vertical dot menu to buttons (#2601)

* initial commit

* update icon

* change from feedback

* change icon

* Update css to improve style for small screen size

* fix other PR issues

* Minor comment update

* Update label

---------

Co-authored-by: Alan Leung <alan.leung57@gmail.com>
---
 .../remote-users-page.component.html          | 20 +++---
 .../site-management-page.component.html       | 67 ++++++++++---------
 .../site-management-page.component.scss       | 33 +++++++++
 .../site-management-page.component.ts         |  3 +-
 .../overview-container.component.html         |  6 +-
 5 files changed, 87 insertions(+), 42 deletions(-)

diff --git a/prime-angular-frontend/src/app/modules/site-registration/pages/remote-users-page/remote-users-page.component.html b/prime-angular-frontend/src/app/modules/site-registration/pages/remote-users-page/remote-users-page.component.html
index 6b776051d6..7e7e0b03be 100644
--- a/prime-angular-frontend/src/app/modules/site-registration/pages/remote-users-page/remote-users-page.component.html
+++ b/prime-angular-frontend/src/app/modules/site-registration/pages/remote-users-page/remote-users-page.component.html
@@ -25,6 +25,16 @@
 
   </form>
 
+  <button mat-button
+          *ngIf="formState.hasRemoteUsers.value"
+          type="button"
+          color="primary"
+          class="mb-3"
+          (click)="onAdd()">
+    <mat-icon class="add-icon">add</mat-icon>
+    Add Remote Practitioners
+  </button>
+
   <div class="mb-4"
        *ngIf="formState.form.dirty && !lastRemoteUserRemoved">
     <app-alert type="success"
@@ -99,15 +109,7 @@
     </ng-container>
   </app-alert>
 
-  <button mat-button
-          *ngIf="formState.hasRemoteUsers.value"
-          type="button"
-          color="primary"
-          class="mb-3"
-          (click)="onAdd()">
-    <mat-icon class="add-icon">add</mat-icon>
-    Add Remote Practitioners
-  </button>
+
 
   <app-page-footer [isInitialEnrolment]="!isCompleted"
                    [primaryActionLabel]="(hasBeenSubmitted) ? 'Continue' : 'Save and Continue'"
diff --git a/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.html b/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.html
index bd3e490e1f..53074ced79 100644
--- a/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.html
+++ b/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.html
@@ -174,25 +174,29 @@
 
   <ng-template #organizationMenu
                let-organization="organization">
-    <button mat-icon-button
-            [matMenuTriggerFor]="rootMenu"
-            [disabled]="isPendingTransfer()">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-
-    <mat-menu #rootMenu="matMenu"
-              aria-label="Organization actions menu">
-      <button mat-menu-item
+    <div class="mat-header-button-group">
+      <button mat-button
+              class="title_button"
+              type="button"
+              color="primary"
+              title="View/Update Organization Information"
+              [disabled]="isPendingTransfer()"
               (click)="viewOrganization(organization)">
-        <span>View/Update Organization</span>
+        <mat-icon>description</mat-icon>
+        <span class="icon-text">Organization Info</span>
       </button>
 
-      <button mat-menu-item
+      <button mat-button
+              class="title_button"
+              type="button"
+              color="primary"
+              title="Download Organization Agreement"
               [matMenuTriggerFor]="subMenu"
-              [disabled]="!organizationAgreements?.length">
-        <span>Download Organization Agreement</span>
+              [disabled]="!organizationAgreements?.length || isPendingTransfer()">
+        <mat-icon>cloud_download</mat-icon>
+        <span class="icon-text">Organization Agreements</span>
       </button>
-    </mat-menu>
+    </div>
 
     <mat-menu #subMenu="matMenu">
       <button *ngFor="let agreement of organizationAgreements"
@@ -201,31 +205,34 @@
         <span>{{ AgreementType[agreement.agreementType] | case: 'snake' : 'space' | capitalize: true }}</span>
       </button>
     </mat-menu>
-
   </ng-template>
 
   <ng-template #siteMenu
                let-site="site"
                let-organizationId="organizationId">
-    <button mat-icon-button
-            [matMenuTriggerFor]="menu"
-            [disabled]="isPendingTransfer()">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-
-    <mat-menu #menu="matMenu"
-              aria-label="Site actions menu">
-      <button mat-menu-item
+    <div class="mat-header-button-group">
+      <button mat-button
+              class="title_button"
+              type="button"
+              color="primary"
+              title="View/Update Site Information"
+              [disabled]="isPendingTransfer()"
               (click)="viewSite(organizationId, site)">
-        <span>View/Update Site Information</span>
+        <mat-icon>description</mat-icon>
+        <span class="icon-text">Site Info</span>
       </button>
-      <button *ngIf="site.careSettingCode === CareSettingEnum.PRIVATE_COMMUNITY_HEALTH_PRACTICE"
-              mat-menu-item
-              [disabled]="!site.completed || site.status === SiteStatusType.IN_REVIEW"
+      <button mat-button
+              class="title_button"
+              type="button"
+              color="primary"
+              title="View/Update Remote Practitioners"
+              *ngIf="site.careSettingCode === CareSettingEnum.PRIVATE_COMMUNITY_HEALTH_PRACTICE"
+              [disabled]="isPendingTransfer() || !site.completed || site.status === SiteStatusType.IN_REVIEW || site.status === SiteStatusType.LOCKED"
               (click)="viewSiteRemoteUsers(organizationId, site)">
-        <span>View/Update Remote Practitioners</span>
+        <mat-icon>folder_shared</mat-icon>
+        <span class="icon-text">Remote Practitioners</span>
       </button>
-    </mat-menu>
+    </div>
   </ng-template>
 
 </app-page>
diff --git a/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.scss b/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.scss
index 141897fb59..dadfbd6a13 100644
--- a/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.scss
+++ b/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.scss
@@ -1,6 +1,33 @@
 @import 'palette';
 @import 'bootstrap/bootstrap-imports';
 
+/* Styles for screen widths lower than 1100px */
+.icon-text {
+  display: none;
+  padding-left: 5px;
+}
+
+.title_button {
+  padding-top: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  min-width: 40px;
+}
+
+/* Styles for screens wider than 1100px */
+@media (min-width: 1100px) {
+  .icon-text {
+    display: block;
+    float: right;
+  }
+
+  .title_button {
+    padding-left: 10px;
+    padding-right: 10px;
+    min-width: 64px;
+  }
+}
+
 .alert-message {
   max-width: 695px;
   margin-bottom: 1.75rem;
@@ -56,6 +83,12 @@ div.add-org {
   }
 }
 
+.mat-header-button-group {
+  right: 5px;
+  top: 10px;
+  position: absolute;
+}
+
 .text-red {
   color: theme-palette(red);
 }
diff --git a/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.ts b/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.ts
index 1801b8ca75..4836e3e9f3 100644
--- a/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.ts
+++ b/prime-angular-frontend/src/app/modules/site-registration/pages/site-management-page/site-management-page.component.ts
@@ -134,7 +134,8 @@ export class SiteManagementPageComponent implements OnInit {
         key: 'Site Address',
         value: this.addressPipe.transform(site.physicalAddress, [...optionalAddressLineItems, 'provinceCode', 'countryCode'])
       },
-      { key: 'Vendor', value: this.configCodePipe.transform(siteVendorCode, 'vendors') }
+      { key: 'Vendor', value: this.configCodePipe.transform(siteVendorCode, 'vendors') },
+      { key: 'Site ID', value: site.pec }
     ];
   }
 
diff --git a/prime-angular-frontend/src/app/shared/components/site/overview-container/overview-container.component.html b/prime-angular-frontend/src/app/shared/components/site/overview-container/overview-container.component.html
index ed99376a2a..ca460f592a 100644
--- a/prime-angular-frontend/src/app/shared/components/site/overview-container/overview-container.component.html
+++ b/prime-angular-frontend/src/app/shared/components/site/overview-container/overview-container.component.html
@@ -70,7 +70,8 @@
   </app-overview-section>
 
   <app-overview-section title="Site Business Licence"
-                        [showEditRedirect]="showEditRedirect && site.status !== SiteStatusType.IN_REVIEW && !site.approvedDate"
+                        [showEditRedirect]="showEditRedirect && site.status !== SiteStatusType.IN_REVIEW &&
+                          site.status !== SiteStatusType.LOCKED && !site.approvedDate"
                         [editRoute]="SiteRoutes.BUSINESS_LICENCE"
                         (route)="onRouteRelative($event)">
 
@@ -163,7 +164,8 @@
   <app-overview-section *ngIf="site?.physicalAddress?.street !== null && site?.physicalAddress?.city !== null &&
                           site?.physicalAddress?.provinceCode !== null && site?.physicalAddress?.postal !== null"
                         title="Site Address"
-                        [showEditRedirect]="showEditRedirect && site.status !== SiteStatusType.IN_REVIEW && !site.approvedDate"
+                        [showEditRedirect]="showEditRedirect && site.status !== SiteStatusType.IN_REVIEW
+                          && site.status !== SiteStatusType.LOCKED && !site.approvedDate"
                         [editRoute]="SiteRoutes.BUSINESS_LICENCE"
                         (route)="onRouteRelative($event)">
     <app-enrollee-property title="Address">