ucap/ucap-lg-web
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.loafle.net/ucap/ucap-lg-web

Browse Source
This commit is contained in:
khk 2020-04-17 13:20:17 +09:00
commit e671814585
22 changed files with 158 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/app/app-routing.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule, UrlSegment } from '@angular/router';
import { Routes, RouterModule } from '@angular/router';
import { DefaultLayoutComponent } from '@app/layouts/components/default.layout.component';
import { NoNaviLayoutComponent } from '@app/layouts/components/no-navi.layout.component';
@ -7,21 +7,12 @@ import { NoNaviLayoutComponent } from '@app/layouts/components/no-navi.layout.co
import { AppAuthenticationGuard } from '@app/guards/app-authentication.guard';
import { AppSessionResolver } from './resolvers/app-session.resolver';
export function appMatcher(url: UrlSegment[]) {
if (1 === url.length) {
if (
['organization', 'group', 'chat', 'message'].some((p) =>
url[0].path.startsWith(p)
)
) {
return { consumed: url };
}
}
return null;
}
const routes: Routes = [
{ path: '', redirectTo: '/organization', pathMatch: 'full' },
{
path: '',
redirectTo: '/organization/(content:index)',
pathMatch: 'full'
},
{
path: 'account',
component: NoNaviLayoutComponent,
@ -39,59 +30,50 @@ const routes: Routes = [
)
},
{
matcher: appMatcher,
path: '',
component: DefaultLayoutComponent,
canActivate: [AppAuthenticationGuard],
resolve: {
session: AppSessionResolver
}
authentication: AppSessionResolver
},
children: [
{
path: 'organization',
loadChildren: () =>
import('./pages/organization/organization.page.module').then(
(m) => m.AppOrganizationPageModule
)
},
{
path: 'group',
loadChildren: () =>
import('./pages/group/group.page.module').then(
(m) => m.AppGroupPageModule
)
},
{
path: 'chat',
loadChildren: () =>
import('./pages/chat/chat.page.module').then(
(m) => m.AppChatPageModule
)
},
{
path: 'call',
loadChildren: () =>
import('./pages/call/call.page.module').then(
(m) => m.AppCallPageModule
)
},
{
path: 'message',
loadChildren: () =>
import('./pages/message/message.page.module').then(
(m) => m.AppMessagePageModule
)
}
]
},
// {
// path: '',
// component: DefaultLayoutComponent,
// canActivate: [AppAuthenticationGuard],
// resolve: {
// authentication: AppAuthenticationResolver
// },
// children: [
// { path: '', redirectTo: '/organization', pathMatch: 'full' },
// {
// path: 'organization',
// loadChildren: () =>
// import('./pages/organization/organization.page.module').then(
// (m) => m.AppOrganizationPageModule
// )
// },
// {
// path: 'group',
// loadChildren: () =>
// import('./pages/group/group.page.module').then(
// (m) => m.AppGroupPageModule
// )
// },
// {
// path: 'chat',
// loadChildren: () =>
// import('./pages/chat/chat.page.module').then(
// (m) => m.AppChatPageModule
// )
// },
// {
// path: 'call',
// loadChildren: () =>
// import('./pages/call/call.page.module').then(
// (m) => m.AppCallPageModule
// )
// },
// {
// path: 'message',
// loadChildren: () =>
// import('./pages/message/message.page.module').then(
// (m) => m.AppMessagePageModule
// )
// }
// ]
// },
{
path: '**',
redirectTo: '/common/e404'

11
src/app/layouts/components/default.layout.component.html
View File

@ -97,17 +97,10 @@
<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="sidenavComponent; injector: sidenavInjector"
>
</ng-container>
<router-outlet></router-outlet>
</mat-sidenav>
<div fxFlex="1 1 auto">
<ng-container
*ngComponentOutlet="contentComponent; injector: contentInjector"
>
</ng-container>
<router-outlet name="content"></router-outlet>
</div>
</mat-sidenav-container>
</div>

92
src/app/layouts/components/default.layout.component.ts
View File

@ -1,26 +1,18 @@
import { Subscription } from 'rxjs';
import {
Component,
ViewChild,
OnDestroy,
OnInit,
Type,
Injector
} from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
import { MatSidenav } from '@angular/material/sidenav';
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';
const NAVS = ['/group', '/chat', '/organization', '/message'];
const NAVS = ['group', 'chat', 'organization', 'message'];
@Component({
selector: 'app-layouts-default',
@ -34,26 +26,13 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
@ViewChild('leftSidenav', { static: true })
leftSidenav: MatSidenav;
sidenavComponent: Type<any>;
sidenavInjector: Injector;
contentComponent: Type<any>;
contentInjector: Injector;
private windowSizeSubscription: Subscription;
private routerEventSubscription: Subscription;
constructor(
private router: Router,
private injector: Injector,
private store: Store<any>,
private logService: LogService
) {
this.routerEventSubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.onRoute(event.url);
}
});
}
) {}
ngOnInit(): void {
this.windowSizeSubscription = this.store
@ -70,63 +49,20 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
}
});
this.onRoute(this.router.url);
this.setTabGroup(this.router.url);
}
ngOnDestroy(): void {
if (!this.windowSizeSubscription) {
this.windowSizeSubscription.unsubscribe();
}
if (!!this.routerEventSubscription) {
this.routerEventSubscription.unsubscribe();
}
}
onSelectedTabChange(event: MatTabChangeEvent) {
this.router.navigate([NAVS[event.index]]);
}
onRoute(url: string) {
this.navTabGroup.selectedIndex = NAVS.findIndex((v) => url.startsWith(v));
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/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.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:
break;
}
this.router.navigate([
NAVS[event.index],
{ outlets: { content: 'index' } }
]);
}
onClickToggleLeftSidenav() {
@ -136,4 +72,10 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
this.leftSidenav.open();
}
}
private setTabGroup(url: string) {
this.navTabGroup.selectedIndex = NAVS.findIndex((v) =>
url.startsWith(`/${v}`)
);
}
}

