fix: Fix Center Actions and View

The layout of the items in the blue box was broken and the hamburger menu
didn't navigate to any of the respective actions.

Fixes: WEB-188

src/app/centers/centers-view/center-actions/center-actions.component.ts

@@ -42,7 +42,7 @@ export class CenterActionsComponent {
     private router: Router
   ) {
     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-    const name = this.route.snapshot.params['name'];
+    const name = this.route.snapshot.params['action'];
     this.actions[name] = true;
   }
 }

src/app/centers/centers-view/centers-view.component.html

@@ -1,13 +1,14 @@
-<mat-card class="center-card">
+<mat-card class="account-card">
   <mat-card-header class="header layout-column">
     <mat-card-title-group class="header-title-group">
-      <div class="profile-image-container">
+      <div>
         <div>
           <img mat-card-md-image class="profile-image" src="assets/images/center_placeholder.png" />
         </div>
       </div>
-      <div class="mat-typography center-card-title">
-        <mat-card-title>
+
+      <div class="mat-typography account-card-title">
+        <mat-card-title class="make-flex">
           <h3 class="flex-95">
             <i
               class="fa fa-stop"
@@ -16,7 +17,7 @@
             ></i>
             <b>{{ 'labels.heading.Center Name' | translate }} :</b> {{ centerViewData.name }}
           </h3>
-          <div class="flex-5" *ngIf="!(centerViewData.status.value === 'Closed')">
+          <div *ngIf="!(centerViewData.status.value === 'Closed')">
             <button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
@@ -26,7 +27,7 @@
         </mat-card-title>
         <mat-card-subtitle>
           <div class="layout-row responsive-column">
-            <div class="flex-50">
+            <div class="flex-45">
               <p>
                 {{ 'labels.inputs.Account' | translate }} #:{{ centerViewData.accountNo }} <br />
                 {{ 'labels.inputs.Office' | translate }}: {{ centerViewData.officeName }} <br />
@@ -73,25 +74,41 @@
       <mat-menu #centerMenu="matMenu">
         <span *ngIf="!(centerViewData.status.value === 'Active')">
           <button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')">
-            <i class="fa fa-check-sign"></i> {{ 'labels.buttons.Activate' | translate }}
+            <mat-icon matListIcon>
+              <fa-icon icon="checkSign" size="sm"></fa-icon>
+            </mat-icon>
+            <span>{{ 'labels.buttons.Activate' | translate }}</span>
           </button>
         </span>
         <button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')">
-          <i class="fa fa-edit"></i> {{ 'labels.buttons.Edit' | translate }}
+          <mat-icon matListIcon>
+            <fa-icon icon="edit" size="sm"></fa-icon>
+          </mat-icon>
+          <span>{{ 'labels.buttons.Edit' | translate }}</span>
         </button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_GROUP'">
-          <i class="fa fa-plus"></i> {{ 'labels.buttons.Add Group' | translate }}
+        <button [disabled]="true" mat-menu-item *mifosxHasPermission="'CREATE_GROUP'">
+          <mat-icon matListIcon>
+            <fa-icon icon="add" size="sm"></fa-icon>
+          </mat-icon>
+          <span>{{ 'labels.buttons.Add Group' | translate }}</span>
         </button>
         <button mat-menu-item *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')">
-          <i class="fa fa-edit"></i> {{ 'labels.buttons.Manage Groups' | translate }}
+          <mat-icon matListIcon>
+            <fa-icon icon="edit" size="sm"></fa-icon>
+          </mat-icon>
+          <span>{{ 'labels.buttons.Manage Groups' | translate }}</span>
         </button>
         <span *ngIf="centerViewData.active">
           <button
+            [disabled]="true"
             mat-menu-item
             *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
             [routerLink]="['savings-accounts', 'create']"
           >
-            <i class="fa fa-file"></i> {{ 'labels.buttons.Centers Saving Application' | translate }}
+            <mat-icon matListIcon>
+              <fa-icon icon="file" size="sm"></fa-icon>
+            </mat-icon>
+            <span>{{ 'labels.buttons.Centers Saving Application' | translate }}</span>
           </button>
         </span>
         <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>

src/app/centers/centers-view/centers-view.component.scss

@@ -1,17 +1,7 @@
-.center-card {
-  margin: 0 auto;
-  max-width: 80rem;
-  width: 90%;
-  padding: 0;
-
-  .header {
-    padding: 1%;
-  }
-
+.account-card {
   .center-meeting {
     align-self: flex-end;
-    width: 300px;
-    height: 140px;
+    width: 100%;
 
     div,
     ng-template > div {
@@ -23,35 +13,6 @@
       }
     }
   }
-
-  .header-title-group {
-    .center-card-title {
-      color: white;
-      width: 90%;
-
-      p {
-        color: white;
-      }
-    }
-  }
-
-  .profile-image-container {
-    margin: 1%;
-
-    .profile-image {
-      object-fit: cover;
-      border-radius: 20px;
-    }
-  }
-
-  .center-actions {
-    align-self: flex-end;
-    margin: 0 1%;
-  }
-
-  .navigation-tabs {
-    overflow: auto;
-  }
 }
 
 .meetingDetails {
@@ -60,3 +21,7 @@
   border: 1px black solid;
   padding: 10px;
 }
+
+.make-flex {
+  display: flex;
+}