aloha-vue 2.60.0 → 2.61.0

package/src/ATableForm/ATableFormRow/compositionAPI/EditAPI.js

@@ -1,98 +1,102 @@
-import {
-  ref,
-  toRef,
-} from "vue";
-
-import {
-  cloneDeep,
-  set,
-  unset,
-} from "lodash-es";
-
-export default function EditAPI(props, {
-  errorsLocal = ref(undefined),
-}) {
-  const changeModel = toRef(props, "changeModel");
-  const onCancelEditRow = toRef(props, "onCancelEditRow");
-  const row = toRef(props, "row");
-  const rows = toRef(props, "rows");
-  const rowIndex = toRef(props, "rowIndex");
-  const saveRow = toRef(props, "saveRow");
-
-  const isSaving = ref(false);
-  const modelLocal = ref(undefined);
-
-  const updateModelLocal = ({
-    column,
-    columnId,
-    item,
-    model,
-  }) => {
-    if (!modelLocal.value) {
-      modelLocal.value = cloneDeep(row.value) || {};
-    }
-    let changedModel;
-
-    if (changeModel.value) {
-      changedModel = changeModel.value({
-        modelAll: modelLocal.value,
-        row: row.value,
-        column,
-        model: model,
-        item,
-      });
-    }
-    if (changedModel?.model) {
-      modelLocal.value = cloneDeep(changedModel.model);
-    } else {
-      set(modelLocal.value, columnId, model);
-    }
-    unset(errorsLocal.value, columnId);
-  };
-
-  const cancelEditRow = ({ trigger, id } = {}) => {
-    onCancelEditRow.value({
-      row: row.value,
-      rowIndex: rowIndex.value,
-      trigger,
-      id,
-    });
-  };
-
-  const saveEditRow = async({ id } = {}) => {
-    if (isSaving.value) {
-      return;
-    }
-
-    errorsLocal.value = {};
-    isSaving.value = true;
-
-    try {
-      const result = await saveRow.value({
-        model: cloneDeep(modelLocal.value),
-        row: row.value,
-        rowIndex: rowIndex.value,
-        rows: rows.value,
-      });
-
-      if (result?.errors) {
-        errorsLocal.value = cloneDeep(result.errors);
-        return;
-      }
-
-      cancelEditRow({ trigger: "save", id });
-    } catch (error) {
-      errorsLocal.value = error;
-    } finally {
-      isSaving.value = false;
-    }
-  };
-
-  return {
-    cancelEditRow,
-    isSaving,
-    modelLocal,
-    saveEditRow,
-    updateModelLocal,
-  };
-}
+import {
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  cloneDeep,
+  set,
+  unset,
+} from "lodash-es";
+
+export default function EditAPI(props, {
+  errorsLocal = ref(undefined),
+}) {
+  const changeModel = toRef(props, "changeModel");
+  const onCancelEditRow = toRef(props, "onCancelEditRow");
+  const row = toRef(props, "row");
+  const rows = toRef(props, "rows");
+  const rowIndex = toRef(props, "rowIndex");
+  const saveRow = toRef(props, "saveRow");
+
+  const isSaving = ref(false);
+  const modelLocal = ref(undefined);
+
+  const updateModelLocal = ({
+    column,
+    columnId,
+    fullModel,
+    item,
+    model,
+  }) => {
+    if (!modelLocal.value) {
+      modelLocal.value = cloneDeep(row.value) || {};
+    }
+    let changedModel;
+
+    if (changeModel.value) {
+      changedModel = changeModel.value({
+        modelAll: modelLocal.value,
+        row: row.value,
+        column,
+        fullModel,
+        model: model,
+        item,
+      });
+    }
+    if (changedModel?.model) {
+      modelLocal.value = cloneDeep(changedModel.model);
+    } else if (fullModel !== undefined) {
+      modelLocal.value = cloneDeep(fullModel);
+    } else {
+      set(modelLocal.value, columnId, model);
+    }
+    unset(errorsLocal.value, columnId);
+  };
+
+  const cancelEditRow = ({ trigger, id } = {}) => {
+    onCancelEditRow.value({
+      row: row.value,
+      rowIndex: rowIndex.value,
+      trigger,
+      id,
+    });
+  };
+
+  const saveEditRow = async({ id } = {}) => {
+    if (isSaving.value) {
+      return;
+    }
+
+    errorsLocal.value = {};
+    isSaving.value = true;
+
+    try {
+      const result = await saveRow.value({
+        model: cloneDeep(modelLocal.value),
+        row: row.value,
+        rowIndex: rowIndex.value,
+        rows: rows.value,
+      });
+
+      if (result?.errors) {
+        errorsLocal.value = cloneDeep(result.errors);
+        return;
+      }
+
+      cancelEditRow({ trigger: "save", id });
+    } catch (error) {
+      errorsLocal.value = error;
+    } finally {
+      isSaving.value = false;
+    }
+  };
+
+  return {
+    cancelEditRow,
+    isSaving,
+    modelLocal,
+    saveEditRow,
+    updateModelLocal,
+  };
+}

