tailwind-table-dom 1.1.6 → 1.2.8

package/bin/table/v2/commands/table/template/v9/SearchTable/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/SearchTable/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/SearchTable/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/SearchTable/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/SearchTable/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/SearchTable/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/SearchTable/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/SearchTable/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/SearchTable/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/Services/V1/buildUrlWithParams.js

@@ -0,0 +1,11 @@
+export const buildUrlWithParams = ({ baseUrl, params = {} }) => {
+    const url = new URL(baseUrl, window.location.origin);
+
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== null && value !== undefined) {
+            url.searchParams.set(key, value);
+        }
+    });
+
+    return url.toString();
+};

package/bin/table/v2/commands/table/template/v9/Services/V1/createItem.js

@@ -0,0 +1,15 @@
+const createItem = async ({ inEndPoint, payload }) => {
+    const res = await fetch(inEndPoint, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.json();
+};
+
+export { createItem };

package/bin/table/v2/commands/table/template/v9/Services/V1/createServices.js

@@ -0,0 +1,46 @@
+import { createItem } from "./createItem.js";
+import { getDataFromFetch } from "./getData.js";
+import { deleteItem } from "./deleteItem.js";
+import { findItem } from "./findItem.js";
+import filterPost from "./filterPost.js";
+import findFromParams from "./findFromParams.js";
+import getDataNoParamsFunc from "./getDataNoParamsFunc.js";
+
+export const createServices = ({ tableName }) => {
+    return {
+        actions: {
+            getData: ({ inEndPoint }) => getDataFromFetch({ inEndPoint }),
+            create: ({ inEndPoint, payload }) => createItem({ inEndPoint, payload }),
+            update: (id, payload) => updateItem({ tableName, id, payload }),
+            remove: ({ inEndPoint, id }) => deleteItem({ inEndPoint, id }),
+            find: ({ inEndPoint, id }) => findItem({ inEndPoint, id }),
+            findFromParams: ({ inEndPoint }) => findFromParams({ inEndPoint }),
+            vertical: {
+                save: async ({ inEndPoint, payload }) => {
+                    const res = await fetch(inEndPoint, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(payload)
+                    });
+
+                    return await res;
+                }
+            },
+            table: {
+                delete: async ({ inEndPoint, id }) => {
+                    const res = await fetch(`${inEndPoint}/${id}`, {
+                        method: "DELETE"
+                    });
+
+                    return await res;
+                }
+            },
+            search: {
+                filter: ({ inEndPoint, payload }) => filterPost({ inEndPoint, payload })
+            },
+            getDataNoParams: ({ inEndPoint }) => getDataNoParamsFunc({ inEndPoint }),
+        },
+    };
+};

package/bin/table/v2/commands/table/template/v9/Services/V1/deleteItem.js

