tailwind-table-dom 1.3.11 → 3.12.1

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/CreateFooterRow/insertCells.js

@@ -0,0 +1,35 @@
+import { createFooterCell } from "./createFooterCell.js";
+
+const startFunc = ({ keys, tr, options = {}, inDefaultRow, inTdClass,
+    inShowDataList }) => {
+
+    const defaultRow = inDefaultRow;
+    // console.log("keys : ", keys);
+
+    // debugger;
+    keys.forEach(key => {
+        const defaultValue = defaultRow[key];
+
+        const createdFooterCell = createFooterCell({
+            key,
+            inDefaultValue: defaultValue,
+            onChangeFunc: options.onChangeFunc,
+            showDataList: inShowDataList,
+            inColumnsConfig: options.inColumnsConfig,
+            inTdClass
+        });
+        // debugger;
+        tr.appendChild(createdFooterCell);
+
+        // tr.appendChild(createFooterCell({
+        //     key,
+        //     inDefaultValue: defaultValue,
+        //     onChangeFunc: options.onChangeFunc,
+        //     showDataList: options.showDataList,
+        //     inColumnsConfig: options.inColumnsConfig,
+        //     inTdClass
+        // }));
+    });
+};
+
+export { startFunc };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/CreateFooterRow/start.js

@@ -0,0 +1,27 @@
+import { startFunc as insertRowCells } from "./insertCells.js";
+import { appendFooterSaveCell } from "./appendFooterSaveCell.js";
+
+const startFunc = ({ keys, options, inDefaultRow, inTdClass,
+    inSerialClass, inShowSerial, inShowDataList, inShowSave = false,
+    inOnSaveFunc
+}) => {
+    // debugger;
+    const tr = document.createElement("tr");
+
+    if (inShowSerial) tr.appendChild(getSerialColumn({ inSerialClass }));
+
+    insertRowCells({ keys, tr, options, inDefaultRow, inTdClass, inShowDataList });
+
+    if (inShowSave) tr.appendChild(appendFooterSaveCell({ inOnSaveFunc }));
+
+    return tr;
+};
+
+const getSerialColumn = ({ inSerialClass }) => {
+    const thIndex = document.createElement("td");
+    thIndex.className = inSerialClass;
+
+    return thIndex
+};
+
+export { startFunc };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/CreateHandleOnChange/start.js

@@ -0,0 +1,52 @@
+import { startFunc as updateToSaveRow } from "../UpdateToSaveRow/start.js";
+
+const startFunc = ({
+    inDataStore,
+    inColumnsConfig,
+    inToSaveRow
+}) => {
+    const localFunction = (inEvent) => {
+        debugger;
+        console.log("inEvent : ", inEvent);
+        const localCurrentTarget = inEvent.currentTarget;
+        const inputName = localCurrentTarget.name;
+        // debugger;
+        const localCurrentValue = localCurrentTarget.value;
+
+        const localFindRow = findRow({
+            dataStoreName: inputName,
+            inDataListSource: localCurrentTarget.dataset.dataListSource,
+            inValueToFind: localCurrentValue,
+            inDataStore
+        });
+        // console.log("11111111 : ", localFindRow);
+        if (localFindRow === undefined) return;
+        console.log("------- : ", inToSaveRow);
+
+        updateToSaveRow({
+            inColumnsConfig,
+            inFindRow: localFindRow,
+            inToSaveRow
+        });
+        console.log("11111111 : ", inToSaveRow);
+    };
+
+    return localFunction;
+};
+
+const findRow = ({ dataStoreName, inDataListSource, inValueToFind, inDataStore }) => {
+    const localDataListItems =
+        inDataStore.getDataList(dataStoreName);
+
+    const localDataListSource = inDataListSource;
+
+    const localToFindColumn = localDataListSource.split(".")[1];
+
+    const localFindRow = localDataListItems.find((element) => {
+        return element[localToFindColumn] === inValueToFind;
+    });
+
+    return localFindRow;
+};
+
+export { startFunc };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/CreateHandleSave/start.js

