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

package/bin/{v1/commands/Vertical/template/v1 → v3/commands/TableComp/template/v3}/Index/Configs/WithSerial/config.json

@@ -1,63 +1,69 @@
-{
-    "containerId": "kSTableContainer",
-    "tableName": "",
-    "mode": "create",
-    "layout": {
-        "verticalPosition": "top",
-        "type": "table"
-    },
-    "endPoints": {
-        "create": "",
-        "update": "",
-        "delete": "",
-        "read": "/Api/V1/LedgerNames/ShowAll",
-        "find": "",
-        "filter": "",
-        "dataLists": {}
-    },
-    "options": {
-        "enabledSections": [
-            "vertical",
-            "table",
-            "footer"
-        ],
-        "table": {
-            "showSerial": true
-        }
-    },
-    "columnsConfig": [
-        {
-            "columnName": "LedgerName",
-            "title": "LedgerName",
-            "cellConfig": {
-                "width": "150px"
-            },
-            "isSearchable": false,
-            "dataListSource": "Dates.Date"
-        },
-        {
-            "columnName": "LedgerParentName",
-            "title": "Parent Name",
-            "cellConfig": {
-                "width": "100px"
-            },
-            "isSearchable": false,
-            "dataListSource": "AccountNames.AccountName"
-        },
-        {
-            "columnName": "GstRegistrationType",
-            "title": "Registration Type",
-            "cellConfig": {
-                "width": "100px"
-            }
-        },
-        {
-            "columnName": "PartyGSTIN",
-            "title": "GSTIN",
-            "cellConfig": {
-                "width": "100px",
-                "tableFooter": {}
-            }
-        }
-    ]
+{
+    "containerId": "kSTableContainer",
+    "tableName": "",
+    "mode": "create",
+    "layout": {
+        "verticalPosition": "top",
+        "type": "table"
+    },
+    "endPoints": {
+        "create": "",
+        "update": "",
+        "delete": "",
+        "read": "/Protected/V1/LedgerNames/ShowAll",
+        "find": "",
+        "filter": "",
+        "dataLists": {}
+    },
+    "options": {
+        "enabledSections": [
+            "vertical",
+            "table",
+            "footer"
+        ],
+        "table": {
+            "showSerial": true
+        }
+    },
+    "columnsConfig": [
+        {
+            "columnName": "LedgerName",
+            "title": "LedgerName",
+            "cellConfig": {
+                "width": "150px"
+            },
+            "isSearchable": false,
+            "dataListSource": "Dates.Date"
+        },
+        {
+            "columnName": "LedgerParentName",
+            "title": "Parent Name",
+            "cellConfig": {
+                "width": "100px"
+            },
+            "isSearchable": false,
+            "dataListSource": "AccountNames.AccountName"
+        },
+        {
+            "columnName": "GstRegistrationType",
+            "title": "Registration Type",
+            "cellConfig": {
+                "width": "100px"
+            }
+        },
+        {
+            "columnName": "PartyGSTIN",
+            "title": "GSTIN",
+            "cellConfig": {
+                "width": "100px",
+                "tableFooter": {}
+            }
+        }
+    ],
+    "callbacks": {
+        "table": {
+            "onDelete": "function",
+            "onReadFail": "function"
+        }
+    }
 }

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/ShowAllHtmlId/BuildTable/callKSTable.js

@@ -0,0 +1,5 @@
+export const callKSTable = async (config) => {
+    if (window?.KSTableComp?.initShowTable) {
+        return window.KSTableComp.initShowTable(config);
+    };
+};

package/bin/v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/ShowAllHtmlId/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");
+debugger;
+    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/WithSearchHtmlId/BuildTable/callKSTable.js

@@ -0,0 +1,5 @@
+export const callKSTable = async (config) => {
+    if (window?.KSTableComp?.initShowTable) {
+        return window.KSTableComp.initShowTable(config);
+    };
+};

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

@@ -0,0 +1,5 @@
+export const callKSTable = async (config) => {
+    if (window?.KSTableComp?.initShowTable) {
+        return window.KSTableComp.initShowTable(config);
+    };
+};

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/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/{v1/commands/HeaderOnly/template/v6/Index/FormLoad/DomContentLoaded/AddListeners/TallyDownId → v3/commands/TableComp/template/v3/Index/FormLoad/DomContentLoaded/AddListeners/loginHeaderHtmlId}/start.js

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

package/bin/{v1/commands/WithHeader/template/v8 → v3/commands/TableComp/template/v3}/Index/FormLoad/DomContentLoaded/AddListeners/start.js

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

package/bin/{v1/commands/WithHeader/template/v7 → v3/commands/TableComp/template/v3}/Index/FormLoad/DomContentLoaded/runAfterDomLoad.js

@@ -2,8 +2,10 @@ import { buildHeader } from "./buildHeader.js";
 import { hookAllListeners } from "./AddListeners/start.js";
 
 const runAfterDomLoad = () => {
-    buildHeader().then(fromPromise => {
-        hookAllListeners();
+    import("../../../script.js").then(fromPromise => {
+        buildHeader().then(fromPromise => {
+            hookAllListeners();
+        });
     });
 };
 

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/{v1/commands/WithHeader/template/v8 → v3/commands/TableComp/template/v3}/index.html

@@ -84,14 +84,49 @@
         </div>
     </footer>
 
-    <!-- <script src="https://keshavsoft.github.io/KsJsTableAi/Public/kstable.js" type="module"></script> -->
-    <script src="https://keshavsoft.github.io/tailwind-header-dom/Public/v5/ksheader.js" type="module"></script>
+    <!-- Login Modal -->
 
-    <!-- <script src="https://keshavsoft.github.io/tailwind-table-dom/Public/v10/kstable.js" type="module"></script> -->
+    <!-- Modal -->
+    <div id="loginModal" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center">
 
-    <script src="./script.js" type="module"></script>
+        <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>

package/bin/{v1/commands/HeaderOnly/template/v5 → v3/commands/TableComp/template/v3}/script.js

@@ -15,9 +15,9 @@ async function ensureTailwind() {
 
     const tryLocal = async () => {
         try {
-            await loadCss("./tailwind-3-min.css");
+            await loadCss("./tailwind-3.css");
 
-            console.log("Tailwind min loaded locally");
+            console.log("Tailwind loaded locally");
             return true;
         } catch { return false; }
     };
@@ -52,6 +52,58 @@ async function ensureTailwind() {
     throw new Error("Tailwind could not be loaded");
 };
 
+async function ensureKSHeader() {
+    function loadScriptAsModule(src) {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement("script");
+
+            script.src = src;
+            script.onload = () => resolve(true);
+            script.onerror = () => reject(new Error(`Failed to load: ${src}`));
+            script.type = "module";
+
+            document.head.appendChild(script);
+        });
+    };
+
+    function isKSTableLoaded() {
+        return !!window.KSHeader;
+    };
+
+    async function tryGitHub() {
+        try {
+            const fromPromise = await loadScriptAsModule("https://keshavsoft.github.io/tailwind-header-dom/Public/v4.7/ksheader.js");
+
+            console.log("KSHeader loaded from git : tailwind-header-dom");
+
+            if (fromPromise) return true;
+        } catch { return false };
+
+        return false;
+    };
+
+    async function tryLocal() {
+        try {
+            const fromPromise = await loadScriptAsModule("/header/v4/initHeader.js");
+
+            if (fromPromise) return true;
+        } catch { return false };
+
+        return false;
+    };
+
+    if (isKSTableLoaded()) {
+        console.log("KSHeader loaded from Firefox Extension");
+        return;
+    };
+
+    if (await tryLocal()) return;
+
+    if (await tryGitHub()) return;
+
+    throw new Error("KSTable could not be loaded");
+};
+
 async function ensureKSTable() {
     function loadScriptAsModule(src) {
         return new Promise((resolve, reject) => {
@@ -106,7 +158,7 @@ async function ensureKSTable() {
     throw new Error("KSTable could not be loaded");
 };
 
-async function ensureKSHeader() {
+async function ensureKSTableComp() {
     function loadScriptAsModule(src) {
         return new Promise((resolve, reject) => {
             const script = document.createElement("script");
@@ -121,14 +173,14 @@ async function ensureKSHeader() {
     };
 
     function isKSTableLoaded() {
-        return !!window.KSTable;
+        return !!window.KSTableComp;
     };
 
     async function tryGitHub() {
         try {
-            const fromPromise = await loadScriptAsModule("https://keshavsoft.github.io/tailwind-header-dom/Public/v4.3/ksheader.js");
+            const fromPromise = await loadScriptAsModule("https://keshavsoft.github.io/tailwind-table-dom-comp/Public/v4/kstable.js");
 
-            console.log("KSTable loaded from Local Server");
+            console.log("KSTableComp loaded from git : tailwind-table-dom-comp-4");
 
             if (fromPromise) return true;
         } catch { return false };
@@ -138,9 +190,9 @@ async function ensureKSHeader() {
 
     async function tryLocal() {
         try {
-            const fromPromise = await loadScriptAsModule("/header/v3/initHeader.js");
+            const fromPromise = await loadScriptAsModule("/TableComp/v5/entry.js");
 
-            console.log("KSHeader loaded from Local Server");
+            console.log("KSTableComp loaded from Local Server : TableComp/v5");
 
             if (fromPromise) return true;
         } catch { return false };
@@ -149,7 +201,7 @@ async function ensureKSHeader() {
     };
 
     if (isKSTableLoaded()) {
-        console.log("KSHeader loaded from Firefox Extension");
+        console.log("KSTable loaded from Firefox Extension");
         return;
     };
 
@@ -157,9 +209,68 @@ async function ensureKSHeader() {
 
     if (await tryGitHub()) return;
 
-    throw new Error("KSTable could not be loaded");
+    throw new Error("KSTableComp could not be loaded");
+};
+
+async function ensureKSVertical() {
+    function loadScriptAsModule(src) {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement("script");
+
+            script.src = src;
+            script.onload = () => resolve(true);
+            script.onerror = () => reject(new Error(`Failed to load: ${src}`));
+            script.type = "module";
+
+            document.head.appendChild(script);
+        });
+    };
+
+    function isKSVerticalLoaded() {
+        return !!window.KSVertical;
+    };
+
+    async function tryGitHub() {
+        try {
+            const fromPromise = await loadScriptAsModule("https://keshavsoft.github.io/tailwind-vertical-dom/Public/v3/ksvertical.js");
+
+            console.log("KSVertical loaded from git : tailwind-vertical-dom");
+
+            if (fromPromise) return true;
+        } catch { return false };
+
+        return false;
+    };
+
+    async function tryLocal() {
+        try {
+            const fromPromise = await loadScriptAsModule("/TableComp/v4/entry.js");
+
+            console.log("KSVertical loaded from Local Server : TableComp/v1");
+
+            if (fromPromise) return true;
+        } catch { return false };
+
+        return false;
+    };
+
+    if (isKSVerticalLoaded()) {
+        console.log("KSVertical loaded from Firefox Extension");
+        return;
+    };
+
+    if (await tryLocal()) return;
+
+    if (await tryGitHub()) return;
+
+    throw new Error("KSVertical could not be loaded");
 };
 
 await ensureTailwind();
 await ensureKSHeader();
-await ensureKSTable();
+
+// ensureKSTable().then();
+
+ensureKSTableComp().then();
+
+ensureKSVertical().then();

package/bin/v3/core/parseInput.js

@@ -0,0 +1,12 @@
+import path from "path";
+
+export default function parseInput({ inTableName, inShowLog, inToPath }) {
+    const [folderName, tableName, showLog] = process.argv.slice(2);
+
+    return {
+        tableName: inTableName || tableName,
+        showLog: inShowLog || showLog,
+        toPath: inToPath || path.join(process.cwd(), folderName),
+        configPath: path.join(process.cwd(), "Config", "Schemas")
+    };
+};

package/bin/v3/start.js

@@ -0,0 +1,27 @@
+import parseInput from "./core/parseInput.js";
+import showUsage from './core/showUsage.js';
+
+import tableComp from "./commands/tableComp.js";
+
+import pkg from '../../package.json' with { type: 'json' };
+
+const version = pkg.version;
+
+const run = async ({ tableName, showLog, toPath, configPath }) => {
+  const input = parseInput({
+    inTableName: tableName,
+    inShowLog: showLog, inToPath: toPath,
+    configPath
+  });
+
+  if (input.action === "--help" || input.action === "-h" || input.action === "help") return showUsage(version);
+
+  await tableComp({
+    tableName: input.tableName,
+    showLog: input.showLog,
+    toPath: input.toPath,
+    configPath: input.configPath
+  });
+};
+
+export default run;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-crud-ui-comp-table",
-  "version": "1.2.5",
+  "version": "1.3.3",
   "description": "ui boilerplate code in public folder, with html and js for table build",
   "keywords": [
     "cli",