tailwind-table-dom 1.1.6

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V1/createInput.js

@@ -0,0 +1,57 @@
+// createInput.js
+
+import { applyInputValue } from "./applyInputValue.js";
+import { applyInputType } from "./applyInputType.js";
+import { applyInputFlags } from "./applyInputFlags.js";
+import { attachDataListChange } from "./attachDataListChange.js";
+
+const createInput = ({
+    col,
+    inputClass = "flex-1 border rounded px-3 py-2",
+    value,
+    inShowDataList,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource,
+    inDataStore,
+    inDataListFillName
+}) => {
+    const input = document.createElement("input");
+
+    input.className = inputClass;
+    input.name = col;
+    input.dataset.dataListFillName = inDataListFillName || col;
+
+    applyInputValue({ input, value });
+
+    applyInputType({
+        input,
+        isDate,
+        defaultToday,
+        isSearch
+    });
+
+    applyInputFlags({
+        input,
+        isReadonly,
+        autoFocus
+    });
+
+    if (inShowDataList) {
+        attachDataListChange({
+            input,
+            col,
+            onChangeFunc,
+            inDataListSource,
+            inDataStore
+        });
+    }
+
+    return input;
+};
+
+export { createInput };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V1/fillInputsFromObject.js

@@ -0,0 +1,17 @@
+const fillInputsFromObject = ({
+    container,
+    sourceObject,
+    skipInput
+}) => {
+    Object.entries(sourceObject).forEach(([key, value]) => {
+        const selector = `[name="${CSS.escape(key)}"]`;
+        const input = container.querySelector(selector);
+
+        if (!input || input === skipInput) return;
+
+        input.value = value ?? "";
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+};
+
+export { fillInputsFromObject };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V1/findDataListRecord.js

@@ -0,0 +1,17 @@
+const findDataListRecord = ({ input, inDataStore }) => {
+    const dataListSource = input.dataset.dataListSource;
+
+    if (!dataListSource || !inDataStore) return;
+
+    const [dataListName, matchKey] = dataListSource.split(".");
+
+    if (!dataListName || !matchKey) return;
+
+    const dataListArray = inDataStore.getDataList(dataListName) || [];
+
+    return dataListArray.find(element => {
+        return element[matchKey] === input.value;
+    });
+};
+
+export { findDataListRecord };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V2/applyInputFlags.js

@@ -0,0 +1,17 @@
+// applyInputFlags.js
+
+const applyInputFlags = ({
+    input,
+    isReadonly,
+    autoFocus
+}) => {
+    if (isReadonly) {
+        input.readOnly = true;
+    }
+
+    if (autoFocus) {
+        input.autofocus = true;
+    }
+};
+
+export { applyInputFlags };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V2/applyInputType.js

@@ -0,0 +1,22 @@
+// applyInputType.js
+
+const applyInputType = ({
+    input,
+    isDate,
+    defaultToday,
+    isSearch
+}) => {
+    if (isDate) {
+        input.setAttribute("type", "date");
+    }
+
+    if (isDate && defaultToday) {
+        input.valueAsDate = new Date();
+    }
+
+    if (isSearch) {
+        input.setAttribute("type", "search");
+    }
+};
+
+export { applyInputType };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V2/applyInputValue.js

@@ -0,0 +1,11 @@
+// applyInputValue.js
+
+const applyInputValue = ({ input, value }) => {
+    if (value !== undefined) {
+        input.dataset.defaultValue = value ?? "";
+    }
+
+    input.value = value ?? "";
+};
+
+export { applyInputValue };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V2/attachDataListChange.js

@@ -0,0 +1,41 @@
+import { findDataListRecord } from "./findDataListRecord.js";
+import { fillInputsFromObject } from "./fillInputsFromObject.js";
+
+const attachDataListChange = ({
+    input,
+    col,
+    onChangeFunc,
+    inDataListSource,
+    inDataStore
+}) => {
+    input.setAttribute("list", `${col}List`);
+    input.dataset.dataListSource = inDataListSource;
+
+    if (onChangeFunc) {
+        input.addEventListener("change", onChangeFunc);
+        return;
+    }
+
+    input.addEventListener("change", (event) => {
+        const currentInput = event.currentTarget;
+
+        const localFind = findDataListRecord({
+            input: currentInput,
+            inDataStore
+        });
+
+        if (!localFind) return;
+
+        const closestVerticalForm = currentInput.closest(".verticalForm");
+
+        if (!closestVerticalForm) return;
+
+        fillInputsFromObject({
+            container: closestVerticalForm,
+            sourceObject: localFind,
+            skipInput: currentInput
+        });
+    });
+};
+
+export { attachDataListChange };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V2/createInput.js

@@ -0,0 +1,57 @@
+// createInput.js
+
+import { applyInputValue } from "./applyInputValue.js";
+import { applyInputType } from "./applyInputType.js";
+import { applyInputFlags } from "./applyInputFlags.js";
+import { attachDataListChange } from "./attachDataListChange.js";
+
+const createInput = ({
+    col,
+    inputClass = "flex-1 border rounded px-3 py-2",
+    value,
+    inShowDataList,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource,
+    inDataStore,
+    inDataListFillName
+}) => {
+    const input = document.createElement("input");
+
+    input.className = inputClass;
+    input.name = col;
+    input.dataset.dataListFillName = inDataListFillName || col;
+
+    applyInputValue({ input, value });
+
+    applyInputType({
+        input,
+        isDate,
+        defaultToday,
+        isSearch
+    });
+
+    applyInputFlags({
+        input,
+        isReadonly,
+        autoFocus
+    });
+
+    if (inShowDataList) {
+        attachDataListChange({
+            input,
+            col,
+            onChangeFunc,
+            inDataListSource,
+            inDataStore
+        });
+    }
+
+    return input;
+};
+
+export { createInput };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V2/fillInputsFromObject.js

@@ -0,0 +1,21 @@
+const fillInputsFromObject = ({
+    container,
+    sourceObject,
+    skipInput
+}) => {
+    // console.log("sourceObject : ", sourceObject);
+
+    Object.entries(sourceObject).forEach(([key, value]) => {
+        // const selector = `[name="${CSS.escape(key)}"]`;
+        const selector = `[data-data-list-fill-name="${CSS.escape(key)}"]`;
+
+        const input = container.querySelector(selector);
+
+        if (!input || input === skipInput) return;
+
+        input.value = value ?? "";
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+};
+
+export { fillInputsFromObject };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/CreateInput/V2/findDataListRecord.js

@@ -0,0 +1,17 @@
+const findDataListRecord = ({ input, inDataStore }) => {
+    const dataListSource = input.dataset.dataListSource;
+
+    if (!dataListSource || !inDataStore) return;
+
+    const [dataListName, matchKey] = dataListSource.split(".");
+
+    if (!dataListName || !matchKey) return;
+
+    const dataListArray = inDataStore.getDataList(dataListName) || [];
+
+    return dataListArray.find(element => {
+        return element[matchKey] === input.value;
+    });
+};
+
+export { findDataListRecord };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/assembleRow.js

@@ -0,0 +1,12 @@
+const assembleRow = ({ row, label, input, button }) => {
+    row.appendChild(label);
+    row.appendChild(input);
+
+    if (button) {
+        row.appendChild(button);
+    };
+
+    return row;
+};
+
+export { assembleRow };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/attachToInputs.js

@@ -0,0 +1,5 @@
+const attachToInputs = ({ inputs, col, input }) => {
+    inputs[col] = input;
+};
+
+export { attachToInputs };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/createButton.js

@@ -0,0 +1,68 @@
+import { buildBody } from "../../../../BuildTableVersions/V4/BuildBodyVersions/V4/start.js";
+import UpdateFooter from "../../../../BuildTableVersions/V4/BuildFooterVersions/ForSummary/V8/UpdateFooter/V4/start.js";
+
+const startFunc = ({ inClassName = "px-4 py-2 bg-blue-500 text-white rounded",
+    inVisibleColumnsConfig, inServices, inConfig, inColumnName
+}) => {
+    const button = document.createElement("button");
+    button.innerHTML = "Filter";
+    button.className = inClassName;
+    button.dataset.columnName = inColumnName;
+
+    button.addEventListener("click", async (event) => {
+        event.preventDefault();
+        const localCurrentTarget = event.currentTarget;;
+
+        await onFilterClick({
+            inCurrentTarget: localCurrentTarget,
+            inServices,
+            inConfig,
+            inVisibleColumnsConfig
+        })
+    });
+
+    return button;
+};
+
+const onFilterClick = async ({ inCurrentTarget, inVisibleColumnsConfig,
+    inServices, inConfig
+}) => {
+    const localCurrentTarget = inCurrentTarget;
+
+    const row = localCurrentTarget.closest("div");
+    const input = row.querySelector("input");
+    const table = localCurrentTarget.closest("#kSTableContainer");
+    const tableFooter = table.querySelector("tfoot");
+
+    // debugger
+    const closestKSTableContainer = localCurrentTarget.closest("#kSTableContainer");
+    const tableBody = closestKSTableContainer.querySelector("tbody");
+    const columnName = localCurrentTarget.dataset.columnName;
+    const payloadToSend = {};
+
+    payloadToSend[columnName] = input.value;
+
+    const filteredData = await inServices.actions.search.filter({
+        inEndPoint: inConfig.endPoints.filter,
+        payload: payloadToSend
+    });
+
+    buildBody({
+        inDataToShow: filteredData,
+        inTableBody: tableBody,
+        inVisibleColumnsConfig
+    });
+    // debugger
+    UpdateFooter({
+        inTableFooter: tableFooter,
+        inVisibleColumnsConfig,
+        inThSerialClassName: "",
+        inData: filteredData,
+        inShowFooterRows: true,
+        inShowBalanceForSearch: true,
+        inShowTotalsForSearch: true
+    });
+    // console.log(input.value, closestKSTableContainer);
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/createInput.js

@@ -0,0 +1,97 @@
+// createInput.js
+
+const createInput = ({
+    col,
+    inputClass = 'flex-1 border rounded px-3 py-2',
+    value,
+    inShowDataList,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource,
+    inDataStore
+}) => {
+    // debugger;
+    const input = document.createElement("input");
+
+    input.className = inputClass;
+    input.name = col;
+
+    if (value !== undefined) {
+        input.dataset.defaultValue = value ?? "";
+    };
+
+    input.value = value ?? "";
+
+    if (inShowDataList) {
+        input.setAttribute("list", `${col}List`);
+        input.dataset.dataListSource = inDataListSource;
+
+        if (onChangeFunc) {
+            input.addEventListener(
+                "change",
+                onChangeFunc
+            );
+        } else {
+            input.addEventListener(
+                "change",
+                (event) => {
+                    const currentInput = event.currentTarget;
+                    const value = currentInput.value;
+                    const localDataListSource = currentInput.dataset.dataListSource;
+
+                    const closestkSTableContainer = currentInput.closest("#kSTableContainer");
+                    const closestVerticalForm = currentInput.closest(".verticalForm");
+
+                    const childDataListContainerClass = closestkSTableContainer.querySelector(".dataListContainerClass");
+
+                    const dataListArray = inDataStore.getDataList(localDataListSource.split(".")[0]);
+
+                    const localFind = dataListArray.find(element => {
+                        return element[localDataListSource.split(".")[1]] === value;
+                    });
+
+                    if (localFind) {
+                        Object.entries(localFind).forEach(([key, value]) => {
+                            const input = closestVerticalForm.querySelector(`[name="${key}"]`);
+
+                            if (input) {
+                                input.value = value ?? "";
+                                input.dispatchEvent(new Event("change", { bubbles: true }));
+                            }
+                        });
+                    };
+                }
+            );
+        };
+        // debugger
+
+    };
+
+    if (isDate) {
+        input.setAttribute("type", "date");
+    };
+
+    if (isDate && defaultToday) {
+        input.valueAsDate = new Date();
+    };
+
+    if (isReadonly) {
+        input.readOnly = true;
+    };
+
+    if (autoFocus) {
+        input.autofocus = true;
+    };
+
+    if (isSearch) {
+        input.setAttribute("type", "search");
+    };
+
+    return input;
+};
+
+export { createInput };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/createInputRow.js

@@ -0,0 +1,73 @@
+// 📁 createInputRow.js
+
+import { createLabel } from "./createLabel.js";
+// import { createInput } from "./createInput.js";
+import { resolveValue } from "./resolveValue.js";
+import { createRowContainer } from "./createRowContainer.js";
+import { attachToInputs } from "./attachToInputs.js";
+import { assembleRow } from "./assembleRow.js";
+import createButton from "./createButton.js";
+
+import { createInput } from "./CreateInput/V2/createInput.js";
+
+const createInputRow = ({
+    inCol,
+    inDefaultRow,
+    inInputs,
+    inInputClass,
+    inRowClass,
+    inLabelClass,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource,
+    inVisibleColumnsConfig,
+    inServices,
+    inConfig,
+    inShowButton = true,
+    inDataStore,
+    inUiClassesForEachColumn
+}) => {
+    const col = inCol.columnName;
+    const dataListFillName = inCol.dataListFillName;
+
+    const row = createRowContainer({ rowClass: inRowClass });
+
+    const value = resolveValue({ col, defaultRow: inDefaultRow });
+    // debugger;
+    const label = createLabel({ col, labelClass: inLabelClass });
+
+    const input = createInput({
+        col,
+        inputClass: inInputClass,
+        value,
+        inShowDataList: inCol.tableFooterDataListShow || inCol.isSearchable,
+        isDate,
+        defaultToday,
+        isReadonly,
+        autoFocus,
+        isSearch,
+        onChangeFunc,
+        inDataListSource,
+        inDataStore,
+        inDataListFillName: dataListFillName
+    });
+
+    const button = inShowButton
+        ? createButton({
+            inColumnName: col,
+            inVisibleColumnsConfig,
+            inServices,
+            inConfig
+        })
+        : null;
+
+    attachToInputs({ inputs: inInputs, col, input });
+
+    return assembleRow({ row, label, input, button });
+};
+
+export { createInputRow };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/createLabel.js

@@ -0,0 +1,8 @@
+const createLabel = ({ col, labelClass ='w-24 text-sm font-medium'}) => {
+    const label = document.createElement('label');
+    label.textContent = col;
+    label.className = labelClass;
+    return label;
+};
+
+export { createLabel };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/createRowContainer.js

@@ -0,0 +1,7 @@
+const createRowContainer = ({ rowClass = 'flex items-center space-x-4' }) => {
+    const row = document.createElement('div');
+    row.className = rowClass;
+    return row;
+};
+
+export { createRowContainer };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/CreateInputRow/resolveValue.js

@@ -0,0 +1,5 @@
+const resolveValue = ({ col, defaultRow }) => {
+    return defaultRow?.[col];
+};
+
+export { resolveValue };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/Create/createInputRow.js

@@ -0,0 +1,76 @@
+// 📁 createInputRow.js
+
+const createLabel = ({ col, labelClass }) => {
+    const label = document.createElement('label');
+    label.textContent = col;
+    label.className = labelClass;
+    return label;
+};
+
+const createInput = ({ col, inputClass, value, inShowDataList }) => {
+    const input = document.createElement('input');
+    input.className = inputClass;
+    input.name = col;
+
+    if (value !== undefined) {
+        input.dataset.defaultValue = value ?? "";
+    };
+
+    input.value = value ?? "";
+
+    if (inShowDataList) {
+        input.setAttribute("list", `${col}List`);
+    };
+
+    return input;
+};
+
+const resolveValue = ({ col, defaultRow }) => {
+    return defaultRow?.[col];
+};
+
+const createRowContainer = ({ rowClass }) => {
+    const row = document.createElement('div');
+    row.className = rowClass;
+    return row;
+};
+
+const attachToInputs = ({ inputs, col, input }) => {
+    inputs[col] = input;
+};
+
+const assembleRow = ({ row, label, input }) => {
+    row.appendChild(label);
+    row.appendChild(input);
+    return row;
+};
+
+const createInputRow = ({
+    inCol,
+    inDefaultRow,
+    inInputs,
+    inInputClass,
+    inRowClass,
+    inLabelClass
+}) => {
+    const col = inCol.columnName;
+
+    const row = createRowContainer({ rowClass: inRowClass });
+
+    const value = resolveValue({ col, defaultRow: inDefaultRow });
+
+    const label = createLabel({ col, labelClass: inLabelClass });
+
+    const input = createInput({
+        col,
+        inputClass: inInputClass,
+        value,
+        inShowDataList: inCol.tableFooterDataListShow
+    });
+
+    attachToInputs({ inputs: inInputs, col, input });
+
+    return assembleRow({ row, label, input });
+};
+
+export { createInputRow };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/appendFieldset.js

@@ -0,0 +1,9 @@
+const appendFieldset = ({
+    inForm,
+    inFieldset
+}) => {
+
+    inForm.appendChild(inFieldset);
+};
+
+export { appendFieldset };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/clearFormInputs.js

@@ -0,0 +1,13 @@
+const clearFormInputs = ({ inInputs }) => {
+    const inputs = inInputs;
+
+    Object.values(inputs).forEach(input => {
+        input.value = "";
+
+        if ("defaultValue" in input.dataset) {
+            input.value = input.dataset.defaultValue;
+        };
+    });
+};
+
+export { clearFormInputs };

package/bin/table/v2/commands/table/template/v4/BuildSearchForm/V2/createFieldset.js

@@ -0,0 +1,14 @@
+const createFieldset = ({
+    inFormClass = 'grid grid-cols-3 gap-x-8 gap-y-4 p-6 verticalForm',
+    inIsDisabled
+}) => {
+
+    const localFieldset = document.createElement("fieldset");
+
+    localFieldset.className = inFormClass;
+    localFieldset.disabled = inIsDisabled;
+
+    return localFieldset;
+};
+
+export { createFieldset };