0524 sync
This commit is contained in:
Park Byung Eun
parent
4f42fc5c2d
commit
23bbfc4b63
|
|
@ -9,5 +9,10 @@ module.exports = (config, options) => {
|
|||
fs: 'empty'
|
||||
};
|
||||
|
||||
config.resolve.alias = {
|
||||
...config.resolve.alias,
|
||||
'@ucap/lg-scss': path.resolve(__dirname, '..', 'src/assets/scss')
|
||||
};
|
||||
|
||||
return config;
|
||||
};
|
||||
|
|
|
|||
1864
package-lock.json
generated
1864
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
23
package.json
23
package.json
|
|
@ -68,16 +68,18 @@
|
|||
"@ucap/ng-protocol-status": "~0.0.3",
|
||||
"@ucap/ng-protocol-sync": "~0.0.3",
|
||||
"@ucap/ng-protocol-umg": "~0.0.3",
|
||||
"@ucap/ng-store-authentication": "~0.0.10",
|
||||
"@ucap/ng-store-chat": "~0.0.5",
|
||||
"@ucap/ng-store-group": "~0.0.6",
|
||||
"@ucap/ng-store-organization": "~0.0.4",
|
||||
"@ucap/ng-store-authentication": "~0.0.11",
|
||||
"@ucap/ng-store-chat": "~0.0.13",
|
||||
"@ucap/ng-store-group": "~0.0.14",
|
||||
"@ucap/ng-store-organization": "~0.0.8",
|
||||
"@ucap/ng-web-socket": "~0.0.2",
|
||||
"@ucap/ng-web-storage": "~0.0.3",
|
||||
"@ucap/ng-ui": "~0.0.4",
|
||||
"@ucap/ng-ui-organization": "~0.0.2",
|
||||
"@ucap/ng-ui-authentication": "~0.0.16",
|
||||
"@ucap/ng-ui-group": "~0.0.4",
|
||||
"@ucap/ng-ui": "~0.0.19",
|
||||
"@ucap/ng-ui-organization": "~0.0.55",
|
||||
"@ucap/ng-ui-authentication": "~0.0.24",
|
||||
"@ucap/ng-ui-group": "~0.0.33",
|
||||
"@ucap/ng-ui-chat": "~0.0.9",
|
||||
"@ucap/ng-ui-material": "~0.0.4",
|
||||
"@ucap/ng-ui-skin-default": "~0.0.1",
|
||||
"@ucap/pi": "~0.0.5",
|
||||
"@ucap/protocol": "~0.0.17",
|
||||
|
|
@ -86,7 +88,7 @@
|
|||
"@ucap/protocol-event": "~0.0.5",
|
||||
"@ucap/protocol-file": "~0.0.4",
|
||||
"@ucap/protocol-group": "~0.0.5",
|
||||
"@ucap/protocol-info": "~0.0.5",
|
||||
"@ucap/protocol-info": "~0.0.6",
|
||||
"@ucap/protocol-inner": "~0.0.4",
|
||||
"@ucap/protocol-option": "~0.0.7",
|
||||
"@ucap/protocol-ping": "~0.0.6",
|
||||
|
|
@ -96,8 +98,9 @@
|
|||
"@ucap/protocol-status": "~0.0.5",
|
||||
"@ucap/protocol-sync": "~0.0.4",
|
||||
"@ucap/protocol-umg": "~0.0.5",
|
||||
"@ucap/ui-scss": "~0.0.4",
|
||||
"@ucap/web-socket": "~0.0.10",
|
||||
"@ucap/web-storage": "~0.0.7",
|
||||
"@ucap/web-storage": "~0.0.9",
|
||||
"autolinker": "^3.13.0",
|
||||
"axios": "^0.19.2",
|
||||
"classlist.js": "^1.1.20150312",
|
||||
|
|
|
|||
|
|
@ -14,10 +14,16 @@ import { AppSessionResolver } from './resolvers/app-session.resolver';
|
|||
import { AppAuthenticationService } from './services/app-authentication.service';
|
||||
import { AppNativeService } from './services/app-native.service';
|
||||
import { AppService } from './services/app.service';
|
||||
import { AppChatService } from './services/app-chat.service';
|
||||
|
||||
const GUARDS = [AppAuthenticationGuard];
|
||||
const RESOLVERS = [AppSessionResolver];
|
||||
const SERVICES = [AppService, AppAuthenticationService, AppNativeService];
|
||||
const SERVICES = [
|
||||
AppService,
|
||||
AppAuthenticationService,
|
||||
AppNativeService,
|
||||
AppChatService
|
||||
];
|
||||
|
||||
const axiosFactory = () => {
|
||||
const i = axios.create();
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
<app-layouts-top-bar></app-layouts-top-bar>
|
||||
<router-outlet></router-outlet>
|
||||
<div class="app-container">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
:host {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { StoreModule } from '@ngrx/store';
|
||||
import { EffectsModule } from '@ngrx/effects';
|
||||
|
|
@ -65,6 +67,8 @@ import { environment } from '@environments';
|
|||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
LoggerModule.forRoot({}),
|
||||
|
||||
CommonApiModule.forRoot(environment.commonApiModuleConfig),
|
||||
|
|
@ -100,7 +104,12 @@ import { environment } from '@environments';
|
|||
OrganizationStoreModule.forRoot({}),
|
||||
AuthenticationStoreModule.forRoot({}),
|
||||
GroupStoreModule.forRoot({ useMyDeptGroup: true, fixedGroupSeqs: [] }),
|
||||
ChatStoreModule.forRoot({}),
|
||||
ChatStoreModule.forRoot({
|
||||
eventRequestInitCount:
|
||||
environment.productConfig.chat.eventRequestInitCount,
|
||||
eventRequestDefaultCount:
|
||||
environment.productConfig.chat.eventRequestDefaultCount
|
||||
}),
|
||||
|
||||
OrganizationUiModule.forRoot({}),
|
||||
|
||||
|
|
|
|||
|
|
@ -45,3 +45,11 @@ $lgRed-app-theme: mat-light-theme(
|
|||
@include components-theme($lgRed-app-theme);
|
||||
*/
|
||||
@include ucap-material-theme($lgRed-app-theme);
|
||||
|
||||
$ucap-ui-lg-red-theme: mat-light-theme(
|
||||
$lgRed-app-primary,
|
||||
$lgRed-app-accent,
|
||||
$lgRed-app-warn
|
||||
);
|
||||
|
||||
@include ucap-ui-theme($ucap-ui-lg-red-theme, $typography);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="layout-container" fxLayout="column">
|
||||
<div class="layout-header" fxFlex="60px" fxLayout="row">
|
||||
<div fxFlex="1 1 auto">
|
||||
<ng-content
|
||||
class="layout-header-content"
|
||||
select="[appLayoutsDefaultDialog='header']"
|
||||
></ng-content>
|
||||
</div>
|
||||
<div fxFlex="30px" *ngIf="!disableClose">
|
||||
<button
|
||||
class="icon-button btn-dialog-close"
|
||||
(click)="onClickClose($event)"
|
||||
>
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-body" fxFlex="1 1 auto">
|
||||
<perfect-scrollbar style="width: 100%; height: 100%;">
|
||||
<ng-content
|
||||
class="layout-body-content"
|
||||
select="[appLayoutsDefaultDialog='body']"
|
||||
></ng-content>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
<div class="layout-action" fxFlex="60px">
|
||||
<ng-content
|
||||
class="layout-action-content"
|
||||
select="[appLayoutsDefaultDialog='action']"
|
||||
></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.layout-header {
|
||||
.layout-header-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.layout-body {
|
||||
overflow: auto;
|
||||
|
||||
.layout-body-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.layout-action {
|
||||
.layout-action-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { DefaultDialogLayoutComponent } from './default-dialog.layout.component';
|
||||
|
||||
describe('app::layouts::DefaultDialogLayoutComponent', () => {
|
||||
let component: DefaultDialogLayoutComponent;
|
||||
let fixture: ComponentFixture<DefaultDialogLayoutComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [DefaultDialogLayoutComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DefaultDialogLayoutComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import { Subject } from 'rxjs';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
AfterViewInit,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Inject,
|
||||
ViewChild,
|
||||
ComponentFactoryResolver,
|
||||
ViewContainerRef,
|
||||
ComponentRef,
|
||||
Input,
|
||||
EventEmitter,
|
||||
Output
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layouts-default-dialog',
|
||||
templateUrl: './default-dialog.layout.component.html',
|
||||
styleUrls: ['./default-dialog.layout.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class DefaultDialogLayoutComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
disableClose = false;
|
||||
|
||||
@Output()
|
||||
closed = new EventEmitter<MouseEvent>();
|
||||
|
||||
constructor(private changeDetectorRef: ChangeDetectorRef) {}
|
||||
|
||||
private ngOnDestroySubject: Subject<boolean>;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<boolean>();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onClickClose(event: MouseEvent): void {
|
||||
this.closed.emit(event);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,107 +1,271 @@
|
|||
<div fxFlexFill class="layout-container">
|
||||
<div class="navi-container">
|
||||
<mat-tab-group
|
||||
#navTabGroup
|
||||
vertical
|
||||
disablePagination="true"
|
||||
(selectedTabChange)="onSelectedTabChange($event)"
|
||||
>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="round"
|
||||
<div class="layout-container" fxLayout="row">
|
||||
<div class="navitab-page" fxFlex="0 0 60px">
|
||||
<div class="gnb">
|
||||
<mat-toolbar class="mat-gnb-toolbar"
|
||||
><img
|
||||
src="../../../assets/images/logo_140.png"
|
||||
alt=""
|
||||
class="img-logo"
|
||||
width="32"
|
||||
/></mat-toolbar>
|
||||
<mat-tab-group
|
||||
mat-stretch-tabs
|
||||
animationDuration="0ms"
|
||||
backgroundColor="transparent"
|
||||
class="global-menu"
|
||||
(selectedTabChange)="onSelectedTabChange($event)"
|
||||
>
|
||||
<mat-tab aria-label="Group">
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item" matTooltip="그룹" matTooltipPosition="after">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16.871"
|
||||
height="16.8"
|
||||
viewBox="0 0 16.871 16.8"
|
||||
stroke-linecap="butt"
|
||||
>
|
||||
<g
|
||||
id="icon_gnb_group_g32"
|
||||
transform="translate(-17.815 -103.827)"
|
||||
>
|
||||
<path
|
||||
id="prefix_22"
|
||||
d="M18.871 21a7.733 7.733 0 0 0-7.435-8A7.733 7.733 0 0 0 4 21"
|
||||
data-name="prefix_22"
|
||||
transform="translate(14.815 98.627)"
|
||||
style="
|
||||
fill: transparent;
|
||||
/*stroke: #999;*/
|
||||
stroke-linecap: round;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 2px;
|
||||
"
|
||||
/>
|
||||
<g id="prefix_23" data-name="prefix_23" style="fill: none;">
|
||||
<path
|
||||
d="M4.093 0a4.047 4.047 0 0 1 4.092 4 4.1 4.1 0 0 1-1.591 3.167A3.931 3.931 0 0 1 4.093 8 4.047 4.047 0 0 1 0 4a4.047 4.047 0 0 1 4.093-4z"
|
||||
style="stroke: none;"
|
||||
transform="translate(22.157 103.827)"
|
||||
/>
|
||||
<path
|
||||
d="M4.093 2C2.939 2 2 2.897 2 4s.939 2 2.093 2c.604 0 1.062-.233 1.16-.317l.017-.016.018-.015c.804-.694.897-1.275.897-1.652 0-1.103-.938-2-2.092-2m0-2c2.26 0 4.092 1.79 4.092 4 0 1.184-.526 2.248-1.591 3.167C6.098 7.614 5.14 8 4.093 8 1.833 8 0 6.21 0 4s1.832-4 4.093-4z"
|
||||
style="fill: #999; stroke: none;"
|
||||
transform="translate(22.157 103.827)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab aria-label="Chat">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
matBadgeHidden="false"
|
||||
matBadge="275"
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="above after"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<path
|
||||
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<circle class="st0" cx="18.4" cy="18.5" r="3" />
|
||||
<circle class="st0" cx="12" cy="5" r="3" />
|
||||
<path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
|
||||
<circle class="st0" cx="6.1" cy="18.5" r="3" />
|
||||
<path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
|
||||
<line class="st0" x1="12" y1="8" x2="12" y2="9" />
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<polygon
|
||||
points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div class="content-container" fxFlexFill>
|
||||
<mat-sidenav-container autosize="true" fxFlexFill>
|
||||
<mat-sidenav #leftSidenav class="left-sidenav" mode="side" opened="true">
|
||||
<router-outlet></router-outlet>
|
||||
</mat-sidenav>
|
||||
<div fxFlex="1 1 auto">
|
||||
<router-outlet name="content"></router-outlet>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16.8"
|
||||
height="16"
|
||||
viewBox="0 0 16.8 16"
|
||||
>
|
||||
<g
|
||||
id="icon_gnb_chat_g32"
|
||||
style="fill: none; stroke-linejoin: round;"
|
||||
>
|
||||
<path
|
||||
d="M39.972 26.892a7.688 7.688 0 0 0-8.983 0 4.344 4.344 0 0 0 0 7.194 7.334 7.334 0 0 0 4.492 1.449c.172 0 .346-.006.519-.017l1.09 1.725a.437.437 0 0 0 .36.2h.01a.438.438 0 0 0 .359-.184l2.308-3.3a4.33 4.33 0 0 0-.154-7.07z"
|
||||
style="stroke: none;"
|
||||
transform="translate(-27.08 -23.443)"
|
||||
/>
|
||||
<path
|
||||
d="M35.48 25.443c-1.693 0-3.288.514-4.492 1.449-1.23.955-1.908 2.232-1.908 3.597 0 1.364.678 2.642 1.908 3.597 1.204.934 2.8 1.449 4.492 1.449.172 0 .346-.006.519-.017l1.09 1.725c.076.121.212.196.36.2h.01c.143 0 .278-.069.358-.184l2.308-3.297c1.133-.94 1.755-2.17 1.755-3.473 0-1.365-.678-2.643-1.908-3.597-1.204-.935-2.8-1.45-4.492-1.45m0-2c2.134 0 4.165.664 5.718 1.87 1.73 1.342 2.682 3.18 2.682 5.177 0 1.817-.8 3.52-2.259 4.824l-2.165 3.093c-.454.65-1.201 1.037-1.997 1.037h-.063c-.817-.022-1.563-.444-1.998-1.131l-.501-.794c-1.92-.11-3.724-.757-5.135-1.852-1.73-1.342-2.682-3.18-2.682-5.177 0-1.997.952-3.835 2.682-5.177 1.553-1.205 3.584-1.87 5.718-1.87z"
|
||||
style="fill: #999; stroke: none;"
|
||||
transform="translate(-27.08 -23.443)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab aria-label="Organization">
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="19"
|
||||
viewBox="0 0 21 19"
|
||||
>
|
||||
<g
|
||||
id="icon_gnb_organiztion_g32"
|
||||
transform="translate(-12.917 -220.25)"
|
||||
>
|
||||
<g class="prefix__cls-1" transform="translate(19.917 220.25)">
|
||||
<circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
|
||||
<circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
|
||||
</g>
|
||||
<g class="prefix__cls-1" transform="translate(12.917 232.25)">
|
||||
<circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
|
||||
<circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
|
||||
</g>
|
||||
<g class="prefix__cls-1" transform="translate(19.917 232.25)">
|
||||
<circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
|
||||
<circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
|
||||
</g>
|
||||
<g class="prefix__cls-1" transform="translate(26.917 232.25)">
|
||||
<circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
|
||||
<circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
|
||||
</g>
|
||||
<path
|
||||
d="M16.5 233.312v-3.437h13.833v3.438"
|
||||
transform="translate(0 -1.087)"
|
||||
style="
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke: #999;
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
"
|
||||
/>
|
||||
<path
|
||||
d="M0 0L0 6"
|
||||
class="prefix__cls-1"
|
||||
transform="translate(23.417 226.75)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab aria-label="Message">
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21.096"
|
||||
height="19.182"
|
||||
viewBox="0 0 21.096 19.182"
|
||||
>
|
||||
<g
|
||||
id="icon_gnb_message_g32"
|
||||
transform="translate(-12.615 -280.248)"
|
||||
>
|
||||
<path
|
||||
d="M16.063 292.447l7.965 2.4 7.465 5.3 3.666-16.615z"
|
||||
class="prefix__cls-1"
|
||||
transform="translate(-2.448 -2.284)"
|
||||
/>
|
||||
<path
|
||||
d="M23.25 277.406l.18 5.668 4-2.692z"
|
||||
class="prefix__cls-1"
|
||||
transform="translate(-2.096 15.355)"
|
||||
/>
|
||||
<path
|
||||
d="M0 10.416L11.025 0"
|
||||
transform="translate(21.154 282.346)"
|
||||
style="fill: none; stroke: #999; stroke-width: 2px;"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab aria-label="Call">
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<g id="icon_gnb_call_g32" transform="translate(-1.337 -1.337)">
|
||||
<g style="fill: none;">
|
||||
<path
|
||||
d="M15.832 20A13.864 13.864 0 0 1 2 6.14 4.136 4.136 0 0 1 6.132 2a3.532 3.532 0 0 1 .692.063 3.4 3.4 0 0 1 .647.162.9.9 0 0 1 .584.675l1.229 5.4a.9.9 0 0 1-.234.828c-.117.126-.126.135-1.231.711a8.91 8.91 0 0 0 4.374 4.4c.584-1.116.593-1.125.719-1.242a.9.9 0 0 1 .826-.234L19.129 14a.9.9 0 0 1 .647.585 3.912 3.912 0 0 1 .171.657 4.3 4.3 0 0 1 .054.684A4.136 4.136 0 0 1 15.832 20z"
|
||||
style="stroke: none;"
|
||||
transform="translate(-.663 -.663)"
|
||||
/>
|
||||
<path
|
||||
d="M15.87 18c1.152 0 2.105-.938 2.13-2.094 0-.039-.001-.078-.004-.117l-3.89-.89-.14.268-.882 1.687-1.728-.798C8.985 14.96 7.083 13.047 6 10.667l-.785-1.725 1.68-.877.255-.132-.896-3.93L6.159 4h-.027C4.956 4 4 4.96 4 6.137c.004 3.168 1.237 6.146 3.472 8.385 2.234 2.239 5.204 3.474 8.363 3.478h.035m0 2h-.038C8.197 19.99 2.01 13.79 2 6.14 2 3.854 3.85 2 6.132 2h.027c.223 0 .445.021.664.063.22.033.437.087.647.162.3.106.522.362.584.675l1.23 5.4c.068.298-.02.61-.233.828-.117.126-.126.135-1.23.71.884 1.946 2.436 3.507 4.374 4.402.583-1.116.592-1.125.718-1.242.17-.166.396-.256.628-.256.066 0 .133.007.199.022l5.389 1.233c.302.07.546.291.646.585.076.213.133.433.171.657.036.226.054.455.054.684C19.966 18.186 18.124 20 15.87 20z"
|
||||
style="fill: #999; stroke: none;"
|
||||
transform="translate(-.663 -.663)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
<div class="btn-homepage-area">
|
||||
<button mat-button aria-label="">
|
||||
<em>Homepage</em>
|
||||
</button>
|
||||
</div>
|
||||
</mat-sidenav-container>
|
||||
</div>
|
||||
<ucap-float-action-button
|
||||
*ngIf="fabButtonShow"
|
||||
[buttons]="fabButtons"
|
||||
(buttonClick)="onClickFab($event)"
|
||||
>
|
||||
</ucap-float-action-button>
|
||||
</div>
|
||||
<div class="content-page" fxFlex="1 1 auto" fxLayout="column">
|
||||
<div class="content-body" fxFlex="1 1 auto">
|
||||
<mat-sidenav-container autosize="true">
|
||||
<mat-sidenav
|
||||
#leftSidenav
|
||||
class="left-sidenav"
|
||||
mode="side"
|
||||
opened="true"
|
||||
>
|
||||
<div class="left-sidenav-container" fxLayout="column">
|
||||
<div class="top-bar" fxFlex="0 0 40px">
|
||||
M-Messenger
|
||||
</div>
|
||||
<div fxFlex="1 1 auto">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
|
||||
<mat-sidenav-content>
|
||||
<div class="content-sidenav-container" fxLayout="column">
|
||||
<div class="content-sidenav-top-bar" fxFlex="0 0 40px">
|
||||
<app-layouts-top-bar></app-layouts-top-bar>
|
||||
</div>
|
||||
<div class="content-sidenav-body" fxFlex="1 1 auto">
|
||||
<router-outlet name="content"></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
</div>
|
||||
<div class="content-statusbar" fxFlex="0 0 38px">
|
||||
<!--Footer-->
|
||||
<div class="footer">
|
||||
<div class="foot-info version-info">
|
||||
<span class="var-txt current-ver">현재버전 0.0.11</span>
|
||||
<span class="var-txt new-var">최신버전 0.0.11 </span>
|
||||
<button mat-icon-button aria-label="icon">
|
||||
<mat-icon>get_app</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="foot-info help-info">
|
||||
<p><span>Help</span>Desk <em>1661-9066</em></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //Footer-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,303 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
:host {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navi-container {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
.left-sidenav {
|
||||
.navitab-page {
|
||||
//GNB /////////////////////////////////////
|
||||
.gnb {
|
||||
background-color: $gray-ref0;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 370px;
|
||||
height: 100%;
|
||||
max-width: 90%;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-right: 1px solid rgba(204, 204, 204, 0.8);
|
||||
.mat-gnb-toolbar {
|
||||
flex-basis: 64px;
|
||||
.img-logo {
|
||||
margin: 9px 0 5px;
|
||||
}
|
||||
}
|
||||
.left-container {
|
||||
display: flex;
|
||||
width: calc(100% - 28px);
|
||||
height: 100%;
|
||||
}
|
||||
.global-menu {
|
||||
width: 100%;
|
||||
background-color: $gray-ref0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.btn-homepage-area {
|
||||
flex-flow: column-reverse;
|
||||
position: relative;
|
||||
button {
|
||||
padding: 30px 0 12px;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../../assets/images/ico/btn_gnb_hompage.svg);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: calc(50% - 10px);
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: 8px;
|
||||
color: $gray-re6;
|
||||
display: block;
|
||||
line-height: 9px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
::ng-deep .global-menu {
|
||||
//display: flex;
|
||||
//flex-direction: row;
|
||||
.mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
.mat-tab-label-container {
|
||||
.mat-tab-list {
|
||||
.mat-tab-labels {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-around;
|
||||
height: 272px;
|
||||
border-bottom: none;
|
||||
|
||||
.mat-tab-label {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
min-width: 0 !important;
|
||||
.mat-tab-label-content {
|
||||
.icon-item {
|
||||
display: inline-flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
//transform: scale(0.9);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
|
||||
|
||||
svg {
|
||||
//width: 24px;
|
||||
//height: 24px;
|
||||
stroke: $gray-re9;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: square;
|
||||
stroke-linejoin: miter;
|
||||
fill: none;
|
||||
g {
|
||||
&#icon_gnb_organiztion_g32 {
|
||||
.prefix__cls-1,
|
||||
.prefix__cls-4 {
|
||||
fill: none;
|
||||
}
|
||||
.prefix__cls-1 {
|
||||
stroke: #999;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.prefix__cls-3 {
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
&#icon_gnb_message_g32 {
|
||||
.prefix__cls-1 {
|
||||
fill: none;
|
||||
stroke: #999;
|
||||
stroke-width: 2px;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-badge-content {
|
||||
right: -9px !important;
|
||||
border: 1px solid #ffbf2a;
|
||||
//width: 24px;
|
||||
//height: 24px;
|
||||
box-sizing: content-box;
|
||||
top: -10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mat-tab-label-active {
|
||||
opacity: 0;
|
||||
svg {
|
||||
stroke: #fff !important;
|
||||
g {
|
||||
&#prefix_23,
|
||||
&#icon_gnb_chat_g32,
|
||||
&#icon_gnb_call_g32 {
|
||||
path {
|
||||
&:nth-child(2) {
|
||||
fill: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&#icon_gnb_organiztion_g32 {
|
||||
.prefix__cls-1 {
|
||||
stroke: #fff !important;
|
||||
}
|
||||
path {
|
||||
&:nth-last-of-type(2) {
|
||||
stroke: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&#icon_gnb_message_g32 {
|
||||
.prefix__cls-1 {
|
||||
stroke: #fff !important;
|
||||
}
|
||||
path {
|
||||
&:nth-child(3) {
|
||||
stroke: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[aria-selected='true'] {
|
||||
opacity: 1;
|
||||
.mat-tab-label-content {
|
||||
.icon-item {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-ink-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-tab-body-wrapper {
|
||||
.mat-tab-body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/////////////////////////////////////GNB //
|
||||
}
|
||||
|
||||
.content-page {
|
||||
width: calc(100% - 60px);
|
||||
height: 100%;
|
||||
|
||||
.content-body {
|
||||
width: 100%;
|
||||
height: calc(100% - 38px);
|
||||
|
||||
mat-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left-sidenav {
|
||||
width: 370px;
|
||||
max-width: 90%;
|
||||
|
||||
.left-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.top-bar {
|
||||
font: {
|
||||
size: 13px;
|
||||
color: $gray-re70;
|
||||
}
|
||||
line-height: 15px;
|
||||
padding: 25px 0 0 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mat-sidenav-content {
|
||||
.content-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.content-sidenav-body {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-drawer {
|
||||
flex: 0 0 auto;
|
||||
.content-statusbar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//Footer ////////////////////////
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
border-top: 1px solid $line-color-gray01;
|
||||
background-color: $white;
|
||||
.foot-info {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: $gray-re70;
|
||||
@include font-family($font-light);
|
||||
font-weight: 600;
|
||||
&.version-info {
|
||||
.var-txt {
|
||||
padding-left: 8px;
|
||||
color: $gray-re70;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
background-color: #d4d4d4;
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:first-of-type {
|
||||
&::before {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
&.new-var {
|
||||
color: $brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.help-info {
|
||||
flex-flow: row-reverse;
|
||||
padding-right: 20px;
|
||||
p {
|
||||
margin: 0;
|
||||
span {
|
||||
color: $lipstick;
|
||||
}
|
||||
em {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//////////////////////// Footer//
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,12 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
@ViewChild('leftSidenav', { static: true })
|
||||
leftSidenav: MatSidenav;
|
||||
|
||||
showStatusbar = true;
|
||||
|
||||
/** FAB */
|
||||
fabButtonShow = true;
|
||||
fabButtons: { icon: string; tooltip?: string; divisionType?: string }[];
|
||||
|
||||
private windowSizeSubscription: Subscription;
|
||||
|
||||
constructor(
|
||||
|
|
@ -50,6 +56,8 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
|
||||
this.setTabGroup(this.router.url);
|
||||
|
||||
this.setFabInitial(NAVS[0]);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
|
|
@ -70,6 +78,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
NAVS[event.index],
|
||||
{ outlets: { content: 'index' } }
|
||||
]);
|
||||
this.setFabInitial(NAVS[event.index]);
|
||||
}
|
||||
|
||||
onClickToggleLeftSidenav() {
|
||||
|
|
@ -81,8 +90,107 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
private setTabGroup(url: string) {
|
||||
this.navTabGroup.selectedIndex = NAVS.findIndex((v) =>
|
||||
url.startsWith(`/${v}`)
|
||||
);
|
||||
if (!!this.navTabGroup) {
|
||||
this.navTabGroup.selectedIndex = NAVS.findIndex((v) =>
|
||||
url.startsWith(`/${v}`)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setFabInitial(type: string) {
|
||||
switch (type) {
|
||||
case 'group':
|
||||
{
|
||||
this.fabButtonShow = true;
|
||||
this.fabButtons = [
|
||||
{
|
||||
icon: 'add',
|
||||
tooltip: '그룹 추가',
|
||||
divisionType: 'GROUP_NEW_ADD'
|
||||
}
|
||||
];
|
||||
}
|
||||
break;
|
||||
case 'chat':
|
||||
{
|
||||
this.fabButtonShow = true;
|
||||
this.fabButtons = [
|
||||
{
|
||||
icon: 'chat',
|
||||
tooltip: '대화 추가',
|
||||
divisionType: 'CAHT_NEW_ADD'
|
||||
}
|
||||
];
|
||||
|
||||
// if (environment.productConfig.CommonSetting.useTimerRoom) {
|
||||
// this.fabButtons.push({
|
||||
// icon: 'timer',
|
||||
// tooltip: this.translateService.instant('chat.newTimerChat'),
|
||||
// divisionType: 'CHAT_NEW_TIMER_ADD'
|
||||
// });
|
||||
// }
|
||||
}
|
||||
break;
|
||||
case 'organization':
|
||||
{
|
||||
this.fabButtonShow = false;
|
||||
}
|
||||
break;
|
||||
case 'message':
|
||||
{
|
||||
this.fabButtonShow = true;
|
||||
this.fabButtons = [
|
||||
{
|
||||
icon: 'add',
|
||||
tooltip: '쪽지 추가',
|
||||
divisionType: 'MESSAGE_NEW'
|
||||
}
|
||||
];
|
||||
}
|
||||
break;
|
||||
// case MainMenu.Call:
|
||||
// {
|
||||
// this.fabButtonShow = false;
|
||||
// }
|
||||
// break;
|
||||
|
||||
default: {
|
||||
this.fabButtonShow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onClickFab(params: { btn: any }) {
|
||||
const btn = params.btn as {
|
||||
icon: string;
|
||||
tooltip?: string;
|
||||
divisionType?: string;
|
||||
};
|
||||
|
||||
switch (btn.divisionType) {
|
||||
case 'GROUP_NEW_ADD':
|
||||
{
|
||||
this.logService.debug('GROUP_NEW_ADD');
|
||||
}
|
||||
break;
|
||||
case 'CAHT_NEW_ADD':
|
||||
{
|
||||
this.logService.debug('CAHT_NEW_ADD');
|
||||
}
|
||||
break;
|
||||
case 'CHAT_NEW_TIMER_ADD':
|
||||
{
|
||||
// if (environment.productConfig.CommonSetting.useTimerRoom) {
|
||||
// this.onClickNewChat('TIMER');
|
||||
// }
|
||||
}
|
||||
break;
|
||||
|
||||
case 'MESSAGE_NEW':
|
||||
{
|
||||
this.logService.debug('MESSAGE_NEW');
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,15 @@ import { TopBarComponent } from './top-bar.component';
|
|||
import { DefaultLayoutComponent } from './default.layout.component';
|
||||
import { NoNaviLayoutComponent } from './no-navi.layout.component';
|
||||
|
||||
import { DefaultDialogLayoutComponent } from './default-dialog.layout.component';
|
||||
import { SelectorLayoutComponent } from './selector.layout.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
TopBarComponent,
|
||||
DefaultLayoutComponent,
|
||||
NoNaviLayoutComponent
|
||||
NoNaviLayoutComponent,
|
||||
|
||||
DefaultDialogLayoutComponent,
|
||||
|
||||
SelectorLayoutComponent
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1 +1,8 @@
|
|||
<router-outlet></router-outlet>
|
||||
<div class="layout-container" fxFlexFill fxLayout="column">
|
||||
<div *ngIf="showTopbar" class="top-bar" fxFlex="50px">
|
||||
<app-layouts-top-bar></app-layouts-top-bar>
|
||||
</div>
|
||||
<div class="layout-content" fxFlex="1 1 auto">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
.layout-container {
|
||||
}
|
||||
|
|
@ -6,5 +6,7 @@ import { Component } from '@angular/core';
|
|||
styleUrls: ['./no-navi.layout.component.scss']
|
||||
})
|
||||
export class NoNaviLayoutComponent {
|
||||
showTopbar = true;
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
|
|
|
|||
29
src/app/layouts/components/selector.layout.component.html
Normal file
29
src/app/layouts/components/selector.layout.component.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<div class="selector">
|
||||
<div class="selector-title">
|
||||
<ng-content
|
||||
class="layout-header-content"
|
||||
select="[appLayoutsSelector='header']"
|
||||
></ng-content>
|
||||
<button
|
||||
mat-icon-button
|
||||
matSuffix
|
||||
aria-label="Clear"
|
||||
class="btn-close"
|
||||
color="accent"
|
||||
>
|
||||
<mat-icon>highlight_off</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="selector-contents">
|
||||
<ng-content
|
||||
class="layout-body-content"
|
||||
select="[appLayoutsSelector='body']"
|
||||
></ng-content>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<ng-content
|
||||
class="layout-footer-content"
|
||||
select="[appLayoutsSelector='footer']"
|
||||
></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
26
src/app/layouts/components/selector.layout.component.spec.ts
Normal file
26
src/app/layouts/components/selector.layout.component.spec.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { SelectorLayoutComponent } from './selector.layout.component';
|
||||
|
||||
describe('ucap::ui-group::SelectorLayoutComponent', () => {
|
||||
let component: SelectorLayoutComponent;
|
||||
let fixture: ComponentFixture<SelectorLayoutComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [SelectorLayoutComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SelectorLayoutComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
22
src/app/layouts/components/selector.layout.component.ts
Normal file
22
src/app/layouts/components/selector.layout.component.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
Input,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-selector',
|
||||
templateUrl: './selector.layout.component.html',
|
||||
styleUrls: ['./selector.layout.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class SelectorLayoutComponent implements OnInit, OnDestroy {
|
||||
constructor(private changeDetectorRef: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
ngOnDestroy(): void {}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<mat-toolbar class=".title-bar">
|
||||
<div class="title-bar">
|
||||
<ucap-title-bar
|
||||
[platform]="platform"
|
||||
[native]="native"
|
||||
|
|
@ -7,4 +7,4 @@
|
|||
(minimized)="onMinimizedTitleBar()"
|
||||
>
|
||||
</ucap-title-bar>
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
.title-bar {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,14 @@ import { RouterModule } from '@angular/router';
|
|||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
|
||||
import { UiModule } from '@ucap/ng-ui';
|
||||
|
||||
import { COMPONENTS } from './components';
|
||||
|
|
@ -18,16 +21,18 @@ import { DIALOGS } from './dialogs';
|
|||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
RouterModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatTabsModule,
|
||||
MatSidenavModule,
|
||||
MatTabsModule,
|
||||
MatToolbarModule,
|
||||
|
||||
PerfectScrollbarModule,
|
||||
|
||||
UiModule
|
||||
],
|
||||
exports: [...COMPONENTS, ...DIALOGS],
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
|
|||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { AppAuthenticationModule } from '@app/ucap/authentication/authentication.module';
|
||||
import { AppAccountSectionModule } from '@app/sections/account/account.section.module';
|
||||
|
||||
import { AppAccountRoutingPageModule } from './account-routing.page.module';
|
||||
|
|
@ -13,6 +14,7 @@ import { COMPONENTS } from './components';
|
|||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
AppAuthenticationModule,
|
||||
AppAccountSectionModule,
|
||||
AppAccountRoutingPageModule
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,22 +1,3 @@
|
|||
<div class="login-container">
|
||||
<app-sections-account-login
|
||||
[companyGroupCode]="companyGroupCode"
|
||||
[fixedCompanyCode]="fixedCompanyCode"
|
||||
[userStore]="userStore"
|
||||
[useRememberMe]="useRememberMe"
|
||||
[useAutoLogin]="useAutoLogin"
|
||||
></app-sections-account-login>
|
||||
<app-authentication-login></app-authentication-login>
|
||||
</div>
|
||||
|
||||
<!-- <div class="login-page-container" fxLayout="row">
|
||||
<div fxFlex="1 1 auto">Login</div>
|
||||
<div class="login-section-container">
|
||||
<app-sections-account-login
|
||||
[companyGroupCode]="companyGroupCode"
|
||||
[fixedCompanyCode]="fixedCompanyCode"
|
||||
[userStore]="userStore"
|
||||
[useRememberMe]="useRememberMe"
|
||||
[useAutoLogin]="useAutoLogin"
|
||||
></app-sections-account-login>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
@import '../../../../assets/scss/components';
|
||||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
$login-bg-w: 100/1920;
|
||||
$login-bg-h: 100/1080;
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
// box-sizing: border-box;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
|
||||
background-color: $bg-gray;
|
||||
background-image: url(../../../../assets/images/bg/bg_login_circle_square01.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_stroke01.svg),
|
||||
|
|
@ -54,8 +62,4 @@
|
|||
unquote($login-bg-w * 102 + '%'), unquote($login-bg-w * 130 + '%'),
|
||||
unquote($login-bg-w * 184 + '%'), unquote($login-bg-w * 370 + '%'),
|
||||
unquote($login-bg-w * 122 + '%'), unquote($login-bg-w * 75 + '%');
|
||||
padding-top: 5%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
|
|||
|
||||
import { IndexPageComponent } from './components/index.page.component';
|
||||
import { SidenavPageComponent } from './components/sidenav.page.component';
|
||||
import { ChatRoomPageComponent } from './components/chat-room.page.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
|
@ -10,6 +11,11 @@ const routes: Routes = [
|
|||
outlet: 'content',
|
||||
component: IndexPageComponent
|
||||
},
|
||||
{
|
||||
path: 'chatroom',
|
||||
outlet: 'content',
|
||||
component: ChatRoomPageComponent
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: SidenavPageComponent
|
||||
|
|
|
|||
|
|
@ -3,17 +3,35 @@ import { CommonModule } from '@angular/common';
|
|||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
|
||||
import { AppChatSectionModule } from '@app/sections/chat/chat.section.module';
|
||||
|
||||
import { AppChatRoutingPageModule } from './chat-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 { UiModule } from '@ucap/ng-ui';
|
||||
import { COMPONENTS } from './components';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, FlexLayoutModule, AppChatRoutingPageModule],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatCheckboxModule,
|
||||
MatButtonModule,
|
||||
MatSidenavModule,
|
||||
|
||||
AppChatSectionModule,
|
||||
AppChatRoutingPageModule,
|
||||
|
||||
UiModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: []
|
||||
})
|
||||
|
|
|
|||
24
src/app/pages/chat/components/chat-room.page.component.html
Normal file
24
src/app/pages/chat/components/chat-room.page.component.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<div class="contents-main" fxFlexFill fxLayout="column">
|
||||
<div class="subtitle" fxFlex="0 0 50px">
|
||||
<app-sections-chat-info
|
||||
[roomId]="roomId"
|
||||
(openChatSearch)="isChatSearch = true"
|
||||
(rightDrawerToggle)="onRightDrawerToggle()"
|
||||
></app-sections-chat-info>
|
||||
</div>
|
||||
<app-sections-chat-chat-search
|
||||
*ngIf="isChatSearch"
|
||||
(closeChatSearch)="isChatSearch = false"
|
||||
></app-sections-chat-chat-search>
|
||||
<mat-drawer-container autosize fxFlex="1 1 auto" fxLayout="column">
|
||||
<div class="message-area" fxFlex="1 1 auto">
|
||||
<app-sections-chat-message [roomId]="roomId"></app-sections-chat-message>
|
||||
</div>
|
||||
<div class="message-input" fxFlex="0 0 auto">
|
||||
<app-sections-chat-form [roomId]="roomId"></app-sections-chat-form>
|
||||
</div>
|
||||
<mat-drawer #chatRightDrawer mode="side" position="end" class="rightDrawer">
|
||||
Right Sections.
|
||||
</mat-drawer>
|
||||
</mat-drawer-container>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { ChatRoomPageComponent } from './chat-room.page.component';
|
||||
|
||||
describe('app::pages::chat::ChatRoomPageComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [ChatRoomPageComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(ChatRoomPageComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(ChatRoomPageComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(ChatRoomPageComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
41
src/app/pages/chat/components/chat-room.page.component.ts
Normal file
41
src/app/pages/chat/components/chat-room.page.component.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
|
||||
import { Subscription } from 'rxjs';
|
||||
import { QueryParams } from '../types/params.type';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-chat-room',
|
||||
templateUrl: './chat-room.page.component.html',
|
||||
styleUrls: ['./chat-room.page.component.scss']
|
||||
})
|
||||
export class ChatRoomPageComponent implements OnInit, OnDestroy {
|
||||
private paramsSubscription: Subscription;
|
||||
isChatSearch = false;
|
||||
roomId: string;
|
||||
|
||||
@ViewChild('chatRightDrawer', { static: false })
|
||||
chatRightDrawer: MatDrawer;
|
||||
|
||||
constructor(private activatedRoute: ActivatedRoute) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.paramsSubscription = this.activatedRoute.queryParams.subscribe(
|
||||
(params: Params) => {
|
||||
const seqParam = params[QueryParams.ROOM_ID];
|
||||
this.roomId = !!seqParam ? seqParam : undefined;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.paramsSubscription) {
|
||||
this.paramsSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
onRightDrawerToggle(): void {
|
||||
this.chatRightDrawer.toggle();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,9 @@
|
|||
import { IndexPageComponent } from './index.page.component';
|
||||
import { SidenavPageComponent } from './sidenav.page.component';
|
||||
import { ChatRoomPageComponent } from './chat-room.page.component';
|
||||
|
||||
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
|
||||
export const COMPONENTS = [
|
||||
IndexPageComponent,
|
||||
SidenavPageComponent,
|
||||
ChatRoomPageComponent
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,3 +1,56 @@
|
|||
<div fxFlexFill>
|
||||
sidenav page of chat is works!
|
||||
<div fxFlexFill class="sidenav-container">
|
||||
<div class="chat-header">
|
||||
<h3>대화</h3>
|
||||
<div class="chat-menu-btn">
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="exit-room"
|
||||
(click)="onToggleChackable(true)"
|
||||
>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="exit-close"
|
||||
*ngIf="checkable"
|
||||
(click)="onToggleChackable(false)"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<app-sections-chat-search
|
||||
(keyDownEnter)="onKeyDownSearch($event)"
|
||||
(searchCancel)="onClickCancel()"
|
||||
[style.display]="checkable ? 'none' : 'block'"
|
||||
></app-sections-chat-search>
|
||||
<div class="exitRoomInfo" *ngIf="checkable">
|
||||
<div>
|
||||
<strong>{{ this.selectedRoomList.length }}</strong
|
||||
>/{{
|
||||
!!this.searchObj.isShowSearch
|
||||
? this.searchResultList.length
|
||||
: this.roomList.length
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
<mat-checkbox
|
||||
#allCheck
|
||||
aria-label="all select exit room "
|
||||
[checked]="getCheckedAllItem()"
|
||||
(change)="onToggleAllItem(allCheck.checked)"
|
||||
(click)="$event.stopPropagation()"
|
||||
>
|
||||
전체선택
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<app-sections-chat-list
|
||||
fxFlexFill
|
||||
[searchObj]="searchObj"
|
||||
[checkable]="checkable"
|
||||
[selectedRoomList]="selectedRoomList"
|
||||
(searchResultList)="onSearchResultList($event)"
|
||||
(toggleItem)="onToggleItem($event)"
|
||||
></app-sections-chat-list>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,175 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Component, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { Subject, of } from 'rxjs';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { takeUntil, take, map, catchError } from 'rxjs/operators';
|
||||
import { RoomSelector, RoomActions } from '@ucap/ng-store-chat';
|
||||
import { RoomInfo, ExitAllRequest } from '@ucap/protocol-room';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import {
|
||||
ConfirmDialogComponent,
|
||||
ConfirmDialogData,
|
||||
ConfirmDialogResult
|
||||
} from '@ucap/ng-ui';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-chat-sidenav',
|
||||
templateUrl: './sidenav.page.component.html',
|
||||
styleUrls: ['./sidenav.page.component.scss']
|
||||
})
|
||||
export class SidenavPageComponent {
|
||||
constructor(private logService: LogService) {}
|
||||
export class SidenavPageComponent implements OnInit, OnDestroy {
|
||||
searchObj: any = {
|
||||
isShowSearch: false,
|
||||
searchWord: ''
|
||||
};
|
||||
|
||||
checkable = false;
|
||||
|
||||
roomList: RoomInfo[];
|
||||
selectedRoomList: RoomInfo[] = [];
|
||||
searchResultList: RoomInfo[] = [];
|
||||
|
||||
private ngOnDestroySubject: Subject<boolean>;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private dialog: MatDialog,
|
||||
private i18nService: I18nService,
|
||||
private logService: LogService,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<boolean>();
|
||||
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(RoomSelector.rooms))
|
||||
.subscribe((rooms) => {
|
||||
rooms = (rooms || []).filter((info) => info.isJoinRoom);
|
||||
this.roomList = rooms;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onToggleChackable(checkable: boolean): void {
|
||||
if (!!checkable) {
|
||||
if (!!this.selectedRoomList && this.selectedRoomList.length > 0) {
|
||||
const dialogRef = this.dialog.open<
|
||||
ConfirmDialogComponent,
|
||||
ConfirmDialogData,
|
||||
ConfirmDialogResult
|
||||
>(ConfirmDialogComponent, {
|
||||
data: {
|
||||
title: this.i18nService.t('room.dialog.titleExitFromRoom'),
|
||||
html: this.i18nService.t('room.dialog.confirmExitFromRoom')
|
||||
}
|
||||
});
|
||||
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(take(1))
|
||||
.subscribe((result) => {
|
||||
if (!!result && !!result.choice) {
|
||||
this.store.dispatch(
|
||||
RoomActions.delMulti({
|
||||
req: {
|
||||
roomIds: this.selectedRoomList.map(
|
||||
(roomInfo) => roomInfo.roomId
|
||||
)
|
||||
} as ExitAllRequest
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.selectedRoomList = [];
|
||||
}
|
||||
|
||||
this.checkable = checkable;
|
||||
}
|
||||
|
||||
getCheckedAllItem(): boolean {
|
||||
const targetRoomList = !!this.searchObj.isShowSearch
|
||||
? this.searchResultList
|
||||
: this.roomList;
|
||||
|
||||
if (
|
||||
!targetRoomList ||
|
||||
targetRoomList.length === 0 ||
|
||||
targetRoomList.filter(
|
||||
(item) =>
|
||||
!(
|
||||
this.selectedRoomList.filter((info) => info.roomId === item.roomId)
|
||||
.length > 0
|
||||
)
|
||||
).length > 0
|
||||
) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
onToggleAllItem(value: boolean): void {
|
||||
if (!!value) {
|
||||
const targetRoomList = !!this.searchObj.isShowSearch
|
||||
? this.searchResultList
|
||||
: this.roomList;
|
||||
|
||||
this.selectedRoomList = targetRoomList.slice();
|
||||
} else {
|
||||
this.selectedRoomList = [];
|
||||
}
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
onToggleItem(event: { checked: boolean; roomInfo: RoomInfo }): void {
|
||||
if (!!event.checked) {
|
||||
if (
|
||||
!this.selectedRoomList.some(
|
||||
(info) => info.roomId === event.roomInfo.roomId
|
||||
)
|
||||
) {
|
||||
this.selectedRoomList.push(event.roomInfo);
|
||||
}
|
||||
} else {
|
||||
if (!!this.selectedRoomList && this.selectedRoomList.length > 0) {
|
||||
const index = this.selectedRoomList.findIndex(
|
||||
(info) => info.roomId === event.roomInfo.roomId
|
||||
);
|
||||
if (index > -1) {
|
||||
this.selectedRoomList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Searching */
|
||||
onKeyDownSearch(params: { searchWord: string }) {
|
||||
this.searchObj = {
|
||||
isShowSearch: true,
|
||||
searchWord: params.searchWord
|
||||
};
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
/** Searching cancel */
|
||||
onClickCancel() {
|
||||
this.searchObj = {
|
||||
isShowSearch: false,
|
||||
searchWord: ''
|
||||
};
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
onSearchResultList(searchResultList: RoomInfo[]) {
|
||||
this.searchResultList = searchResultList;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3
src/app/pages/chat/types/params.type.ts
Normal file
3
src/app/pages/chat/types/params.type.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export enum QueryParams {
|
||||
ROOM_ID = 'roomId'
|
||||
}
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
<div>
|
||||
index of group
|
||||
<div fxLayout="column" class="index-container">
|
||||
<div class="subtitle" fxFlex="60px">Welcome to M-Messenger</div>
|
||||
<div class="content-container" fxFlex="1 1 auto" fxLayout="row">
|
||||
<div class="profile-container" fxFlex="44%">
|
||||
<app-organization-profile-01 [userSeq]="userSeq">
|
||||
</app-organization-profile-01>
|
||||
</div>
|
||||
<div class="group-info-container" fxFlex="1 1 auto">
|
||||
<app-sections-group-info [userSeq]="userSeq"></app-sections-group-info>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.index-container {
|
||||
height: 100%;
|
||||
padding: 0 30px 30px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
|
||||
@include font-family($font-light);
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 2.73;
|
||||
color: $gray-re4;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.group-info-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -21,10 +21,13 @@ export class IndexPageComponent implements OnInit, OnDestroy {
|
|||
private logService: LogService
|
||||
) {}
|
||||
|
||||
userSeq: string;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.paramsSubscription = this.activatedRoute.queryParams.subscribe(
|
||||
(params: Params) => {
|
||||
console.log('IndexPageComponent', params[QueryParams.ID]);
|
||||
const seqParam = params[QueryParams.ID];
|
||||
this.userSeq = !!seqParam ? seqParam : undefined;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,63 @@
|
|||
<div fxFlexFill class="sidenav-container">
|
||||
<app-sections-group-search></app-sections-group-search>
|
||||
<app-sections-group-list fxFlexFill></app-sections-group-list>
|
||||
<div class="sidenav-container" fxFlexFill fxLayout="column">
|
||||
<div class="title-section" fxFlex="0 0 50px" fxLayout="row">
|
||||
<div class="title">
|
||||
<h3 fxFlex="1 1 auto">그룹</h3>
|
||||
<div class="menu-btn" fxFlex="80px">
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="groupViewMenu"
|
||||
aria-label="group view menu"
|
||||
>
|
||||
<mat-icon>swap_vert</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="groupMenu"
|
||||
aria-label="group menu"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra-box" fxFlex="0 0 50px">
|
||||
<app-organization-search-for-tenant (changed)="onKeyDownSearch($event)">
|
||||
</app-organization-search-for-tenant>
|
||||
</div>
|
||||
|
||||
<div fxFlex="1 1 auto">
|
||||
<app-sections-group-list
|
||||
#sectionGroupList
|
||||
fxFlexFill
|
||||
[searchObj]="searchObj"
|
||||
[showType]="showType"
|
||||
></app-sections-group-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-menu #groupMenu="matMenu">
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
|
||||
{{ 'moreMenu.group.addNew' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
|
||||
{{ 'moreMenu.group.expandMore' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
|
||||
{{ 'moreMenu.group.expandLess' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_CHANGE_ODER')">
|
||||
{{ 'moreMenu.group.changeOrder' | ucapI18n }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu #groupViewMenu="matMenu">
|
||||
<button mat-menu-item (click)="onClickShowGroupMenu('ALL')">
|
||||
{{ 'moreMenu.show.all' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickShowGroupMenu('ONLINE_BUDDY')">
|
||||
{{ 'moreMenu.show.onlineBuddy' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickShowGroupMenu('ON_OFF')">
|
||||
{{ 'moreMenu.show.onOff' | ucapI18n }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,32 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.sidenav-container {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-content: flex-start;
|
||||
background-color: #f1f2f6;
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background-color: $white;
|
||||
.title {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 0 17px;
|
||||
background-color: $white;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
h3 {
|
||||
@include font-family-txt(18, left, $lipstick);
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
.menu-btn {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,27 @@
|
|||
import { Subscription } from 'rxjs';
|
||||
import { Subscription, of } from 'rxjs';
|
||||
import { take, map, catchError } from 'rxjs/operators';
|
||||
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectorRef,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { ActivatedRoute, Router, Params } from '@angular/router';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import { QueryParams } from '../types/params.type';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { GroupActions } from '@ucap/ng-store-group';
|
||||
|
||||
import { SelectUserDialogType } from '@app/types';
|
||||
|
||||
import { CreateDialogComponent } from '@app/sections/group/dialogs/create.dialog.component';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
import { ListSectionComponent } from '@app/sections/group/components/list.section.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-group-sidenav',
|
||||
|
|
@ -13,13 +29,113 @@ import { QueryParams } from '../types/params.type';
|
|||
styleUrls: ['./sidenav.page.component.scss']
|
||||
})
|
||||
export class SidenavPageComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('sectionGroupList', { static: false })
|
||||
sectionGroupList: ListSectionComponent;
|
||||
|
||||
searchObj: any = {
|
||||
isShowSearch: false,
|
||||
companyCode: '',
|
||||
searchWord: ''
|
||||
};
|
||||
|
||||
showType: string;
|
||||
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private router: Router,
|
||||
private logService: LogService
|
||||
) {}
|
||||
private logService: LogService,
|
||||
private i18nService: I18nService,
|
||||
private store: Store<any>,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
public dialog: MatDialog
|
||||
) {
|
||||
this.i18nService.setDefaultNamespace('group');
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
ngOnInit(): void {
|
||||
this.showType = 'ALL';
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {}
|
||||
|
||||
onClickFab(event: MouseEvent) {}
|
||||
onKeyDownSearch(params: {
|
||||
isShowSearch: boolean;
|
||||
companyCode: string;
|
||||
searchWord: string;
|
||||
}) {
|
||||
this.searchObj = {
|
||||
isShowSearch: params.isShowSearch,
|
||||
companyCode: params.companyCode,
|
||||
searchWord: params.searchWord
|
||||
};
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
onClickCancel() {
|
||||
this.searchObj = {
|
||||
isShowSearch: false,
|
||||
companyCode: '',
|
||||
searchWord: ''
|
||||
};
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
onClickGroupMenu(menuType: string) {
|
||||
switch (menuType) {
|
||||
case 'GROUP_NEW':
|
||||
{
|
||||
const dialogRef = this.dialog.open(CreateDialogComponent, {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
});
|
||||
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(
|
||||
take(1),
|
||||
map((result) => {}),
|
||||
catchError((err) => {
|
||||
return of(err);
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
}
|
||||
break;
|
||||
case 'GROUP_EXPAND_MORE':
|
||||
{
|
||||
this.sectionGroupList.onExpandMore();
|
||||
}
|
||||
break;
|
||||
case 'GROUP_EXPAND_LESS':
|
||||
{
|
||||
this.sectionGroupList.onExpandLess();
|
||||
}
|
||||
break;
|
||||
case 'GROUP_CHANGE_ODER':
|
||||
{
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onClickShowGroupMenu(menuType: string) {
|
||||
switch (menuType) {
|
||||
case 'ALL':
|
||||
{
|
||||
this.showType = 'ALL';
|
||||
}
|
||||
break;
|
||||
case 'ONLINE_BUDDY':
|
||||
{
|
||||
this.showType = 'ONLINE_BUDDY';
|
||||
}
|
||||
break;
|
||||
case 'ON_OFF':
|
||||
{
|
||||
this.showType = 'ON_OFF';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,25 +3,45 @@ import { CommonModule } from '@angular/common';
|
|||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
|
||||
import { UiModule } from '@ucap/ng-ui';
|
||||
|
||||
import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
|
||||
|
||||
import { AppGroupSectionModule } from '@app/sections/group/group.section.module';
|
||||
|
||||
import { AppGroupRoutingPageModule } from './group-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';
|
||||
import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
|
||||
AppOrganizationModule,
|
||||
|
||||
AppGroupSectionModule,
|
||||
AppGroupRoutingPageModule
|
||||
AppGroupRoutingPageModule,
|
||||
|
||||
UiModule,
|
||||
I18nModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: []
|
||||
entryComponents: [],
|
||||
providers: [
|
||||
{
|
||||
provide: UCAP_I18N_NAMESPACE,
|
||||
useValue: ['group', 'common']
|
||||
}
|
||||
]
|
||||
})
|
||||
export class AppGroupPageModule {}
|
||||
|
|
|
|||
|
|
@ -1 +1,5 @@
|
|||
Index page of organization is works!
|
||||
<div fxFlexFill>
|
||||
<app-sections-organization-member-list
|
||||
[searchData]="_searchData"
|
||||
></app-sections-organization-member-list>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,58 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import { QueryParams } from '../types/params.type';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-organization-index',
|
||||
templateUrl: './index.page.component.html',
|
||||
styleUrls: ['./index.page.component.scss']
|
||||
})
|
||||
export class IndexPageComponent {
|
||||
constructor() {}
|
||||
export class IndexPageComponent implements OnInit, OnDestroy {
|
||||
// tslint:disable-next-line: variable-name
|
||||
_searchData: {
|
||||
companyCode: string;
|
||||
searchWord: string;
|
||||
isSearch: boolean;
|
||||
};
|
||||
|
||||
deptSeq: string;
|
||||
|
||||
private ngOnDestroySubject: Subject<boolean>;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<boolean>();
|
||||
|
||||
this.activatedRoute.queryParams
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((params) => {
|
||||
console.log('activatedRoute.queryParams');
|
||||
if (!!params) {
|
||||
const companyCode = params[QueryParams.DEPT_SEQ];
|
||||
console.log('activatedRoute.queryParams', companyCode);
|
||||
this._searchData = {
|
||||
companyCode,
|
||||
searchWord: '',
|
||||
isSearch: false
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,33 @@
|
|||
<div fxFlexFill>
|
||||
sidenav page of ogranization is works!
|
||||
<div class="sidenav-container" fxFlexFill fxLayout="column">
|
||||
<div class="sub-header" fxFlex="50px" fxLayout="row">
|
||||
<div fxFlex="1 1 auto">
|
||||
<h3>조직도</h3>
|
||||
</div>
|
||||
|
||||
<div class="menu-btn" fxFlex="0 0 40px">
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="organizationMenu"
|
||||
aria-label="organization menu"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="extra-box" fxFlex="0 0 50px">
|
||||
<mat-icon matPrefix class="ico-business">business</mat-icon>LG CNS
|
||||
</div>
|
||||
|
||||
<div fxFlex="1 1 auto">
|
||||
<app-organization-tree
|
||||
[initialExpanded]="initialExpanded"
|
||||
(clicked)="onClickedTree($event)"
|
||||
></app-organization-tree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-menu #organizationMenu="matMenu">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.sidenav-container {
|
||||
overflow: hidden;
|
||||
|
||||
.sub-header {
|
||||
justify-content: space-between;
|
||||
padding: 0 0 0 17px;
|
||||
background-color: $white;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
h3 {
|
||||
@include font-family-txt(20, left, $lipstick);
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
.menu-btn {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
.extra-box {
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: $gray-re3;
|
||||
padding: 0 17px;
|
||||
line-height: 50px;
|
||||
.ico-business {
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,68 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
||||
import { Router, ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { DeptInfo } from '@ucap/protocol-query';
|
||||
|
||||
import { QueryParams } from '../types/params.type';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-ogranization-sidenav',
|
||||
templateUrl: './sidenav.page.component.html',
|
||||
styleUrls: ['./sidenav.page.component.scss']
|
||||
})
|
||||
export class SidenavPageComponent {
|
||||
constructor(private logService: LogService) {
|
||||
export class SidenavPageComponent implements OnInit, OnDestroy {
|
||||
initialExpanded: number;
|
||||
|
||||
private ngOnDestroySubject: Subject<void>;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private logService: LogService
|
||||
) {
|
||||
this.logService.info('app-pages-ogranization-sidenav');
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<void>();
|
||||
|
||||
this.activatedRoute.queryParams
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((params) => {
|
||||
if (!!params) {
|
||||
const deptSeq = params[QueryParams.DEPT_SEQ];
|
||||
if (!!deptSeq) {
|
||||
this.initialExpanded = Number(deptSeq);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onClickedTree(node: DeptInfo) {
|
||||
const queryParams: Params = {};
|
||||
queryParams[QueryParams.DEPT_SEQ] = String(node.seq);
|
||||
|
||||
this.router.navigate(
|
||||
[
|
||||
'organization',
|
||||
{
|
||||
outlets: { content: 'index' }
|
||||
}
|
||||
],
|
||||
{
|
||||
queryParams
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,29 @@ import { CommonModule } from '@angular/common';
|
|||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
|
||||
import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
|
||||
import { AppOrganizationSectionModule } from '@app/sections/organization/organization.section.module';
|
||||
import { AppOrganizationRoutingPageModule } from './organization-routing.page.module';
|
||||
|
||||
import { COMPONENTS } from './components';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, FlexLayoutModule, AppOrganizationRoutingPageModule],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
|
||||
AppOrganizationModule,
|
||||
AppOrganizationSectionModule,
|
||||
AppOrganizationRoutingPageModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: []
|
||||
})
|
||||
|
|
|
|||
3
src/app/pages/organization/types/params.type.ts
Normal file
3
src/app/pages/organization/types/params.type.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export enum QueryParams {
|
||||
DEPT_SEQ = 'dept_seq'
|
||||
}
|
||||
|
|
@ -1,20 +1,19 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
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 { COMPONENTS } from './components';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
|
|
@ -26,8 +25,8 @@ import { MatSliderModule } from '@angular/material/slider';
|
|||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import { COMPONENTS } from './components';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<mat-select
|
||||
[formControl]="companyCodeFormControl"
|
||||
[value]="companyCode || fixedCompanyCode"
|
||||
placeholder="{{ 'login.labels.selectCompany' | ucapI18n }}"
|
||||
class="login-input-area login-select-form"
|
||||
>
|
||||
<mat-option
|
||||
|
|
|
|||
|
|
@ -1,4 +1 @@
|
|||
import { LoginSectionComponent } from './login.section.component';
|
||||
import { LoginComponent } from './component-ui/login.component';
|
||||
|
||||
export const COMPONENTS = [LoginSectionComponent, LoginComponent];
|
||||
export const COMPONENTS = [];
|
||||
|
|
|
|||
|
|
@ -1,63 +1,67 @@
|
|||
<ucap-authentication-login-local
|
||||
[companyList]="companyList"
|
||||
[fixedCompanyCode]="fixedCompanyCode"
|
||||
[companyCode]="userStore?.companyCode"
|
||||
[loginId]="userStore?.loginId"
|
||||
[disable]="disableLoginForm"
|
||||
[processing]="loginProcessing"
|
||||
[loginTry]="loginTry"
|
||||
(login)="onLogin($event)"
|
||||
>
|
||||
<div ucapAuthenticationLogin="header">
|
||||
<div class="logo-img">
|
||||
<img src="../../../assets/images/logo_140.png" alt="" />
|
||||
</div>
|
||||
<h1>Welcome to Messenger</h1>
|
||||
</div>
|
||||
|
||||
<div ucapAuthenticationLogin="footer">
|
||||
<div class="login-chk-area">
|
||||
<div>
|
||||
<mat-checkbox
|
||||
#chkUseRememberMe
|
||||
*ngIf="useRememberMe"
|
||||
aria-label="Remember Me"
|
||||
[checked]="!!userStore && userStore.rememberMe"
|
||||
>
|
||||
{{ 'login.labels.rememberMe' | ucapI18n }}
|
||||
</mat-checkbox>
|
||||
<div class="login-section-container">
|
||||
<ucap-authentication-login-local
|
||||
[companyList]="companyList"
|
||||
[fixedCompanyCode]="fixedCompanyCode"
|
||||
[companyCode]="userStore?.companyCode"
|
||||
[loginId]="userStore?.loginId"
|
||||
[disable]="disableLoginForm"
|
||||
[processing]="loginProcessing"
|
||||
[loginTry]="loginTry"
|
||||
(login)="onLogin($event)"
|
||||
>
|
||||
<div ucapAuthenticationLogin="header">
|
||||
<div class="logo-img">
|
||||
<img src="../../../assets/images/logo_140.png" alt="" />
|
||||
</div>
|
||||
<h1>Welcome to Messenger</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-checkbox
|
||||
#chkUseAutoLogin
|
||||
*ngIf="useAutoLogin"
|
||||
aria-label="Auto Login"
|
||||
[checked]="
|
||||
!!userStore &&
|
||||
!!userStore.settings &&
|
||||
!!userStore.settings.general &&
|
||||
userStore.settings.general.autoLogin
|
||||
"
|
||||
>
|
||||
{{ 'login.labels.autoLogin' | ucapI18n }}
|
||||
</mat-checkbox>
|
||||
<div ucapAuthenticationLogin="footer">
|
||||
<div class="login-chk-area">
|
||||
<div>
|
||||
<mat-checkbox
|
||||
#chkUseRememberMe
|
||||
*ngIf="useRememberMe"
|
||||
aria-label="Remember Me"
|
||||
[checked]="!!userStore && userStore.rememberMe"
|
||||
>
|
||||
{{ 'login.labels.rememberMe' | ucapI18n }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-checkbox
|
||||
#chkUseAutoLogin
|
||||
*ngIf="useAutoLogin"
|
||||
aria-label="Auto Login"
|
||||
[checked]="
|
||||
!!userStore &&
|
||||
!!userStore.settings &&
|
||||
!!userStore.settings.general &&
|
||||
userStore.settings.general.autoLogin
|
||||
"
|
||||
>
|
||||
{{ 'login.labels.autoLogin' | ucapI18n }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-pass-info">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">{{ 'login.labels.forgotPassword' | ucapI18n }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="fir-pass">{{
|
||||
'login.labels.resetPassword' | ucapI18n
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="login-button-area">
|
||||
<button type="button">
|
||||
{{ 'login.labels.notesOnUse' | ucapI18n }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-pass-info">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">{{ 'login.labels.forgotPassword' | ucapI18n }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="fir-pass">{{
|
||||
'login.labels.resetPassword' | ucapI18n
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="login-button-area">
|
||||
<button type="button">{{ 'login.labels.NotesOnUse' | ucapI18n }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</ucap-authentication-login-local>
|
||||
</ucap-authentication-login-local>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,12 @@ h1 {
|
|||
}
|
||||
}
|
||||
|
||||
.login-section-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.login-chk-area {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
|
|
|
|||
73
src/app/sections/chat/chat.section.module.ts
Normal file
73
src/app/sections/chat/chat.section.module.ts
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||||
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTreeModule } from '@angular/material/tree';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
|
||||
import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
|
||||
import { UiModule } from '@ucap/ng-ui';
|
||||
import { ChatUiModule } from '@ucap/ng-ui-chat';
|
||||
import { AppChatModule } from '@app/ucap/chat/chat.module';
|
||||
|
||||
import { COMPONENTS } from './components';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatInputModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatCardModule,
|
||||
MatCheckboxModule,
|
||||
MatAutocompleteModule,
|
||||
MatSelectModule,
|
||||
MatBadgeModule,
|
||||
MatMenuModule,
|
||||
MatToolbarModule,
|
||||
MatButtonModule,
|
||||
MatRippleModule,
|
||||
MatTreeModule,
|
||||
MatTooltipModule,
|
||||
|
||||
PerfectScrollbarModule,
|
||||
ScrollingModule,
|
||||
|
||||
I18nModule,
|
||||
UiModule,
|
||||
|
||||
ChatUiModule,
|
||||
AppChatModule
|
||||
],
|
||||
exports: [...COMPONENTS],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: [],
|
||||
providers: [
|
||||
{
|
||||
provide: UCAP_I18N_NAMESPACE,
|
||||
useValue: ['chat', 'common']
|
||||
}
|
||||
]
|
||||
})
|
||||
export class AppChatSectionModule {}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<div class="search-container">
|
||||
<div class="searchbox ucap-mat-input-container">
|
||||
<mat-form-field floatLabel="never" appearance="none" class="search-in-box">
|
||||
<input
|
||||
matInput
|
||||
#searchWordInput
|
||||
type="text"
|
||||
maxlength="20"
|
||||
placeholder="솔루션"
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="searchWordInput.value = ''"
|
||||
class="btn-close"
|
||||
color="accent"
|
||||
>
|
||||
<mat-icon>highlight_off</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="accent"
|
||||
class="btn-ico-search"
|
||||
(click)="onChatSearch(searchWordInput.value)"
|
||||
>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="btn-ico-search"
|
||||
(click)="onCancel()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-result">
|
||||
<span class="text"><strong>N</strong>건의 검색결과가 있습니다.</span>
|
||||
<span class="result-count"><strong>1</strong>/N</span>
|
||||
<div class="btn-area">
|
||||
<button mat-icon-button class="icon-button">
|
||||
<mat-icon>arrow_downward</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="icon-button">
|
||||
<mat-icon>arrow_upward</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { SearchSectionComponent } from './search.section.component';
|
||||
|
||||
describe('app::sections::group::SearchSectionComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [SearchSectionComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(SearchSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(SearchSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(SearchSectionComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ChangeDetectorRef,
|
||||
ChangeDetectionStrategy
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sections-chat-chat-search',
|
||||
templateUrl: './chat-search.section.component.html',
|
||||
styleUrls: ['./chat-search.section.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ChatSearchSectionComponent implements OnInit, OnDestroy {
|
||||
searchObj: any = {
|
||||
isSearch: false,
|
||||
searchWord: ''
|
||||
};
|
||||
|
||||
@Output()
|
||||
chatSearch = new EventEmitter<{
|
||||
isSearch: false;
|
||||
searchWord: '';
|
||||
}>();
|
||||
|
||||
@Output()
|
||||
closeChatSearch = new EventEmitter<void>();
|
||||
|
||||
constructor(private changeDetectorRef: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
ngOnDestroy(): void {}
|
||||
|
||||
onChatSearch(searchWord: string) {
|
||||
alert(searchWord);
|
||||
|
||||
this.searchObj = {
|
||||
isSearch: true,
|
||||
searchWord
|
||||
};
|
||||
this.chatSearch.emit(this.searchObj);
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.closeChatSearch.emit();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<div class="chat-list-item">
|
||||
<div class="profileImage">
|
||||
<img
|
||||
class="thumbnail"
|
||||
ucapImage
|
||||
[base]="profileImageRoot"
|
||||
[path]="profileImage"
|
||||
[default]="defaultProfileImage"
|
||||
/>
|
||||
</div>
|
||||
<div class="roomName">
|
||||
{{ roomName }}
|
||||
<strong *ngIf="roomInfo.roomType === RoomType.Multi"
|
||||
>({{ roomInfo.joinUserCount }})</strong
|
||||
>
|
||||
</div>
|
||||
<div class="lastMessage">{{ roomInfo.finalEventMessage }}</div>
|
||||
<div class="date">{{ roomInfo.finalEventDate | ucapDate: 'LT' }}</div>
|
||||
|
||||
<span
|
||||
class="noti-sum"
|
||||
*ngIf="!!roomInfo.noReadCnt && roomInfo.noReadCnt > 0"
|
||||
[matBadgeHidden]="roomInfo.noReadCnt === 0"
|
||||
[matBadge]="roomInfo.noReadCnt"
|
||||
matBadgeOverlap="true"
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="below after"
|
||||
></span>
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="room-menu"
|
||||
*ngIf="!checkable"
|
||||
[matMenuTriggerFor]="roomMenu"
|
||||
(click)="$event.stopPropagation()"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-checkbox
|
||||
*ngIf="checkable"
|
||||
#checkbox
|
||||
[checked]="checked"
|
||||
(change)="onToggleItem(checkbox.checked)"
|
||||
(click)="$event.stopPropagation()"
|
||||
class="group-check"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<mat-menu #roomMenu="matMenu">
|
||||
<span class="manu-title">{{ roomName }}</span>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>dialpad</mat-icon>
|
||||
<span>대화방 열기</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>dialpad</mat-icon>
|
||||
<span>알림 해제</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>dialpad</mat-icon>
|
||||
<span>대화방 나가기</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ChatListItemComponent } from './chat-list-item.component';
|
||||
|
||||
describe('ChatListItemComponent', () => {
|
||||
let component: ChatListItemComponent;
|
||||
let fixture: ComponentFixture<ChatListItemComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ChatListItemComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ChatListItemComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
ChangeDetectionStrategy,
|
||||
Input,
|
||||
OnDestroy,
|
||||
EventEmitter,
|
||||
Output,
|
||||
ChangeDetectorRef
|
||||
} from '@angular/core';
|
||||
import { RoomInfo, RoomType } from '@ucap/protocol-room';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chat-list-item',
|
||||
templateUrl: './chat-list-item.component.html',
|
||||
styleUrls: ['./chat-list-item.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ChatListItemComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
roomInfo: RoomInfo;
|
||||
|
||||
@Input()
|
||||
profileImageRoot: string;
|
||||
|
||||
@Input()
|
||||
defaultProfileImage: string;
|
||||
|
||||
@Input()
|
||||
profileImage: string;
|
||||
|
||||
@Input()
|
||||
roomName: string;
|
||||
|
||||
@Input()
|
||||
checkable = false;
|
||||
|
||||
@Input()
|
||||
checked = false;
|
||||
|
||||
@Output()
|
||||
toggleItem = new EventEmitter<{
|
||||
checked: boolean;
|
||||
roomInfo: RoomInfo;
|
||||
}>();
|
||||
|
||||
RoomType = RoomType;
|
||||
|
||||
constructor(private changeDetectorRef: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
ngOnDestroy(): void {}
|
||||
|
||||
onToggleItem(value: boolean): void {
|
||||
this.toggleItem.emit({
|
||||
checked: value,
|
||||
roomInfo: this.roomInfo
|
||||
});
|
||||
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<div class="ucap-group-expansion-container" fxFlexFill>
|
||||
<cdk-virtual-scroll-viewport #cvsvList perfectScrollbar fxFlexFill>
|
||||
<ng-container
|
||||
*cdkVirtualFor="
|
||||
let node of dataSource.expandedData$;
|
||||
templateCacheSize: 0
|
||||
"
|
||||
></ng-container>
|
||||
|
||||
<mat-tree #treeList [dataSource]="dataSource" [treeControl]="treeControl">
|
||||
<mat-tree-node
|
||||
*matTreeNodeDef="let node"
|
||||
[attr.node-type]="node?.nodeType"
|
||||
matRipple
|
||||
>
|
||||
<li>
|
||||
<div>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="nodeTemplate"
|
||||
[ngTemplateOutletContext]="{ $implicit: node?.node }"
|
||||
></ng-container>
|
||||
</div>
|
||||
</li>
|
||||
</mat-tree-node>
|
||||
|
||||
<mat-tree-node
|
||||
*matTreeNodeDef="let node; when: isHeader"
|
||||
class="tree-node-frame ucap-clickable"
|
||||
[attr.node-type]="node?.nodeType"
|
||||
matRipple
|
||||
>
|
||||
<li class="tree-node-header" matTreeNodeToggle>
|
||||
<div class="path">
|
||||
<button
|
||||
mat-icon-button
|
||||
[attr.aria-label]="'toggle '"
|
||||
class="btn-toggle"
|
||||
>
|
||||
<mat-icon class="mat-icon-rtl-mirror">
|
||||
{{
|
||||
treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'
|
||||
}}
|
||||
</mat-icon>
|
||||
</button>
|
||||
<div class="group-info">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="headerTemplate"
|
||||
[ngTemplateOutletContext]="{ $implicit: node?.node }"
|
||||
>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<ul [class.group-tree-node-invisible]="!treeControl.isExpanded(node)">
|
||||
<div *ngIf="treeControl.isExpanded(node)" class="boxnone">
|
||||
<div class="vertical-line"></div>
|
||||
<ng-container matTreeNodeOutlet></ng-container>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
</mat-tree-node>
|
||||
</mat-tree>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { ExpansionComponent } from './expansion.component';
|
||||
|
||||
describe('ucap::ui-group::ExpansionComponent', () => {
|
||||
let component: ExpansionComponent;
|
||||
let fixture: ComponentFixture<ExpansionComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ExpansionComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ExpansionComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
Input,
|
||||
ViewChild,
|
||||
ContentChild,
|
||||
TemplateRef,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Directive
|
||||
} from '@angular/core';
|
||||
|
||||
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
||||
import { FlatTreeControl } from '@angular/cdk/tree';
|
||||
|
||||
import { MatTreeFlattener, MatTree } from '@angular/material/tree';
|
||||
|
||||
import { VirtualScrollTreeFlatDataSource } from '@ucap/ng-ui';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { RoomInfo } from '@ucap/protocol-room';
|
||||
|
||||
export interface ChatGroupNode {
|
||||
nodeType: string;
|
||||
roomInfo?: RoomInfo;
|
||||
children?: ChatGroupNode[];
|
||||
}
|
||||
|
||||
export interface FlatNode {
|
||||
expandable: boolean;
|
||||
level: number;
|
||||
node: ChatGroupNode;
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ucapChatExpansionNode]'
|
||||
})
|
||||
export class ExpansionNodeDirective {}
|
||||
|
||||
@Directive({
|
||||
selector: '[ucapChatExpansionHeader]'
|
||||
})
|
||||
export class ExpansionHeaderDirective {}
|
||||
|
||||
@Component({
|
||||
selector: 'ucap-chat-expansion',
|
||||
templateUrl: './expansion.component.html',
|
||||
styleUrls: ['./expansion.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ExpansionComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
set chatGroup(list: { division: string; roomList: RoomInfo[] }[]) {
|
||||
if (!list || 0 === list.length) {
|
||||
} else {
|
||||
list.sort((a, b) =>
|
||||
a.division < b.division ? 1 : a.division > b.division ? -1 : 0
|
||||
);
|
||||
|
||||
for (const item of list) {
|
||||
const nodeType = item.division;
|
||||
const node: ChatGroupNode = {
|
||||
nodeType,
|
||||
children: []
|
||||
};
|
||||
|
||||
item.roomList.sort((a, b) =>
|
||||
a.finalEventDate < b.finalEventDate
|
||||
? 1
|
||||
: a.finalEventDate > b.finalEventDate
|
||||
? -1
|
||||
: 0
|
||||
);
|
||||
|
||||
item.roomList.forEach((roomInfo) => {
|
||||
node.children.push({
|
||||
nodeType,
|
||||
roomInfo
|
||||
});
|
||||
});
|
||||
|
||||
if (!!this.nodeMap.get(item.division)) {
|
||||
this.nodeMap[item.division].push(node);
|
||||
} else {
|
||||
this.nodeMap.set(item.division, [node]);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.refreshNodes();
|
||||
}
|
||||
|
||||
@ViewChild('treeList', { static: false })
|
||||
treeList: MatTree<FlatNode>;
|
||||
|
||||
@ViewChild('cvsvList', { static: false })
|
||||
cvsvList: CdkVirtualScrollViewport;
|
||||
|
||||
@ViewChild(PerfectScrollbarDirective, { static: false })
|
||||
psDirectiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
@ContentChild(ExpansionNodeDirective, {
|
||||
read: TemplateRef,
|
||||
static: false
|
||||
})
|
||||
nodeTemplate: TemplateRef<ExpansionNodeDirective>;
|
||||
|
||||
@ContentChild(ExpansionHeaderDirective, {
|
||||
read: TemplateRef,
|
||||
static: false
|
||||
})
|
||||
headerTemplate: TemplateRef<ExpansionHeaderDirective>;
|
||||
|
||||
treeControl: FlatTreeControl<FlatNode>;
|
||||
treeFlattener: MatTreeFlattener<ChatGroupNode, FlatNode>;
|
||||
dataSource: VirtualScrollTreeFlatDataSource<ChatGroupNode, FlatNode>;
|
||||
|
||||
private nodeMap: Map<string, ChatGroupNode[]> = new Map();
|
||||
// tslint:disable-next-line: variable-name
|
||||
private _ngOnDestroySubject: Subject<void>;
|
||||
|
||||
constructor(private changeDetectorRef: ChangeDetectorRef) {
|
||||
this.treeControl = new FlatTreeControl<FlatNode>(
|
||||
(node) => node.level,
|
||||
(node) => node.expandable
|
||||
);
|
||||
|
||||
this.treeFlattener = new MatTreeFlattener<ChatGroupNode, FlatNode>(
|
||||
(node: ChatGroupNode, level: number) => {
|
||||
return {
|
||||
expandable: !!node.children && node.children.length > 0,
|
||||
level,
|
||||
nodeType: node.nodeType,
|
||||
node
|
||||
};
|
||||
},
|
||||
(node) => node.level,
|
||||
(node) => node.expandable,
|
||||
(node) => node.children
|
||||
);
|
||||
|
||||
this.dataSource = new VirtualScrollTreeFlatDataSource<
|
||||
ChatGroupNode,
|
||||
FlatNode
|
||||
>(this.treeControl, this.treeFlattener);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this._ngOnDestroySubject = new Subject();
|
||||
|
||||
this.dataSource.cdkVirtualScrollViewport = this.cvsvList;
|
||||
this.treeControl.expansionModel.changed
|
||||
.pipe(takeUntil(this._ngOnDestroySubject))
|
||||
.subscribe(() => {
|
||||
this.cvsvList.checkViewportSize();
|
||||
this.psDirectiveRef.update();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this._ngOnDestroySubject) {
|
||||
this._ngOnDestroySubject.next();
|
||||
this._ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
isHeader = (_: number, node: FlatNode) => 0 === node.level;
|
||||
|
||||
private refreshNodes() {
|
||||
const rootNode: ChatGroupNode[] = [];
|
||||
this.nodeMap.forEach((node) => rootNode.push(...node));
|
||||
|
||||
this.dataSource.data = rootNode;
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
}
|
||||
10
src/app/sections/chat/components/component-ui/index.ts
Normal file
10
src/app/sections/chat/components/component-ui/index.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { ChatListItemComponent } from './chat-list-item.component';
|
||||
import {
|
||||
ExpansionComponent,
|
||||
ExpansionNodeDirective,
|
||||
ExpansionHeaderDirective
|
||||
} from './expansion.component';
|
||||
|
||||
export const COMPONENTS = [ChatListItemComponent, ExpansionComponent];
|
||||
|
||||
export const DIRECTIVES = [ExpansionNodeDirective, ExpansionHeaderDirective];
|
||||
108
src/app/sections/chat/components/form.section.component.html
Normal file
108
src/app/sections/chat/components/form.section.component.html
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<ng-container [ngSwitch]="selectorType">
|
||||
<app-chat-selector-sticker *ngSwitchCase="'STICKER'">
|
||||
</app-chat-selector-sticker>
|
||||
|
||||
<app-chat-selector-translation
|
||||
*ngSwitchCase="'TRANSLATION'"
|
||||
></app-chat-selector-translation>
|
||||
|
||||
<app-chat-selector-file-upload *ngSwitchCase="'FILEUPLOAD'">
|
||||
</app-chat-selector-file-upload>
|
||||
|
||||
<app-chat-selector-email-send
|
||||
*ngSwitchCase="'EMAILSENDER'"
|
||||
></app-chat-selector-email-send>
|
||||
</ng-container>
|
||||
|
||||
<div class="chat-form-area">
|
||||
<mat-form-field
|
||||
class="message-text"
|
||||
fxFlex
|
||||
floatLabel="never"
|
||||
appearance="standard"
|
||||
>
|
||||
<textarea
|
||||
matInput
|
||||
#replyInput
|
||||
placeholder=""
|
||||
name="message"
|
||||
[matTextareaAutosize]="true"
|
||||
[matAutosizeMaxRows]="20"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="button-area">
|
||||
<button
|
||||
mat-button
|
||||
aria-label="attachFile"
|
||||
matTooltipPosition="above"
|
||||
matTooltip="{{ 'label.attachFile' | ucapI18n }}"
|
||||
matTool
|
||||
(click)="onOpenSelector('FILEUPLOAD')"
|
||||
>
|
||||
첨부파일
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
aria-label="attachImage"
|
||||
matTooltipPosition="above"
|
||||
matTooltip="{{ 'label.attachImage' | ucapI18n }}"
|
||||
(click)="onOpenSelector('')"
|
||||
>
|
||||
이미지
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
aria-label="screenshot"
|
||||
matTooltipPosition="above"
|
||||
matTooltip="{{ 'label.screenshot' | ucapI18n }}"
|
||||
(click)="onOpenSelector('')"
|
||||
>
|
||||
캡쳐 화면 전송
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
aria-label="imoticon"
|
||||
matTooltipPosition="above"
|
||||
matTooltip="{{ 'label.imoticon' | ucapI18n }}"
|
||||
(click)="onOpenSelector('STICKER')"
|
||||
>
|
||||
이모티콘
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
aria-label="emailSend"
|
||||
matTooltipPosition="above"
|
||||
matTooltip="{{ 'label.emailSend' | ucapI18n }}"
|
||||
(click)="onOpenSelector('EMAILSENDER')"
|
||||
>
|
||||
대화내용 메일 전송
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
aria-label="translation"
|
||||
matTooltipPosition="above"
|
||||
matTooltip="{{ 'label.translation' | ucapI18n }}"
|
||||
(click)="onOpenSelector('TRANSLATION')"
|
||||
>
|
||||
대화내용 번역
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
aria-label="gams"
|
||||
matTooltipPosition="above"
|
||||
matTooltip="{{ 'label.gams' | ucapI18n }}"
|
||||
(click)="onOpenSelector('')"
|
||||
>
|
||||
+GAMS
|
||||
</button>
|
||||
<button
|
||||
mat-fab
|
||||
color="accent"
|
||||
aria-label="send"
|
||||
matTooltip="{{ 'label.send' | ucapI18n }}"
|
||||
(click)="onOpenSelector('')"
|
||||
>
|
||||
<mat-icon>send</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { FormSectionComponent } from './form.section.component';
|
||||
|
||||
describe('app::sections::group::FormSectionComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [FormSectionComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(FormSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(FormSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(FormSectionComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
71
src/app/sections/chat/components/form.section.component.ts
Normal file
71
src/app/sections/chat/components/form.section.component.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { RoomInfo } from '@ucap/protocol-room';
|
||||
import { Dictionary } from '@ngrx/entity';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sections-chat-form',
|
||||
templateUrl: './form.section.component.html',
|
||||
styleUrls: ['./form.section.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FormSectionComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
set roomId(roomId: string) {
|
||||
this._roomId = roomId;
|
||||
}
|
||||
get roomId(): string {
|
||||
return this._roomId;
|
||||
}
|
||||
// tslint:disable-next-line: variable-name
|
||||
_roomId: string;
|
||||
|
||||
currentRoomInfo: RoomInfo;
|
||||
|
||||
selectorType = '';
|
||||
|
||||
private ngOnDestroySubject: Subject<boolean>;
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<boolean>();
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(
|
||||
(state: any) => state.chat.room.rooms.entities as Dictionary<RoomInfo>
|
||||
)
|
||||
)
|
||||
.subscribe((rooms) => {
|
||||
if (!!this.roomId) {
|
||||
this.currentRoomInfo = rooms[this.roomId];
|
||||
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onOpenSelector(type: string): void {
|
||||
this.selectorType = type;
|
||||
}
|
||||
}
|
||||
15
src/app/sections/chat/components/index.ts
Normal file
15
src/app/sections/chat/components/index.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { SearchSectionComponent } from './search.section.component';
|
||||
import { ListSectionComponent } from './list.section.component';
|
||||
import { InfoSectionComponent } from './info.section.component';
|
||||
import { ChatSearchSectionComponent } from './chat-search.section.component';
|
||||
import { FormSectionComponent } from './form.section.component';
|
||||
import { MessageSectionComponent } from './message.section.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
SearchSectionComponent,
|
||||
ListSectionComponent,
|
||||
InfoSectionComponent,
|
||||
ChatSearchSectionComponent,
|
||||
FormSectionComponent,
|
||||
MessageSectionComponent
|
||||
];
|
||||
74
src/app/sections/chat/components/info.section.component.html
Normal file
74
src/app/sections/chat/components/info.section.component.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<mat-toolbar class="info-chat-toolbar">
|
||||
<mat-toolbar-row>
|
||||
<div class="profileImage">
|
||||
<img
|
||||
class="thumbnail"
|
||||
ucapImage
|
||||
[base]="versionInfo2Res?.profileRoot"
|
||||
[path]="roomImage"
|
||||
[default]="defaultProfileImage"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
>{{ roomName }}
|
||||
<span
|
||||
class="user-count"
|
||||
*ngIf="currentRoomInfo?.roomType === RoomType.Multi"
|
||||
>
|
||||
(<strong>{{ currentRoomInfo?.joinUserCount }}</strong
|
||||
>)
|
||||
</span>
|
||||
</span>
|
||||
<span class="example-spacer"></span>
|
||||
<div>
|
||||
<button
|
||||
mat-mini-fab
|
||||
color="primary"
|
||||
aria-label="search"
|
||||
matTooltip="{{ 'label.search' | ucapI18n }}"
|
||||
(click)="onOpenChatSearch()"
|
||||
>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-mini-fab
|
||||
color="primary"
|
||||
aria-label="alarm"
|
||||
matTooltip="{{
|
||||
(currentRoomInfo?.receiveAlarm
|
||||
? 'label.notificationIsOn'
|
||||
: 'label.notificationIsOff'
|
||||
) | ucapI18n
|
||||
}}"
|
||||
(click)="onToggleAlarm(currentRoomInfo)"
|
||||
>
|
||||
<mat-icon *ngIf="currentRoomInfo?.receiveAlarm">notifications</mat-icon>
|
||||
|
||||
<mat-icon *ngIf="!currentRoomInfo?.receiveAlarm"
|
||||
>notifications_off</mat-icon
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
mat-mini-fab
|
||||
color="primary"
|
||||
aria-label="show room users"
|
||||
matTooltip="{{ 'label.showRoomUsers' | ucapI18n }}"
|
||||
(click)="onOpenRoomUserList(currentRoomInfo)"
|
||||
>
|
||||
<mat-icon>group</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="primary" aria-label="">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-mini-fab
|
||||
color="primary"
|
||||
aria-label="Menu"
|
||||
matTooltip="{{ 'label.menu' | ucapI18n }}"
|
||||
(click)="onRightDrawerToggle()"
|
||||
>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
15
src/app/sections/chat/components/info.section.component.scss
Normal file
15
src/app/sections/chat/components/info.section.component.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.info-chat-toolbar {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
.mat-toolbar-row {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { InfoSectionComponent } from './info.section.component';
|
||||
|
||||
describe('app::sections::group::InfoSectionComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [InfoSectionComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(InfoSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(InfoSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(InfoSectionComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
224
src/app/sections/chat/components/info.section.component.ts
Normal file
224
src/app/sections/chat/components/info.section.component.ts
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
Input,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ChangeDetectorRef
|
||||
} from '@angular/core';
|
||||
import { Dictionary } from '@ngrx/entity';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { combineLatest, Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { RoomSelector, RoomActions } from '@ucap/ng-store-chat';
|
||||
import {
|
||||
LoginSelector,
|
||||
ConfigurationSelector
|
||||
} from '@ucap/ng-store-authentication';
|
||||
import {
|
||||
RoomUserMap,
|
||||
RoomUserShortMap
|
||||
} from '@ucap/ng-store-chat/lib/store/room/state';
|
||||
import { LoginResponse } from '@ucap/protocol-authentication';
|
||||
import { RoomInfo, RoomType, UpdateRequest } from '@ucap/protocol-room';
|
||||
|
||||
import {
|
||||
TranslatePipe as OrganizationTranslate,
|
||||
TranslateService
|
||||
} from '@ucap/ng-ui-organization';
|
||||
|
||||
import { AppChatService } from '@app/services/app-chat.service';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
import { VersionInfo2Response } from '@ucap/api-public';
|
||||
import { LocaleCode } from '@ucap/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sections-chat-info',
|
||||
templateUrl: './info.section.component.html',
|
||||
styleUrls: ['./info.section.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class InfoSectionComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
set roomId(roomId: string) {
|
||||
this._roomId = roomId;
|
||||
|
||||
// request selected room
|
||||
if (!!this.roomId) {
|
||||
this.store.dispatch(
|
||||
RoomActions.selectedRoom({
|
||||
roomId: this.roomId,
|
||||
localeCode: LocaleCode.Korean
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
this.getRoomInfo();
|
||||
}
|
||||
get roomId(): string {
|
||||
return this._roomId;
|
||||
}
|
||||
// tslint:disable-next-line: variable-name
|
||||
_roomId: string;
|
||||
|
||||
@Output()
|
||||
openChatSearch = new EventEmitter<void>();
|
||||
|
||||
@Output()
|
||||
rightDrawerToggle = new EventEmitter<void>();
|
||||
|
||||
versionInfo2Res: VersionInfo2Response;
|
||||
loginRes: LoginResponse;
|
||||
|
||||
defaultProfileImage: string;
|
||||
defaultProfileImageMulti: string;
|
||||
|
||||
currentRoomInfo: RoomInfo;
|
||||
roomList: RoomInfo[];
|
||||
roomUsersDictionary: Dictionary<RoomUserMap>;
|
||||
roomUsersShortDictionary: Dictionary<RoomUserShortMap>;
|
||||
|
||||
roomName: string;
|
||||
roomImage: string;
|
||||
|
||||
RoomType = RoomType;
|
||||
organizationTranslate: OrganizationTranslate;
|
||||
private ngOnDestroySubject: Subject<boolean>;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private appChatService: AppChatService,
|
||||
private i18nService: I18nService,
|
||||
private translateService: TranslateService,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {
|
||||
// language setting
|
||||
this.translateService.setDefaultLang(this.i18nService.currentLng);
|
||||
this.translateService.use(this.i18nService.currentLng);
|
||||
this.organizationTranslate = new OrganizationTranslate(
|
||||
this.translateService,
|
||||
this.changeDetectorRef
|
||||
);
|
||||
|
||||
// default image setting
|
||||
this.defaultProfileImage = this.appChatService.defaultProfileImage;
|
||||
this.defaultProfileImageMulti = this.appChatService.defaultProfileImage;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<boolean>();
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(ConfigurationSelector.versionInfo2Response)
|
||||
)
|
||||
.subscribe((versionInfo2Res) => {
|
||||
this.versionInfo2Res = versionInfo2Res;
|
||||
});
|
||||
|
||||
combineLatest([
|
||||
this.store.pipe(select(LoginSelector.loginRes)),
|
||||
this.store.pipe(select(RoomSelector.rooms)),
|
||||
this.store.pipe(
|
||||
select(
|
||||
(state: any) =>
|
||||
state.chat.room.roomUsers.entities as Dictionary<RoomUserMap>
|
||||
)
|
||||
),
|
||||
this.store.pipe(
|
||||
select(
|
||||
(state: any) =>
|
||||
state.chat.room.roomUsersShort.entities as Dictionary<
|
||||
RoomUserShortMap
|
||||
>
|
||||
)
|
||||
)
|
||||
])
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe(([loginRes, rooms, roomUsers, roomUsersShort]) => {
|
||||
this.loginRes = loginRes;
|
||||
if (!!loginRes && !!this.roomId) {
|
||||
this.roomList = rooms;
|
||||
this.roomUsersDictionary = roomUsers;
|
||||
this.roomUsersShortDictionary = roomUsersShort;
|
||||
|
||||
this.getRoomInfo();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
getRoomInfo(): void {
|
||||
// room render.
|
||||
if (!this.roomList || this.roomList.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.roomName = '...';
|
||||
const idx = this.roomList.findIndex(
|
||||
(roomInfo) => roomInfo.roomId === this.roomId
|
||||
);
|
||||
if (idx > -1 && !!this.roomList && this.roomList.length > 0) {
|
||||
this.currentRoomInfo = this.roomList[idx];
|
||||
}
|
||||
|
||||
if (!!this.currentRoomInfo) {
|
||||
// Setting RoomName.
|
||||
this.roomName = this.appChatService.getRoomName(
|
||||
this.organizationTranslate,
|
||||
this.loginRes,
|
||||
this.currentRoomInfo,
|
||||
this.roomUsersDictionary,
|
||||
this.roomUsersShortDictionary
|
||||
);
|
||||
|
||||
this.roomImage = this.appChatService.getRoomProfileImage(
|
||||
this.currentRoomInfo,
|
||||
this.loginRes,
|
||||
this.roomUsersDictionary,
|
||||
this.roomUsersShortDictionary
|
||||
);
|
||||
}
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
onToggleAlarm(roomInfo: RoomInfo): void {
|
||||
if (!roomInfo) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.store.dispatch(
|
||||
RoomActions.update({
|
||||
req: {
|
||||
roomId: roomInfo.roomId,
|
||||
roomName:
|
||||
roomInfo.roomName.trim().length === 0
|
||||
? ' '
|
||||
: roomInfo.roomName.trim(),
|
||||
receiveAlarm: !roomInfo.receiveAlarm,
|
||||
syncAll: false
|
||||
} as UpdateRequest
|
||||
})
|
||||
);
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
onOpenRoomUserList(roomInfo: RoomInfo): void {}
|
||||
|
||||
onOpenChatSearch(): void {
|
||||
this.openChatSearch.emit();
|
||||
}
|
||||
|
||||
onRightDrawerToggle(): void {
|
||||
this.rightDrawerToggle.emit();
|
||||
}
|
||||
}
|
||||
30
src/app/sections/chat/components/list.section.component.html
Normal file
30
src/app/sections/chat/components/list.section.component.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<div
|
||||
*ngIf="!!searchObj && !searchObj.isShowSearch"
|
||||
fxFlexFill
|
||||
class="list-container"
|
||||
>
|
||||
<app-chat-room-expansion
|
||||
[checkable]="checkable"
|
||||
[selectedRoomList]="selectedRoomList"
|
||||
(toggleItem)="onToggleItem($event)"
|
||||
(openChatRoom)="onOpenChatRoom($event)"
|
||||
>
|
||||
</app-chat-room-expansion>
|
||||
</div>
|
||||
<div *ngIf="!!searchObj && searchObj.isShowSearch">
|
||||
<ucap-chat-room-list-item-01
|
||||
*ngFor="let roomInfo of searchRoomList"
|
||||
[roomInfo]="roomInfo"
|
||||
[roomName]="getRoomName(roomInfo)"
|
||||
[profileImageRoot]="versionInfo2Res?.profileRoot"
|
||||
[defaultProfileImage]="defaultProfileImage"
|
||||
[profileImage]="getRoomProfileImage(roomInfo)"
|
||||
[checked]="getChecked(roomInfo)"
|
||||
[checkable]="checkable"
|
||||
(toggleItem)="onToggleItem($event)"
|
||||
(openChatRoom)="onOpenChatRoom($event)"
|
||||
(toggleAlarm)="onToggleAlarm($event)"
|
||||
(delRoom)="onDelRoom($event)"
|
||||
(click)="onClickRoomItem($event, roomInfo)"
|
||||
></ucap-chat-room-list-item-01>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
.list-container {
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { ListSectionComponent } from './list.section.component';
|
||||
|
||||
describe('app::sections::group::ListSectionComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [ListSectionComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(ListSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(ListSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(ListSectionComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
416
src/app/sections/chat/components/list.section.component.ts
Normal file
416
src/app/sections/chat/components/list.section.component.ts
Normal file
|
|
@ -0,0 +1,416 @@
|
|||
import { Subject, combineLatest } from 'rxjs';
|
||||
import { takeUntil, take } from 'rxjs/operators';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Input,
|
||||
EventEmitter,
|
||||
Output,
|
||||
NgZone
|
||||
} from '@angular/core';
|
||||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import {
|
||||
FixedSizeVirtualScrollStrategy,
|
||||
VIRTUAL_SCROLL_STRATEGY
|
||||
} from '@angular/cdk/scrolling';
|
||||
|
||||
import { LoginResponse } from '@ucap/protocol-authentication';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { SessionStorageService } from '@ucap/ng-web-storage';
|
||||
import {
|
||||
LoginSelector,
|
||||
ConfigurationSelector
|
||||
} from '@ucap/ng-store-authentication';
|
||||
import { RoomSelector, RoomActions } from '@ucap/ng-store-chat';
|
||||
import {
|
||||
RoomInfo,
|
||||
RoomType,
|
||||
ExitAllRequest,
|
||||
UpdateRequest,
|
||||
ExitRequest
|
||||
} from '@ucap/protocol-room';
|
||||
import {
|
||||
RoomUserMap,
|
||||
RoomUserShortMap
|
||||
} from '@ucap/ng-store-chat/lib/store/room/state';
|
||||
import { Dictionary } from '@ngrx/entity';
|
||||
import {
|
||||
TranslatePipe as OrganizationTranslate,
|
||||
TranslateService
|
||||
} from '@ucap/ng-ui-organization';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
import { AppChatService } from '@app/services/app-chat.service';
|
||||
import {
|
||||
DateService,
|
||||
ConfirmDialogComponent,
|
||||
ConfirmDialogData,
|
||||
ConfirmDialogResult
|
||||
} from '@ucap/ng-ui';
|
||||
import { VersionInfo2Response } from '@ucap/api-public';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
export class ChatVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
|
||||
constructor() {
|
||||
super(60, 150, 200); // (itemSize, minBufferPx, maxBufferPx)
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-sections-chat-list',
|
||||
templateUrl: './list.section.component.html',
|
||||
styleUrls: ['./list.section.component.scss'],
|
||||
providers: [
|
||||
{
|
||||
provide: VIRTUAL_SCROLL_STRATEGY,
|
||||
useClass: ChatVirtualScrollStrategy
|
||||
}
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ListSectionComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
set searchObj(obj: { isShowSearch: boolean; searchWord: string }) {
|
||||
this._searchObj = obj;
|
||||
|
||||
if (obj.isShowSearch && obj.searchWord.localeCompare('') !== 0) {
|
||||
this.onRoomSearch(obj);
|
||||
} else {
|
||||
this._searchObj.isShowSearch = false;
|
||||
this.searchRoomList = [];
|
||||
}
|
||||
this.searchResultList.emit(this.searchRoomList);
|
||||
}
|
||||
|
||||
get searchObj() {
|
||||
return this._searchObj;
|
||||
}
|
||||
// tslint:disable-next-line: variable-name
|
||||
_searchObj: any;
|
||||
|
||||
@Input()
|
||||
checkable = false;
|
||||
|
||||
@Input()
|
||||
selectedRoomList: RoomInfo[] = [];
|
||||
|
||||
@Output()
|
||||
searchResultList = new EventEmitter<RoomInfo[]>();
|
||||
|
||||
@Output()
|
||||
toggleItem = new EventEmitter<{
|
||||
checked: boolean;
|
||||
roomInfo: RoomInfo;
|
||||
}>();
|
||||
|
||||
@Output()
|
||||
delRoom = new EventEmitter<RoomInfo>();
|
||||
|
||||
versionInfo2Res: VersionInfo2Response;
|
||||
loginRes: LoginResponse;
|
||||
|
||||
defaultProfileImage: string;
|
||||
defaultProfileImageMulti: string;
|
||||
|
||||
roomList: RoomInfo[];
|
||||
roomUsersDictionary: Dictionary<RoomUserMap>;
|
||||
roomUsersShortDictionary: Dictionary<RoomUserShortMap>;
|
||||
|
||||
searchRoomList: RoomInfo[];
|
||||
|
||||
roomGroup: { division: string; roomList: RoomInfo[] }[];
|
||||
|
||||
organizationTranslate: OrganizationTranslate;
|
||||
|
||||
private ngOnDestroySubject: Subject<boolean>;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private appChatService: AppChatService,
|
||||
private dateService: DateService,
|
||||
private sessionStorageService: SessionStorageService,
|
||||
private i18nService: I18nService,
|
||||
private translateService: TranslateService,
|
||||
private store: Store<any>,
|
||||
private dialog: MatDialog,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private ngZone: NgZone,
|
||||
private logService: LogService
|
||||
) {
|
||||
// language setting
|
||||
this.translateService.setDefaultLang(this.i18nService.currentLng);
|
||||
this.translateService.use(this.i18nService.currentLng);
|
||||
this.organizationTranslate = new OrganizationTranslate(
|
||||
this.translateService,
|
||||
this.changeDetectorRef
|
||||
);
|
||||
this.i18nService.setDefaultNamespace('chat');
|
||||
|
||||
// default image setting
|
||||
this.defaultProfileImage = this.appChatService.defaultProfileImage;
|
||||
this.defaultProfileImageMulti = this.appChatService.defaultProfileImage;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<boolean>();
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(ConfigurationSelector.versionInfo2Response)
|
||||
)
|
||||
.subscribe((versionInfo2Res) => {
|
||||
this.versionInfo2Res = versionInfo2Res;
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
|
||||
.subscribe((loginRes) => {
|
||||
this.loginRes = loginRes;
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(RoomSelector.rooms))
|
||||
.subscribe((rooms) => {
|
||||
rooms = (rooms || []).filter((info) => info.isJoinRoom);
|
||||
this.roomList = rooms;
|
||||
|
||||
// groupping.
|
||||
this.initGroup();
|
||||
|
||||
this.changeDetectorRef.detectChanges();
|
||||
});
|
||||
|
||||
combineLatest([
|
||||
this.store.pipe(
|
||||
select(
|
||||
(state: any) =>
|
||||
state.chat.room.roomUsers.entities as Dictionary<RoomUserMap>
|
||||
)
|
||||
),
|
||||
this.store.pipe(
|
||||
select(
|
||||
(state: any) =>
|
||||
state.chat.room.roomUsersShort.entities as Dictionary<
|
||||
RoomUserShortMap
|
||||
>
|
||||
)
|
||||
)
|
||||
])
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe(([roomUsers, roomUsersShort]) => {
|
||||
this.roomUsersDictionary = roomUsers;
|
||||
this.roomUsersShortDictionary = roomUsersShort;
|
||||
this.changeDetectorRef.detectChanges();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
initGroup() {
|
||||
this.roomGroup = [];
|
||||
|
||||
this.roomList.forEach((roomInfo) => {
|
||||
const date = roomInfo.finalEventDate;
|
||||
let division = '';
|
||||
try {
|
||||
const value = this.dateService.get(date, 'LL');
|
||||
|
||||
if (value === 'Invalid date') {
|
||||
division = date;
|
||||
} else {
|
||||
division = value;
|
||||
}
|
||||
} catch (error) {
|
||||
division = date;
|
||||
}
|
||||
|
||||
const index = this.roomGroup.findIndex(
|
||||
(info) => info.division === division
|
||||
);
|
||||
if (index > -1) {
|
||||
this.roomGroup[index] = {
|
||||
...this.roomGroup[index],
|
||||
roomList: [...this.roomGroup[index].roomList, roomInfo]
|
||||
};
|
||||
} else {
|
||||
this.roomGroup.push({
|
||||
division,
|
||||
roomList: [roomInfo]
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getRoomName(roomInfo: RoomInfo): string {
|
||||
if (!roomInfo) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const roomName = this.appChatService.getRoomName(
|
||||
this.organizationTranslate,
|
||||
this.loginRes,
|
||||
roomInfo,
|
||||
this.roomUsersDictionary,
|
||||
this.roomUsersShortDictionary
|
||||
);
|
||||
|
||||
return roomName;
|
||||
}
|
||||
|
||||
getRoomProfileImage(roomInfo: RoomInfo): string {
|
||||
let roomImage = '';
|
||||
if (!!roomInfo) {
|
||||
roomImage = this.appChatService.getRoomProfileImage(
|
||||
roomInfo,
|
||||
this.loginRes,
|
||||
this.roomUsersDictionary,
|
||||
this.roomUsersShortDictionary
|
||||
);
|
||||
}
|
||||
|
||||
return roomImage;
|
||||
}
|
||||
|
||||
isToday(date: any) {
|
||||
return this.dateService.isToday(date);
|
||||
}
|
||||
|
||||
onRoomSearch(obj: { isShowSearch: boolean; searchWord: string }) {
|
||||
const searchRoomList: RoomInfo[] = [];
|
||||
|
||||
this.roomList.forEach((roomInfo) => {
|
||||
if (roomInfo.roomName.indexOf(obj.searchWord) > -1) {
|
||||
searchRoomList.push(roomInfo);
|
||||
} else {
|
||||
const roomUsers = this.appChatService.getRoomUserList(
|
||||
this.loginRes,
|
||||
roomInfo.roomId,
|
||||
this.roomUsersDictionary,
|
||||
this.roomUsersShortDictionary
|
||||
);
|
||||
|
||||
if (
|
||||
roomUsers.existUsers &&
|
||||
roomUsers.users.filter(
|
||||
(userInfo) =>
|
||||
userInfo.name.indexOf(obj.searchWord) > -1 ||
|
||||
userInfo.nameEn.indexOf(obj.searchWord) > -1 ||
|
||||
userInfo.nameCn.indexOf(obj.searchWord) > -1
|
||||
).length > 0
|
||||
) {
|
||||
searchRoomList.push(roomInfo);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.searchRoomList = searchRoomList;
|
||||
}
|
||||
|
||||
getChecked(roomInfo: RoomInfo): boolean {
|
||||
if (this.selectedRoomList.some((info) => info.roomId === roomInfo.roomId)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
onToggleItem(event: { checked: boolean; roomInfo: RoomInfo }): void {
|
||||
this.toggleItem.emit(event);
|
||||
}
|
||||
|
||||
onClickRoomItem(event: MouseEvent, roomInfo: RoomInfo): void {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (!!this.checkable) {
|
||||
this.onToggleItem({
|
||||
checked: !this.getChecked(roomInfo),
|
||||
roomInfo
|
||||
});
|
||||
} else {
|
||||
this.onOpenChatRoom(roomInfo);
|
||||
}
|
||||
}
|
||||
|
||||
onOpenChatRoom(roomInfo: RoomInfo): void {
|
||||
this.ngZone.run(() => {
|
||||
this.router.navigate(
|
||||
[
|
||||
'chat',
|
||||
{
|
||||
outlets: { content: 'chatroom' }
|
||||
}
|
||||
],
|
||||
{
|
||||
queryParams: { roomId: roomInfo.roomId }
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
onToggleAlarm(roomInfo: RoomInfo): void {
|
||||
if (!roomInfo) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.store.dispatch(
|
||||
RoomActions.update({
|
||||
req: {
|
||||
roomId: roomInfo.roomId,
|
||||
roomName:
|
||||
roomInfo.roomName.trim().length === 0
|
||||
? ' '
|
||||
: roomInfo.roomName.trim(),
|
||||
receiveAlarm: !roomInfo.receiveAlarm,
|
||||
syncAll: false
|
||||
} as UpdateRequest
|
||||
})
|
||||
);
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
onDelRoom(roomInfo: RoomInfo): void {
|
||||
if (!roomInfo) {
|
||||
return;
|
||||
}
|
||||
|
||||
const dialogRef = this.dialog.open<
|
||||
ConfirmDialogComponent,
|
||||
ConfirmDialogData,
|
||||
ConfirmDialogResult
|
||||
>(ConfirmDialogComponent, {
|
||||
data: {
|
||||
title: this.i18nService.t('room.dialog.titleExitFromRoom'),
|
||||
html: this.i18nService.t('room.dialog.confirmExitFromRoom')
|
||||
}
|
||||
});
|
||||
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(take(1))
|
||||
.subscribe((result) => {
|
||||
if (!!result && !!result.choice) {
|
||||
this.store.dispatch(
|
||||
RoomActions.del({
|
||||
req: {
|
||||
roomId: roomInfo.roomId
|
||||
} as ExitRequest
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
}
|
||||
31
src/app/sections/chat/components/list.section.strategy.ts
Normal file
31
src/app/sections/chat/components/list.section.strategy.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { Observable, Subject } from 'rxjs';
|
||||
|
||||
import {
|
||||
VirtualScrollStrategy,
|
||||
CdkVirtualScrollViewport
|
||||
} from '@angular/cdk/scrolling';
|
||||
import { distinctUntilChanged } from 'rxjs/operators';
|
||||
|
||||
export class ChatGroupVirtualScrollStrategy implements VirtualScrollStrategy {
|
||||
scrolledIndexChange: Observable<number>;
|
||||
|
||||
private indexSubject = new Subject<number>();
|
||||
private viewport: CdkVirtualScrollViewport | null = null;
|
||||
|
||||
constructor() {
|
||||
this.scrolledIndexChange = this.indexSubject.pipe(distinctUntilChanged());
|
||||
}
|
||||
|
||||
attach(viewport: CdkVirtualScrollViewport): void {
|
||||
this.viewport = viewport;
|
||||
}
|
||||
detach(): void {
|
||||
this.indexSubject.complete();
|
||||
this.viewport = null;
|
||||
}
|
||||
onContentScrolled(): void {}
|
||||
onDataLengthChanged(): void {}
|
||||
onContentRendered(): void {}
|
||||
onRenderedOffsetChanged(): void {}
|
||||
scrollToIndex(index: number, behavior: ScrollBehavior): void {}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<button mat-stroked-button class="icon-button text-accent-darkest">
|
||||
<mat-icon>arrow_downward</mat-icon>
|
||||
</button>
|
||||
<button mat-stroked-button class="icon-button text-accent-darkest">
|
||||
<mat-icon>arrow_upward</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="chat-area">
|
||||
<div class="more-event">
|
||||
<button mat-button aria-label="이모티콘">^이전 대화 보기</button>
|
||||
</div>
|
||||
|
||||
<!-- <div *ngFor="let event of eventList">
|
||||
{{ event.senderSeq }} // {{ loginRes?.userSeq }}
|
||||
{{ event.senderSeq === loginRes?.userSeq }}
|
||||
</div> -->
|
||||
|
||||
<app-chat-message-box
|
||||
*ngFor="let event of eventList"
|
||||
[message]="event"
|
||||
[isMe]="event.senderSeq + '' === loginRes?.userSeq + ''"
|
||||
[senderInfo]="getSenderInfo(event.senderSeq)"
|
||||
[defaultProfileImage]="defaultProfileImage"
|
||||
[profileImageRoot]="versionInfo2Res?.profileRoot"
|
||||
[dateChanged]="getDateSplitter(event)"
|
||||
[unreadCount]="getUnreadCount(event)"
|
||||
></app-chat-message-box>
|
||||
|
||||
<div class="recent-receive-message">
|
||||
스크롤 상단일때 도착한 최근 메시지 표시 영역
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { MessageSectionComponent } from './message.section.component';
|
||||
|
||||
describe('app::sections::group::MessageSectionComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [MessageSectionComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(MessageSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(MessageSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(MessageSectionComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
172
src/app/sections/chat/components/message.section.component.ts
Normal file
172
src/app/sections/chat/components/message.section.component.ts
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
import {
|
||||
Subject,
|
||||
Observable,
|
||||
BehaviorSubject,
|
||||
Subscription,
|
||||
merge
|
||||
} from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import { Info, EventJson, EventType, FileType } from '@ucap/protocol-event';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { Chatting } from '@ucap/ng-store-chat/lib/store/chatting/state';
|
||||
import { ChattingSelector, RoomSelector } from '@ucap/ng-store-chat';
|
||||
import {
|
||||
UserInfo as RoomUserInfo,
|
||||
UserInfoShort as RoomUserInfoShort
|
||||
} from '@ucap/protocol-room';
|
||||
import { LoginResponse } from '@ucap/protocol-authentication';
|
||||
import {
|
||||
LoginSelector,
|
||||
ConfigurationSelector
|
||||
} from '@ucap/ng-store-authentication';
|
||||
import { AppChatService } from '@app/services/app-chat.service';
|
||||
import { VersionInfo2Response } from '@ucap/api-public';
|
||||
import moment from 'moment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sections-chat-message',
|
||||
templateUrl: './message.section.component.html',
|
||||
styleUrls: ['./message.section.component.scss'],
|
||||
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class MessageSectionComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
set roomId(roomId: string) {
|
||||
this._roomId = roomId;
|
||||
|
||||
this.roomIdSubject.next(roomId);
|
||||
|
||||
this.initializeRoomData();
|
||||
}
|
||||
get roomId(): string {
|
||||
return this._roomId;
|
||||
}
|
||||
// tslint:disable-next-line: variable-name
|
||||
_roomId: string;
|
||||
|
||||
versionInfo2Res: VersionInfo2Response;
|
||||
loginRes: LoginResponse;
|
||||
|
||||
roomIdSubject = new Subject<string>();
|
||||
|
||||
chatting$: Observable<Chatting>;
|
||||
roomUsers: RoomUserInfoShort[] = [];
|
||||
// eventList$: Observable<Info<EventJson>[]>;
|
||||
eventList: Info<EventJson>[];
|
||||
|
||||
defaultProfileImage: string;
|
||||
EventType = EventType;
|
||||
FileType = FileType;
|
||||
|
||||
private ngOnDestroySubject = new Subject<boolean>();
|
||||
constructor(
|
||||
private appChatService: AppChatService,
|
||||
private store: Store<any>,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {
|
||||
this.defaultProfileImage = this.appChatService.defaultProfileImage;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(ConfigurationSelector.versionInfo2Response)
|
||||
)
|
||||
.subscribe((versionInfo2Res) => {
|
||||
this.versionInfo2Res = versionInfo2Res;
|
||||
});
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
|
||||
.subscribe((loginRes) => {
|
||||
this.loginRes = loginRes;
|
||||
});
|
||||
}
|
||||
|
||||
initializeRoomData() {
|
||||
this.chatting$ = this.store.pipe(
|
||||
takeUntil(merge(this.ngOnDestroySubject, this.roomIdSubject)),
|
||||
select(ChattingSelector.chatting, this.roomId)
|
||||
);
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(merge(this.ngOnDestroySubject, this.roomIdSubject)),
|
||||
select(ChattingSelector.eventList, this.roomId)
|
||||
)
|
||||
.subscribe((eventList) => {
|
||||
this.eventList = eventList;
|
||||
|
||||
this.changeDetectorRef.detectChanges();
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(merge(this.ngOnDestroySubject, this.roomIdSubject)),
|
||||
select(RoomSelector.roomUserShort, this.roomId)
|
||||
)
|
||||
.subscribe((roomUserShort) => {
|
||||
if (!!roomUserShort) {
|
||||
this.roomUsers = roomUserShort.userInfos;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
/** Sender Info */
|
||||
getSenderInfo(
|
||||
senderSeq: number
|
||||
): RoomUserInfoShort | RoomUserInfo | undefined {
|
||||
if (!!this.roomUsers && this.roomUsers.length) {
|
||||
return this.roomUsers.find(
|
||||
(userInfo) => userInfo.seq + '' === senderSeq + ''
|
||||
);
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/** Date Splitter show check */
|
||||
getDateSplitter(event: Info<EventJson>): boolean {
|
||||
const curIndex = this.eventList.findIndex((v) => v.seq === event.seq);
|
||||
|
||||
if (curIndex === 0) {
|
||||
return true;
|
||||
}
|
||||
if (curIndex > 0) {
|
||||
if (!this.eventList[curIndex]) {
|
||||
return false;
|
||||
}
|
||||
return !moment(this.eventList[curIndex].sendDate).isSame(
|
||||
moment(this.eventList[curIndex - 1].sendDate),
|
||||
'day'
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/** Unread Count calculation */
|
||||
getUnreadCount(message: Info<EventJson>): string | number {
|
||||
const unreadCnt = this.roomUsers
|
||||
.filter(
|
||||
(user) => user.isJoinRoom && user.seq + '' !== message.senderSeq + ''
|
||||
)
|
||||
.filter((user) => user.lastReadEventSeq < message.seq).length;
|
||||
return unreadCnt === 0 ? '' : unreadCnt;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div class="search-container">
|
||||
<div class="searchbox">
|
||||
<form [formGroup]="fgSearch">
|
||||
<mat-form-field floatLabel="never">
|
||||
<mat-label>{{ 'room.searchRoomByName' | ucapI18n }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#searchWordInput
|
||||
type="text"
|
||||
maxlength="20"
|
||||
placeholder="{{ 'room.searchRoomByName' | ucapI18n }}"
|
||||
formControlName="searchInput"
|
||||
[matAutocomplete]="auto"
|
||||
(keydown.enter)="onKeyDownEnter($event, searchWordInput.value)"
|
||||
/>
|
||||
<mat-autocomplete #auto="matAutocomplete">
|
||||
<mat-option
|
||||
*ngFor="let filteredRecommendedWord of filteredRecommendedWordList"
|
||||
[value]="filteredRecommendedWord"
|
||||
>
|
||||
{{ filteredRecommendedWord }}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
<button
|
||||
mat-button
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="searchWordInput.value = ''; onClickCancel()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { SearchSectionComponent } from './search.section.component';
|
||||
|
||||
describe('app::sections::group::SearchSectionComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [SearchSectionComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(SearchSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(SearchSectionComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(SearchSectionComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
147
src/app/sections/chat/components/search.section.component.ts
Normal file
147
src/app/sections/chat/components/search.section.component.ts
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ChangeDetectorRef,
|
||||
ChangeDetectionStrategy,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { FormGroup, FormBuilder } from '@angular/forms';
|
||||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { takeUntil, debounceTime } from 'rxjs/operators';
|
||||
import { Subject, combineLatest } from 'rxjs';
|
||||
|
||||
import { RoomSelector } from '@ucap/ng-store-chat';
|
||||
import { LoginSelector } from '@ucap/ng-store-authentication';
|
||||
|
||||
import { LoginResponse } from '@ucap/protocol-authentication';
|
||||
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sections-chat-search',
|
||||
templateUrl: './search.section.component.html',
|
||||
styleUrls: ['./search.section.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class SearchSectionComponent implements OnInit, OnDestroy {
|
||||
@Output()
|
||||
keyDownEnter = new EventEmitter<{
|
||||
searchWord: string;
|
||||
}>();
|
||||
|
||||
@Output()
|
||||
searchCancel = new EventEmitter<any>();
|
||||
|
||||
loginRes: LoginResponse;
|
||||
|
||||
fgSearch: FormGroup;
|
||||
recommendedWordList: string[];
|
||||
filteredRecommendedWordList: string[];
|
||||
|
||||
@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
|
||||
|
||||
private ngOnDestroySubject: Subject<boolean>;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private formBuilder: FormBuilder,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private logService: LogService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<boolean>();
|
||||
|
||||
this.fgSearch = this.formBuilder.group({
|
||||
searchInput: null
|
||||
});
|
||||
|
||||
this.fgSearch
|
||||
.get('searchInput')
|
||||
.valueChanges.pipe(debounceTime(100))
|
||||
.subscribe((value) => {
|
||||
if (value !== null && value.length > 0) {
|
||||
this.filteredRecommendedWordList = this.recommendedWordList.filter(
|
||||
(v) => {
|
||||
return v.includes(value);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.filteredRecommendedWordList = [];
|
||||
}
|
||||
|
||||
this.changeDetectorRef.detectChanges();
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
|
||||
.subscribe((loginRes) => {
|
||||
this.loginRes = loginRes;
|
||||
});
|
||||
|
||||
combineLatest([
|
||||
this.store.pipe(select(RoomSelector.rooms)),
|
||||
this.store.pipe(select(RoomSelector.roomUsers)),
|
||||
this.store.pipe(select(RoomSelector.roomUsersShort))
|
||||
])
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe(([rooms, roomUsers, roomUsersShort]) => {
|
||||
rooms = rooms || [];
|
||||
roomUsers = roomUsers || [];
|
||||
roomUsersShort = roomUsersShort || [];
|
||||
|
||||
const recommendedWordList = [];
|
||||
for (const r of rooms) {
|
||||
if (!!r.roomName && '' !== r.roomName.trim()) {
|
||||
recommendedWordList.push(r.roomName);
|
||||
}
|
||||
}
|
||||
for (const ru of roomUsers) {
|
||||
for (const u of ru.userInfos) {
|
||||
if (!!this.loginRes && u.seq !== Number(this.loginRes.userSeq)) {
|
||||
if (!!u.name && '' !== u.name.trim() && u.isJoinRoom) {
|
||||
recommendedWordList.push(u.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const ru of roomUsersShort) {
|
||||
for (const u of ru.userInfos) {
|
||||
if (!!this.loginRes && u.seq !== Number(this.loginRes.userSeq)) {
|
||||
if (!!u.name && '' !== u.name.trim() && u.isJoinRoom) {
|
||||
recommendedWordList.push(u.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.recommendedWordList = [
|
||||
...recommendedWordList.filter(
|
||||
(item, index) => recommendedWordList.indexOf(item) === index
|
||||
)
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onKeyDownEnter(event: KeyboardEvent, searchWord: string) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
this.autocomplete.closePanel();
|
||||
|
||||
this.keyDownEnter.emit({ searchWord });
|
||||
}
|
||||
onClickCancel() {
|
||||
this.searchCancel.emit();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<mat-card class="confirm-card mat-elevation-z dialog-creat-chat">
|
||||
<mat-card-header>
|
||||
<mat-card-title
|
||||
cdkDrag
|
||||
cdkDragRootElement=".cdk-overlay-pane"
|
||||
cdkDragHandle
|
||||
>{{ data.title }}</mat-card-title
|
||||
>
|
||||
<button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
|
||||
<i class="mdi mdi-window-close"></i>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div>
|
||||
<mat-horizontal-stepper [linear]="isLinear" #stepper>
|
||||
<mat-step label="Step 1" state="phone">
|
||||
<ucap-local-organization-select-user
|
||||
(changeUserList)="onChangeSelectedUserList($event)"
|
||||
></ucap-local-organization-select-user>
|
||||
<ng-template
|
||||
[ngTemplateOutlet]="selectedUserListTemplate"
|
||||
></ng-template>
|
||||
<div>
|
||||
<button mat-button>취소</button>
|
||||
<button mat-button matStepperNext>
|
||||
완료
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
<mat-step label="Step 2" state="chat">
|
||||
<div>
|
||||
<mat-label>새 그룹 추가</mat-label>
|
||||
<input
|
||||
matInput
|
||||
#searchWordInput
|
||||
placeholder="그룹 이름을 입력해주세요."
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="searchWordInput.value = ''; onClickCancel()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<ng-template
|
||||
[ngTemplateOutlet]="selectedUserListTemplate"
|
||||
></ng-template>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button (click)="onClickComplete(searchWordInput.value)">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
</mat-horizontal-stepper>
|
||||
</div>
|
||||
|
||||
<!-- <mat-card-actions class="button-form flex-row">
|
||||
<button
|
||||
mat-stroked-button
|
||||
(click)="onClickChoice(false)"
|
||||
class="mat-primary"
|
||||
>
|
||||
{{ 'common.messages.no' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
[disabled]="getBtnValid()"
|
||||
(click)="onClickChoice(true)"
|
||||
class="mat-primary"
|
||||
>
|
||||
{{ 'common.messages.yes' | translate }}
|
||||
</button>
|
||||
</mat-card-actions> -->
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<ng-template #selectedUserListTemplate>
|
||||
<div class="list-chip">
|
||||
<mat-chip-list aria-label="User selection">
|
||||
<mat-chip
|
||||
*ngFor="let userInfo of selectedUserList"
|
||||
[selected]="getChipsRemoveYn(userInfo)"
|
||||
(removed)="onClickDeleteUser(userInfo)"
|
||||
>
|
||||
<!-- {{ userInfo | ucapTranslate: 'name' }} -->
|
||||
{{ userInfo.name }}
|
||||
<mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)"
|
||||
>clear</mat-icon
|
||||
>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
<ng-container
|
||||
*ngIf="
|
||||
SelectUserDialogType.NewChat === SelectUserDialogType.NewChat;
|
||||
then newchatcount;
|
||||
else defaultcount
|
||||
"
|
||||
></ng-container>
|
||||
<ng-template #newchatcount>
|
||||
<span [ngClass]="selectedUserList.length >= 300 ? 'text-warn-color' : ''">
|
||||
{{ selectedUserList.length }} / 300
|
||||
<!-- {{ environment.productConfig.CommonSetting.maxChatRoomUser - 1 }} -->
|
||||
<!-- {{ 'common.units.persons' | translate }} -->
|
||||
</span>
|
||||
<span
|
||||
class="text-warn-color"
|
||||
style="float: right;"
|
||||
*ngIf="selectedUserList.length >= 300"
|
||||
>
|
||||
<!-- ({{
|
||||
'chat.errors.maxCountOfRoomMemberWith'
|
||||
| translate
|
||||
: {
|
||||
maxCount:
|
||||
environment.productConfig.CommonSetting.maxChatRoomUser - 1
|
||||
}
|
||||
}}) -->
|
||||
</span>
|
||||
</ng-template>
|
||||
<ng-template #defaultcount>
|
||||
<span>
|
||||
{{ selectedUserList.length }}
|
||||
<!-- {{ 'common.units.persons' | translate }} -->
|
||||
</span>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { CreateChatDialogComponent } from './create-chat.dialog.component';
|
||||
|
||||
describe('ucap::ui-organization::CreateChatDialogComponent', () => {
|
||||
let component: CreateChatDialogComponent;
|
||||
let fixture: ComponentFixture<CreateChatDialogComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [CreateChatDialogComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CreateChatDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Inject,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
|
||||
import {
|
||||
UserInfoSS,
|
||||
UserInfoF,
|
||||
UserInfoDN,
|
||||
DeptInfo
|
||||
} from '@ucap/protocol-query';
|
||||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import {
|
||||
CompanySelector,
|
||||
DepartmentSelector
|
||||
} from '@ucap/ng-store-organization';
|
||||
import { Subject, combineLatest } from 'rxjs';
|
||||
import { AppAuthenticationService } from '@app/services/app-authentication.service';
|
||||
import { SelectUserDialogType } from '@app/types';
|
||||
import { RoomInfo, UserInfo as RoomUserInfo } from '@ucap/protocol-room';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { SelectUserSectionComponent } from '../../select-user.section.component';
|
||||
import { GroupActions } from '@ucap/ng-store-group';
|
||||
import { UserInfoTypes } from '../profile-list-item.component';
|
||||
|
||||
export interface CreateChatDialogData {
|
||||
type?: SelectUserDialogType;
|
||||
title: string;
|
||||
/** CASE :: EditMember */
|
||||
group?: GroupDetailData;
|
||||
/** CASE :: EventForward */
|
||||
ignoreRoom?: RoomInfo[];
|
||||
/** CASE :: EditChatMember */
|
||||
curRoomUser?: (
|
||||
| UserInfo
|
||||
| UserInfoSS
|
||||
| UserInfoF
|
||||
| UserInfoDN
|
||||
| RoomUserInfo
|
||||
)[];
|
||||
}
|
||||
export interface CreateChatDialogResult {}
|
||||
|
||||
@Component({
|
||||
selector: 'ucap-local-organization-create-chat.dialog',
|
||||
templateUrl: './create-chat.dialog.component.html',
|
||||
styleUrls: ['./create-chat.dialog.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class CreateChatDialogComponent implements OnInit, OnDestroy {
|
||||
private ngOnDestroySubject = new Subject<boolean>();
|
||||
isLinear = false;
|
||||
firstFormGroup: FormGroup;
|
||||
secondFormGroup: FormGroup;
|
||||
selectedUserList: UserInfoTypes[] = [];
|
||||
SelectUserDialogType = SelectUserDialogType;
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<
|
||||
CreateChatDialogData,
|
||||
CreateChatDialogResult
|
||||
>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: CreateChatDialogData,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private store: Store<any>,
|
||||
private appAuthenticationService: AppAuthenticationService
|
||||
) {}
|
||||
|
||||
@ViewChild('selectBoxUserComponent', { static: false })
|
||||
selectBoxUserComponent: SelectUserSectionComponent;
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onClickCancel() {}
|
||||
onClickChoice(s: boolean) {}
|
||||
getBtnValid() {}
|
||||
getChipsRemoveYn(userInfo: UserInfo) {}
|
||||
onClickDeleteUser(userInfo: UserInfo) {}
|
||||
|
||||
onChangeSelectedUserList(userList: UserInfoTypes[]) {
|
||||
this.selectedUserList = userList;
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
onClickComplete(groupName: string) {
|
||||
switch (this.data.type) {
|
||||
case SelectUserDialogType.NewGroup:
|
||||
{
|
||||
const userSeqs: string[] = [];
|
||||
this.selectedUserList.map((user) =>
|
||||
userSeqs.push(user.seq.toString())
|
||||
);
|
||||
this.store.dispatch(
|
||||
GroupActions.create({
|
||||
groupName,
|
||||
targetUserSeqs: userSeqs
|
||||
})
|
||||
);
|
||||
}
|
||||
break;
|
||||
case SelectUserDialogType.NewChat:
|
||||
{
|
||||
}
|
||||
break;
|
||||
case SelectUserDialogType.EditChatMember:
|
||||
{
|
||||
}
|
||||
break;
|
||||
case SelectUserDialogType.EditMember:
|
||||
{
|
||||
}
|
||||
break;
|
||||
case SelectUserDialogType.MessageForward:
|
||||
{
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { CreateChatDialogComponent } from './create-chat.dialog.component';
|
||||
|
||||
export const DIALOGS = [CreateChatDialogComponent];
|
||||
9
src/app/sections/group/components/component-ui/index.ts
Normal file
9
src/app/sections/group/components/component-ui/index.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { ProfileListItemComponent } from './profile-list-item.component';
|
||||
import { ProfileComponent } from './profile.component';
|
||||
import { TenantSearchComponent } from './tenant-search.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
ProfileListItemComponent,
|
||||
ProfileComponent,
|
||||
TenantSearchComponent
|
||||
];
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user