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

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

Browse Source
This commit is contained in:
leejinho 2019-12-17 16:41:00 +09:00
commit eb440304ff
28 changed files with 478 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
projects/ucap-webmessenger-app/src/app/guards/auto-login.guard.ts
View File

@ -46,7 +46,11 @@ export class AppAutoLoginGuard implements CanActivate {
'PERSON_LOGOUT'
);
if (!!appUserInfo && appUserInfo.autoLogin && !personLogout) {
if (
!!appUserInfo &&
appUserInfo.settings.general.autoLogin &&
!personLogout
) {
this.store.dispatch(
AuthenticationStore.webLogin({
loginInfo: {
@ -56,7 +60,7 @@ export class AppAutoLoginGuard implements CanActivate {
loginPw: appUserInfo.loginPw
},
rememberMe: appUserInfo.rememberMe,
autoLogin: appUserInfo.autoLogin
autoLogin: true
})
);
resolve(false);

36
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -49,7 +49,32 @@
</div>
<div class="room-info">
<h3 class="room-name">
{{ getRoomName() }}
<ng-container *ngIf="!roomInfo || !userInfoList">
대화방명을 가져오고 있습니다..
</ng-container>
<ng-container *ngIf="!!roomInfo && !!userInfoList">
<ng-container [ngSwitch]="roomInfo.roomType">
<ng-container *ngSwitchCase="RoomType.Mytalk">
MyTalk
</ng-container>
<ng-container *ngSwitchCase="RoomType.Bot || RoomType.Allim">
{{ _roomUserInfos | ucapTranslate: 'name':',' }}
</ng-container>
<ng-container *ngSwitchDefault>
<ng-template
[ngIf]="
!!roomInfo.roomName && '' !== roomInfo.roomName.trim()
"
[ngIfElse]="roomNameNotExist"
>
{{ roomInfo.roomName }}
</ng-template>
<ng-template #roomNameNotExist>
{{ _roomUserInfos | ucapTranslate: 'name':',' }}
</ng-template>
</ng-container>
</ng-container>
</ng-container>
</h3>
<!-- Timer Room Info -->
<div
@ -200,8 +225,13 @@
<!-- sticker-selector -->
<div class="sticker-selector-container">
<ucap-sticker-selector *ngIf="isShowStickerSelector" #stickerSelector [stickerHistory]='getStickerHistory()'
(selectedSticker)="onSelectedSticker($event)" class="sticker-selector-zone"></ucap-sticker-selector>
<ucap-sticker-selector
*ngIf="isShowStickerSelector"
#stickerSelector
[stickerHistory]="getStickerHistory()"
(selectedSticker)="onSelectedSticker($event)"
class="sticker-selector-zone"
></ucap-sticker-selector>
<div></div>
</div>
<!-- / sticker-selector -->

40
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
View File

@ -161,6 +161,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
snackBarPreviewEvent: MatSnackBarRef<SimpleSnackBar>;
RoomType = RoomType;
constructor(
private store: Store<any>,
private sessionStorageService: SessionStorageService,
@ -296,36 +298,14 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
this.selectedSticker = undefined;
}
getRoomName() {
if (!this.roomInfo || !this.userInfoList) {
return '대화방명을 가져오고 있습니다..';
}
switch (this.roomInfo.roomType) {
case RoomType.Mytalk:
return 'MyTalk';
case RoomType.Bot:
case RoomType.Allim:
return this.userInfoList
.filter(user => user.seq !== this.loginRes.userSeq && user.isJoinRoom)
.map(user => user.name);
}
if (!!this.roomInfo.roomName && '' !== this.roomInfo.roomName.trim()) {
return this.roomInfo.roomName;
} else {
return this.userInfoList
.filter(user => {
if (this.roomInfo.roomType === RoomType.Single) {
return user.seq !== this.loginRes.userSeq;
} else {
return user.isJoinRoom;
}
})
.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
.map(user => user.name)
.join(',');
}
get _roomUserInfos() {
return this.userInfoList
.filter(roomUserInfo => {
return (
this.loginRes.userSeq !== roomUserInfo.seq && roomUserInfo.isJoinRoom
);
})
.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
}
/** 대화전송 가능한 방인지 판단 */

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

@ -8,7 +8,10 @@ import {
import { Store } from '@ngrx/store';
import { DialogService } from '@ucap-webmessenger/ui';
import {
DialogService,
TranslateService as UCapTranslateService
} from '@ucap-webmessenger/ui';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { map } from 'rxjs/operators';
@ -44,6 +47,7 @@ export class MessengerSettingsDialogComponent implements OnInit {
private dialogService: DialogService,
private sessionStorageService: SessionStorageService,
private localStorageService: LocalStorageService,
private ucapTranslateService: UCapTranslateService,
private store: Store<any>,
@Inject(DOCUMENT) private document: Document,
private renderer2: Renderer2
@ -71,6 +75,13 @@ export class MessengerSettingsDialogComponent implements OnInit {
setting.appTheme
);
}
if (this.appUserInfo.settings.general.locale !== setting.locale) {
}
if (
this.appUserInfo.settings.general.hrInfoLocale !== setting.hrInfoLocale
) {
this.ucapTranslateService.use(setting.hrInfoLocale);
}
this.applySettings({ ...this.appUserInfo.settings, general: setting });
}

2
projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html
View File

@ -9,7 +9,7 @@
[companyCode]="appUserInfo?.companyCode"
[loginId]="appUserInfo?.loginId"
[rememberMe]="appUserInfo?.rememberMe"
[autoLogin]="appUserInfo?.autoLogin"
[autoLogin]="appUserInfo?.settings?.general?.autoLogin"
[useRememberMe]="useRememberMe"
[useAutoLogin]="useAutoLogin"
(login)="onLogin($event)"

2
projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
View File

@ -42,6 +42,8 @@ import { NGXLogger } from 'ngx-logger';
import { QueryProtocolService } from '@ucap-webmessenger/protocol-query';
import { OptionProtocolService } from '@ucap-webmessenger/protocol-option';
import { TranslateService as UCapTranslateService } from '@ucap-webmessenger/ui';
import * as AppStore from '@app/store';
import * as CompanyStore from '@app/store/setting/company';
import * as VersionInfoStore from '@app/store/setting/version-info';

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

@ -6,6 +6,8 @@ import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
import { AppNotificationService } from './notification.service';
import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
import { AppNativeService } from './native.service';
import { TranslateService as UCapTranslateService } from '@ucap-webmessenger/ui';
import { TranslateService } from '@ngx-translate/core';
@Injectable()
export class AppService {
@ -14,8 +16,16 @@ export class AppService {
private sessionStorageService: SessionStorageService,
private appNotificationService: AppNotificationService,
private appNativeService: AppNativeService,
// private translateService: TranslateService,
private ucapTranslateService: UCapTranslateService,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
) {}
) {
// this.translateService.setDefaultLang('ko');
// this.translateService.use('ko');
this.ucapTranslateService.setDefaultLang('ko');
this.ucapTranslateService.use('ko');
}
public postInit(): Promise<any> {
const initPromise = new Promise<void>((resolve, reject) => {

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

@ -13,6 +13,7 @@ import {
KEY_URL_INFO
} from '../types';
import { PasswordUtil } from '@ucap-webmessenger/pi';
import { DaesangCipherService } from '@ucap-webmessenger/daesang';
import { environment } from '../../environments/environment';
@ -73,9 +74,9 @@ export class AppAuthenticationService {
if (rememberMe || autoLogin) {
appUserInfo = {
...appUserInfo,
rememberMe,
autoLogin
rememberMe
};
appUserInfo.settings.general.autoLogin = autoLogin;
}
this.localStorageService.encSet<AppUserInfo>(

34
projects/ucap-webmessenger-app/src/app/store/setting/init/effects.ts
View File

@ -1,6 +1,38 @@
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { TranslateService as UCapTranslateService } from '@ucap-webmessenger/ui';
import { map, tap } from 'rxjs/operators';
import * as AuthenticationStore from '@app/store/account/authentication';
import { LocalStorageService } from '@ucap-webmessenger/web-storage';
import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
import { environment } from '../../../../environments/environment';
@Injectable()
export class Effects {
constructor() {}
postLogin$ = createEffect(
() =>
this.actions$.pipe(
ofType(AuthenticationStore.postLogin),
map(action => action.loginRes),
tap(async loginRes => {
const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
KEY_APP_USER_INFO,
environment.customConfig.appKey
);
this.ucapTranslateService.use(
appUserInfo.settings.general.hrInfoLocale
);
})
),
{ dispatch: false }
);
constructor(
private actions$: Actions,
private ucapTranslateService: UCapTranslateService,
private localStorageService: LocalStorageService
) {}
}

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

@ -7,7 +7,6 @@ export interface AppUserInfo {
loginId?: string;
loginPw?: string;
rememberMe?: boolean;
autoLogin?: boolean;
companyCode?: string;
companyGroupType?: string;
localeCode?: LocaleCode;

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

@ -43,6 +43,7 @@ export const environment: Environment = {
autoStart: true,
continueRunWhenClose: true,
locale: 'ko',
hrInfoLocale: 'ko',
startBackgroudMode: false,
timezone: '+9'
},

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

@ -43,6 +43,7 @@ export const environment: Environment = {
autoStart: true,
continueRunWhenClose: true,
locale: 'ko',
hrInfoLocale: 'ko',
startBackgroudMode: false,
timezone: '+9'
},

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

@ -43,6 +43,7 @@ export const environment: Environment = {
autoStart: true,
continueRunWhenClose: true,
locale: 'ko',
hrInfoLocale: 'ko',
startBackgroudMode: false,
timezone: '+9'
},

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

@ -43,6 +43,7 @@ export const environment: Environment = {
autoStart: true,
continueRunWhenClose: true,
locale: 'ko',
hrInfoLocale: 'ko',
startBackgroudMode: false,
timezone: '+9'
},

8
projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
View File

@ -39,7 +39,9 @@
</div>
<li (click)="onClickNode(node)" matRipple>
<div class="tree-node-body">{{ node.name }}</div>
<div class="tree-node-body">
{{ node.deptInfo | ucapTranslate: 'name' }}
</div>
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
@ -83,7 +85,9 @@
{{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
</mat-icon>
</button>
<span class="dept-name">{{ node.name }}</span>
<span class="dept-name">{{
node.deptInfo | ucapTranslate: 'name'
}}</span>
</div>
<!-- <ul class="tree-node-closer"></ul> -->
</li>

164
projects/ucap-webmessenger-ui-organization/src/lib/pipes/translate.pipe.ts
View File

@ -1,164 +0,0 @@
import {
ChangeDetectorRef,
Injectable,
OnDestroy,
Pipe,
PipeTransform
} from '@angular/core';
import {
LangChangeEvent,
TranslateService,
TranslationChangeEvent
} from '@ngx-translate/core';
import { ObjectUtil } from '@ucap-webmessenger/core';
import { Subscription } from 'rxjs';
@Injectable()
@Pipe({
name: 'ucap-organization-translate',
pure: false // required to update the value when the promise is resolved
})
export class TranslatePipe implements PipeTransform, OnDestroy {
value = '';
lastKey: string;
lastParams: any[];
onTranslationChange: Subscription;
onLangChange: Subscription;
onDefaultLangChange: Subscription;
constructor(
private translate: TranslateService,
private changeDetectorRef: ChangeDetectorRef
) {}
updateValue(
key: string,
interpolateParams?: object,
translations?: any
): void {
const onTranslation = (res: string) => {
this.value = res !== undefined ? res : key;
this.lastKey = key;
this.changeDetectorRef.markForCheck();
};
if (translations) {
const res = this.translate.getParsedResult(
translations,
key,
interpolateParams
);
if (typeof res.subscribe === 'function') {
res.subscribe(onTranslation);
} else {
onTranslation(res);
}
}
this.translate.get(key, interpolateParams).subscribe(onTranslation);
}
transform(query: string, ...args: any[]): any {
if (!query || query.length === 0) {
return query;
}
// if we ask another time for the same key, return the last value
if (
ObjectUtil.equals(query, this.lastKey) &&
ObjectUtil.equals(args, this.lastParams)
) {
return this.value;
}
let interpolateParams: object;
if (!!args[0] && args.length) {
if (typeof args[0] === 'string' && args[0].length) {
// we accept objects written in the template such as {n:1}, {'n':1}, {n:'v'}
// which is why we might need to change it to real JSON objects such as {"n":1} or {"n":"v"}
const validArgs: string = args[0]
.replace(/(\')?([a-zA-Z0-9_]+)(\')?(\s)?:/g, '"$2":')
.replace(/:(\s)?(\')(.*?)(\')/g, ':"$3"');
try {
interpolateParams = JSON.parse(validArgs);
} catch (e) {
throw new SyntaxError(
`Wrong parameter in TranslatePipe. Expected a valid Object, received: ${args[0]}`
);
}
} else if (typeof args[0] === 'object' && !Array.isArray(args[0])) {
interpolateParams = args[0];
}
}
// store the query, in case it changes
this.lastKey = query;
// store the params, in case they change
this.lastParams = args;
// set the value
this.updateValue(query, interpolateParams);
// if there is a subscription to onLangChange, clean it
this._dispose();
// subscribe to onTranslationChange event, in case the translations change
if (!this.onTranslationChange) {
this.onTranslationChange = this.translate.onTranslationChange.subscribe(
(event: TranslationChangeEvent) => {
if (this.lastKey && event.lang === this.translate.currentLang) {
this.lastKey = null;
this.updateValue(query, interpolateParams, event.translations);
}
}
);
}
// subscribe to onLangChange event, in case the language changes
if (!this.onLangChange) {
this.onLangChange = this.translate.onLangChange.subscribe(
(event: LangChangeEvent) => {
if (this.lastKey) {
this.lastKey = null; // we want to make sure it doesn't return the same value until it's been updated
this.updateValue(query, interpolateParams, event.translations);
}
}
);
}
// subscribe to onDefaultLangChange event, in case the default language changes
if (!this.onDefaultLangChange) {
this.onDefaultLangChange = this.translate.onDefaultLangChange.subscribe(
() => {
if (this.lastKey) {
this.lastKey = null; // we want to make sure it doesn't return the same value until it's been updated
this.updateValue(query, interpolateParams);
}
}
);
}
return this.value;
}
/**
* Clean any existing subscription to change events
*/
private _dispose(): void {
if (typeof this.onTranslationChange !== 'undefined') {
this.onTranslationChange.unsubscribe();
this.onTranslationChange = undefined;
}
if (typeof this.onLangChange !== 'undefined') {
this.onLangChange.unsubscribe();
this.onLangChange = undefined;
}
if (typeof this.onDefaultLangChange !== 'undefined') {
this.onDefaultLangChange.unsubscribe();
this.onDefaultLangChange = undefined;
}
}
ngOnDestroy(): void {
this._dispose();
}
}

6
projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts
View File

@ -16,6 +16,8 @@ import { MatTreeModule } from '@angular/material/tree';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { UCapUiModule } from '@ucap-webmessenger/ui';
import { TenantSearchComponent } from './components/tenant-search.component';
import { TreeComponent } from './components/tree.component';
@ -37,7 +39,9 @@ const SERVICES = [];
MatSelectModule,
MatTreeModule,
PerfectScrollbarModule
PerfectScrollbarModule,
UCapUiModule
],
exports: [...COMPONENTS],
declarations: [...COMPONENTS]

8
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
View File

@ -1,10 +1,12 @@
<mat-card class="example-card mat-elevation-z">
<mat-card-header>
<mat-card-title>
<span>{{ userInfo.name }}</span>
<span>{{ userInfo.grade }}</span>
<span>{{ userInfo | ucapTranslate: 'name' }}</span>
<span>{{ userInfo | ucapTranslate: 'grade' }}</span>
</mat-card-title>
<mat-card-subtitle>{{ userInfo.deptName }}</mat-card-subtitle>
<mat-card-subtitle>{{
userInfo | ucapTranslate: 'deptName'
}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>

6
projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
View File

@ -16,11 +16,11 @@
<dd class="info">
<div class="detail">
<span class="name">
<b>{{ userInfo.name }}</b>
{{ userInfo.grade }}
<b>{{ userInfo | ucapTranslate: 'name' }}</b>
{{ userInfo | ucapTranslate: 'grade' }}
</span>
<span class="dept">
{{ userInfo.deptName }}
{{ userInfo | ucapTranslate: 'deptName' }}
</span>
</div>
<!-- 상태메시지 제외

24
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
View File

@ -24,7 +24,29 @@
<dd class="info">
<div class="detail">
<div class="room-name">
<div class="name">{{ getRoomName(roomInfo) }}</div>
<div class="name">
<ng-container [ngSwitch]="roomInfo.roomType">
<ng-container *ngSwitchCase="RoomType.Mytalk">
MyTalk
</ng-container>
<ng-container *ngSwitchCase="RoomType.Bot || RoomType.Allim">
{{ _roomUserInfos | ucapTranslate: 'name':',' }}
</ng-container>
<ng-container *ngSwitchDefault>
<ng-template
[ngIf]="
!!roomInfo.roomName && '' !== roomInfo.roomName.trim()
"
[ngIfElse]="roomNameNotExist"
>
{{ roomInfo.roomName }}
</ng-template>
<ng-template #roomNameNotExist>
{{ _roomUserInfos | ucapTranslate: 'name':',' }}
</ng-template>
</ng-container>
</ng-container>
</div>
<div
class="num bg-accent-light"
*ngIf="roomInfo.roomType === RoomType.Multi"

36
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
View File

@ -84,34 +84,14 @@ export class ListItemComponent implements OnInit {
}
}
getRoomName(roomInfo: RoomInfo): string {
if (!!roomInfo.roomName && '' !== roomInfo.roomName.trim()) {
return roomInfo.roomName;
}
if (roomInfo.roomType === RoomType.Mytalk) {
return 'MyTalk';
}
if (!!this.roomUserInfo && 0 < this.roomUserInfo.length) {
let roomName = '';
this.roomUserInfo.forEach(
(roomUserInfo: RoomUserInfo | UserInfoShort, index: number) => {
if (
this.loginRes.userSeq === roomUserInfo.seq ||
!roomUserInfo.isJoinRoom
) {
return;
}
if ('' === roomName.trim()) {
roomName = roomName.concat('', roomUserInfo.name);
} else {
roomName = roomName.concat(',', roomUserInfo.name);
}
}
);
return roomName;
}
get _roomUserInfos() {
return this.roomUserInfo
.filter(roomUserInfo => {
return (
this.loginRes.userSeq !== roomUserInfo.seq && roomUserInfo.isJoinRoom
);
})
.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
}
// getChecked(value: boolean, roomInfo: RoomInfo) {

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

@ -92,6 +92,25 @@
<mat-divider></mat-divider>
<h1 mat-subheader>인사 정보 언어</h1>
<mat-list-item>
<mat-form-field fxFlexFill>
<mat-select
[value]="setting.hrInfoLocale"
(selectionChange)="onSelectionChangeHrInfoLocale($event)"
>
<mat-option value="ko">
한국어 (대한민국)
</mat-option>
<mat-option value="en">
영어 (미국)
</mat-option>
</mat-select>
</mat-form-field>
</mat-list-item>
<mat-divider></mat-divider>
<h1 mat-subheader>시간대</h1>
<mat-list-item>
<mat-form-field fxFlexFill>

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

@ -81,6 +81,10 @@ export class GeneralComponent implements OnInit {
this.emit({ ...this.setting, locale: event.value });
}
onSelectionChangeHrInfoLocale(event: MatSelectChange) {
this.emit({ ...this.setting, hrInfoLocale: event.value });
}
onSelectionChangeTimezone(event: MatSelectChange) {
this.emit({ ...this.setting, timezone: event.value });
}

1
projects/ucap-webmessenger-ui-settings/src/lib/models/settings.ts
View File

@ -5,6 +5,7 @@ export interface GeneralSetting {
continueRunWhenClose: boolean;
autoLogin: boolean;
locale: string;
hrInfoLocale: string;
timezone: string;
}

121
projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe.ts Normal file
View File

@ -0,0 +1,121 @@
import {
ChangeDetectorRef,
Injectable,
OnDestroy,
Pipe,
PipeTransform
} from '@angular/core';
import { Subscription } from 'rxjs';
import { ObjectUtil } from '@ucap-webmessenger/core';
import {
TranslateService,
LangChangeEvent
} from '../services/translate.service';
@Injectable()
@Pipe({
name: 'ucapTranslate',
pure: false // required to update the value when the promise is resolved
})
export class TranslatePipe implements PipeTransform, OnDestroy {
value = '';
lastTarget: any;
lastKey: string;
lastSeparator: string;
onLangChange: Subscription;
onDefaultLangChange: Subscription;
constructor(
private translateService: TranslateService,
private changeDetectorRef: ChangeDetectorRef
) {}
updateValue(target: any, key: string, separator?: string): void {
try {
const value = this.translateService.get(target, key, separator);
this.value = value;
} catch (error) {
this.value = key;
}
this.lastTarget = target;
this.lastKey = key;
this.changeDetectorRef.markForCheck();
}
transform(target: any, key: string, separator?: string): any {
if (
!target ||
0 === Object.keys(target).length ||
!key ||
0 === key.length
) {
return '';
}
// if we ask another time for the same key, return the last value
if (
ObjectUtil.equals(target, this.lastTarget) &&
ObjectUtil.equals(key, this.lastKey) &&
ObjectUtil.equals(separator, this.lastSeparator)
) {
return this.value;
}
// store the target, in case it changes
this.lastTarget = target;
// store the key, in case it changes
this.lastKey = key;
// store the key, in case it changes
this.lastSeparator = separator;
// set the value
this.updateValue(target, key, separator);
// if there is a subscription to onLangChange, clean it
this._dispose();
// subscribe to onLangChange event, in case the language changes
if (!this.onLangChange) {
this.onLangChange = this.translateService.onLangChange.subscribe(
(event: LangChangeEvent) => {
if (this.lastKey) {
this.lastKey = null; // we want to make sure it doesn't return the same value until it's been updated
this.updateValue(target, key, separator);
}
}
);
}
// subscribe to onDefaultLangChange event, in case the default language changes
if (!this.onDefaultLangChange) {
this.onDefaultLangChange = this.translateService.onDefaultLangChange.subscribe(
() => {
if (this.lastKey) {
this.lastKey = null; // we want to make sure it doesn't return the same value until it's been updated
this.updateValue(target, key, separator);
}
}
);
}
return this.value;
}
/**
* Clean any existing subscription to change events
*/
private _dispose(): void {
if (typeof this.onLangChange !== 'undefined') {
this.onLangChange.unsubscribe();
this.onLangChange = undefined;
}
if (typeof this.onDefaultLangChange !== 'undefined') {
this.onDefaultLangChange.unsubscribe();
this.onDefaultLangChange = undefined;
}
}
ngOnDestroy(): void {
this._dispose();
}
}

161
projects/ucap-webmessenger-ui/src/lib/services/translate.service.ts Normal file
View File

@ -0,0 +1,161 @@
import { Injectable, EventEmitter } from '@angular/core';
export interface LangChangeEvent {
lang: string;
}
export interface DefaultLangChangeEvent {
lang: string;
}
@Injectable({
providedIn: 'root'
})
export class TranslateService {
// tslint:disable-next-line: variable-name
private _onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<
LangChangeEvent
>();
// tslint:disable-next-line: variable-name
private _onDefaultLangChange: EventEmitter<
DefaultLangChangeEvent
> = new EventEmitter<DefaultLangChangeEvent>();
// tslint:disable-next-line: variable-name
private _defaultLang: string;
// tslint:disable-next-line: variable-name
private _currentLang: string;
/**
* An EventEmitter to listen to lang change events
* onLangChange.subscribe((params: LangChangeEvent) => {
* // do something
* });
*/
get onLangChange(): EventEmitter<LangChangeEvent> {
return this._onLangChange;
}
/**
* An EventEmitter to listen to default lang change events
* onDefaultLangChange.subscribe((params: DefaultLangChangeEvent) => {
* // do something
* });
*/
get onDefaultLangChange() {
return this._onDefaultLangChange;
}
/**
* The default lang to fallback when translations are missing on the current lang
*/
get defaultLang(): string {
return this._defaultLang;
}
set defaultLang(defaultLang: string) {
this._defaultLang = defaultLang;
}
/**
* The lang currently used
*/
get currentLang(): string {
return this._currentLang;
}
set currentLang(currentLang: string) {
this._currentLang = currentLang;
}
constructor() {}
/**
* Sets the default language to use as a fallback
*/
public setDefaultLang(lang: string): void {
if (lang === this.defaultLang) {
return;
}
this.changeDefaultLang(lang);
}
/**
* Gets the default language used
*/
public getDefaultLang(): string {
return this.defaultLang;
}
/**
* Changes the lang currently used
*/
public use(lang: string): void {
// don't change the language if the language given is already selected
if (lang === this.currentLang) {
return;
}
this.changeLang(lang);
}
/**
* Gets the translated value of a key (or an array of keys)
* @returns the translated key, or an object of translated keys
*/
public get(target: any, key: string, separator?: string): string {
if (!target || 0 === Object.keys(target).length) {
throw new Error(`Parameter "target" is not valid`);
}
if (!key || 0 === key.length) {
throw new Error(`Parameter "key" required`);
}
if (target instanceof Array) {
const result: string[] = [];
target.forEach(t => {
result.push(this.get(t, key, separator));
});
return result.join(!!separator ? separator : '');
}
const keys = Object.keys(target);
try {
const lang =
this.currentLang.charAt(0).toUpperCase() +
this.currentLang.substring(1);
const langKey = `${key}${lang}`;
if (-1 !== keys.indexOf(langKey)) {
return target[langKey];
}
} catch (error) {}
if (-1 !== keys.indexOf(key)) {
return target[key];
}
throw new Error(`value is not exist`);
}
/**
* Changes the current lang
*/
private changeLang(lang: string): void {
this.currentLang = lang;
this.onLangChange.emit({ lang });
// if there is no default lang, use the one that we just set
if (!this.defaultLang) {
this.changeDefaultLang(lang);
}
}
/**
* Changes the default lang
*/
private changeDefaultLang(lang: string): void {
this.defaultLang = lang;
this.onDefaultLangChange.emit({ lang });
}
}

8
projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
View File

@ -43,6 +43,7 @@ import { ClipboardService } from './services/clipboard.service';
import { DialogService } from './services/dialog.service';
import { SnackBarService } from './services/snack-bar.service';
import { SplashScreenService } from './services/splash-screen.service';
import { TranslateService } from './services/translate.service';
import { ClickOutsideDirective } from './directives/click-outside.directive';
import { FileUploadForDirective } from './directives/file-upload-for.directive';
@ -61,6 +62,7 @@ import {
} from './pipes/dates.pipe';
import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
import { LinkyPipe } from './pipes/linky.pipe';
import { TranslatePipe } from './pipes/translate.pipe';
import { MatTabsModule } from '@angular/material';
@ -96,14 +98,16 @@ const PIPES = [
DateToStringFormatPipe,
DateDistanceToDatePipe,
SecondsToMinutesPipe,
LinkyPipe
LinkyPipe,
TranslatePipe
];
const SERVICES = [
BottomSheetService,
ClipboardService,
DialogService,
SnackBarService,
SplashScreenService
SplashScreenService,
TranslateService
];
@NgModule({

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

@ -33,6 +33,7 @@ export * from './lib/services/clipboard.service';
export * from './lib/services/dialog.service';
export * from './lib/services/snack-bar.service';
export * from './lib/services/splash-screen.service';
export * from './lib/services/translate.service';
export * from './lib/types/file-viewer.type';