@@ -0,0 +1,13 @@
+import { saveFooterRow } from "../saveFooterRow.js";
+
+const startFunc = async ({ inServices, inEndPoints, inPayload, inDataStore, inTableBody,
+    inVisibleColumnsConfig, inShowSerial, inShowActions
+}) => {
+
+    await saveFooterRow({
+        inServices, inEndPoints, inPayload, inDataStore, inTableBody,
+        inVisibleColumnsConfig, inShowSerial, inShowActions
+    });
+};
+
+export { startFunc };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/DomManipulation/appendFooter.js

@@ -0,0 +1,8 @@
+const appendFooter = ({ inDom, inContainerEl, inTr }) => {
+    const localTableFooter =
+        inDom.getTableFooter(inContainerEl);
+
+    localTableFooter.appendChild(inTr);
+};
+
+export { appendFooter };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/DomManipulation/clearErrors.js

@@ -0,0 +1,7 @@
+const clearErrors = (tr) => {
+    tr.querySelectorAll(".ks-error").forEach(el => el.remove());
+    tr.querySelectorAll(".border-red-500")
+        .forEach(el => el.classList.remove("border-red-500"));
+};
+
+export { clearErrors };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/DomManipulation/clearFooterInputs.js

@@ -0,0 +1,28 @@
+const clearFooterInputs1 = (tr) => {
+    tr.querySelectorAll("input, select, textarea").forEach(el => {
+        if (el.tagName === "SELECT") {
+            el.selectedIndex = 0;
+        } else {
+            if ("defaultValue" in el.dataset) {
+                el.value = el.dataset.defaultValue;
+            } else {
+                el.value = "";
+            };
+        };
+    });
+};
+
+const clearFooterInputs = (tr) => {
+    tr.querySelectorAll("input, select, textarea").forEach((el) => {
+        if (el.tagName === "SELECT") {
+            el.selectedIndex = 0;
+            return;
+        };
+
+        el.value = ("defaultValue" in el.dataset)
+            ? el.dataset.defaultValue
+            : "";
+    });
+};
+
+export { clearFooterInputs };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/DomManipulation/showErrors.js

@@ -0,0 +1,32 @@
+// DomManipulation/showErrors.js
+
+import { clearErrors } from "./clearErrors.js";
+
+const showErrors = (tr, errors) => {
+    clearErrors(tr);
+
+    let firstInput = null;
+
+    errors.forEach(({ field, message }, index) => {
+        const input = tr.querySelector(`[name="${field}"]`);
+        if (!input) return;
+
+        if (!firstInput) firstInput = input; // capture first
+
+        input.classList.add("border-red-500");
+
+        const errEl = document.createElement("div");
+        errEl.className = "text-red-500 text-xs mt-1 ks-error";
+        errEl.textContent = message;
+
+        input.parentElement.appendChild(errEl);
+    });
+
+    // 👉 focus + optional select
+    if (firstInput) {
+        firstInput.focus();
+        firstInput.select?.();
+    }
+};
+
+export { showErrors };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/UpdateToSaveRow/start.js

@@ -0,0 +1,26 @@
+const startFunc_old = ({ inColumnsConfig, inFindRow, inToSaveRow }) => {
+    const localDataListColumns = inColumnsConfig.filter((element) => {
+        return "dataListColumn" in element;
+    });
+
+    for (const [key, value] of Object.entries(inFindRow)) {
+        const localFindDataListItem = localDataListColumns.find((element) => {
+            return element.dataListColumn === key;
+        });
+
+        if (localFindDataListItem === undefined) continue;
+
+        inToSaveRow[localFindDataListItem.columnName] = value;
+    };
+};
+
+const startFunc = ({ inColumnsConfig, inFindRow, inToSaveRow }) => {
+    // debugger;
+    for (const [key, value] of Object.entries(inToSaveRow)) {
+        if (key in inFindRow) {
+            inToSaveRow[key] = inFindRow[key];
+        };
+    };
+};
+
+export { startFunc };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/Utils/validateRow copy.js

