cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor(ocp): resizbale with scrollling added makes more easy to review if table overflows

Browse Source
This commit is contained in:
cowchmonkey@gmail.com
2025-04-14 17:21:29 -05:00
parent 71f1cf0f21
commit d0a19b5589
4 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/production/ocp/LabelLog.tsx
View File

@@ -1,5 +1,3 @@
import { LstCard } from "@/components/extendedUI/LstCard";
// import {useSessionStore} from "@/lib/store/sessionStore"; // import {useSessionStore} from "@/lib/store/sessionStore";
// import {useSettingStore} from "@/lib/store/useSettings"; // import {useSettingStore} from "@/lib/store/useSettings";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
@@ -16,12 +14,12 @@ export default function LabelLog() {
if (isLoading) return <div>Loading</div>; if (isLoading) return <div>Loading</div>;
const labelData = data ? data : []; const labelData = data ? data : [];
return ( return (
<LstCard className="m-2 p-2 min-h-2/5"> <div className="m-2">
<LabelTable <LabelTable
columns={labelolumns} columns={labelolumns}
data={labelData} data={labelData}
//style={style} //style={style}
/> />
</LstCard> </div>
); );
} }

5
frontend/src/components/production/ocp/OcpLogs.tsx
View File

@@ -1,4 +1,3 @@
import { LstCard } from "@/components/extendedUI/LstCard";
import { getOcpLogs } from "@/utils/querys/production/ocpLogs"; import { getOcpLogs } from "@/utils/querys/production/ocpLogs";
import { ocpColumns } from "@/utils/tableData/production/ocpLogs/ocpLogColumns"; import { ocpColumns } from "@/utils/tableData/production/ocpLogs/ocpLogColumns";
import { OcpLogTable } from "@/utils/tableData/production/ocpLogs/ocpLogData"; import { OcpLogTable } from "@/utils/tableData/production/ocpLogs/ocpLogData";
@@ -36,12 +35,12 @@ export default function OcpLogs() {
} }
return ( return (
<LstCard className="m-2 p-2 min-h-2/5"> <div className="m-2">
<OcpLogTable <OcpLogTable
columns={columns} columns={columns}
data={logData} data={logData}
//style={style} //style={style}
/> />
</LstCard> </div>
); );
} }

38
frontend/src/components/production/ocp/OcpPage.tsx
View File

@@ -26,24 +26,37 @@ export default function OCPPage() {
> >
<ResizablePanel> <ResizablePanel>
<ResizablePanelGroup direction="vertical"> <ResizablePanelGroup direction="vertical">
<ResizablePanel> <ResizablePanel
<div style={{ overflow: "auto" }}> style={{
overflow: "auto",
scrollbarWidth: "none",
}}
>
<Lots /> <Lots />
</div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />
<ResizablePanel> <ResizablePanel>
<ResizablePanelGroup direction="horizontal"> <ResizablePanelGroup
<ResizablePanel className="overflow: auto"> direction="horizontal"
<div style={{ overflow: "auto" }}> autoSaveId="ocpPage"
>
<ResizablePanel
//className="text-sm p-4 overflow-scroll"
style={{
overflow: "auto",
scrollbarWidth: "none",
}}
>
<LabelLog /> <LabelLog />
</div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />
<ResizablePanel> <ResizablePanel
<div style={{ overflow: "auto" }}> style={{
overflow: "auto",
scrollbarWidth: "none",
}}
>
<OcpLogs /> <OcpLogs />
</div>
</ResizablePanel> </ResizablePanel>
</ResizablePanelGroup> </ResizablePanelGroup>
</ResizablePanel> </ResizablePanel>
@@ -51,7 +64,10 @@ export default function OCPPage() {
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />
<ResizablePanel defaultSize={25}> <ResizablePanel defaultSize={25}>
<ResizablePanelGroup direction="vertical"> <ResizablePanelGroup
direction="vertical"
autoSaveId="ocpPage"
>
{server[0].value === "usday1vms006" && ( {server[0].value === "usday1vms006" && (
<ResizablePanel className="max-h-[300px]"> <ResizablePanel className="max-h-[300px]">
<WrapperManualTrigger /> <WrapperManualTrigger />

5
frontend/src/utils/tableData/production/labels/labelData.tsx
View File

@@ -25,6 +25,7 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { LstCard } from "@/components/extendedUI/LstCard";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
@@ -55,7 +56,7 @@ export function LabelTable<TData, TValue>({
//console.log(parseInt(style.height.replace("px", "")) - 50); //console.log(parseInt(style.height.replace("px", "")) - 50);
return ( return (
<div> <LstCard>
<div> <div>
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
{data.length === 0 ? ( {data.length === 0 ? (
@@ -169,6 +170,6 @@ export function LabelTable<TData, TValue>({
Next Next
</Button> </Button>
</div> </div>
</div> </LstCard>
); );
} }