brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implemented column ordering in bin cable estimator

Browse source
This commit is contained in:
Carter 2025-05-22 12:29:51 -06:00
parent 8143ef4c37
commit c058b4179c
3 changed files with 83 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

115
src/cableEstimator/cableEstimator.tsx
View file

@ -61,6 +61,8 @@ export default function CableEstimator() {
const [tablePage, setTablePage] = useState(0)
const [pageSize, setPageSize] = useState(10)
const [rowCount, setRowCount] = useState(0)
const [orderBy, setOrderBy] = useState<string>("")
const [order, setOrder] = useState<"asc" | "desc">("asc")
const [selectedBin, setSelectedBin] = useState<jsonBin | undefined>();
const [quoteOpen, setQuoteOpen] = useState(false);
const [useCustomBin, setUseCustomBin] = useState(false);
@ -106,47 +108,57 @@ export default function CableEstimator() {
const [loading, setLoading] = useState(false)
const columns: Column<jsonBin>[] = [
{
title: "Manufacturer",
render: (row: jsonBin) => <Box padding={2}>{row.Manufacturer}</Box>
},
{
title: "Model",
render: (row: jsonBin) => <Box padding={2}>{row.Model}</Box>
},
{
title: "Capacity",
render: (row: jsonBin) => <Box padding={2}>{row.Capacity}</Box>
},
{
title: "Hopper Angle",
render: (row: jsonBin) => <Box padding={2}>{row.HopperAngle}</Box>
},
{
title: "Diameter " + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Diameter).toFixed(2)}</Box>
},
{
title: "Sidewall" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Sidewall).toFixed(2)}</Box>
},
{
title: "Peak Height" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Peak).toFixed(2)}</Box>
},
{
title: "Eave To Peak" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.EaveToPeak).toFixed(2)}</Box>
},
{
title: "Roof Angle",
render: (row: jsonBin) => <Box padding={2}>{row.RoofAngle}</Box>
},
{
title: "Rings",
render: (row: jsonBin) => <Box padding={2}>{row.Rings}</Box>
}
]
{
title: "Manufacturer",
sortKey: "Manufacturer",
render: (row: jsonBin) => <Box padding={2}>{row.Manufacturer}</Box>
},
{
title: "Model",
sortKey: "Model",
render: (row: jsonBin) => <Box padding={2}>{row.Model}</Box>
},
{
title: "Capacity",
sortKey: "Capacity",
render: (row: jsonBin) => <Box padding={2}>{row.Capacity}</Box>
},
{
title: "Hopper Angle",
sortKey: "HopperAngle",
render: (row: jsonBin) => <Box padding={2}>{row.HopperAngle}</Box>
},
{
title: "Diameter " + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
sortKey: "Diameter",
render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Diameter).toFixed(2)}</Box>
},
{
title: "Sidewall" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
sortKey: "Sidewall",
render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Sidewall).toFixed(2)}</Box>
},
{
title: "Peak Height" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
sortKey: "PeakHeight",
render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Peak).toFixed(2)}</Box>
},
{
title: "Eave To Peak" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
sortKey: "EaveToPeak",
render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.EaveToPeak).toFixed(2)}</Box>
},
{
title: "Roof Angle",
sortKey: "RoofAngle",
render: (row: jsonBin) => <Box padding={2}>{row.RoofAngle}</Box>
},
{
title: "Rings",
sortKey: "Rings",
render: (row: jsonBin) => <Box padding={2}>{row.Rings}</Box>
}
]
useEffect(()=>{
setLoading(true)
@ -154,6 +166,21 @@ export default function CableEstimator() {
let clone: jsonBin[] = cloneDeep(binOptions)
//having the search filter in here is quite inefficient as it will filter each time you change pages as well
//TODO: re-work the filter so it only filters when the search is changed
//
clone.sort((a, b) => {
if (Object.keys(a).includes(orderBy)) {
let by = orderBy as keyof jsonBin
if (typeof(a[by]) === "string") {
// return a.localeCompare(b)
return (a[by].localeCompare(b[by] as string))
}
return ((b[by] as any) - (a[by] as any))
}
return 0
})
if (order === "desc") clone.reverse()
if(tableSearch !== ""){
//filter the data in the cloned list
clone = clone.filter(bin => {
@ -175,7 +202,7 @@ export default function CableEstimator() {
let rows = clone.splice(tablePage * pageSize, pageSize)
setDisplayedRows(rows)
setLoading(false)
},[binOptions, tablePage, pageSize, tableSearch])
},[binOptions, tablePage, pageSize, tableSearch, orderBy, order])
const binOpTable = () => {
return (
@ -193,6 +220,10 @@ export default function CableEstimator() {
handleRowsPerPageChange={(e) => {setPageSize(e.target.value)}}
rows={displayedRows}
total={rowCount}
order={order}
setOrder={setOrder}
orderBy={orderBy}
setOrderBy={setOrderBy}
/>
);
};

10
src/common/ResponsiveTable.tsx
View file

@ -385,20 +385,20 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
}
const columnClick = (column: Column<T>) => {
const sortKey = column.sortKey ? column.sortKey : column.title
console.log(column.sortKey)
const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
// console.log(column.sortKey)
if (setOrderBy) setOrderBy(sortKey)
if (setOrder && order) setOrder(order === "asc" ? "desc" : "asc")
}
const showOrderIcon = (column: Column<T>) => {
if (!orderBy) return
const sortKey = column.sortKey ? column.sortKey : column.title
const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
if (sortKey === orderBy) {
if (order === "asc") {
return <ArrowDownward/>
return <ArrowDownward fontSize="small"/>
} else {
return <ArrowUpward/>
return <ArrowUpward fontSize="small"/>
}
}
return null;

10
src/pages/Devices.tsx
View file

@ -301,7 +301,7 @@ export default function Devices() {
let columns: Column<Device>[] = [
{
title: "State",
sortKey: "state",
// sortKey: "state",
render: (device: Device) => {
const status = device.status ?? pond.DeviceStatus.create()
const deviceStateHelper = getDeviceStateHelper(status.state);
@ -370,8 +370,8 @@ export default function Devices() {
if (hasPlenums) {
columns.push({
title: "Plenum",
sortKey: "hi",
disableSort: true,
// sortKey: "hi",
// disableSort: true,
render: (device: Device) => {
if (device.status.plenum?.temperature) {
return (
@ -390,8 +390,8 @@ export default function Devices() {
if (hasSen5x) {
columns.push({
title: "Sen5X",
sortKey: "hi",
disableSort: true,
// sortKey: "hi",
// disableSort: true,
render: (device: Device) => {
if (device.status.sen5x?.temperature) {
return (