Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
550fff3849 | ||
|
|
0fc503db87 |
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -12,5 +12,5 @@
|
|||
},
|
||||
"go.testFlags": ["-v"],
|
||||
"go.testTimeout": "100s",
|
||||
"debug.node.autoAttach": "on"
|
||||
"debug.node.autoAttach": "off"
|
||||
}
|
||||
|
|
|
|||
49
angular.json
49
angular.json
|
|
@ -37,10 +37,6 @@
|
|||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/environments/native/native.ts",
|
||||
"with": "src/environments/native/native.browser.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
|
|
@ -55,28 +51,25 @@
|
|||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "6mb"
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "30kb",
|
||||
"maximumError": "50kb"
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
},
|
||||
"production-renderer": {
|
||||
"production-es5": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/environments/native/native.ts",
|
||||
"with": "src/environments/native/native.renderer.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputPath": "dist/ucap-lg-renderer",
|
||||
"tsConfig": "tsconfig.app.renderer.json",
|
||||
"es5BrowserSupport": true,
|
||||
"outputPath": "dist/ucap-lg-web-es5",
|
||||
"tsConfig": "tsconfig.app.es5.json",
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
|
|
@ -89,12 +82,12 @@
|
|||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "6mb"
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "30kb",
|
||||
"maximumError": "50kb"
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -103,26 +96,18 @@
|
|||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.hmr.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/environments/native/native.ts",
|
||||
"with": "src/environments/native/native.browser.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"hmr-renderer": {
|
||||
"hmr-es5": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.hmr.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/environments/native/native.ts",
|
||||
"with": "src/environments/native/native.renderer.ts"
|
||||
}
|
||||
],
|
||||
"es5BrowserSupport": false,
|
||||
"tsConfig": "tsconfig.app.renderer.json"
|
||||
"es5BrowserSupport": true,
|
||||
"tsConfig": "tsconfig.app.es5.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -136,16 +121,16 @@
|
|||
"production": {
|
||||
"browserTarget": "ucap-lg-web:build:production"
|
||||
},
|
||||
"production-renderer": {
|
||||
"browserTarget": "ucap-lg-web:build:production-renderer"
|
||||
"production-5": {
|
||||
"browserTarget": "ucap-lg-web:build:production-es5"
|
||||
},
|
||||
"hmr": {
|
||||
"hmr": true,
|
||||
"browserTarget": "ucap-lg-web:build:hmr"
|
||||
},
|
||||
"hmr-renderer": {
|
||||
"hmr-es5": {
|
||||
"hmr": true,
|
||||
"browserTarget": "ucap-lg-web:build:hmr-renderer"
|
||||
"browserTarget": "ucap-lg-web:build:hmr-es5"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,24 +1,12 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = (config, options) => {
|
||||
const PRODUCTION =
|
||||
!!process.env.NODE_ENV && 'production' === process.env.NODE_ENV;
|
||||
const RENDERER =
|
||||
!!process.env.NATIVE_ENV && 'renderer' === process.env.NATIVE_ENV;
|
||||
const PRODUCTION = process.env.NODE_ENV === 'production';
|
||||
|
||||
if (RENDERER) {
|
||||
config.target = 'electron-renderer';
|
||||
} else {
|
||||
config.target = 'web';
|
||||
config.node = {
|
||||
global: true,
|
||||
fs: 'empty'
|
||||
};
|
||||
}
|
||||
|
||||
config.resolve.alias = {
|
||||
...config.resolve.alias,
|
||||
'@ucap/lg-scss': path.resolve(__dirname, '..', 'src/assets/scss')
|
||||
config.target = 'web';
|
||||
config.node = {
|
||||
global: true,
|
||||
fs: 'empty'
|
||||
};
|
||||
|
||||
return config;
|
||||
|
|
|
|||
5663
package-lock.json
generated
5663
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
145
package.json
145
package.json
|
|
@ -5,65 +5,52 @@
|
|||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"start:hmr": "ng serve --configuration hmr",
|
||||
"start:hmr-renderer": "ng serve --configuration hmr-renderer",
|
||||
"start:hmr-es5": "ng serve --configuration hmr-es5",
|
||||
"build": "ng build",
|
||||
"build:production": "ng build --prod",
|
||||
"build:production-renderer": "cross-env NATIVE_ENV=renderer ng build --prod --configuration production-renderer --base-href ./",
|
||||
"build:production-es5": "ng build --configuration production-es5",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^9.1.11",
|
||||
"@angular/cdk": "^9.2.4",
|
||||
"@angular/common": "^9.1.11",
|
||||
"@angular/compiler": "^9.1.11",
|
||||
"@angular/core": "^9.1.11",
|
||||
"@angular/flex-layout": "^9.0.0-beta.31",
|
||||
"@angular/forms": "^9.1.11",
|
||||
"@angular/material": "^9.2.4",
|
||||
"@angular/material-moment-adapter": "^9.2.4",
|
||||
"@angular/platform-browser": "^9.1.11",
|
||||
"@angular/platform-browser-dynamic": "^9.1.11",
|
||||
"@angular/router": "^9.1.11",
|
||||
"@ngrx/effects": "^9.2.0",
|
||||
"@ngrx/entity": "^9.2.0",
|
||||
"@ngrx/router-store": "^9.2.0",
|
||||
"@ngrx/store": "^9.2.0",
|
||||
"@ucap/api": "~0.0.5",
|
||||
"@ucap/api-common": "~0.0.12",
|
||||
"@ucap/api-contact": "~0.0.5",
|
||||
"@ucap/api-external": "~0.0.8",
|
||||
"@ucap/api-message": "~0.0.7",
|
||||
"@ucap/api-prompt": "~0.0.6",
|
||||
"@ucap/api-public": "~0.0.6",
|
||||
"@ucap/api-webex": "~0.0.2",
|
||||
"@ucap/core": "~0.0.15",
|
||||
"@ucap/domain-authentication": "~0.0.4",
|
||||
"@ucap/domain-authorization": "~0.0.3",
|
||||
"@ucap/domain-call": "~0.0.4",
|
||||
"@ucap/domain-chat": "~0.0.3",
|
||||
"@ucap/domain-common": "~0.0.1",
|
||||
"@ucap/domain-group": "~0.0.2",
|
||||
"@ucap/domain-message": "~0.0.1",
|
||||
"@ucap/domain-organization": "~0.0.1",
|
||||
"@ucap/domain-status": "~0.0.1",
|
||||
"@ucap/electron-native": "~0.0.19",
|
||||
"@ucap/i18n": "~0.0.2",
|
||||
"@ucap/logger": "~0.0.14",
|
||||
"@ucap/native": "~0.0.27",
|
||||
"@angular/animations": "~9.0.6",
|
||||
"@angular/cdk": "^9.1.3",
|
||||
"@angular/common": "~9.0.6",
|
||||
"@angular/compiler": "~9.0.6",
|
||||
"@angular/core": "~9.0.6",
|
||||
"@angular/flex-layout": "^9.0.0-beta.29",
|
||||
"@angular/forms": "~9.0.6",
|
||||
"@angular/material": "^9.1.3",
|
||||
"@angular/material-moment-adapter": "^9.1.3",
|
||||
"@angular/platform-browser": "~9.0.6",
|
||||
"@angular/platform-browser-dynamic": "~9.0.6",
|
||||
"@angular/router": "~9.0.6",
|
||||
"@ngrx/effects": "^9.0.0",
|
||||
"@ngrx/entity": "^9.0.0",
|
||||
"@ngrx/router-store": "^9.0.0",
|
||||
"@ngrx/store": "^9.0.0",
|
||||
"@ucap/api": "~0.0.2",
|
||||
"@ucap/api-common": "~0.0.3",
|
||||
"@ucap/api-external": "~0.0.5",
|
||||
"@ucap/api-message": "~0.0.3",
|
||||
"@ucap/api-prompt": "~0.0.3",
|
||||
"@ucap/api-public": "~0.0.4",
|
||||
"@ucap/core": "~0.0.7",
|
||||
"@ucap/logger": "~0.0.12",
|
||||
"@ucap/native": "~0.0.6",
|
||||
"@ucap/native-browser": "~0.0.5",
|
||||
"@ucap/ng-api-common": "~0.0.1",
|
||||
"@ucap/ng-api-external": "~0.0.1",
|
||||
"@ucap/ng-api-message": "~0.0.1",
|
||||
"@ucap/ng-api-prompt": "~0.0.1",
|
||||
"@ucap/ng-api-public": "~0.0.1",
|
||||
"@ucap/ng-api-webex": "~0.0.1",
|
||||
"@ucap/ng-api-contact": "~0.0.2",
|
||||
"@ucap/ng-core": "~0.0.9",
|
||||
"@ucap/ng-core": "~0.0.1",
|
||||
"@ucap/ng-logger": "~0.0.2",
|
||||
"@ucap/ng-i18n": "~0.0.8",
|
||||
"@ucap/ng-native": "~0.0.12",
|
||||
"@ucap/ng-i18n": "~0.0.6",
|
||||
"@ucap/ng-native": "~0.0.1",
|
||||
"@ucap/ng-native-browser": "~0.0.1",
|
||||
"@ucap/ng-pi": "~0.0.1",
|
||||
"@ucap/ng-protocol": "~0.0.3",
|
||||
"@ucap/ng-protocol-authentication": "~0.0.3",
|
||||
|
|
@ -81,39 +68,34 @@
|
|||
"@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.17",
|
||||
"@ucap/ng-store-chat": "~0.0.74",
|
||||
"@ucap/ng-store-group": "~0.0.25",
|
||||
"@ucap/ng-store-organization": "~0.0.23",
|
||||
"@ucap/ng-store-call": "~0.0.7",
|
||||
"@ucap/ng-store-authentication": "~0.0.10",
|
||||
"@ucap/ng-store-chat": "~0.0.6",
|
||||
"@ucap/ng-store-group": "~0.0.7",
|
||||
"@ucap/ng-store-organization": "~0.0.4",
|
||||
"@ucap/ng-web-socket": "~0.0.2",
|
||||
"@ucap/ng-web-storage": "~0.0.3",
|
||||
"@ucap/ng-ui": "~0.0.108",
|
||||
"@ucap/ng-ui-organization": "~0.0.222",
|
||||
"@ucap/ng-ui-authentication": "~0.0.32",
|
||||
"@ucap/ng-ui-group": "~0.0.87",
|
||||
"@ucap/ng-ui-chat": "~0.0.80",
|
||||
"@ucap/ng-ui-call": "~0.0.15",
|
||||
"@ucap/ng-ui-material": "~0.0.4",
|
||||
"@ucap/ng-ui": "~0.0.7",
|
||||
"@ucap/ng-ui-organization": "~0.0.15",
|
||||
"@ucap/ng-ui-authentication": "~0.0.19",
|
||||
"@ucap/ng-ui-group": "~0.0.28",
|
||||
"@ucap/ng-ui-skin-default": "~0.0.1",
|
||||
"@ucap/pi": "~0.0.9",
|
||||
"@ucap/protocol": "~0.0.20",
|
||||
"@ucap/protocol-authentication": "~0.0.7",
|
||||
"@ucap/protocol-buddy": "~0.0.6",
|
||||
"@ucap/protocol-event": "~0.0.11",
|
||||
"@ucap/protocol-file": "~0.0.7",
|
||||
"@ucap/protocol-group": "~0.0.6",
|
||||
"@ucap/protocol-info": "~0.0.10",
|
||||
"@ucap/protocol-inner": "~0.0.5",
|
||||
"@ucap/protocol-option": "~0.0.9",
|
||||
"@ucap/protocol-ping": "~0.0.7",
|
||||
"@ucap/protocol-query": "~0.0.8",
|
||||
"@ucap/protocol-room": "~0.0.9",
|
||||
"@ucap/protocol-service": "~0.0.5",
|
||||
"@ucap/protocol-status": "~0.0.6",
|
||||
"@ucap/protocol-sync": "~0.0.8",
|
||||
"@ucap/pi": "~0.0.5",
|
||||
"@ucap/protocol": "~0.0.17",
|
||||
"@ucap/protocol-authentication": "~0.0.5",
|
||||
"@ucap/protocol-buddy": "~0.0.5",
|
||||
"@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-inner": "~0.0.4",
|
||||
"@ucap/protocol-option": "~0.0.7",
|
||||
"@ucap/protocol-ping": "~0.0.6",
|
||||
"@ucap/protocol-query": "~0.0.5",
|
||||
"@ucap/protocol-room": "~0.0.5",
|
||||
"@ucap/protocol-service": "~0.0.4",
|
||||
"@ucap/protocol-status": "~0.0.5",
|
||||
"@ucap/protocol-sync": "~0.0.4",
|
||||
"@ucap/protocol-umg": "~0.0.5",
|
||||
"@ucap/ui-scss": "~0.0.5",
|
||||
"@ucap/web-socket": "~0.0.10",
|
||||
"@ucap/web-storage": "~0.0.9",
|
||||
"autolinker": "^3.13.0",
|
||||
|
|
@ -124,13 +106,13 @@
|
|||
"file-type": "^14.1.4",
|
||||
"i18next": "^19.3.3",
|
||||
"i18next-browser-languagedetector": "^4.0.2",
|
||||
"i18next-fs-backend": "^1.0.6",
|
||||
"i18next-node-fs-backend": "^2.1.3",
|
||||
"i18next-xhr-backend": "^3.2.2",
|
||||
"libphonenumber-js": "^1.7.47",
|
||||
"memoize-one": "^5.1.1",
|
||||
"moment": "^2.24.0",
|
||||
"moment-timezone": "^0.5.28",
|
||||
"ngx-perfect-scrollbar": "^9.0.0",
|
||||
"ngx-virtual-scroller": "^4.0.3",
|
||||
"pino": "^6.0.0",
|
||||
"queueing-subject": "^0.3.4",
|
||||
"rxjs": "~6.5.4",
|
||||
|
|
@ -141,16 +123,16 @@
|
|||
"devDependencies": {
|
||||
"@angular-builders/custom-webpack": "^9.0.0",
|
||||
"@angular-devkit/build-angular": "~0.900.6",
|
||||
"@angular/cli": "^9.1.9",
|
||||
"@angular/compiler-cli": "^9.1.11",
|
||||
"@angular/language-service": "^9.1.11",
|
||||
"@angular/cli": "~9.0.6",
|
||||
"@angular/compiler-cli": "~9.0.6",
|
||||
"@angular/language-service": "~9.0.6",
|
||||
"@angularclass/hmr": "^2.1.3",
|
||||
"@ngrx/store-devtools": "^9.0.0",
|
||||
"@types/i18next-node-fs-backend": "^2.1.0",
|
||||
"@types/jasmine": "~3.5.0",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^5.1.2",
|
||||
"cross-env": "^7.0.2",
|
||||
"fs-extra": "^9.0.0",
|
||||
"jasmine-core": "~3.5.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
|
|
@ -163,7 +145,6 @@
|
|||
"ts-node": "~8.3.0",
|
||||
"tslint": "~5.18.0",
|
||||
"typescript": "~3.7.5",
|
||||
"webpack-bundle-analyzer": "^3.7.0",
|
||||
"webpack-node-externals": "^1.7.2"
|
||||
"webpack-bundle-analyzer": "^3.7.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,16 +12,9 @@ import { AppAuthenticationGuard } from './guards/app-authentication.guard';
|
|||
import { AppSessionResolver } from './resolvers/app-session.resolver';
|
||||
|
||||
import { AppAuthenticationService } from './services/app-authentication.service';
|
||||
import { AppNotificationService } from './services/app-notification.service';
|
||||
import { AppNativeService } from './services/app-native.service';
|
||||
import { AppService } from './services/app.service';
|
||||
import { AppCallService } from './services/app-call.service';
|
||||
import { AppChatService } from './services/app-chat.service';
|
||||
import { AppFileService } from './services/app-file.service';
|
||||
import { AppGroupService } from './services/app-group.service';
|
||||
import { AppAccountService } from './services/app-account.service';
|
||||
import { AppUiService } from './services/app-ui.service';
|
||||
import { AppOrganizationService } from './services/app-organization.service';
|
||||
|
||||
const GUARDS = [AppAuthenticationGuard];
|
||||
const RESOLVERS = [AppSessionResolver];
|
||||
|
|
@ -29,14 +22,7 @@ const SERVICES = [
|
|||
AppService,
|
||||
AppAuthenticationService,
|
||||
AppNativeService,
|
||||
AppFileService,
|
||||
AppCallService,
|
||||
AppChatService,
|
||||
AppNotificationService,
|
||||
AppOrganizationService,
|
||||
AppGroupService,
|
||||
AppAccountService,
|
||||
AppUiService
|
||||
AppChatService
|
||||
];
|
||||
|
||||
const axiosFactory = () => {
|
||||
|
|
@ -47,9 +33,6 @@ const axiosFactory = () => {
|
|||
return i;
|
||||
};
|
||||
|
||||
const nativeServiceFactory = (nativeService: any) =>
|
||||
new environment.productConfig.nativeServiceClass(nativeService);
|
||||
|
||||
const appInit = (appService: AppService) => {
|
||||
return () => appService.initialize();
|
||||
};
|
||||
|
|
@ -66,7 +49,7 @@ const appInit = (appService: AppService) => {
|
|||
},
|
||||
{
|
||||
provide: UCAP_NATIVE_SERVICE,
|
||||
useFactory: nativeServiceFactory,
|
||||
useClass: environment.productConfig.nativeServiceClass,
|
||||
deps: [AXIOS_INSTANCE],
|
||||
multi: false
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,12 +6,11 @@ import { NoNaviLayoutComponent } from '@app/layouts/components/no-navi.layout.co
|
|||
|
||||
import { AppAuthenticationGuard } from '@app/guards/app-authentication.guard';
|
||||
import { AppSessionResolver } from './resolvers/app-session.resolver';
|
||||
import { NavigationType } from './types';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: `/${NavigationType.Group}/(content:index)`,
|
||||
redirectTo: '/group/(content:index)',
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
|
|
@ -39,35 +38,35 @@ const routes: Routes = [
|
|||
},
|
||||
children: [
|
||||
{
|
||||
path: NavigationType.Organization,
|
||||
path: 'organization',
|
||||
loadChildren: () =>
|
||||
import('./pages/organization/organization.page.module').then(
|
||||
(m) => m.AppOrganizationPageModule
|
||||
)
|
||||
},
|
||||
{
|
||||
path: NavigationType.Group,
|
||||
path: 'group',
|
||||
loadChildren: () =>
|
||||
import('./pages/group/group.page.module').then(
|
||||
(m) => m.AppGroupPageModule
|
||||
)
|
||||
},
|
||||
{
|
||||
path: NavigationType.Chat,
|
||||
path: 'chat',
|
||||
loadChildren: () =>
|
||||
import('./pages/chat/chat.page.module').then(
|
||||
(m) => m.AppChatPageModule
|
||||
)
|
||||
},
|
||||
{
|
||||
path: NavigationType.Call,
|
||||
path: 'call',
|
||||
loadChildren: () =>
|
||||
import('./pages/call/call.page.module').then(
|
||||
(m) => m.AppCallPageModule
|
||||
)
|
||||
},
|
||||
{
|
||||
path: NavigationType.Message,
|
||||
path: 'message',
|
||||
loadChildren: () =>
|
||||
import('./pages/message/message.page.module').then(
|
||||
(m) => m.AppMessagePageModule
|
||||
|
|
@ -82,9 +81,7 @@ const routes: Routes = [
|
|||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(routes, { useHash: true, enableTracing: false })
|
||||
],
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,10 @@
|
|||
import { fromEvent, interval, Subject } from 'rxjs';
|
||||
import { debounce, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
AfterViewInit,
|
||||
Renderer2,
|
||||
Inject
|
||||
} from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import { NativeService } from '@ucap/native';
|
||||
|
||||
import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
|
||||
|
||||
import { AppActions } from '@app/store/actions';
|
||||
|
||||
import { AppAuthenticationService } from './services/app-authentication.service';
|
||||
import { AnimationBuilder, style, animate } from '@angular/animations';
|
||||
import { fromEvent, interval, Subscription } from 'rxjs';
|
||||
import { debounce } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
|
|
@ -29,40 +12,20 @@ import { AnimationBuilder, style, animate } from '@angular/animations';
|
|||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent implements OnInit, OnDestroy {
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
showTopbar = true;
|
||||
showFooter = false;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private renderer2: Renderer2,
|
||||
private store: Store<any>,
|
||||
private appAuthenticationService: AppAuthenticationService,
|
||||
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
|
||||
@Inject(DOCUMENT) private _document: any,
|
||||
private _animationBuilder: AnimationBuilder
|
||||
) {
|
||||
fromEvent(window, 'resize')
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
debounce(() => interval(100))
|
||||
)
|
||||
private resizeWindowSubscription: Subscription;
|
||||
|
||||
constructor(private store: Store<any>) {
|
||||
this.resizeWindowSubscription = fromEvent(window, 'resize')
|
||||
.pipe(debounce(() => interval(100)))
|
||||
.subscribe((event: any) => {
|
||||
this.dispatchWindowSize({
|
||||
width: event.target.innerWidth,
|
||||
height: event.target.innerHeight
|
||||
});
|
||||
});
|
||||
|
||||
fromEvent(window, 'unload')
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((event: any) => {
|
||||
this.nativeService.app_postDestroy();
|
||||
});
|
||||
|
||||
// fromEvent(window, 'beforeunload')
|
||||
// .pipe(takeUntil(this.ngOnDestroySubject))
|
||||
// .subscribe((event: any) => {
|
||||
// this.appAuthenticationService.logout();
|
||||
// });
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
|
@ -70,59 +33,11 @@ export class AppComponent implements OnInit, OnDestroy {
|
|||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
});
|
||||
this.nativeService.app_postInit().then((info) => {
|
||||
if (!info) {
|
||||
return;
|
||||
}
|
||||
if (!!info.initUrl) {
|
||||
this.router.navigateByUrl(info.initUrl);
|
||||
}
|
||||
});
|
||||
|
||||
const splash = this._document.body.querySelector('#ucap-lg-web-splash');
|
||||
const player = this._animationBuilder
|
||||
.build([
|
||||
style({ opacity: '1' }),
|
||||
animate(
|
||||
'400ms ease',
|
||||
style({
|
||||
opacity: '0',
|
||||
zIndex: '-10'
|
||||
})
|
||||
)
|
||||
])
|
||||
.create(splash);
|
||||
|
||||
setTimeout(() => {
|
||||
player.play();
|
||||
}, 0);
|
||||
|
||||
// const preloader = this.renderer2.selectRootElement(
|
||||
// '#ucap-lg-web-preloader'
|
||||
// );
|
||||
// const fadeEffect = setInterval(() => {
|
||||
// if (!preloader.style.opacity) {
|
||||
// this.renderer2.setStyle(preloader, 'opacity', 1);
|
||||
// }
|
||||
// if (preloader.style.opacity > 0) {
|
||||
// this.renderer2.setStyle(
|
||||
// preloader,
|
||||
// 'opacity',
|
||||
// preloader.style.opacity - 0.1
|
||||
// );
|
||||
// } else {
|
||||
// this.renderer2.setStyle(preloader, 'display', 'none');
|
||||
// clearInterval(fadeEffect);
|
||||
// }
|
||||
// }, 200);
|
||||
|
||||
// this.renderer2.setStyle(preloader, 'display', 'none');
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
if (!!this.resizeWindowSubscription) {
|
||||
this.resizeWindowSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,10 +15,8 @@ import { LoggerModule } from '@ucap/ng-logger';
|
|||
import { CommonApiModule } from '@ucap/ng-api-common';
|
||||
import { PublicApiModule } from '@ucap/ng-api-public';
|
||||
import { ExternalApiModule } from '@ucap/ng-api-external';
|
||||
import { ContactApiModule } from '@ucap/ng-api-contact';
|
||||
import { MessageApiModule } from '@ucap/ng-api-message';
|
||||
import { PromptApiModule } from '@ucap/ng-api-prompt';
|
||||
import { WebexApiModule } from '@ucap/ng-api-webex';
|
||||
|
||||
import { PiModule } from '@ucap/ng-pi';
|
||||
|
||||
|
|
@ -48,7 +46,6 @@ import { OrganizationStoreModule } from '@ucap/ng-store-organization';
|
|||
import { AuthenticationStoreModule } from '@ucap/ng-store-authentication';
|
||||
import { GroupStoreModule } from '@ucap/ng-store-group';
|
||||
import { ChatStoreModule } from '@ucap/ng-store-chat';
|
||||
import { CallStoreModule } from '@ucap/ng-store-call';
|
||||
|
||||
import { OrganizationUiModule } from '@ucap/ng-ui-organization';
|
||||
|
||||
|
|
@ -62,10 +59,7 @@ import { effects } from '@app/store/effects';
|
|||
import { ROOT_REDUCERS } from '@app/store/reducers';
|
||||
import { metaReducers } from '@app/store/state';
|
||||
|
||||
import { AppAccountDialogModule } from '@app/dialogs/account/account.dialog.module';
|
||||
|
||||
import { environment } from '@environments';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
|
|
@ -75,6 +69,50 @@ import { MatDialogModule } from '@angular/material/dialog';
|
|||
|
||||
FlexLayoutModule,
|
||||
|
||||
LoggerModule.forRoot({}),
|
||||
|
||||
CommonApiModule.forRoot(environment.commonApiModuleConfig),
|
||||
PublicApiModule.forRoot(environment.publicApiModuleConfig),
|
||||
ExternalApiModule.forRoot(environment.externalApiModuleConfig),
|
||||
MessageApiModule.forRoot(environment.messageApiModuleConfig),
|
||||
PromptApiModule.forRoot(environment.promptApiModuleConfig),
|
||||
|
||||
PiModule.forRoot(environment.piModuleConfig),
|
||||
|
||||
ProtocolModule.forRoot(environment.protocolModuleConfig),
|
||||
AuthenticationProtocolModule.forRoot({}),
|
||||
BuddyProtocolModule.forRoot({}),
|
||||
EventProtocolModule.forRoot({}),
|
||||
FileProtocolModule.forRoot({}),
|
||||
GroupProtocolModule.forRoot({}),
|
||||
InfoProtocolModule.forRoot({}),
|
||||
InnerProtocolModule.forRoot({}),
|
||||
OptionProtocolModule.forRoot({}),
|
||||
PingProtocolModule.forRoot(environment.pingProtocolModuleConfig),
|
||||
QueryProtocolModule.forRoot({}),
|
||||
RoomProtocolModule.forRoot({}),
|
||||
ServiceProtocolModule.forRoot({}),
|
||||
StatusProtocolModule.forRoot({}),
|
||||
SyncProtocolModule.forRoot({}),
|
||||
UmgProtocolModule.forRoot({}),
|
||||
|
||||
WebSocketModule.forRoot(environment.webSocketModuleConfig),
|
||||
WebStorageModule.forRoot({}),
|
||||
|
||||
I18nModule.forRoot({}),
|
||||
|
||||
OrganizationStoreModule.forRoot({}),
|
||||
AuthenticationStoreModule.forRoot({}),
|
||||
GroupStoreModule.forRoot({ useMyDeptGroup: true, fixedGroupSeqs: [] }),
|
||||
ChatStoreModule.forRoot({}),
|
||||
|
||||
OrganizationUiModule.forRoot({}),
|
||||
|
||||
AppProviderModule,
|
||||
AppRoutingModule,
|
||||
|
||||
AppLayoutsModule,
|
||||
|
||||
/**
|
||||
* StoreModule.forRoot is imported once in the root module, accepting a reducer
|
||||
* function or object map of reducer functions. If passed an object of
|
||||
|
|
@ -123,66 +161,7 @@ import { MatDialogModule } from '@angular/material/dialog';
|
|||
*
|
||||
* See: https://ngrx.io/guide/effects#registering-root-effects
|
||||
*/
|
||||
EffectsModule.forRoot([...effects]),
|
||||
|
||||
MatDialogModule,
|
||||
|
||||
LoggerModule.forRoot({}),
|
||||
|
||||
CommonApiModule.forRoot(environment.commonApiModuleConfig),
|
||||
PublicApiModule.forRoot(environment.publicApiModuleConfig),
|
||||
ExternalApiModule.forRoot(environment.externalApiModuleConfig),
|
||||
ContactApiModule.forRoot(environment.contactApiModuleConfig),
|
||||
MessageApiModule.forRoot(environment.messageApiModuleConfig),
|
||||
PromptApiModule.forRoot(environment.promptApiModuleConfig),
|
||||
WebexApiModule.forRoot(environment.webexApiModuleConfig),
|
||||
|
||||
PiModule.forRoot(environment.piModuleConfig),
|
||||
|
||||
ProtocolModule.forRoot(environment.protocolModuleConfig),
|
||||
AuthenticationProtocolModule.forRoot({}),
|
||||
BuddyProtocolModule.forRoot({}),
|
||||
EventProtocolModule.forRoot({}),
|
||||
FileProtocolModule.forRoot({}),
|
||||
GroupProtocolModule.forRoot({}),
|
||||
InfoProtocolModule.forRoot({}),
|
||||
InnerProtocolModule.forRoot({}),
|
||||
OptionProtocolModule.forRoot({}),
|
||||
PingProtocolModule.forRoot(environment.pingProtocolModuleConfig),
|
||||
QueryProtocolModule.forRoot({}),
|
||||
RoomProtocolModule.forRoot({}),
|
||||
ServiceProtocolModule.forRoot({}),
|
||||
StatusProtocolModule.forRoot({}),
|
||||
SyncProtocolModule.forRoot({}),
|
||||
UmgProtocolModule.forRoot({}),
|
||||
|
||||
WebSocketModule.forRoot(environment.webSocketModuleConfig),
|
||||
WebStorageModule.forRoot({}),
|
||||
|
||||
I18nModule.forRoot({}),
|
||||
|
||||
OrganizationStoreModule.forRoot({}),
|
||||
AuthenticationStoreModule.forRoot({}),
|
||||
GroupStoreModule.forRoot({ useMyDeptGroup: true, fixedGroupSeqs: [] }),
|
||||
ChatStoreModule.forRoot({
|
||||
eventRequestInitCount:
|
||||
environment.productConfig.chat.eventRequestInitCount,
|
||||
eventRequestDefaultCount:
|
||||
environment.productConfig.chat.eventRequestDefaultCount
|
||||
}),
|
||||
CallStoreModule.forRoot({
|
||||
historyRequestDefaultCount:
|
||||
environment.productConfig.call.historyRequestDefaultCount
|
||||
}),
|
||||
|
||||
OrganizationUiModule.forRoot({}),
|
||||
|
||||
AppProviderModule,
|
||||
AppRoutingModule,
|
||||
|
||||
AppLayoutsModule,
|
||||
|
||||
AppAccountDialogModule
|
||||
EffectsModule.forRoot([...effects])
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ $typography: mat-typography-config(
|
|||
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
||||
// hue. Available color palettes: https://material.io/design/color/
|
||||
$lgRed-app-primary: mat-palette($ucap-color-primary, 600);
|
||||
$lgRed-app-accent: mat-palette($ucap-color-accent, 700);
|
||||
$lgRed-app-primary: mat-palette($lg-red);
|
||||
$lgRed-app-accent: mat-palette($lg-red, A200, A100, A400);
|
||||
|
||||
// The warn palette is optional (defaults to red).
|
||||
$lgRed-app-warn: mat-palette($ucap-color-warn, 500);
|
||||
$lgRed-app-warn: mat-palette($lg-red);
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
$lgRed-app-theme: mat-light-theme(
|
||||
|
|
@ -45,11 +45,3 @@ $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);
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
|
||||
import { I18nModule } from '@ucap/ng-i18n';
|
||||
|
||||
import { UiscrollingModule } from '@ucap/ng-ui/scrolling';
|
||||
|
||||
import { AppLayoutsModule } from '@app/layouts/layouts.module';
|
||||
import { AppAccountSectionModule } from '@app/sections/account/account.section.module';
|
||||
import { AppAuthenticationModule } from '@app/ucap/authentication/authentication.module';
|
||||
import { COMPONENTS } from './components';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule,
|
||||
MatTabsModule,
|
||||
|
||||
I18nModule,
|
||||
|
||||
UiscrollingModule,
|
||||
|
||||
AppAuthenticationModule,
|
||||
|
||||
AppLayoutsModule,
|
||||
AppAccountSectionModule
|
||||
],
|
||||
exports: [...COMPONENTS],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: [...COMPONENTS]
|
||||
})
|
||||
export class AppAccountDialogModule {}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { SettingsDialogComponent } from './settings.dialog.component';
|
||||
|
||||
export const COMPONENTS = [SettingsDialogComponent];
|
||||
|
|
@ -1,377 +0,0 @@
|
|||
<div class="dialog-container">
|
||||
<app-layouts-default-dialog
|
||||
[disableClose]="false"
|
||||
(closed)="onClosed($event)"
|
||||
class="create-dialog-container"
|
||||
>
|
||||
<div appLayoutsDefaultDialog="header">
|
||||
{{ 'organization:settings.label' | ucapI18n }}
|
||||
</div>
|
||||
<div class="dialog-body" appLayoutsDefaultDialog="body">
|
||||
<mat-tab-group mat-stretch-tabs>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<p>{{ 'organization:settings.sub.general' | ucapI18n }}</p>
|
||||
</ng-template>
|
||||
<div class="default-settings-area">
|
||||
<!-- 기본설정 -->
|
||||
<div
|
||||
*ngIf="'electron' === platform"
|
||||
class="messenger-settings-area login-setting-box"
|
||||
>
|
||||
<div class="title-settings-subject">
|
||||
<span>{{
|
||||
'authentication:login.settings.login' | ucapI18n
|
||||
}}</span>
|
||||
<button mat-icon-button color="accent" class="btn-subject-info">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<ul>
|
||||
<li>
|
||||
<mat-checkbox
|
||||
[value]="settings.general.autoLaunch"
|
||||
(change)="onChangeForAutoStartOnBoot($event)"
|
||||
>
|
||||
{{
|
||||
'authentication:login.settings.autoStartOnBoot'
|
||||
| ucapI18n
|
||||
}}
|
||||
</mat-checkbox>
|
||||
</li>
|
||||
<li>
|
||||
<mat-checkbox
|
||||
[value]="settings.general.autoLogin"
|
||||
(change)="onChangeForAutoLogin($event)"
|
||||
>
|
||||
{{ 'authentication:login.settings.autoLogin' | ucapI18n }}
|
||||
</mat-checkbox>
|
||||
</li>
|
||||
<li>
|
||||
<mat-checkbox
|
||||
[value]="settings.general.startupHideWindow"
|
||||
(change)="onChangeForAutoHide($event)"
|
||||
>
|
||||
{{ 'authentication:login.settings.autoHide' | ucapI18n }}
|
||||
</mat-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messenger-settings-area language-setting-box">
|
||||
<div class="title-settings-subject">
|
||||
<span>{{
|
||||
'organization:settings.language.messenger' | ucapI18n
|
||||
}}</span>
|
||||
<button mat-icon-button color="accent" class="btn-subject-info">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<mat-form-field
|
||||
color="accent"
|
||||
appearance="standard"
|
||||
class="setting-select-obj ucap-mat-input-container"
|
||||
>
|
||||
<mat-select
|
||||
[value]="settings.general.locale"
|
||||
(selectionChange)="onSelectionChangeLanguage($event)"
|
||||
>
|
||||
<mat-option
|
||||
*ngFor="let languageCode of supportedLanguages"
|
||||
[value]="languageCode"
|
||||
>
|
||||
{{ 'locale:languages.' + languageCode | ucapI18n }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messenger-settings-area language-setting-box">
|
||||
<div class="title-settings-subject">
|
||||
<span>{{
|
||||
'organization:settings.language.hr' | ucapI18n
|
||||
}}</span>
|
||||
<button mat-icon-button color="accent" class="btn-subject-info">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<mat-form-field
|
||||
color="accent"
|
||||
appearance="standard"
|
||||
class="setting-select-obj ucap-mat-input-container"
|
||||
>
|
||||
<mat-select
|
||||
[value]="settings.general.hrInfoLocale"
|
||||
(selectionChange)="onSelectionChangeHrLanguage($event)"
|
||||
>
|
||||
<mat-option
|
||||
*ngFor="let languageCode of supportedHrLanguages"
|
||||
[value]="languageCode"
|
||||
>
|
||||
{{ 'locale:languages.' + languageCode | ucapI18n }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messenger-settings-area time-setting-box">
|
||||
<div class="title-settings-subject">
|
||||
<span>{{ 'organization:settings.timezone' | ucapI18n }}</span>
|
||||
<button mat-icon-button color="accent" class="btn-subject-info">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<mat-form-field
|
||||
color="accent"
|
||||
appearance="standard"
|
||||
class="setting-select-obj ucap-mat-input-container"
|
||||
>
|
||||
<mat-select
|
||||
[class.ucap-select-placeholder-value]="
|
||||
!!timezonePlaceholder
|
||||
"
|
||||
#selectForTimezone
|
||||
[formControl]="formControlForTimezone"
|
||||
[placeholder]="timezonePlaceholder"
|
||||
[value]="settings.general.timezone"
|
||||
(openedChange)="onOpenedChangeTimezone($event)"
|
||||
>
|
||||
<ucap-virtual-scroll-viewport
|
||||
class="general-timezone-viewport"
|
||||
#vsTimezone
|
||||
itemSize="48"
|
||||
[style.height.px]="5 * 48"
|
||||
>
|
||||
<mat-option
|
||||
*ucapVirtualFor="let timezone of timezoneList"
|
||||
[value]="timezone.name"
|
||||
(onSelectionChange)="onSelectionChangeTimezone($event)"
|
||||
>
|
||||
{{ timezone.displayName }}
|
||||
</mat-option>
|
||||
</ucap-virtual-scroll-viewport>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<p>{{ 'organization:settings.sub.notification' | ucapI18n }}</p>
|
||||
</ng-template>
|
||||
<div class="allim-settings-area">
|
||||
<!-- 알림 -->
|
||||
<div class="messenger-settings-area">
|
||||
<div class="title-settings-subject">
|
||||
{{ 'organization:settings.notification.receival' | ucapI18n }}
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<mat-radio-group
|
||||
aria-label="Select an type of alarm"
|
||||
class="settings-radio-group"
|
||||
[value]="String(settings.notification.use)"
|
||||
(change)="onChangeForReceiveNotification($event)"
|
||||
>
|
||||
<mat-radio-button value="true">
|
||||
{{
|
||||
'organization:settings.notification.receive' | ucapI18n
|
||||
}}
|
||||
</mat-radio-button>
|
||||
<mat-radio-button value="false">
|
||||
{{
|
||||
'organization:settings.notification.notReceive' | ucapI18n
|
||||
}}
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messenger-settings-area allim-way-box">
|
||||
<div class="title-settings-subject">
|
||||
{{ 'organization:settings.notification.method' | ucapI18n }}
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<mat-form-field
|
||||
color="accent"
|
||||
appearance="standard"
|
||||
class="setting-select-obj ucap-mat-input-container"
|
||||
>
|
||||
<mat-select
|
||||
[value]="settings.notification.method"
|
||||
(selectionChange)="
|
||||
onSelectionChangeMethodOfNotification($event)
|
||||
"
|
||||
>
|
||||
<mat-option [value]="NotificationMethod.Sound">
|
||||
{{
|
||||
'organization:settings.notification.methodTypeSound'
|
||||
| ucapI18n
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="NotificationMethod.Alert">
|
||||
{{
|
||||
'organization:settings.notification.methodTypeAlert'
|
||||
| ucapI18n
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="NotificationMethod.SoundAndAlert">
|
||||
{{
|
||||
'organization:settings.notification.methodTypeSoundAndAlert'
|
||||
| ucapI18n
|
||||
}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messenger-settings-area allim-time-box">
|
||||
<div class="title-settings-subject">
|
||||
{{
|
||||
'organization:settings.notification.settingOfAlertWindow'
|
||||
| ucapI18n
|
||||
}}
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<mat-form-field
|
||||
color="accent"
|
||||
appearance="standard"
|
||||
class="setting-select-obj ucap-mat-input-container"
|
||||
>
|
||||
<mat-select
|
||||
[value]="String(settings.notification.alertExposureTime)"
|
||||
(selectionChange)="
|
||||
onSelectionChangeAlertExposureTimeOfNotification($event)
|
||||
"
|
||||
>
|
||||
<mat-option value="5">
|
||||
5{{ 'common:units.second' | ucapI18n }}
|
||||
</mat-option>
|
||||
<mat-option value="10">
|
||||
10{{ 'common:units.second' | ucapI18n }}
|
||||
</mat-option>
|
||||
<mat-option value="15">
|
||||
15{{ 'common:units.second' | ucapI18n }}
|
||||
</mat-option>
|
||||
<mat-option value="20">
|
||||
20{{ 'common:units.second' | ucapI18n }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messenger-settings-area">
|
||||
<div class="title-settings-subject">
|
||||
{{
|
||||
'organization:settings.notification.receiveForMobile'
|
||||
| ucapI18n
|
||||
}}
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<ul>
|
||||
<li>
|
||||
<mat-checkbox
|
||||
[value]="settings.notification.receiveForMessage"
|
||||
(change)="
|
||||
onChangeForReceiveForMessageOfNotification($event)
|
||||
"
|
||||
>
|
||||
{{
|
||||
'organization:settings.notification.receiveForMessageTypePopup'
|
||||
| ucapI18n
|
||||
}}
|
||||
</mat-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<p>{{ 'chat:settings.label' | ucapI18n }}</p>
|
||||
</ng-template>
|
||||
<div class="chat-settings-area">
|
||||
<!-- 대화 -->
|
||||
<div class="messenger-settings-area">
|
||||
<div class="title-settings-subject">파일 전송</div>
|
||||
<div class="settings-contents02" *ngIf="'electron' === platform">
|
||||
<div class="subtitle-settings-info">
|
||||
다운로드 폴더
|
||||
</div>
|
||||
<div class="settings-sub-content sub-set-content">
|
||||
<mat-form-field
|
||||
color="accent"
|
||||
class="setting-input-obj input-set-obj ucap-mat-input-container"
|
||||
>
|
||||
<input matInput placeholder="" value="" />
|
||||
<button
|
||||
mat-button
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="file"
|
||||
>
|
||||
<mat-icon>folder</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<button
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="btn-folder-first"
|
||||
>
|
||||
폴더 초기화
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<p>{{ 'call:settings.label' | ucapI18n }}</p>
|
||||
</ng-template>
|
||||
<div class="call-settings-area">
|
||||
<!-- 통화 -->
|
||||
<div class="messenger-settings-area">
|
||||
<div class="title-settings-subject">
|
||||
<span>Click to Call</span>
|
||||
<em>
|
||||
| PC Messenger에서 Click to Call 기능을 사용할 기기 설정</em
|
||||
>
|
||||
</div>
|
||||
<div class="settings-contents">
|
||||
<mat-radio-group
|
||||
aria-label="Select an type of alarm"
|
||||
class="settings-radio-group"
|
||||
>
|
||||
<mat-radio-button value="true">휴대폰</mat-radio-button>
|
||||
<mat-radio-button value="false">사무실</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<p>{{ 'authentication:password.settings.label' | ucapI18n }}</p>
|
||||
</ng-template>
|
||||
<div class="secret-num-settings-area">
|
||||
<!-- 비밀번호 -->
|
||||
<app-authentication-change-password></app-authentication-change-password>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div appLayoutsDefaultDialog="action" class="btn-box">
|
||||
<button mat-stroked-button class="mat-basic" (click)="onCancel()">
|
||||
{{ 'common:messages.cancel' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-flat-button class="bg-primary-darkest" (click)="onConfirm()">
|
||||
{{ 'common:messages.confirm' | ucapI18n }}
|
||||
</button>
|
||||
</div>
|
||||
</app-layouts-default-dialog>
|
||||
</div>
|
||||
|
|
@ -1,224 +0,0 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
.dialog-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dialog-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.messenger-settings-area {
|
||||
border-top: 10px solid #f1f2f6;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
&:first-of-type {
|
||||
border-top: 0;
|
||||
padding: 20px 16px 10px;
|
||||
}
|
||||
.title-settings-subject {
|
||||
color: #5c444b;
|
||||
font-size: 1.071em;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
padding: 6px 0 7px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 30px;
|
||||
span {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
em {
|
||||
flex: 0 1 auto;
|
||||
justify-self: start;
|
||||
font-style: normal;
|
||||
font-size: 0.929em;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
@include wordBreak();
|
||||
@include ellipsis-column(1);
|
||||
width: 100%;
|
||||
}
|
||||
.btn-subject-info {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.settings-contents {
|
||||
ul {
|
||||
li {
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
.settings-radio-group {
|
||||
padding: 6px 0;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.mat-radio-button {
|
||||
margin-left: 20%;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.settings-contents02 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
@include screen(xs) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.subtitle-settings-info {
|
||||
font-size: 0.929em;
|
||||
color: #262626;
|
||||
align-self: baseline;
|
||||
@include screen(xs) {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
.settings-sub-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 25px;
|
||||
width: 60%;
|
||||
@include screen(xs) {
|
||||
flex: 0 1 auto;
|
||||
width: 100% !important;
|
||||
margin-left: 0;
|
||||
}
|
||||
.setting-input-obj {
|
||||
@include ucapMatFormField(0, 0, 0%, 100%, 100%, 60px, 11px);
|
||||
overflow: hidden;
|
||||
margin-top: 15px;
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
@include screen(xs) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.mat-hint {
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
&.sub-set-content {
|
||||
width: auto;
|
||||
flex: 1 1 auto;
|
||||
.input-set-obj {
|
||||
@include ucapMatFormField(0, 0, 0%, 100%, 100%, 55px, 11px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.default-settings-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.login-setting-box {
|
||||
}
|
||||
.language-setting-box,
|
||||
.time-setting-box {
|
||||
.settings-contents {
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
@include screen(mid) {
|
||||
width: 70%;
|
||||
}
|
||||
@include screen(xs) {
|
||||
width: 100%;
|
||||
}
|
||||
.setting-select-obj {
|
||||
@include ucapMatFormField(0, 0, 100%, 100%, 100%, 40px, 28px);
|
||||
//@include ucapMatSelect(25px, 0 0);
|
||||
|
||||
.general-timezone-viewport {
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.allim-settings-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.allim-way-box,
|
||||
.allim-time-box {
|
||||
.settings-contents {
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
@include screen(mid) {
|
||||
width: 70%;
|
||||
}
|
||||
@include screen(xs) {
|
||||
width: 100%;
|
||||
}
|
||||
.setting-select-obj {
|
||||
@include ucapMatFormField(0, 0, 100%, 100%, 100%, 40px, 28px);
|
||||
//@include ucapMatSelect(25px, 0 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-settings-area {
|
||||
}
|
||||
.call-settings-area {
|
||||
}
|
||||
.secret-num-settings-area {
|
||||
.pass-info-box {
|
||||
dl {
|
||||
border: 1px solid #dfe0e8;
|
||||
background-color: #f7f8fa;
|
||||
dt {
|
||||
height: 30px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 0.857em;
|
||||
font-weight: 600;
|
||||
.bullet-ico-info {
|
||||
flex: 0 0 36px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
dd {
|
||||
font-size: 0.857em;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin: 2px 36px 3px;
|
||||
&:first-of-type {
|
||||
margin-top: 10px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
button {
|
||||
@include ucap-button-flat-stroked(120px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { SettingsDialogComponent } from './settings.dialog.component';
|
||||
|
||||
describe('app::account::SettingsDialogComponent', () => {
|
||||
let component: SettingsDialogComponent;
|
||||
let fixture: ComponentFixture<SettingsDialogComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [SettingsDialogComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SettingsDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,245 +0,0 @@
|
|||
import moment from 'moment';
|
||||
import 'moment-timezone';
|
||||
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Inject,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
import {
|
||||
MatDialogRef,
|
||||
MAT_DIALOG_DATA,
|
||||
MatDialog
|
||||
} from '@angular/material/dialog';
|
||||
import { MatOptionSelectionChange } from '@angular/material/core';
|
||||
import { MatSelectChange, MatSelect } from '@angular/material/select';
|
||||
import { MatCheckboxChange } from '@angular/material/checkbox';
|
||||
import { MatRadioChange } from '@angular/material/radio';
|
||||
|
||||
import { ObjectUtil } from '@ucap/core';
|
||||
import { NotificationMethod } from '@ucap/domain-common';
|
||||
import { NativeService, NativeType } from '@ucap/native';
|
||||
|
||||
import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
import { DateService } from '@ucap/ng-ui/date';
|
||||
import { VirtualScrollViewportComponent } from '@ucap/ng-ui/scrolling';
|
||||
import { TranslateService } from '@ucap/ng-ui-organization';
|
||||
|
||||
import { environment } from '@environments';
|
||||
|
||||
import {
|
||||
Settings,
|
||||
GeneralSetting,
|
||||
NotificationSetting,
|
||||
ChatSetting,
|
||||
PresenceSetting
|
||||
} from '@app/models/settings';
|
||||
|
||||
export interface TimezoneData {
|
||||
displayName: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface SettingsDialogData {
|
||||
settings: Settings;
|
||||
}
|
||||
export interface SettingsDialogResult {
|
||||
settings: Settings;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-sections-account-settings',
|
||||
templateUrl: './settings.dialog.component.html',
|
||||
styleUrls: ['./settings.dialog.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class SettingsDialogComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('vsTimezone', { static: false })
|
||||
vsTimezone: VirtualScrollViewportComponent;
|
||||
|
||||
@ViewChild('selectForTimezone', { static: false })
|
||||
selectForTimezone: MatSelect;
|
||||
|
||||
formControlForTimezone = new FormControl();
|
||||
|
||||
platform: 'browser' | 'electron' = 'electron';
|
||||
|
||||
settings: Settings;
|
||||
|
||||
timezoneList: TimezoneData[];
|
||||
timezonePlaceholder: string;
|
||||
|
||||
supportedLanguages = environment.productConfig.supportedLanguages;
|
||||
supportedHrLanguages =
|
||||
environment.productConfig.organization.supportedLanguages;
|
||||
|
||||
String = String;
|
||||
NotificationMethod = NotificationMethod;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<SettingsDialogData, SettingsDialogResult>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: SettingsDialogData,
|
||||
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
|
||||
private dateService: DateService,
|
||||
private i18nService: I18nService,
|
||||
private translateService: TranslateService,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
public matDialog: MatDialog
|
||||
) {
|
||||
this.nativeService.platform_nativeType().then((type) => {
|
||||
// this.platform = 'electron';
|
||||
// return;
|
||||
switch (type) {
|
||||
case NativeType.Browser:
|
||||
this.platform = 'browser';
|
||||
break;
|
||||
case NativeType.Electron:
|
||||
this.platform = 'electron';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.settings = ObjectUtil.deepClone(data.settings);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.generateTimezoneData();
|
||||
|
||||
this.i18nService.languageChanged$
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((lang) => {
|
||||
this.generateTimezoneData();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onChangeForAutoStartOnBoot(event: MatCheckboxChange) {
|
||||
this.settings.general.autoLaunch = event.checked;
|
||||
}
|
||||
|
||||
onChangeForAutoLogin(event: MatCheckboxChange) {
|
||||
this.settings.general.autoLogin = event.checked;
|
||||
}
|
||||
|
||||
onChangeForAutoHide(event: MatCheckboxChange) {
|
||||
this.settings.general.startupHideWindow = event.checked;
|
||||
}
|
||||
|
||||
onSelectionChangeLanguage(event: MatSelectChange) {
|
||||
this.i18nService.changeLanguage(event.value);
|
||||
this.settings.general.locale = event.value;
|
||||
}
|
||||
|
||||
onSelectionChangeHrLanguage(event: MatSelectChange) {
|
||||
this.translateService.use(event.value);
|
||||
this.settings.general.hrInfoLocale = event.value;
|
||||
}
|
||||
|
||||
onOpenedChangeTimezone(opened: boolean) {
|
||||
if (opened) {
|
||||
this.setTimezoneData();
|
||||
this.vsTimezone.checkViewportSize();
|
||||
}
|
||||
}
|
||||
|
||||
onSelectionChangeTimezone(event: MatOptionSelectionChange) {
|
||||
if (!event.isUserInput) {
|
||||
return;
|
||||
}
|
||||
this.dateService.use(event.source.value);
|
||||
this.settings.general.timezone = event.source.value;
|
||||
}
|
||||
|
||||
onChangeForReceiveNotification(event: MatRadioChange) {
|
||||
const use = 'true' === event.value;
|
||||
console.log('onChangeForReceiveNotification', use);
|
||||
}
|
||||
|
||||
onSelectionChangeMethodOfNotification(event: MatSelectChange) {
|
||||
console.log('onSelectionChangeMethodOfNotification', event.value);
|
||||
}
|
||||
|
||||
onSelectionChangeAlertExposureTimeOfNotification(event: MatSelectChange) {
|
||||
const v = Number(event.value);
|
||||
console.log('onSelectionChangeAlertExposureTimeOfNotification', v);
|
||||
}
|
||||
|
||||
onChangeForReceiveForMessageOfNotification(event: MatCheckboxChange) {
|
||||
console.log('onChangeForReceiveForMessageOfNotification', event.checked);
|
||||
}
|
||||
|
||||
onClosed(event: MouseEvent): void {
|
||||
this.dialogRef.close({ settings: this.data.settings });
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
this.dialogRef.close({ settings: this.data.settings });
|
||||
}
|
||||
|
||||
onConfirm() {
|
||||
this.dialogRef.close({
|
||||
settings: this.settings
|
||||
});
|
||||
}
|
||||
|
||||
private generateTimezoneData() {
|
||||
const timezoneData = this.i18nService.t('locale:timezone', {
|
||||
returnObjects: true
|
||||
});
|
||||
|
||||
let timezoneList: TimezoneData[] = [];
|
||||
for (const name of moment.tz.names()) {
|
||||
const displayName = `(UTC${moment.tz(name).format('Z')}) ${
|
||||
timezoneData[name]
|
||||
}`;
|
||||
if (-1 < displayName.indexOf('undefined')) {
|
||||
console.log('timezone', name);
|
||||
}
|
||||
timezoneList.push({
|
||||
displayName,
|
||||
name
|
||||
});
|
||||
if (name === this.settings.general.timezone) {
|
||||
this.timezonePlaceholder = displayName;
|
||||
}
|
||||
}
|
||||
timezoneList = timezoneList.sort((a: TimezoneData, b: TimezoneData) => {
|
||||
return a.displayName.localeCompare(b.displayName);
|
||||
});
|
||||
|
||||
this.timezoneList = timezoneList;
|
||||
}
|
||||
|
||||
private setTimezoneData() {
|
||||
const timezoneIndex = this.timezoneList.findIndex(
|
||||
(t) => t.name === this.settings.general.timezone
|
||||
);
|
||||
|
||||
if (-1 !== timezoneIndex) {
|
||||
if (!!this.vsTimezone && !!this.selectForTimezone) {
|
||||
this.vsTimezone.scrollToIndex(timezoneIndex, 'start');
|
||||
this.selectForTimezone.value = this.timezoneList[timezoneIndex].name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<div class="layout-container" fxLayout="column">
|
||||
<div class="layout-header" fxFlex="50px" fxLayout="row">
|
||||
<div fxFlex="1 1 auto" class="layout-header-container">
|
||||
<ng-content
|
||||
class="layout-header-content"
|
||||
select="[appLayoutsDefaultDialog='header']"
|
||||
></ng-content>
|
||||
</div>
|
||||
<div fxFlex="1 0 auto">
|
||||
<ng-content
|
||||
class="layout-sub-header-content"
|
||||
select="[appLayoutsDefaultDialog='sub-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" perfectScrollbar>
|
||||
<ng-content
|
||||
class="layout-body-content"
|
||||
select="[appLayoutsDefaultDialog='body']"
|
||||
></ng-content>
|
||||
</div>
|
||||
<div class="layout-action" fxFlex="60px">
|
||||
<ng-content
|
||||
class="layout-action-content"
|
||||
select="[appLayoutsDefaultDialog='action']"
|
||||
></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.layout-header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 1.143em;
|
||||
border-bottom: 1px solid #666;
|
||||
margin: 0 16px;
|
||||
&-container {
|
||||
flex: 1 1 auto;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
.layout-header-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.layout-body {
|
||||
overflow: auto;
|
||||
|
||||
.layout-body-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.layout-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.layout-action-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import { Subject } from 'rxjs';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
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.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onClickClose(event: MouseEvent): void {
|
||||
this.closed.emit(event);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<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="[appLayoutsDefaultDrawer='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="[appLayoutsDefaultDrawer='body']"
|
||||
></ng-content>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
<div class="layout-action" fxFlex="60px">
|
||||
<ng-content
|
||||
class="layout-action-content"
|
||||
select="[appLayoutsDefaultDrawer='action']"
|
||||
></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.layout-header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 1.143em;
|
||||
border-bottom: 1px solid #333;
|
||||
margin: 0 16px;
|
||||
.layout-header-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.layout-body {
|
||||
overflow: auto;
|
||||
|
||||
.layout-body-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.layout-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.layout-action-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { DefaultDrawerLayoutComponent } from './default-drawer.layout.component';
|
||||
|
||||
describe('app::layouts::DefaultDrawerLayoutComponent', () => {
|
||||
let component: DefaultDrawerLayoutComponent;
|
||||
let fixture: ComponentFixture<DefaultDrawerLayoutComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [DefaultDrawerLayoutComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DefaultDrawerLayoutComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import { Subject } from 'rxjs';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Input,
|
||||
EventEmitter,
|
||||
Output
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layouts-default-drawer',
|
||||
templateUrl: './default-drawer.layout.component.html',
|
||||
styleUrls: ['./default-drawer.layout.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class DefaultDrawerLayoutComponent 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.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onClickClose(event: MouseEvent): void {
|
||||
this.closed.emit(event);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,489 +1,137 @@
|
|||
<div
|
||||
class="layout-container"
|
||||
fxLayout="row"
|
||||
[ngClass]="'electron==' ? 'electron' : ''"
|
||||
>
|
||||
<div class="navitab-page">
|
||||
<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
|
||||
#navTabGroup
|
||||
mat-stretch-tabs
|
||||
animationDuration="0ms"
|
||||
backgroundColor="transparent"
|
||||
class="global-menu"
|
||||
(selectedTabChange)="onSelectedTabChange($event)"
|
||||
>
|
||||
<mat-tab [aria-label]="NavigationType.Group">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
[matTooltip]="'common:tooltip.group' | ucapI18n"
|
||||
matTooltipPosition="after"
|
||||
(click)="onClickToggleLeftSidenav()"
|
||||
<div class="layout-container" fxLayout="row">
|
||||
<div class="navitab-page" fxFlex="60px">
|
||||
<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"
|
||||
>
|
||||
<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]="NavigationType.Chat">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
[matTooltip]="'common:tooltip.chat' | ucapI18n"
|
||||
matTooltipPosition="after"
|
||||
[matBadgeHidden]="unreadCountChat <= 0"
|
||||
[matBadge]="unreadCountChat"
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="above after"
|
||||
(click)="onClickToggleLeftSidenav()"
|
||||
<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"
|
||||
>
|
||||
<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]="NavigationType.Organization">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
[matTooltip]="'common:tooltip.organization' | ucapI18n"
|
||||
matTooltipPosition="after"
|
||||
(click)="onClickToggleLeftSidenav()"
|
||||
<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"
|
||||
>
|
||||
<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]="NavigationType.Message">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
[matTooltip]="'common:tooltip.message' | ucapI18n"
|
||||
matTooltipPosition="after"
|
||||
(click)="onClickToggleLeftSidenav()"
|
||||
<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"
|
||||
>
|
||||
<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]="NavigationType.Call">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
[matTooltip]="'common:tooltip.call' | ucapI18n"
|
||||
matTooltipPosition="after"
|
||||
(click)="onClickToggleLeftSidenav()"
|
||||
>
|
||||
<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="Homepage" matTooltip="Homepage">
|
||||
<!--<em>Homepage</em>-->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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 hasBackdrop="false" autosize="true">
|
||||
<mat-sidenav
|
||||
#leftSidenav
|
||||
class="left-sidenav"
|
||||
mode="side"
|
||||
opened="true"
|
||||
[disableClose]="true"
|
||||
(openedChange)="onOpenStart($event)"
|
||||
>
|
||||
<ucap-float-action-button
|
||||
*ngIf="fabButtonShow"
|
||||
[buttons]="fabButtons"
|
||||
[useCustomDefaultIcon]="fabUseCustomDefaultIcon"
|
||||
(buttonClick)="onClickFab($event)"
|
||||
>
|
||||
<div
|
||||
*ngIf="curNavi === NavigationType.Group"
|
||||
ucapFloatActionButton="mainIcon"
|
||||
>
|
||||
<mat-icon class="ico-font-float">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="44"
|
||||
height="44"
|
||||
viewBox="0 0 44 44"
|
||||
>
|
||||
<g transform="translate(4 7)">
|
||||
<path
|
||||
fill="none"
|
||||
d="M0 0H44V44H0z"
|
||||
transform="translate(-4 -7)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0L12 0"
|
||||
class="prefix_cls-2"
|
||||
transform="translate(24.357 7.26)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0L12 0"
|
||||
class="prefix_cls-2"
|
||||
transform="rotate(90 14.549 16.049)"
|
||||
/>
|
||||
<path
|
||||
fill="rgba(0,0,0,0)"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="bevel"
|
||||
stroke-miterlimit="10"
|
||||
stroke-width="3px"
|
||||
d="M26.25 24.125a11.125 11.125 0 1 0-22.25 0"
|
||||
class="prefix_cls-3"
|
||||
transform="translate(-3.5 2.657)"
|
||||
/>
|
||||
<g fill="none" stroke="none">
|
||||
<path
|
||||
d="M7.08 0a7.08 7.08 0 0 1 7.08 7.08 7.318 7.318 0 0 1-2.753 5.6 6.7 6.7 0 0 1-4.327 1.479A7.08 7.08 0 0 1 7.08 0z"
|
||||
transform="translate(5 1)"
|
||||
/>
|
||||
<path
|
||||
d="M7.08 3C4.83 3 3 4.83 3 7.08c0 2.249 1.83 4.08 4.08 4.08 1.164 0 2.06-.466 2.289-.678l.026-.024.026-.024c1.558-1.374 1.738-2.573 1.738-3.354C11.16 4.83 9.33 3 7.08 3m0-3c3.91 0 7.08 3.17 7.08 7.08 0 2.095-.91 3.978-2.753 5.604-.857.793-2.512 1.475-4.326 1.475C3.17 14.16 0 10.99 0 7.08S3.17 0 7.08 0z"
|
||||
class="prefix_cls-4"
|
||||
transform="translate(5 1)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="curNavi === NavigationType.Chat"
|
||||
ucapFloatActionButton="mainIcon"
|
||||
>
|
||||
<mat-icon class="ico-font-float">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="44"
|
||||
height="44"
|
||||
viewBox="0 0 44 44"
|
||||
>
|
||||
<g transform="translate(-10 -10)">
|
||||
<path
|
||||
fill="none"
|
||||
d="M0 0H44V44H0z"
|
||||
transform="translate(10 10)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0L12 0"
|
||||
class="prefix_cls-2"
|
||||
transform="translate(40.625 22.552)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0L12 0"
|
||||
class="prefix_cls-2"
|
||||
transform="rotate(90 15.036 31.829)"
|
||||
/>
|
||||
<path
|
||||
fill="rgba(102,102,102,0)"
|
||||
class="prefix_cls-3"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="3px"
|
||||
d="M50.353 28.582a13.829 13.829 0 0 0-17.546 0 10.012 10.012 0 0 0 0 15.588 13.406 13.406 0 0 0 8.773 3.139c.337 0 .676-.012 1.013-.036l2.129 3.737a.837.837 0 0 0 .7.433h.02a.832.832 0 0 0 .7-.4l4.511-7.143a9.995 9.995 0 0 0-.3-15.319z"
|
||||
data-name="icon_float_chat"
|
||||
transform="translate(-16.272 -6.943)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="curNavi === NavigationType.Message"
|
||||
ucapFloatActionButton="mainIcon"
|
||||
>
|
||||
<mat-icon class="ico-font-float">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="44"
|
||||
height="44"
|
||||
viewBox="0 0 44 44"
|
||||
>
|
||||
<g transform="translate(-10 -9.5)">
|
||||
<path
|
||||
fill="none"
|
||||
d="M0 0H44V44H0z"
|
||||
transform="translate(10 9.5)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0L12 0"
|
||||
class="prefix_cls-2"
|
||||
transform="translate(40.5 38.26)"
|
||||
/>
|
||||
<path
|
||||
d="M0 0L12 0"
|
||||
class="prefix_cls-2"
|
||||
transform="rotate(90 7.12 39.62)"
|
||||
/>
|
||||
<path
|
||||
fill="none"
|
||||
class="prefix_cls-3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="3px"
|
||||
d="M22.425 3.3a3.851 3.851 0 0 1 5.447 5.447L9.489 27.129 2 29.172l2.043-7.489z"
|
||||
data-name="icon_float_message"
|
||||
transform="translate(11.5 14.328)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="curNavi === NavigationType.Call"
|
||||
ucapFloatActionButton="mainIcon"
|
||||
>
|
||||
<mat-icon class="ico-font-dialpad">dialpad</mat-icon>
|
||||
</div>
|
||||
</ucap-float-action-button>
|
||||
<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 class="content-page" 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="40px">
|
||||
M-Messenger
|
||||
</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>
|
||||
<div class="content-sidenav-top-bar-content">
|
||||
<div class="toolbar-info-area date-info toolbar-drag-area">
|
||||
<div class="today">
|
||||
<span>Today</span>{{ moment().format('YYYY.MM.DD') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-info-area toolbar-ctrl">
|
||||
<!--Search-->
|
||||
<div class="topbar-search">
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="search icon"
|
||||
(click)="onClickSearch($event)"
|
||||
>
|
||||
<mat-icon class="ico-search-icon">search</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--My Profile -->
|
||||
<div
|
||||
class="my-profile"
|
||||
[matMenuTriggerFor]="profileMenu"
|
||||
#profileMenuTrigger="matMenuTrigger"
|
||||
>
|
||||
<app-organization-profile-image-01
|
||||
[userInfo]="user.info"
|
||||
[versionInfo]="versionInfo"
|
||||
(openProfile)="onOpenProfile($event)"
|
||||
></app-organization-profile-image-01>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-layouts-top-bar>
|
||||
</div>
|
||||
<div class="content-sidenav-body" fxFlex="1 1 auto">
|
||||
<router-outlet name="content"></router-outlet>
|
||||
</div>
|
||||
<div fxFlex="1 1 auto">
|
||||
<router-outlet></router-outlet>
|
||||
</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" (click)="onClickForOpenRoom()"
|
||||
>현재버전 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>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav
|
||||
#rightSidenav
|
||||
class="right-sidenav"
|
||||
mode="side"
|
||||
opened="true"
|
||||
position="end"
|
||||
>
|
||||
Right
|
||||
</mat-sidenav>
|
||||
|
||||
<mat-sidenav-content>
|
||||
<div class="content-sidenav-container" fxLayout="column">
|
||||
<div class="content-sidenav-top-bar" fxFlex="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>
|
||||
</div>
|
||||
<!-- //Footer-->
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-menu #profileMenu="matMenu" class="profile-menu-panel">
|
||||
<ng-template matMenuContent>
|
||||
<app-organization-profile-menu-01
|
||||
(selectedProfileManage)="onSelectedProfileManage()"
|
||||
(selectedNotice)="onSelectedNotice()"
|
||||
(selectedSettings)="onSelectedSettings()"
|
||||
(selectedLogout)="onSelectedLogout()"
|
||||
(selectedExit)="onSelectedExit()"
|
||||
(done)="onDoneForProfileMenu()"
|
||||
></app-organization-profile-menu-01>
|
||||
</ng-template>
|
||||
</mat-menu>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
:host {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -8,361 +6,42 @@
|
|||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.electron {
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.navitab-page {
|
||||
//GNB /////////////////////////////////////
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: 60px;
|
||||
@include screen(xs) {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.gnb {
|
||||
//background-color: $gray-ref0;
|
||||
background-color: #f1f2f6;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2);
|
||||
.mat-gnb-toolbar {
|
||||
flex-basis: 40px;
|
||||
padding: 2px 12px 10px;
|
||||
.img-logo {
|
||||
margin: 10px 0 0 1px;
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
*/
|
||||
padding: 30px 0 12px;
|
||||
border-radius: 21px;
|
||||
min-width: 42px;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url(/assets/images/ico/btn_gnb_hompage.svg);
|
||||
background-size: 30px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: calc(50% - 15px);
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: 8px;
|
||||
color: $gray-re6;
|
||||
display: block;
|
||||
line-height: 9px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/////////////////////////////////////GNB //
|
||||
}
|
||||
|
||||
.content-page {
|
||||
width: calc(100% - 60px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.content-body {
|
||||
width: 100%;
|
||||
height: calc(100% - 38px);
|
||||
|
||||
mat-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left-sidenav {
|
||||
width: 370px;
|
||||
max-width: 90%;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2);
|
||||
|
||||
.left-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.top-bar {
|
||||
font: {
|
||||
size: 13px;
|
||||
color: $gray-re70;
|
||||
}
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
-webkit-app-region: drag;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mat-sidenav-content {
|
||||
.content-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; //20200611
|
||||
.content-sidenav-top-bar {
|
||||
.content-sidenav-top-bar-content {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
font-size: 12px;
|
||||
justify-content: space-between;
|
||||
.toolbar-info-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.toolbar-drag-area {
|
||||
-webkit-app-region: drag;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
&.date-info {
|
||||
@include font-family($font-light);
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: $gray-re70;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
padding-left: 30px;
|
||||
height: 100%;
|
||||
@include screen(mid) {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.today {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
span {
|
||||
width: 54px;
|
||||
height: 16px;
|
||||
border-radius: 30px;
|
||||
border: solid 1px $lipstick;
|
||||
background-color: #ffffff;
|
||||
font-size: 11px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $lipstick;
|
||||
margin-right: 8px;
|
||||
}
|
||||
@include screen(mid) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.toolbar-ctrl {
|
||||
flex-flow: row-reverse;
|
||||
margin-left: auto;
|
||||
.topbar-search {
|
||||
//개발예정으로 개발후 오픈
|
||||
display: none;
|
||||
order: 2;
|
||||
margin-right: 8px;
|
||||
.ico-search-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
color: #707070;
|
||||
}
|
||||
}
|
||||
.my-profile {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
margin-right: 20px;
|
||||
order: 1;
|
||||
//profile /////////////
|
||||
.user-profile-thumb {
|
||||
@include profile-avatar-default(
|
||||
0,
|
||||
14,
|
||||
$green,
|
||||
18px
|
||||
); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
|
||||
|
||||
.presence {
|
||||
//PC 상태
|
||||
@include presence-state(10px); //원크기
|
||||
position: relative;
|
||||
align-self: flex-end;
|
||||
margin-left: -10px;
|
||||
order: 2;
|
||||
}
|
||||
.profileImage {
|
||||
@include avatar-img(30px, 0); //아바타 크기, 왼쪽공간
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
///// profile//
|
||||
}
|
||||
.app-layout-native-title-bar-actions {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-sidenav-body {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-statusbar {
|
||||
mat-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//Footer ////////////////////////
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
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 {
|
||||
display: none;
|
||||
.var-txt {
|
||||
padding-left: 8px;
|
||||
color: $gray-re70;
|
||||
text-align: center;
|
||||
@include screen(custom, max, 414) {
|
||||
padding-left: 22px;
|
||||
flex-basis: 38%;
|
||||
flex-grow: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
background-color: #d4d4d4;
|
||||
margin-right: 8px;
|
||||
@include screen(custom, max, 414) {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
&:first-of-type {
|
||||
@include screen(custom, max, 414) {
|
||||
padding-left: 0;
|
||||
}
|
||||
&::before {
|
||||
width: 0;
|
||||
@include screen(custom, max, 414) {
|
||||
margin-left: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.new-var {
|
||||
color: $brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.help-info {
|
||||
flex-flow: row-reverse;
|
||||
padding-right: 20px;
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
span {
|
||||
color: $lipstick;
|
||||
}
|
||||
em {
|
||||
margin-left: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.left-sidenav {
|
||||
width: 370px;
|
||||
max-width: 90%;
|
||||
|
||||
.left-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-sidenav {
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
mat-sidenav-content {
|
||||
.content-sidenav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.content-sidenav-body {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
//////////////////////// Footer//
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Float action button
|
||||
.ico-font-float {
|
||||
svg {
|
||||
.prefix_cls-2 {
|
||||
fill: transparent;
|
||||
stroke-width: 2px;
|
||||
stroke: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.prefix_cls-3 {
|
||||
stroke: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.prefix_cls-4 {
|
||||
fill: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
svg {
|
||||
.prefix_cls-2 {
|
||||
stroke: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.prefix_cls-3 {
|
||||
stroke: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.prefix_cls-4 {
|
||||
fill: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ico-font-dialpad {
|
||||
font-size: 28px !important;
|
||||
line-height: 44px;
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +1,18 @@
|
|||
import moment from 'moment';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
import { Subject, of } from 'rxjs';
|
||||
import { takeUntil, filter, take, map, catchError } from 'rxjs/operators';
|
||||
|
||||
import { Component, ViewChild, OnDestroy, OnInit, Inject } from '@angular/core';
|
||||
import {
|
||||
Router,
|
||||
RouterEvent,
|
||||
NavigationEnd,
|
||||
PRIMARY_OUTLET,
|
||||
ActivatedRoute,
|
||||
Params
|
||||
} from '@angular/router';
|
||||
import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatMenuTrigger } from '@angular/material/menu';
|
||||
import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
|
||||
import { MatSidenav } from '@angular/material/sidenav';
|
||||
|
||||
import { User, UserInfoSS } from '@ucap/domain-organization';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { UserSelector } from '@ucap/ng-store-organization';
|
||||
import { ConfigurationSelector } from '@ucap/ng-store-authentication';
|
||||
import { RoomSelector } from '@ucap/ng-store-chat';
|
||||
|
||||
import { QueryParams as ChatQueryParams } from '@app/pages/chat/types/params.type';
|
||||
import { AppAccountService } from '@app/services/app-account.service';
|
||||
import { AppCallService } from '@app/services/app-call.service';
|
||||
import { AppUiService } from '@app/services/app-ui.service';
|
||||
import { QueryParams as OrganizationParams } from '@app/pages/organization/types/params.type';
|
||||
import { AddUserDialogComponent } from '@app/sections/group/dialogs/add-user.dialog.component';
|
||||
import {
|
||||
CreateDialogComponent as ChatCreateDialogComponent,
|
||||
CreateDialogData as ChatCreateDialogData,
|
||||
CreateDialogResult as ChatCreateDialogResult
|
||||
} from '@app/sections/chat/dialogs/create.dialog.component';
|
||||
import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
|
||||
import { NativeService } from '@ucap/native';
|
||||
import { AppActions } from '@app/store/actions';
|
||||
import { NavigationType } from '@app/types';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
import {
|
||||
DialpadDialogComponent,
|
||||
DialpadDialogData,
|
||||
DialpadDialogResult
|
||||
} from '@app/sections/call/dialogs/dialpad.dialog.component';
|
||||
import { VersionInfo } from '@ucap/domain-authentication';
|
||||
import { AppSelector } from '@app/store/state';
|
||||
|
||||
const NAVS = [
|
||||
NavigationType.Group,
|
||||
NavigationType.Chat,
|
||||
NavigationType.Organization,
|
||||
NavigationType.Message,
|
||||
NavigationType.Call
|
||||
];
|
||||
const NAVS = ['group', 'chat', 'organization', 'message'];
|
||||
|
||||
@Component({
|
||||
selector: 'app-layouts-default',
|
||||
|
|
@ -68,200 +24,98 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
navTabGroup: MatTabGroup;
|
||||
|
||||
@ViewChild('leftSidenav', { static: true })
|
||||
set leftSidenav(leftSidenav: MatSidenav) {
|
||||
this._leftSidenav = leftSidenav;
|
||||
this.appUiService.leftSidenav = leftSidenav;
|
||||
}
|
||||
get leftSidenav(): MatSidenav {
|
||||
return this._leftSidenav;
|
||||
}
|
||||
// tslint:disable-next-line: variable-name
|
||||
_leftSidenav: MatSidenav;
|
||||
leftSidenav: MatSidenav;
|
||||
|
||||
@ViewChild('profileMenuTrigger', { static: true })
|
||||
profileMenuTrigger: MatMenuTrigger;
|
||||
|
||||
showStatusbar = true;
|
||||
|
||||
queryParams: Params;
|
||||
|
||||
unreadCountChat = 0;
|
||||
showFooter = false;
|
||||
|
||||
/** FAB */
|
||||
fabButtonShow = true;
|
||||
fabUseCustomDefaultIcon = true; // default in this prj
|
||||
fabButtons: { icon: string; tooltip?: string; divisionType?: string }[];
|
||||
versionInfo: VersionInfo;
|
||||
user: User;
|
||||
|
||||
/** Navigation */
|
||||
NavigationType = NavigationType;
|
||||
initMenu = NavigationType.Group;
|
||||
curNavi: NavigationType;
|
||||
private windowSizeSubscription: Subscription;
|
||||
|
||||
moment = moment;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
constructor(
|
||||
private router: Router,
|
||||
private i18nSevice: I18nService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private store: Store<any>,
|
||||
private appAccountService: AppAccountService,
|
||||
private appCallService: AppCallService,
|
||||
private appUiService: AppUiService,
|
||||
private logService: LogService,
|
||||
public dialog: MatDialog,
|
||||
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
|
||||
) {
|
||||
this.setFabInitial(this.initMenu);
|
||||
this.router.events
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
filter((event) => event instanceof RouterEvent)
|
||||
)
|
||||
.subscribe((event) => {
|
||||
switch (event.constructor) {
|
||||
case NavigationEnd:
|
||||
{
|
||||
const t = this.router.parseUrl((event as NavigationEnd).url);
|
||||
const p = t.root.children[PRIMARY_OUTLET];
|
||||
if (!p || !p.segments || 0 === p.segments.length) {
|
||||
break;
|
||||
}
|
||||
const index = p.segments[0].path as NavigationType;
|
||||
this.setTabGroup(index);
|
||||
this.setFabInitial(index);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
private logService: LogService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.windowSizeSubscription = this.store
|
||||
.pipe(select(AppSelector.windowSize))
|
||||
.subscribe((size) => {
|
||||
if (size.width < 780) {
|
||||
if (this.leftSidenav.opened) {
|
||||
this.leftSidenav.close();
|
||||
}
|
||||
} else {
|
||||
if (!this.leftSidenav.opened) {
|
||||
this.leftSidenav.open();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.activatedRoute.queryParams
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((params) => {
|
||||
this.queryParams = params;
|
||||
});
|
||||
this.setTabGroup(this.router.url);
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(ConfigurationSelector.versionInfo)
|
||||
)
|
||||
.subscribe((versionInfo) => {
|
||||
this.versionInfo = versionInfo;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
|
||||
.subscribe((user) => {
|
||||
this.user = user;
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(RoomSelector.unreadTotal)
|
||||
)
|
||||
.subscribe((unreadTotal) => {
|
||||
this.unreadCountChat = unreadTotal;
|
||||
});
|
||||
|
||||
// this.store
|
||||
// .pipe(
|
||||
// takeUntil(this.ngOnDestroySubject),
|
||||
// select(PresenceSelector.selectAllStatusBulkInfo)
|
||||
// )
|
||||
// .subscribe((allBulkInfo) => {
|
||||
// // .includes(String(this.user.info.seq))
|
||||
// if (!allBulkInfo || (!!allBulkInfo && allBulkInfo.length === 0)) {
|
||||
// return;
|
||||
// }
|
||||
// const userStatusinfo = allBulkInfo.filter(
|
||||
// (bulkInfo) => bulkInfo.userSeq === String(this.user.info.seq)
|
||||
// )[0];
|
||||
|
||||
// const status = PresenceUtil.isOnline(userStatusinfo, PresenceType.PC);
|
||||
// if (!status && userStatusinfo.pcStatus === StatusCode.Offline) {
|
||||
// this.store.dispatch(
|
||||
// PresenceActions.bulkInfo({
|
||||
// divCd: 'myBulk',
|
||||
// userSeqs: [String(this.user.info.seq)]
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
this.setFabInitial(NAVS[0]);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
if (!this.windowSizeSubscription) {
|
||||
this.windowSizeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
onOpenProfile(userInfo: UserInfoSS) {
|
||||
this.profileMenuTrigger.openMenu();
|
||||
}
|
||||
|
||||
onSelectedTabChange(event: MatTabChangeEvent) {
|
||||
const naviMenu: NavigationType = event.tab.ariaLabel as NavigationType;
|
||||
const commands: any = [naviMenu, { outlets: { content: 'index' } }];
|
||||
const orgInitialParams: Params = {};
|
||||
|
||||
// CASE :: Chat.
|
||||
if (
|
||||
naviMenu === NavigationType.Chat && // is chat.
|
||||
!!this.queryParams &&
|
||||
!!this.queryParams[ChatQueryParams.ROOM_ID]
|
||||
) {
|
||||
// 다른 화면에서 채팅으로 바로 유입할 경우에는 navigate 초기화를 무시한다.
|
||||
this.queryParams = undefined;
|
||||
if (4 === event.index) {
|
||||
this.router.navigate(
|
||||
['group', { outlets: { content: 'chat/index' } }],
|
||||
{}
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// CASE :: Organization.
|
||||
if (naviMenu === NavigationType.Organization && !!this.user) {
|
||||
orgInitialParams[OrganizationParams.DEPT_SEQ] = String(
|
||||
this.user.departmentCode
|
||||
);
|
||||
}
|
||||
|
||||
this.router.navigate(commands, { queryParams: orgInitialParams });
|
||||
this.appUiService.openLeftSidenavOnNarrowMode();
|
||||
this.setFabInitial(naviMenu);
|
||||
this.router.navigate([
|
||||
NAVS[event.index],
|
||||
{ outlets: { content: 'index' } }
|
||||
]);
|
||||
this.setFabInitial(NAVS[event.index]);
|
||||
}
|
||||
|
||||
onClickToggleLeftSidenav() {
|
||||
this.appUiService.toggleLeftSidenavOnNarrowMode();
|
||||
if (this.leftSidenav.opened) {
|
||||
this.leftSidenav.close();
|
||||
} else {
|
||||
this.leftSidenav.open();
|
||||
}
|
||||
}
|
||||
|
||||
setFabInitial(type: NavigationType) {
|
||||
this.curNavi = type;
|
||||
private setTabGroup(url: string) {
|
||||
this.navTabGroup.selectedIndex = NAVS.findIndex((v) =>
|
||||
url.startsWith(`/${v}`)
|
||||
);
|
||||
}
|
||||
|
||||
setFabInitial(type: string) {
|
||||
switch (type) {
|
||||
case NavigationType.Group:
|
||||
case 'group':
|
||||
{
|
||||
this.fabButtonShow = true;
|
||||
this.fabButtons = [
|
||||
{
|
||||
icon: 'add',
|
||||
tooltip: this.i18nSevice.t('group:dialog.title.addNewBuddy'),
|
||||
tooltip: '그룹 추가',
|
||||
divisionType: 'GROUP_NEW_ADD'
|
||||
}
|
||||
];
|
||||
}
|
||||
break;
|
||||
case NavigationType.Chat:
|
||||
case 'chat':
|
||||
{
|
||||
this.fabButtonShow = true;
|
||||
this.fabButtons = [
|
||||
{
|
||||
icon: 'chat',
|
||||
tooltip: this.i18nSevice.t('chat:dialog.title.newChatRoom'),
|
||||
tooltip: '대화 추가',
|
||||
divisionType: 'CAHT_NEW_ADD'
|
||||
}
|
||||
];
|
||||
|
|
@ -275,12 +129,12 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
// }
|
||||
}
|
||||
break;
|
||||
case NavigationType.Organization:
|
||||
case 'organization':
|
||||
{
|
||||
this.fabButtonShow = false;
|
||||
}
|
||||
break;
|
||||
case NavigationType.Message:
|
||||
case 'message':
|
||||
{
|
||||
this.fabButtonShow = true;
|
||||
this.fabButtons = [
|
||||
|
|
@ -292,18 +146,11 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
];
|
||||
}
|
||||
break;
|
||||
case NavigationType.Call:
|
||||
{
|
||||
this.fabButtonShow = true;
|
||||
this.fabButtons = [
|
||||
{
|
||||
icon: 'dialpad',
|
||||
tooltip: this.i18nSevice.t('call:label.dialpad'),
|
||||
divisionType: 'OPEN_DIALPAD'
|
||||
}
|
||||
];
|
||||
}
|
||||
break;
|
||||
// case MainMenu.Call:
|
||||
// {
|
||||
// this.fabButtonShow = false;
|
||||
// }
|
||||
// break;
|
||||
|
||||
default: {
|
||||
this.fabButtonShow = false;
|
||||
|
|
@ -321,36 +168,12 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
switch (btn.divisionType) {
|
||||
case 'GROUP_NEW_ADD':
|
||||
{
|
||||
const dialogRef = this.dialog.open(AddUserDialogComponent, {
|
||||
panelClass: 'max-create-dialog'
|
||||
});
|
||||
|
||||
dialogRef
|
||||
.afterOpened()
|
||||
.pipe(take(1))
|
||||
.subscribe(() => dialogRef.componentInstance.psUpdate());
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(
|
||||
take(1),
|
||||
map((result) => {}),
|
||||
catchError((err) => {
|
||||
return of(err);
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
this.logService.debug('GROUP_NEW_ADD');
|
||||
}
|
||||
break;
|
||||
case 'CAHT_NEW_ADD':
|
||||
{
|
||||
const dialogRef = this.dialog.open<
|
||||
ChatCreateDialogComponent,
|
||||
ChatCreateDialogData,
|
||||
ChatCreateDialogResult
|
||||
>(ChatCreateDialogComponent, {
|
||||
panelClass: 'max-create-dialog',
|
||||
data: {}
|
||||
});
|
||||
this.logService.debug('CAHT_NEW_ADD');
|
||||
}
|
||||
break;
|
||||
case 'CHAT_NEW_TIMER_ADD':
|
||||
|
|
@ -366,64 +189,6 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
|
|||
this.logService.debug('MESSAGE_NEW');
|
||||
}
|
||||
break;
|
||||
|
||||
case 'OPEN_DIALPAD':
|
||||
{
|
||||
this.dialog.open<
|
||||
DialpadDialogComponent,
|
||||
DialpadDialogData,
|
||||
DialpadDialogResult
|
||||
>(DialpadDialogComponent, {
|
||||
panelClass: 'mid-create-dialog',
|
||||
data: {}
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onClickSearch(event: Event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
onSelectedProfileManage() {
|
||||
this.profileMenuTrigger.closeMenu();
|
||||
}
|
||||
|
||||
onSelectedNotice() {
|
||||
this.profileMenuTrigger.closeMenu();
|
||||
}
|
||||
|
||||
onSelectedSettings() {
|
||||
this.profileMenuTrigger.closeMenu();
|
||||
this.appAccountService.dialogForSettings();
|
||||
}
|
||||
|
||||
onSelectedLogout() {
|
||||
this.router.navigate(['/account/logout']);
|
||||
}
|
||||
|
||||
onSelectedExit() {}
|
||||
|
||||
onDoneForProfileMenu() {
|
||||
this.profileMenuTrigger.closeMenu();
|
||||
}
|
||||
|
||||
onClickForOpenRoom() {
|
||||
this.nativeService.chat_openRoom('/chat/chatroom?roomId=1000');
|
||||
}
|
||||
|
||||
private setTabGroup(url: string) {
|
||||
if (!!this.navTabGroup) {
|
||||
this.navTabGroup.selectedIndex = NAVS.findIndex((v) => url === v);
|
||||
}
|
||||
}
|
||||
|
||||
onOpenStart(opened: boolean) {
|
||||
this.store.dispatch(
|
||||
AppActions.openedLiftSideNav({
|
||||
opened
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,17 +3,8 @@ 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 { DefaultDrawerLayoutComponent } from './default-drawer.layout.component';
|
||||
import { SelectorLayoutComponent } from './selector.layout.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
TopBarComponent,
|
||||
DefaultLayoutComponent,
|
||||
NoNaviLayoutComponent,
|
||||
|
||||
DefaultDialogLayoutComponent,
|
||||
DefaultDrawerLayoutComponent,
|
||||
|
||||
SelectorLayoutComponent
|
||||
NoNaviLayoutComponent
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="layout-container" fxFlexFill fxLayout="column">
|
||||
<div *ngIf="showTopbar" class="top-bar" fxFlex="50px">
|
||||
<app-layouts-top-bar class="no-navi-top-bar"></app-layouts-top-bar>
|
||||
<app-layouts-top-bar></app-layouts-top-bar>
|
||||
</div>
|
||||
<div class="layout-content" fxFlex="1 1 auto">
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
.layout-container {
|
||||
background-color: #f3f4f5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<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="primary"
|
||||
(click)="onClickClose($event)"
|
||||
>
|
||||
<mat-icon>close</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>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.selector {
|
||||
border-bottom: 1px solid #ccc;
|
||||
.selector-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px 0 16px;
|
||||
//border-top: 1px solid #ccc;
|
||||
}
|
||||
.selector-contents {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.footer {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
EventEmitter,
|
||||
Output
|
||||
} 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 {
|
||||
@Output()
|
||||
closed = new EventEmitter<void>();
|
||||
|
||||
constructor(private changeDetectorRef: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
ngOnDestroy(): void {}
|
||||
|
||||
onClickClose(event: MouseEvent): void {
|
||||
this.closed.emit();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
<div class="title-bar">
|
||||
<ucap-title-bar
|
||||
[platform]="platform"
|
||||
[windowState]="windowState"
|
||||
(closed)="onClosed()"
|
||||
(maximized)="onMaximized($event)"
|
||||
(minimized)="onMinimized()"
|
||||
[native]="native"
|
||||
(closed)="onClosedTitleBar()"
|
||||
(maximized)="onMaximizedTitleBar()"
|
||||
(minimized)="onMinimizedTitleBar()"
|
||||
>
|
||||
<ng-content></ng-content>
|
||||
</ucap-title-bar>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,7 @@
|
|||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
|
||||
|
||||
import * as detectBrowser from 'detect-browser';
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import { NativeService, WindowState, NativeType } from '@ucap/native';
|
||||
|
||||
import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layouts-top-bar',
|
||||
templateUrl: './top-bar.component.html',
|
||||
|
|
@ -18,64 +9,17 @@ import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
|
|||
})
|
||||
export class TopBarComponent implements OnInit, OnDestroy {
|
||||
platform = 'win32';
|
||||
windowState: WindowState;
|
||||
native = true;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
constructor(private store: Store<any>) {}
|
||||
|
||||
constructor(
|
||||
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
|
||||
private store: Store<any>
|
||||
) {
|
||||
this.nativeService.platform_nativeType().then((type) => {
|
||||
switch (type) {
|
||||
case NativeType.Browser:
|
||||
this.platform = 'browser';
|
||||
break;
|
||||
case NativeType.Electron:
|
||||
{
|
||||
const info = detectBrowser.detect();
|
||||
if (info.os.startsWith('Windows')) {
|
||||
this.platform = 'win32';
|
||||
} else if (info.os.startsWith('Mac OS')) {
|
||||
this.platform = 'darwin';
|
||||
} else if (info.os.startsWith('Linux')) {
|
||||
this.platform = 'linux';
|
||||
} else {
|
||||
}
|
||||
}
|
||||
break;
|
||||
ngOnInit() {}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
ngOnDestroy(): void {}
|
||||
|
||||
ngOnInit() {
|
||||
this.nativeService
|
||||
.window_onState$()
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((windowState) => {
|
||||
this.windowState = windowState;
|
||||
});
|
||||
}
|
||||
onClosedTitleBar() {}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
onMaximizedTitleBar() {}
|
||||
|
||||
onClosed() {
|
||||
this.nativeService.window_close();
|
||||
}
|
||||
|
||||
onMaximized(altKey: boolean) {
|
||||
this.nativeService.window_maximize(altKey);
|
||||
}
|
||||
|
||||
onMinimized() {
|
||||
this.nativeService.window_minimize();
|
||||
}
|
||||
onMinimizedTitleBar() {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,24 +5,12 @@ import { RouterModule } from '@angular/router';
|
|||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
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 { UiButtonModule } from '@ucap/ng-ui/button';
|
||||
import { UiNativeModule } from '@ucap/ng-ui/native';
|
||||
|
||||
import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
|
||||
import { UiModule } from '@ucap/ng-ui';
|
||||
|
||||
import { COMPONENTS } from './components';
|
||||
import { DIALOGS } from './dialogs';
|
||||
|
|
@ -30,37 +18,20 @@ import { DIALOGS } from './dialogs';
|
|||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
RouterModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
MatBadgeModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatTabsModule,
|
||||
MatSidenavModule,
|
||||
MatToolbarModule,
|
||||
MatTooltipModule,
|
||||
|
||||
PerfectScrollbarModule,
|
||||
|
||||
I18nModule,
|
||||
|
||||
UiButtonModule,
|
||||
UiNativeModule,
|
||||
|
||||
AppOrganizationModule
|
||||
UiModule
|
||||
],
|
||||
exports: [...COMPONENTS, ...DIALOGS],
|
||||
declarations: [...COMPONENTS, ...DIALOGS],
|
||||
entryComponents: [...DIALOGS],
|
||||
providers: [
|
||||
{
|
||||
provide: UCAP_I18N_NAMESPACE,
|
||||
useValue: ['common']
|
||||
}
|
||||
]
|
||||
entryComponents: [...DIALOGS]
|
||||
})
|
||||
export class AppLayoutsModule {}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
import { SortViewType } from '@app/pages/group/types/sort-view.type';
|
||||
|
||||
export interface GroupOpenInfo {
|
||||
lastGroupSeq: number;
|
||||
groupSeqs: number[];
|
||||
showType: SortViewType;
|
||||
}
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
import { LoginSession as UCAPLoginSession } from '@ucap/domain-authentication';
|
||||
import { GroupOpenInfo } from './group-open-info';
|
||||
import { LoginSession as UCAPLoginSession } from '@ucap/core';
|
||||
|
||||
export interface LoginSession extends UCAPLoginSession {
|
||||
loginPw?: string;
|
||||
initPw?: boolean;
|
||||
encData?: string;
|
||||
alive?: boolean;
|
||||
groupInfo?: GroupOpenInfo;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {
|
||||
GeneralSetting as UCAPGeneralSetting,
|
||||
NotificationSetting as UCAPNotificationSetting
|
||||
} from '@ucap/domain-common';
|
||||
import { PresenceSetting as UCAPPresenceSetting } from '@ucap/domain-status';
|
||||
import { ChatSetting as UCAPChatSetting } from '@ucap/domain-chat';
|
||||
NotificationSetting as UCAPNotificationSetting,
|
||||
ChatSetting as UCAPChatSetting,
|
||||
PresenceSetting as UCAPPresenceSetting
|
||||
} from '@ucap/protocol-option';
|
||||
|
||||
// tslint:disable-next-line: no-empty-interface
|
||||
export interface GeneralSetting extends UCAPGeneralSetting {}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { UserStore as UCAPUserStore } from '@ucap/domain-authentication';
|
||||
import { UserStore as UCAPUserStore } from '@ucap/core';
|
||||
|
||||
import { Settings } from './settings';
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Routes, RouterModule } from '@angular/router';
|
|||
|
||||
import { ForgotPasswordPageComponent } from './components/forgot-password.page.component';
|
||||
import { LoginPageComponent } from './components/login.page.component';
|
||||
import { LogoutPageComponent } from './components/logout.page.component';
|
||||
import { ResetPasswordPageComponent } from './components/reset-password.page.component';
|
||||
|
||||
const routes: Routes = [
|
||||
|
|
@ -18,10 +17,6 @@ const routes: Routes = [
|
|||
{
|
||||
path: 'reset_password',
|
||||
component: ResetPasswordPageComponent
|
||||
},
|
||||
{
|
||||
path: 'logout',
|
||||
component: LogoutPageComponent
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ 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';
|
||||
|
|
@ -14,7 +13,6 @@ import { COMPONENTS } from './components';
|
|||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
AppAuthenticationModule,
|
||||
AppAccountSectionModule,
|
||||
AppAccountRoutingPageModule
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<div class="login-container">
|
||||
<app-authentication-login></app-authentication-login>
|
||||
<app-sections-account-login
|
||||
[companyGroupCode]="companyGroupCode"
|
||||
[fixedCompanyCode]="fixedCompanyCode"
|
||||
[userStore]="userStore"
|
||||
[useRememberMe]="useRememberMe"
|
||||
[useAutoLogin]="useAutoLogin"
|
||||
></app-sections-account-login>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,29 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
$login-bg-w: 100/1920;
|
||||
$login-bg-h: 100/1080;
|
||||
@import '../../../../assets/scss/components';
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
min-height: 100vh;
|
||||
background-color: $bg-gray;
|
||||
background-image: url(/assets/images/bg/bg_login_circle_square01.svg),
|
||||
url(/assets/images/bg/bg_login_circle_stroke01.svg),
|
||||
url(/assets/images/bg/bg_login_circle01.svg),
|
||||
url(/assets/images/bg/bg_login_circle03.svg),
|
||||
url(/assets/images/bg/bg_login_circle_diagonal01.svg),
|
||||
url(/assets/images/bg/bg_login_circle_square02.svg),
|
||||
url(/assets/images/bg/bg_login_circle04.svg),
|
||||
url(/assets/images/bg/bg_login_circle05.svg),
|
||||
url(/assets/images/bg/bg_login_circle06.svg),
|
||||
url(/assets/images/bg/bg_login_circle07.svg),
|
||||
url(/assets/images/bg/bg_login_circle08.svg),
|
||||
url(/assets/images/bg/bg_login_circle_diagonal02.svg),
|
||||
url(/assets/images/bg/bg_login_circle_diagonal03.svg),
|
||||
url(/assets/images/bg/bg_login_circle_stroke02.svg),
|
||||
url(/assets/images/bg/bg_login_circle_stroke03.svg),
|
||||
url(/assets/images/bg/bg_login_circle_stroke04.svg),
|
||||
url(/assets/images/bg/bg_login_circle_stroke05.svg),
|
||||
url(/assets/images/bg/bg_login_polygon01.svg),
|
||||
url(/assets/images/bg/bg_login_polygon02.svg);
|
||||
background-image: url(../../../../assets/images/bg/bg_login_circle_square01.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_stroke01.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle01.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle03.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_diagonal01.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_square02.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle04.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle05.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle06.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle07.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle08.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_diagonal02.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_diagonal03.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_stroke02.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_stroke03.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_stroke04.svg),
|
||||
url(../../../../assets/images/bg/bg_login_circle_stroke05.svg),
|
||||
url(../../../../assets/images/bg/bg_login_polygon01.svg),
|
||||
url(../../../../assets/images/bg/bg_login_polygon02.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: unquote($login-bg-w * 323 + '%')
|
||||
unquote($login-bg-h * 179 + '%'),
|
||||
|
|
@ -64,4 +55,8 @@ $login-bg-h: 100/1080;
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,11 +25,13 @@ export class LoginPageComponent implements OnInit, OnDestroy {
|
|||
|
||||
readonly fixedCompanyCode = environment.companyConfig.fixedCompanyCode;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
private ngOnDestroySubject = new Subject<boolean>();
|
||||
|
||||
constructor(private localStorageService: LocalStorageService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ngOnDestroySubject = new Subject<boolean>();
|
||||
|
||||
this.localStorageService
|
||||
.encGet$<UserStore>(
|
||||
AppKey.UserStore,
|
||||
|
|
@ -41,7 +43,6 @@ export class LoginPageComponent implements OnInit, OnDestroy {
|
|||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
<div class="logout-container">
|
||||
<div class="logout-content">
|
||||
<div class="logout-title"></div>
|
||||
|
||||
<p class="guide-text">
|
||||
서비스를 이용하시려면 다시 로그인하여 주시기 바랍니다.<br />
|
||||
<span
|
||||
>항상 더 좋은 서비스로 고객님께 보답하는 M-Messenger가 되겠습니다.</span
|
||||
>
|
||||
</p>
|
||||
|
||||
<!--<p class="guide-text">
|
||||
다른 기기에서 동일한 계정으로 로그인되었습니다.<br />본인이 아닌 경우
|
||||
비밀번호 변경을 하시기 바랍니다.
|
||||
<span
|
||||
>항상 더 좋은 서비스로 고객님께 보답하는 M-Messenger가 되겠습니다.</span
|
||||
>
|
||||
</p>-->
|
||||
|
||||
<span class="guide-move">OO초 후 로그인 페이지로 자동 이동 됩니다 </span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.logout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f3f4f5;
|
||||
background-image: url(/assets/images/ico/img_logout.png);
|
||||
background-position: 50% bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 90% auto;
|
||||
@include screen(xs) {
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.logout-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 80%;
|
||||
transform: translateY(-70%);
|
||||
.logout-title {
|
||||
display: block;
|
||||
width: 250px;
|
||||
height: 62px;
|
||||
text-align: center;
|
||||
background: url(/assets/images/ico/img_logout_text.svg);
|
||||
}
|
||||
|
||||
.guide-text {
|
||||
font-size: 1.6em;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
@include screen(xs) {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
font-size: 0.7em;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.guide-move {
|
||||
display: inline-flex;
|
||||
padding: 0.8em 1.4em;
|
||||
border-radius: 100px;
|
||||
background-color: #fd578a;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { LogoutPageComponent } from './logout.page.component';
|
||||
|
||||
describe('app::pages::account::LogoutPageComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [LogoutPageComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(LogoutPageComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(LogoutPageComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(LogoutPageComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
|
||||
import { LocalStorageService } from '@ucap/ng-web-storage';
|
||||
|
||||
import { environment } from '@environments';
|
||||
|
||||
import { UserStore } from '@app/models/user-store';
|
||||
import { AppKey } from '@app/types/app-key.type';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-account-logout',
|
||||
templateUrl: './logout.page.component.html',
|
||||
styleUrls: ['./logout.page.component.scss']
|
||||
})
|
||||
export class LogoutPageComponent implements OnInit, OnDestroy {
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
|
||||
constructor(private localStorageService: LocalStorageService) {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,19 +3,12 @@ import { Routes, RouterModule } from '@angular/router';
|
|||
|
||||
import { IndexPageComponent } from './components/index.page.component';
|
||||
import { SidenavPageComponent } from './components/sidenav.page.component';
|
||||
import { CallHistoryPageComponent } from './components/call-history.page.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: 'index',
|
||||
outlet: 'content',
|
||||
// component: IndexPageComponent
|
||||
component: CallHistoryPageComponent
|
||||
},
|
||||
{
|
||||
path: 'callhistory',
|
||||
outlet: 'content',
|
||||
component: CallHistoryPageComponent
|
||||
component: IndexPageComponent
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
|
|
|
|||
|
|
@ -3,52 +3,18 @@ import { CommonModule } from '@angular/common';
|
|||
|
||||
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 { UiDateModule } from '@ucap/ng-ui/date';
|
||||
import { UiPhoneModule } from '@ucap/ng-ui/phone';
|
||||
|
||||
import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
|
||||
import { OrganizationUiModule } from '@ucap/ng-ui-organization';
|
||||
|
||||
import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
|
||||
import { AppCallSectionModule } from '@app/sections/call/call.section.module';
|
||||
|
||||
import { AppCallRoutingPageModule } from './call-routing.page.module';
|
||||
import { COMPONENTS } from './components';
|
||||
import { AppGroupModule } from '@app/ucap/group/group.module';
|
||||
|
||||
import { IndexPageComponent } from './components/index.page.component';
|
||||
import { SidenavPageComponent } from './components/sidenav.page.component';
|
||||
|
||||
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
|
||||
|
||||
export { IndexPageComponent, SidenavPageComponent };
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatTabsModule,
|
||||
|
||||
I18nModule,
|
||||
|
||||
UiDateModule,
|
||||
UiPhoneModule,
|
||||
|
||||
OrganizationUiModule,
|
||||
|
||||
AppOrganizationModule,
|
||||
|
||||
AppCallSectionModule,
|
||||
AppCallRoutingPageModule,
|
||||
AppGroupModule
|
||||
],
|
||||
imports: [CommonModule, FlexLayoutModule, AppCallRoutingPageModule],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: [],
|
||||
providers: [
|
||||
{
|
||||
provide: UCAP_I18N_NAMESPACE,
|
||||
useValue: ['call', 'common']
|
||||
}
|
||||
]
|
||||
entryComponents: []
|
||||
})
|
||||
export class AppCallPageModule {}
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<div class="contents-main" fxFlexFill fxLayout="column">
|
||||
<div class="subtitle" fxFlex="0 0 50px" fxLayout="row">
|
||||
<div class="title">{{ 'call:label.callHistory' | ucapI18n }}</div>
|
||||
<div class="call-info" fxLayout="row">
|
||||
<div class="info send">
|
||||
<mat-icon>call_made</mat-icon>{{ 'call:label.send' | ucapI18n }}
|
||||
</div>
|
||||
<div class="info receive">
|
||||
<mat-icon>call_received</mat-icon>{{ 'call:label.recieve' | ucapI18n }}
|
||||
</div>
|
||||
<div class="info away">
|
||||
<mat-icon>call_missed</mat-icon>{{ 'call:label.missed' | ucapI18n }}
|
||||
</div>
|
||||
<div class="info unanswered">
|
||||
<mat-icon>call_missed_outgoing</mat-icon
|
||||
>{{ 'call:label.unanswered' | ucapI18n }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-title" fxFlex="0 0 90px" fxLayout="row">
|
||||
<div class="user-profile-info">
|
||||
<div class="profile-image">
|
||||
<app-group-profile-image-01
|
||||
[userInfo]="userInfo"
|
||||
[versionInfo]="versionInfo"
|
||||
(openProfile)="onOpenProfile($event)"
|
||||
></app-group-profile-image-01>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-n-g">
|
||||
<div class="user-name">
|
||||
{{ userInfo | ucapOrganizationTranslate: 'name':undefined:'' }}
|
||||
</div>
|
||||
<div class="user-grade">
|
||||
{{ userInfo | ucapOrganizationTranslate: 'grade':undefined:' ' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-name">
|
||||
{{ userInfo | ucapOrganizationTranslate: 'deptName':undefined:' ' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-call-info" fxLayout="row">
|
||||
<div *ngIf="!!userInfo && !!userInfo.hpNumber" class="mobile">
|
||||
{{ userInfo.hpNumber | ucapPhoneNumber }}
|
||||
<img src="assets/images/ico/btn_list_mobile_a24.svg" alt="" />
|
||||
</div>
|
||||
<div *ngIf="!!userInfo && !!userInfo.lineNumber" class="lineNumber">
|
||||
{{ userInfo.lineNumber | ucapPhoneNumber }}
|
||||
<img src="assets/images/ico/btn_list_call_a24.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="call-info-container" fxFlex="1 1 auto">
|
||||
<app-sections-call-info></app-sections-call-info>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.contents-main {
|
||||
position: relative;
|
||||
.subtitle {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
.message-box-container {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
.message-area {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.message-input {
|
||||
max-height: 70%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 1px 0;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
.rightDrawer {
|
||||
min-width: 360px;
|
||||
max-width: 100%;
|
||||
@include screen(xs) {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { CallHistoryPageComponent } from './call-history.page.component';
|
||||
|
||||
describe('app::pages::chat::CallHistoryPageComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [CallHistoryPageComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(CallHistoryPageComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ucap-lg-web'`, () => {
|
||||
const fixture = TestBed.createComponent(CallHistoryPageComponent);
|
||||
const app = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(CallHistoryPageComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'ucap-lg-web app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef
|
||||
} from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, withLatestFrom } from 'rxjs/operators';
|
||||
import { QueryParams } from '../types/params.type';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import { UserInfoSS } from '@ucap/domain-organization';
|
||||
|
||||
import { UserSelector } from '@ucap/ng-store-organization';
|
||||
import { AppOrganizationService } from '@app/services/app-organization.service';
|
||||
|
||||
import { ConfigurationSelector } from '@ucap/ng-store-authentication';
|
||||
|
||||
import {
|
||||
ProfileDialogComponent,
|
||||
ProfileDialogData,
|
||||
ProfileDialogResult
|
||||
} from '@app/sections/organization/dialogs/profile.dialog.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { VersionInfo } from '@ucap/domain-authentication';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-call-history',
|
||||
templateUrl: './call-history.page.component.html',
|
||||
styleUrls: ['./call-history.page.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class CallHistoryPageComponent implements OnInit, OnDestroy {
|
||||
isMe: boolean;
|
||||
userSeq: string;
|
||||
userInfo: UserInfoSS;
|
||||
|
||||
versionInfo: VersionInfo;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
constructor(
|
||||
private dialog: MatDialog,
|
||||
private store: Store<any>,
|
||||
private appOrganizationService: AppOrganizationService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.activatedRoute.queryParams
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
withLatestFrom(this.store.pipe(select(UserSelector.user)))
|
||||
)
|
||||
.subscribe(([params, user]) => {
|
||||
const seqParam = params[QueryParams.ID];
|
||||
|
||||
// initializing by userSeq Change.
|
||||
if (this.userSeq !== seqParam) {
|
||||
}
|
||||
|
||||
// setting userSeq.
|
||||
this.userSeq = !!seqParam
|
||||
? seqParam
|
||||
: !!user
|
||||
? String(user.info.seq)
|
||||
: undefined;
|
||||
|
||||
if (!!user && this.userSeq === String(user.info.seq)) {
|
||||
this.isMe = true;
|
||||
} else {
|
||||
this.isMe = false;
|
||||
}
|
||||
|
||||
if (!!this.userSeq) {
|
||||
const self = this;
|
||||
this.appOrganizationService
|
||||
.getUserInfo({ userSeq: this.userSeq, user })
|
||||
.then((result) => {
|
||||
console.log('getUserInfo : ', result);
|
||||
self.userInfo = result.userInfo;
|
||||
})
|
||||
.catch((e) => {
|
||||
self.userInfo = undefined;
|
||||
})
|
||||
.finally(() => {
|
||||
this.changeDetectorRef.markForCheck();
|
||||
});
|
||||
} else {
|
||||
this.userInfo = undefined;
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(ConfigurationSelector.versionInfo)
|
||||
)
|
||||
.subscribe((versionInfo) => {
|
||||
this.versionInfo = versionInfo;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onOpenProfile(userInfo: UserInfoSS): void {
|
||||
if (!!userInfo) {
|
||||
this.dialog.open<
|
||||
ProfileDialogComponent,
|
||||
ProfileDialogData,
|
||||
ProfileDialogResult
|
||||
>(ProfileDialogComponent, {
|
||||
panelClass: 'mid-create-dialog',
|
||||
data: {
|
||||
userSeq: userInfo.seq
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +1 @@
|
|||
<div class="index-page-call-info">
|
||||
<div class="ico-page-call">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 166 142">
|
||||
<g transform="translate(-152.267 -127.865)">
|
||||
<path
|
||||
d="M0 0H166V142H0z"
|
||||
data-name="square-01"
|
||||
transform="translate(152.267 127.865)"
|
||||
style="fill: none;"
|
||||
/>
|
||||
<path
|
||||
d="M45.694 2a43.788 43.788 0 0 1 33.84 71.495l8.744 8.756a4.269 4.269 0 0 1-3.235 7.311H45.694a43.781 43.781 0 0 1 0-87.562z"
|
||||
data-name="comment-dots-01"
|
||||
transform="translate(199.283 158.998)"
|
||||
style="stroke: #bababa; stroke-width: 4px; fill: #fff;"
|
||||
/>
|
||||
<path
|
||||
d="M26.015 2A24.012 24.012 0 0 0 7.458 41.206l-4.8 4.8a2.341 2.341 0 0 0 1.774 4.009h21.583a24.009 24.009 0 0 0 0-48.015z"
|
||||
data-name="comment-dots-02"
|
||||
transform="translate(167.028 170.336)"
|
||||
style="fill: #999;"
|
||||
/>
|
||||
<path
|
||||
d="M33.725 5.917a5.628 5.628 0 1 1 11.242 0 5.628 5.628 0 1 1-11.242 0zm-16.862 0A5.775 5.775 0 0 1 22.483 0 5.775 5.775 0 0 1 28.1 5.917a5.774 5.774 0 0 1-5.621 5.917 5.774 5.774 0 0 1-5.617-5.917zM0 5.917A5.775 5.775 0 0 1 5.621 0a5.775 5.775 0 0 1 5.621 5.917 5.774 5.774 0 0 1-5.621 5.917A5.774 5.774 0 0 1 0 5.917z"
|
||||
transform="translate(223.585 197.682)"
|
||||
style="fill: #bababa;"
|
||||
/>
|
||||
<path
|
||||
d="M13.476 22.894l-7.509-6.82L3.41 18.38l10.066 9.143L35.086 7.9l-2.539-2.31z"
|
||||
transform="translate(174.515 180.942)"
|
||||
style="fill: #fff;"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="call-index-copy">
|
||||
{{ 'call:noSelectHistory' | ucapI18n }}
|
||||
</p>
|
||||
</div>
|
||||
Index page of call is works!
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
.index-page-call-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ico-page-call {
|
||||
width: 166px;
|
||||
height: 142px;
|
||||
margin-top: -80px;
|
||||
}
|
||||
.call-index-copy {
|
||||
font-size: 1.429em;
|
||||
color: #666;
|
||||
padding: 10px 20px;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin: 50px 0 0;
|
||||
}
|
||||
@include screen(xs) {
|
||||
.ico-page-call {
|
||||
width: 120px;
|
||||
height: auto;
|
||||
margin-top: -40px;
|
||||
}
|
||||
.call-index-copy {
|
||||
font-size: 1.2em;
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,4 @@
|
|||
import { IndexPageComponent } from './index.page.component';
|
||||
import { SidenavPageComponent } from './sidenav.page.component';
|
||||
import { CallHistoryPageComponent } from './call-history.page.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
IndexPageComponent,
|
||||
SidenavPageComponent,
|
||||
CallHistoryPageComponent
|
||||
];
|
||||
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
|
||||
|
|
|
|||
|
|
@ -1,21 +1,3 @@
|
|||
<div class="sidenav-container call" fxFlexFill fxLayout="column">
|
||||
<div class="title-section" fxFlex="0 0 50px" fxLayout="row">
|
||||
<div class="title">
|
||||
<h3 fxFlex="1 1 auto">{{ 'call:label.call' | ucapI18n }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra-box" fxFlex="0 0 50px">
|
||||
<app-organization-search-for-tenant
|
||||
[isBackspaceCanceled]="isBackspaceCanceled"
|
||||
[(searchData)]="companySearchData"
|
||||
(canceled)="onSearchCancel()"
|
||||
>
|
||||
</app-organization-search-for-tenant>
|
||||
</div>
|
||||
|
||||
<div fxFlex="1 1 auto">
|
||||
<app-sections-call-list
|
||||
[searchObj]="companySearchData"
|
||||
></app-sections-call-list>
|
||||
</div>
|
||||
<div fxFlexFill>
|
||||
sidenav page of call is works!
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.sidenav-container.call {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,109 +1,13 @@
|
|||
import { Subject, combineLatest } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef
|
||||
} from '@angular/core';
|
||||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import { User } from '@ucap/domain-organization';
|
||||
import { LoginSession, LoginInfo } from '@ucap/domain-authentication';
|
||||
import { SearchType, SearchDirectionByDateType } from '@ucap/domain-call';
|
||||
import { CallHistoryInfoRequest } from '@ucap/api-contact';
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { CallActions } from '@ucap/ng-store-call';
|
||||
|
||||
import { UserSelector } from '@ucap/ng-store-organization';
|
||||
import { LoginSelector } from '@ucap/ng-store-authentication';
|
||||
|
||||
import { SearchData } from '@app/ucap/organization/models/search-data';
|
||||
import { AppAuthenticationService } from '@app/services/app-authentication.service';
|
||||
|
||||
import moment from 'moment';
|
||||
import { environment } from '@environments';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-call-sidenav',
|
||||
templateUrl: './sidenav.page.component.html',
|
||||
styleUrls: ['./sidenav.page.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
styleUrls: ['./sidenav.page.component.scss']
|
||||
})
|
||||
export class SidenavPageComponent implements OnInit, OnDestroy {
|
||||
set companySearchData(searchData: SearchData) {
|
||||
if (!!searchData && searchData.searchWord !== '') {
|
||||
this._companySearchData = { ...searchData, bySearch: true };
|
||||
} else {
|
||||
this._companySearchData = { ...searchData, bySearch: false };
|
||||
}
|
||||
}
|
||||
get companySearchData() {
|
||||
return this._companySearchData;
|
||||
}
|
||||
// tslint:disable-next-line: variable-name
|
||||
_companySearchData: SearchData;
|
||||
isBackspaceCanceled = true;
|
||||
|
||||
user: User;
|
||||
loginInfo: LoginInfo;
|
||||
loginSession: LoginSession;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private appAuthenticationService: AppAuthenticationService,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private logService: LogService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
combineLatest([
|
||||
this.store.pipe(select(UserSelector.user)),
|
||||
this.store.pipe(select(LoginSelector.loginInfo))
|
||||
])
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe(([user, loginInfo]) => {
|
||||
if (!!user && !!loginInfo) {
|
||||
this.user = user;
|
||||
this.loginInfo = loginInfo;
|
||||
this.loginSession = this.appAuthenticationService.getLoginSession();
|
||||
|
||||
this._retrieveCallHistory();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onSearchCancel() {
|
||||
this.companySearchData = { ...this.companySearchData, searchWord: '' };
|
||||
}
|
||||
|
||||
private _retrieveCallHistory() {
|
||||
const searchStartDate = moment(new Date()).format('YYYY-MM-DD_HH:mm:ss');
|
||||
const req: CallHistoryInfoRequest = {
|
||||
userSeq: String(this.user.info.seq),
|
||||
deviceType: this.loginSession.deviceType,
|
||||
token: this.loginInfo.tokenString,
|
||||
searchType: SearchType.All,
|
||||
searchUserSeq: '',
|
||||
searchNumber: '',
|
||||
searchDate: '',
|
||||
searchStartDate,
|
||||
searchListCount:
|
||||
environment.productConfig.call.historyRequestDefaultCount,
|
||||
searchDirection: SearchDirectionByDateType.Before
|
||||
};
|
||||
this.store.dispatch(CallActions.callHistory({ req }));
|
||||
}
|
||||
export class SidenavPageComponent {
|
||||
constructor(private logService: LogService) {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
export enum QueryParams {
|
||||
ID = 'id'
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@ 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 = [
|
||||
{
|
||||
|
|
@ -11,11 +10,6 @@ const routes: Routes = [
|
|||
outlet: 'content',
|
||||
component: IndexPageComponent
|
||||
},
|
||||
{
|
||||
path: 'chatroom',
|
||||
outlet: 'content',
|
||||
component: ChatRoomPageComponent
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: SidenavPageComponent
|
||||
|
|
|
|||
|
|
@ -5,50 +5,31 @@ 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 { MatTooltipModule } from '@angular/material/tooltip';
|
||||
|
||||
import { AppChatSectionModule } from '@app/sections/chat/chat.section.module';
|
||||
|
||||
import { AppChatRoutingPageModule } from './chat-routing.page.module';
|
||||
|
||||
import { UiCoreModule } from '@ucap/ng-ui/core';
|
||||
import { UiDateModule } from '@ucap/ng-ui/date';
|
||||
import { UiViewerModule } from '@ucap/ng-ui/viewer';
|
||||
import { IndexPageComponent } from './components/index.page.component';
|
||||
import { SidenavPageComponent } from './components/sidenav.page.component';
|
||||
|
||||
import { COMPONENTS } from './components';
|
||||
import { UCAP_I18N_NAMESPACE, I18nModule } from '@ucap/ng-i18n';
|
||||
import { UiModule } from '@ucap/ng-ui';
|
||||
|
||||
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
|
||||
|
||||
export { IndexPageComponent, SidenavPageComponent };
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatCheckboxModule,
|
||||
MatButtonModule,
|
||||
MatSidenavModule,
|
||||
MatTooltipModule,
|
||||
|
||||
UiCoreModule,
|
||||
UiDateModule,
|
||||
UiViewerModule,
|
||||
|
||||
AppChatSectionModule,
|
||||
AppChatRoutingPageModule,
|
||||
|
||||
I18nModule
|
||||
UiModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: [],
|
||||
providers: [
|
||||
{
|
||||
provide: UCAP_I18N_NAMESPACE,
|
||||
useValue: ['chat', 'common']
|
||||
}
|
||||
]
|
||||
entryComponents: []
|
||||
})
|
||||
export class AppChatPageModule {}
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
<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($event)"
|
||||
></app-sections-chat-info>
|
||||
</div>
|
||||
<app-sections-chat-chat-search
|
||||
[isChatSearch]="isChatSearch"
|
||||
(chatSearch)="onChatSearch($event)"
|
||||
(closeChatSearch)="isChatSearch = false"
|
||||
></app-sections-chat-chat-search>
|
||||
<mat-drawer-container autosize fxFlex="1 1 auto" fxLayout="column">
|
||||
<div
|
||||
class="message-box-container"
|
||||
fxFlex="1 1 auto"
|
||||
fxLayout="column"
|
||||
ucapFileUploadFor01
|
||||
(fileSelected)="onFileSelected($event)"
|
||||
(fileDragEnter)="onFileDragEnter($event)"
|
||||
(fileDragOver)="onFileDragOver($event)"
|
||||
(fileDragLeave)="onFileDragLeave($event)"
|
||||
>
|
||||
<div class="message-area" fxFlex="1 1 auto">
|
||||
<app-sections-chat-message
|
||||
#chatMessageSections
|
||||
[roomId]="roomId"
|
||||
[translationSimpleview]="translationSimpleview"
|
||||
[eventSendTrigger$]="eventSendTriggerSubject.asObservable()"
|
||||
></app-sections-chat-message>
|
||||
</div>
|
||||
<div class="message-input" fxFlex="0 0 auto">
|
||||
<app-sections-chat-form
|
||||
#chatForm
|
||||
[roomId]="roomId"
|
||||
(changeTranslationSimpleview)="translationSimpleview = $event"
|
||||
(eventSendTrigger)="eventSendTriggerSubject.next($event)"
|
||||
(openFormSelector)="onOpenFormSelector()"
|
||||
></app-sections-chat-form>
|
||||
</div>
|
||||
</div>
|
||||
<mat-drawer #chatRightDrawer mode="side" position="end" class="rightDrawer">
|
||||
<ng-container [ngSwitch]="drawerType">
|
||||
<app-drawer-chat-attach-data
|
||||
*ngSwitchCase="
|
||||
[
|
||||
ChatDrawType.AttachImage,
|
||||
ChatDrawType.AttachVideo,
|
||||
ChatDrawType.AttachFile
|
||||
].includes(drawerType)
|
||||
? drawerType
|
||||
: ''
|
||||
"
|
||||
[roomId]="roomId"
|
||||
[drawerType]="drawerType"
|
||||
(closed)="onRightDrawerClose()"
|
||||
></app-drawer-chat-attach-data>
|
||||
<app-drawer-chat-users
|
||||
*ngSwitchCase="ChatDrawType.RoomUsers"
|
||||
[roomId]="roomId"
|
||||
(closed)="onRightDrawerClose()"
|
||||
(rightDrawerToggle)="onRightDrawerToggle($event)"
|
||||
></app-drawer-chat-users>
|
||||
<app-drawer-chat-add-users
|
||||
*ngSwitchCase="ChatDrawType.Invite"
|
||||
[roomId]="roomId"
|
||||
[returnChatDrawerType]="returnDrawerType"
|
||||
(closed)="onRightDrawerClose()"
|
||||
(rightDrawerToggle)="onRightDrawerToggle($event)"
|
||||
></app-drawer-chat-add-users>
|
||||
<app-drawer-chat-add-group
|
||||
*ngSwitchCase="ChatDrawType.AddGroup"
|
||||
[roomId]="roomId"
|
||||
[returnChatDrawerType]="returnDrawerType"
|
||||
(closed)="onRightDrawerClose()"
|
||||
(rightDrawerToggle)="onRightDrawerToggle($event)"
|
||||
></app-drawer-chat-add-group>
|
||||
<app-drawer-chat-setting
|
||||
*ngSwitchCase="ChatDrawType.Setting"
|
||||
[roomId]="roomId"
|
||||
(closed)="onRightDrawerClose()"
|
||||
></app-drawer-chat-setting>
|
||||
</ng-container>
|
||||
</mat-drawer>
|
||||
</mat-drawer-container>
|
||||
</div>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.contents-main {
|
||||
position: relative;
|
||||
.subtitle {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
.message-box-container {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
.message-area {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.message-input {
|
||||
max-height: 70%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 1px 0;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
.rightDrawer {
|
||||
min-width: 360px;
|
||||
max-width: 100%;
|
||||
@include screen(xs) {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
import { Subject, BehaviorSubject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
|
||||
import { ChattingActions } from '@ucap/ng-store-chat';
|
||||
|
||||
import { MessageSectionComponent } from '@app/sections/chat/components/message.section.component';
|
||||
import {
|
||||
FormSectionComponent,
|
||||
SelectorType
|
||||
} from '@app/sections/chat/components/form.section.component';
|
||||
|
||||
import { QueryParams } from '../types/params.type';
|
||||
import { ChatDrawType } from '../types/chat-draw.type';
|
||||
import { DrawInfo } from '../models/draw-info';
|
||||
import { SearchInfo } from '../models/search-info';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-chat-room',
|
||||
templateUrl: './chat-room.page.component.html',
|
||||
styleUrls: ['./chat-room.page.component.scss']
|
||||
})
|
||||
export class ChatRoomPageComponent implements OnInit, OnDestroy {
|
||||
isChatSearch = false;
|
||||
searchObj: SearchInfo = {
|
||||
isShowSearch: false,
|
||||
searchWord: ''
|
||||
};
|
||||
|
||||
roomId: string;
|
||||
translationSimpleview = false;
|
||||
|
||||
drawerType: ChatDrawType | null;
|
||||
returnDrawerType: ChatDrawType | null;
|
||||
eventSendTriggerSubject: BehaviorSubject<any> = new BehaviorSubject<any>(0);
|
||||
|
||||
@ViewChild('chatMessageSections', { static: false })
|
||||
chatMessageSections: MessageSectionComponent;
|
||||
|
||||
@ViewChild('chatRightDrawer', { static: false })
|
||||
chatRightDrawer: MatDrawer;
|
||||
|
||||
@ViewChild('chatForm', { static: false })
|
||||
chatForm: FormSectionComponent;
|
||||
|
||||
ChatDrawType = ChatDrawType;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private activatedRoute: ActivatedRoute
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.activatedRoute.queryParams
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((params: Params) => {
|
||||
const seqParam = params[QueryParams.ROOM_ID];
|
||||
|
||||
// initializing by roomId Change.
|
||||
if (this.roomId !== seqParam) {
|
||||
// close Right Drawer.
|
||||
if (!!this.chatRightDrawer) {
|
||||
this.chatRightDrawer.close();
|
||||
}
|
||||
|
||||
// close Chat Search area.
|
||||
this.isChatSearch = false;
|
||||
this.searchObj = {
|
||||
isShowSearch: false,
|
||||
searchWord: ''
|
||||
};
|
||||
}
|
||||
|
||||
// setting roomId.
|
||||
this.roomId = !!seqParam ? seqParam : undefined;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
|
||||
if (!!this.eventSendTriggerSubject) {
|
||||
this.eventSendTriggerSubject.complete();
|
||||
}
|
||||
|
||||
// this.store.dispatch(RoomActions.clearSelectedRoom({ roomId: this.roomId }));
|
||||
this.store.dispatch(ChattingActions.clearActiveRoomId({}));
|
||||
}
|
||||
|
||||
/** About Form Selector */
|
||||
onOpenFormSelector() {
|
||||
if (!!this.chatMessageSections) {
|
||||
this.chatMessageSections.refreshAndScrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
/** About Right drawer */
|
||||
onRightDrawerToggle(type: DrawInfo | null): void {
|
||||
this.drawerType = type.chatDrawType;
|
||||
this.returnDrawerType = !!type.returnDrawType ? type.returnDrawType : null;
|
||||
this.chatRightDrawer.open();
|
||||
}
|
||||
onRightDrawerClose(): void {
|
||||
this.drawerType = null;
|
||||
this.returnDrawerType = null;
|
||||
this.chatRightDrawer.close();
|
||||
}
|
||||
|
||||
/** About File Drag & Drop */
|
||||
onFileSelected(fileList: FileList) {
|
||||
if (!!this.chatForm) {
|
||||
this.chatForm.onDragAndDropFileupload(fileList); // direct upload
|
||||
// this.chatForm.onDragAndDropStandbyFileupload(fileList); // standby and confirm upload.(complate not yet)
|
||||
}
|
||||
}
|
||||
onFileDragEnter(event: DataTransferItemList) {
|
||||
// if (!!this.chatForm) {
|
||||
// this.chatForm.onOpenSelector(SelectorType.FILEUPLOAD);
|
||||
// }
|
||||
}
|
||||
onFileDragOver(event: DragEvent) {}
|
||||
onFileDragLeave(event: DragEvent) {
|
||||
// if (!!this.chatForm) {
|
||||
// this.chatForm.clearSelector();
|
||||
// }
|
||||
}
|
||||
|
||||
/** About Chat search. */
|
||||
onChatSearch(search: SearchInfo) {
|
||||
this.searchObj = search;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +1 @@
|
|||
<div class="index-page-chat-info">
|
||||
<div class="ico-page-chat">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 166 142">
|
||||
<g transform="translate(-152.267 -127.865)">
|
||||
<path
|
||||
d="M0 0H166V142H0z"
|
||||
data-name="square-01"
|
||||
transform="translate(152.267 127.865)"
|
||||
style="fill: none;"
|
||||
/>
|
||||
<path
|
||||
d="M45.694 2a43.788 43.788 0 0 1 33.84 71.495l8.744 8.756a4.269 4.269 0 0 1-3.235 7.311H45.694a43.781 43.781 0 0 1 0-87.562z"
|
||||
data-name="comment-dots-01"
|
||||
transform="translate(199.283 158.998)"
|
||||
style="stroke: #bababa; stroke-width: 4px; fill: #fff;"
|
||||
/>
|
||||
<path
|
||||
d="M26.015 2A24.012 24.012 0 0 0 7.458 41.206l-4.8 4.8a2.341 2.341 0 0 0 1.774 4.009h21.583a24.009 24.009 0 0 0 0-48.015z"
|
||||
data-name="comment-dots-02"
|
||||
transform="translate(167.028 170.336)"
|
||||
style="fill: #999;"
|
||||
/>
|
||||
<path
|
||||
d="M33.725 5.917a5.628 5.628 0 1 1 11.242 0 5.628 5.628 0 1 1-11.242 0zm-16.862 0A5.775 5.775 0 0 1 22.483 0 5.775 5.775 0 0 1 28.1 5.917a5.774 5.774 0 0 1-5.621 5.917 5.774 5.774 0 0 1-5.617-5.917zM0 5.917A5.775 5.775 0 0 1 5.621 0a5.775 5.775 0 0 1 5.621 5.917 5.774 5.774 0 0 1-5.621 5.917A5.774 5.774 0 0 1 0 5.917z"
|
||||
transform="translate(223.585 197.682)"
|
||||
style="fill: #bababa;"
|
||||
/>
|
||||
<path
|
||||
d="M13.476 22.894l-7.509-6.82L3.41 18.38l10.066 9.143L35.086 7.9l-2.539-2.31z"
|
||||
transform="translate(174.515 180.942)"
|
||||
style="fill: #fff;"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="chat-index-copy">
|
||||
{{ 'chat:room.noSelectRoom' | ucapI18n }}
|
||||
</p>
|
||||
</div>
|
||||
Index page of chat is works!
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
.index-page-chat-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ico-page-chat {
|
||||
width: 166px;
|
||||
height: 142px;
|
||||
margin-top: -80px;
|
||||
}
|
||||
.chat-index-copy {
|
||||
font-size: 1.429em;
|
||||
color: #666;
|
||||
padding: 10px 20px;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin: 50px 0 0;
|
||||
}
|
||||
@include screen(xs) {
|
||||
.ico-page-chat {
|
||||
width: 120px;
|
||||
height: auto;
|
||||
margin-top: -40px;
|
||||
}
|
||||
.chat-index-copy {
|
||||
font-size: 1.2em;
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,4 @@
|
|||
import { IndexPageComponent } from './index.page.component';
|
||||
import { SidenavPageComponent } from './sidenav.page.component';
|
||||
import { ChatRoomPageComponent } from './chat-room.page.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
IndexPageComponent,
|
||||
SidenavPageComponent,
|
||||
ChatRoomPageComponent
|
||||
];
|
||||
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
|
||||
|
|
|
|||
|
|
@ -1,87 +1,27 @@
|
|||
<div fxFlexFill class="sidenav-container">
|
||||
<div class="chat-header">
|
||||
<h3>{{ 'chat:label.chat' | ucapI18n }}</h3>
|
||||
<div class="chat-menu-btn">
|
||||
<div class="group-header">
|
||||
<h3>대화</h3>
|
||||
<div class="group-menu-btn">
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="exit-room"
|
||||
[matTooltip]="'chat:label.exitFromRoom' | ucapI18n"
|
||||
(click)="onToggleChackable(true)"
|
||||
[matMenuTriggerFor]="groupMenu"
|
||||
aria-label="group menu"
|
||||
>
|
||||
<mat-icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g transform="translate(-1)">
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
transform="translate(1)"
|
||||
style="fill: none;"
|
||||
/>
|
||||
<g transform="translate(3 3)">
|
||||
<path
|
||||
d="M8.963 3h8.693a1.962 1.962 0 0 1 1.963 1.963v3.926h-1.963V4.963H8.963V18.7h8.693v-3.922h1.963V18.7a1.962 1.962 0 0 1-1.963 1.963H8.963A1.969 1.969 0 0 1 7 18.7V4.963A1.969 1.969 0 0 1 8.963 3z"
|
||||
style="fill: #666;"
|
||||
transform="translate(-7 -3)"
|
||||
/>
|
||||
<path
|
||||
d="M13.459 14.542l1.384 1.384 4.907-4.907-4.907-4.908-1.384 1.384 2.532 2.542H6.5V12h9.491z"
|
||||
style="fill: #666;"
|
||||
transform="translate(-.19 -2.326)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="exit-close"
|
||||
*ngIf="checkable"
|
||||
(click)="onToggleChackable(false)"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
<mat-icon>more_vert</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 class="chat-exit-info">
|
||||
{{ 'chat:label.exitFromRoom' | ucapI18n }}
|
||||
<span
|
||||
>( <strong>{{ this.selectedRoomList.length }}</strong
|
||||
>/{{
|
||||
!!this.searchObj.isShowSearch
|
||||
? this.searchResultList.length
|
||||
: this.roomList.length
|
||||
}}
|
||||
)</span
|
||||
>
|
||||
</div>
|
||||
<div class="chat-exit-checkbox">
|
||||
<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>
|
||||
|
||||
<mat-menu #groupMenu="matMenu">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.sidenav-container {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-content: flex-start;
|
||||
background-color: #f1f2f6;
|
||||
.chat-header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
padding: 0 5px 0 17px;
|
||||
background-color: $white;
|
||||
h3 {
|
||||
@include font-family-txt(18, left, $lipstick);
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
.chat-menu-btn {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
.exitRoomInfo {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
max-height: 50px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 17px;
|
||||
background-color: $white;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.chat-exit-info {
|
||||
font-size: 1em;
|
||||
color: $gray-re3;
|
||||
@include font-family($font-semibold, normal);
|
||||
font-weight: 600;
|
||||
span {
|
||||
color: $gray-re9;
|
||||
strong {
|
||||
color: $lipstick;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-exit-checkbox {
|
||||
justify-self: self-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,224 +1,37 @@
|
|||
import { Subject, of } from 'rxjs';
|
||||
import { takeUntil, take, map, catchError } from 'rxjs/operators';
|
||||
|
||||
import { Component, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
import { RoomInfo } from '@ucap/domain-chat';
|
||||
|
||||
import { ExitAllRequest } from '@ucap/protocol-room';
|
||||
import { Component, Inject, ChangeDetectorRef } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
import { RoomSelector, RoomActions } from '@ucap/ng-store-chat';
|
||||
|
||||
import {
|
||||
ConfirmDialogComponent,
|
||||
ConfirmDialogData,
|
||||
ConfirmDialogResult
|
||||
} from '@ucap/ng-ui/core';
|
||||
|
||||
import { AppChatService } from '@app/services/app-chat.service';
|
||||
import { AppRoomSelector } from '@app/store/state';
|
||||
|
||||
import { SearchInfo } from '../models/search-info';
|
||||
import { QueryParams } from '../types/params.type';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-chat-sidenav',
|
||||
templateUrl: './sidenav.page.component.html',
|
||||
styleUrls: ['./sidenav.page.component.scss']
|
||||
})
|
||||
export class SidenavPageComponent implements OnInit, OnDestroy {
|
||||
searchObj: SearchInfo = {
|
||||
export class SidenavPageComponent {
|
||||
searchObj: any = {
|
||||
isShowSearch: false,
|
||||
searchWord: ''
|
||||
};
|
||||
|
||||
checkable = false;
|
||||
|
||||
historyRoomId: string;
|
||||
|
||||
roomList: RoomInfo[];
|
||||
selectedRoomList: RoomInfo[] = [];
|
||||
searchResultList: RoomInfo[] = [];
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private dialog: MatDialog,
|
||||
private i18nService: I18nService,
|
||||
private logService: LogService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private appChatService: AppChatService,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(AppRoomSelector.historyRoomId)
|
||||
)
|
||||
.subscribe((historyRoomId) => {
|
||||
this.historyRoomId = historyRoomId;
|
||||
});
|
||||
}
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.activatedRoute.queryParams
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((params: Params) => {
|
||||
const seqParam = params[QueryParams.ROOM_ID];
|
||||
|
||||
if (!!seqParam) {
|
||||
this.appChatService.setHistoryRoomId(seqParam);
|
||||
}
|
||||
|
||||
if (
|
||||
seqParam === undefined &&
|
||||
!!this.historyRoomId &&
|
||||
this.historyRoomId.length > 0
|
||||
) {
|
||||
// exist history roomId.
|
||||
this.appChatService.openRoombyRoomId(this.historyRoomId);
|
||||
}
|
||||
});
|
||||
|
||||
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.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onToggleChackable(checkable: boolean): void {
|
||||
if (!!checkable) {
|
||||
if (!!this.selectedRoomList && this.selectedRoomList.length > 0) {
|
||||
const self = this;
|
||||
const dialogRef = this.dialog.open<
|
||||
ConfirmDialogComponent,
|
||||
ConfirmDialogData,
|
||||
ConfirmDialogResult
|
||||
>(ConfirmDialogComponent, {
|
||||
panelClass: 'min-create-dialog',
|
||||
data: {
|
||||
title: this.i18nService.t('chat:label.exitFromRoom'),
|
||||
html: this.i18nService.t('chat: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
|
||||
})
|
||||
);
|
||||
self.selectedRoomList = [];
|
||||
self.checkable = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
} 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.markForCheck();
|
||||
}
|
||||
|
||||
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 }) {
|
||||
onKeyDownSearch(params: { companyCode: string; searchWord: string }) {
|
||||
this.searchObj = {
|
||||
isShowSearch: true,
|
||||
searchWord: params.searchWord
|
||||
} as SearchInfo;
|
||||
this.changeDetectorRef.markForCheck();
|
||||
};
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
/** Searching cancel */
|
||||
|
||||
onClickCancel() {
|
||||
this.searchObj = {
|
||||
isShowSearch: false,
|
||||
searchWord: ''
|
||||
} as SearchInfo;
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
onSearchResultList(searchResultList: RoomInfo[]) {
|
||||
this.searchResultList = searchResultList;
|
||||
};
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
import { ChatDrawType } from '../types/chat-draw.type';
|
||||
|
||||
export interface DrawInfo {
|
||||
chatDrawType: ChatDrawType;
|
||||
returnDrawType?: ChatDrawType;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export interface SearchInfo {
|
||||
isShowSearch: boolean;
|
||||
searchWord: string;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
export enum ChatDrawType {
|
||||
AttachImage = 'ATTACHIMAGE',
|
||||
AttachVideo = 'ATTACHVIDEO',
|
||||
AttachFile = 'ATTACHFILE',
|
||||
Invite = 'INVITE',
|
||||
Setting = 'SETTING',
|
||||
RoomUsers = 'ROOMUSERS',
|
||||
AddGroup = 'ADDGROUP'
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export enum QueryParams {
|
||||
ROOM_ID = 'roomId'
|
||||
}
|
||||
|
|
@ -1,46 +1,11 @@
|
|||
<div fxLayout="column" class="index-container">
|
||||
<!--<div class="subtitle" fxFlex="60px">Welcome to M-Messenger</div>-->
|
||||
<div fxLayout="column">
|
||||
<div class="subtitle" fxFlex="30px">Welcome to M-Messenger</div>
|
||||
<div class="content-container" fxFlex="1 1 auto" fxLayout="row">
|
||||
<nav mat-tab-nav-bar color="accent" class="group-main-nav">
|
||||
<a
|
||||
mat-tab-link
|
||||
(click)="activeLink = 0"
|
||||
[active]="activeLink === 0 ? 'link' : undefined"
|
||||
>{{ profileName }}</a
|
||||
>
|
||||
<a
|
||||
mat-tab-link
|
||||
(click)="activeLink = 1"
|
||||
[active]="activeLink === 1 ? 'link' : undefined"
|
||||
>{{ tabName }}</a
|
||||
>
|
||||
</nav>
|
||||
<div
|
||||
class="profile-container"
|
||||
[ngClass]="activeLink === 0 ? 'active' : ''"
|
||||
fxFlex="44%"
|
||||
>
|
||||
<app-organization-profile-01
|
||||
[userSeq]="userSeq"
|
||||
[companyList]="companyList"
|
||||
(openChat)="onOpenChat($event)"
|
||||
(sendMessage)="onSendMessage($event)"
|
||||
(sendCall)="onSendCall($event)"
|
||||
(sendSms)="onSendSms($event)"
|
||||
(createConference)="onCreateConference($event)"
|
||||
(toggleFavorit)="onToggleFavorit($event)"
|
||||
(toggleBuddy)="onToggleBuddy($event)"
|
||||
(uploadProfileImage)="onUploadProfileImage($event)"
|
||||
(updateIntro)="onUpdateIntro($event)"
|
||||
(updateNickname)="onUpdateNickname($event)"
|
||||
>
|
||||
</app-organization-profile-01>
|
||||
<div class="profile-container" fxFlex="44%">
|
||||
<app-sections-group-profile [userSeq]="userSeq">
|
||||
</app-sections-group-profile>
|
||||
</div>
|
||||
<div
|
||||
class="group-info-container"
|
||||
[ngClass]="activeLink === 1 ? 'active' : ''"
|
||||
fxFlex="1 1 auto"
|
||||
>
|
||||
<div class="group-info-container" fxFlex="1 1 auto">
|
||||
<app-sections-group-info [userSeq]="userSeq"></app-sections-group-info>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,119 +1,9 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.index-container {
|
||||
.profile-container {
|
||||
height: 100%;
|
||||
padding: 30px 30px;
|
||||
overflow: auto;
|
||||
@include screen(lg) {
|
||||
padding: 0 20px 30px;
|
||||
}
|
||||
@include screen(mid) {
|
||||
padding: 0 15px 30px;
|
||||
}
|
||||
|
||||
@include screen(xs) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
@include screen(lg) {
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
@include screen(mid) {
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.group-main-nav {
|
||||
display: none;
|
||||
}
|
||||
@include screen(xs) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.group-main-nav {
|
||||
display: block;
|
||||
position: fixed;
|
||||
height: 49px;
|
||||
top: 40px;
|
||||
left: 60px;
|
||||
z-index: 10;
|
||||
width: calc(100% - 60px);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
a {
|
||||
width: 50%;
|
||||
text-decoration: none;
|
||||
color: rgba(51, 51, 51, 0.6);
|
||||
font-weight: 600;
|
||||
&.mat-tab-label-active {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
flex: 0 0 460px !important;
|
||||
max-width: inherit !important;
|
||||
border-radius: 2px;
|
||||
@include screen(custom, min, 1540) {
|
||||
flex: 0 0 44% !important;
|
||||
}
|
||||
@include screen(lg) {
|
||||
flex: 1 0 auto !important;
|
||||
max-width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
@include screen(mid) {
|
||||
flex: 1 0 auto !important;
|
||||
max-width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
@include screen(xs) {
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-info-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
flex: 5 1 auto !important;
|
||||
@include screen(lg) {
|
||||
flex: 1 0 auto !important;
|
||||
max-width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
@include screen(mid) {
|
||||
flex: 1 0 auto !important;
|
||||
max-width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
@include screen(xs) {
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-info-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,269 +1,40 @@
|
|||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, take, map } from 'rxjs/operators';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectorRef,
|
||||
ChangeDetectionStrategy
|
||||
} from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Router, ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import { FileUploadItem } from '@ucap/domain-common';
|
||||
import {
|
||||
UserInfoSS,
|
||||
UserInfoF,
|
||||
UserInfoUpdateType,
|
||||
User,
|
||||
Company
|
||||
} from '@ucap/domain-organization';
|
||||
|
||||
import { FileProfileSaveRequest } from '@ucap/api-common';
|
||||
|
||||
import { ConferenceCreateRequest } from '@ucap/api-prompt';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
import { UserSelector, CompanySelector } from '@ucap/ng-store-organization';
|
||||
import { BuddySelector } from '@ucap/ng-store-group';
|
||||
import {
|
||||
LoginSelector,
|
||||
ConfigurationSelector
|
||||
} from '@ucap/ng-store-authentication';
|
||||
|
||||
import { UserInfoTypes, GroupManageType } from '@app/types';
|
||||
import { AppFileService } from '@app/services/app-file.service';
|
||||
import { AppAuthenticationService } from '@app/services/app-authentication.service';
|
||||
import { AppGroupService } from '@app/services/app-group.service';
|
||||
|
||||
import { QueryParams } from '../types/params.type';
|
||||
import { AppChatService } from '@app/services/app-chat.service';
|
||||
|
||||
import {
|
||||
EditUserDialogComponent,
|
||||
EditUserDialogData,
|
||||
EditUserDialogResult
|
||||
} from '@app/sections/group/dialogs/edit-user.dialog.component';
|
||||
import { LoginInfo, VersionInfo } from '@ucap/domain-authentication';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-group-index',
|
||||
templateUrl: './index.page.component.html',
|
||||
styleUrls: ['./index.page.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
styleUrls: ['./index.page.component.scss']
|
||||
})
|
||||
export class IndexPageComponent implements OnInit, OnDestroy {
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
private paramsSubscription: Subscription;
|
||||
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private store: Store<any>,
|
||||
private router: Router,
|
||||
private logService: LogService,
|
||||
private dialog: MatDialog,
|
||||
private i18nService: I18nService,
|
||||
private appFileServie: AppFileService,
|
||||
private appAuthenticationService: AppAuthenticationService,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private appChatService: AppChatService,
|
||||
private appGroupService: AppGroupService
|
||||
) {
|
||||
this.profileName = this.i18nService.t('organization:profile.me');
|
||||
this.tabName = this.i18nService.t('organization:profile.chatWithUs');
|
||||
}
|
||||
private logService: LogService
|
||||
) {}
|
||||
|
||||
userSeq: string = undefined;
|
||||
user: User;
|
||||
loginInfo: LoginInfo;
|
||||
versionInfo: VersionInfo;
|
||||
activeLink = 0;
|
||||
tabName: string;
|
||||
profileName: string;
|
||||
buddyList: UserInfoTypes[];
|
||||
companyList: Company[];
|
||||
userSeq: string;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.activatedRoute.queryParams
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((params: Params) => {
|
||||
this.paramsSubscription = this.activatedRoute.queryParams.subscribe(
|
||||
(params: Params) => {
|
||||
const seqParam = params[QueryParams.ID];
|
||||
if (!!seqParam) {
|
||||
this.userSeq = seqParam;
|
||||
} else {
|
||||
this.userSeq = '';
|
||||
}
|
||||
this._refreshProfile();
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
|
||||
.subscribe((user) => {
|
||||
this.user = user;
|
||||
this._refreshProfile();
|
||||
});
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
|
||||
.subscribe((loginInfo) => {
|
||||
this.loginInfo = loginInfo;
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(ConfigurationSelector.versionInfo)
|
||||
)
|
||||
.subscribe((versionInfo) => {
|
||||
this.versionInfo = versionInfo;
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(takeUntil(this.ngOnDestroySubject), select(BuddySelector.buddies))
|
||||
.subscribe((buddies) => {
|
||||
this.buddyList = buddies;
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(CompanySelector.companyList)
|
||||
)
|
||||
.subscribe((companyList) => {
|
||||
if (!companyList) {
|
||||
return;
|
||||
}
|
||||
this.companyList = companyList;
|
||||
});
|
||||
this.userSeq = !!seqParam ? seqParam : undefined;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
if (!!this.paramsSubscription) {
|
||||
this.paramsSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
onOpenChat(userInfo: UserInfoSS) {
|
||||
this.appChatService.newOpenRoom(
|
||||
[Number(userInfo.seq) as any],
|
||||
false,
|
||||
this.user
|
||||
);
|
||||
}
|
||||
onSendMessage(userInfo: UserInfoSS) {}
|
||||
onSendCall(call: string) {}
|
||||
onSendSms(employeeNum: string) {}
|
||||
onCreateConference(userSeq: number) {
|
||||
const loginSession = this.appAuthenticationService.getLoginSession();
|
||||
const req: ConferenceCreateRequest = {
|
||||
userSeq: String(this.user.info.seq),
|
||||
deviceType: loginSession.deviceType,
|
||||
tokenKey: this.loginInfo.tokenString,
|
||||
targetUserSeqs: [userSeq]
|
||||
};
|
||||
this.appChatService.openVideoConference(req);
|
||||
}
|
||||
onToggleFavorit(params: { userInfo: UserInfoSS; isFavorite: boolean }) {
|
||||
this.appGroupService.updateBuddy(params.userInfo, params.isFavorite);
|
||||
}
|
||||
onToggleBuddy(params: { userInfo: UserInfoSS; isBuddy: boolean }) {
|
||||
if (params.isBuddy) {
|
||||
// 동료추가
|
||||
const dialogRef = this.dialog.open<
|
||||
EditUserDialogComponent,
|
||||
EditUserDialogData,
|
||||
EditUserDialogResult
|
||||
>(EditUserDialogComponent, {
|
||||
panelClass: 'max-create-dialog',
|
||||
data: {
|
||||
title: this.i18nService.t('group:dialog.title.addBuddy'),
|
||||
type: GroupManageType.Add,
|
||||
userInfos: [params.userInfo]
|
||||
}
|
||||
});
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(
|
||||
take(1),
|
||||
map((result: EditUserDialogResult) => {
|
||||
if (!!result) {
|
||||
this.appGroupService.addBuddy(result);
|
||||
}
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
} else {
|
||||
// 동료삭제
|
||||
this.appGroupService.removeBuddy(params.userInfo).then(() => {
|
||||
this.router.navigate(
|
||||
[
|
||||
'group',
|
||||
{
|
||||
outlets: { content: 'index' }
|
||||
}
|
||||
],
|
||||
{
|
||||
queryParams: { id: Number(params.userInfo.seq) }
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
onUploadProfileImage(profileImageFileUploadItem: FileUploadItem) {
|
||||
const loginSession = this.appAuthenticationService.getLoginSession();
|
||||
|
||||
const profile = {
|
||||
userSeq: String(this.user.info.seq),
|
||||
deviceType: loginSession.deviceType,
|
||||
token: this.loginInfo.tokenString,
|
||||
file: profileImageFileUploadItem.file,
|
||||
fileUploadItem: profileImageFileUploadItem
|
||||
} as FileProfileSaveRequest;
|
||||
|
||||
this.appFileServie.fileProfileSave(
|
||||
profile,
|
||||
this.versionInfo.profileUploadUrl
|
||||
);
|
||||
}
|
||||
onUpdateIntro(intro: string) {
|
||||
this.appGroupService.updateIntro(intro, UserInfoUpdateType.Intro);
|
||||
}
|
||||
|
||||
onUpdateNickname(params: { userInfo: UserInfoTypes; nickname: string }) {
|
||||
const isBuddy = this.appGroupService.checkBuddy(
|
||||
this.buddyList,
|
||||
params.userInfo
|
||||
);
|
||||
|
||||
if (!isBuddy) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.appGroupService.updateNickname(
|
||||
params.userInfo as UserInfoF,
|
||||
params.nickname
|
||||
);
|
||||
}
|
||||
|
||||
private _refreshProfile() {
|
||||
if (!this.user || undefined === this.userSeq) {
|
||||
return;
|
||||
}
|
||||
if ('' === this.userSeq) {
|
||||
this.userSeq = String(this.user.info.seq);
|
||||
}
|
||||
|
||||
if (String(this.user.info.seq) === String(this.userSeq)) {
|
||||
this.profileName = this.i18nService.t('organization:profile.me');
|
||||
this.tabName = this.i18nService.t('organization:profile.unreadChat');
|
||||
} else {
|
||||
this.profileName = this.i18nService.t('organization:profile.other');
|
||||
this.tabName = this.i18nService.t('organization:profile.chatWithUs');
|
||||
}
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,80 +1,50 @@
|
|||
<div class="sidenav-container group" fxFlexFill fxLayout="column">
|
||||
<div class="title-section" fxFlex="0 0 50px" fxLayout="row">
|
||||
<div class="title">
|
||||
<h3 fxFlex="1 1 auto">{{ 'group:label.group' | ucapI18n }}</h3>
|
||||
<div class="menu-btn">
|
||||
<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 class="sidenav-container" fxFlexFill fxLayout="column">
|
||||
<div class="sub-header" fxFlex="50px" fxLayout="row">
|
||||
<h3 fxFlex="1 1 auto">그룹</h3>
|
||||
<div class="menu-btn" fxFlex="70px">
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="groupViewMenu"
|
||||
aria-label="group view menu"
|
||||
>
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="groupMenu"
|
||||
aria-label="group menu"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra-box" fxFlex="0 0 50px">
|
||||
<app-organization-search-for-tenant
|
||||
[isBackspaceCanceled]="isBackspaceCanceled"
|
||||
[(searchData)]="companySearchData"
|
||||
(canceled)="onSearchCancel()"
|
||||
<div class="extra-box" fxFlex="50px">
|
||||
<app-sections-group-search
|
||||
(keyDownEnter)="onKeyDownSearch($event)"
|
||||
(searchCancel)="onClickCancel()"
|
||||
>
|
||||
</app-organization-search-for-tenant>
|
||||
</app-sections-group-search>
|
||||
</div>
|
||||
|
||||
<div fxFlex="1 1 auto">
|
||||
<app-sections-group-list
|
||||
#sectionGroupList
|
||||
[searchData]="companySearchData"
|
||||
[showType]="showType"
|
||||
(clickUser)="onClickUser($event)"
|
||||
(openProfile)="onOpenProfile($event)"
|
||||
fxFlexFill
|
||||
[searchObj]="searchObj"
|
||||
></app-sections-group-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-menu #groupMenu="matMenu">
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
|
||||
<mat-icon matPrefix class="material-icons-outlined">person_add</mat-icon
|
||||
>{{ 'group:contextMenu.addNewGroup' | ucapI18n }}
|
||||
새그룹 추가
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
|
||||
<mat-icon matPrefix>keyboard_arrow_down</mat-icon
|
||||
>{{ 'group:contextMenu.expandMore' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
|
||||
<mat-icon matPrefix>keyboard_arrow_up</mat-icon
|
||||
>{{ 'group:contextMenu.expandLess' | ucapI18n }}
|
||||
</button>
|
||||
<!-- <button mat-menu-item (click)="onClickGroupMenu('GROUP_CHANGE_ODER')">
|
||||
<mat-icon matPrefix>low_priority</mat-icon
|
||||
>{{ 'group:contextMenu.changeOrder' | ucapI18n }}
|
||||
</button> -->
|
||||
<button mat-menu-item>그룹전체 열기</button>
|
||||
<button mat-menu-item>그룹전체 닫기</button>
|
||||
<button mat-menu-item>그룹순서 바꾸기</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu #groupViewMenu="matMenu">
|
||||
<button mat-menu-item (click)="onClickShowGroupMenu(sortViewType.all)">
|
||||
<mat-icon matPrefix>{{ showGroupMenuIcon(sortViewType.all) }}</mat-icon
|
||||
>{{ 'group:contextMenu.all' | ucapI18n }}
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="onClickShowGroupMenu(sortViewType.onlineBuddy)"
|
||||
>
|
||||
<mat-icon matPrefix>{{
|
||||
showGroupMenuIcon(sortViewType.onlineBuddy)
|
||||
}}</mat-icon
|
||||
>{{ 'group:contextMenu.onlineBuddy' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickShowGroupMenu(sortViewType.onOff)">
|
||||
<mat-icon matPrefix>{{ showGroupMenuIcon(sortViewType.onOff) }}</mat-icon
|
||||
>{{ 'group:contextMenu.onOffBuddy' | ucapI18n }}
|
||||
</button>
|
||||
<button mat-menu-item>전체보기</button>
|
||||
<button mat-menu-item>접속한 동료만 보기</button>
|
||||
<button mat-menu-item>온/오프라인 보기</button>
|
||||
</mat-menu>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,3 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.sidenav-container.group {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,208 +1,72 @@
|
|||
import { of, Subject } from 'rxjs';
|
||||
import { take, map, catchError, takeUntil } from 'rxjs/operators';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectorRef,
|
||||
ViewChild,
|
||||
ChangeDetectionStrategy,
|
||||
NgZone
|
||||
} from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
import { UserInfo } from '@ucap/domain-organization';
|
||||
import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
||||
import { ActivatedRoute, Router, Params } from '@angular/router';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
import { I18nService } from '@ucap/ng-i18n';
|
||||
|
||||
import { SearchData } from '@app/ucap/organization/models/search-data';
|
||||
|
||||
import { LoginSession } from '@app/models/login-session';
|
||||
import { AppUiService } from '@app/services/app-ui.service';
|
||||
import { AppAuthenticationService } from '@app/services/app-authentication.service';
|
||||
import { CreateDialogComponent } from '@app/sections/group/dialogs/create.dialog.component';
|
||||
import { ListSectionComponent } from '@app/sections/group/components/list.section.component';
|
||||
|
||||
import { SortViewType } from '../types/sort-view.type';
|
||||
import { QueryParams } from '../types/params.type';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { CreateChatDialogComponent } from '@app/sections/group/components/component-ui/dialogs/create-chat.dialog.component';
|
||||
import { SelectUserDialogType } from '@app/types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-group-sidenav',
|
||||
templateUrl: './sidenav.page.component.html',
|
||||
styleUrls: ['./sidenav.page.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
styleUrls: ['./sidenav.page.component.scss']
|
||||
})
|
||||
export class SidenavPageComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('sectionGroupList', { static: false })
|
||||
sectionGroupList: ListSectionComponent;
|
||||
searchObj: any = {
|
||||
isShowSearch: false,
|
||||
companyCode: '',
|
||||
searchWord: ''
|
||||
};
|
||||
|
||||
set companySearchData(searchData: SearchData) {
|
||||
if (!!searchData && searchData.searchWord !== '') {
|
||||
this._companySearchData = { ...searchData, bySearch: true };
|
||||
} else {
|
||||
this._companySearchData = { ...searchData, bySearch: false };
|
||||
}
|
||||
}
|
||||
get companySearchData() {
|
||||
return this._companySearchData;
|
||||
}
|
||||
// tslint:disable-next-line: variable-name
|
||||
_companySearchData: SearchData;
|
||||
isBackspaceCanceled = true;
|
||||
showType: SortViewType;
|
||||
sortViewType = SortViewType;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
private loginSession: LoginSession;
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private router: Router,
|
||||
private appAuthenticationService: AppAuthenticationService,
|
||||
private logService: LogService,
|
||||
private i18nService: I18nService,
|
||||
private store: Store<any>,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
public dialog: MatDialog,
|
||||
private appUiService: AppUiService,
|
||||
private ngZone: NgZone
|
||||
public dialog: MatDialog
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.showType = SortViewType.all;
|
||||
this.showGroupMenuIcon(SortViewType.all);
|
||||
ngOnInit(): void {}
|
||||
|
||||
this.appAuthenticationService
|
||||
.getLoginSession$()
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((loginSession) => {
|
||||
this.loginSession = loginSession;
|
||||
if (
|
||||
!!this.loginSession &&
|
||||
!!this.loginSession.groupInfo &&
|
||||
!!this.loginSession.groupInfo.showType
|
||||
) {
|
||||
this.showType = this.loginSession.groupInfo.showType;
|
||||
this.showGroupMenuIcon(this.loginSession.groupInfo.showType);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
ngOnDestroy(): void {}
|
||||
|
||||
onClickFab(event: MouseEvent) {}
|
||||
onKeyDownSearch(params: { companyCode: string; searchWord: string }) {
|
||||
this.searchObj = {
|
||||
isShowSearch: true,
|
||||
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, {
|
||||
panelClass: 'max-create-dialog'
|
||||
this.dialog.open(CreateChatDialogComponent, {
|
||||
width: '850px',
|
||||
height: '600px',
|
||||
data: {
|
||||
type: SelectUserDialogType.NewGroup,
|
||||
title: '새 그룹 추가'
|
||||
}
|
||||
});
|
||||
|
||||
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: SortViewType) {
|
||||
switch (menuType) {
|
||||
case SortViewType.all:
|
||||
{
|
||||
this.showType = SortViewType.all;
|
||||
}
|
||||
break;
|
||||
case SortViewType.onlineBuddy:
|
||||
{
|
||||
this.showType = SortViewType.onlineBuddy;
|
||||
}
|
||||
break;
|
||||
case SortViewType.onOff:
|
||||
{
|
||||
this.showType = SortViewType.onOff;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if (
|
||||
!!this.loginSession &&
|
||||
!!this.loginSession.groupInfo &&
|
||||
!!this.loginSession.groupInfo.showType
|
||||
) {
|
||||
this.appAuthenticationService.setLoginSession({
|
||||
...this.loginSession,
|
||||
groupInfo: {
|
||||
groupSeqs: [],
|
||||
lastGroupSeq: 0,
|
||||
showType: this.showType
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
onSearchCancel() {
|
||||
this.companySearchData = { ...this.companySearchData, searchWord: '' };
|
||||
}
|
||||
|
||||
showGroupMenuIcon(menuType: SortViewType): string {
|
||||
if (this.showType === menuType) {
|
||||
return 'check_circle';
|
||||
}
|
||||
|
||||
return 'check_circle_outline';
|
||||
}
|
||||
|
||||
onClickUser(userInfo: UserInfo) {
|
||||
this.ngZone.run(() => {
|
||||
this.router.navigate(
|
||||
[
|
||||
'group',
|
||||
{
|
||||
outlets: { content: 'index' }
|
||||
}
|
||||
],
|
||||
{
|
||||
queryParams: { id: Number(userInfo.seq) }
|
||||
}
|
||||
);
|
||||
|
||||
this.appUiService.closeLeftSidenavOnNarrowMode();
|
||||
});
|
||||
}
|
||||
|
||||
onOpenProfile(userInfo: UserInfo) {
|
||||
this.onClickUser(userInfo);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,46 +3,33 @@ 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 { MatTabsModule } from '@angular/material/tabs';
|
||||
|
||||
// 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 { COMPONENTS } from './components';
|
||||
import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
|
||||
import { IndexPageComponent } from './components/index.page.component';
|
||||
import { SidenavPageComponent } from './components/sidenav.page.component';
|
||||
|
||||
import { UiModule } from '@ucap/ng-ui';
|
||||
|
||||
export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
|
||||
|
||||
export { IndexPageComponent, SidenavPageComponent };
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatTabsModule,
|
||||
|
||||
AppOrganizationModule,
|
||||
|
||||
AppGroupSectionModule,
|
||||
AppGroupRoutingPageModule,
|
||||
|
||||
I18nModule
|
||||
UiModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: [],
|
||||
providers: [
|
||||
{
|
||||
provide: UCAP_I18N_NAMESPACE,
|
||||
useValue: ['group', 'common']
|
||||
}
|
||||
]
|
||||
entryComponents: []
|
||||
})
|
||||
export class AppGroupPageModule {}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
export enum SortViewType {
|
||||
all = 'ALL',
|
||||
onlineBuddy = 'ONLINE_BUDDY',
|
||||
onOff = 'ON_OFF'
|
||||
}
|
||||
|
|
@ -1,8 +1 @@
|
|||
<!--Index page of message is works!-->
|
||||
<div class="index-page-empty">
|
||||
<div class="ico-coming-soon"></div>
|
||||
<div class="coming-soon-index-copy">
|
||||
<span>Coming Soon</span>
|
||||
<span class="guide-text">곧 새로운 모습으로 찾아 뵙겠습니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
Index page of message is works!
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
.index-page-empty {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ico-coming-soon {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-top: -100px;
|
||||
background-image: url(/assets/images/ico/img_coming_soon.png);
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.coming-soon-index-copy {
|
||||
text-align: center;
|
||||
font-size: 2.4em;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
padding: 0 20px;
|
||||
//border-top: 1px solid #ccc;
|
||||
//border-bottom: 1px solid #ccc;
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
.guide-text {
|
||||
padding-top: 10px;
|
||||
font-size: 0.54em;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1 @@
|
|||
<div class="index-page-container" fxLayout="column">
|
||||
<!-- search start-->
|
||||
<div fxFlex="0 0 50px">
|
||||
<app-organization-search-for-tenant
|
||||
[isBackspaceCanceled]="isBackspaceCanceled"
|
||||
[(searchData)]="companySearchData"
|
||||
(canceled)="onCanceledSearch()"
|
||||
>
|
||||
</app-organization-search-for-tenant>
|
||||
</div>
|
||||
<!-- search end-->
|
||||
<div class="member-list-body" fxFlex="1 1 auto">
|
||||
<app-sections-organization-member-list [searchData]="deptSearchData">
|
||||
</app-sections-organization-member-list>
|
||||
</div>
|
||||
</div>
|
||||
Index page of organization is works!
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.index-page-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1,128 +1,10 @@
|
|||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectorRef,
|
||||
ChangeDetectionStrategy
|
||||
} from '@angular/core';
|
||||
import { ActivatedRoute, Router, Params } from '@angular/router';
|
||||
|
||||
import { ParamsUtil } from '@ucap/ng-core';
|
||||
|
||||
import { UserStore } from '@app/models/user-store';
|
||||
import { AppAuthenticationService } from '@app/services/app-authentication.service';
|
||||
import { SearchData } from '@app/ucap/organization/models/search-data';
|
||||
|
||||
import { QueryParams } from '../types/params.type';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-organization-index',
|
||||
templateUrl: './index.page.component.html',
|
||||
styleUrls: ['./index.page.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
styleUrls: ['./index.page.component.scss']
|
||||
})
|
||||
export class IndexPageComponent implements OnInit, OnDestroy {
|
||||
set companySearchData(searchData: SearchData) {
|
||||
this._companySearchData = searchData;
|
||||
this.onChangedCompanySearch();
|
||||
}
|
||||
get companySearchData() {
|
||||
return this._companySearchData;
|
||||
}
|
||||
// tslint:disable-next-line: variable-name
|
||||
_companySearchData: SearchData;
|
||||
|
||||
deptSearchData: SearchData;
|
||||
isBackspaceCanceled = true;
|
||||
deptSeq: string;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
private userStore: UserStore;
|
||||
|
||||
constructor(
|
||||
private appAuthenticationService: AppAuthenticationService,
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {
|
||||
this.userStore = this.appAuthenticationService.getUserStore();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.activatedRoute.queryParams
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe((params) => {
|
||||
if (!!params) {
|
||||
const deptSeq = params[QueryParams.DEPT_SEQ];
|
||||
const companyCode = params[QueryParams.COMPANY_CODE];
|
||||
const searchWord = params[QueryParams.SEARCH_WORD];
|
||||
const bySearch = ParamsUtil.getParameter<boolean>(
|
||||
params,
|
||||
QueryParams.BY_SEARCH,
|
||||
false
|
||||
);
|
||||
|
||||
if (!!deptSeq && this.deptSeq !== deptSeq) {
|
||||
this.deptSeq = deptSeq;
|
||||
}
|
||||
|
||||
this.deptSearchData = {
|
||||
deptSeq: bySearch ? undefined : deptSeq,
|
||||
companyCode: !!companyCode
|
||||
? companyCode
|
||||
: this.userStore.companyCode,
|
||||
searchWord: bySearch ? decodeURIComponent(searchWord) : undefined,
|
||||
bySearch
|
||||
};
|
||||
|
||||
this._companySearchData = {
|
||||
...this.deptSearchData
|
||||
};
|
||||
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onChangedCompanySearch() {
|
||||
const queryParams: Params = {};
|
||||
queryParams[QueryParams.COMPANY_CODE] = this._companySearchData.companyCode;
|
||||
queryParams[QueryParams.SEARCH_WORD] = encodeURIComponent(
|
||||
this._companySearchData.searchWord
|
||||
);
|
||||
queryParams[QueryParams.BY_SEARCH] = String(true);
|
||||
|
||||
this._navigate(queryParams);
|
||||
}
|
||||
|
||||
onCanceledSearch() {
|
||||
const queryParams: Params = {};
|
||||
|
||||
queryParams[QueryParams.DEPT_SEQ] = String(this.deptSeq);
|
||||
this._navigate(queryParams);
|
||||
}
|
||||
|
||||
private _navigate(queryParams: Params = {}) {
|
||||
this.router.navigate(
|
||||
[
|
||||
'organization',
|
||||
{
|
||||
outlets: { content: 'index' }
|
||||
}
|
||||
],
|
||||
{
|
||||
queryParams
|
||||
}
|
||||
);
|
||||
}
|
||||
export class IndexPageComponent {
|
||||
constructor() {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,25 @@
|
|||
<div class="sidenav-container" fxFlexFill fxLayout="column">
|
||||
<div class="sub-header" fxFlex="50px" fxLayout="row">
|
||||
<div fxFlex="1 1 auto">
|
||||
<h3>{{ 'organization:label.organization' | ucapI18n }}</h3>
|
||||
<h3 fxFlex="1 1 auto">조직도</h3>
|
||||
<div class="menu-btn" fxFlex="70px">
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="organizationMenu"
|
||||
aria-label="organization menu"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!!displayRootDept" class="extra-box" fxFlex="0 0 50px">
|
||||
<mat-icon matPrefix class="ico-business">business</mat-icon
|
||||
>{{ displayRootDept | ucapOrganizationTranslate: 'name' }}
|
||||
<div class="extra-box" fxFlex="50px">
|
||||
LG CNS
|
||||
</div>
|
||||
|
||||
<div fxFlex="1 1 auto">
|
||||
<app-organization-tree
|
||||
[initialExpanded]="initialExpanded"
|
||||
[windowSizeMode]="windowSizeMode"
|
||||
(clicked)="onClickedTree($event)"
|
||||
></app-organization-tree>
|
||||
<app-sections-organization-tree></app-sections-organization-tree>
|
||||
</div>
|
||||
</div>
|
||||
<mat-menu #organizationMenu="matMenu">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,10 @@
|
|||
@import '~@ucap/lg-scss/mixins';
|
||||
|
||||
.sidenav-container {
|
||||
padding-bottom: 5px;
|
||||
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;
|
||||
}
|
||||
.organization-header {
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.organization-tree {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,135 +1,14 @@
|
|||
import { Subject, combineLatest } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectorRef,
|
||||
ChangeDetectionStrategy
|
||||
} from '@angular/core';
|
||||
import { Router, ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import { DeptInfo } from '@ucap/domain-organization';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { LogService } from '@ucap/ng-logger';
|
||||
|
||||
import { DepartmentSelector, UserSelector } from '@ucap/ng-store-organization';
|
||||
import { LoginSelector } from '@ucap/ng-store-authentication';
|
||||
|
||||
import { AppUiService } from '@app/services/app-ui.service';
|
||||
import { AppSelector } from '@app/store/state';
|
||||
import { WindowSizeMode } from '@app/types/window-size-mode.type';
|
||||
|
||||
import { environment } from '@environments';
|
||||
|
||||
import { QueryParams } from '../types/params.type';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages-ogranization-sidenav',
|
||||
templateUrl: './sidenav.page.component.html',
|
||||
styleUrls: ['./sidenav.page.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
styleUrls: ['./sidenav.page.component.scss']
|
||||
})
|
||||
export class SidenavPageComponent implements OnInit, OnDestroy {
|
||||
initialExpanded: number;
|
||||
displayRoot = false;
|
||||
displayRootDept: DeptInfo;
|
||||
windowSizeMode: WindowSizeMode;
|
||||
|
||||
private ngOnDestroySubject: Subject<void> = new Subject();
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private store: Store<any>,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private appUiService: AppUiService,
|
||||
private logService: LogService
|
||||
) {
|
||||
export class SidenavPageComponent {
|
||||
constructor(private logService: LogService) {
|
||||
this.logService.info('app-pages-ogranization-sidenav');
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
// this.activatedRoute.queryParams
|
||||
// .pipe(takeUntil(this.ngOnDestroySubject))
|
||||
// .subscribe((params) => {
|
||||
// if (!!params) {
|
||||
// const deptSeq = params[QueryParams.DEPT_SEQ];
|
||||
// if (!!deptSeq) {
|
||||
// this.initialExpanded = Number(deptSeq);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
combineLatest([
|
||||
this.activatedRoute.queryParams,
|
||||
this.store.pipe(select(UserSelector.user))
|
||||
])
|
||||
.pipe(takeUntil(this.ngOnDestroySubject))
|
||||
.subscribe(([params, user]) => {
|
||||
let existParams = false;
|
||||
if (!!params) {
|
||||
const deptSeq = params[QueryParams.DEPT_SEQ];
|
||||
if (!!deptSeq) {
|
||||
existParams = true;
|
||||
this.initialExpanded = Number(deptSeq);
|
||||
}
|
||||
}
|
||||
|
||||
if (!existParams) {
|
||||
this.initialExpanded = user.departmentCode;
|
||||
}
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(DepartmentSelector.departmentInfoList)
|
||||
)
|
||||
.subscribe((deptInfoList) => {
|
||||
if (!environment.productConfig.organization.displayRoot) {
|
||||
if (!!deptInfoList && deptInfoList.length > 0) {
|
||||
this.displayRootDept = deptInfoList.find(
|
||||
(item) => item.type === 'R'
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.store
|
||||
.pipe(
|
||||
takeUntil(this.ngOnDestroySubject),
|
||||
select(AppSelector.windowSizeMode)
|
||||
)
|
||||
.subscribe((windowSizeMode) => {
|
||||
this.windowSizeMode = windowSizeMode;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.ngOnDestroySubject) {
|
||||
this.ngOnDestroySubject.next();
|
||||
this.ngOnDestroySubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
onClickedTree(node: DeptInfo) {
|
||||
const queryParams: Params = {};
|
||||
queryParams[QueryParams.DEPT_SEQ] = String(node.seq);
|
||||
this.router.navigate(
|
||||
[
|
||||
'organization',
|
||||
{
|
||||
outlets: { content: 'index' }
|
||||
}
|
||||
],
|
||||
{
|
||||
queryParams
|
||||
}
|
||||
);
|
||||
this.appUiService.closeLeftSidenavOnNarrowMode();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,42 +3,25 @@ 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';
|
||||
import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
|
||||
// import { UiModule } from '@ucap/ng-ui';
|
||||
import { OrganizationUiModule } from '@ucap/ng-ui-organization';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
|
||||
AppOrganizationModule,
|
||||
AppOrganizationSectionModule,
|
||||
AppOrganizationRoutingPageModule,
|
||||
|
||||
I18nModule,
|
||||
OrganizationUiModule
|
||||
AppOrganizationRoutingPageModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: [],
|
||||
providers: [
|
||||
{
|
||||
provide: UCAP_I18N_NAMESPACE,
|
||||
useValue: ['organization', 'common']
|
||||
}
|
||||
]
|
||||
entryComponents: []
|
||||
})
|
||||
export class AppOrganizationPageModule {}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
export enum QueryParams {
|
||||
DEPT_SEQ = 'dept_seq',
|
||||
COMPANY_CODE = 'company_code',
|
||||
SEARCH_WORD = 'search_word',
|
||||
BY_SEARCH = 'by_search'
|
||||
}
|
||||
|
|
@ -101,13 +101,13 @@ export class AppSessionResolver implements Resolve<void> {
|
|||
|
||||
this.store.dispatch(
|
||||
ConfigurationActions.versionInfo2Success({
|
||||
versionInfo: versionInfo2Res.versionInfo
|
||||
res: versionInfo2Res
|
||||
})
|
||||
);
|
||||
|
||||
this.store.dispatch(
|
||||
ConfigurationActions.urlInfoSuccess({
|
||||
urlInfo: urlInfoRes.urlInfo
|
||||
res: urlInfoRes
|
||||
})
|
||||
);
|
||||
|
||||
|
|
@ -128,9 +128,7 @@ export class AppSessionResolver implements Resolve<void> {
|
|||
}
|
||||
);
|
||||
|
||||
this.protocolService.connect(
|
||||
versionInfo2Res.versionInfo.serverIp
|
||||
);
|
||||
this.protocolService.connect(versionInfo2Res.serverIp);
|
||||
},
|
||||
(error) => {
|
||||
reject(error);
|
||||
|
|
|
|||
|
|
@ -1,51 +1,71 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
|
||||
import { I18nModule } from '@ucap/ng-i18n';
|
||||
// import { UiModule } from '@ucap/ng-ui';
|
||||
import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
|
||||
|
||||
import { AuthenticationUiModule } from '@ucap/ng-ui-authentication';
|
||||
import { OrganizationUiModule } from '@ucap/ng-ui-organization';
|
||||
|
||||
import { AppLayoutsModule } from '@app/layouts/layouts.module';
|
||||
import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
|
||||
|
||||
import { COMPONENTS } from './components';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
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';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
I18nModule,
|
||||
AuthenticationUiModule,
|
||||
|
||||
ReactiveFormsModule,
|
||||
MatButtonModule,
|
||||
MatButtonToggleModule,
|
||||
MatCardModule,
|
||||
MatDatepickerModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatRadioModule,
|
||||
MatMenuModule,
|
||||
MatProgressBarModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatCheckboxModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatSliderModule,
|
||||
MatTabsModule,
|
||||
|
||||
I18nModule,
|
||||
|
||||
AuthenticationUiModule,
|
||||
OrganizationUiModule,
|
||||
|
||||
AppLayoutsModule,
|
||||
AppOrganizationModule
|
||||
MatTooltipModule,
|
||||
MatToolbarModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule
|
||||
],
|
||||
exports: [...COMPONENTS],
|
||||
declarations: [...COMPONENTS],
|
||||
entryComponents: []
|
||||
entryComponents: [],
|
||||
providers: [
|
||||
{
|
||||
provide: UCAP_I18N_NAMESPACE,
|
||||
useValue: ['authentication']
|
||||
}
|
||||
]
|
||||
})
|
||||
export class AppAccountSectionModule {}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
<div class="login-box">
|
||||
<ng-content select="[ucapAuthenticationLogin='header']"></ng-content>
|
||||
|
||||
<div class="login-content">
|
||||
<form name="loginForm" [formGroup]="loginForm" novalidate>
|
||||
<mat-form-field
|
||||
[style.display]="!!fixedCompanyCode ? 'none' : 'block'"
|
||||
class="login-company"
|
||||
appearance="none"
|
||||
>
|
||||
<mat-select
|
||||
[formControl]="companyCodeFormControl"
|
||||
[value]="companyCode || fixedCompanyCode"
|
||||
placeholder="{{ 'login.labels.selectCompany' | ucapI18n }}"
|
||||
class="login-input-area login-select-form"
|
||||
>
|
||||
<mat-option
|
||||
*ngFor="let company of companyList"
|
||||
[value]="company.companyCode"
|
||||
>{{ company.companyName }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="login-input-area idpass-type">
|
||||
<mat-form-field
|
||||
class="login-idpass-txt"
|
||||
appearance="none"
|
||||
floatLabel=""
|
||||
>
|
||||
<!-- <mat-label>{{ 'login.fields.loginId' | ucapI18n }}</mat-label> -->
|
||||
<input
|
||||
matInput
|
||||
[formControl]="loginIdFormControl"
|
||||
placeholder="{{ 'login.fields.loginId' | ucapI18n }}"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="login-input-area idpass-type pass-type">
|
||||
<mat-form-field class="login-idpass-txt" appearance="none">
|
||||
<!-- <mat-label>{{ 'login.fields.loginPw' | ucapI18n }}</mat-label> -->
|
||||
<input
|
||||
matInput
|
||||
type="password"
|
||||
[formControl]="loginPwFormControl"
|
||||
placeholder="{{ 'login.fields.loginPw' | ucapI18n }}"
|
||||
#loginPw
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="error-container">
|
||||
<mat-error
|
||||
*ngIf="
|
||||
companyCodeFormControl.dirty &&
|
||||
companyCodeFormControl.invalid &&
|
||||
companyCodeFormControl.hasError('required')
|
||||
"
|
||||
>
|
||||
{{ 'login.errors.requireCompany' | ucapI18n }}
|
||||
</mat-error>
|
||||
<mat-error
|
||||
*ngIf="
|
||||
loginIdFormControl.dirty &&
|
||||
loginIdFormControl.invalid &&
|
||||
loginIdFormControl.hasError('required')
|
||||
"
|
||||
>
|
||||
{{ 'login.errors.requireLoginId' | ucapI18n }}
|
||||
</mat-error>
|
||||
<mat-error
|
||||
*ngIf="
|
||||
loginPwFormControl.dirty &&
|
||||
loginPwFormControl.invalid &&
|
||||
loginPwFormControl.hasError('required')
|
||||
"
|
||||
>
|
||||
{{ 'login.errors.requireLoginPw' | ucapI18n }}
|
||||
</mat-error>
|
||||
<mat-error *ngIf="loginFailed">
|
||||
{{ 'login.errors.failed' | ucapI18n }}
|
||||
</mat-error>
|
||||
</div>
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
class="login-input-submit"
|
||||
aria-label="LOG IN"
|
||||
[disabled]="
|
||||
loginForm.invalid ||
|
||||
disable ||
|
||||
(!!loginTry && !!loginTry.remainTimeForNextTry)
|
||||
"
|
||||
(click)="onClickLogin()"
|
||||
>
|
||||
<ng-container
|
||||
*ngIf="!processing && (!loginTry || !loginTry.remainTimeForNextTry)"
|
||||
>
|
||||
{{ 'login.labels.doLogin' | ucapI18n }}
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!!loginTry && !!loginTry.remainTimeForNextTry">
|
||||
{{ 'login.errors.attemptsExceeded' | ucapI18n }}
|
||||
(
|
||||
{{
|
||||
moment
|
||||
.utc(
|
||||
moment
|
||||
.duration(loginTry.remainTimeForNextTry, 'seconds')
|
||||
.asMilliseconds()
|
||||
)
|
||||
.format('mm:ss')
|
||||
}}
|
||||
)
|
||||
</ng-container>
|
||||
|
||||
<mat-spinner
|
||||
*ngIf="processing && (!loginTry || !loginTry.remainTimeForNextTry)"
|
||||
>
|
||||
</mat-spinner>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<ng-content select="[ucapAuthenticationLogin='footer']"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user