From de6a0412348f5b076a0cab28254fd7b58d812d55 Mon Sep 17 00:00:00 2001 From: Abhay Chawla Date: Tue, 3 Jul 2018 21:17:58 +0530 Subject: [PATCH] feat: add UI for settings and app configuration (#90) Add settings and app configuration UI for web app and self service applications. --- src/app/app.module.ts | 2 + src/app/core/core.module.ts | 3 +- .../core/shell/sidenav/sidenav.component.html | 2 +- .../core/shell/toolbar/toolbar.component.html | 2 +- .../app-configuration.component.html | 142 ++++++++++++++++++ .../app-configuration.component.scss | 0 .../app-configuration.component.spec.ts | 25 +++ .../app-configuration.component.ts | 22 +++ .../self-service-routing.module.ts | 6 + src/app/self-service/self-service.module.ts | 6 +- src/app/settings/settings-routing.module.ts | 22 +++ src/app/settings/settings.component.html | 118 +++++++++++++++ src/app/settings/settings.component.scss | 0 src/app/settings/settings.component.spec.ts | 25 +++ src/app/settings/settings.component.ts | 19 +++ src/app/settings/settings.module.spec.ts | 13 ++ src/app/settings/settings.module.ts | 18 +++ .../file-upload/file-upload.component.html | 6 + .../file-upload/file-upload.component.scss | 0 .../file-upload/file-upload.component.spec.ts | 25 +++ .../file-upload/file-upload.component.ts | 21 +++ src/app/shared/shared.module.ts | 11 +- 22 files changed, 481 insertions(+), 7 deletions(-) create mode 100644 src/app/self-service/app-configuration/app-configuration.component.html create mode 100644 src/app/self-service/app-configuration/app-configuration.component.scss create mode 100644 src/app/self-service/app-configuration/app-configuration.component.spec.ts create mode 100644 src/app/self-service/app-configuration/app-configuration.component.ts create mode 100644 src/app/settings/settings-routing.module.ts create mode 100644 src/app/settings/settings.component.html create mode 100644 src/app/settings/settings.component.scss create mode 100644 src/app/settings/settings.component.spec.ts create mode 100644 src/app/settings/settings.component.ts create mode 100644 src/app/settings/settings.module.spec.ts create mode 100644 src/app/settings/settings.module.ts create mode 100644 src/app/shared/file-upload/file-upload.component.html create mode 100644 src/app/shared/file-upload/file-upload.component.scss create mode 100644 src/app/shared/file-upload/file-upload.component.spec.ts create mode 100644 src/app/shared/file-upload/file-upload.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 07332a1ef..256ae1da6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,6 +23,7 @@ import { AccountingModule } from './accounting/accounting.module'; import { SelfServiceModule } from './self-service/self-service.module'; import { AppRoutingModule } from './app-routing.module'; +import { SettingsModule } from './settings/settings.module'; @NgModule({ imports: [ @@ -42,6 +43,7 @@ import { AppRoutingModule } from './app-routing.module'; ClientsModule, AccountingModule, SelfServiceModule, + SettingsModule, AppRoutingModule ], declarations: [WebAppComponent], diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 1cc0bb8a9..30e3895e8 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -144,7 +144,8 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component'; MatTableModule, MatSortModule, MatPaginatorModule, - MatDividerModule + MatDividerModule, + ThemePickerComponent ], providers: [ AuthenticationService, diff --git a/src/app/core/shell/sidenav/sidenav.component.html b/src/app/core/shell/sidenav/sidenav.component.html index 3a13f0e6c..215062527 100644 --- a/src/app/core/shell/sidenav/sidenav.component.html +++ b/src/app/core/shell/sidenav/sidenav.component.html @@ -19,7 +19,7 @@ Abhay Chawla
- - + diff --git a/src/app/self-service/app-configuration/app-configuration.component.html b/src/app/self-service/app-configuration/app-configuration.component.html new file mode 100644 index 000000000..e5c54e671 --- /dev/null +++ b/src/app/self-service/app-configuration/app-configuration.component.html @@ -0,0 +1,142 @@ + + + + + + + + + Main Configuration + + + +
+ + + + + + + + + + + + + + + + + {{ language.viewValue }} + + + + + + + + {{ dateFormat.viewValue }} + + + + +
+ + + + + + + + Images + + + +
+ + Favicon + Cover Image + Logo + Logo with Organisation Name + +
+ + + + + + + + Theme and Font + + + +
+ + Mobile Banking App + + + + {{ theme.viewValue }} + + + + + + + + {{ font.viewValue }} + + + + + Online Banking App + + + + {{ theme.viewValue }} + + + + + + + + {{ font.viewValue }} + + + + +
+ + + + + + + + Contact Information + + + +
+ + + + + + + + + + + + + +
+ + + + + + diff --git a/src/app/self-service/app-configuration/app-configuration.component.scss b/src/app/self-service/app-configuration/app-configuration.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/self-service/app-configuration/app-configuration.component.spec.ts b/src/app/self-service/app-configuration/app-configuration.component.spec.ts new file mode 100644 index 000000000..f28a679d5 --- /dev/null +++ b/src/app/self-service/app-configuration/app-configuration.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AppConfigurationComponent } from './app-configuration.component'; + +describe('AppConfigurationComponent', () => { + let component: AppConfigurationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AppConfigurationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AppConfigurationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/self-service/app-configuration/app-configuration.component.ts b/src/app/self-service/app-configuration/app-configuration.component.ts new file mode 100644 index 000000000..0bcc50d9c --- /dev/null +++ b/src/app/self-service/app-configuration/app-configuration.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'mifosx-app-configuration', + templateUrl: './app-configuration.component.html', + styleUrls: ['./app-configuration.component.scss'] +}) +export class AppConfigurationComponent implements OnInit { + + languages: string[]; + dateFormats: string[]; + mobileAppThemes: string[]; + mobileAppFonts: string[]; + onlineBankingAppThemes: string[]; + onlineBankingAppFonts: string[]; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/self-service/self-service-routing.module.ts b/src/app/self-service/self-service-routing.module.ts index 72c1577ae..3d0f47c33 100644 --- a/src/app/self-service/self-service-routing.module.ts +++ b/src/app/self-service/self-service-routing.module.ts @@ -6,6 +6,7 @@ import { UserManagementComponent } from './user-management/user-management.compo import { CreateUserComponent } from './create-user/create-user.component'; import { ViewUserComponent } from './view-user/view-user.component'; import { EditUserComponent } from './edit-user/edit-user.component'; +import { AppConfigurationComponent } from './app-configuration/app-configuration.component'; const routes: Routes = [ Route.withShell([ @@ -28,6 +29,11 @@ const routes: Routes = [ path: 'self-service/users/edit', component: EditUserComponent, data: { title: extract('Edit Self Service User'), breadcrumb: 'Self Service Users > Edit' }, + }, + { + path: 'self-service/app-configuration', + component: AppConfigurationComponent, + data: { title: extract('App Configuration'), breadcrumb: 'App Configuration' }, } ]) ]; diff --git a/src/app/self-service/self-service.module.ts b/src/app/self-service/self-service.module.ts index 04ba372e3..89b1ae771 100644 --- a/src/app/self-service/self-service.module.ts +++ b/src/app/self-service/self-service.module.ts @@ -8,19 +8,23 @@ import { UserManagementComponent } from './user-management/user-management.compo import { CreateUserComponent } from './create-user/create-user.component'; import { ViewUserComponent } from './view-user/view-user.component'; import { EditUserComponent } from './edit-user/edit-user.component'; +import { AppConfigurationComponent } from './app-configuration/app-configuration.component'; +import { SharedModule } from '../shared/shared.module'; @NgModule({ imports: [ CommonModule, CoreModule, FormsModule, + SharedModule, SelfServiceRoutingModule ], declarations: [ UserManagementComponent, CreateUserComponent, ViewUserComponent, - EditUserComponent + EditUserComponent, + AppConfigurationComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA diff --git a/src/app/settings/settings-routing.module.ts b/src/app/settings/settings-routing.module.ts new file mode 100644 index 000000000..a967adc9c --- /dev/null +++ b/src/app/settings/settings-routing.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { Route, extract } from '../core'; +import { SettingsComponent } from './settings.component'; + +const routes: Routes = [ + Route.withShell([ + { + path: 'settings', + component: SettingsComponent, + data: { title: extract('Settings'), breadcrumb: 'Settings' } + } + ]) +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], + providers: [] +}) +export class SettingsRoutingModule { } diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html new file mode 100644 index 000000000..05b05f8c0 --- /dev/null +++ b/src/app/settings/settings.component.html @@ -0,0 +1,118 @@ + + + + + + + + + Main Configuration + + + +
+ + + + + + + + + + + + + + + + + {{ language.viewValue }} + + + + + + + + {{ dateFormat.viewValue }} + + + + +
+ + + + + + + + Images + + + +
+ + Favicon + Cover Image + Logo + Logo with Organisation Name + +
+ + + + + + + + Theme and Font + + + +
+ + Theme + + + + + {{ font.viewValue }} + + + + +
+ + + + + + + + Contact Information + + + +
+ + + + + + + + + + + + + +
+ + + + + + diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/settings/settings.component.spec.ts b/src/app/settings/settings.component.spec.ts new file mode 100644 index 000000000..91588f354 --- /dev/null +++ b/src/app/settings/settings.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SettingsComponent } from './settings.component'; + +describe('SettingsComponent', () => { + let component: SettingsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SettingsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts new file mode 100644 index 000000000..3a7d111e8 --- /dev/null +++ b/src/app/settings/settings.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'mifosx-settings', + templateUrl: './settings.component.html', + styleUrls: ['./settings.component.scss'] +}) +export class SettingsComponent implements OnInit { + + languages: string[]; + dateFormats: string[]; + fonts: string[]; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/settings/settings.module.spec.ts b/src/app/settings/settings.module.spec.ts new file mode 100644 index 000000000..801815b0b --- /dev/null +++ b/src/app/settings/settings.module.spec.ts @@ -0,0 +1,13 @@ +import { SettingsModule } from './settings.module'; + +describe('SettingsModule', () => { + let settingsModule: SettingsModule; + + beforeEach(() => { + settingsModule = new SettingsModule(); + }); + + it('should create an instance', () => { + expect(settingsModule).toBeTruthy(); + }); +}); diff --git a/src/app/settings/settings.module.ts b/src/app/settings/settings.module.ts new file mode 100644 index 000000000..5371b95cd --- /dev/null +++ b/src/app/settings/settings.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { CoreModule } from '../core'; +import { SettingsRoutingModule } from './settings-routing.module'; +import { SettingsComponent } from './settings.component'; +import { SharedModule } from '../shared/shared.module'; + +@NgModule({ + imports: [ + CommonModule, + CoreModule, + SharedModule, + SettingsRoutingModule + ], + declarations: [SettingsComponent] +}) +export class SettingsModule { } diff --git a/src/app/shared/file-upload/file-upload.component.html b/src/app/shared/file-upload/file-upload.component.html new file mode 100644 index 000000000..e38ae6b37 --- /dev/null +++ b/src/app/shared/file-upload/file-upload.component.html @@ -0,0 +1,6 @@ + +{{ filename }} + diff --git a/src/app/shared/file-upload/file-upload.component.scss b/src/app/shared/file-upload/file-upload.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/shared/file-upload/file-upload.component.spec.ts b/src/app/shared/file-upload/file-upload.component.spec.ts new file mode 100644 index 000000000..0071ed860 --- /dev/null +++ b/src/app/shared/file-upload/file-upload.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FileUploadComponent } from './file-upload.component'; + +describe('FileUploadComponent', () => { + let component: FileUploadComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FileUploadComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FileUploadComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/file-upload/file-upload.component.ts b/src/app/shared/file-upload/file-upload.component.ts new file mode 100644 index 000000000..80c01c528 --- /dev/null +++ b/src/app/shared/file-upload/file-upload.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'mifosx-file-upload', + templateUrl: './file-upload.component.html', + styleUrls: ['./file-upload.component.scss'] +}) +export class FileUploadComponent implements OnInit { + + filename: string; + + constructor() { } + + ngOnInit() { + } + + onFileSelected($event: any) { + this.filename = $event.target.files[0].name; + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 5a81e7195..f9283d5d7 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -2,16 +2,21 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LoaderComponent } from './loader/loader.component'; +import { FileUploadComponent } from './file-upload/file-upload.component'; +import { CoreModule } from '../core/core.module'; @NgModule({ imports: [ - CommonModule + CommonModule, + CoreModule ], declarations: [ - LoaderComponent + LoaderComponent, + FileUploadComponent ], exports: [ - LoaderComponent + LoaderComponent, + FileUploadComponent ] }) export class SharedModule { }