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-routing.module.ts

@@ -12,6 +12,7 @@ import { GeneralTabComponent } from './centers-view/general-tab/general-tab.comp
 import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component';
 import { DatatableTabComponent } from './centers-view/datatable-tab/datatable-tab.component';
 import { EditCenterComponent } from './edit-center/edit-center.component';
+import { CenterActionsComponent } from './centers-view/center-actions/center-actions.component';
 
 /** Custom Resolvers */
 import { OfficesResolver } from 'app/accounting/common-resolvers/offices.resolver';
@@ -90,12 +91,20 @@ const routes: Routes = [
                 }
               ]
             },
+            {
+              path: 'actions/:action',
+              data: { title: 'Center Actions', breadcrumb: 'action', routeParamBreadcrumb: 'action' },
+              component: CenterActionsComponent,
+              resolve: {
+                centersActionData: CenterActionsResolver
+              }
+            },
             {
               path: 'edit',
               component: EditCenterComponent,
-              data: { title: 'Edit Center', breadcrumb: 'Edit' },
+              data: { title: 'Edit Center', breadcrumb: 'Edit', routeParamBreadcrumb: false },
               resolve: {
-                centerDataAndTemplate: CenterDataAndTemplateResolver
+                centerData: CenterDataAndTemplateResolver
               }
             }
           ]
@@ -108,6 +117,18 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
+  providers: [
+    OfficesResolver,
+    CenterViewResolver,
+    SavingsAccountResolver,
+    CenterResourceResolver,
+    CenterSummaryResolver,
+    CenterNotesResolver,
+    CenterDatatableResolver,
+    CenterDatatablesResolver,
+    CenterActionsResolver,
+    CenterDataAndTemplateResolver
+  ]
 })
 export class CentersRoutingModule {}

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'">
+        <button [disabled]="true" mat-menu-item *mifosxHasPermission="'CREATE_GROUP'">
-          <i class="fa fa-plus"></i> {{ 'labels.buttons.Add Group' | translate }}
+          <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 {
+.account-card {
-  margin: 0 auto;
-  max-width: 80rem;
-  width: 90%;
-  padding: 0;
-
-  .header {
-    padding: 1%;
-  }
-
   .center-meeting {
     align-self: flex-end;
-    width: 300px;
+    width: 100%;
-    height: 140px;
 
     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;
+}

src/app/centers/common-resolvers/center-data-and-template.resolver.ts

@@ -20,6 +20,7 @@ export class CenterDataAndTemplateResolver {
 
   /**
    * Returns the Centers and template data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {

src/theme/_content.scss

@@ -18,6 +18,7 @@
   }
 
   mifosx-clients-view,
+  mifosx-centers-view,
   mifosx-fixed-deposit-account-view,
   mifosx-loans-view,
   mifosx-shares-account-view,