ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

settings is modified

Browse Source
This commit is contained in:
병준 박 2019-12-16 04:49:27 +09:00
parent c37f439fb0
commit e4e005802f
14 changed files with 249 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
View File

@ -13,10 +13,11 @@
<ucap-settings-general
class="setting-category general"
(selectTheme)="onSelectTheme($event)"
[setting]="appUserInfo.settings.general"
(changed)="onChangedGeneralSetting($event)"
></ucap-settings-general>
</mat-tab>
<mat-tab>
<!-- <mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-lock"></span>
개인정보취급방침
@ -24,17 +25,19 @@
<ucap-settings-privacy
class="setting-category"
></ucap-settings-privacy>
</mat-tab>
<mat-tab>
</mat-tab> -->
<!-- <mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-bell"></span>
알림
</ng-template>
<ucap-settings-notification
[setting]="appUserInfo.settings.notification"
(changed)="onChangedNotificationSetting($event)"
class="setting-category"
></ucap-settings-notification>
</mat-tab>
<mat-tab>
</mat-tab> -->
<!-- <mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-headset"></span>
장치
@ -56,7 +59,7 @@
통화
</ng-template>
<ucap-settings-call class="setting-category"></ucap-settings-call>
</mat-tab>
</mat-tab> -->
</mat-tab-group>
<!-- <div class="left-side-tabs-body">

44
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts
View File

