tailwind-table-dom 1.1.6 → 1.3.11

package/bin/table/v3/commands/table/template/v10/UI/mountTableWithFooter.js

@@ -0,0 +1,145 @@
+import buildHeader from "../BuildTableVersions/V4/BuildHeaderVersions/V4/index.js";
+import { buildBody } from "../BuildTableVersions/V4/BuildBodyVersions/V5/start.js";
+import createForm from "../BuildSearchForm/V1/createForm.js";
+import buildDataLists from "../BuildDataLists/V2/addToDom.js";
+
+// import buildFooter from "../BuildTableVersions/V4/BuildFooterVersions/ForCreate/V3/start.js";
+import buildFooter from "../BuildTableVersions/V4/BuildFooterVersions/ForCreate/V4/start.js";
+
+import SearchFuncs from "../TableFirstRow/V3/SearchFuncs/V4/index.js";
+import setFocus from "../UI/SetFocus/V3/index.js";
+
+import { buildFullUI } from "./compose/buildFullUI.js";
+
+const startFunc = ({
+    containerEl,
+    dataStore,
+    dom,
+    services,
+    options,
+    endPoints,
+    columnsConfig,
+    uiClasses,
+    callbacks,
+    inConfig
+}) => {
+    // debugger
+
+    const visibleColumns = dataStore.getVisibleColumns();
+    const visibleColumnsConfig = dataStore.getVisibleColumnsConfig();
+    const searchableColumnsConfig = dataStore.getSearchableColumnsConfig();
+
+    const data = dataStore.getData();
+    const showSerial = options.table.showSerial;
+    const serialWidth = options.table.serialWidth;
+    const showDataList = options.table.showDataList;
+    const optionsWidth = options.table.optionsWidth;
+
+    const dataListColumns = dataStore.getDataListColumns();
+
+    const showTotals = options.table.showTotals;
+    const showBalance = options.table.showBalance;
+    const showFilterVerticalForm = options.showFilterVerticalForm;
+    const showSearch = options.firstRow.showSearch;
+    const showTotalsForSearch = options?.table?.showTotalsForSearch;
+    const showBalanceForSearch = options?.table?.showBalanceForSearch;
+    const showFooterRows = options?.table?.showFooterRows;
+
+    const defaultRow = dataStore.getDefaultRow();
+    const showSave = options?.table?.showSave;
+    const showActions = options?.table?.showActions;
+    const showFooter = options?.table?.showFooter;
+
+    // debugger;
+    buildFullUI({
+        containerEl: containerEl,
+        inTableName: inConfig.tableName,
+        inIsShowHeaderRow: showSearch,
+        inUiClasses: uiClasses
+    });
+    // debugger;
+    const tableBody = dom.getTableBody(containerEl);
+    // console.log("tableBody : ", tableBody);
+
+    if (showFilterVerticalForm) {
+        const searchForm = createForm({
+            inVisibleColumnsConfig: visibleColumnsConfig,
+            inSearchableColumnsConfig: searchableColumnsConfig,
+            inServices: services,
+            inConfig
+        });
+
+        containerEl.prepend(searchForm);
+    };
+
+    buildHeader({
+        inContainerEl: containerEl,
+        inDom: dom,
+        inThClassName: uiClasses?.thead?.thClass,
+        inTrClassName: uiClasses?.thead?.trClass,
+        inThSerialClassName: uiClasses?.thead?.thSerialClass,
+        inVisibleColumnsConfig: visibleColumnsConfig,
+        inShowSerial: showSerial,
+        inSerialWidth: serialWidth,
+        inShowActions: showActions || showSave,
+        inOptionsWidth: optionsWidth,
+    });
+
+    buildBody({
+        inDataStore: dataStore,
+        inContainerEl: containerEl,
+        inDom: dom,
+        inVisibleColumnsConfig: visibleColumnsConfig,
+        inShowSerial: showSerial,
+        inShowActions: showActions,
+        inServices: services,
+        inEndPoints: endPoints,
+        inConfig,
+        inTableBody: tableBody,
+        inData: data
+    });
+
+    if (showFooter) {
+        buildFooter({
+            inServices: services,
+            inEndPoints: endPoints,
+            inTableFooter: dom.getTableFooter(containerEl),
+            inOptions: options,
+            inVisibleColumnsConfig: visibleColumnsConfig,
+            inData: data,
+            inShowSerial: showSerial,
+            inShowTotals: showTotals,
+            inShowBalance: showBalance,
+            inShowTotalsForSearch: showTotalsForSearch,
+            inShowBalanceForSearch: showBalanceForSearch,
+            inShowFooterRows: showFooterRows,
+            inDefaultRow: defaultRow,
+            keys: visibleColumns,
+            inDom: dom,
+            inShowDataList: showDataList,
+            inDataStore: dataStore,
+            inShowSave: showSave,
+            inTableBody: tableBody,
+            inShowActions: showActions
+        });
+    };
+
+    if (showDataList) {
+        buildDataLists({
+            inContainerEl: containerEl,
+            inDataStore: dataStore,
+            inDom: dom,
+            inData: data,
+            inDataListColumns: dataListColumns
+        });
+    };
+
+    if (showSearch) {
+        // for search vertical
+        SearchFuncs({ inContainerEl: containerEl });
+    };
+
+    setFocus({ inContainerEl: containerEl });
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/AfterMutation/V3/index.js

@@ -0,0 +1,35 @@
+// import { buildBody } from "../../BuildBodyVersions/V4/start.js";
+import { buildBody } from "../../BuildBodyVersions/V5/start.js";
+
+const startFunc = async ({
+    inDataStore,
+    inServices,
+    inEndPoints,
+    inTableBody,
+    inVisibleColumnsConfig,
+    inShowSerial,
+    inShowActions
+}) => {
+    try {
+        const dataFromFetch = await inServices.actions.getData({
+            inEndPoint: inEndPoints.read
+        });
+
+        inDataStore.setData(dataFromFetch);
+
+        const dataToShow = inDataStore.getData();
+
+        buildBody({
+            inData: dataToShow, inDataStore,
+            inTableBody, inServices,
+            inVisibleColumnsConfig,
+            inShowSerial, inShowActions,
+            inEndPoints
+        })
+    } catch (err) {
+        console.error(err);
+        return;
+    };
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V5/handlerFuncs/V7/buildDeleteHandler.js

@@ -0,0 +1,57 @@
+// import { afterMutation } from "../../afterMutation.js";
+import { deleteFromServer } from "./deleteFromServer.js";
+import { runDeleteCallback } from "./runDeleteCallback.js";
+import { showToast } from "./showToast.js";
+
+// import afterMutation from "../../../../AfterMutation/V2/index.js";
+
+import afterMutation from "../../../../AfterMutation/V3/index.js";
+
+const buildDeleteHandler = ({
+    inServices,
+    inEndPoints,
+    inConfig,
+    inDataStore,
+    inVisibleColumnsConfig,
+    inShowSerial,
+    inTableBody,
+    inShowActions
+}) => {
+    const refreshAfterDelete = () => {
+        afterMutation({
+            inDataStore,
+            inServices,
+            inEndPoints,
+            inTableBody,
+            inVisibleColumnsConfig,
+            inShowSerial,
+            inShowActions
+        });
+    };
+
+    const localDeleteHandler = async ({ presentPk }) => {
+        const userConfirm = confirm(`Are you sure to delete row ${presentPk} ?`);
+
+        if (userConfirm === false) return;
+
+        const fromDelete = await deleteFromServer({ presentPk, inEndPoints, inServices });
+
+        if (fromDelete.ok) {
+            const fromClient = await runDeleteCallback({
+                presentPk, inOnDelete: inConfig?.callbacks?.table?.onDelete
+            });
+
+            if (fromClient.ok) {
+                refreshAfterDelete();
+
+                showToast({
+                    message: `Row ${presentPk} deleted successfully`
+                });
+            };
+        };
+    };
+
+    return localDeleteHandler;
+};
+
+export default buildDeleteHandler;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V5/start.js

@@ -0,0 +1,41 @@
+import { buildRow } from "./buildRow.js";
+import buildDeleteHandler from "./handlerFuncs/V7/buildDeleteHandler.js";
+
+const buildBody = ({ inDataStore, inDom, inShowSerial = false,
+    inVisibleColumnsConfig, inShowActions, inServices,
+    inEndPoints, inConfig, inTableBody, inData
+}) => {
+    const dataToShow = inData;
+    const tableBody = inTableBody;
+
+    if (tableBody) {
+        tableBody.innerHTML = '';
+    };
+
+    const handleDelete = buildDeleteHandler({
+        inServices,
+        inEndPoints,
+        inConfig,
+        inDataStore,
+        inVisibleColumnsConfig,
+        inShowSerial,
+        inTableBody: tableBody,
+        inShowActions
+    });
+
+    if (dataToShow) {
+        dataToShow.forEach((item, index) => {
+            const row = buildRow({
+                item, index, inVisibleColumnsConfig,
+                inShowSerial,
+                inShowActions,
+                onDeleteFunc: handleDelete
+            });
+
+            tableBody.appendChild(row);
+        });
+
+    };
+};
+
+export { buildBody };

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/CreateDataCell/applyRightAlign.js

@@ -0,0 +1,15 @@
+const applyRightAlign = ({
+    td,
+    inCellConfig = {}
+}) => {
+
+    const rightAlign =
+        inCellConfig.rightAlign || false;
+
+    if (rightAlign) {
+        td.classList.add("text-right");
+    };
+
+};
+
+export default applyRightAlign;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/CreateDataCell/applyWidth.js

@@ -0,0 +1,12 @@
+const applyWidth = ({
+    td,
+    inWidth
+}) => {
+
+    if (inWidth) {
+        td.style.width = inWidth;
+    };
+
+};
+
+export default applyWidth;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/CreateDataCell/createTd.js

@@ -0,0 +1,11 @@
+const createTd = () => {
+
+    const td = document.createElement("td");
+
+    td.className = "px-4 py-2 border";
+
+    return td;
+
+};
+
+export default createTd;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/CreateDataCell/getDisplayValue.js

@@ -0,0 +1,23 @@
+const getDisplayValue = ({
+    value,
+    inCellConfig = {}
+}) => {
+
+    const showThousandsSeperator =
+        inCellConfig.showThousandsSeperator || false;
+
+    let displayValue =
+        (value ?? "").toString();
+
+    if (showThousandsSeperator) {
+        displayValue =
+            Number(value || 0)
+                .toLocaleString("en-IN");
+
+    };
+
+    return displayValue;
+
+};
+
+export default getDisplayValue;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/CreateDataCell/index.js

@@ -0,0 +1,43 @@
+import createTd from "./createTd.js";
+import applyWidth from "./applyWidth.js";
+import applyRightAlign from "./applyRightAlign.js";
+import getDisplayValue from "./getDisplayValue.js";
+import setCellContent from "./setCellContent.js";
+
+const createDataCell = ({
+    value,
+    searchValue,
+    inCellConfig = {}
+}) => {
+
+    const width =
+        inCellConfig.width;
+
+    const td = createTd();
+
+    applyWidth({
+        td,
+        inWidth: width
+    });
+
+    applyRightAlign({
+        td,
+        inCellConfig
+    });
+
+    const displayValue = getDisplayValue({
+        value,
+        inCellConfig
+    });
+
+    setCellContent({
+        td,
+        displayValue,
+        searchValue
+    });
+
+    return td;
+
+};
+
+export default createDataCell;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/CreateDataCell/setCellContent.js

@@ -0,0 +1,24 @@
+import { highlight } from "./highlight.js";
+
+const setCellContent = ({
+    td,
+    displayValue,
+    searchValue
+}) => {
+
+    if (searchValue === undefined) {
+
+        td.innerHTML = displayValue;
+
+    } else {
+
+        td.innerHTML = highlight({
+            text: displayValue,
+            searchValue
+        });
+
+    };
+
+};
+
+export default setCellContent;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/buildBody.js

@@ -0,0 +1,19 @@
+import { buildRow } from "./buildRow.js";
+
+const buildBody = ({ inDataStore, inContainerEl, inDom, options }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    const data = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+debugger;
+    tableBody.innerHTML = "";
+
+    data.forEach((item, index) => {
+        const row = buildRow({
+            item, index, columns, options,
+            inShowThousandsSeperator
+        });
+        tableBody.appendChild(row);
+    });
+};
+
+export { buildBody };

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/buildRow.js

@@ -0,0 +1,60 @@
+import { createRow } from "./createRow.js";
+import { createIndexCell } from "./createIndexCell.js";
+import createDataCell from "./CreateDataCell/index.js";
+import { createOptionsCell } from "./createOptionsCell.js";
+
+const buildRow = ({ item, index, inVisibleColumnsConfig, searchValue,
+    inShowSerial, inShowActions = false, onDeleteFunc, onEditFunc
+}) => {
+    const tr = createRow({
+        inClassName: "border-t hover:bg-blue-100 odd:bg-gray-100",
+        inPk: item?.pk
+    });
+
+    appendSerialCell({ tr, inShowSerial, index });
+
+    appendDataCells({
+        tr, item, columns: inVisibleColumnsConfig,
+        searchValue
+    });
+
+    if (inShowActions) {
+        appendActionCell({
+            tr, item, index, searchValue, onDeleteFunc,
+            onEditFunc
+        });
+    };
+
+    return tr;
+};
+
+const appendSerialCell = ({ tr, inShowSerial, index, inWidth }) => {
+    if (inShowSerial) {
+        tr.appendChild(createIndexCell({ index, inWidth }));
+    };
+};
+
+const appendDataCells = ({ tr, item, columns, searchValue }) => {
+    for (const [key, value] of Object.entries(columns)) {
+        tr.appendChild(createDataCell({
+            value: item[value.columnName],
+            searchValue,
+            inCellConfig: value.cellConfig
+        }));
+    };
+};
+
+const appendActionCell = ({ tr, item, index, inShowActions,
+    searchValue, onDeleteFunc, onEditFunc }) => {
+    // debugger;
+
+    tr.appendChild(
+        createOptionsCell({
+            item,
+            index,
+            onDeleteFunc, onEditFunc
+        })
+    );
+};
+
+export { buildRow };

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/createIndexCell.js

@@ -0,0 +1,14 @@
+const createIndexCell = ({ index, inWidth }) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border text-right";
+    td.textContent = index + 1;
+    td.style.width = "50px";
+
+    if (inWidth) {
+        td.style.width = inWidth;
+    };
+
+    return td;
+};
+
+export { createIndexCell };

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/createOptionsCell.js

@@ -0,0 +1,21 @@
+const createOptionsCell = ({ item, index, onDeleteFunc, onEditFunc }) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border flex gap-2";
+
+    const editBtn = document.createElement("button");
+    editBtn.textContent = "Edit";
+    editBtn.className = "px-2 py-1 bg-yellow-400 text-white rounded";
+    editBtn.onclick = () => onEditFunc?.({ item, index, presentPk: item.pk });
+    // debugger;
+    const deleteBtn = document.createElement("button");
+    deleteBtn.textContent = "Delete";
+    deleteBtn.className = "px-2 py-1 bg-red-500 text-white rounded";
+    deleteBtn.onclick = () => onDeleteFunc?.({ item, index, presentPk: item.pk });
+
+    td.appendChild(editBtn);
+    td.appendChild(deleteBtn);
+
+    return td;
+};
+
+export { createOptionsCell };

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/handlerFuncs/V8/Edit/buildEditHandler.js

