aloha-vue 2.64.0 → 2.65.0

package/src/ui/ASelect/__tests__/SelectedFirstAPI.test.js

@@ -0,0 +1,101 @@
+import {
+  computed,
+  reactive,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+} from "@jest/globals";
+
+import SelectedFirstAPI from "../compositionAPI/SelectedFirstAPI";
+
+import {
+  AKeyId,
+} from "../../../const/AKeys";
+
+const item = (id, label, extra = {}) => ({
+  [AKeyId]: id,
+  _a_label: label,
+  ...extra,
+});
+
+describe("ASelect SelectedFirstAPI", () => {
+  it("keeps source order and removes selected values from all source lists", () => {
+    const props = reactive({
+      modelValue: [3, 1, 3, "exclusive"],
+      showSelectedFirst: true,
+      type: "multiselect",
+    });
+    const data = computed(() => [
+      item(1, "One", { group: "A" }),
+      item(2, "Two", { group: "A" }),
+      item(3, "Three", { __invalidEntry__: true, group: "B" }),
+    ]);
+    const dataExtra = computed(() => [item(1, "Extra one"), item(4, "Four")]);
+    const exclusiveOption = computed(() => item("exclusive", "Exclusive"));
+
+    const result = SelectedFirstAPI(props, {
+      data,
+      dataExtra,
+      exclusiveOption,
+    });
+
+    expect(result.dataSelected.value.map(currentItem => currentItem[AKeyId]))
+      .toEqual(["exclusive", 1, 3]);
+    expect(result.dataSelected.value[2]).toEqual(expect.objectContaining({
+      __invalidEntry__: true,
+      group: "B",
+    }));
+    expect(result.dataWithoutSelected.value.map(currentItem => currentItem[AKeyId]))
+      .toEqual([2]);
+    expect(result.dataExtraWithoutSelected.value.map(currentItem => currentItem[AKeyId]))
+      .toEqual([4]);
+    expect(result.exclusiveOptionWithoutSelected.value).toBeUndefined();
+  });
+
+  it("reuses the sorted data order instead of the model order", () => {
+    const props = reactive({
+      modelValue: [1, 3],
+      showSelectedFirst: true,
+      type: "multiselect",
+    });
+    const data = computed(() => [item(3, "Three"), item(2, "Two"), item(1, "One")]);
+
+    const result = SelectedFirstAPI(props, { data });
+
+    expect(result.dataSelected.value.map(currentItem => currentItem[AKeyId]))
+      .toEqual([3, 1]);
+  });
+
+  it("supports false as a selected value in select mode", () => {
+    const props = reactive({
+      modelValue: false,
+      showSelectedFirst: true,
+      type: "select",
+    });
+    const data = computed(() => [item(false, "No"), item(true, "Yes")]);
+
+    const result = SelectedFirstAPI(props, { data });
+
+    expect(result.dataSelected.value.map(currentItem => currentItem[AKeyId]))
+      .toEqual([false]);
+    expect(result.dataWithoutSelected.value.map(currentItem => currentItem[AKeyId]))
+      .toEqual([true]);
+  });
+
+  it("does not change lists when the prop is disabled", () => {
+    const props = reactive({
+      modelValue: [1],
+      showSelectedFirst: false,
+      type: "multiselect",
+    });
+    const sourceData = [item(1, "One"), item(2, "Two")];
+    const data = computed(() => sourceData);
+
+    const result = SelectedFirstAPI(props, { data });
+
+    expect(result.dataSelected.value).toEqual([]);
+    expect(result.dataWithoutSelected.value).toBe(sourceData);
+  });
+});

package/src/ui/ASelect/__tests__/SelectedVisibleAPI.test.js

@@ -0,0 +1,98 @@
+import {
+  ref,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+} from "@jest/globals";
+
+import SelectedVisibleAPI from "../compositionAPI/SelectedVisibleAPI";
+
+import {
+  AKeyId,
+} from "../../../const/AKeys";
+
+const item = (id, label, extra = {}) => ({
+  [AKeyId]: id,
+  _a_label: label,
+  ...extra,
+});
+
+describe("ASelect SelectedVisibleAPI", () => {
+  it("filters selected values using matches from all data sources", () => {
+    const dataSelected = ref([
+      item(1, "Apple"),
+      item(2, "Banana"),
+      item(3, "Carrot"),
+    ]);
+
+    const {
+      dataSelectedVisible,
+    } = SelectedVisibleAPI({
+      dataSelected,
+      searching: ref(true),
+      searchingElements: ref({ 2: true }),
+      searchingElementsExtra: ref({ 3: true }),
+    });
+
+    expect(dataSelectedVisible.value.map(currentItem => currentItem[AKeyId]))
+      .toEqual([2, 3]);
+  });
+
+  it("includes selected values when their nested group matches", () => {
+    const dataSelected = ref([
+      item(1, "Apple", { category: "Food", group: "Fruit" }),
+      item(2, "Carrot", { category: "Food", group: "Vegetables" }),
+    ]);
+
+    const {
+      dataSelectedVisible,
+      searchingGroupsVisible,
+    } = SelectedVisibleAPI({
+      dataSelected,
+      keyGroupArray: ref(["category", "group"]),
+      searching: ref(true),
+      searchingGroupsWithSearchInGroup: ref({ Food_Fruit: true }),
+    });
+
+    expect(dataSelectedVisible.value.map(currentItem => currentItem[AKeyId]))
+      .toEqual([1]);
+    expect(searchingGroupsVisible.value).toEqual({
+      Food: true,
+      Food_Fruit: true,
+    });
+  });
+
+  it("does not expose a group matched only in another section", () => {
+    const dataSelected = ref([
+      item(2, "Banana", { group: "Fruit" }),
+    ]);
+
+    const {
+      dataSelectedVisible,
+      searchingGroupsVisible,
+    } = SelectedVisibleAPI({
+      dataSelected,
+      keyGroupArray: ref(["group"]),
+      searching: ref(true),
+      searchingElements: ref({ 1: true }),
+    });
+
+    expect(dataSelectedVisible.value).toEqual([]);
+    expect(searchingGroupsVisible.value).toEqual({});
+  });
+
+  it("returns all selected values when search is inactive", () => {
+    const dataSelected = ref([item(1, "Apple"), item(2, "Banana")]);
+
+    const {
+      dataSelectedVisible,
+    } = SelectedVisibleAPI({
+      dataSelected,
+      searching: ref(false),
+    });
+
+    expect(dataSelectedVisible.value).toBe(dataSelected.value);
+  });
+});