@ -1,7 +1,10 @@
import { Component, OnInit, Inject, Renderer2 } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { KEY_LOGIN_RES_INFO, KEY_VER_INFO } from '@app/types';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import {
SessionStorageService,
LocalStorageService
} from '@ucap-webmessenger/web-storage';
import { Store } from '@ngrx/store';
@ -10,6 +13,13 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { map } from 'rxjs/operators';
import { DOCUMENT } from '@angular/common';
import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
import { environment } from '../../../../../environments/environment';
import {
GeneralSetting,
Settings,
NotificationSetting
} from '@ucap-webmessenger/ui-settings';
export interface MessengerSettingsDialogData {}
@ -23,6 +33,7 @@ export interface MessengerSettingsDialogResult {}
export class MessengerSettingsDialogComponent implements OnInit {
loginRes: LoginResponse;
sessionVerinfo: VersionInfo2Response;
appUserInfo: AppUserInfo;
constructor(
public dialogRef: MatDialogRef<
@ -32,10 +43,16 @@ export class MessengerSettingsDialogComponent implements OnInit {
@Inject(MAT_DIALOG_DATA) public data: MessengerSettingsDialogData,
private dialogService: DialogService,
private sessionStorageService: SessionStorageService,
private localStorageService: LocalStorageService,
private store: Store<any>,
@Inject(DOCUMENT) private document: Document,
private renderer2: Renderer2
) {
this.appUserInfo = this.localStorageService.encGet<AppUserInfo>(
KEY_APP_USER_INFO,
environment.customConfig.appKey
);
this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
KEY_VER_INFO
);
@ -46,11 +63,32 @@ export class MessengerSettingsDialogComponent implements OnInit {
ngOnInit() {}
onSelectTheme(theme: string): void {
this.renderer2.setAttribute(this.document.body, 'class', theme);
onChangedGeneralSetting(setting: GeneralSetting) {
if (this.appUserInfo.settings.general.appTheme !== setting.appTheme) {
this.renderer2.setAttribute(
this.document.body,
'class',
setting.appTheme
);
}
this.applySettings({ ...this.appUserInfo.settings, general: setting });
}
onChangedNotificationSetting(setting: NotificationSetting) {
this.applySettings({ ...this.appUserInfo.settings, notification: setting });
}
onClickChoice(choice: boolean): void {
this.dialogRef.close({});
}
private applySettings(settings: Settings) {
this.appUserInfo.settings = settings;
this.localStorageService.encSet<AppUserInfo>(
KEY_APP_USER_INFO,
this.appUserInfo,
environment.customConfig.appKey
);
}
}

37
projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
View File

@ -50,20 +50,31 @@ export class AppAuthenticationService {
loginPw: encLoginPw
});
if (rememberMe || autoLogin) {
this.localStorageService.encSet<AppUserInfo>(
KEY_APP_USER_INFO,
{
...loginInfo,
loginPw: autoLogin ? loginInfo.loginPw : undefined,
rememberMe,
autoLogin
},
environment.customConfig.appKey
);
} else {
this.localStorageService.remove(KEY_LOGIN_INFO);
let appUserInfo = this.localStorageService.encGet<AppUserInfo>(
KEY_APP_USER_INFO,
environment.customConfig.appKey
);
if (!appUserInfo) {
appUserInfo = {
settings: environment.productConfig.defaultSettings
};
}
if (rememberMe || autoLogin) {
appUserInfo = {
...appUserInfo,
loginPw: autoLogin ? loginInfo.loginPw : undefined,
rememberMe,
autoLogin
};
}
this.localStorageService.encSet<AppUserInfo>(
KEY_APP_USER_INFO,
appUserInfo,
environment.customConfig.appKey
);
}
logout() {

3
projects/ucap-webmessenger-app/src/app/types/app-user-info.type.ts
View File

@ -1,4 +1,5 @@
import { LocaleCode } from '@ucap-webmessenger/core';
import { Settings } from '@ucap-webmessenger/ui-settings';
export const KEY_APP_USER_INFO = 'ucap::APP_USER_INFO';
@ -10,4 +11,6 @@ export interface AppUserInfo {
companyCode?: string;
companyGroupType?: string;
localeCode?: LocaleCode;
settings?: Settings;
}

14
projects/ucap-webmessenger-app/src/environments/environment.daesang.dev.ts
View File

@ -33,6 +33,20 @@ export const environment: Environment = {
updateCheckConfig: {
deviceType: DeviceType.Renderer,
intervalHour: 1
},
defaultSettings: {
general: {
appTheme: 'theme-default',
autoLogin: false,
autoStart: true,
continueRunWhenClose: true,
locale: 'ko',
startBackgroudMode: false,
timezone: '+9'
},
notification: {
chatMessage: true
}
}
},

14
projects/ucap-webmessenger-app/src/environments/environment.daesang.prod.ts
View File

@ -33,6 +33,20 @@ export const environment: Environment = {
updateCheckConfig: {
deviceType: DeviceType.Renderer,
intervalHour: 1
},
defaultSettings: {
general: {
appTheme: 'theme-default',
autoLogin: false,
autoStart: true,
continueRunWhenClose: true,
locale: 'ko',
startBackgroudMode: false,
timezone: '+9'
},
notification: {
chatMessage: true
}
}
},

14
projects/ucap-webmessenger-app/src/environments/environment.dev.ts
View File

@ -33,6 +33,20 @@ export const environment: Environment = {
updateCheckConfig: {
deviceType: DeviceType.Renderer,
intervalHour: 1
},
defaultSettings: {
general: {
appTheme: 'theme-default',
autoLogin: false,
autoStart: true,
continueRunWhenClose: true,
locale: 'ko',
startBackgroudMode: false,
timezone: '+9'
},
notification: {
chatMessage: true
}
}
},

14
projects/ucap-webmessenger-app/src/environments/environment.prod.ts
View File

@ -33,6 +33,20 @@ export const environment: Environment = {
updateCheckConfig: {
deviceType: DeviceType.Renderer,
intervalHour: 1
},
defaultSettings: {
general: {
appTheme: 'theme-default',
autoLogin: false,
autoStart: true,
continueRunWhenClose: true,
locale: 'ko',
startBackgroudMode: false,
timezone: '+9'
},
notification: {
chatMessage: true
}
}
},

2
projects/ucap-webmessenger-app/src/environments/environment.type.ts
View File

@ -27,6 +27,7 @@ import {
UpdateCheckConfig
} from '@ucap-webmessenger/native';
import { DeviceType } from '@ucap-webmessenger/core';
import { Settings } from '@ucap-webmessenger/ui-settings';
export type UCapRuntime = 'browser' | 'electron';
@ -55,6 +56,7 @@ export interface Environment {
deviceType: DeviceType;
intervalHour: number;
};
defaultSettings: Settings;
};
customConfig?: any;

39
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
View File

@ -13,6 +13,7 @@
</ul>-->
<mat-list-item class="theme-select">
<mat-tab-group
#themeTabGroup
mat-stretch-tabs
animationDuration="0ms"
(selectedTabChange)="onSelectedTabChange($event)"
@ -38,20 +39,36 @@
<h1 mat-subheader>응용 프로그램</h1>
<mat-list-item>
<mat-checkbox>응용 프로그램 자동 시작</mat-checkbox>
<mat-checkbox
[checked]="setting.autoStart"
(change)="onChangeAutoStart($event)"
>응용 프로그램 자동 시작</mat-checkbox
>
</mat-list-item>
<mat-list-item>
<mat-checkbox>백그라운드에서 응용 프로그램 열기</mat-checkbox>
<mat-checkbox
[checked]="setting.startBackgroudMode"
(change)="onChangeStartBackgroudMode($event)"
>백그라운드에서 응용 프로그램 열기</mat-checkbox
>
</mat-list-item>
<mat-list-item>
<mat-checkbox>닫을 시 응용 프로그램을 계속 실행</mat-checkbox>
<mat-checkbox
[checked]="setting.continueRunWhenClose"
(change)="onChangeContinueRunWhenClose($event)"
>닫을 시 응용 프로그램을 계속 실행</mat-checkbox
>
</mat-list-item>
<mat-divider></mat-divider>
<h1 mat-subheader>로그인</h1>
<mat-list-item>
<mat-checkbox>실행 시 자동 로그인</mat-checkbox>
<mat-checkbox
[checked]="setting.autoLogin"
(change)="onChangeAutoLogin($event)"
>실행 시 자동 로그인</mat-checkbox
>
</mat-list-item>
<mat-divider></mat-divider>
@ -59,11 +76,14 @@
<h1 mat-subheader>언어</h1>
<mat-list-item>
<mat-form-field fxFlexFill>
<mat-select>
<mat-option value="ko-KR">
<mat-select
[value]="setting.locale"
(selectionChange)="onSelectionChangeLocale($event)"
>
<mat-option value="ko">
한국어 (대한민국)
</mat-option>
<mat-option value="en-US">
<mat-option value="en">
영어 (미국)
</mat-option>
</mat-select>
@ -75,7 +95,10 @@
<h1 mat-subheader>시간대</h1>
<mat-list-item>
<mat-form-field fxFlexFill>
<mat-select>
<mat-select
[value]="setting.timezone"
(selectionChange)="onSelectionChangeTimezone($event)"
>
<mat-option value="ko-KR">
한국어 (대한민국)
</mat-option>

70
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts
View File

@ -3,10 +3,17 @@ import {
OnInit,
ChangeDetectorRef,
Output,
EventEmitter
EventEmitter,
Input,
ViewChild
} from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MatTabChangeEvent } from '@angular/material';
import {
MatTabChangeEvent,
MatTabGroup,
MatCheckboxChange,
MatSelectChange
} from '@angular/material';
import { GeneralSetting } from '../models/settings';
@Component({
selector: 'ucap-settings-general',
@ -14,17 +21,32 @@ import { MatTabChangeEvent } from '@angular/material';
styleUrls: ['./general.component.scss']
})
export class GeneralComponent implements OnInit {
loginForm: FormGroup;
@Input()
setting: GeneralSetting;
@Output()
selectTheme = new EventEmitter<string>();
changed = new EventEmitter<GeneralSetting>();
constructor(
private formBuilder: FormBuilder,
private changeDetectorRef: ChangeDetectorRef
) {}
@ViewChild('themeTabGroup', { static: true })
themeTabGroup: MatTabGroup;
ngOnInit() {}
constructor(private changeDetectorRef: ChangeDetectorRef) {}
ngOnInit() {
let themeIndex;
switch (this.setting.appTheme) {
case 'theme-default':
themeIndex = 0;
break;
case 'theme-lgRed':
themeIndex = 1;
break;
default:
themeIndex = 0;
break;
}
this.themeTabGroup.selectedIndex = themeIndex;
}
onSelectedTabChange(e: MatTabChangeEvent) {
let theme = 'theme-default';
@ -39,8 +61,32 @@ export class GeneralComponent implements OnInit {
break;
}
this.selectTheme.emit(theme);
this.emit({ ...this.setting, appTheme: theme });
}
onClickLogin() {}
onChangeAutoStart(event: MatCheckboxChange) {
this.emit({ ...this.setting, autoStart: event.checked });
}
onChangeStartBackgroudMode(event: MatCheckboxChange) {
this.emit({ ...this.setting, startBackgroudMode: event.checked });
}
onChangeContinueRunWhenClose(event: MatCheckboxChange) {
this.emit({ ...this.setting, continueRunWhenClose: event.checked });
}
onChangeAutoLogin(event: MatCheckboxChange) {
this.emit({ ...this.setting, autoLogin: event.checked });
}
onSelectionChangeLocale(event: MatSelectChange) {
this.emit({ ...this.setting, locale: event.value });
}
onSelectionChangeTimezone(event: MatSelectChange) {
this.emit({ ...this.setting, timezone: event.value });
}
private emit(setting: GeneralSetting) {
this.setting = setting;
this.changed.emit(this.setting);
}
}

6
projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Component, OnInit, ChangeDetectorRef, Input } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { NotificationSetting } from '../models/settings';
@Component({
selector: 'ucap-settings-notification',
@ -7,6 +8,9 @@ import { FormGroup, FormBuilder } from '@angular/forms';
styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {
@Input()
setting: NotificationSetting;
loginForm: FormGroup;
constructor(

18
projects/ucap-webmessenger-ui-settings/src/lib/models/settings.ts Normal file
View File

@ -0,0 +1,18 @@
export interface GeneralSetting {
appTheme: string;
autoStart: boolean;
startBackgroudMode: boolean;
continueRunWhenClose: boolean;
autoLogin: boolean;
locale: string;
timezone: string;
}
export interface NotificationSetting {
chatMessage: boolean;
}
export interface Settings {
general: GeneralSetting;
notification: NotificationSetting;
}

1
projects/ucap-webmessenger-ui-settings/src/public-api.ts
View File

@ -3,5 +3,6 @@
*/
export * from './lib/components/general.component';
export * from './lib/models/settings';
export * from './lib/ucap-ui-settings.module';