Skip to content

Commit

Permalink
feat: translate zhHant
Browse files Browse the repository at this point in the history
  • Loading branch information
meta-d committed Sep 15, 2023
1 parent ca9a740 commit b049d36
Show file tree
Hide file tree
Showing 34 changed files with 7,711 additions and 233 deletions.
46 changes: 1 addition & 45 deletions apps/cloud/src/app/@core/core.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,58 +9,14 @@ import {
import { FormsModule } from '@angular/forms'
import {
MissingTranslationHandler,
MissingTranslationHandlerParams,
TranslateLoader,
TranslateModule
} from '@ngx-translate/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'
import { PACStateModule } from '@metad/cloud/state'
import { ZhHans } from '@metad/ocap-angular/i18n'
import { zhHans as CoreZhHans } from '@metad/core'
import { ZhHans as StoryZhHans } from '@metad/story/i18n'
import { ZhHans as AuthZhHans } from '@metad/cloud/auth'
import { ZhHans as IAppZhHans } from '@metad/cloud/indicator-market/i18n'
import { map, Observable } from 'rxjs'
import { AuthModule } from './auth/auth.module'
import { throwIfAlreadyLoaded } from './module-import-guard'
import { HttpLoaderFactory, MyMissingTranslationHandler } from './theme'

class CustomTranslateHttpLoader extends TranslateHttpLoader {
getTranslation(lang: string): Observable<Object> {
let ocapTranslates = {}
switch(lang) {
case 'zh-Hans':
case 'zh-CN':
ocapTranslates = {
...ZhHans,
...CoreZhHans,
...StoryZhHans,
...AuthZhHans,
...IAppZhHans
}
break
default:
}
return super.getTranslation(lang).pipe(
map((t) => ({
...t,
...ocapTranslates
}))
)
}
}

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new CustomTranslateHttpLoader(http, `./assets/i18n/`, '.json')
}

export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
if (params.interpolateParams) {
return params.interpolateParams['Default'] || params.key
}
return params.key
}
}

@NgModule({
imports: [
Expand Down
1 change: 1 addition & 0 deletions apps/cloud/src/app/@core/theme/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './selector.service'
export * from './theme.service'
export * from './icons'
export * from './translate'
85 changes: 85 additions & 0 deletions apps/cloud/src/app/@core/theme/translate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { HttpClient } from '@angular/common/http'
import en from '@angular/common/locales/en'
import localeZhExtra from '@angular/common/locales/extra/zh-Hans'
import zh from '@angular/common/locales/zh'
import localeZh from '@angular/common/locales/zh-Hans'
import { ZhHans as AuthZhHans, ZhHant as AuthZhHant } from '@metad/cloud/auth'
import { ZhHans as IAppZhHans, ZhHant as IAppZhHant } from '@metad/cloud/indicator-market/i18n'
import { registerLocaleData as nxRegisterLocaleData, zhHans as CoreZhHans, zhHant as CoreZhHant } from '@metad/core'
import { ZhHans, ZhHant } from '@metad/ocap-angular/i18n'
import { ZhHans as StoryZhHans, ZhHant as StoryZhHant } from '@metad/story/i18n'
import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'
import { } from '@metad/core'
import { Observable, map } from 'rxjs'
import { LanguagesEnum } from '../types'
import { registerLocaleData } from '@angular/common'
import { enUS, zhCN, zhHK } from 'date-fns/locale'


export const LOCALE_DEFAULT = LanguagesEnum.SimplifiedChinese
registerLocaleData(localeZh, LOCALE_DEFAULT, localeZhExtra)
registerLocaleData(zh)
registerLocaleData(en)
nxRegisterLocaleData(CoreZhHans, LanguagesEnum.SimplifiedChinese)
nxRegisterLocaleData(CoreZhHant, LanguagesEnum.TraditionalChinese)

class CustomTranslateHttpLoader extends TranslateHttpLoader {
getTranslation(lang: string): Observable<Object> {
let ocapTranslates = {}
switch (lang) {
case LanguagesEnum.Chinese:
case LanguagesEnum.SimplifiedChinese:
ocapTranslates = {
...ZhHans,
...CoreZhHans,
...StoryZhHans,
...AuthZhHans,
...IAppZhHans
}
break
case LanguagesEnum.TraditionalChinese:
ocapTranslates = {
...ZhHant,
...CoreZhHant,
...StoryZhHant,
...AuthZhHant,
...IAppZhHant
}
break
default:
}
return super.getTranslation(lang).pipe(
map((t) => ({
...t,
...ocapTranslates
}))
)
}
}

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new CustomTranslateHttpLoader(http, `./assets/i18n/`, '.json')
}

export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
if (params.interpolateParams) {
return params.interpolateParams['Default'] || params.key
}
return params.key
}
}

