aloha-vue 1.2.138 → 1.2.139

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.138",
+  "version": "1.2.139",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/ATable/ATable.js

@@ -464,10 +464,18 @@ export default {
       closePreviewAll,
     });
 
+    const {
+      dataSorted,
+      initModelSort,
+      modelSortLocal,
+    } = SortAPI(props);
+
     const {
       columnsOrderedFromSimpleTable,
       renderedGroupedColumns,
-    } = ColumnsGroupedAPI(props);
+    } = ColumnsGroupedAPI(props, {
+      modelSort: modelSortLocal,
+    });
 
     const {
       columnIdsGroupByLocked,
@@ -483,12 +491,6 @@ export default {
       columnsOrderedFromSimpleTable,
     });
 
-    const {
-      dataSorted,
-      initModelSort,
-      modelSortLocal,
-    } = SortAPI(props);
-
     const {
       changeLimit,
       changeOffset,

package/src/ATable/ATableSortingAdditional/__tests__/ATableSortingAdditional.DropdownAPI.test.js

@@ -0,0 +1,40 @@
+import {
+  computed,
+} from "vue";
+
+import DropdownAPI from "../compositionAPI/DropdownAPI";
+
+describe("ATableSortingAdditional DropdownAPI", () => {
+  it("hides the dropdown when there are no columns available", () => {
+    const columnsAll = computed(() => {
+      return [];
+    });
+
+    const {
+      isDropdownVisible,
+    } = DropdownAPI({}, {
+      columnsAll,
+    });
+
+    expect(isDropdownVisible.value).toBe(false);
+  });
+
+  it("shows the dropdown when there are available columns", () => {
+    const columnsAll = computed(() => {
+      return [
+        { label: "Column 1", sortId: "1" },
+        { label: "Column 2", sortId: "2" },
+        { label: "Column 3", sortId: "3" },
+        { label: "Column 4", sortId: "4" },
+      ];
+    });
+
+    const {
+      isDropdownVisible,
+    } = DropdownAPI({}, {
+      columnsAll,
+    });
+
+    expect(isDropdownVisible.value).toBe(true);
+  });
+});

package/src/ATable/ATableSortingAdditional/__tests__/ATableSortingAdditional.FormAPI.test.js

@@ -0,0 +1,90 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+import FormAPI from "../compositionAPI/FormAPI";
+
+import {
+  keyBy,
+} from "lodash-es";
+
+describe("ATableSortingAdditional FormAPI", () => {
+  it("initDataForForm correctly initializes dataForForm", () => {
+    const unappliedModelSort = ref([{ sortId: "1", sortMode: "asc" }]);
+    const columnsAll = computed(() => {
+      return [
+        { label: "Column 1", sortId: "1" },
+      ];
+    });
+    const columnsAllKeyBySortId = computed(() => {
+      return {
+        1: { label: "Column 1", sortId: "1" },
+      };
+    });
+
+    const {
+      dataForForm,
+      initDataForForm,
+    } = FormAPI({}, {
+      columnsAll,
+      columnsAllKeyBySortId,
+      unappliedModelSort,
+    });
+
+    initDataForForm();
+
+    expect(dataForForm.value).toHaveLength(1);
+    expect(dataForForm.value[0].children).toHaveLength(2); // Check that there are two elements: for sortId and sortMode
+    expect(dataForForm.value[0].children[0].data[0].label).toBe("Column 1"); // Checking that the first data element contains the correct label
+  });
+
+  it("initializes dataForForm with correct fieldset and column data", () => {
+    const unappliedModelSort = ref([
+      { sortId: "1", sortMode: "asc" },
+      { sortId: "2", sortMode: "asc" },
+      { sortId: undefined, sortMode: "asc" },
+    ]);
+    const columnsAll = computed(() => {
+      return [
+        { label: "Column 1", sortId: "1" },
+        { label: "Column 2", sortId: "2" },
+        { label: "Column 3", sortId: "3" },
+        { label: "Column 4", sortId: "4" },
+      ];
+    });
+    const columnsAllKeyBySortId = computed(() => {
+      return keyBy(columnsAll.value, "sortId");
+    });
+
+    const {
+      dataForForm,
+      initDataForForm,
+    } = FormAPI({}, {
+      columnsAll,
+      columnsAllKeyBySortId,
+      unappliedModelSort,
+    });
+
+    initDataForForm();
+
+    expect(dataForForm.value).toHaveLength(3); // 3 fieldset
+    expect(dataForForm.value[0].label).toBe("_A_TABLE_SORT_ADDITIONAL_SORT_BY_");
+    expect(dataForForm.value[1].label).toBe("_A_TABLE_SORT_ADDITIONAL_THEN_BY_");
+    expect(dataForForm.value[2].label).toBe("_A_TABLE_SORT_ADDITIONAL_THEN_BY_");
+    expect(dataForForm.value[0].children[0].data).toStrictEqual([
+      { label: "Column 1", sortId: "1" },
+      { label: "Column 3", sortId: "3" },
+      { label: "Column 4", sortId: "4" }
+    ]);
+    expect(dataForForm.value[1].children[0].data).toStrictEqual([
+      { label: "Column 2", sortId: "2" },
+      { label: "Column 3", sortId: "3" },
+      { label: "Column 4", sortId: "4" }
+    ]);
+    expect(dataForForm.value[2].children[0].data).toStrictEqual([
+      { label: "Column 3", sortId: "3" },
+      { label: "Column 4", sortId: "4" }
+    ]);
+  });
+});

package/src/ATable/ATableSortingAdditional/__tests__/ATableSortingAdditional.ModelAPI.test.js

@@ -0,0 +1,145 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+import ModelAPI from "../compositionAPI/ModelAPI";
+
+describe("ATableSortingAdditional ModelAPI", () => {
+  it("initializes unapplied model sort correctly when no model is provided and opens dropdown", () => {
+    const countColumnsAll = computed(() => 3);
+    const unappliedModelSort = ref([]);
+    const {
+      initUnappliedModelSort,
+    } = ModelAPI({
+      modelSort: ref([]) }, {
+      countColumnsAll,
+      unappliedModelSort,
+    });
+
+    initUnappliedModelSort();
+
+    expect(unappliedModelSort.value).toHaveLength(1);
+    expect(unappliedModelSort.value[0].sortId).toBeUndefined();
+    expect(unappliedModelSort.value[0].sortMode).toBe("asc");
+  });
+
+  it("updates unapplied model sort by adding undefined if the model has defined sort values", () => {
+    const modelSortProvided = ref([
+      { sortId: "1", sortMode: "desc" },
+    ]);
+    const unappliedModelSort = ref([]);
+    const countColumnsAll = computed(() => 2);
+
+    const {
+      updateUnappliedModelSort
+    } = ModelAPI({ modelSort: modelSortProvided }, {
+      countColumnsAll,
+      unappliedModelSort,
+    });
+
+    updateUnappliedModelSort({ model: modelSortProvided.value });
+
+    expect(unappliedModelSort.value).toHaveLength(2);
+    expect(unappliedModelSort.value[0]).toEqual({ sortId: "1", sortMode: "desc" });
+    expect(unappliedModelSort.value[1]).toEqual({ sortId: undefined, sortMode: "asc" });
+  });
+
+  it("correctly removes elements from unappliedModelSort", () => {
+    const countColumnsAll = computed(() => 3);
+    const unappliedModelSort = ref([
+      { sortId: "1", sortMode: "desc" },
+      { sortId: "2", sortMode: "desc" },
+      { sortId: "3", sortMode: "asc" },
+    ]);
+    const {
+      removeUnappliedModelSort,
+    } = ModelAPI({
+      modelSort: ref([]) }, {
+      countColumnsAll,
+      unappliedModelSort,
+    });
+
+    removeUnappliedModelSort({
+      item: { additionalProps: { index: 2 } },
+    });
+
+    expect(unappliedModelSort.value).toHaveLength(3);
+    expect(unappliedModelSort.value[2].sortId).toBeUndefined();
+    expect(unappliedModelSort.value[2].sortMode).toBe("asc");
+
+    removeUnappliedModelSort({
+      item: { additionalProps: { index: 1 } },
+    });
+
+    expect(unappliedModelSort.value).toHaveLength(2);
+    expect(unappliedModelSort.value[1].sortId).toBeUndefined();
+    expect(unappliedModelSort.value[1].sortMode).toBe("asc");
+
+    removeUnappliedModelSort({
+      item: { additionalProps: { index: 0 } },
+    });
+
+    expect(unappliedModelSort.value).toHaveLength(1);
+    expect(unappliedModelSort.value[0].sortId).toBeUndefined();
+    expect(unappliedModelSort.value[0].sortMode).toBe("asc");
+  });
+
+  it("correctly change model", () => {
+    const countColumnsAll = computed(() => 3);
+    const unappliedModelSort = ref([
+      { sortId: undefined, sortMode: "asc" },
+    ]);
+    const {
+      updateUnappliedModelSort,
+    } = ModelAPI({
+      modelSort: ref([]) }, {
+      countColumnsAll,
+      unappliedModelSort,
+    });
+
+    let model = [
+      { sortId: "1", sortMode: "asc" },
+    ];
+    updateUnappliedModelSort({ model });
+
+    expect(unappliedModelSort.value).toHaveLength(2);
+    expect(unappliedModelSort.value).toStrictEqual([
+      { sortId: "1", sortMode: "asc" },
+      { sortId: undefined, sortMode: "asc" },
+    ]);
+
+    model[1].sortMode = "desc";
+    updateUnappliedModelSort({ model });
+
+    expect(unappliedModelSort.value).toHaveLength(2);
+    expect(unappliedModelSort.value).toStrictEqual([
+      { sortId: "1", sortMode: "asc" },
+      { sortId: undefined, sortMode: "desc" },
+    ]);
+
+    model[1].sortId = "2";
+    updateUnappliedModelSort({ model });
+
+    expect(unappliedModelSort.value).toHaveLength(3);
+    expect(unappliedModelSort.value).toStrictEqual([
+      { sortId: "1", sortMode: "asc" },
+      { sortId: "2", sortMode: "desc" },
+      { sortId: undefined, sortMode: "asc" },
+    ]);
+
+    model = [
+      { sortId: "1", sortMode: "asc" },
+      { sortId: "2", sortMode: "desc" },
+      { sortId: "3", sortMode: "asc" },
+    ];
+    updateUnappliedModelSort({ model });
+
+    expect(unappliedModelSort.value).toHaveLength(3);
+    expect(unappliedModelSort.value).toStrictEqual([
+      { sortId: "1", sortMode: "asc" },
+      { sortId: "2", sortMode: "desc" },
+      { sortId: "3", sortMode: "asc" },
+    ]);
+  });
+});

package/src/ATable/compositionAPI/ColumnsGroupedAPI.js

@@ -1,6 +1,7 @@
 import {
   computed,
   h,
+  ref,
   toRef,
 } from "vue";
 
@@ -18,9 +19,10 @@ import {
   uniqBy,
 } from "lodash-es";
 
-export default function ColumnsGroupedAPI(props) {
+export default function ColumnsGroupedAPI(props, {
+  modelSort = ref([]),
+}) {
   const columns = toRef(props, "columns");
-  const modelSort = toRef(props, "modelSort");
   const showFirstSortingSequenceNumber = toRef(props, "showFirstSortingSequenceNumber");
   const sortingSequenceNumberClass = toRef(props, "sortingSequenceNumberClass");