@@ -0,0 +1,18 @@
+// Utils/validateRow.js
+
+const validateRow = (payload) => {
+    const errors = [];
+
+    Object.entries(payload).forEach(([key, value]) => {
+        if (value === null || value === undefined || String(value).trim() === "") {
+            errors.push({
+                field: key,
+                message: `${key} is required`
+            });
+        }
+    });
+
+    return errors;
+};
+
+export { validateRow };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/Utils/validateRow.js

@@ -0,0 +1,13 @@
+// Utils/validateRow.js
+
+const validateRow = ({ payload, inColumnsConfig }) => {
+    return inColumnsConfig
+        .filter(col => col.isRequired) // ✅ dynamic
+        .filter(col => !payload[col.columnName] || String(payload[col.columnName]).trim() === "")
+        .map(col => ({
+            field: col.columnName,
+            message: `${col.columnName} is required`
+        }));
+};
+
+export { validateRow };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/afterMutation.js

@@ -0,0 +1,32 @@
+import { refreshTable } from "../../refresh.js";
+
+const afterMutation = async ({
+    inServices,
+    inEndPoints,
+    inDataStore,
+    inContainerEl,
+    inDom,
+    focusFn,
+    inOptions,
+    inVisibleColumns
+}) => {
+
+    // 1. get fresh data
+    const freshData = await inServices.actions.getData({
+        inEndPoint: inEndPoints.read
+    });
+    
+    // 2. update store
+    inDataStore.setData(freshData);
+
+    // 3. refresh UI (only body)
+    refreshTable({
+        inContainerEl, inDataStore, inDom, inOptions,
+        inVisibleColumns
+    });
+
+    // 4. restore focus (optional)
+    if (focusFn) focusFn({ inContainerEl });
+};
+
+export { afterMutation };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/getFooterPayload.js

@@ -0,0 +1,14 @@
+const getFooterPayload = ({ tr, inDom, inVisibleColumns, inToSaveRow }) => {
+    const keys = inVisibleColumns;
+    const payload = {
+        ...inToSaveRow
+    };
+
+    keys.forEach((key) => {
+        payload[key] = inDom.getInputValueFromRow(tr, key);
+    });
+
+    return payload;
+};
+
+export { getFooterPayload };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/saveFooterRow.js

@@ -0,0 +1,71 @@
+import { validateRow } from "./Utils/validateRow.js";
+// import { afterMutation } from "../../../../afterMutation.js";
+import { getFooterPayload } from "./getFooterPayload.js";
+import { showErrors } from "./DomManipulation/showErrors.js";
+import { clearErrors } from "./DomManipulation/clearErrors.js";
+import { clearFooterInputs } from "./DomManipulation/clearFooterInputs.js";
+
+import { buildBody } from "../../../BuildBodyVersions/V4/start.js";
+// import afterMutation from "./AfterMutation/V1/index.js";
+import afterMutation from "../../../AfterMutation/V3/index.js";
+
+const saveFooterRow = async ({
+    inDataStore,
+    inDom,
+    inServices,
+    inEndPoints,
+    inContainerEl,
+    inOptions,
+    inColumnsConfig,
+    inVisibleColumnsConfig,
+    inShowActions,
+    inShowSerial,
+    inShowTable,
+    inToSaveRow,
+    tableOptions,
+    inPayload,
+    inTableBody
+}) => {
+    try {
+        // debugger
+        await inServices.actions.create({
+            inEndPoint: inEndPoints.create,
+            payload: inPayload
+        });
+
+        afterMutation({
+            inDataStore, inServices, inEndPoints,
+            inTableBody, inVisibleColumnsConfig,
+            inShowSerial, inShowActions
+        });
+    } catch (err) {
+        console.error(err);
+        return;
+    };
+
+    // clearFooterInputs(tr);
+
+    // await afterMutation({
+    //     inServices,
+    //     inEndPoints,
+    //     inDataStore,
+    //     inContainerEl,
+    //     inDom,
+    //     inOptions,
+    //     focusFn: focusFooter,
+    //     inVisibleColumns,
+    //     inShowActions,
+    //     inShowSerial,
+    //     inShowTable,
+    //     onDelete: tableOptions.onDelete
+    // });
+};
+
+const focusFooter = ({ inContainerEl }) => {
+    const el = inContainerEl.querySelector(
+        "tfoot input, tfoot select, tfoot textarea"
+    );
+    el?.focus();
+};
+
+export { saveFooterRow };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V2/start.js

