[ADD] BASE: Toggle js

2024-01-23 15:16:43 +05:30
parent b36fd14520
commit c464bf3195
1 changed files with 67 additions and 0 deletions
--- a/base/static/base/toggleColumn.js
+++ b/base/static/base/toggleColumn.js
@@ -0,0 +1,67 @@
+function toggleColumns(tableId, fieldContainer) {
+    var table = $(`#${tableId}[data-table-name]`)
+    table.hide()
+    var tableTitle = table.attr("data-table-name")
+    let trs = []
+    $.each($(`[data-table-name=${tableTitle}] [data-cell-title]`), function (indexInArray, valueOfElement) {
+        trs.push(`
+            <li class="oh-dropdown__item oh-sticy-dropdown-item">
+                <span>${$(valueOfElement).attr("data-cell-title")}</span> 
+                <span class="oh-table__checkbox">
+                    <input type="checkbox" onchange="hideCells($(this),'${tableTitle}','${fieldContainer}')" value="${$(valueOfElement).attr("data-cell-index")}"/>
+                </span>
+            </li>
+         `)
+    });
+
+    // toggle cells
+    var visibleCells = localStorage.getItem(tableTitle)
+    if (visibleCells && visibleCells != "[]") {
+        table.hide();
+        $("[data-cell-index]").hide();
+    }
+    else {
+        table.show();
+        $("[data-cell-index]").show();
+    }
+
+    trsString = ""
+    for (let tr = 0; tr < trs.length; tr++) {
+        const element = trs[tr];
+        trsString = trsString + element
+    }
+    $(`#${fieldContainer}`).html(trsString);
+    if (visibleCells) {
+        storedIds = JSON.parse(visibleCells)
+        $(`#${fieldContainer} input[type=checkbox]`).prop("checked", false)
+        for (let id = 0; id < storedIds.length; id++) {
+            const element = storedIds[id];
+            $(`#${fieldContainer} input[type=checkbox][value=${element}]`).prop("checked", true)
+            hideCells($(`#${fieldContainer} input[type=checkbox][value=${element}]`), tableTitle, fieldContainer)
+        }
+        $(`[data-table-name][data-table-name=${tableTitle}]`).show();
+    }
+}
+function hideCells(jqElement, tableTitle, fieldContainer) {
+    visibleCells = $(`#${fieldContainer}`).find("input[type=checkbox]:checked")
+    let visibleCellsids = []
+    $(`[data-table-name=${tableTitle}] [data-cell-index]`).hide();
+    $.each(visibleCells, function (indexInArray, valueOfElement) {
+        $(`[data-table-name=${tableTitle}] [data-cell-index=${$(valueOfElement).val()}]`).show();
+        visibleCellsids.push($(valueOfElement).val())
+    });
+    if (jqElement.is(":checked")) {
+        var storedIdsSet = new Set(JSON.parse(localStorage.getItem(tableTitle)) || []);
+        storedIdsSet.add(jqElement.val());
+        var storedIds = Array.from(storedIdsSet);
+        localStorage.setItem(tableTitle, JSON.stringify(storedIds));
+    } else {
+        var storedIds = JSON.parse(localStorage.getItem(tableTitle)) || [];
+        var index = storedIds.indexOf(jqElement.val());
+        if (index !== -1) {
+            storedIds.splice(index, 1);
+            localStorage.setItem(tableTitle, JSON.stringify(storedIds));
+        }
+    }
+    $(`[data-table-name=${tableTitle}][data-table-name]`).show();
+}