Translations v1 (#1505)

* Adding translations-button to post-head

* Adding post-translations component

* Fix language-length check

* Translations component for posts

* Moving permissions-check

* Sending base-language when saving a post

* Displaying existing post-translations in the translation-edit view

* Saving translations properly

* Displaying translations in post-details

* Fixing error when saving translations

* New alert for success/info

* Info/alert-box in posts when showing a translated post

* Displaying post in translated language after saving post

* Displaying survey-questions in selected language if available

* Hiding translation-icon in list

* Preserving translations when editing a post

* Using full language-list for post-translations

* Adding validation+small style-fixes

* CSS-cleanup for post-translations

* Moving strings to en.json

* Removing console.log

* Using site-language if no base_language is set

* Hiding translations-icon everywhere except in details

* Adding strings to en.json

* Displaying translation-info in post-modal

* Using full language-list for translations

* Only displaying icon if translations are available (for non-edit-users)

* Remove line under dropdown but keep spacing

* Displaying original language for the post

Author: Angamanga

apps/web-mzima-client/src/app/core/enums/icons.ts

@@ -75,4 +75,5 @@ export enum Icons {
   thumbUp = 'thumb-up',
   ellipses = 'ellipses',
   lock = 'lock',
+  translate = 'translate',
 }

apps/web-mzima-client/src/app/core/services/event-bus.service.ts

@@ -22,6 +22,7 @@ export const enum EventType {
   RefreshSurveysCounters = 'REFRESH_SURVEYS_COUNTERS',
   StopExportPolling = 'STOP_EXPORT_POLLING',
   ExportDone = 'EXPORT_DONE',
+  DisplayTranslatedPost = 'DISPLAY_TRANSLATED_POST',
   StatusChange = 'STATUS_CHANGE',
 }
 

apps/web-mzima-client/src/app/core/services/language.service.ts

@@ -4,6 +4,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject } from 'rxjs';
 import { LanguageInterface } from '@mzima-client/sdk';
 import LangJSON from '../../../assets/locales/languages.json';
