Finished initial filtering by item group.

This commit is contained in:
Ben Nilsen 2025-10-31 11:31:55 -04:00
parent a4ecc8bb54
commit b9cec8c7cb

View File

@ -3,11 +3,11 @@
"docstatus": 0,
"doctype": "Custom HTML Block",
"html": "<div class=inv-workspace id=inv-workspace>\n <div class=filter-container>\n <h4>Filters</h4>\n <select id=group-select>\n <option value=\"\" disabled selected hidden>Item Group</option>\n </select>\n </div>\n <div class=table-container>\n <h4>Items</h4>\n <div class=\"table table-bordered table-condensed\" id=\"item_table\"></div>\n </div>\n</div>",
"modified": "2025-10-30 16:19:26.461685",
"modified": "2025-10-31 11:30:29.271499",
"name": "Inventory Status Workspace",
"private": 0,
"roles": [],
"script": "var warehouse_data;\n\nfrappe.call({\n method: \"uberleben_custom.api.get_item_groups\",\n callback: function(r) {setItemGroupSelect(r.message);}\n});\n\nfrappe.call({\n method: \"uberleben_custom.api.get_warehouse_data\",\n callback: function(r) {\n warehouse_data = r.message;\n }\n});\nfrappe.call({\n method: \"uberleben_custom.api.get_item_per_wh\",\n args: {\n filters: {}\n },\n callback: function(r){\n if (r.message) {\n populateItemTable(r.message);\n }\n }\n});\n\nfunction setItemGroupSelect(groupNames) {\n let $group_select = $(`#group-select`, root_element);\n for (const groupName of groupNames) {\n let option = `<option value=${groupName}>${groupName}</option>`;\n $group_select.append(option);\n }\n}\n\nfunction toggleDetails($rowId) {\n console.log($rowId.attr(\"detail\"));\n if ($rowId.attr(\"detail\")) {\n $rowId.removeAttr(\"detail\");\n }\n else {\n $rowId.attr(\"detail\", true);\n }\n}\n\nfunction toggleInnerTable($tableId) {\n if ($tableId.attr(\"hidden\") != null) {\n $tableId.removeAttr(\"hidden\");\n } else {\n $tableId.attr(\"hidden\", \"\");\n }\n}\n\nfunction generateInnerTableRow(warehouse, number) {\n if (number == 0)\n return \"\"\n return \"<div class=table-cell><em>\"+warehouse+\"</em></div><div class=table-cell>\"+number+\"</div>\";\n}\n\nfunction generateItemTableRow(item, itemGroup, rowId) {\n let row = `<div class=item-table-row id=${rowId}>`;\n row += `<div class=header-cell>${item}</div>`;\n row += `<div class=header-cell>${itemGroup}</div>`;\n row += \"</div>\"\n return row\n}\n\nfunction populateItemTable(items) {\n console.log(\"Prior to building table.\")\n console.log(warehouse_data);\n let $itemTable = $(\"#item_table\", root_element);\n let itemNum = 0;\n let rowNum = 0;\n let tableHTML = \"<div>\";\n\n for (const[item, stock_data] of Object.entries(items)) {\n let itemGroup = stock_data['item_group']\n let rowId = rowNum + \"-row\";\n let rowButtonId = rowId + \"-button\";\n tableHTML += generateItemTableRow(item, itemGroup, rowId);\n for (const[warehouse, number] of Object.entries(stock_data[\"warehouses\"])) {\n let wh = warehouse_data[warehouse];\n if (wh.disabled == 1 || number == 0)\n continue;\n rowId = ++rowNum +\"-row\";\n rowButtonId = rowId + \"-button\";\n if (wh.is_substatus_warehouse == 0) {\n tableHTML += `<div class=outer-table-row id=${rowId}>`;\n tableHTML += `<div class=table-cell>${warehouse}</div>`;\n tableHTML += `<div class=table-cell><strong>Sellable Units: </strong> ${number}</div>`;\n if (wh.is_group_warehouse)\n tableHTML += `<div class=\"table-cell button-cell\"><button class=\"info-button\" id=${rowButtonId}>See Breakdown</button></div>`;\n tableHTML += '</div>';\n }\n }\n // Generate Inner Nested Table\n let innerTableId = rowNum + \"-table\";\n let innerHTML = `<div class=inner-table id=${innerTableId} hidden>`;\n console.log(stock_data[\"warehouses\"]);\n for (const[warehouse, number] of Object.entries(stock_data[\"warehouses\"])) {\n console.log(\"inner table\");\n console.log(warehouse);\n let wh = warehouse_data[warehouse];\n console.log(wh);\n console.log(number);\n if (wh.disabled == 1)\n continue;\n if (wh.is_substatus_warehouse == 1 && number > 0) {\n innerHTML += '<div class=inner-table-row>';\n innerHTML += generateInnerTableRow(warehouse, number);\n innerHTML += '</div>';\n }\n }\n innerHTML += \"</div>\";\n tableHTML += innerHTML;\n console.log(innerHTML);\n itemNum++;\n rowNum++;\n }\n\n $itemTable.html(tableHTML);\n \n for (let i=0;i<rowNum;i++) {\n let rowId = i+\"-row\";\n let buttonId = i+\"-row-button\";\n let innerTableId = i+\"-table\";\n let $itemRow = $('#'+rowId, $itemTable);\n let $itemButton = $('#'+buttonId, $itemTable);\n let $innerTable = $('#'+innerTableId, $itemTable)\n if ($itemButton){\n $itemButton.on('click', () => {toggleInnerTable($innerTable)});\n }\n }\n }",
"script": "var warehouse_data;\n\nfrappe.call({\n method: \"uberleben_custom.api.get_item_groups\",\n callback: function(r) {setupItemGroupSelect(r.message);}\n});\n\nfrappe.call({\n method: \"uberleben_custom.api.get_warehouse_data\",\n callback: function(r) {\n warehouse_data = r.message;\n }\n});\n\nfunction updateTable(filters) {\n frappe.call({\n method: \"uberleben_custom.api.get_item_per_wh\",\n args: {\n \"filters\": filters\n },\n callback: function(r){\n if (r.message) {\n populateItemTable(r.message);\n }\n }\n });\n}\nupdateTable(filters={});\n\nfunction updateTableFilters(groupName) {\n if (groupName == \"All Item Groups\") {\n updateTable({});\n return;\n }\n filters = {\"item_group\": groupName};\n updateTable(filters);\n}\n\nfunction setupItemGroupSelect(groupNames) {\n let $group_select = $(`#group-select`, root_element);\n for (const groupName of groupNames) {\n let option = `<option value=\"${groupName}\">${groupName}</option>`;\n $group_select.append(option);\n }\n $group_select.on(\"change\", () => {\n let groupName = $group_select[0].value;\n updateTableFilters(groupName);\n });\n}\n\nfunction toggleDetails($rowId) {\n console.log($rowId.attr(\"detail\"));\n if ($rowId.attr(\"detail\")) {\n $rowId.removeAttr(\"detail\");\n }\n else {\n $rowId.attr(\"detail\", true);\n }\n}\n\nfunction toggleInnerTable($tableId) {\n if ($tableId.attr(\"hidden\") != null) {\n $tableId.removeAttr(\"hidden\");\n } else {\n $tableId.attr(\"hidden\", \"\");\n }\n}\n\nfunction generateInnerTableRow(warehouse, number) {\n if (number == 0)\n return \"\"\n return \"<div class=table-cell><em>\"+warehouse+\"</em></div><div class=table-cell>\"+number+\"</div>\";\n}\n\nfunction generateItemTableRow(item, itemGroup, rowId) {\n let row = `<div class=item-table-row id=${rowId}>`;\n row += `<div class=header-cell>${item}</div>`;\n row += `<div class=header-cell>${itemGroup}</div>`;\n row += \"</div>\"\n return row\n}\n\nfunction populateItemTable(items) {\n let $itemTable = $(\"#item_table\", root_element);\n let itemNum = 0;\n let rowNum = 0;\n let tableHTML = \"<div>\";\n\n for (const[item, stock_data] of Object.entries(items)) {\n let itemGroup = stock_data['item_group']\n let rowId = rowNum + \"-row\";\n let rowButtonId = rowId + \"-button\";\n tableHTML += generateItemTableRow(item, itemGroup, rowId);\n for (const[warehouse, number] of Object.entries(stock_data[\"warehouses\"])) {\n let wh = warehouse_data[warehouse];\n if (wh.disabled == 1 || number == 0)\n continue;\n rowId = ++rowNum +\"-row\";\n rowButtonId = rowId + \"-button\";\n if (wh.is_substatus_warehouse == 0) {\n tableHTML += `<div class=outer-table-row id=${rowId}>`;\n tableHTML += `<div class=table-cell>${warehouse}</div>`;\n tableHTML += `<div class=table-cell><strong>Sellable Units: </strong> ${number}</div>`;\n if (wh.is_group_warehouse)\n tableHTML += `<div class=\"table-cell button-cell\"><button class=\"info-button\" id=${rowButtonId}>See Breakdown</button></div>`;\n tableHTML += '</div>';\n }\n }\n // Generate Inner Nested Table\n let innerTableId = rowNum + \"-table\";\n let innerHTML = `<div class=inner-table id=${innerTableId} hidden>`;\n for (const[warehouse, number] of Object.entries(stock_data[\"warehouses\"])) {\n let wh = warehouse_data[warehouse];\n if (wh.disabled == 1)\n continue;\n if (wh.is_substatus_warehouse == 1 && number > 0) {\n innerHTML += '<div class=inner-table-row>';\n innerHTML += generateInnerTableRow(warehouse, number);\n innerHTML += '</div>';\n }\n }\n innerHTML += \"</div>\";\n tableHTML += innerHTML;\n itemNum++;\n rowNum++;\n }\n\n $itemTable.html(tableHTML);\n \n for (let i=0;i<rowNum;i++) {\n let rowId = i+\"-row\";\n let buttonId = i+\"-row-button\";\n let innerTableId = i+\"-table\";\n let $itemRow = $('#'+rowId, $itemTable);\n let $itemButton = $('#'+buttonId, $itemTable);\n let $innerTable = $('#'+innerTableId, $itemTable)\n if ($itemButton){\n $itemButton.on('click', () => {toggleInnerTable($innerTable)});\n }\n }\n }",
"style": ".info-button {\n border: none;\n color: white;\n background-color: var(--btn-primary);\n box-shadow: none;\n font-size: var(--text-base);\n font-weight: var(--weight-regular);\n letter-spacing: 0.02em;\n height: var(--btn-height);\n margin-left: var(--margin-sm, 8px);\n border-radius: var(--border-radius);\n line-height: 1;\n padding: 2px 8px;\n}\n.table-container {\n}\n\n.table {\n display: flex;\n flex-direction: column;\n margin: 10px;\n border: 1px solid;\n border-radius: var(--border-radius);\n}\n\n.header-cell {\n font-weight: bold;\n flex: 1;\n}\n\n.table-cell {\n display: flex;\n flex: 1;\n padding: 5px;\n border-right: 1px solid;\n}\n\n.button-cell {\n display: flex;\n flex: 1;\n justify-content: center;\n}\n\n.table-cell:last-child {\n border-right: none;\n}\n\n.inner-table {\n display: flex;\n flex-direction: column;\n margin: 10px;\n border: 1px solid;\n border-radius: var(--border-radius);\n}\n\n.item-table-row {\n display: flex;\n justify-content: flex-start;\n margin: 5px;\n border-bottom: 1px solid;\n background-color: var(--highlight-color);\n}\n.item-table-row:hover {\n background-color: var(--highlight-color);\n}\n.outer-table-row {\n display: flex;\n margin: 5px;\n justify-content: flex-start;\n}\n.outer-table-row:hover {\n background-color: var(--highlight-color);\n border-radius: var(--border-radius);\n}\n.inner-table-row {\n display: flex;\n justify-content: flex-start;\n}\n.inner-table-row:hover {\n background-color: var(--highlight-color);\n border-radius: var(--border-radius);\n}"
}
]