fix: survey localization not working after update. (#1936)

---------

Co-authored-by: Unai Zalba <[email protected]>
Co-authored-by: Antoine Hurard <[email protected]>

Author: 3 people

apps/back-office/src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { AppAbility } from '@oort-front/shared';
+import { AppAbility, UnsubscribeComponent } from '@oort-front/shared';
+import { takeUntil } from 'rxjs';
 
 /**
  * Main BO dashboard component
@@ -10,7 +11,7 @@ import { AppAbility } from '@oort-front/shared';
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
 })
-export class DashboardComponent {
+export class DashboardComponent extends UnsubscribeComponent {
   // === HEADER TITLE ===
   public title = 'Back-office';
 
@@ -27,8 +28,9 @@ export class DashboardComponent {
     private translate: TranslateService,
     private ability: AppAbility
   ) {
+    super();
     this.setNavGroups();
-    translate.onLangChange.subscribe(() => {
+    translate.onLangChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.setNavGroups();
     });
   }

libs/shared/src/i18n/en.json

@@ -738,7 +738,7 @@
 					"resourceSelectText": "First you have to select a resource before setting any filters"
 				}
 			},
-			"saveSurvey": "SavingSurvey"
+			"saveSurvey": "Saving the form"
 		},
 		"formMapProperties": {
 			"geofields": {

libs/shared/src/lib/components/dashboard-filter/dashboard-filter.module.ts

@@ -8,6 +8,8 @@ import { DrawerPositionerModule } from './directives/drawer-positioner/drawer-po
 import { DrawerPositionerDirective } from './directives/drawer-positioner/drawer-positioner.directive';
 import { SurveyCreatorModule } from 'survey-creator-angular';
 import { SurveyModule } from 'survey-angular-ui';
+import 'survey-core/survey.i18n.js';
+import 'survey-creator-core/survey-creator-core.i18n.js';
 
 /** Dashboard floating filter module. */
 @NgModule({

libs/shared/src/lib/components/dashboard-filter/filter-builder-modal/filter-builder-modal.component.ts

@@ -19,6 +19,9 @@ import { renderGlobalProperties } from '../../../survey/render-global-properties
 import { ReferenceDataService } from '../../../services/reference-data/reference-data.service';
 import { FormHelpersService } from '../../../services/form-helper/form-helper.service';
 import { Question } from '../../../survey/types';
+import 'survey-core/survey.i18n.js';
+import 'survey-creator-core/survey-creator-core.i18n.js';
+
 /**
  * Data passed to initialize the filter builder
  */

libs/shared/src/lib/components/form-builder/form-builder.component.ts

@@ -26,6 +26,8 @@ import {
 import { SurveyCreatorModel } from 'survey-creator-core';
 import { Question } from '../../survey/types';
 import { DOCUMENT } from '@angular/common';
+import { takeUntil } from 'rxjs';
+import { UnsubscribeComponent } from '../utils/unsubscribe/unsubscribe.component';
 
 /**
  * Array containing the different types of questions.
@@ -96,7 +98,10 @@ const CORE_FIELD_CLASS = 'core-question';
   templateUrl: './form-builder.component.html',
   styleUrls: ['./form-builder.component.scss'],
 })
-export class FormBuilderComponent implements OnInit, OnChanges, OnDestroy {
+export class FormBuilderComponent
+  extends UnsubscribeComponent
+  implements OnInit, OnChanges, OnDestroy
+{
   @Input() form!: Form;
   @Output() save: EventEmitter<any> = new EventEmitter();
   @Output() formChange: EventEmitter<any> = new EventEmitter();
@@ -126,9 +131,10 @@ export class FormBuilderComponent implements OnInit, OnChanges, OnDestroy {
     private formHelpersService: FormHelpersService,
     @Inject(DOCUMENT) private document: Document
   ) {
+    super();
     // translate the editor in the same language as the interface
     surveyLocalization.currentLocale = this.translate.currentLang;
-    this.translate.onLangChange.subscribe(() => {
+    this.translate.onLangChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       surveyLocalization.currentLocale = this.translate.currentLang;
       this.setFormBuilder(this.surveyCreator.text);
     });
@@ -177,7 +183,8 @@ export class FormBuilderComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  ngOnDestroy(): void {
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
     this.surveyCreator.survey?.dispose();
   }
 
@@ -316,7 +323,7 @@ export class FormBuilderComponent implements OnInit, OnChanges, OnDestroy {
           renderGlobalProperties(this.referenceDataService)
         )
     );
-    // this.surveyCreator.survey.locale = this.translate.currentLang; // -> set the defaultLanguage property also
+    this.surveyCreator.survey.locale = surveyLocalization.currentLocale; // -> set the defaultLanguage property also
 
     // add move up/down buttons
     // ¿No need? As the new surveyjs creator has a built in drag and drop feature to move questions between pages and within a page between questions

libs/shared/src/lib/components/form-builder/form-builder.module.ts

@@ -5,6 +5,8 @@ import { TranslateModule } from '@ngx-translate/core';
 import { DateInputModule } from '@progress/kendo-angular-dateinputs';
 import { DialogModule } from '@oort-front/ui';
 import { SurveyCreatorModule } from 'survey-creator-angular';
+import 'survey-core/survey.i18n.js';
+import 'survey-creator-core/survey-creator-core.i18n.js';
 
 /**
  * FormBuilderModule is a class used to manage all the modules and components

libs/shared/src/lib/components/ui/core-grid/filter/filter.component.ts

@@ -1,10 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
   BaseFilterCellComponent,
   FilterService,
 } from '@progress/kendo-angular-grid';
 import { isEmpty, isNil } from 'lodash';
+import { Subject, takeUntil } from 'rxjs';
 
 /**
  * Shared-grid-filter component
@@ -16,7 +17,7 @@ import { isEmpty, isNil } from 'lodash';
 })
 export class GridFilterComponent
   extends BaseFilterCellComponent
-  implements OnInit
+  implements OnInit, OnDestroy
 {
   /** @returns selected value */
   public get selectedValue(): any {
@@ -85,6 +86,7 @@ export class GridFilterComponent
   ] as const;
 
   public selectedOperator!: string;
+  private destroy$: Subject<void> = new Subject<void>();
 
   /**
    * Constructor for shared-grid-filter
@@ -103,7 +105,7 @@ export class GridFilterComponent
     this.selectedOperator = this.isNotArray ? 'eq' : 'contains';
     this.setOperators();
     this.choices = (this.data || []).slice();
-    this.translate.onLangChange.subscribe(() => {
+    this.translate.onLangChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.setOperators();
     });
   }
@@ -176,4 +178,10 @@ export class GridFilterComponent
     };
     this.applyFilter(this.filter);
   }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

libs/shared/src/lib/survey/components/utils.ts

@@ -2,8 +2,9 @@ import { Dialog } from '@angular/cdk/dialog';
 import { UntypedFormControl } from '@angular/forms';
 import { NgZone } from '@angular/core';
 // todo: as it something to do with survey-angular
-// import { surveyLocalization } from 'survey-core';
+import { SurveyModel, surveyLocalization } from 'survey-core';
 import localForage from 'localforage';
+import { Question } from '../types';
 
 /**
  * Build the search button for resource and resources components
@@ -17,20 +18,18 @@ import localForage from 'localforage';
  * @returns The button DOM element
  */
 export const buildSearchButton = (
-  question: any,
+  question: Question,
   fieldsSettingsForm: any,
   multiselect: boolean,
   dialog: Dialog,
   temporaryRecords: UntypedFormControl,
   document: Document
 ): any => {
   const searchButton = document.createElement('button');
-  // todo: not working
-  // searchButton.innerText = surveyLocalization.getString(
-  //   'oort:search',
-  //   question.survey.locale
-  // );
-  searchButton.innerText = 'Search';
+  searchButton.innerText = surveyLocalization.getString(
+    'oort:search',
+    (question.survey as SurveyModel).locale
+  );
   searchButton.className = 'sd-btn !px-3 !py-2';
   searchButton.style.marginRight = '8px';
   if (fieldsSettingsForm) {
@@ -84,19 +83,17 @@ export const buildSearchButton = (
  * @returns The button DOM element
  */
 export const buildAddButton = (
-  question: any,
+  question: Question,
   multiselect: boolean,
   dialog: Dialog,
   ngZone: NgZone,
   document: Document
 ): any => {
   const addButton = document.createElement('button');
-  // todo: not working
-  // addButton.innerText = surveyLocalization.getString(
-  //   'oort:addNewRecord',
-  //   question.survey.locale
-  // );
-  addButton.innerText = 'Add new record';
+  addButton.innerText = surveyLocalization.getString(
+    'oort:addNewRecord',
+    (question.survey as SurveyModel).locale
+  );
   addButton.className = 'sd-btn !px-3 !py-2';
   if (question.addRecord && question.addTemplate && !question.isReadOnly) {
     addButton.onclick = async () => {
@@ -111,7 +108,7 @@ export const buildAddButton = (
             locale: question.resource.value,
             askForConfirm: false,
             ...(question.prefillWithCurrentRecord && {
-              prefillData: question.survey.data,
+              prefillData: (question.survey as SurveyModel).data,
             }),
           },
           height: '98%',

libs/shared/src/lib/survey/localization.ts

@@ -1,4 +1,3 @@
-import { set } from 'lodash';
 import { surveyLocalization } from 'survey-core';
 
 /** Available localizable strings, for survey */
@@ -33,11 +32,10 @@ const SURVEY_LOCALIZABLE_STRINGS = [
 export const initLocalization = () => {
   for (const item of SURVEY_LOCALIZABLE_STRINGS) {
     for (const [locale, value] of Object.entries(item.locales)) {
-      set(
-        surveyLocalization.locales,
-        `surveyLocalization.locales.${locale}.oort:${item.key}`,
-        value
-      );
+      if (!surveyLocalization.locales[locale]) {
+        surveyLocalization.locales[locale] = {};
+      }
+      surveyLocalization.locales[locale][`oort:${item.key}`] = value;
     }
   }
 };

libs/shared/src/lib/survey/widgets/comment-widget.ts

@@ -1,8 +1,8 @@
 import {
   CustomWidgetCollection,
   Serializer,
-  // SurveyModel,
-  // surveyLocalization,
+  SurveyModel,
+  surveyLocalization,
 } from 'survey-core';
 import { Question, QuestionComment } from '../types';
 /**
@@ -38,12 +38,10 @@ export const init = (
         mainDiv.id = 'editComment';
         mainDiv.style.marginBottom = '0.5em';
         const btnEl = document.createElement('button');
-        // todo: not working
-        // btnEl.innerText = surveyLocalization.getString(
-        //   'oort:edit',
-        //   (question.survey as SurveyModel).locale
-        // );
-        btnEl.innerText = 'Edit';
+        btnEl.innerText = surveyLocalization.getString(
+          'oort:edit',
+          (question.survey as SurveyModel).locale
+        );
         btnEl.className = 'sd-btn !px-3 !py-2';
         btnEl.style.width = '50px';
         mainDiv.appendChild(btnEl);