tailwind-table-dom 1.1.6 → 1.2.8

package/bin/table/v2/commands/table/template/v9/BuildHeader/CreateHeaderRow/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/v2/commands/table/template/v9/BuildHeader/CreateHeaderRow/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/v2/commands/table/template/v9/BuildHeader/CreateHeaderRow/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/v2/commands/table/template/v9/BuildHeader/CreateHeaderRow/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/v2/commands/table/template/v9/BuildHeader/CreateHeaderRow/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/v2/commands/table/template/v9/BuildHeader/CreateHeaderRow/insertCells.js

@@ -0,0 +1,9 @@
+import { createHeaderCell } from "./CreateHeaderCell/start.js";
+
+const startFunc = (keys, tr, options = {}) => {
+    keys.forEach(key => {
+        tr.appendChild(createHeaderCell(key));
+    });
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v9/BuildHeader/CreateHeaderRow/start.js

@@ -0,0 +1,21 @@
+import { startFunc as insertRowCells } from "./insertCells.js";
+
+const startFunc = (keys) => {
+    const tr = document.createElement("tr");
+
+    tr.appendChild(getSerialColumn());
+
+    insertRowCells(keys, tr);
+
+    return tr;
+};
+
+const getSerialColumn = () => {
+    const thIndex = document.createElement("th");
+    thIndex.textContent = "#";
+    thIndex.className = "px-4 py-2 border";
+
+    return thIndex
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v9/BuildHeader/attachSortHandlers.js

@@ -0,0 +1,38 @@
+import { setSort } from "../tableStore.js";
+import { buildTableBody } from "../methods.js";
+import { updateHeaderUI } from "./updateHeaderUI.js";
+import { startFunc as getTHead } from "./getTHead.js";
+
+/**
+ * Handles what should happen when a user clicks a column header
+ * Flow:
+ * 1. Update sort state
+ * 2. Rebuild table body based on new sort
+ * 3. Reflect UI changes in header (active column + direction)
+ */
+const handleHeaderSort = (headerCell) => {
+    const key = headerCell.dataset.key;
+
+    setSort(key);
+    buildTableBody();
+    updateHeaderUI(headerCell, key);
+};
+const getSortableHeaders = () => {
+    return getTHead().querySelectorAll("th[data-key]");
+};
+
+/**
+ * Attaches sorting behavior to a header row (<tr>)
+ * Every <th data-key> becomes clickable and triggers sorting
+ */
+const attachSortHandlers = () => {
+    const sortableHeaders = getSortableHeaders();
+
+    sortableHeaders.forEach(headerCell => {
+        headerCell.addEventListener("click", (e) => {
+            handleHeaderSort(e.currentTarget);
+        });
+    });
+};
+
+export { attachSortHandlers };

package/bin/table/v2/commands/table/template/v9/BuildHeader/getTHead.js

@@ -0,0 +1,12 @@
+import { getHtmlId } from "../tableStore.js";
+
+const startFunc = () => {
+    const tableContainerId = getHtmlId();
+    const tableContainer = document.getElementById(tableContainerId);
+
+    const thead = tableContainer.querySelector("table thead");
+
+    return thead;
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v9/BuildHeader/sortData.js

@@ -0,0 +1,16 @@
+const startFunc = (key, dataRef, sortState) => {
+    const asc = sortState[key] = !sortState[key];
+
+    dataRef.sort((a, b) => {
+        const valA = (a[key] ?? '').toString().toLowerCase();
+        const valB = (b[key] ?? '').toString().toLowerCase();
+
+        return asc
+            ? valA.localeCompare(valB)
+            : valB.localeCompare(valA);
+    });
+
+    return asc;
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v9/BuildHeader/start.js

@@ -0,0 +1,9 @@
+import { startFunc as createHeaderRow } from "./CreateHeaderRow/start.js";
+
+const startFunc = ({ inColumns, inTableHeader }) => {
+    const tr = createHeaderRow(inColumns);
+
+    inTableHeader.appendChild(tr);
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v9/BuildHeader/updateHeaderUI.js

@@ -0,0 +1,49 @@
+import { getSortState } from "../tableStore.js";
+import { startFunc as getTHead } from "./getTHead.js";
+
+const ICON_DEFAULT = "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9";
+const ICON_UP = "M5 15l7-7 7 7";
+const ICON_DOWN = "M19 9l-7 7-7-7";
+
+const getIconPath = (th) => {
+    return th.querySelector("[data-sort-icon] path");
+};
+
+// 🔹 Reset one column
+const resetColumn = (th) => {
+    const path = getIconPath(th);
+    if (!path) return;
+
+    path.setAttribute("d", ICON_DEFAULT);
+
+    th.classList.remove("text-gray-900");
+    th.classList.add("text-gray-700");
+};
+
+// 🔹 Activate one column
+const activateColumn = (th, asc) => {
+    const path = getIconPath(th);
+    if (!path) return;
+
+    path.setAttribute("d", asc ? ICON_UP : ICON_DOWN);
+
+    th.classList.remove("text-gray-700");
+    th.classList.add("text-gray-900");
+};
+
+// 🔹 Orchestration (NOW READABLE)
+const updateHeaderUI = (activeTh, key) => {
+    const { key: activeKey, asc } = getSortState();
+
+    // 1. Reset everything
+    const tableHead = getTHead();
+
+    tableHead.querySelectorAll("th[data-key]").forEach(resetColumn);
+
+    // 2. Activate selected
+    if (activeKey === key) {
+        activateColumn(activeTh, asc);
+    }
+};
+
+export { updateHeaderUI };

package/bin/table/v2/commands/table/template/v9/BuildSearchForm/V1/Append/CreateHandleOnChange/start.js

@@ -0,0 +1,56 @@
+const startFunc = ({ inGetDataLists }) => {
+    return (inEvent) => {
+        const localFieldSet = getFieldSet(inEvent);
+        const localFindRow = getFindRow({ inEvent, inGetDataLists });
+
+        if (localFindRow === undefined) return;
+
+        updateInputs({
+            inFieldSet: localFieldSet,
+            inFindRow: localFindRow
+        });
+    };
+};
+
+const getFieldSet = (inEvent) => {
+    return inEvent.currentTarget.closest("fieldset.verticalForm");
+};
+
+const getFindRow = ({ inEvent, inGetDataLists }) => {
+    const localCurrentTarget = inEvent.currentTarget;
+
+    return findRow({
+        inDataListSource: localCurrentTarget.dataset.dataListSource,
+        inValueToFind: localCurrentTarget.value,
+        inGetDataLists
+    });
+};
+
+const updateInputs = ({ inFieldSet, inFindRow }) => {
+    Object.entries(inFindRow).forEach(([key, value]) => {
+        const localInput = inFieldSet.querySelector(`[name="${key}"]`);
+
+        if (localInput) localInput.value = value;
+    });
+};
+
+const findRow = ({
+    inDataListSource,
+    inValueToFind,
+    inGetDataLists
+}) => {
+    const localToFindDataListKey =
+        inDataListSource.split(".")[0];
+
+    const localToFindColumn =
+        inDataListSource.split(".")[1];
+
+    const localDataListItems =
+        inGetDataLists(localToFindDataListKey);
+
+    return localDataListItems.find((element) => {
+        return element[localToFindColumn] === inValueToFind;
+    });
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v9/BuildSearchForm/V1/Append/appendInputRows.js

@@ -0,0 +1,88 @@
+import { createInputRow } from "../Create/CreateInputRow/createInputRow.js";
+import { startFunc as createHandleOnChange } from "./CreateHandleOnChange/start.js";
+
+const appendInputRows = ({
+    inFieldset,
+    inVisibleColumnsConfig,
+    inDefaultRow,
+    inInputs,
+    inUiClasses,
+    inGetDataLists,
+    hookOnChangeFunc = false,
+    inServices,
+    inConfig,
+    inSearchableColumnsConfig
+}) => {
+    // debugger
+    let localHandleOnChange;
+
+    if (hookOnChangeFunc) {
+        localHandleOnChange = createHandleOnChange({
+            inGetDataLists,
+            inColumnsConfig: inSearchableColumnsConfig
+        });
+    };
+
+    // debugger;
+    inSearchableColumnsConfig.forEach(localColumn => {
+        appendInputRow({
+            inFieldset,
+            inColumn: localColumn,
+            inDefaultRow,
+            inInputs,
+            inUiClasses,
+            isDate: localColumn.isDate,
+            defaultToday: localColumn.defaultToday,
+            isReadonly: localColumn.isReadonly,
+            autoFocus: localColumn.autoFocus,
+            isSearch: localColumn.isSearch,
+            onChangeFunc: localHandleOnChange,
+            inDataListSource: localColumn.dataListSource,
+            inVisibleColumnsConfig,
+            inServices,
+            inConfig
+        });
+    });
+};
+
+const appendInputRow = ({
+    inFieldset,
+    inColumn,
+    inDefaultRow,
+    inInputs,
+    inUiClasses,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource,
+    inVisibleColumnsConfig,
+    inServices,
+    inConfig
+}) => {
+
+    const localRow = createInputRow({
+        inCol: inColumn,
+        inDefaultRow,
+        inInputs,
+        inInputClass: inUiClasses.inputClass,
+        inRowClass: inUiClasses.rowClass,
+        inLabelClass: inUiClasses.labelClass,
+        isDate,
+        defaultToday,
+        isReadonly,
+        autoFocus,
+        isSearch,
+        onChangeFunc,
+        inDataListSource,
+        inVisibleColumnsConfig,
+        inServices,
+        inConfig
+    });
+
+    inFieldset.appendChild(localRow);
+};
+
+export { appendInputRows };

package/bin/table/v2/commands/table/template/v9/BuildSearchForm/V1/Append/appendSaveButton.js

@@ -0,0 +1,22 @@
+import { createButton } from "../Create/CreateButton/createButton.js";
+
+const appendSaveButton = ({
+    inFieldset,
+    inShowSaveButton,
+    inButtonClass,
+    inInputs,
+    inOnSubmit
+}) => {
+
+    if (inShowSaveButton === false) return;
+
+    const localButton = createButton({
+        inButtonClass,
+        inInputs,
+        inOnSubmit
+    });
+
+    inFieldset.appendChild(localButton);
+};
+
+export { appendSaveButton };

package/bin/table/v2/commands/table/template/v9/BuildSearchForm/V1/Create/CreateButton/collectFormData.js

@@ -0,0 +1,13 @@
+const collectFormData = ({ inInputs }) => {
+    const inputs = inInputs;
+
+    const newItem = {};
+
+    Object.keys(inputs).forEach(key => {
+        newItem[key] = inputs[key].value;
+    });
+
+    return newItem;
+};
+
+export { collectFormData };

package/bin/table/v2/commands/table/template/v9/BuildSearchForm/V1/Create/CreateButton/createButton.js

@@ -0,0 +1,31 @@
+import { collectFormData } from "./collectFormData.js";
+import { clearFormInputs } from "../../clearFormInputs.js";
+import { focusFirstInput } from "../../focusFirstInput.js";
+
+const createButton = ({ inButtonClass = 'mt-2 px-4 py-1 bg-green-500 text-white', inInputs, inOnSubmit }) => {
+    const buttonClass = inButtonClass;
+    const inputs = inInputs;
+    const onSubmit = inOnSubmit;
+
+    const button = document.createElement('button');
+    button.textContent = 'Save';
+    button.className = buttonClass;
+
+    button.addEventListener('click', async (event) => {
+        event.preventDefault(); // 🔥 THIS IS THE KEY
+
+        const newItem = collectFormData({ inInputs: inputs });
+        // debugger
+        // const fromSubmit = false;
+        const fromSubmit = await onSubmit(newItem);
+
+        if (fromSubmit) {
+            clearFormInputs({ inInputs });
+            focusFirstInput({ inInputs });
+        };
+    });
+
+    return button;
+};
+
+export { createButton };

package/bin/table/v2/commands/table/template/v9/BuildSearchForm/V1/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/v9/BuildSearchForm/V1/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/v9/BuildSearchForm/V1/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/v9/BuildSearchForm/V1/Create/CreateInputRow/createInput.js

@@ -0,0 +1,62 @@
+// createInput.js
+
+const createInput = ({
+    col,
+    inputClass='flex-1 border rounded px-3 py-2',
+    value,
+    inShowDataList,
+    isDate,
+    defaultToday,
+    isReadonly,
+    autoFocus,
+    isSearch,
+    onChangeFunc,
+    inDataListSource
+}) => {
+
+    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;
+
+        // debugger
+        input.addEventListener(
+            "change",
+            onChangeFunc
+        );
+    };
+
+    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 };