@@ -0,0 +1,11 @@
+const deleteItem = async ({ inEndPoint, id }) => {
+    const res = await fetch(`${inEndPoint}/${id}`, {
+        method: "DELETE"
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.text();
+};
+
+export { deleteItem };

package/bin/table/v2/commands/table/template/v9/Services/V1/filterPost.js

@@ -0,0 +1,15 @@
+const startFunc = async ({ inEndPoint, payload }) => {
+    const res = await fetch(inEndPoint, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.json();
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/v9/Services/V1/findFromParams.js

@@ -0,0 +1,11 @@
+const findFromParams = async ({ inEndPoint }) => {
+    const res = await fetch(inEndPoint, {
+        method: "GET"
+    });
+
+    if (!res.ok) throw new Error("find failed");
+
+    return await res.json();
+};
+
+export default findFromParams;

package/bin/table/v2/commands/table/template/v9/Services/V1/findItem.js

@@ -0,0 +1,11 @@
+const findItem = async ({ inEndPoint, id }) => {
+    const res = await fetch(`${inEndPoint}/${id}`, {
+        method: "GET"
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.json();
+};
+
+export { findItem };

package/bin/table/v2/commands/table/template/v9/Services/V1/formSearchParamsFunc.js

@@ -0,0 +1,8 @@
+const formSearchParamsFunc = ({ inKeyName }) => {
+    const params = new URLSearchParams(window.location.search);
+    const pk = params.get(inKeyName);
+
+    return pk;
+};
+
+export { formSearchParamsFunc };

package/bin/table/v2/commands/table/template/v9/Services/V1/getData.js

@@ -0,0 +1,19 @@
+import { buildUrlWithParams } from "./buildUrlWithParams.js";
+import { formSearchParamsFunc } from "./formSearchParamsFunc.js";
+
+const getDataFromFetch = async ({ inEndPoint }) => {
+    const ParentPk = formSearchParamsFunc({ inKeyName: "pk" });
+
+    const finalUrl = buildUrlWithParams({
+        baseUrl: inEndPoint,
+        params: { ParentPk }
+    });
+
+    const res = await fetch(finalUrl);
+
+    if (!res.ok) throw new Error("Fetch failed");
+
+    return await res.json();
+};
+
+export { getDataFromFetch };

package/bin/table/v2/commands/table/template/v9/Services/V1/getDataNoParamsFunc.js

@@ -0,0 +1,9 @@
+const getDataNoParamsFunc = async ({ inEndPoint }) => {
+    const res = await fetch(inEndPoint);
+
+    if (!res.ok) throw new Error("Fetch failed");
+
+    return await res.json();
+};
+
+export default getDataNoParamsFunc;

package/bin/table/v2/commands/table/template/v9/Services/V1/setupServices.js

@@ -0,0 +1,13 @@
+// /Services/setupServices.js
+
+import { createServices } from "./createServices.js";
+
+export const setupServices = ({ config, dataStore }) => {
+    const { tableName } = config;
+
+    dataStore.setTableName(tableName);
+
+    return createServices({
+        tableName: dataStore.getTableName()
+    });
+};

package/bin/table/v2/commands/table/template/v9/Services/V1/updateItem.js

@@ -0,0 +1,15 @@
+const updateItem = async ({ tableName, payload }) => {
+    const res = await fetch(`/api/${tableName}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.json();
+};
+
+export { updateItem };

package/bin/table/v2/commands/table/template/v9/Services/dataListLoader.js

@@ -0,0 +1,18 @@
+const loadDataLists = async ({ inEndpoints, inServices, inDataStore }) => {
+    const localEndpoints = Object.entries(inEndpoints?.dataListEndpoints || {});
+
+    if (localEndpoints.length === 0) return;
+
+    const results = await Promise.all(
+        localEndpoints.map(([key, ep]) =>
+            inServices.actions.getData({ inEndPoint: ep }).then(data => [key, data])
+        )
+    );
+    // debugger;
+    results.forEach(([key, data]) => {
+        // localStorage.setItem(key, JSON.stringify(data));
+        inDataStore.setDataList(key, data);
+    });
+};
+
+export { loadDataLists };

package/bin/table/v2/commands/table/template/v9/Services/setupServices.js

@@ -0,0 +1,14 @@
+// /Services/setupServices.js
+
+// import { createServices } from "./createServices.js";
+import { createServices } from "./V1/createServices.js";
+
+export const setupServices = ({ config, dataStore }) => {
+    const { tableName } = config;
+
+    dataStore.setTableName(tableName);
+
+    return createServices({
+        tableName: dataStore.getTableName()
+    });
+};

package/bin/table/v2/commands/table/template/v9/TableFirstRow/V1/SearchFuncs/index.js

@@ -0,0 +1,45 @@
+const startFunc = ({
+    inContainerEl,
+    inUpdateFooter
+}) => {
+
+    const searchInput =
+        inContainerEl.querySelector(".tableSearchClass");
+
+    const rows =
+        inContainerEl.querySelectorAll("tbody tr");
+
+    // cache once
+    rows.forEach((row) => {
+
+        row.dataset.searchText =
+            row.innerText.toLowerCase();
+
+    });
+
+    searchInput.addEventListener("keyup", (event) => {
+
+        const searchValue =
+            event.target.value.toLowerCase();
+
+        rows.forEach((row) => {
+
+            const rowText =
+                row.dataset.searchText;
+
+            row.style.display =
+                rowText.includes(searchValue)
+                    ? ""
+                    : "none";
+
+        });
+
+        // inUpdateFooter({
+        //     inKSTableContainer: kSTableContainer
+        // });
+
+    });
+
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/v9/TableFirstRow/V2/SearchFuncs/index.js

@@ -0,0 +1,85 @@
+const startFunc = ({
+    inContainerEl,
+    inUpdateFooter
+}) => {
+
+    const searchInput =
+        inContainerEl.querySelector(".tableSearchClass");
+
+    const rows =
+        inContainerEl.querySelectorAll("tbody tr");
+
+    // cache once
+    rows.forEach((row) => {
+
+        row.dataset.searchText =
+            row.innerText.toLowerCase();
+
+    });
+
+    let timeout;
+
+    searchInput.addEventListener("keyup", (event) => {
+
+        clearTimeout(timeout);
+
+        const searchValue =
+            event.target.value.toLowerCase();
+
+        // fast filtering
+        rows.forEach((row) => {
+
+            const matched =
+                row.dataset.searchText.includes(searchValue);
+
+            row.style.display =
+                matched
+                    ? ""
+                    : "none";
+
+        });
+
+        // delayed highlight
+        timeout = setTimeout(() => {
+
+            rows.forEach((row) => {
+
+                row.querySelectorAll("mark").forEach((mark) => {
+                    mark.replaceWith(mark.innerText);
+                });
+
+                if (
+                    row.style.display === "none"
+                    || !searchValue
+                ) {
+                    return;
+                };
+
+                row.querySelectorAll("td").forEach((cell) => {
+
+                    const escapedSearchValue =
+                        searchValue.replace(
+                            /[.*+?^${}()|[\]\\]/g,
+                            "\\$&"
+                        );
+
+                    const regex =
+                        new RegExp(`(${escapedSearchValue})`, "ig");
+
+                    cell.innerHTML =
+                        cell.textContent.replace(
+                            regex,
+                            `<mark>$1</mark>`
+                        );
+
+                });
+
+            });
+
+        }, 400);
+
+    });
+
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/v9/TableFirstRow/V3/SearchFuncs/V1/index.js

@@ -0,0 +1,106 @@
+const startFunc = ({
+    inContainerEl,
+    inUpdateFooter
+}) => {
+
+    const searchInput =
+        inContainerEl.querySelector(".tableSearchClass");
+
+    const rows =
+        inContainerEl.querySelectorAll("tbody tr");
+
+    // cache row text once
+    rows.forEach((row) => {
+
+        row.dataset.searchText =
+            row.innerText.toLowerCase();
+
+    });
+
+    let timeout;
+
+    searchInput.addEventListener("keyup", (event) => {
+
+        clearTimeout(timeout);
+
+        const searchValue =
+            event.target.value.toLowerCase();
+
+        // fast filter
+        rows.forEach((row) => {
+
+            const matched =
+                row.dataset.searchText.includes(searchValue);
+
+            row.style.display =
+                matched
+                    ? ""
+                    : "none";
+
+        });
+
+        // delayed highlight
+        timeout = setTimeout(() => {
+
+            // clear old highlights
+            rows.forEach((row) => {
+
+                row.querySelectorAll("mark").forEach((mark) => {
+
+                    mark.replaceWith(mark.innerText);
+
+                });
+
+            });
+
+            if (!searchValue) {
+                return;
+            };
+
+            const escapedSearchValue =
+                searchValue.replace(
+                    /[.*+?^${}()|[\]\\]/g,
+                    "\\$&"
+                );
+
+            const regex =
+                new RegExp(
+                    `(${escapedSearchValue})`,
+                    "ig"
+                );
+
+            // highlight only visible rows
+            rows.forEach((row) => {
+
+                if (row.style.display === "none") {
+                    return;
+                };
+
+                row.querySelectorAll("td").forEach((cell) => {
+
+                    cell.innerHTML =
+                        cell.textContent.replace(
+                            regex,
+                            `<mark>$1</mark>`
+                        );
+
+                });
+
+            });
+
+            // // optional footer update
+            // if (inUpdateFooter) {
+
+            //     inUpdateFooter({
+            //         inContainerEl
+            //     });
+
+            // };
+
+        }, 400);
+
+    });
+
+};
+
+export default startFunc;