@@ -0,0 +1,48 @@
+import { startFunc as createHandleSave } from "./CreateHandleSave/start.js";
+import { startFunc as createHandleOnChange } from "./CreateHandleOnChange/start.js";
+
+import { startFunc as createFooter } from "./CreateFooter/start.js";
+import { appendFooter } from "./DomManipulation/appendFooter.js";
+
+const buildFooter = ({ inVisibleColumnsConfig, inDefaultRow, keys,
+    inTableFooter, inShowDataList, inDataStore, inShowSave, inOptions,
+    inServices, inEndPoints, inTableBody, inShowSerial, inShowActions
+}) => {
+
+    const localVisibleColumns = inVisibleColumnsConfig
+
+    const localHandleSave = (domValuesAsObject) => {
+        const objectToSave = { ...domValuesAsObject, ...inDefaultRow };
+        // debugger;
+        createHandleSave({
+            inServices, inEndPoints, inPayload: objectToSave,
+            inDataStore, inTableBody,
+            inVisibleColumnsConfig: localVisibleColumns,
+            inShowSerial, inShowActions
+        });
+    };
+
+    const localHandleOnChange = createHandleOnChange({
+        inDataStore,
+        inColumnsConfig: localVisibleColumns,
+        inToSaveRow: inDefaultRow
+    });
+
+    const localTr = createFooter({
+        inVisibleColumnsConfig: localVisibleColumns,
+        inDefaultRow, inShowDataList, keys,
+        onChangeFunc: localHandleOnChange,
+        inShowSave, inOnSaveFunc: localHandleSave,
+        inShowSerial
+    });
+
+    inTableFooter.appendChild(localTr);
+
+    // appendFooter({
+    //     inDom,
+    //     inContainerEl: inOptions.inContainerEl,
+    //     inTr: localTr
+    // });
+};
+
+export default buildFooter;

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/AfterMutation/V1/index.js

