diff --git a/README.md b/README.md index a71b57007..66cbd4382 100644 --- a/README.md +++ b/README.md @@ -62,8 +62,6 @@ Tasks are mostly based on the `angular-cli` tool. Use `ng help` to get more help ## Design guides -- [Bootstrap Material](https://bootswatch.com/materia/) -- [Angular Bootstrap](https://valor-software.com/ngx-bootstrap/#/) - [Angular Material](https://material.angular.io/components/categories) ## Creating new modules/components diff --git a/src/app/about/about-routing.module.ts b/src/app/about/about-routing.module.ts index a799c3557..5f667dc92 100644 --- a/src/app/about/about-routing.module.ts +++ b/src/app/about/about-routing.module.ts @@ -1,12 +1,16 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { Route, extract } from '../../app/core'; +import { Route, extract } from '../core'; import { AboutComponent } from './about.component'; const routes: Routes = [ Route.withShell([ - { path: 'about', component: AboutComponent, data: { title: extract('About') } } + { + path: 'about', + component: AboutComponent, + data: { title: extract('About') } + } ]) ]; diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index d3f478a3d..77520f41d 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -1,10 +1,10 @@ -
-
+
+

APP_NAME

- Version {{version}} + Version{{version}}

diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts index 218a47539..dce963211 100644 --- a/src/app/about/about.component.ts +++ b/src/app/about/about.component.ts @@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core'; import { environment } from '../../environments/environment'; @Component({ - selector: 'app-about', + selector: 'mifosx-about', templateUrl: './about.component.html', styleUrls: ['./about.component.scss'] }) diff --git a/src/app/about/about.module.ts b/src/app/about/about.module.ts index cf6d2119f..15ae86aa3 100644 --- a/src/app/about/about.module.ts +++ b/src/app/about/about.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; + import { TranslateModule } from '@ngx-translate/core'; import { AboutRoutingModule } from './about-routing.module'; diff --git a/src/app/accounting/accounting-routing.module.ts b/src/app/accounting/accounting-routing.module.ts index ee1328f14..8e08324a0 100644 --- a/src/app/accounting/accounting-routing.module.ts +++ b/src/app/accounting/accounting-routing.module.ts @@ -1,12 +1,16 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { Route, extract } from '../../app/core'; +import { Route, extract } from '../core'; import { AccountingComponent } from './accounting.component'; const routes: Routes = [ Route.withShell([ - { path: 'accounting', component: AccountingComponent} + { + path: 'accounting', + component: AccountingComponent, + data: { title: extract('Accounting') } + } ]) ]; diff --git a/src/app/accounting/accounting.component.html b/src/app/accounting/accounting.component.html index bf6a30835..17b610f37 100644 --- a/src/app/accounting/accounting.component.html +++ b/src/app/accounting/accounting.component.html @@ -1,31 +1,29 @@ -
-
-
-
-
+
-
- -

First List Group Item Heading

-

List Group Item Text

- - -

Second List Group Item Heading

-

List Group Item Text

- - -

Third List Group Item Heading

-

List Group Item Text

- +
+
+ +

First List Group Item Heading

+

List Group Item Text

+ + +

Second List Group Item Heading

+

List Group Item Text

+ + +

Third List Group Item Heading

+

List Group Item Text