package/src/ui/ASelect/compositionAPI/SelectedFirstAPI.js

@@ -0,0 +1,78 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  AKeyId,
+} from "../../../const/AKeys";
+import {
+  isArray,
+  isNil,
+} from "lodash-es";
+
+export default function SelectedFirstAPI(props, {
+  data = computed(() => []),
+  dataExtra = computed(() => []),
+  exclusiveOption = computed(() => undefined),
+}) {
+  const modelValue = toRef(props, "modelValue");
+  const showSelectedFirst = toRef(props, "showSelectedFirst");
+  const type = toRef(props, "type");
+
+  const selectedValues = computed(() => {
+    if (!showSelectedFirst.value || isNil(modelValue.value)) {
+      return [];
+    }
+
+    if (type.value === "multiselect") {
+      return isArray(modelValue.value) ? [...new Set(modelValue.value)] : [];
+    }
+
+    return [modelValue.value];
+  });
+
+  const selectedValuesSet = computed(() => new Set(selectedValues.value));
+
+  const dataSelected = computed(() => {
+    const ADDED_VALUES = new Set();
+
+    return [exclusiveOption.value, ...dataExtra.value, ...data.value]
+      .filter(item => {
+        if (!item ||
+          !selectedValuesSet.value.has(item[AKeyId]) ||
+          ADDED_VALUES.has(item[AKeyId])) {
+          return false;
+        }
+
+        ADDED_VALUES.add(item[AKeyId]);
+        return true;
+      });
+  });
+
+  const filterSelected = currentData => {
+    if (!showSelectedFirst.value || !selectedValuesSet.value.size) {
+      return currentData;
+    }
+
+    return currentData.filter(item => !selectedValuesSet.value.has(item[AKeyId]));
+  };
+
+  const dataWithoutSelected = computed(() => filterSelected(data.value));
+  const dataExtraWithoutSelected = computed(() => filterSelected(dataExtra.value));
+  const exclusiveOptionWithoutSelected = computed(() => {
+    if (!exclusiveOption.value ||
+      !selectedValuesSet.value.has(exclusiveOption.value[AKeyId])) {
+      return exclusiveOption.value;
+    }
+
+    return undefined;
+  });
+
+  return {
+    dataExtraWithoutSelected,
+    dataSelected,
+    dataWithoutSelected,
+    exclusiveOptionWithoutSelected,
+  };
+}

package/src/ui/ASelect/compositionAPI/SelectedVisibleAPI.js

@@ -0,0 +1,76 @@
+import {
+  computed,
+} from "vue";
+
+import {
+  AKeyId,
+} from "../../../const/AKeys";
+import {
+  get,
+  isNil,
+} from "lodash-es";
+
+export default function SelectedVisibleAPI({
+  dataSelected = computed(() => []),
+  keyGroupArray = computed(() => []),
+  searching = computed(() => false),
+  searchingElements = computed(() => ({})),
+  searchingElementsExclusive = computed(() => ({})),
+  searchingElementsExtra = computed(() => ({})),
+  searchingGroupsWithSearchInGroup = computed(() => ({})),
+} = {}) {
+  const searchingElementsSelected = computed(() => ({
+    ...searchingElements.value,
+    ...searchingElementsExtra.value,
+    ...searchingElementsExclusive.value,
+  }));
+
+  const dataSelectedVisible = computed(() => {
+    if (!searching.value) {
+      return dataSelected.value;
+    }
+
+    return dataSelected.value.filter(item => {
+      if (searchingElementsSelected.value[item[AKeyId]]) {
+        return true;
+      }
+
+      let allGroupKeys = "";
+      return keyGroupArray.value.some(keyGroup => {
+        let group = get(item, keyGroup);
+        if (isNil(group) || group === "") {
+          group = "_not_grouped";
+        }
+        allGroupKeys += `${ allGroupKeys ? "_" : "" }${ group }`;
+        return searchingGroupsWithSearchInGroup.value[allGroupKeys];
+      });
+    });
+  });
+
+  const searchingGroupsVisible = computed(() => {
+    if (!searching.value) {
+      return {};
+    }
+
+    const GROUPS_VISIBLE = {};
+    dataSelectedVisible.value.forEach(item => {
+      let allGroupKeys = "";
+      keyGroupArray.value.forEach(keyGroup => {
+        let group = get(item, keyGroup);
+        if (isNil(group) || group === "") {
+          group = "_not_grouped";
+        }
+        allGroupKeys += `${ allGroupKeys ? "_" : "" }${ group }`;
+        GROUPS_VISIBLE[allGroupKeys] = true;
+      });
+    });
+
+    return GROUPS_VISIBLE;
+  });
+
+  return {
+    dataSelectedVisible,
+    searchingElementsSelected,
+    searchingGroupsVisible,
+  };
+}