@@ -0,0 +1,37 @@
+import runEditCallback from "./runEditCallback.js";
+import { showToast } from "./showToast.js";
+
+const buildEditHandler = ({
+    inServices,
+    inEndPoints,
+    inConfig,
+    inDataStore,
+    inVisibleColumnsConfig,
+    inShowSerial,
+    inTableBody
+}) => {
+    const localDeleteHandler = async ({ item, index, presentPk }) => {
+
+        debugger;
+        const userConfirm = confirm(`Are you sure to alter row ${presentPk} ?`);
+
+        if (userConfirm === false) return;
+
+        const fromClient = await runEditCallback({
+            item, index, presentPk,
+            inOnEdit: inConfig?.callbacks?.table?.onEdit
+        });
+
+        // if (fromClient.ok) {
+        //     // refreshAfterDelete();
+
+        //     showToast({
+        //         message: `Row ${presentPk} edited`
+        //     });
+        // };
+    };
+
+    return localDeleteHandler;
+};
+
+export default buildEditHandler;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/handlerFuncs/V8/Edit/runEditCallback.js

@@ -0,0 +1,9 @@
+const runEditCallback = async ({ item, index, presentPk, inOnEdit }) => {
+    if (inOnEdit) {
+        return await inOnEdit({ item, index, presentPk });
+    };
+
+    return { ok: true };
+};
+
+export default runEditCallback;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/handlerFuncs/V8/Edit/showToast.js

