bug fixed

This commit is contained in:
richard-loafle 2020-04-16 16:53:36 +09:00
parent b161bf6d66
commit 83665af16f
43 changed files with 303 additions and 179 deletions

View File

@ -96,11 +96,16 @@
<div class="content-container" fxFlexFill>
<mat-sidenav-container autosize="true" fxFlexFill>
<mat-sidenav #leftSidenav class="left-sidenav" mode="side" opened="true">
<ng-container fxFlexFill *ngComponentOutlet="leftSectionComponent">
<ng-container
fxFlexFill
*ngComponentOutlet="sidenavComponent; injector: sidenavInjector"
>
</ng-container>
</mat-sidenav>
<div fxFlex="1 1 auto">
<ng-container *ngComponentOutlet="contentSectionComponent">
<ng-container
*ngComponentOutlet="contentComponent; injector: contentInjector"
>
</ng-container>
</div>
</mat-sidenav-container>

View File

@ -1,7 +1,14 @@
import { Subscription } from 'rxjs';
import { Component, ViewChild, OnDestroy, OnInit, Type } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import {
Component,
ViewChild,
OnDestroy,
OnInit,
Type,
Injector
} from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { MatTabChangeEvent } from '@angular/material/tabs';
import { MatSidenav } from '@angular/material/sidenav';
@ -11,6 +18,7 @@ import { Store, select } from '@ngrx/store';
import { LogService } from '@ucap/ng-logger';
import { AppSelector } from '@app/store/state';
import { UCAP_PATH_PARAM } from '@app/types/tokens';
@Component({
selector: 'app-layouts-default',
@ -21,20 +29,25 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
@ViewChild('leftSidenav', { static: true })
leftSidenav: MatSidenav;
leftSectionComponent: Type<any>;
contentSectionComponent: Type<any>;
sidenavComponent: Type<any>;
sidenavInjector: Injector;
contentComponent: Type<any>;
contentInjector: Injector;
private windowSizeSubscription: Subscription;
private routerEventSubscription: Subscription;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private injector: Injector,
private store: Store<any>,
private logService: LogService
) {
this.routerEventSubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.logService.debug('DefaultLayoutComponent', event);
this.onRoute(event.url);
}
});
}
@ -82,28 +95,40 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
onRoute(url: string) {
this.logService.debug('onRoute', url);
this.sidenavInjector = Injector.create({
providers: [{ provide: UCAP_PATH_PARAM, useValue: 'sidenav' }],
parent: this.injector
});
this.contentInjector = Injector.create({
providers: [{ provide: UCAP_PATH_PARAM, useValue: 'content' }],
parent: this.injector
});
switch (url) {
case '/organization':
import('@app/sections/organization/organization.section.module').then(
(m) => {
this.leftSectionComponent = m.TreeListSectionComponent;
}
);
import('@app/sections/organization/organization.section.module').then(
(m) => {
this.contentSectionComponent = m.MembersSectionComponent;
}
);
import('@app/pages/organization/organization.page.module').then((m) => {
this.sidenavComponent = m.SidenavPageComponent;
this.contentComponent = m.IndexPageComponent;
});
break;
case '/group':
import('@app/pages/group/group.page.module').then((m) => {
this.sidenavComponent = m.SidenavPageComponent;
this.contentComponent = m.IndexPageComponent;
});
break;
case '/chat':
import('@app/pages/chat/chat.page.module').then((m) => {
this.leftSectionComponent = m.RoomListPageComponent;
this.contentSectionComponent = m.IndexPageComponent;
this.sidenavComponent = m.SidenavPageComponent;
this.contentComponent = m.IndexPageComponent;
});
break;
case '/message':
import('@app/pages/message/message.page.module').then((m) => {
this.sidenavComponent = m.SidenavPageComponent;
this.contentComponent = m.IndexPageComponent;
});
break;
default:

View File

@ -1,14 +1,7 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexPageComponent } from './components/index.page.component';
const routes: Routes = [
{
path: 'index',
component: IndexPageComponent
}
];
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],

View File