@@ -0,0 +1,32 @@
+import { buildBody } from "../../../../../BuildBodyVersions/V4/start.js";
+
+const startFunc = async ({
+    inDataStore,
+    inServices,
+    inEndPoints,
+    inTableBody,
+    inVisibleColumnsConfig,
+    inShowSerial
+}) => {
+    try {
+        const dataFromFetch = await inServices.actions.getData({
+            inEndPoint: inEndPoints.read
+        });
+
+        inDataStore.setData(dataFromFetch);
+
+        const dataToShow = inDataStore.getData();
+
+        buildBody({
+            inDataToShow: dataToShow,
+            inTableBody,
+            inVisibleColumnsConfig,
+            inShowSerial
+        })
+    } catch (err) {
+        console.error(err);
+        return;
+    };
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/AfterMutation/V2/index.js

@@ -0,0 +1,32 @@
+import { buildBody } from "../../../../../BuildBodyVersions/V4/start.js";
+
+const startFunc = async ({
+    inDataStore,
+    inServices,
+    inEndPoints,
+    inTableBody,
+    inVisibleColumnsConfig,
+    inShowSerial
+}) => {
+    try {
+        const dataFromFetch = await inServices.actions.getData({
+            inEndPoint: inEndPoints.read
+        });
+
+        inDataStore.setData(dataFromFetch);
+
+        const dataToShow = inDataStore.getData();
+
+        buildBody({
+            inDataToShow: dataToShow,
+            inTableBody,
+            inVisibleColumnsConfig,
+            inShowSerial
+        })
+    } catch (err) {
+        console.error(err);
+        return;
+    };
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/CreateFooter/start.js

@@ -0,0 +1,36 @@
+import { startFunc as createFooterRow } from "../CreateFooterRow/start.js";
+
+const startFunc = ({
+    inData,
+    keys,
+    inOnSaveFunc,
+    onChangeFunc,
+    inVisibleColumnsConfig,
+    inDefaultRow,
+    inShowSerial,
+    inShowDataList,
+    inShowSave
+}) => {
+    debugger
+
+    const localTr = createFooterRow({
+        keys,
+        options: {
+            showSerial: false,
+            showDataList: false,
+            inColumnsConfig: inVisibleColumnsConfig
+        },
+        inDefaultRow,
+        inTdClass: "px-4 py-2 border",
+        inSerialClass: "",
+        inShowSerial,
+        inShowDataList,
+        inShowSave,
+        inOnSaveFunc,
+        onChangeFunc
+    });
+
+    return localTr;
+};
+
+export { startFunc };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/CreateFooterRow/CreateHeaderCell/assemble.js

@@ -0,0 +1,6 @@
+const assembleHeader = (wrapper, text, icon) => {
+    wrapper.appendChild(text);
+    wrapper.appendChild(icon);
+};
+
+export { assembleHeader };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/CreateFooterRow/CreateHeaderCell/createSortIcon.js

@@ -0,0 +1,25 @@
+const createSortIcon = () => {
+    const svgNS = "http://www.w3.org/2000/svg";
+
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("class", "w-4 h-4 text-gray-400");
+    svg.setAttribute("data-sort-icon", "true");
+
+    const path = document.createElementNS(svgNS, "path");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    path.setAttribute(
+        "d",
+        "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+    );
+
+    svg.appendChild(path);
+
+    return svg;
+};
+
+export { createSortIcon };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/CreateFooterRow/CreateHeaderCell/createTH.js

@@ -0,0 +1,12 @@
+const createTH = (key) => {
+    const th = document.createElement("th");
+
+    th.className =
+        "px-6 py-3 text-left border-b border-gray-200 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer";
+
+    th.dataset.key = key;
+
+    return th;
+};
+
+export { createTH };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/CreateFooterRow/CreateHeaderCell/createText.js

@@ -0,0 +1,7 @@
+const createText = (key) => {
+    const span = document.createElement("span");
+    span.textContent = key;
+    return span;
+};
+
+export { createText };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/CreateFooterRow/CreateHeaderCell/createWrapper.js

@@ -0,0 +1,14 @@
+import { createText } from "./createText.js";
+import { createSortIcon } from "./createSortIcon.js";
+
+const createWrapper = (key) => {
+    const div = document.createElement("div");
+    div.className = "flex items-center gap-1 text-base font-bold text-gray-800";
+
+    div.appendChild(createText(key));
+    div.appendChild(createSortIcon());
+
+    return div;
+};
+
+export { createWrapper };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/CreateFooterRow/CreateHeaderCell/start.js

@@ -0,0 +1,15 @@
+import { createTH } from "./createTH.js";
+import { createWrapper } from "./createWrapper.js";
+
+const createHeaderCell = (key) => {
+    const th = createTH(key);
+
+    const wrapper = createWrapper(key);
+
+    // attach to TH
+    th.appendChild(wrapper);
+
+    return th;
+};
+
+export { createHeaderCell };

package/bin/table/v3/commands/table/template/v12/BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/CreateFooterRow/appendFooterSaveCell.js

@@ -0,0 +1,34 @@
+const appendFooterSaveCell = ({ inOnSaveFunc }) => {
+    // debugger
+    if (!inOnSaveFunc) return;
+
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border";
+    td.style.width = "100px";
+
+    const btn = document.createElement("button");
+    btn.textContent = "Save";
+    btn.className = "px-3 py-1 bg-green-500 text-white rounded";
+
+    btn.onclick = (e) => {
+        e.preventDefault(); // 🔥 THIS IS THE KEY
+        // debugger;
+        const currentTarget = e.currentTarget;
+        const closestFooter = currentTarget.closest("tfoot");
+        const inputs = closestFooter.querySelectorAll("input");
+
+        const data = {};
+
+        inputs.forEach((input) => {
+            data[input.name] = input.value;
+        });
+
+        inOnSaveFunc(data);
+    };
+
+    td.appendChild(btn);
+    // debugger
+    return td;
+};
+
+export { appendFooterSaveCell };