@@ -0,0 +1,22 @@
+const showToast = ({ message }) => {
+    const toastDiv = document.createElement("div");
+
+    toastDiv.innerHTML = message;
+
+    toastDiv.style.position = "fixed";
+    toastDiv.style.top = "20px";
+    toastDiv.style.right = "20px";
+    toastDiv.style.backgroundColor = "green";
+    toastDiv.style.color = "white";
+    toastDiv.style.padding = "10px 20px";
+    toastDiv.style.borderRadius = "5px";
+    toastDiv.style.zIndex = "1000";
+
+    document.body.appendChild(toastDiv);
+
+    setTimeout(() => {
+        toastDiv.remove();
+    }, 3000);
+};
+
+export { showToast };

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/handlerFuncs/V8/buildDeleteHandler.js

@@ -0,0 +1,53 @@
+// import { afterMutation } from "../../afterMutation.js";
+import { deleteFromServer } from "./deleteFromServer.js";
+import runDeleteCallback from "./runDeleteCallback.js";
+import { showToast } from "./showToast.js";
+
+import afterMutation from "../../../../AfterMutation/V2/index.js";
+
+const buildDeleteHandler = ({
+    inServices,
+    inEndPoints,
+    inConfig,
+    inDataStore,
+    inVisibleColumnsConfig,
+    inShowSerial,
+    inTableBody
+}) => {
+    const refreshAfterDelete = () => {
+        afterMutation({
+            inDataStore,
+            inServices,
+            inEndPoints,
+            inTableBody,
+            inVisibleColumnsConfig,
+            inShowSerial
+        });
+    };
+
+    const localDeleteHandler = async ({ presentPk }) => {
+        const userConfirm = confirm(`Are you sure to delete row ${presentPk} ?`);
+
+        if (userConfirm === false) return;
+
+        const fromDelete = await deleteFromServer({ presentPk, inEndPoints, inServices });
+
+        if (fromDelete.ok) {
+            const fromClient = await runDeleteCallback({
+                presentPk, inOnDelete: inConfig?.callbacks?.table?.onDelete
+            });
+
+            if (fromClient.ok) {
+                refreshAfterDelete();
+
+                showToast({
+                    message: `Row ${presentPk} deleted successfully`
+                });
+            };
+        };
+    };
+
+    return localDeleteHandler;
+};
+
+export default buildDeleteHandler;

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/handlerFuncs/V8/deleteFromServer.js

@@ -0,0 +1,8 @@
+const deleteFromServer = async ({ presentPk, inServices, inEndPoints }) => {
+    return await inServices.actions.table.delete({
+        inEndPoint: inEndPoints.delete,
+        id: presentPk
+    });
+};
+
+export { deleteFromServer };

package/bin/table/v3/commands/table/template/v11/BuildTableVersions/V4/BuildBodyVersions/V6/handlerFuncs/V8/runDeleteCallback.js

@@ -0,0 +1,11 @@
+const runDeleteCallback = async ({ presentPk, inOnDelete }) => {
+    if (inOnDelete) {
+        return await inOnDelete({
+            toDeletePk: presentPk
+        });
+    };
+
+    return { ok: true };
+};
+
+export default runDeleteCallback;