+import entityLanguages from '../../../assets/locales/entity-languages.json';
 import { SessionService } from './session.service';
 
 @Injectable({
@@ -41,6 +42,9 @@ export class LanguageService {
   private set initialLanguage(value: string) {
     localStorage.setItem(this.languageKey, value);
   }
+  getEntityLanguages() {
+    return entityLanguages;
+  }
 
   getLanguages(): LanguageInterface[] {
     if (LangJSON.languages && LangJSON.languages.length > 0) {

apps/web-mzima-client/src/app/post/post-details/post-details.component.html

@@ -17,28 +17,43 @@
           [deleteable]="post.allowed_privileges.includes('delete')"
           (statusChanged)="statusChangedHandle()"
           (deleted)="deletedHandle()"
+          (openTranslationModal)="openTranslatePost()"
         >
         </app-post-head>
       </div>
-
+      <app-post-translated
+        *ngIf="displayLanguage"
+        (openTranslationModal)="openTranslatePost()"
+        (displayOriginalPost)="displayOriginalPost()"
+        [baseLanguage]="post.base_language"
+        [displayLanguage]="displayLanguage"
+      ></app-post-translated>
       <div class="post__twitter" *ngIf="post.source === 'Twitter' && post.data_source_message_id">
         <app-twitter-widget [id]="post.data_source_message_id"></app-twitter-widget>
       </div>
 
       <div class="post__survey" *ngIf="post.form">
-        <h3>{{ post.form.name }}</h3>
-        <p>{{ post.form.description }}</p>
+        <h3>{{ post.form.translations[displayLanguage]?.name || post.form.name }}</h3>
+        <p>{{ post.form.translations[displayLanguage]?.description || post.form.description }}</p>
       </div>
 
       <h2 *ngIf="post.title?.length || post.content?.length" data-qa="postTitleValue">
-        {{ post.title || post.content }}
+        {{
+          post.translations[displayLanguage]?.title ||
+            post.title ||
+            post.translations[displayLanguage]?.description ||
+            post.content
+        }}
       </h2>
       <div class="post__metadata-container">
         <app-post-metadata *ngIf="post.id" [post]="post"></app-post-metadata>
       </div>
 
       <div class="post__description" *ngIf="post.title?.length && post.content?.length">
-        <p [innerHTML]="post.content" data-qa="postDescriptionValue"></p>
+        <p
+          [innerHTML]="post.translations[displayLanguage]?.description || post.content"
+          data-qa="postDescriptionValue"
+        ></p>
       </div>
 
       <ng-container *ngFor="let post_content of post.post_content; let i = index">
@@ -60,7 +75,7 @@ <h2 *ngIf="post.title?.length || post.content?.length" data-qa="postTitleValue">
               *ngIf="field.input !== 'tags' ? field.value : field.value?.length"
               class="post__group"
             >
-              <h3>{{ field.label }}</h3>
+              <h3>{{ field.translations[displayLanguage]?.label || field.label }}</h3>
 
               <ng-container *ngIf="field.input === 'tags'">
                 <ng-container *ngFor="let category of field.value">
@@ -121,12 +136,21 @@ <h3>{{ field.label }}</h3>
                   <p *ngIf="!field.value.value">-</p>
                 </ng-container>
                 <ng-container *ngIf="field.label !== 'Media Link'">
-                  <p>{{ field.value.value || '-' }}</p>
+                  <p>
+                    {{
+                      field.value.translations[displayLanguage]?.value || field.value.value || '-'
+                    }}
+                  </p>
                 </ng-container>
               </ng-container>
 
               <ng-container *ngIf="field.input === 'textarea'">
-                <p [innerHTML]="field.value.value" data-qa="longTextValue"></p>
+                <p
+                  [innerHTML]="
+                    field.value.translations[displayLanguage]?.value || field.value.value
+                  "
+                  data-qa="longTextValue"
+                ></p>
               </ng-container>
 
               <ng-container *ngIf="field.input === 'checkbox'">
@@ -228,7 +252,9 @@ <h3>{{ field.label }}</h3>
 
               <ng-container *ngIf="field.input === 'markdown'">
                 <span class="code-container">
-                  <code>{{ field.value.value || '-' }}</code>
+                  <code>{{
+                    field.value.translations[displayLanguage]?.value || field.value.value || '-'
+                  }}</code>
                 </span>
               </ng-container>
             </div>

apps/web-mzima-client/src/app/post/post-details/post-details.component.ts

@@ -25,11 +25,14 @@ import {
   SurveysService,
 } from '@mzima-client/sdk';
 import { TranslateService } from '@ngx-translate/core';
+import { untilDestroyed } from '@ngneat/until-destroy';
 import { lastValueFrom, Subscription } from 'rxjs';
 import { BaseComponent } from '../../base.component';
 import { preparingVideoUrl } from '../../core/helpers/validators';
 import { dateHelper } from '@helpers';
 import { BreakpointService, EventBusService, EventType, SessionService } from '@services';
+import { LanguageService } from '../../core/services/language.service';
+import { PostTranslateComponent } from '../post-translate/post-translate.component';
 
 @Component({
   selector: 'app-post-details',
@@ -51,6 +54,8 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
   public isPostLoading: boolean = true;
   public isManagePosts: boolean = false;
   public postChanged: boolean;
+  public displayLanguage: string;
+
   public post: PostResult;
   private dataSubscription: Subscription;
   constructor(
@@ -66,6 +71,7 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
     private surveyService: SurveysService,
     protected sanitizer: DomSanitizer,
     private eventBusService: EventBusService,
+    private languageService: LanguageService,
   ) {
     super(sessionService, breakpointService);
     this.getUserData();
@@ -86,6 +92,7 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
         //----------------------
         this.allowed_privileges = localStorage.getItem('USH_allowed_privileges') ?? '';
         this.postId = Number(params['id']);
+        this.translatePost();
       }
     });
 
@@ -104,6 +111,16 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
       });
     }
   }
+  translatePost() {
+    this.eventBusService
+      .on(EventType.DisplayTranslatedPost)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: (language) => {
+          this.displayLanguage = language.code;
+        },
+      });
+  }
 
   loadData(): void {}
 
@@ -320,4 +337,27 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
   public getDate(value: any, format: string): string {
     return dateHelper.getDateWithTz(value, format);
   }
