json-crud-ui-comp-table 1.3.2 → 1.3.3

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/WithSerialHtmlId/BuildTable/getKSTableConfig.js

@@ -0,0 +1,18 @@
+const onReadFail = (inResponseStatus) => {
+    console.log("onReadFail", inResponseStatus);
+    const loginModal =
+        document.getElementById("loginModal");
+
+    loginModal.classList.remove("hidden");
+};
+
+export const getKSTableConfig = async () => {
+
+    const config = await fetch("./Index/Configs/WithSerial/config.json");
+    // debugger;
+    const configJson = await config.json();
+
+    configJson.callbacks.table.onReadFail = onReadFail;
+
+    return configJson;
+};

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/WithSerialHtmlId/BuildTable/index.js

@@ -0,0 +1,10 @@
+import { getKSTableConfig } from "./getKSTableConfig.js";
+import { callKSTable } from "./callKSTable.js";
+
+const startFunc = async () => {
+    const config = await getKSTableConfig();
+
+    await callKSTable(config);
+};
+
+export default startFunc;

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/WithSerialHtmlId/clickFunc.js

@@ -0,0 +1,24 @@
+import buildTable from "./BuildTable/index.js";
+
+const clickFuncToRun = ({ inCurrentTarget }) => {
+    // console.log("inCurrentTarget : ", inCurrentTarget);
+    applyActive({ inCurrentTarget });
+    // inCurrentTarget.classList.add("active");
+
+    buildTable().then();
+};
+
+const applyActive = ({ inCurrentTarget }) => {
+    const localCurrentTarget = inCurrentTarget;
+
+    const menu = localCurrentTarget.closest("#menu");
+
+    menu.querySelectorAll("li a.active")
+        .forEach(a => a.classList.remove("active"));
+
+    localCurrentTarget.classList.add("active");
+
+    localCurrentTarget.classList.add("active");
+};
+
+export { clickFuncToRun };

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/WithSerialHtmlId/start.js

@@ -0,0 +1,11 @@
+import { clickFuncToRun } from "./clickFunc.js";
+
+const funcToRun = () => {
+    const htmlElement = document.getElementById('WithSerialHtmlId');
+    // debugger;
+    htmlElement.addEventListener("click", (event) =>
+        clickFuncToRun({ inCurrentTarget: event.currentTarget })
+    );
+};
+
+export default funcToRun;

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/loginButtonId/clickFunc.js

@@ -0,0 +1,47 @@
+const clickFuncToRun = async () => {
+    const UserName =
+        document.getElementById("Username").value;
+
+    const Password =
+        document.getElementById("Password").value;
+
+    const response = await fetch("/Secured/V1/GenerateToken/ToCookie", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            UserName,
+            Password
+        })
+    });
+
+    if (response.status === 200) {
+        document
+            .getElementById("loginError")
+            .classList.add("hidden");
+
+        document
+            .getElementById("loginModalContent")
+            .classList.remove("border-2", "border-red-500");
+
+        const loginModal =
+            document.getElementById("loginModal");
+
+        loginModal.classList.add("hidden");
+    } else {
+        document
+            .getElementById("loginError")
+            .textContent = "Invalid username or password";
+
+        document
+            .getElementById("loginError")
+            .classList.remove("hidden");
+
+        document
+            .getElementById("loginModalContent")
+            .classList.add("border-2", "border-red-500");
+    };
+};
+
+export { clickFuncToRun };

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/loginButtonId/start.js

@@ -0,0 +1,11 @@
+import { clickFuncToRun } from "./clickFunc.js";
+
+const funcToRun = () => {
+    const htmlElement = document.getElementById('loginButtonId');
+    // debugger;
+    htmlElement.addEventListener("click", (event) =>
+        clickFuncToRun({ inCurrentTarget: event.currentTarget })
+    );
+};
+
+export default funcToRun;

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/loginHeaderHtmlId/clickFunc.js

@@ -0,0 +1,21 @@
+const clickFuncToRun = ({ inCurrentTarget }) => {
+    const loginModal =
+        document.getElementById("loginModal");
+
+    loginModal.classList.remove("hidden");
+};
+
+const applyActive = ({ inCurrentTarget }) => {
+    const localCurrentTarget = inCurrentTarget;
+
+    const menu = localCurrentTarget.closest("#menu");
+
+    menu.querySelectorAll("li a.active")
+        .forEach(a => a.classList.remove("active"));
+
+    localCurrentTarget.classList.add("active");
+
+    localCurrentTarget.classList.add("active");
+};
+
+export { clickFuncToRun };

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/loginHeaderHtmlId/start.js

