Skip to content

Commit

Permalink
add translation to text field in content
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexcibotari
alexcibotari committed Oct 16, 2024
1 parent cd4552e commit 684bfcd
Show file tree
Hide file tree
Showing 10 changed files with 139 additions and 50 deletions.
2 changes: 1 addition & 1 deletion functions/src/models/translate.model.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export interface TranslateData {
content: string;
sourceLocale: string;
sourceLocale?: string;
targetLocale: string;
}
8 changes: 6 additions & 2 deletions functions/src/translate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,12 @@ export const translate = onCall<TranslateData>(async request => {
logger.info('[translate] context.auth: ' + JSON.stringify(request.auth));
const { content, sourceLocale, targetLocale } = request.data;
if (!canPerform(UserPermission.TRANSLATION_UPDATE, request.auth)) throw new HttpsError('permission-denied', 'permission-denied');
if (!(SUPPORT_LOCALES.has(sourceLocale) && SUPPORT_LOCALES.has(targetLocale)))
throw new HttpsError('invalid-argument', 'Unsupported language');
if (sourceLocale && !SUPPORT_LOCALES.has(sourceLocale)) {
throw new HttpsError('invalid-argument', `Unsupported source locale : '${sourceLocale}'`);
}
if (!SUPPORT_LOCALES.has(targetLocale)) {
throw new HttpsError('invalid-argument', `Unsupported target locale : '${targetLocale}'`);
}

const projectId = firebaseConfig.projectId;
let locationId; // firebaseConfig.locationId || 'global'
Expand Down
2 changes: 2 additions & 0 deletions src/app/features/spaces/contents/contents.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { ContentHistoryService } from '@shared/services/content-history.service'
import { MarkdownModule } from 'ngx-markdown';
import { MoveDialogComponent } from './move-dialog/move-dialog.component';
import { StatusComponent } from '@shared/components/status';
import { TranslateService } from '@shared/services/translate.service';

@NgModule({
declarations: [
Expand Down Expand Up @@ -54,6 +55,7 @@ import { StatusComponent } from '@shared/components/status';
AssetService,
TaskService,
TokenService,
TranslateService,
],
})
export class ContentsModule {}
79 changes: 56 additions & 23 deletions src/app/features/spaces/contents/edit-document-schema/edit-document-schema.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,34 @@
@switch (field.kind) {
<!--TEXT-->
@case ('TEXT') {
<mat-form-field [floatLabel]="isDefaultLocale ? 'auto' : 'always'">
<mat-form-field [floatLabel]="isDefaultLocale() ? 'auto' : 'always'">
<mat-label>{{ field.displayName || field.name }}</mat-label>
<input
matInput
type="text"
[formControlName]="field.name"
[attr.minlength]="field.minLength"
[attr.maxlength]="field.maxLength"
[placeholder]="!isDefaultLocale && data[field.name]"
[placeholder]="!isDefaultLocale() && data[field.name]"
autocomplete="off" />
<!--<span matTextPrefix *ngIf="field.translatable && !isDefaultLocale">
<mat-slide-toggle [checked]="form.controls[field.name].enabled" (change)="markFiledAvailable($event, field)" />
</span>-->
@if (field.translatable) {
<mat-icon matIconSuffix matTooltip="The field is translatable">language</mat-icon>
<button
[matMenuTriggerFor]="tMenu"
[disabled]="isDefaultLocale()"
mat-icon-button
matSuffix
matTooltip="Translate the field with AI">
<mat-icon>translate</mat-icon>
<mat-menu #tMenu="matMenu">
@for (locale of availableLocales(); track locale.id) {
@if (locale.id !== selectedLocaleId()) {
<button mat-menu-item (click)="translate(field.name, locale.id, selectedLocaleId())">
Translate from <b>{{ locale.name }}</b> to <b>{{ selectedLocale().name }}</b>
</button>
}
}
</mat-menu>
</button>
}
@if (field.description) {
<mat-hint>{{ field.description }}</mat-hint>
Expand All @@ -33,7 +46,7 @@
}
<!--TEXTAREA-->
@case ('TEXTAREA') {
<mat-form-field [floatLabel]="isDefaultLocale ? 'auto' : 'always'">
<mat-form-field [floatLabel]="isDefaultLocale() ? 'auto' : 'always'">
<mat-label>{{ field.displayName || field.name }}</mat-label>
<textarea
matInput
Expand All @@ -43,10 +56,26 @@
[formControlName]="field.name"
[attr.minLength]="field.minLength"
[attr.maxlength]="field.maxLength"
[placeholder]="!isDefaultLocale && data[field.name]"
[placeholder]="!isDefaultLocale() && data[field.name]"
autocomplete="off"></textarea>
@if (field.translatable) {
<mat-icon matIconSuffix matTooltip="The field is translatable">language</mat-icon>
<button
[matMenuTriggerFor]="tMenu"
[disabled]="isDefaultLocale()"
mat-icon-button
matSuffix
matTooltip="Translate the field with AI">
<mat-icon>translate</mat-icon>
<mat-menu #tMenu="matMenu">
@for (locale of availableLocales(); track locale.id) {
@if (locale.id !== selectedLocaleId()) {
<button mat-menu-item (click)="translate(field.name, locale.id, selectedLocaleId())">
Translate from <b>{{ locale.name }}</b> to <b>{{ selectedLocale().name }}</b>
</button>
}
}
</mat-menu>
</button>
}
@if (field.description) {
<mat-hint>{{ field.description }}</mat-hint>
Expand Down Expand Up @@ -96,15 +125,15 @@
}
<!--NUMBER-->
@case ('NUMBER') {
<mat-form-field [floatLabel]="isDefaultLocale ? 'auto' : 'always'">
<mat-form-field [floatLabel]="isDefaultLocale() ? 'auto' : 'always'">
<mat-label>{{ field.displayName || field.name }}</mat-label>
<input
matInput
type="number"
[formControlName]="field.name"
[attr.min]="field.minValue"
[attr.max]="field.maxValue"
[placeholder]="!isDefaultLocale && data[field.name]"
[placeholder]="!isDefaultLocale() && data[field.name]"
autocomplete="off" />
@if (field.translatable) {
<mat-icon matIconSuffix matTooltip="The field is translatable">language</mat-icon>
Expand All @@ -119,15 +148,15 @@
}
<!--COLOR-->
@case ('COLOR') {
<mat-form-field [floatLabel]="isDefaultLocale ? 'auto' : 'always'">
<mat-form-field [floatLabel]="isDefaultLocale() ? 'auto' : 'always'">
<mat-label>{{ field.displayName || field.name }}</mat-label>
<input
matInput
type="color"
[formControlName]="field.name"
[attr.min]="field.minValue"
[attr.max]="field.maxValue"
[placeholder]="!isDefaultLocale && data[field.name]"
[placeholder]="!isDefaultLocale() && data[field.name]"
autocomplete="off" />
@if (field.translatable) {
<mat-icon matIconSuffix matTooltip="The field is translatable">language</mat-icon>
Expand All @@ -142,13 +171,13 @@
}
<!--DATE-->
@case ('DATE') {
<mat-form-field [floatLabel]="isDefaultLocale ? 'auto' : 'always'">
<mat-form-field [floatLabel]="isDefaultLocale() ? 'auto' : 'always'">
<mat-label>{{ field.displayName || field.name }}</mat-label>
<input
matInput
type="date"
[formControlName]="field.name"
[placeholder]="!isDefaultLocale && data[field.name]"
[placeholder]="!isDefaultLocale() && data[field.name]"
autocomplete="off" />
@if (field.translatable) {
<mat-icon matIconSuffix matTooltip="The field is translatable">language</mat-icon>
Expand All @@ -163,13 +192,13 @@
}
<!--DATE TIME-->
@case ('DATETIME') {
<mat-form-field [floatLabel]="isDefaultLocale ? 'auto' : 'always'">
<mat-form-field [floatLabel]="isDefaultLocale() ? 'auto' : 'always'">
<mat-label>{{ field.displayName || field.name }}</mat-label>
<input
matInput
type="datetime-local"
[formControlName]="field.name"
[placeholder]="!isDefaultLocale && data[field.name]"
[placeholder]="!isDefaultLocale() && data[field.name]"
autocomplete="off" />
@if (field.translatable) {
<mat-icon matIconSuffix matTooltip="The field is translatable">language</mat-icon>
Expand Down Expand Up @@ -202,7 +231,7 @@
}
<!--OPTION-->
@case ('OPTION') {
<mat-form-field [floatLabel]="isDefaultLocale ? 'auto' : 'always'">
<mat-form-field [floatLabel]="isDefaultLocale() ? 'auto' : 'always'">
<mat-label>{{ field.displayName || field.name }}</mat-label>
<mat-select [formControlName]="field.name">
@if (!field.required) {
Expand Down Expand Up @@ -234,7 +263,7 @@
}
<!--OPTIONS-->
@case ('OPTIONS') {
<mat-form-field [floatLabel]="isDefaultLocale ? 'auto' : 'always'">
<mat-form-field [floatLabel]="isDefaultLocale() ? 'auto' : 'always'">
<mat-label>{{ field.displayName || field.name }}</mat-label>
<mat-select [formControlName]="field.name" multiple>
<!--Handle source not defined in previous versions-->
Expand Down Expand Up @@ -264,7 +293,11 @@
<!--LINK-->
@case ('LINK') {
@if (form.controls[field.name]; as control) {
<ll-link-select [form]="control" [component]="field" [documents]="documents" [default]="!isDefaultLocale && data[field.name]" />
<ll-link-select
[form]="control"
[component]="field"
[documents]="documents"
[default]="!isDefaultLocale() && data[field.name]" />
}
}
<!--REFERENCE-->
Expand Down Expand Up @@ -318,7 +351,7 @@
{{ sch.displayName }} <span class="schema-id">#{{ sch.id }}</span>
@if (sch.previewField) {
<div matListItemLine>
{{ previewText(item, sch, locale) }}
{{ previewText(item, sch, selectedLocaleId()) }}
</div>
}
</div>
Expand Down Expand Up @@ -371,7 +404,7 @@
{{ sch.displayName }} <span class="schema-id">#{{ sch.id }}</span>
@if (sch.previewField) {
<div matListItemLine>
{{ previewText(item, sch, locale) }}
{{ previewText(item, sch, selectedLocaleId()) }}
</div>
}
</div>
Expand Down Expand Up @@ -434,7 +467,7 @@
<mat-expansion-panel-header>
<mat-panel-title>EditDocumentSchema Form => {{ form?.valid }}</mat-panel-title>
</mat-expansion-panel-header>
<pre>isDefaultLocale = {{ isDefaultLocale }}</pre>
<pre>isDefaultLocale = {{ isDefaultLocale() }}</pre>
<pre>{{ form.value | json }}</pre>
<pre>{{ form.errors | json }}</pre>
</mat-expansion-panel>
Expand Down
Loading

0 comments on commit 684bfcd

Please sign in to comment.