+
+  public openTranslatePost() {
+    const dialogRef = this.dialog.open(PostTranslateComponent, {
+      width: '100%',
+      maxWidth: '768px',
+      panelClass: ['modal', 'select-languages-modal'],
+      data: {
+        post: this.post,
+        languages: this.languageService.getEntityLanguages(),
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((response) => {
+      if (response) {
+        this.post = response.post;
+        this.displayLanguage = response.displayLanguage.code;
+      }
+    });
+  }
+
+  public displayOriginalPost() {
+    this.displayLanguage = '';
+  }
 }

apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts

@@ -565,11 +565,12 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
   }
 
   async preparationData(): Promise<any> {
-    for (const task of this.tasks) {
+    for (const [index, task] of this.tasks.entries()) {
       task.fields = await Promise.all(
         task.fields.map(
           async (field: { key: string | number; input: string; type: string; options: any }) => {
             let value: any = {
+              translations: [],
               value: this.form.value[field.key],
             };
 
@@ -705,6 +706,12 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
                   this.form.value[field.key]?.map((fieldValue: any) => fieldValue.value) || [];
                 break;
               default:
+                if (this.post?.post_content) {
+                  const postField = this.post.post_content[index].fields.find(
+                    (f: any) => f.key === field.key,
+                  );
+                  value.translations = postField?.value?.translations || [];
+                }
                 value.value = this.form.value[field.key] || null;
             }
             return {
@@ -725,24 +732,26 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
     try {
       await this.preparationData();
     } catch (error: any) {
+      console.log(error);
       this.form.enable();
       this.submitted = false;
       this.showMessage(error, 'error');
       return;
     }
 
+    const postLanguage = this.selectedLanguage?.code || this.languageService.initialLanguage;
     const postData = {
-      base_language: 'en',
+      base_language: postLanguage,
       completed_stages: this.completeStages,
       content: this.description,
       description: '',
-      enabled_languages: {},
       form_id: this.formId,
       locale: 'en_US',
       post_content: this.tasks,
       published_to: [],
       title: this.title,
       type: 'report',
+      translations: this.post?.translations || [],
     };
 
     if (!this.form.valid) this.form.markAllAsTouched();

apps/web-mzima-client/src/app/post/post-head/post-head.component.html

@@ -33,6 +33,22 @@
   >
     <mat-icon icon svgIcon="share" [data-qa]="'share-post'" [attr.post]="post.id"></mat-icon>
   </mzima-client-button>
+  <mzima-client-button
+    fill="clear"
+    color="gray"
+    tabindex="-1"
+    [iconOnly]="true"
+    (buttonClick)="openTranslationModal.emit()"
+    *ngIf="showTranslationsIcon()"
+    class="post-head__control post-head__control--share"
+  >
+    <mat-icon
+      icon
+      svgIcon="translate"
+      [data-qa]="'translate-post'"
+      [attr.post]="post.id"
+    ></mat-icon>
+  </mzima-client-button>
   <mzima-client-button
     *ngIf="!!user?.userId"
     fill="clear"

apps/web-mzima-client/src/app/post/post-head/post-head.component.ts

@@ -20,10 +20,12 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
   @Input() public editable: boolean;
   @Input() public feedView: boolean;
   @Input() public deleteable: boolean;
+  @Input() public hideTranslationsIcon: boolean;
   @Output() edit = new EventEmitter();
   @Output() refresh = new EventEmitter();
   @Output() deleted = new EventEmitter();
   @Output() statusChanged = new EventEmitter();
+  @Output() openTranslationModal = new EventEmitter();
   public isLocked: boolean;
 
   constructor(
@@ -165,4 +167,8 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
       duration,
     });
   }
+  public showTranslationsIcon() {
+    const languagesAvailabe = this.post?.enabled_languages?.available?.length > 0;
+    return !this.hideTranslationsIcon && (languagesAvailabe || this.editable);
+  }
 }

apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html

@@ -21,6 +21,7 @@
       [deleteable]="post.allowed_privileges.includes('delete')"
       (deleted)="deletedHandle()"
       (statusChanged)="statusChangedHandle()"
+      [hideTranslationsIcon]="true"
     >
     </app-post-head>
   </div>