15
src/app/pages/call/call-routing.page.module.ts
View File

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

3
src/app/pages/call/components/index.ts
View File

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

9
src/app/pages/call/components/sidenav.page.component.ts
View File

@ -3,18 +3,11 @@ 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);
}
constructor(private logService: LogService) {}
}

15
src/app/pages/chat/chat-routing.page.module.ts
View File

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

4
src/app/pages/chat/components/index.ts Normal file
View File

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

9
src/app/pages/chat/components/sidenav.page.component.ts
View File

@ -3,18 +3,11 @@ 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);
}
constructor(private logService: LogService) {}
}

9
src/app/pages/group/components/index.page.component.ts
View File

@ -2,18 +2,11 @@ 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',
templateUrl: './index.page.component.html',
styleUrls: ['./index.page.component.scss']
})
export class IndexPageComponent {
constructor(
@Inject(UCAP_PATH_PARAM) private pathParam: string,
private logService: LogService
) {
this.logService.info('app-pages-group-index', 'pathParam', this.pathParam);
}
constructor(private logService: LogService) {}
}

4
src/app/pages/group/components/index.ts Normal file
View File

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

13
src/app/pages/group/components/sidenav.page.component.ts
View File

@ -2,22 +2,11 @@ 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
);
}
constructor(private logService: LogService) {}
}

15
src/app/pages/group/group-routing.page.module.ts
View File

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

4
src/app/pages/message/components/index.ts Normal file
View File

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

13
src/app/pages/message/components/sidenav.page.component.ts
View File

@ -2,22 +2,11 @@ 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
);
}
constructor(private logService: LogService) {}
}

6
src/app/pages/message/message-routing.page.module.ts
View File

@ -2,11 +2,17 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexPageComponent } from './components/index.page.component';
import { SidenavPageComponent } from './components/sidenav.page.component';
const routes: Routes = [
{
path: 'index',
outlet: 'content',
component: IndexPageComponent
},
{
path: '',
component: SidenavPageComponent
}
];

4
src/app/pages/organization/components/index.ts Normal file
View File

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

2
src/app/pages/organization/components/sidenav.page.component.html
View File

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

15
src/app/pages/organization/components/sidenav.page.component.ts
View File

@ -1,23 +1,14 @@
import { Component, Inject } from '@angular/core';
import { Component } 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
);
constructor(private logService: LogService) {
this.logService.info('app-pages-ogranization-sidenav');
}
}

15
src/app/pages/organization/organization-routing.page.module.ts
View File

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

7
src/app/pages/organization/organization.page.module.ts
View File

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

6
src/app/types/tokens.ts
View File

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