package/src/ATableForm/__tests__/ATableForm.DragAndDropAPI.test.js

@@ -62,7 +62,9 @@ describe("ATableForm DragAndDropAPI", () => {
   it("prevents dragging, dropping on, and moving across a disabled row", () => {
     const emit = jest.fn();
     const props = reactive({
-      dndDisabledCallback: ({ row }) => row.dndDisabled,
+      actionsDisabledCallback: {
+        dnd: ({ row }) => row.dndDisabled,
+      },
       focusAfterMove: false,
       id: "table",
       isDragAndDrop: true,

package/src/ATableForm/__tests__/ATableForm.ListView.test.js

@@ -0,0 +1,255 @@
+import {
+  reactive,
+  ref,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
+import {
+  mount,
+} from "@vue/test-utils";
+
+import AForm from "../../ui/AForm/AForm";
+import ATableFormCellList from "../ATableFormCellList/ATableFormCellList";
+
+import ColumnsAPI from "../compositionAPI/ColumnsAPI";
+import DataAPI from "../ATableFormCellList/compositionAPI/DataAPI";
+import RowEditAPI from "../ATableFormRow/compositionAPI/EditAPI";
+import TableEditAPI from "../compositionAPI/EditAPI";
+
+jest.mock("../../ui/AForm/AForm", () => {
+  const {
+    h,
+  } = require("vue");
+
+  return {
+    __esModule: true,
+    default: {
+      name: "AForm",
+      props: {
+        data: Array,
+        errors: Object,
+        idPrefix: String,
+        modelValue: Object,
+        readonly: Boolean,
+        showErrors: Boolean,
+        showRequiredText: Boolean,
+        tag: String,
+        useFlatErrors: Boolean,
+        useFlatModel: Boolean,
+      },
+      emits: [
+        "change",
+      ],
+      render() {
+        return h("div");
+      },
+    },
+  };
+});
+
+describe("ATableForm list view", () => {
+  it("uses one content column and finds required fields recursively", () => {
+    const props = reactive({
+      columns: [
+        {
+          id: "fieldset",
+          formElement: {
+            children: [
+              {
+                id: "requiredChild",
+                required: true,
+                type: "text",
+              },
+            ],
+            type: "fieldset",
+          },
+        },
+        {
+          id: "secondColumn",
+          formElement: {
+            type: "text",
+          },
+        },
+      ],
+      isAddable: false,
+      isDeletable: true,
+      isDeletableConfirm: false,
+      isDragAndDrop: true,
+      isEditable: true,
+      rowView: "list",
+      rows: [],
+    });
+    const {
+      allColumnsLength,
+      columnsVisible,
+      hasActionsColumn,
+    } = ColumnsAPI(props);
+    const {
+      hasRequiredEditableColumns,
+    } = TableEditAPI(props, {
+      columnsVisible,
+      getRowKey: jest.fn(),
+    });
+
+    expect(allColumnsLength.value).toBe(3);
+    expect(hasRequiredEditableColumns.value).toBe(true);
+
+    props.rowView = "table";
+    expect(allColumnsLength.value).toBe(4);
+    expect(hasActionsColumn.value).toBe(true);
+  });
+
+  it("converts columns and nested fieldsets to AForm data", () => {
+    const props = reactive({
+      columns: [
+        {
+          id: "limits",
+          label: "Limits",
+          formElement: {
+            type: "fieldset",
+            children: [
+              {
+                id: "negative",
+                label: "Negative",
+                type: "integer",
+                useRowReadonly: true,
+              },
+            ],
+          },
+        },
+      ],
+      isEditable: true,
+      isEditMode: false,
+    });
+    const {
+      dataForm,
+    } = DataAPI(props);
+
+    expect(dataForm.value).toEqual([
+      {
+        children: [
+          {
+            id: "negative",
+            label: "Negative",
+            readonly: true,
+            type: "integer",
+            useRowReadonly: true,
+          },
+        ],
+        disabled: true,
+        id: "limits",
+        label: "Limits",
+        type: "fieldset",
+      },
+    ]);
+
+    props.isEditMode = true;
+
+    expect(dataForm.value[0].disabled).toBeUndefined();
+    expect(dataForm.value[0].children[0].readonly).toBe(false);
+  });
+
+  it("passes the complete errors object to AForm and emits its full model", async() => {
+    const errors = {
+      negative: ["Value is too low"],
+    };
+    const wrapper = mount(ATableFormCellList, {
+      props: {
+        columns: [
+          {
+            id: "limits",
+            formElement: {
+              type: "fieldset",
+              children: [
+                {
+                  id: "negative",
+                  type: "integer",
+                },
+              ],
+            },
+          },
+        ],
+        errors,
+        id: "table_0",
+        isEditable: true,
+        isEditMode: true,
+        row: {
+          negative: 10,
+        },
+        rowIndex: 0,
+        rows: [],
+      },
+    });
+    const form = wrapper.findComponent(AForm);
+
+    expect(form.props("errors")).toEqual(errors);
+    expect(form.props("showErrors")).toBe(true);
+    expect(form.props("showRequiredText")).toBe(false);
+    expect(form.props("useFlatErrors")).toBe(true);
+
+    form.vm.$emit("change", {
+      fullModel: {
+        negative: 20,
+      },
+      id: "negative",
+      item: {
+        id: "negative",
+      },
+      model: 20,
+    });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("updateRowData")[0][0]).toEqual(expect.objectContaining({
+      column: wrapper.props("columns")[0],
+      columnId: "negative",
+      fullModel: {
+        negative: 20,
+      },
+      model: 20,
+    }));
+  });
+
+  it("replaces the complete edit model and clears the changed field error", () => {
+    const errorsLocal = ref({
+      negative: ["Value is too low"],
+      positive: ["Value is too high"],
+    });
+    const {
+      modelLocal,
+      updateModelLocal,
+    } = RowEditAPI(reactive({
+      changeModel: undefined,
+      onCancelEditRow: jest.fn(),
+      row: {
+        negative: 10,
+        positive: 10,
+      },
+      rowIndex: 0,
+      rows: [],
+      saveRow: jest.fn(),
+    }), {
+      errorsLocal,
+    });
+
+    updateModelLocal({
+      columnId: "negative",
+      fullModel: {
+        negative: 20,
+        positive: 10,
+      },
+      model: 20,
+    });
+
+    expect(modelLocal.value).toEqual({
+      negative: 20,
+      positive: 10,
+    });
+    expect(errorsLocal.value).toEqual({
+      positive: ["Value is too high"],
+    });
+  });
+});

package/src/ATableForm/compositionAPI/ColumnsAPI.js

@@ -1,39 +1,40 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-
-export default function ColumnsAPI(props) {
-  const columns = toRef(props, "columns");
-  const isDeletable = toRef(props, "isDeletable");
-  const isDeletableConfirm = toRef(props, "isDeletableConfirm");
-  const isDragAndDrop = toRef(props, "isDragAndDrop");
-  const isEditable = toRef(props, "isEditable");
-
-  const hasActionsColumn = computed(() => {
-    return !!(isEditable.value || isDeletable.value || isDeletableConfirm.value);
-  });
-
-  const columnsVisible = computed(() => {
-    return columns.value.filter(column => column.isRender !== false);
-  });
-
-  const allColumnsLength = computed(() => {
-    let length = columnsVisible.value.length;
-    if (isDragAndDrop.value) {
-      length += 1;
-    }
-    if (hasActionsColumn.value) {
-      length += 1;
-    }
-
-    return length;
-  });
-
-  return {
-    allColumnsLength,
-    columnsVisible,
-    hasActionsColumn,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+
+export default function ColumnsAPI(props) {
+  const columns = toRef(props, "columns");
+  const isDeletable = toRef(props, "isDeletable");
+  const isDeletableConfirm = toRef(props, "isDeletableConfirm");
+  const isDragAndDrop = toRef(props, "isDragAndDrop");
+  const isEditable = toRef(props, "isEditable");
+  const rowView = toRef(props, "rowView");
+
+  const hasActionsColumn = computed(() => {
+    return !!(isEditable.value || isDeletable.value || isDeletableConfirm.value);
+  });
+
+  const columnsVisible = computed(() => {
+    return columns.value.filter(column => column.isRender !== false);
+  });
+
+  const allColumnsLength = computed(() => {
+    let length = rowView.value === "list" ? 1 : columnsVisible.value.length;
+    if (isDragAndDrop.value) {
+      length += 1;
+    }
+    if (hasActionsColumn.value) {
+      length += 1;
+    }
+
+    return length;
+  });
+
+  return {
+    allColumnsLength,
+    columnsVisible,
+    hasActionsColumn,
+  };
+}

package/src/ATableForm/compositionAPI/DragAndDropAPI.js

@@ -9,13 +9,14 @@ import {
   setFocusToElement,
 } from "../../utils/utilsDOM";
 import {
+  get,
   isFunction,
 } from "lodash-es";
 
 export default function DragAndDropAPI(props, { emit }, {
   isDndDisabled = computed(() => false),
 } = {}) {
-  const dndDisabledCallback = toRef(props, "dndDisabledCallback");
+  const actionsDisabledCallback = toRef(props, "actionsDisabledCallback");
   const focusAfterMove = toRef(props, "focusAfterMove");
   const id = toRef(props, "id");
   const isDragAndDrop = toRef(props, "isDragAndDrop");
@@ -31,8 +32,10 @@ export default function DragAndDropAPI(props, { emit }, {
       return true;
     }
 
-    if (isFunction(dndDisabledCallback.value)) {
-      return !!dndDisabledCallback.value({
+    const dndCallback = get(actionsDisabledCallback.value, "dnd");
+
+    if (isFunction(dndCallback)) {
+      return !!dndCallback({
         row: rows.value[rowIndex],
         rowIndex,
       });