@ -5,7 +5,12 @@ import { FlexLayoutModule } from '@angular/flex-layout';
import { AppCallRoutingPageModule } from './call-routing.page.module';
import { COMPONENTS } from './components';
import { IndexPageComponent } from './components/index.page.component';
import { SidenavPageComponent } from './components/sidenav.page.component';
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
export { IndexPageComponent, SidenavPageComponent };
@NgModule({
imports: [CommonModule, FlexLayoutModule, AppCallRoutingPageModule],

View File

@ -0,0 +1,3 @@
<div fxFlexFill>
sidenav page of call is works!
</div>

View File

@ -1,28 +1,28 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { RoomListPageComponent } from './room-list.page.component';
import { SidenavPageComponent } from './sidenav.page.component';
describe('app::pages::chat::RoomListPageComponent', () => {
describe('app::pages::call::SidenavPageComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [RoomListPageComponent]
declarations: [SidenavPageComponent]
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(RoomListPageComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'ucap-lg-web'`, () => {
const fixture = TestBed.createComponent(RoomListPageComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
});
it('should render title', () => {
const fixture = TestBed.createComponent(RoomListPageComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain(

View File

@ -0,0 +1,20 @@
import { Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { LogService } from '@ucap/ng-logger';
import { UCAP_PATH_PARAM } from '@app/types/tokens';
@Component({
selector: 'app-pages-call-sidenav',
templateUrl: './sidenav.page.component.html',
styleUrls: ['./sidenav.page.component.scss']
})
export class SidenavPageComponent {
constructor(
@Inject(UCAP_PATH_PARAM) private pathParam: string,
private logService: LogService
) {
this.logService.info('app-pages-call-sidenav', 'pathParam', this.pathParam);
}
}

View File

@ -6,11 +6,11 @@ import { FlexLayoutModule } from '@angular/flex-layout';
import { AppChatRoutingPageModule } from './chat-routing.page.module';
import { IndexPageComponent } from './components/index.page.component';
import { RoomListPageComponent } from './components/room-list.page.component';
import { SidenavPageComponent } from './components/sidenav.page.component';
export const COMPONENTS = [IndexPageComponent, RoomListPageComponent];
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
export { IndexPageComponent, RoomListPageComponent };
export { IndexPageComponent, SidenavPageComponent };
@NgModule({
imports: [CommonModule, FlexLayoutModule, AppChatRoutingPageModule],

View File

@ -1,3 +0,0 @@
<div fxFlexFill>
Room list page of chat is works!
</div>

View File

@ -1,13 +0,0 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-pages-chat-room-list',
templateUrl: './room-list.page.component.html',
styleUrls: ['./room-list.page.component.scss']
})
export class RoomListPageComponent {
constructor(private router: Router) {
console.log('RoomListPageComponent', this.router.url, this.router);
}
}

View File

@ -0,0 +1,3 @@
<div fxFlexFill>
sidenav page of chat is works!
</div>

View File

@ -1,28 +1,28 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { MembersSectionComponent } from './members.section.component';
import { SidenavPageComponent } from './sidenav.page.component';
describe('app::sections::organization::MembersSectionComponent', () => {
describe('app::pages::chat::SidenavPageComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [MembersSectionComponent]
declarations: [SidenavPageComponent]
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(MembersSectionComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'ucap-lg-web'`, () => {
const fixture = TestBed.createComponent(MembersSectionComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
});
it('should render title', () => {
const fixture = TestBed.createComponent(MembersSectionComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain(

View File

@ -0,0 +1,20 @@
import { Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { LogService } from '@ucap/ng-logger';
import { UCAP_PATH_PARAM } from '@app/types/tokens';
@Component({
selector: 'app-pages-chat-sidenav',
templateUrl: './sidenav.page.component.html',
styleUrls: ['./sidenav.page.component.scss']
})
export class SidenavPageComponent {
constructor(
@Inject(UCAP_PATH_PARAM) private pathParam: string,
private logService: LogService
) {
this.logService.info('app-pages-chat-sidenav', 'pathParam', this.pathParam);
}
}

View File

@ -1,5 +1,8 @@
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Component, Inject } from '@angular/core';
import { LogService } from '@ucap/ng-logger';
import { UCAP_PATH_PARAM } from '@app/types/tokens';
@Component({
selector: 'app-pages-group-index',
@ -7,5 +10,10 @@ import { Store } from '@ngrx/store';
styleUrls: ['./index.page.component.scss']
})
export class IndexPageComponent {
constructor(private store: Store<any>) {}
constructor(
@Inject(UCAP_PATH_PARAM) private pathParam: string,
private logService: LogService
) {
this.logService.info('app-pages-group-index', 'pathParam', this.pathParam);
}
}

View File

@ -1,3 +0,0 @@
import { IndexPageComponent } from './index.page.component';
export const COMPONENTS = [IndexPageComponent];

View File

@ -0,0 +1,3 @@
<div fxFlexFill>
sidenav page of group is works!
</div>

View File

@ -1,28 +1,28 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { TreeListSectionComponent } from './tree-list.section.component';
import { SidenavPageComponent } from './sidenav.page.component';
describe('app::sections::organization::TreeListSectionComponent', () => {
describe('app::pages::group::SidenavPageComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [TreeListSectionComponent]
declarations: [SidenavPageComponent]
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(TreeListSectionComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'ucap-lg-web'`, () => {
const fixture = TestBed.createComponent(TreeListSectionComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
});
it('should render title', () => {
const fixture = TestBed.createComponent(TreeListSectionComponent);
const fixture = TestBed.createComponent(SidenavPageComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain(

View File

@ -0,0 +1,23 @@
import { Component, Inject } from '@angular/core';
import { LogService } from '@ucap/ng-logger';
import { UCAP_PATH_PARAM } from '@app/types/tokens';
@Component({
selector: 'app-pages-group-sidenav',
templateUrl: './sidenav.page.component.html',
styleUrls: ['./sidenav.page.component.scss']
})
export class SidenavPageComponent {
constructor(
@Inject(UCAP_PATH_PARAM) private pathParam: string,
private logService: LogService
) {
this.logService.info(
'app-pages-group-sidenav',
'pathParam',
this.pathParam
);
}
}

View File

@ -1,14 +1,7 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexPageComponent } from './components/index.page.component';
const routes: Routes = [
{
path: 'index',
component: IndexPageComponent
}
];
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],

View File

@ -5,7 +5,12 @@ import { FlexLayoutModule } from '@angular/flex-layout';
import { AppGroupRoutingPageModule } from './group-routing.page.module';
import { COMPONENTS } from './components';
import { IndexPageComponent } from './components/index.page.component';
import { SidenavPageComponent } from './components/sidenav.page.component';
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
export { IndexPageComponent, SidenavPageComponent };
@NgModule({
imports: [CommonModule, FlexLayoutModule, AppGroupRoutingPageModule],

View File

@ -1,3 +0,0 @@
import { IndexPageComponent } from './index.page.component';
export const COMPONENTS = [IndexPageComponent];

View File

@ -0,0 +1,3 @@
<div fxFlexFill>
sidenav page of group is works!
</div>

View File

@ -0,0 +1,32 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { SidenavPageComponent } from './sidenav.page.component';
describe('app::pages::group::SidenavPageComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [SidenavPageComponent]
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'ucap-lg-web'`, () => {
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
});
it('should render title', () => {
const fixture = TestBed.createComponent(SidenavPageComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain(
'ucap-lg-web app is running!'
);
});
});

View File

@ -0,0 +1,23 @@
import { Component, Inject } from '@angular/core';
import { LogService } from '@ucap/ng-logger';
import { UCAP_PATH_PARAM } from '@app/types/tokens';
@Component({
selector: 'app-pages-group-sidenav',
templateUrl: './sidenav.page.component.html',
styleUrls: ['./sidenav.page.component.scss']
})
export class SidenavPageComponent {
constructor(
@Inject(UCAP_PATH_PARAM) private pathParam: string,
private logService: LogService
) {
this.logService.info(
'app-pages-group-sidenav',
'pathParam',
this.pathParam
);
}
}

View File

@ -5,7 +5,12 @@ import { FlexLayoutModule } from '@angular/flex-layout';
import { AppMessageRoutingPageModule } from './message-routing.page.module';
import { COMPONENTS } from './components';
import { IndexPageComponent } from './components/index.page.component';
import { SidenavPageComponent } from './components/sidenav.page.component';
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
export { IndexPageComponent, SidenavPageComponent };
@NgModule({
imports: [CommonModule, FlexLayoutModule, AppMessageRoutingPageModule],

View File

@ -1,3 +0,0 @@
import { IndexPageComponent } from './index.page.component';
export const COMPONENTS = [IndexPageComponent];

View File

@ -0,0 +1,3 @@
<div fxFlexFill>
sidenav page of ogranization is works!
</div>

View File

@ -0,0 +1,32 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { SidenavPageComponent } from './sidenav.page.component';
describe('app::pages::group::SidenavPageComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [SidenavPageComponent]
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'ucap-lg-web'`, () => {
const fixture = TestBed.createComponent(SidenavPageComponent);
const app = fixture.componentInstance;
});
it('should render title', () => {
const fixture = TestBed.createComponent(SidenavPageComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain(
'ucap-lg-web app is running!'
);
});
});

View File

@ -0,0 +1,23 @@
import { Component, Inject } from '@angular/core';
import { LogService } from '@ucap/ng-logger';
import { UCAP_PATH_PARAM } from '@app/types/tokens';
@Component({
selector: 'app-pages-ogranization-sidenav',
templateUrl: './sidenav.page.component.html',
styleUrls: ['./sidenav.page.component.scss']
})
export class SidenavPageComponent {
constructor(
@Inject(UCAP_PATH_PARAM) private pathParam: string,
private logService: LogService
) {
this.logService.info(
'app-pages-ogranization-sidenav',
'pathParam',
this.pathParam
);
}
}

View File

@ -1,14 +1,7 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexPageComponent } from './components/index.page.component';
const routes: Routes = [
{
path: 'index',
component: IndexPageComponent
}
];
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],

View File

@ -5,7 +5,12 @@ import { FlexLayoutModule } from '@angular/flex-layout';
import { AppOrganizationRoutingPageModule } from './organization-routing.page.module';
import { COMPONENTS } from './components';
import { IndexPageComponent } from './components/index.page.component';
import { SidenavPageComponent } from './components/sidenav.page.component';
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
export { IndexPageComponent, SidenavPageComponent };
@NgModule({
imports: [CommonModule, FlexLayoutModule, AppOrganizationRoutingPageModule],

View File

@ -1,3 +0,0 @@
<div fxFlexFill>
members
</div>

View File

@ -1,19 +0,0 @@
import { Subscription } from 'rxjs';
import { take, filter } from 'rxjs/operators';
import { Component, OnInit, OnDestroy, Input, ViewChild } from '@angular/core';
import { LogService } from '@ucap/ng-logger';
@Component({
selector: 'app-sections-organization-members',
templateUrl: './members.section.component.html',
styleUrls: ['./members.section.component.scss']
})
export class MembersSectionComponent implements OnInit, OnDestroy {
constructor(private logService: LogService) {}
ngOnInit(): void {}
ngOnDestroy(): void {}
}

View File

@ -1,3 +0,0 @@
<div fxFlexFill>
tree list
</div>

View File

@ -1,19 +0,0 @@
import { Subscription } from 'rxjs';
import { take, filter } from 'rxjs/operators';
import { Component, OnInit, OnDestroy, Input, ViewChild } from '@angular/core';
import { LogService } from '@ucap/ng-logger';
@Component({
selector: 'app-sections-organization-tree-list',
templateUrl: './tree-list.section.component.html',
styleUrls: ['./tree-list.section.component.scss']
})
export class TreeListSectionComponent implements OnInit, OnDestroy {
constructor(private logService: LogService) {}
ngOnInit(): void {}
ngOnDestroy(): void {}
}

View File

@ -1,37 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
import { AuthenticationUiModule } from '@ucap/ng-ui-authentication';
import { MembersSectionComponent } from './components/members.section.component';
import { TreeListSectionComponent } from './components/tree-list.section.component';
const COMPONENTS = [MembersSectionComponent, TreeListSectionComponent];
export { MembersSectionComponent, TreeListSectionComponent };
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatCheckboxModule,
I18nModule,
AuthenticationUiModule
],
exports: [...COMPONENTS],
declarations: [...COMPONENTS],
entryComponents: [],
providers: [
{
provide: UCAP_I18N_NAMESPACE,
useValue: ['organization']
}
]
})
export class AppOrganizationSectionModule {}

5
src/app/types/tokens.ts Normal file
View File

@ -0,0 +1,5 @@
import { InjectionToken } from '@angular/core';
export const UCAP_PATH_PARAM = new InjectionToken<string>(
'@ucap/app PATH_PARAM'
);

View File

@ -178,6 +178,6 @@ export const environment: Environment = {
},
pingProtocolModuleConfig: {
statusCode: 'O',
interval: 5
interval: 20
}
};