@@ -0,0 +1,11 @@
+import { clickFuncToRun } from "./clickFunc.js";
+
+const funcToRun = () => {
+    const htmlElement = document.getElementById('loginHeaderHtmlId');
+    // debugger;
+    htmlElement.addEventListener("click", (event) =>
+        clickFuncToRun({ inCurrentTarget: event.currentTarget })
+    );
+};
+
+export default funcToRun;

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/start.js

@@ -0,0 +1,15 @@
+import showAllHtmlId from "./ShowAllHtmlId/start.js";
+import withSerialHtmlId from "./WithSerialHtmlId/start.js";
+import withSearchHtmlId from "./WithSearchHtmlId/start.js";
+import loginHeaderHtmlId from "./loginHeaderHtmlId/start.js";
+import loginButtonId from "./loginButtonId/start.js";
+
+const hookAllListeners = () => {
+    showAllHtmlId();
+    withSerialHtmlId();
+    withSearchHtmlId();
+    loginHeaderHtmlId();
+    loginButtonId();
+};
+
+export { hookAllListeners };

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/CommonFuncs/afterHeadSave.js

@@ -0,0 +1,33 @@
+import onSuccessFunc from "./onSuccess.js";
+
+const afterHeadSave = async (inPk) => {
+    const config = await fetch("Index/Configs/AddItem/config.json");
+    const configJson = await config.json();
+
+    configJson.endPoints.findFromParams = configJson.endPoints.findFromParams.replace("{pk}", inPk);
+    configJson.callbacks.vertical.onSuccess = onSuccessFunc;
+
+    if (window.KSTable) {
+        console.log("table loaded from cdn");
+
+        await window.KSTable.initCreate(configJson);
+    };
+
+    const configForSubTable = await fetch("Index/Configs/AddItem/configForSubTable.json");
+    const configForSubTableJson = await configForSubTable.json();
+
+    const findColumn = configForSubTableJson.columnsConfig.find(element => {
+        return element.columnName === "ParentPk";
+    });
+
+    findColumn.defaultValue = inPk.toString();
+    configForSubTableJson.endPoints.read += inPk.toString();
+
+    if (window.KSTable) {
+        console.log("table loaded from cdn");
+
+        await window.KSTable.initTableWithFooter(configForSubTableJson);
+    };
+};
+
+export default afterHeadSave;

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/CommonFuncs/onSuccess.js

@@ -0,0 +1,13 @@
+import afterHeadSave from "./afterHeadSave.js";
+
+const onSuccessFunc = async (res) => {
+    const fromReponse = await res.json();
+    // console.log("fromReponse : ", fromReponse);
+
+    document.getElementById("htmlId").innerHTML = fromReponse.pk;
+
+    // window.location.href = `../WithSubTable/index.html?pk=${fromReponse.pk}`;
+    await afterHeadSave(fromReponse.pk);
+};
+
+export default onSuccessFunc;

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/buildHeader.js

@@ -0,0 +1,12 @@
+// import headerBuild from "/header/v3/initHeader.js";
+
+const buildHeader = async () => {
+    const fromFetch = await fetch("./Index/headers.json");
+    const headerConfig = await fromFetch.json();
+    // debugger;
+    await window.KSHeader(headerConfig);
+
+    // await headerBuild(headerConfig);
+};
+
+export { buildHeader };

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/runAfterDomLoad.js

@@ -0,0 +1,12 @@
+import { buildHeader } from "./buildHeader.js";
+import { hookAllListeners } from "./AddListeners/start.js";
+
+const runAfterDomLoad = () => {
+    import("../../../script.js").then(fromPromise => {
+        buildHeader().then(fromPromise => {
+            hookAllListeners();
+        });
+    });
+};
+
+export { runAfterDomLoad };

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/start.js

@@ -0,0 +1,7 @@
+import { runAfterDomLoad } from "./runAfterDomLoad.js";
+
+export function startDomContentLoaded() {
+    document.addEventListener("DOMContentLoaded", () => {
+        runAfterDomLoad();
+    });
+};

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/start.js

@@ -0,0 +1,5 @@
+import { startDomContentLoaded } from "./DomContentLoaded/start.js";
+
+export function startFormLoad() {
+    startDomContentLoaded();
+}

package/bin/v3/commands/TableComp/template/v3/Index/headers.json