+ +
+
-
-
-
+
-
@@ -46,4 +44,4 @@
-
+
--> diff --git a/src/app/accounting/accounting.component.ts b/src/app/accounting/accounting.component.ts index 81d10adf2..7f23eaef4 100644 --- a/src/app/accounting/accounting.component.ts +++ b/src/app/accounting/accounting.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-accounting', + selector: 'mifosx-accounting', templateUrl: './accounting.component.html', styleUrls: ['./accounting.component.scss'] }) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 3f07b6a0e..ad0e2d47d 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,9 +1,13 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +// Fallback when no prior route is matched const routes: Routes = [ - // Fallback when no prior route is matched -{ path: '**', redirectTo: '', pathMatch: 'full' }, + { + path: '**', + redirectTo: '', + pathMatch: 'full' + } ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7c307b51b..e4b6d45e2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,46 +1,52 @@ import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { ServiceWorkerModule } from '@angular/service-worker'; + import { TranslateModule } from '@ngx-translate/core'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { environment } from '../environments/environment'; -import { CoreModule } from '../app/core'; -import { SharedModule } from '../app/shared'; + +import { WebAppComponent } from './web-app.component'; + +import { CoreModule } from './core/core.module'; +import { SharedModule } from './shared/shared.module'; +import { NavigationModule } from './navigation/navigation.module'; import { HomeModule } from './home/home.module'; import { AboutModule } from './about/about.module'; +import { LoginModule } from './login/login.module'; import { ClientsModule} from './clients/clients.module'; import { AccountingModule } from './accounting/accounting.module'; -import { LoginModule } from './login/login.module'; -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; -import { NavigationModule } from './navigation/navigation.module'; import { SelfServiceModule } from './self-service/self-service.module'; +import { AppRoutingModule } from './app-routing.module'; + @NgModule({ imports: [ BrowserModule, - ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }), + BrowserAnimationsModule, FormsModule, HttpClientModule, + ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }), TranslateModule.forRoot(), NgxChartsModule, CoreModule, SharedModule, + NavigationModule, HomeModule, AboutModule, + LoginModule, ClientsModule, AccountingModule, - LoginModule, - NavigationModule, SelfServiceModule, AppRoutingModule ], - declarations: [AppComponent], + declarations: [WebAppComponent], providers: [ ], - bootstrap: [AppComponent] + bootstrap: [WebAppComponent] }) export class AppModule { } diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts index ea03b4ac3..8f600884f 100644 --- a/src/app/clients/clients-routing.module.ts +++ b/src/app/clients/clients-routing.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { Route, extract } from '../../app/core'; +import { Route, extract } from '../core'; import { ClientsComponent } from './clients.component'; import { CreateClientComponent} from './create-client/create-client.component'; import { ViewClientComponent } from './view-client/view-client.component'; @@ -9,10 +9,26 @@ import { ViewLoanComponent } from './view-loan/view-loan.component'; const routes: Routes = [ Route.withShell([ - { path: 'clients', component: ClientsComponent}, - { path: 'clients/create', component: CreateClientComponent}, - { path: 'clients/view', component: ViewClientComponent}, - { path: 'clients/viewloan', component: ViewLoanComponent} + { + path: 'clients', + component: ClientsComponent, + data: { title: extract('Clients') } + }, + { + path: 'clients/create', + component: CreateClientComponent, + data: { title: extract('Create Client') } + }, + { + path: 'clients/view', + component: ViewClientComponent, + data: { title: extract('View Client') } + }, + { + path: 'clients/viewloan', + component: ViewLoanComponent, + data: { title: extract('View Loan') } + } ]) ]; diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html index a48a35b47..b3508f992 100644 --- a/src/app/clients/clients.component.html +++ b/src/app/clients/clients.component.html @@ -1,4 +1,4 @@ -
+ - @@ -31,9 +29,7 @@ - - @@ -90,12 +86,10 @@ -
#
4
-
-
+
--> diff --git a/src/app/clients/clients.component.scss b/src/app/clients/clients.component.scss index 04ab8c692..b4ca1aa75 100644 --- a/src/app/clients/clients.component.scss +++ b/src/app/clients/clients.component.scss @@ -1,4 +1,4 @@ -.table-fixed { - table-layout: fixed; - overflow: hidden; -} \ No newline at end of file +// .table-fixed { +// table-layout: fixed; +// overflow: hidden; +// } diff --git a/src/app/clients/clients.component.ts b/src/app/clients/clients.component.ts index 23ee657aa..669f242ba 100644 --- a/src/app/clients/clients.component.ts +++ b/src/app/clients/clients.component.ts @@ -1,10 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { environment } from '../../environments/environment'; - -import { HeaderComponent } from '../core/shell/header/header.component'; @Component({ - selector: 'app-clients', + selector: 'mifosx-clients', templateUrl: './clients.component.html', styleUrls: ['./clients.component.scss'] }) diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts index 2e1919a9d..f26c8824c 100644 --- a/src/app/clients/clients.module.ts +++ b/src/app/clients/clients.module.ts @@ -1,30 +1,28 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; + import { ArchwizardModule } from 'angular-archwizard'; +import { ClientsRoutingModule } from './clients-routing.module'; import { ClientsComponent } from './clients.component'; import { CreateClientComponent} from './create-client/create-client.component'; -import { ClientsRoutingModule } from './clients-routing.module'; -import { CoreModule } from '../core/core.module'; import { ViewClientComponent } from './view-client/view-client.component'; import { ViewLoanComponent } from './view-loan/view-loan.component'; @NgModule({ imports: [ - CoreModule, CommonModule, ClientsRoutingModule, ArchwizardModule ], declarations: [ - ClientsComponent, - CreateClientComponent, - ViewClientComponent, + ClientsComponent, + CreateClientComponent, + ViewClientComponent, ViewLoanComponent -], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA -], - + ], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA + ] }) export class ClientsModule { } diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html index cfd6d7c5c..b14783e99 100644 --- a/src/app/clients/create-client/create-client.component.html +++ b/src/app/clients/create-client/create-client.component.html @@ -1,4 +1,4 @@ -
+
+
@@ -72,8 +71,7 @@
-
+
@@ -157,7 +155,6 @@
- @@ -174,4 +171,4 @@ -
+
--> diff --git a/src/app/clients/create-client/create-client.component.spec.ts b/src/app/clients/create-client/create-client.component.spec.ts new file mode 100644 index 000000000..9a8598793 --- /dev/null +++ b/src/app/clients/create-client/create-client.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CreateClientComponent } from './create-client.component'; + +describe('CreateClientComponent', () => { + let component: CreateClientComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CreateClientComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateClientComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/clients/create-client/create-client.component.ts b/src/app/clients/create-client/create-client.component.ts index 9d598b150..d2f8853dc 100644 --- a/src/app/clients/create-client/create-client.component.ts +++ b/src/app/clients/create-client/create-client.component.ts @@ -1,8 +1,7 @@ import { Component, OnInit} from '@angular/core'; -import { HeaderComponent } from '../../core/shell/header/header.component'; @Component({ - selector: 'app-create-client', + selector: 'mifosx-create-client', templateUrl: './create-client.component.html', styleUrls: ['./create-client.component.scss'] }) @@ -12,4 +11,5 @@ export class CreateClientComponent implements OnInit { ngOnInit() { } + } diff --git a/src/app/clients/create-client/create-client.module.ts b/src/app/clients/create-client/create-client.module.ts deleted file mode 100644 index 3931d67ab..000000000 --- a/src/app/clients/create-client/create-client.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { CoreModule } from '../../core/core.module'; - -import { CreateClientComponent } from './create-client.component'; - - -@NgModule({ - imports: [ - CommonModule, - CoreModule - ], - declarations: [CreateClientComponent], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA - ], -}) -export class CreateClientModule { } - */ diff --git a/src/app/clients/view-client/view-client.component.html b/src/app/clients/view-client/view-client.component.html index 44c56c57f..97f08f7fb 100644 --- a/src/app/clients/view-client/view-client.component.html +++ b/src/app/clients/view-client/view-client.component.html @@ -1,4 +1,4 @@ -
+ # @@ -48,9 +47,7 @@ - - 4 @@ -152,7 +149,6 @@ -
@@ -160,9 +156,6 @@
- - - - + - + --> diff --git a/src/app/clients/view-client/view-client.component.spec.ts b/src/app/clients/view-client/view-client.component.spec.ts index 107652787..8b02d3f2e 100644 --- a/src/app/clients/view-client/view-client.component.spec.ts +++ b/src/app/clients/view-client/view-client.component.spec.ts @@ -1,11 +1,7 @@ -/* tslint:disable:no-unused-variable */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - import { ViewClientComponent } from './view-client.component'; -describe('ViewClientComponent', () => { +describe('CreateClientComponent', () => { let component: ViewClientComponent; let fixture: ComponentFixture; diff --git a/src/app/clients/view-client/view-client.component.ts b/src/app/clients/view-client/view-client.component.ts index 570d8bd11..d365d6593 100644 --- a/src/app/clients/view-client/view-client.component.ts +++ b/src/app/clients/view-client/view-client.component.ts @@ -1,8 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { HeaderComponent } from '../../core/shell/header/header.component'; @Component({ - selector: 'app-view-client', + selector: 'mifosx-view-client', templateUrl: './view-client.component.html', styleUrls: ['./view-client.component.scss'] }) diff --git a/src/app/clients/view-loan/view-loan.component.html b/src/app/clients/view-loan/view-loan.component.html index 7137d5ff4..744d7bdab 100644 --- a/src/app/clients/view-loan/view-loan.component.html +++ b/src/app/clients/view-loan/view-loan.component.html @@ -1,4 +1,4 @@ -
+ # @@ -83,9 +82,7 @@ - - 4 @@ -187,8 +184,6 @@ - -
@@ -201,7 +196,6 @@ - @@ -213,9 +207,7 @@ - - @@ -300,7 +292,6 @@ -
#
4
@@ -360,4 +351,4 @@ - + --> diff --git a/src/app/clients/view-loan/view-loan.component.scss b/src/app/clients/view-loan/view-loan.component.scss index 67ce16326..ae12b1dce 100644 --- a/src/app/clients/view-loan/view-loan.component.scss +++ b/src/app/clients/view-loan/view-loan.component.scss @@ -1,14 +1,14 @@ -.btn-flat { - filter:progid:DXImageTransform.Microsoft.Gradient(enabled='false'); - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - background-image:none; - border:0; -} +// .btn-flat { +// filter:progid:DXImageTransform.Microsoft.Gradient(enabled='false'); +// -webkit-box-shadow: none; +// -moz-box-shadow: none; +// box-shadow: none; +// background-image:none; +// border:0; +// } -.btn { - border: 1px solid #DDD; - border-right-width: 0; - border-radius: 0; - } \ No newline at end of file +// .btn { +// border: 1px solid #DDD; +// border-right-width: 0; +// border-radius: 0; +// } diff --git a/src/app/clients/view-loan/view-loan.component.spec.ts b/src/app/clients/view-loan/view-loan.component.spec.ts index 2d308be21..8a5d2b13c 100644 --- a/src/app/clients/view-loan/view-loan.component.spec.ts +++ b/src/app/clients/view-loan/view-loan.component.spec.ts @@ -1,8 +1,4 @@ -/* tslint:disable:no-unused-variable */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - import { ViewLoanComponent } from './view-loan.component'; describe('ViewLoanComponent', () => { diff --git a/src/app/clients/view-loan/view-loan.component.ts b/src/app/clients/view-loan/view-loan.component.ts index 41ba35844..c348a7aa0 100644 --- a/src/app/clients/view-loan/view-loan.component.ts +++ b/src/app/clients/view-loan/view-loan.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-view-loan', + selector: 'mifosx-view-loan', templateUrl: './view-loan.component.html', styleUrls: ['./view-loan.component.scss'] }) diff --git a/src/app/core/authentication/authentication.service.ts b/src/app/core/authentication/authentication.service.ts index 59ccda88c..1087903f5 100644 --- a/src/app/core/authentication/authentication.service.ts +++ b/src/app/core/authentication/authentication.service.ts @@ -1,4 +1,5 @@ import { Injectable } from '@angular/core'; + import { Observable, of } from 'rxjs'; export interface Credentials { diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index d7bb5c983..1fc95a4e5 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -2,10 +2,27 @@ import { NgModule, Optional, SkipSelf } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http'; import { RouteReuseStrategy, RouterModule } from '@angular/router'; +import { LayoutModule } from '@angular/cdk/layout'; +import { FlexLayoutModule } from '@angular/flex-layout'; + +import { MatToolbarModule, + MatButtonModule, + MatSidenavModule, + MatIconModule, + MatListModule, + MatGridListModule, + MatCardModule, + MatMenuModule, + MatCheckboxModule, + MatTooltipModule, + MatDividerModule, + MatSelectModule, + MatInputModule, + MatFormFieldModule, + MatTabsModule } from '@angular/material'; + import { TranslateModule } from '@ngx-translate/core'; -import { ShellComponent } from './shell/shell.component'; -import { HeaderComponent } from './shell/header/header.component'; import { RouteReusableStrategy } from './route-reusable-strategy'; import { AuthenticationService } from './authentication/authentication.service'; import { AuthenticationGuard } from './authentication/authentication.guard'; @@ -16,20 +33,42 @@ import { ApiPrefixInterceptor } from './http/api-prefix.interceptor'; import { ErrorHandlerInterceptor } from './http/error-handler.interceptor'; import { CacheInterceptor } from './http/cache.interceptor'; +import { ShellComponent } from './shell/shell.component'; +import { SidenavComponent } from './shell/sidenav/sidenav.component'; +import { ToolbarComponent } from './shell/toolbar/toolbar.component'; +import { ContentComponent } from './shell/content/content.component'; + @NgModule({ imports: [ CommonModule, HttpClientModule, TranslateModule, - RouterModule + RouterModule, + LayoutModule, + FlexLayoutModule, + MatSidenavModule, + MatGridListModule, + MatToolbarModule, + MatTabsModule, + MatButtonModule, + MatIconModule, + MatListModule, + MatCardModule, + MatMenuModule, + MatCheckboxModule, + MatTooltipModule, + MatDividerModule, + MatSelectModule, + MatFormFieldModule, + MatInputModule ], - declarations: [ - HeaderComponent, - ShellComponent + ShellComponent, + SidenavComponent, + ToolbarComponent, + ContentComponent ], exports: [ - HeaderComponent ], providers: [ AuthenticationService, diff --git a/src/app/core/http/api-prefix.interceptor.spec.ts b/src/app/core/http/api-prefix.interceptor.spec.ts index dd3175e81..44e19e5b1 100644 --- a/src/app/core/http/api-prefix.interceptor.spec.ts +++ b/src/app/core/http/api-prefix.interceptor.spec.ts @@ -2,7 +2,7 @@ import { TestBed, inject } from '@angular/core/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http'; -import { environment } from '@env/environment'; +import { environment } from '../../../environments/environment'; import { ApiPrefixInterceptor } from './api-prefix.interceptor'; describe('ApiPrefixInterceptor', () => { diff --git a/src/app/core/http/api-prefix.interceptor.ts b/src/app/core/http/api-prefix.interceptor.ts index 7b0d19f5f..9af5fa306 100644 --- a/src/app/core/http/api-prefix.interceptor.ts +++ b/src/app/core/http/api-prefix.interceptor.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; + import { Observable } from 'rxjs'; import { environment } from '../../../environments/environment'; diff --git a/src/app/core/http/cache.interceptor.ts b/src/app/core/http/cache.interceptor.ts index 3a077a05d..5bc5228f5 100644 --- a/src/app/core/http/cache.interceptor.ts +++ b/src/app/core/http/cache.interceptor.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http'; + import { Observable, Subscriber } from 'rxjs'; import { HttpCacheService } from './http-cache.service'; diff --git a/src/app/core/http/error-handler.interceptor.ts b/src/app/core/http/error-handler.interceptor.ts index 733fd970b..c53d4838a 100644 --- a/src/app/core/http/error-handler.interceptor.ts +++ b/src/app/core/http/error-handler.interceptor.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; + import { Observable } from 'rxjs'; import { catchError } from 'rxjs/operators'; diff --git a/src/app/core/http/http-cache.service.ts b/src/app/core/http/http-cache.service.ts index a3ca74bf3..5be20fe2f 100644 --- a/src/app/core/http/http-cache.service.ts +++ b/src/app/core/http/http-cache.service.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpResponse } from '@angular/common/http'; + import { each } from 'lodash'; import { Logger } from '../logger.service'; diff --git a/src/app/core/http/http.service.ts b/src/app/core/http/http.service.ts index e034c3193..bfcefbd75 100644 --- a/src/app/core/http/http.service.ts +++ b/src/app/core/http/http.service.ts @@ -1,5 +1,6 @@ import { Inject, Injectable, InjectionToken, Injector, Optional } from '@angular/core'; import { HttpClient, HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; + import { Observable } from 'rxjs'; import { ErrorHandlerInterceptor } from './error-handler.interceptor'; diff --git a/src/app/core/i18n.service.spec.ts b/src/app/core/i18n.service.spec.ts index 8cce69d38..fb6253687 100644 --- a/src/app/core/i18n.service.spec.ts +++ b/src/app/core/i18n.service.spec.ts @@ -1,4 +1,5 @@ import { TestBed, inject } from '@angular/core/testing'; + import { TranslateService, LangChangeEvent } from '@ngx-translate/core'; import { Subject } from 'rxjs'; diff --git a/src/app/core/i18n.service.ts b/src/app/core/i18n.service.ts index f184767c2..6ed9ed34d 100644 --- a/src/app/core/i18n.service.ts +++ b/src/app/core/i18n.service.ts @@ -1,4 +1,5 @@ import { Injectable } from '@angular/core'; + import { TranslateService, LangChangeEvent } from '@ngx-translate/core'; import { includes } from 'lodash'; diff --git a/src/app/core/shell/content/content.component.html b/src/app/core/shell/content/content.component.html new file mode 100644 index 000000000..45a39fd1f --- /dev/null +++ b/src/app/core/shell/content/content.component.html @@ -0,0 +1,2 @@ + + diff --git a/src/app/app.component.scss b/src/app/core/shell/content/content.component.scss similarity index 100% rename from src/app/app.component.scss rename to src/app/core/shell/content/content.component.scss diff --git a/src/app/core/shell/content/content.component.spec.ts b/src/app/core/shell/content/content.component.spec.ts new file mode 100644 index 000000000..7ad6c91ba --- /dev/null +++ b/src/app/core/shell/content/content.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContentComponent } from './content.component'; + +describe('ContentComponent', () => { + let component: ContentComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContentComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/shell/content/content.component.ts b/src/app/core/shell/content/content.component.ts new file mode 100644 index 000000000..35b20ea38 --- /dev/null +++ b/src/app/core/shell/content/content.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'mifosx-content', + templateUrl: './content.component.html', + styleUrls: ['./content.component.scss'] +}) +export class ContentComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/core/shell/header/header.component.html b/src/app/core/shell/header/header.component.html deleted file mode 100644 index f353b4c0a..000000000 --- a/src/app/core/shell/header/header.component.html +++ /dev/null @@ -1,76 +0,0 @@ - - diff --git a/src/app/core/shell/header/header.component.scss b/src/app/core/shell/header/header.component.scss deleted file mode 100644 index 0c42ef419..000000000 --- a/src/app/core/shell/header/header.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -/* @import "src/theme/theme-variables"; - -.navbar { - margin-bottom: $spacer; -} - -.nav-link.dropdown-toggle { - cursor: pointer; -} - */ \ No newline at end of file diff --git a/src/app/core/shell/header/header.component.spec.ts b/src/app/core/shell/header/header.component.spec.ts deleted file mode 100644 index 2a54c28d8..000000000 --- a/src/app/core/shell/header/header.component.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { TranslateModule } from '@ngx-translate/core'; -import { RouterTestingModule } from '@angular/router/testing'; - -import { AuthenticationService } from '../../authentication/authentication.service'; -import { MockAuthenticationService } from '../../authentication/authentication.service.mock'; -import { I18nService } from '../../i18n.service'; -import { HeaderComponent } from './header.component'; - -describe('HeaderComponent', () => { - let component: HeaderComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - RouterTestingModule, - NgbModule.forRoot(), - TranslateModule.forRoot() - ], - declarations: [HeaderComponent], - providers: [ - { provide: AuthenticationService, useClass: MockAuthenticationService }, - I18nService - ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/shell/header/header.component.ts b/src/app/core/shell/header/header.component.ts deleted file mode 100644 index f2ea9104b..000000000 --- a/src/app/core/shell/header/header.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; - -import { AuthenticationService } from '../../authentication/authentication.service'; -import { I18nService } from '../../i18n.service'; - -@Component({ - selector: 'app-header', - templateUrl: './header.component.html', - styleUrls: ['./header.component.scss'] -}) -export class HeaderComponent implements OnInit { - - menuHidden = true; - - constructor(private router: Router, - private authenticationService: AuthenticationService, - private i18nService: I18nService) { } - - ngOnInit() { } - - toggleMenu() { - this.menuHidden = !this.menuHidden; - } - - setLanguage(language: string) { - this.i18nService.language = language; - } - - logout() { - this.authenticationService.logout() - .subscribe(() => this.router.navigate(['/login'], { replaceUrl: true })); - } - - get currentLanguage(): string { - return this.i18nService.language; - } - - get languages(): string[] { - return this.i18nService.supportedLanguages; - } - - get username(): string | null { - const credentials = this.authenticationService.credentials; - return credentials ? credentials.username : null; - } - -} diff --git a/src/app/core/shell/shell.component.html b/src/app/core/shell/shell.component.html index 1e157542a..e8569d35d 100644 --- a/src/app/core/shell/shell.component.html +++ b/src/app/core/shell/shell.component.html @@ -1,2 +1,26 @@ - - + + + + + + + + + + + + + + + + + diff --git a/src/app/core/shell/shell.component.scss b/src/app/core/shell/shell.component.scss index e69de29bb..9f38a12a7 100644 --- a/src/app/core/shell/shell.component.scss +++ b/src/app/core/shell/shell.component.scss @@ -0,0 +1,20 @@ +#mifosx-shell-container { + max-width: 100%; + height: 100vh; + + .sidebar-panel { + background-color: white; // TODO: Theme Configuration + min-height: 100vh; + overflow: hidden; + box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); + } + + .sidebar-full { + width: 15rem; + } + + .sidebar-compact { + width: 4rem; + } + +} diff --git a/src/app/core/shell/shell.component.spec.ts b/src/app/core/shell/shell.component.spec.ts index c27d72786..ed8093a99 100644 --- a/src/app/core/shell/shell.component.spec.ts +++ b/src/app/core/shell/shell.component.spec.ts @@ -1,7 +1,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { TranslateModule } from '@ngx-translate/core'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AuthenticationService } from '../authentication/authentication.service'; import { MockAuthenticationService } from '../authentication/authentication.service.mock'; @@ -17,7 +16,6 @@ describe('ShellComponent', () => { imports: [ RouterTestingModule, TranslateModule.forRoot(), - NgbModule.forRoot(), CoreModule ], providers: [ diff --git a/src/app/core/shell/shell.component.ts b/src/app/core/shell/shell.component.ts index 48f33932c..b67ee69a5 100644 --- a/src/app/core/shell/shell.component.ts +++ b/src/app/core/shell/shell.component.ts @@ -1,14 +1,29 @@ import { Component, OnInit } from '@angular/core'; +import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; + +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; @Component({ - selector: 'app-shell', + selector: 'mifosx-shell', templateUrl: './shell.component.html', styleUrls: ['./shell.component.scss'] }) export class ShellComponent implements OnInit { - constructor() { } + isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset) + .pipe( + map(result => result.matches) + ); + sidenavCollapsed = false; - ngOnInit() { } + constructor(private breakpointObserver: BreakpointObserver) { } + + ngOnInit() { + } + + toggleCollapse($event: boolean) { + this.sidenavCollapsed = $event; + } } diff --git a/src/app/core/shell/sidenav/sidenav.component.html b/src/app/core/shell/sidenav/sidenav.component.html new file mode 100644 index 000000000..3a13f0e6c --- /dev/null +++ b/src/app/core/shell/sidenav/sidenav.component.html @@ -0,0 +1,75 @@ +
+ +
+ +
+ + Mifos +
+ +
+
+ app-user-photo +
+ + Abhay Chawla + +
+ + +
+
+ +
+ +
+
+ + Frequently Accessed +
+
+ +
+
+ +
+
+ +
+
+ +
+ + Main Items +
+ + + + dashboard + Dashboard + + + navigation + Navigation + + + +
+ +
+ +
diff --git a/src/app/core/shell/sidenav/sidenav.component.scss b/src/app/core/shell/sidenav/sidenav.component.scss new file mode 100644 index 000000000..f1acd8643 --- /dev/null +++ b/src/app/core/shell/sidenav/sidenav.component.scss @@ -0,0 +1,160 @@ +img { + max-width: 100%; +} + +.navigation-panel { + position: absolute; + left: 0; + width: 100%; + height: 100%; + padding-top: 64px; + background: hsla(0,0%,100%,.95); +} + +.app-brand { + display: flex; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; + position: fixed; + width: 100%; + max-width: 15rem; + height: 64px; + line-height: 64px; + top: 0; + left: 0; + z-index: 9999; + color: #444; + + .app-logo { + width: auto; + height: 42px; + margin-right: 8px; + } + + .app-logo-text { + width: auto; + height: auto; + font-size: 2rem; + font-weight: normal; + } +} + +.app-user { + text-align: center; + width: 100%; + padding: 1rem 0 .4rem; + + .app-user-photo { + width: 72px; + margin: 0 auto 8px; + height: 72px; + border: 1px solid hsla(210,8%,51%,.13); + padding: 4px; + border-radius: 50%; + } + + img { + width: 100%; + height: 100%; + border-radius: 50%; + } + + .app-user-name { + display: block; + font-size: .875rem; + font-weight: 300; + color: rgba(0,0,0,.96); + margin-left: -2px; + } +} + +.app-sidenav { + .icon-menu { + padding: 0 24px; + opacity: 1; + + .mat-divider { + margin: 0 -24px; + } + + .icon-menu-title { + padding-left: 0; + margin-left: -8px; + } + + .icon-menu-item { + display: inline-block; + + button { + min-width: auto; + margin: 4px; + } + } + } + + .nav-item-sep { + padding: 0; + margin: 1rem 0; + } + + mat-nav-list { + margin: 0; + padding: 0; + list-style: none; + } +} + +.nav-item-sep { + span { + padding: 16px 0 0 16px; + display: block; + font-size: 12px; + } +} + +.sidebar-compact { + .app-brand { + .app-logo { + margin: auto; + } + + .app-logo-text { + display: none; + } + } + + .app-user { + display: none; + } + + .app-sidenav { + .icon-menu { + padding: 8px 0 0; + width: 4rem; + + .nav-item-sep { + display: none; + } + + span { + display: none; + } + + .icon-menu-item { + button { + margin: 0 0 4px 0; + padding: 0 20px; + } + } + } + + .nav-item-sep { + span { + display: none; + } + } + } +} diff --git a/src/app/core/shell/sidenav/sidenav.component.spec.ts b/src/app/core/shell/sidenav/sidenav.component.spec.ts new file mode 100644 index 000000000..df79e17ae --- /dev/null +++ b/src/app/core/shell/sidenav/sidenav.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidenavComponent } from './sidenav.component'; + +describe('SidenavComponent', () => { + let component: SidenavComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidenavComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidenavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/shell/sidenav/sidenav.component.ts b/src/app/core/shell/sidenav/sidenav.component.ts new file mode 100644 index 000000000..77e53b524 --- /dev/null +++ b/src/app/core/shell/sidenav/sidenav.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Router } from '@angular/router'; + +import { AuthenticationService } from '../../authentication/authentication.service'; + +@Component({ + selector: 'mifosx-sidenav', + templateUrl: './sidenav.component.html', + styleUrls: ['./sidenav.component.scss'] +}) +export class SidenavComponent implements OnInit { + + @Input() sidenavCollapsed: boolean; + + constructor(private router: Router, + private authenticationService: AuthenticationService) { } + + ngOnInit() { + } + + logout() { + this.authenticationService.logout() + .subscribe(() => this.router.navigate(['/login'], { replaceUrl: true })); + } + +} diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html new file mode 100644 index 000000000..a51361109 --- /dev/null +++ b/src/app/core/shell/toolbar/toolbar.component.html @@ -0,0 +1,115 @@ + + + + + + + + + + +
+ + + +
+ + + + + English + Hindi + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/core/shell/toolbar/toolbar.component.scss b/src/app/core/shell/toolbar/toolbar.component.scss new file mode 100644 index 000000000..b8423342b --- /dev/null +++ b/src/app/core/shell/toolbar/toolbar.component.scss @@ -0,0 +1,45 @@ +mat-form-field { + font-size: 1rem; + margin-top: 6px; +} + +.toolbar { + position: relative; + box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); +} + +.tab-link { + min-width: auto; + padding: 0 16px; +} + +.search-bar { + mat-form-field { + margin-right: 1rem; + max-width: 400px; + width: 100%; + margin-left: 20px; + } +} + +.language { + min-width: 80px; + width: 80px; + font-size: .875rem; +} + +.ml-1 { + margin-left: 1rem; +} + +.mr-1 { + margin-right: 1rem; +} + +.img-button { + img { + width: 32px; + height: 32px; + border-radius: 50%; + } +} diff --git a/src/app/core/shell/toolbar/toolbar.component.spec.ts b/src/app/core/shell/toolbar/toolbar.component.spec.ts new file mode 100644 index 000000000..e01f9a83d --- /dev/null +++ b/src/app/core/shell/toolbar/toolbar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolbarComponent } from './toolbar.component'; + +describe('ToolbarComponent', () => { + let component: ToolbarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ToolbarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ToolbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/shell/toolbar/toolbar.component.ts b/src/app/core/shell/toolbar/toolbar.component.ts new file mode 100644 index 000000000..feb16a425 --- /dev/null +++ b/src/app/core/shell/toolbar/toolbar.component.ts @@ -0,0 +1,67 @@ +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; +import { MatSidenav, MatMenuTrigger } from '@angular/material'; +import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; +import {style, state, animate, transition, trigger} from '@angular/animations'; + +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; + +@Component({ + selector: 'mifosx-toolbar', + templateUrl: './toolbar.component.html', + styleUrls: ['./toolbar.component.scss'], + animations: [ + trigger('fadeInOut', [ + transition(':enter', [ + style({ opacity: 0 }), + animate(500, style({ opacity: 1 })) + ]), + transition(':leave', [ + animate(500, style({ opacity: 0 })) + ]) + ]) + ] +}) +export class ToolbarComponent implements OnInit { + + isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset) + .pipe( + map(result => result.matches) + ); + + isHandset: boolean; + searchVisible = false; + selectedLanguage = 'English'; + sidenavCollapsed = false; + + @Input() sidenav: MatSidenav; + @Output() collapse = new EventEmitter(); + + constructor(private breakpointObserver: BreakpointObserver) { } + + ngOnInit() { + this.isHandset$.subscribe(isHandset => { + this.isHandset = isHandset; + }); + } + + toggleSidenav() { + this.sidenav.toggle(); + } + + toggleCollapse() { + this.sidenavCollapsed = !this.sidenavCollapsed; + this.collapse.emit(this.sidenavCollapsed); + } + + toggleVisibility() { + this.searchVisible = !this.searchVisible; + } + + onMouseEnter(menuTrigger: MatMenuTrigger) { + if (!this.isHandset) { + menuTrigger.openMenu(); + } + } + +} diff --git a/src/app/home/dashboard/dashboard.component.html b/src/app/home/dashboard/dashboard.component.html index 4c3823b87..c6064d221 100644 --- a/src/app/home/dashboard/dashboard.component.html +++ b/src/app/home/dashboard/dashboard.component.html @@ -1,4 +1,4 @@ -
+
- \ No newline at end of file + --> diff --git a/src/app/home/dashboard/dashboard.component.scss b/src/app/home/dashboard/dashboard.component.scss index a34fdf178..070300710 100644 --- a/src/app/home/dashboard/dashboard.component.scss +++ b/src/app/home/dashboard/dashboard.component.scss @@ -1,5 +1,3 @@ - -.ngx-charts { - position: relative; - - } \ No newline at end of file +// .ngx-charts { +// position: relative; +// } diff --git a/src/app/home/dashboard/dashboard.component.spec.ts b/src/app/home/dashboard/dashboard.component.spec.ts index a29783c8b..9c996c371 100644 --- a/src/app/home/dashboard/dashboard.component.spec.ts +++ b/src/app/home/dashboard/dashboard.component.spec.ts @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; import { DashboardComponent } from './dashboard.component'; diff --git a/src/app/home/dashboard/dashboard.component.ts b/src/app/home/dashboard/dashboard.component.ts index 6f9355a65..05b10e7b0 100644 --- a/src/app/home/dashboard/dashboard.component.ts +++ b/src/app/home/dashboard/dashboard.component.ts @@ -1,16 +1,16 @@ import { Component, OnInit } from '@angular/core'; -import { NgxChartsModule } from '@swimlane/ngx-charts'; + import { single } from './data'; @Component({ - selector: 'app-dashboard', + selector: 'mifosx-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit { + single: any[]; multi: any[]; - view: any[] = [600, 350]; // options @@ -26,11 +26,12 @@ export class DashboardComponent implements OnInit { colorScheme = { domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] }; + constructor() { Object.assign(this, { single }); } - ngOnInit() { + ngOnInit() { } } diff --git a/src/app/home/dashboard/data.ts b/src/app/home/dashboard/data.ts index b906037e1..a7c7f783e 100644 --- a/src/app/home/dashboard/data.ts +++ b/src/app/home/dashboard/data.ts @@ -1,58 +1,58 @@ export const single = [ - { - 'name': 'Germany', - 'value': 89400001 - }, - { - 'name': 'USA', - 'value': 5000000 - }, - { - 'name': 'France', - 'value': 7200000 - } + { + 'name': 'Germany', + 'value': 89400001 + }, + { + 'name': 'USA', + 'value': 5000000 + }, + { + 'name': 'France', + 'value': 7200000 + } ]; export const multi = [ - { - 'name': 'Germany', - 'series': [ - { - 'name': '2010', - 'value': 7300000 - }, - { - 'name': '2011', - 'value': 8940000 - } - ] - }, + { + 'name': 'Germany', + 'series': [ + { + 'name': '2010', + 'value': 7300000 + }, + { + 'name': '2011', + 'value': 8940000 + } + ] + }, - { - 'name': 'USA', - 'series': [ - { - 'name': '2010', - 'value': 7870000 - }, - { - 'name': '2011', - 'value': 8270000 - } - ] - }, + { + 'name': 'USA', + 'series': [ + { + 'name': '2010', + 'value': 7870000 + }, + { + 'name': '2011', + 'value': 8270000 + } + ] + }, - { - 'name': 'France', - 'series': [ - { - 'name': '2010', - 'value': 5000002 - }, - { - 'name': '2011', - 'value': 5800000 - } - ] - } + { + 'name': 'France', + 'series': [ + { + 'name': '2010', + 'value': 5000002 + }, + { + 'name': '2011', + 'value': 5800000 + } + ] + } ]; diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts index 03c994fd1..37a39ba9f 100644 --- a/src/app/home/home-routing.module.ts +++ b/src/app/home/home-routing.module.ts @@ -1,15 +1,27 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { Route, extract } from '../../app/core'; +import { Route, extract } from '../core'; import { HomeComponent } from './home.component'; import { DashboardComponent } from './dashboard/dashboard.component'; const routes: Routes = [ Route.withShell([ - { path: '', redirectTo: '/home', pathMatch: 'full' }, - { path: 'home', component: HomeComponent, data: { title: extract('Home') } }, - { path: 'home/dashboard', component: DashboardComponent} + { + path: '', + redirectTo: '/home', + pathMatch: 'full' + }, + { + path: 'home', + component: HomeComponent, + data: { title: extract('Home') } + }, + { + path: 'home/dashboard', + component: DashboardComponent, + data: { title: extract('Dashboard') } + } ]) ]; diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 62b38e50b..33f3ac548 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,7 +1,8 @@ -
+ + + {{quote}}
- + --> + + diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index c22167e45..54fbdac2a 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,9 +1,9 @@ -.logo { - width: 500px; -} +// .logo { +// width: 500px; +// } -q { - font-style: italic; - font-size: 1.2rem; - quotes: "« " " »"; -} +// q { +// font-style: italic; +// font-size: 1.2rem; +// quotes: "« " " »"; +// } diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts index c574c6e7d..fa04b0da7 100644 --- a/src/app/home/home.component.spec.ts +++ b/src/app/home/home.component.spec.ts @@ -1,8 +1,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { CoreModule } from '@app/core'; -import { SharedModule } from '@app/shared'; +import { CoreModule } from '../core'; +import { SharedModule } from '../shared'; import { HomeComponent } from './home.component'; import { QuoteService } from './quote.service'; diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 12f9ea543..5ba81aabd 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,10 +1,11 @@ import { Component, OnInit } from '@angular/core'; + import { finalize } from 'rxjs/operators'; import { QuoteService } from './quote.service'; @Component({ - selector: 'app-home', + selector: 'mifosx-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) @@ -17,9 +18,9 @@ export class HomeComponent implements OnInit { ngOnInit() { this.isLoading = true; - this.quoteService.getRandomQuote({ category: 'dev' }) - .pipe(finalize(() => { this.isLoading = false; })) - .subscribe((quote: string) => { this.quote = quote; }); + // this.quoteService.getRandomQuote({ category: 'dev' }) + // .pipe(finalize(() => { this.isLoading = false; })) + // .subscribe((quote: string) => { this.quote = quote; }); } } diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index f810ce91d..299c83520 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -1,10 +1,10 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; + import { TranslateModule } from '@ngx-translate/core'; import { NgxChartsModule } from '@swimlane/ngx-charts'; -import { CoreModule } from '../../app/core'; -import { SharedModule } from '../../app/shared'; +import { SharedModule } from '../shared'; import { HomeRoutingModule } from './home-routing.module'; import { HomeComponent } from './home.component'; import { QuoteService } from './quote.service'; @@ -15,14 +15,13 @@ import { DashboardComponent } from './dashboard/dashboard.component'; CommonModule, TranslateModule, NgxChartsModule, - CoreModule, SharedModule, HomeRoutingModule ], declarations: [ HomeComponent, DashboardComponent -], + ], providers: [ QuoteService ] diff --git a/src/app/home/quote.service.spec.ts b/src/app/home/quote.service.spec.ts index 5a7d1619b..60497975b 100644 --- a/src/app/home/quote.service.spec.ts +++ b/src/app/home/quote.service.spec.ts @@ -1,7 +1,7 @@ import { TestBed, inject, async } from '@angular/core/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { CoreModule, HttpCacheService } from '@app/core'; +import { CoreModule, HttpCacheService } from '../core'; import { QuoteService } from './quote.service'; describe('QuoteService', () => { diff --git a/src/app/home/quote.service.ts b/src/app/home/quote.service.ts index 7028a24a0..57ce3c066 100644 --- a/src/app/home/quote.service.ts +++ b/src/app/home/quote.service.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; + import { Observable, of } from 'rxjs'; import { map, catchError } from 'rxjs/operators'; diff --git a/src/app/login/login-routing.module.ts b/src/app/login/login-routing.module.ts index 289fb14f1..0581e3fc0 100644 --- a/src/app/login/login-routing.module.ts +++ b/src/app/login/login-routing.module.ts @@ -1,11 +1,15 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { extract } from '../../app/core'; +import { extract } from '../core'; import { LoginComponent } from './login.component'; const routes: Routes = [ - { path: 'login', component: LoginComponent, data: { title: extract('Login') } } + { + path: 'login', + component: LoginComponent, + data: { title: extract('Login') } + } ]; @NgModule({ diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 1488e4c6d..85e8133de 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,3 +1,5 @@ + + - + --> diff --git a/src/app/navigation/navigation.component.spec.ts b/src/app/navigation/navigation.component.spec.ts index ca9b8c132..385771816 100644 --- a/src/app/navigation/navigation.component.spec.ts +++ b/src/app/navigation/navigation.component.spec.ts @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; import { NavigationComponent } from './navigation.component'; diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts index 170b9751c..0797a52f8 100644 --- a/src/app/navigation/navigation.component.ts +++ b/src/app/navigation/navigation.component.ts @@ -1,12 +1,14 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-navigation', + selector: 'mifosx-navigation', templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.scss'] }) export class NavigationComponent implements OnInit { + currentJustify = 'start'; + constructor() { } ngOnInit() { diff --git a/src/app/self-service/create-user/create-user.component.html b/src/app/self-service/create-user/create-user.component.html index bb34ec742..e6a3038b4 100644 --- a/src/app/self-service/create-user/create-user.component.html +++ b/src/app/self-service/create-user/create-user.component.html @@ -1,4 +1,4 @@ -
+
@@ -16,7 +15,6 @@
-
@@ -121,4 +119,4 @@
- + --> diff --git a/src/app/self-service/create-user/create-user.component.ts b/src/app/self-service/create-user/create-user.component.ts index e0e92ccbd..ec3170653 100644 --- a/src/app/self-service/create-user/create-user.component.ts +++ b/src/app/self-service/create-user/create-user.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-create-user', + selector: 'mifosx-create-user', templateUrl: './create-user.component.html', styleUrls: ['./create-user.component.scss'] }) diff --git a/src/app/self-service/self-service-routing.module.ts b/src/app/self-service/self-service-routing.module.ts index 15f704bd8..1cb5aa78c 100644 --- a/src/app/self-service/self-service-routing.module.ts +++ b/src/app/self-service/self-service-routing.module.ts @@ -1,16 +1,28 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { Route, extract } from '../../app/core'; +import { Route, extract } from '../core'; import { UserManagementComponent } from './user-management/user-management.component'; import { CreateUserComponent } from './create-user/create-user.component'; import { ViewUserComponent } from './view-user/view-user.component'; const routes: Routes = [ Route.withShell([ - { path: 'self-service/users', component: UserManagementComponent, data: { title: extract('Self Service') } }, - { path: 'self-service/users/create', component: CreateUserComponent }, - { path: 'self-service/users/view', component: ViewUserComponent } + { + path: 'self-service/users', + component: UserManagementComponent, + data: { title: extract('Self Service Users') } + }, + { + path: 'self-service/users/create', + component: CreateUserComponent, + data: { title: extract('Create Self Service User') } + }, + { + path: 'self-service/users/view', + component: ViewUserComponent, + data: { title: extract('View Self Service User') } + } ]) ]; diff --git a/src/app/self-service/self-service.module.ts b/src/app/self-service/self-service.module.ts index 5d69bae3e..57c20a3e9 100644 --- a/src/app/self-service/self-service.module.ts +++ b/src/app/self-service/self-service.module.ts @@ -3,14 +3,12 @@ import { CommonModule } from '@angular/common'; import { UserManagementComponent } from './user-management/user-management.component'; import { SelfServiceRoutingModule } from './self-service-routing.module'; -import { CoreModule } from '../../app/core'; import { CreateUserComponent } from './create-user/create-user.component'; import { ViewUserComponent } from './view-user/view-user.component'; @NgModule({ imports: [ CommonModule, - CoreModule, SelfServiceRoutingModule ], declarations: [ diff --git a/src/app/self-service/user-management/user-management.component.html b/src/app/self-service/user-management/user-management.component.html index 30373029f..c97e1d986 100644 --- a/src/app/self-service/user-management/user-management.component.html +++ b/src/app/self-service/user-management/user-management.component.html @@ -1,4 +1,4 @@ -
+ - - - -
@@ -81,9 +79,7 @@ Staff
@@ -170,13 +166,10 @@
-
- - + --> diff --git a/src/app/self-service/user-management/user-management.component.scss b/src/app/self-service/user-management/user-management.component.scss index c48642986..2f66be7af 100644 --- a/src/app/self-service/user-management/user-management.component.scss +++ b/src/app/self-service/user-management/user-management.component.scss @@ -1,6 +1,6 @@ -td, th { - text-align: center; -} -ngb-pagination { - margin: 20px 0px; -} +// td, th { +// text-align: center; +// } +// ngb-pagination { +// margin: 20px 0px; +// } diff --git a/src/app/self-service/user-management/user-management.component.ts b/src/app/self-service/user-management/user-management.component.ts index ffe053826..2e84e4e87 100644 --- a/src/app/self-service/user-management/user-management.component.ts +++ b/src/app/self-service/user-management/user-management.component.ts @@ -1,11 +1,12 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-user-management', + selector: 'mifosx-user-management', templateUrl: './user-management.component.html', styleUrls: ['./user-management.component.scss'] }) export class UserManagementComponent implements OnInit { + page = 1; isCollapsed = true; diff --git a/src/app/self-service/view-user/view-user.component.html b/src/app/self-service/view-user/view-user.component.html index 8b830b207..91c9e4c34 100644 --- a/src/app/self-service/view-user/view-user.component.html +++ b/src/app/self-service/view-user/view-user.component.html @@ -1,4 +1,4 @@ -
+ + Username @@ -81,4 +76,4 @@
- + --> diff --git a/src/app/self-service/view-user/view-user.component.ts b/src/app/self-service/view-user/view-user.component.ts index 91a41b6e8..9cf45e1f4 100644 --- a/src/app/self-service/view-user/view-user.component.ts +++ b/src/app/self-service/view-user/view-user.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-view-user', + selector: 'mifosx-view-user', templateUrl: './view-user.component.html', styleUrls: ['./view-user.component.scss'] }) diff --git a/src/app/shared/loader/loader.component.html b/src/app/shared/loader/loader.component.html index 9ba7840c1..f3aa6ed73 100644 --- a/src/app/shared/loader/loader.component.html +++ b/src/app/shared/loader/loader.component.html @@ -1,4 +1,5 @@ -
- {{message}} + +
+ {{message}}
diff --git a/src/app/shared/loader/loader.component.scss b/src/app/shared/loader/loader.component.scss index 4e9a06433..e69de29bb 100644 --- a/src/app/shared/loader/loader.component.scss +++ b/src/app/shared/loader/loader.component.scss @@ -1,3 +0,0 @@ -.fa { - vertical-align: middle; -} diff --git a/src/app/shared/loader/loader.component.ts b/src/app/shared/loader/loader.component.ts index 710236746..cb4e24de5 100644 --- a/src/app/shared/loader/loader.component.ts +++ b/src/app/shared/loader/loader.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, Input } from '@angular/core'; @Component({ - selector: 'app-loader', + selector: 'mifosx-loader', templateUrl: './loader.component.html', styleUrls: ['./loader.component.scss'] }) diff --git a/src/app/app.component.html b/src/app/web-app.component.html similarity index 100% rename from src/app/app.component.html rename to src/app/web-app.component.html diff --git a/src/app/web-app.component.scss b/src/app/web-app.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/app.component.spec.ts b/src/app/web-app.component.spec.ts similarity index 74% rename from src/app/app.component.spec.ts rename to src/app/web-app.component.spec.ts index 64ded582e..768631304 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/web-app.component.spec.ts @@ -2,8 +2,8 @@ import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { TranslateModule } from '@ngx-translate/core'; -import { CoreModule } from '@app/core'; -import { AppComponent } from './app.component'; +import { CoreModule } from './core/core.module'; +import { WebAppComponent } from './web-app.component'; describe('AppComponent', () => { beforeEach(async(() => { @@ -13,14 +13,14 @@ describe('AppComponent', () => { TranslateModule.forRoot(), CoreModule ], - declarations: [AppComponent], + declarations: [WebAppComponent], providers: [] }); TestBed.compileComponents(); })); it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); + const fixture = TestBed.createComponent(WebAppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); diff --git a/src/app/app.component.ts b/src/app/web-app.component.ts similarity index 86% rename from src/app/app.component.ts rename to src/app/web-app.component.ts index 83822d620..47cc2d004 100644 --- a/src/app/app.component.ts +++ b/src/app/web-app.component.ts @@ -1,20 +1,22 @@ import { Component, OnInit } from '@angular/core'; import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; import { Title } from '@angular/platform-browser'; + import { TranslateService } from '@ngx-translate/core'; import { merge } from 'rxjs'; import { filter, map, mergeMap } from 'rxjs/operators'; import { environment } from '../environments/environment'; -import { Logger, I18nService } from '../app/core'; -const log = new Logger('App'); +import { Logger, I18nService } from './core'; + +const log = new Logger('MifosX'); @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + selector: 'mifosx-web-app', + templateUrl: './web-app.component.html', + styleUrls: ['./web-app.component.scss'] }) -export class AppComponent implements OnInit { +export class WebAppComponent implements OnInit { constructor(private router: Router, private activatedRoute: ActivatedRoute, @@ -30,7 +32,6 @@ export class AppComponent implements OnInit { log.debug('init'); - // Setup translations this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages); @@ -55,6 +56,7 @@ export class AppComponent implements OnInit { this.titleService.setTitle(this.translateService.instant(title)); } }); + } } diff --git a/src/assets/images/user_placeholder.png b/src/assets/images/user_placeholder.png new file mode 100644 index 000000000..0ed75eccc Binary files /dev/null and b/src/assets/images/user_placeholder.png differ diff --git a/src/index.html b/src/index.html index 527e89ec3..c228d5c50 100644 --- a/src/index.html +++ b/src/index.html @@ -36,8 +36,8 @@ window.addEventListener('load',function() { window.scrollTo(0, 1); }); - + Loading... - + diff --git a/src/main.scss b/src/main.scss index 9e8376d29..2c40e0808 100644 --- a/src/main.scss +++ b/src/main.scss @@ -4,7 +4,71 @@ */ // Theme customization +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; // 3rd party libraries // Other imports + +/* You can add global styles to this file, and also import other style files */ +body, html { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; + -webkit-tap-highlight-color: transparent; + min-height: 100%; + -webkit-font-smoothing: antialiased; +} + +html { + font-size: 16px; +} + +body { + margin: 0; + padding: 0; + font-weight: 400; + font-size: .875rem; + color: rgba(0,0,0,.87); + line-height: 1.5; + font-family: Roboto, Helvetica Neue, sans-serif; +} + +div { + box-sizing: border-box; +} + +.mat-icon-button.xs-button { + height: 20px; + width: 20px; + line-height: 20px; +} + +.mat-icon-button.xs-button .mat-icon { + font-size: 16px; + line-height: 20px; + height: 20px; + width: 20px; +} + +.text-muted { + color: rgba(0, 0, 0, .54); +} + +.mb-05 { + margin-bottom: .5rem; +} + +.mr-05 { + margin-right: .5rem; +} + +.mb-1 { + margin-bottom: 1rem; +} + +.mt-1 { + margin-top: 1rem; +} + diff --git a/src/main.ts b/src/main.ts index 63060767f..cb48ee4f9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ /* * Entry point of the application. * Only platform bootstrapping code should be here. - * For app-specific initialization, use `app/app.component.ts`. + * For app-specific initialization, use `app/web-app.component.ts`. */ import { enableProdMode } from '@angular/core';