Optionally show locales in English & support this option in preset (#…

…5809)

* Support show loclaes in English & add it into presets

* Fix lerna issue

* Fix unit test

packages/creator-presets-core/src/presets-editable-base.ts

@@ -52,7 +52,7 @@ export class CreatorPresetEditableBase {
     }
     return res;
   }
-  protected getBoolVisibleIf(name: string): string { return "{" + name + "}=true"; }
+  protected getBoolVisibleIf(name: string, isTrue: boolean = true): string { return "{" + name + "}=" + (isTrue ? "true" : "false"); }
   protected getTextVisibleIf(name: string, val: string): string { return "{" + name + "}='" + val +"'"; }
   protected getNotEmptyVisibleIf(name: string): string { return "{" + name + "} notempty"; }
   protected createMainPageCore(): any { return undefined; }

packages/creator-presets-core/src/presets-editable-languages.ts

@@ -20,26 +20,43 @@ export class CreatorPresetEditableLanguages extends CreatorPresetEditableBase {
               choices: this.getCreatorLocales()
             },
             {
-              type: "checkbox",
-              name: this.surveyLocalesName,
+              type: "panel", name: "languages_survey_panel",
               title: "Survey languages",
-              minSelectedChoices: 1,
-              colCount: 3,
-              showSelectAllItem: true,
-              choices: this.getSurveyLocales()
+              elements: [
+                {
+                  type: "boolean",
+                  name: this.surveyShowInEnglishName,
+                  titleLocation: "hidden",
+                  labelFalse: "Display languages in their native form",
+                  labelTrue: "Display languages in English",
+                },
+                {
+                  type: "checkbox",
+                  name: this.surveyLocalesName,
+                  titleLocation: "hidden",
+                  minSelectedChoices: 1,
+                  colCount: 3,
+                  showSelectAllItem: true,
+                  choices: this.getSurveyLocales()
+                }
+              ]
             }
           ]
         }
       ] };
   }
   protected getJsonValueCore(model: SurveyModel, creator: SurveyCreatorModel): any {
     const creatorLocale = model.getValue(this.creatorLocaleName);
+    const showInEnglish = model.getValue(this.surveyShowInEnglishName) === true;
     const question = <QuestionCheckboxModel>model.getQuestionByName(this.surveyLocalesName);
-    if(!creatorLocale && question.isAllSelected) return undefined;
+    if(!creatorLocale && question.isAllSelected && !showInEnglish) return undefined;
     const res: any = {};
     if(creatorLocale) {
       res.creator = creatorLocale;
     }
+    if(showInEnglish) {
+      res.showNamesInEnglish = true;
+    }
     if(!question.isAllSelected && Array.isArray(question.value)) {
       res.surveyLocales = [];
       question.value.forEach(val => res.surveyLocales.push(val));
@@ -49,6 +66,8 @@ export class CreatorPresetEditableLanguages extends CreatorPresetEditableBase {
   protected setupQuestionsValueCore(model: SurveyModel, json: any, creator: SurveyCreatorModel): void {
     json = json || {};
     model.setValue(this.creatorLocaleName, json.creator);
+    model.setValue(this.surveyShowInEnglishName, json.showInEnglish === true);
+    this.updateLocaleNames(model);
     const question = <QuestionCheckboxModel>model.getQuestionByName(this.surveyLocalesName);
     const locales = json.surveyLocales;
     if(Array.isArray(locales) && locales.length > 0) {
@@ -57,8 +76,15 @@ export class CreatorPresetEditableLanguages extends CreatorPresetEditableBase {
       question.selectAll();
     }
   }
+  protected updateOnValueChangedCore(model: SurveyModel, name: string): void {
+    if(name === this.surveyShowInEnglishName) {
+      this.updateLocaleNames(model);
+    }
+  }
   private get creatorLocaleName() : string { return this.path + "_creator"; }
   private get surveyLocalesName(): string { return this.path + "_surveyLocales"; }
+  private get surveyShowInEnglishName(): string { return this.path + "_surveyShowInEnglish"; }
+  private getIsShowInEnglishSelected(model: SurveyModel): boolean { return model.getValue(this.surveyShowInEnglishName) === true; }
   private getCreatorLocales(): Array<ItemValue> {
     return this.getLocaleItemValues(editorLocalization.getLocales(), false);
   }
@@ -71,12 +97,21 @@ export class CreatorPresetEditableLanguages extends CreatorPresetEditableBase {
       if(!locale || locale === "en") return;
       const name = editorLocalization.getLocaleName(locale);
       if(!!name && name !== locale) {
-        res.push(new ItemValue(locale, name));
+        res.push(new ItemValue(locale));
       }
     });
     if(addEnLocale) {
       res.unshift(new ItemValue("en", editorLocalization.getLocaleName("en")));
     }
     return res;
   }
+  private updateLocaleNames(model: SurveyModel): void {
+    const isShowInEnglish = this.getIsShowInEnglishSelected(model);
+    const question = <QuestionCheckboxModel>model.getQuestionByName(this.surveyLocalesName);
+    question.choices.forEach(item => {
+      item.text = editorLocalization.getLocaleName(item.value, null, isShowInEnglish);
+    });
+    question.choicesOrder = "none";
+    question.choicesOrder = "asc";
+  }
 }

packages/creator-presets-core/tests/presets-editor.tests.ts

@@ -1,4 +1,4 @@
-import { ItemValue, QuestionCheckboxBase, QuestionCheckboxModel, QuestionDropdownModel, QuestionMatrixDynamicModel, QuestionRankingModel, Serializer, surveyLocalization } from "survey-core";
+import { ItemValue, QuestionBooleanModel, QuestionCheckboxBase, QuestionCheckboxModel, QuestionDropdownModel, QuestionMatrixDynamicModel, QuestionRankingModel, Serializer, surveyLocalization } from "survey-core";
 import { QuestionEmbeddedCreatorModel } from "../src/components/embedded-creator";
 import { CreatorPresetEditorModel } from "../src/presets-editor";
 export * from "../src/preset-question-ranking";
@@ -774,6 +774,7 @@ function addLocale(name: string): void {
   if(!surveyLocalization.locales[name]) {
     surveyLocalization.locales[name] = {};
     surveyLocalization["localeNames"][name] = name.toUpperCase();
+    surveyLocalization["localeNamesInEnglish"][name] = name.toUpperCase() + "-English";
   }
 }
 function addLocales(): void {
@@ -809,6 +810,24 @@ test("Preset edit model, Languages tab", () => {
   expect(editor.creator.locale).toBeFalsy();
   expect(surveyLocalization.supportedLocales).toStrictEqual([]);
 });
+test("Preset edit model, Languages tab - show in English", () => {
+  addLocales();
+  const editor = new CreatorPresetEditorModel();
+  const survey = editor.model;
+  const surveyLocalesQuestion = <QuestionCheckboxModel>survey.getQuestionByName("languages_surveyLocales");
+  const showInEnglishQuestion = <QuestionBooleanModel>survey.getQuestionByName("languages_surveyShowInEnglish");
+
+  expect(showInEnglishQuestion.value).toBe(false);
+  const item = ItemValue.getItemByValue(surveyLocalesQuestion.choices, "de");
+  expect(item.text).toBe("DE");
+  showInEnglishQuestion.value = true;
+  expect(item.text).toBe("DE-English");
+  expect(editor.applyFromSurveyModel()).toBeTruthy();
+  expect(editor.json.languages?.showNamesInEnglish).toBeTruthy();
+  expect(surveyLocalization.showNamesInEnglish).toBeTruthy();
+
+  surveyLocalization.showNamesInEnglish = false;
+});
 test("Preset edit model, toolbox categories, restore after creator locale changed", () => {
   addLocales();
   const editor = new CreatorPresetEditorModel();

packages/survey-creator-core/src/components/tabs/translation.ts

@@ -1109,8 +1109,8 @@ export class Translation extends Base implements ITranslationLocales {
   public get defaultLocale(): string {
     return surveyLocalization.defaultLocale;
   }
-  public getLocaleName(loc: string) {
-    return editorLocalization.getLocaleName(loc, this.defaultLocale);
+  public getLocaleName(loc: string, inEnglish?: boolean) {
+    return editorLocalization.getLocaleName(loc, this.defaultLocale, inEnglish);
   }
   public removeLocale(locale: string) {
     if (this.hasLocale(locale)) {

packages/survey-creator-core/src/editorLocalization.ts

@@ -86,17 +86,17 @@ export class EditorLocalization {
     }
     return obj;
   }
-  public getLocaleName(loc: string, defaultLocale: string = null): string {
-    let localeNames = surveyLocalization["localeNames"];
+  public getLocaleName(loc: string, defaultLocale: string = null, inEnglish?: boolean): string {
     if (!defaultLocale) {
       defaultLocale = surveyLocalization.defaultLocale;
     }
-    let res = !!loc
-      ? capitalize(localeNames[loc])
-      : editorLocalization
-        .getString("ed.defaultLocale")
-        ["format"](capitalize(localeNames[defaultLocale]));
-    return !!res ? res : loc;
+    let name = surveyLocalization.getLocaleName(loc || defaultLocale, inEnglish);
+    if(name === loc) return name;
+    name = capitalize(name);
+    if(!loc) {
+      name = editorLocalization.getString("ed.defaultLocale")["format"](name);
+    }
+    return name || loc;
   }
   public getPropertyName(strName: string, defaultName: string = null): string {
     var obj = this.getProperty(strName, defaultName);

packages/survey-creator-core/src/presets/presets-languages.ts

@@ -9,7 +9,9 @@ export class CreatorPresetLanguages extends CreatorPresetBase {
     super.applyCore(creator);
     const locale = this.json?.creator || "";
     const supportedLocales = this.json?.surveyLocales || [];
+    const showNamesInEnglish = this.json?.showNamesInEnglish;
     creator.locale = locale;
     surveyLocalization.supportedLocales = supportedLocales;
+    surveyLocalization.showNamesInEnglish = showNamesInEnglish === true;
   }
 }

packages/survey-creator-core/src/presets/presets.ts

@@ -12,6 +12,7 @@ export interface ICreatorPresetData {
   languages?: {
     creator?: string,
     surveyLocales?: Array<string>,
+    showNamesInEnglish?: boolean,
   };
   propertyGrid?: {
     definition?: ISurveyPropertyGridDefinition,

packages/survey-creator-core/tests/presets.tests.ts

@@ -259,15 +259,17 @@ test("apply creator locale", () => {
 test("apply supported locales", () => {
   expect(surveyLocalization.supportedLocales).toStrictEqual([]);
   const json: ICreatorPresetData = {
-    languages: { surveyLocales: ["de", "fr", "it"] }
+    languages: { surveyLocales: ["de", "fr", "it"], showNamesInEnglish: true }
   };
   const preset = new CreatorPreset(json);
   const creator = new CreatorTester();
 
   preset.apply(creator);
   expect(surveyLocalization.supportedLocales).toStrictEqual(["de", "fr", "it"]);
+  expect(surveyLocalization.showNamesInEnglish).toBeTruthy();
 
   preset.setJson({});
   preset.apply(creator);
   expect(surveyLocalization.supportedLocales).toStrictEqual([]);
+  expect(surveyLocalization.showNamesInEnglish).toBeFalsy();
 });

packages/survey-creator-core/tests/tabs/translation-v1.tests.ts

@@ -244,10 +244,12 @@ test("Default locale name", () => {
   const translation: Translation = new Translation(survey);
   expect(translation.getLocaleName("")).toEqual("Default (English)");
   surveyLocalization.defaultLocale = "de";
+  surveyLocalization.localeNamesInEnglish["de"] = "German";
   survey = new SurveyModel();
   survey.locale = "de";
   translation.survey = survey;
   expect(translation.getLocaleName("")).toEqual("Default (Deutsch)");
+  expect(translation.getLocaleName("", true)).toEqual("Default (German)");
   surveyLocalization.defaultLocale = "en";
 });