@@ -0,0 +1,51 @@
+{
+    "uiClasses": {
+        "ulClass1": "[&_svg]:size-6"
+    },
+    "title": {
+        "text": "Items",
+        "htmlId": "htmlId"
+    },
+    "items": [
+        {
+            "text": "ShowAll",
+            "id": "ShowAllHtmlId",
+            "icon": [],
+            "uiClasses": {
+                "aClass": "",
+                "svgDivClass": "size-10"
+            },
+            "svgName": "home"
+        },
+        {
+            "text": "WithSerial",
+            "id": "WithSerialHtmlId",
+            "icon": [],
+            "uiClasses": {
+                "aClass": "",
+                "svgDivClass": "size-10"
+            },
+            "svgName": "serial"
+        },
+        {
+            "text": "WithSearch",
+            "id": "WithSearchHtmlId",
+            "icon": [],
+            "uiClasses": {
+                "aClass": "",
+                "svgDivClass": "size-10"
+            },
+            "svgName": "search"
+        },
+        {
+            "text": "Login",
+            "id": "loginHeaderHtmlId",
+            "icon": [],
+            "uiClasses": {
+                "aClass": "",
+                "svgDivClass": "size-8"
+            },
+            "svgName": "home"
+        }
+    ]
+}

package/bin/v3/commands/TableComp/template/v3/Index/start.js

@@ -0,0 +1,7 @@
+import { startFormLoad } from "./FormLoad/start.js";
+
+function startApp() {
+    startFormLoad();
+};
+
+startApp();

package/bin/v3/commands/TableComp/template/v3/index.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KeshavSoft8</title>
+
+    <!-- Tailwind CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- <link rel="stylesheet" href="./tailwind-3.css"> -->
+
+    <!-- Heroicons (SVG inline, no extra CDN needed) -->
+
+    <style>
+        tfoot tr {
+            background-color: #fff8dc;
+        }
+
+        tfoot tr:has(input:focus) {
+            background-color: #ffe082;
+        }
+
+        input:focus {
+            outline: none;
+            border: 2px solid #2563eb;
+            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3);
+        }
+
+        mark {
+            background-color: yellow;
+            color: black;
+        }
+
+        .active svg {
+            stroke: #3b82f6;
+            /* Example color */
+        }
+
+        .active span {
+            color: #3b82f6;
+            /* Example color */
+        }
+
+        .danger svg {
+            stroke: #c41d14;
+            /* Example color */
+        }
+
+        .danger span {
+            color: #c41d14;
+            /* Example color */
+        }
+    </style>
+</head>
+
+<body class="bg-gray-100 flex flex-col min-h-screen">
+    <main class="flex-grow">
+        <!-- NAVBAR -->
+
+        <div id="header"></div>
+
+        <!-- body -->
+        <section class="mx-auto px-3 py-6 
+                max-w-3xl 
+                lg:max-w-5xl 
+                xl:max-w-6xl">
+
+            <!-- Table container -->
+
+            <div id="kSTableContainer">
+            </div>
+
+            <div id="kSSubTableContainer">
+            </div>
+        </section>
+
+
+    </main>
+    <footer class="bg-gray-200 text-gray-700 text-center py-4">
+        <div class="max-w-6xl mx-auto px-4">
+            © 2026 KeshavSoft • Contact
+        </div>
+    </footer>
+
+    <!-- Login Modal -->
+
+    <!-- Modal -->
+    <div id="loginModal" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center">
+
+        <div id="loginModalContent" class="bg-white rounded-lg shadow-lg w-full max-w-sm p-6">
+
+            <h2 class="text-xl font-semibold mb-4">
+                Login
+            </h2>
+
+            <input type="text" placeholder="Username" id="Username" class="w-full border rounded px-3 py-2 mb-3">
+
+            <input type="password" placeholder="Password" id="Password" class="w-full border rounded px-3 py-2 mb-2">
+
+            <p id="loginError" class="hidden text-red-600 text-sm mb-3">
+            </p>
+
+            <button class="w-full bg-blue-600 text-white py-2 rounded" id="loginButtonId">
+                Login
+            </button>
+
+        </div>
+
+    </div>
+
+    <script type="module" src="./Index/start.js"></script>
+
+    <script>
+        const loginModal =
+            document.getElementById("loginModal");
+
+        const showLoginModal = () => {
+            loginModal.classList.remove("hidden");
+        };
+
+        loginModal.addEventListener("click", (event) => {
+            if (event.target === loginModal) {
+                loginModal.classList.add("hidden");
+            };
+        });
+    </script>
+
+</body>
+
+</html>