feat: Add System Component (#307)

Fixes #305

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { GroupsModule } from './groups/groups.module';
 import { CentersModule } from './centers/centers.module';
 import { AccountingModule } from './accounting/accounting.module';
 import { SelfServiceModule } from './self-service/self-service.module';
+import { SystemModule } from './system/system.module';
 
 /** Main Routing Module */
 import { AppRoutingModule } from './app-routing.module';
@@ -55,6 +56,7 @@ import { AppRoutingModule } from './app-routing.module';
     CentersModule,
     AccountingModule,
     SelfServiceModule,
+    SystemModule,
     AppRoutingModule
   ],
   declarations: [WebAppComponent],

src/app/core/shell/toolbar/toolbar.component.html

@@ -102,7 +102,7 @@
 <mat-menu #adminMenu="matMenu" [overlapTrigger]="false">
   <button mat-menu-item>Users</button>
   <button mat-menu-item>Organisation</button>
-  <button mat-menu-item>System</button>
+  <button mat-menu-item [routerLink]="['/system']">System</button>
   <button mat-menu-item>Products</button>
   <button mat-menu-item>Templates</button>
 </mat-menu>

src/app/shared/icons.module.ts

@@ -5,6 +5,7 @@ import { NgModule } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
+  faAnchor,
   faArchive,
   faBars,
   faBell,
@@ -15,30 +16,38 @@ import {
   faChevronLeft,
   faChevronRight,
   faCircle,
+  faClock,
   faCog,
   faCogs,
   faEdit,
   faEye,
   faEyeSlash,
+  faFileAlt,
   faFileUpload,
+  faFileWord,
   faFillDrip,
   faHandHoldingUsd,
   faHome,
+  faKey,
   faLink,
   faList,
+  faListUl,
   faLocationArrow,
   faLock,
   faLockOpen,
   faMinusCircle,
   faMoneyBillAlt,
+  faMoneyCheck,
   faPlay,
   faPlus,
   faPlusCircle,
+  faRoad,
   faSearch,
   faShieldAlt,
   faSignOutAlt,
   faSitemap,
   faSync,
+  faTable,
   faTachometerAlt,
   faTimesCircle,
   faTrash,
@@ -51,6 +60,7 @@ import {
 
 /** Add icons to the library for convenient access in other components. */
 library.add(
+  faAnchor,
   faArchive,
   faBars,
   faBell,
@@ -61,30 +71,38 @@ library.add(
   faChevronLeft,
   faChevronRight,
   faCircle,
+  faClock,
   faCog,
   faCogs,
   faEdit,
   faEye,
   faEyeSlash,
+  faFileAlt,
   faFileUpload,
+  faFileWord,
   faFillDrip,
   faHandHoldingUsd,
   faHome,
+  faKey,
   faLink,
   faList,
+  faListUl,
   faLocationArrow,
   faLock,
   faLockOpen,
   faMinusCircle,
   faMoneyBillAlt,
+  faMoneyCheck,
   faPlay,
   faPlus,
   faPlusCircle,
+  faRoad,
   faSearch,
   faShieldAlt,
   faSignOutAlt,
   faSitemap,
   faSync,
+  faTable,
   faTachometerAlt,
   faTimesCircle,
   faTrash,
@@ -104,4 +122,3 @@ library.add(
   exports: [FontAwesomeModule]
 })
 export class IconsModule { }
-

src/app/system/system-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { Route } from '../core/route/route.service';
+import { extract } from '../core/i18n/i18n.service';
+import { SystemComponent } from './system.component';
+
+const routes: Routes = [
+  Route.withShell([
+    {
+      path: 'system',
+      component: SystemComponent,
+      data: { title: extract('System'), breadcrumb: 'System' }
+    }
+  ])
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SystemRoutingModule { }

src/app/system/system.component.html

@@ -0,0 +1,139 @@
+<div class="container">
+
+  <mat-card>
+
+    <div fxLayout="row" fxLayout.lt-md="column">
+
+      <div fxFlex="50%">
+
+        <mat-nav-list>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="table" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Data tables</h4>
+            <p matLine>Add new extra fields to any entity in the form of data table</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="list-ul" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Codes</h4>
+            <p matLine>Codes are used to define drop down values</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="key" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Role and Permissions</h4>
+            <p matLine>Define or modify roles and associated permissions</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="sitemap" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Configure Maker Checker Tasks</h4>
+            <p matLine>Define or modify Maker Checker tasks</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="anchor" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Hooks</h4>
+            <p matLine>Define Hooks</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="road" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Entity to Entity Mapping</h4>
+            <p matLine>Define or modify entity to entity mappings</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="file-alt" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Surveys</h4>
+            <p matLine>Manage your Services</p>
+          </mat-list-item>
+
+        </mat-nav-list>
+
+      </div>
+
+      <div fxFlex="50%">
+
+        <mat-nav-list>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="money-check" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Audit Trails</h4>
+            <p matLine>Audit logs of all the activities, such as create client, disburse loans etc</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="file-word" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Reports</h4>
+            <p matLine>Add new report and classify reports</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="clock" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Scheduler Jobs</h4>
+            <p matLine>Schedule a job, modify or delete jobs</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="cogs" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Configurations</h4>
+            <p matLine>Global configurations and Cache settings</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="key" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Account Number Preferences</h4>
+            <p matLine>Preferences for generating account numbers for client, loan and savings accounts</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="cog" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>External Services</h4>
+            <p matLine>External Services Configuration</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="key" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Two-Factor Configuration</h4>
+            <p matLine>Two-factor authentication configuration settings</p>
+          </mat-list-item>
+
+        </mat-nav-list>
+
+      </div>
+
+    </div>
+
+  </mat-card>
+
+</div>

src/app/system/system.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SystemComponent } from './system.component';
+
+describe('SystemComponent', () => {
+  let component: SystemComponent;
+  let fixture: ComponentFixture<SystemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SystemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SystemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/system/system.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-system',
+  templateUrl: './system.component.html',
+  styleUrls: ['./system.component.scss']
+})
+export class SystemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/system/system.module.spec.ts

@@ -0,0 +1,13 @@
+import { SystemModule } from './system.module';
+
+describe('SystemModule', () => {
+  let systemModule: SystemModule;
+
+  beforeEach(() => {
+    systemModule = new SystemModule();
+  });
+
+  it('should create an instance', () => {
+    expect(systemModule).toBeTruthy();
+  });
+});

src/app/system/system.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../shared/shared.module';
+import { SystemComponent } from './system.component';
+
+import { SystemRoutingModule } from './system-routing.module';
+
+@NgModule({
+  imports: [
+    SystemRoutingModule,
+    SharedModule
+  ],
+  declarations: [
+    SystemComponent
+  ]
+})
+export class SystemModule { }