export function mapDateLocale(locale: string) {
switch (locale) {
case 'zh-CN':
case 'zh-Hans':
case 'zh':
return zhCN
case 'zh-Hant':
return zhHK
default:
return enUS
}
}
10 changes: 1 addition & 9 deletions apps/cloud/src/app/@core/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,18 +35,10 @@ export enum RequestMethodEnum {

export const LANGUAGES = [
{ value: 'zh-CN', label: '简体中文' },
{ value: 'zh-Hant', label: '繁体中文' },
{ value: 'en', label: 'English' }
]

// /**
// * @deprecated use in state project
// */
// export enum ThemesEnum {
// default = 'default',
// dark = 'dark',
// thin = 'thin'
// }

export interface Group {
id: string
name: string
Expand Down
34 changes: 34 additions & 0 deletions apps/cloud/src/app/@theme/header/settings/settings.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<div role="tooltip" class="z-50">
<div class="px-3 py-2 border-b flex items-center border-gray-200 rounded-t-lg dark:border-gray-600">
<h3 class="mb-0 font-semibold">
{{ 'PAC.MENU.UserSettings' | translate: { Default: 'User Settings' } }}
</h3>:

<span class="flex-1 overflow-hidden text-ellipsis">
{{ isAuthenticated$ | async | user }}
</span>
</div>
<div class="w-[220px] flex flex-col justify-start items-stretch p-4" *ngIf="isAuthenticated$ | async as user">
<div class="flex flex-col justify-start items-stretch p-2">
<ngm-select [label]="'PAC.MENU.GENERAL.LANGUAGE' | translate: { Default: 'Language' }"
[placeholder]="'PAC.MENU.GENERAL.LANGUAGE_PLACEHOLDER' | translate: { Default: 'Select Language' }"
[displayBehaviour]="DisplayBehaviour.descriptionOnly"
[selectOptions]="languages"
[ngModel]="preferredLanguage$ | async"
(ngModelChange)="onLanguageSelect($event)"
>
<mat-icon ngmSuffix>translate</mat-icon>
</ngm-select>
</div>

<button mat-button (click)="onProfile()">
<mat-icon>account_circle</mat-icon>
<span>{{ 'PAC.menu.profile' | translate }}</span>
</button>

<button mat-button (click)="onLogoutClick()">
<mat-icon>settings_power</mat-icon>
<span>{{ 'PAC.menu.logout' | translate }}</span>
</button>
</div>
</div>
75 changes: 19 additions & 56 deletions apps/cloud/src/app/@theme/header/settings/settings.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,77 +6,40 @@ import { MatFormFieldModule } from '@angular/material/form-field'
import { MatIconModule } from '@angular/material/icon'
import { MatSelectModule } from '@angular/material/select'
import { Router } from '@angular/router'
import { NgmSelectComponent } from '@metad/ocap-angular/common'
import { DensityDirective } from '@metad/ocap-angular/core'
import { UntilDestroy } from '@ngneat/until-destroy'
import { DisplayBehaviour } from '@metad/ocap-core'
import { TranslateModule } from '@ngx-translate/core'
import { LANGUAGES, Store } from '../../../@core'
import { UserPipe } from '../../../@shared'

@UntilDestroy({ checkProperties: true })
@Component({
standalone: true,
imports: [
CommonModule,
MatFormFieldModule,
FormsModule,
MatSelectModule,
MatIconModule,
MatButtonModule,
TranslateModule,
DensityDirective,
UserPipe
],
selector: 'pac-header-settings',
template: `<div role="tooltip" class="z-50">
<div class="px-3 py-2 border-b flex items-center border-gray-200 rounded-t-lg dark:border-gray-600">
<h3 class="mb-0 font-semibold">
{{ 'PAC.MENU.UserSettings' | translate: { Default: 'User Settings' } }}
</h3>:
<span class="flex-1 overflow-hidden text-ellipsis">
{{ isAuthenticated$ | async | user }}
</span>
</div>
<div class="flex flex-col justify-start items-stretch" *ngIf="isAuthenticated$ | async as user">
<div class="flex flex-col justify-start items-stretch p-2">
<mat-form-field appearance="fill" displayDensity="cosy">
<mat-label>{{ 'PAC.MENU.GENERAL.LANGUAGE' | translate: { Default: 'Language' } }}</mat-label>
<mat-select
[placeholder]="'PAC.MENU.GENERAL.LANGUAGE_PLACEHOLDER' | translate: { Default: 'Select Language' }"
[ngModel]="preferredLanguage$ | async"
(selectionChange)="onLanguageSelect($event)"
name="language"
>
<mat-option *ngFor="let l of languages" [value]="l.value">
{{ 'PAC.SETTINGS.GENERAL.LANGUAGE.' + l.value | translate: { Default: l.label } }}
</mat-option>
</mat-select>
<mat-icon matPrefix>translate</mat-icon>
</mat-form-field>
</div>
<button mat-button (click)="onProfile()">
<mat-icon>account_circle</mat-icon>
<span>{{ 'PAC.menu.profile' | translate }}</span>
</button>
<button mat-button (click)="onLogoutClick()">
<mat-icon>settings_power</mat-icon>
<span>{{ 'PAC.menu.logout' | translate }}</span>
</button>
</div>
</div>`,
standalone: true,
imports: [
CommonModule,
MatFormFieldModule,
FormsModule,
MatSelectModule,
MatIconModule,
MatButtonModule,
TranslateModule,
DensityDirective,
UserPipe,
NgmSelectComponent
],
selector: 'pac-header-settings',
templateUrl: './settings.component.html'
})
export class HeaderSettingsComponent {
languages = LANGUAGES
DisplayBehaviour = DisplayBehaviour

public readonly isAuthenticated$ = this.store.user$
preferredLanguage$ = this.store.preferredLanguage$

constructor(private store: Store, private router: Router) {}

onLanguageSelect({ value: language }): void {
onLanguageSelect(language): void {
this.store.preferredLanguage = language
}
onProfile() {
Expand Down
Loading

0 comments on commit b049d36

Please sign in to comment.