aloha-vue 2.58.0 → 2.60.0

package/src/ui/compositionApi/UIDataGroupAPI.js

@@ -1,34 +1,41 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  aOrderBy,
-  extractTextFromHtml,
-} from "../../utils/utils";
-
-import {
-  AKeyId,
-} from "../../const/AKeys";
-import {
-  cloneDeep,
-  forEach,
-  get,
-  isArray,
-  isFunction,
-  isNil,
-  isString,
-  values,
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  aOrderBy,
+  extractTextFromHtml,
+} from "../../utils/utils";
+
+import {
+  getTranslatedText,
+  isPlaceholderTranslate,
+} from "../../ATranslation/compositionAPI/UtilsAPI";
+
+import {
+  AKeyId,
+} from "../../const/AKeys";
+import {
+  cloneDeep,
+  forEach,
+  get,
+  isArray,
+  isFunction,
+  isNil,
+  isString,
+  values,
 } from "lodash-es";
 
-export default function UIDataGroupAPI(props, {
-  data = computed(() => []),
-}) {
-  const keyGroup = toRef(props, "keyGroup");
-  const keyGroupLabelCallback = toRef(props, "keyGroupLabelCallback");
-  const searchTextInHtml = toRef(props, "searchTextInHtml");
-  const sortOrderGroup = toRef(props, "sortOrderGroup");
+export default function UIDataGroupAPI(props, {
+  data = computed(() => []),
+}) {
+  const alwaysTranslate = toRef(props, "alwaysTranslate");
+  const keyGroup = toRef(props, "keyGroup");
+  const keyGroupLabelCallback = toRef(props, "keyGroupLabelCallback");
+  const searchTextInHtml = toRef(props, "searchTextInHtml");
+  const sortOrderGroup = toRef(props, "sortOrderGroup");
+  const translateGroup = toRef(props, "translateGroup");
 
   const keyGroupArray = computed(() => {
     if (isArray(keyGroup.value)) {
@@ -65,21 +72,27 @@ export default function UIDataGroupAPI(props, {
         }
         allGroupKeys += `${ allGroupKeys ? "_" : "" }${ group }`;
         if (!GROUPS_FOR_LEVER[leverIndex][allGroupKeys]) {
-          const GROUP_LABEL = isFunction(keyGroupLabelCallback.value) ?
-            keyGroupLabelCallback.value({ group: group, item }) :
-            group;
-          GROUPS_FOR_LEVER[leverIndex][allGroupKeys] = {
-            groupKey: group,
-            groupLabel: GROUP_LABEL,
+          let groupLabel = isFunction(keyGroupLabelCallback.value) ?
+            keyGroupLabelCallback.value({ group: group, item }) :
+            group;
+          if (translateGroup.value && isPlaceholderTranslate(groupLabel)) {
+            groupLabel = getTranslatedText({
+              placeholder: groupLabel,
+              alwaysTranslate: alwaysTranslate.value,
+            });
+          }
+          GROUPS_FOR_LEVER[leverIndex][allGroupKeys] = {
+            groupKey: group,
+            groupLabel,
             groupParentKey: groupParentKey,
             allGroupKeys: allGroupKeys,
             allParentKeys: cloneDeep(allParentKeys),
             data: [],
             dataKeyByKeyId: {},
-          };
-          if (searchTextInHtml.value) {
-            GROUPS_FOR_LEVER[leverIndex][allGroupKeys].groupLabelSearch = extractTextFromHtml(GROUP_LABEL);
-          }
+          };
+          if (searchTextInHtml.value) {
+            GROUPS_FOR_LEVER[leverIndex][allGroupKeys].groupLabelSearch = extractTextFromHtml(groupLabel);
+          }
         }
         GROUPS_FOR_LEVER[leverIndex][allGroupKeys].data.push(item);
         GROUPS_FOR_LEVER[leverIndex][allGroupKeys].dataKeyByKeyId[item[AKeyId]] = item;

package/src/ui/compositionApi/__tests__/UIDataGroupAPI.test.js

@@ -0,0 +1,106 @@
+import {
+  computed,
+  nextTick,
+} from "vue";
+import {
+  beforeAll,
+  describe,
+  expect,
+  it,
+} from "@jest/globals";
+
+import UIDataGroupAPI from "../UIDataGroupAPI";
+import {
+  setI18n,
+  setLanguage,
+} from "../../../ATranslation/compositionAPI/ATranslationAPI";
+
+import {
+  AKeyId,
+} from "../../../const/AKeys";
+
+describe("UIDataGroupAPI", () => {
+  beforeAll(async() => {
+    setI18n({
+      uiDataGroupApiTest: {
+        _GROUP_: "Translated group",
+        _GROUP_FROM_CALLBACK_: "Translated callback group",
+      },
+    });
+    setLanguage("uiDataGroupApiTest");
+    await nextTick();
+  });
+
+  it("translates a group label without changing its key", () => {
+    const props = {
+      alwaysTranslate: true,
+      keyGroup: "group",
+      keyGroupLabelCallback: undefined,
+      searchTextInHtml: false,
+      sortOrderGroup: undefined,
+      translateGroup: true,
+    };
+    const data = computed(() => [{
+      [AKeyId]: "item_1",
+      group: "_GROUP_",
+    }]);
+
+    const {
+      groupsForLever,
+    } = UIDataGroupAPI(props, {
+      data,
+    });
+
+    expect(groupsForLever.value[0][0]).toEqual(expect.objectContaining({
+      allGroupKeys: "_GROUP_",
+      groupKey: "_GROUP_",
+      groupLabel: "Translated group",
+    }));
+  });
+
+  it("does not translate a group label when translateGroup is false", () => {
+    const props = {
+      alwaysTranslate: true,
+      keyGroup: "group",
+      keyGroupLabelCallback: undefined,
+      searchTextInHtml: false,
+      sortOrderGroup: undefined,
+      translateGroup: false,
+    };
+    const data = computed(() => [{
+      [AKeyId]: "item_1",
+      group: "_GROUP_",
+    }]);
+
+    const {
+      groupsForLever,
+    } = UIDataGroupAPI(props, {
+      data,
+    });
+
+    expect(groupsForLever.value[0][0].groupLabel).toBe("_GROUP_");
+  });
+
+  it("translates a group label returned by keyGroupLabelCallback", () => {
+    const props = {
+      alwaysTranslate: true,
+      keyGroup: "group",
+      keyGroupLabelCallback: () => "_GROUP_FROM_CALLBACK_",
+      searchTextInHtml: false,
+      sortOrderGroup: undefined,
+      translateGroup: true,
+    };
+    const data = computed(() => [{
+      [AKeyId]: "item_1",
+      group: "group_1",
+    }]);
+
+    const {
+      groupsForLever,
+    } = UIDataGroupAPI(props, {
+      data,
+    });
+
+    expect(groupsForLever.value[0][0].groupLabel).toBe("Translated callback group");
+  });
+});