Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 71x 5540x 71x 280x 280x 280x 280x 280x 280x 612x 280x 280x 34x 81x 34x 423x 1x | import { FC, useState } from "react";
import { OsFiltering } from "./Filtering";
import { OsTable } from "./Table";
import { Pagination } from "@/components/Pagination";
import { useOsContext } from "./Provider";
import { useOsData, useOsUrl } from "./useOpensearch";
import { OsTableColumn } from "./types";
import { FilterChips } from "./Filtering";
import { useLocalStorage } from "@/hooks/useLocalStorage";
const createLSColumns = (columns: OsTableColumn[]): string[] =>
columns.filter((col) => col.hidden).map((col) => col.field ?? "");
export const OsMainView: FC<{ columns: OsTableColumn[] }> = (props) => {
const context = useOsContext();
const url = useOsUrl();
const osData = useOsData();
const currentTab = osData.state.tab;
const [localStorageCol, setLocalStorageCol] = useLocalStorage("osColumns", {
spas: createLSColumns(props.columns),
waivers: createLSColumns(props.columns),
});
const initializeColumns = (columns: OsTableColumn[], hiddenFields: string[] = []) =>
columns.map((col) => ({
...col,
hidden: hiddenFields.includes(col.field),
locked: col.locked ?? false,
}));
const [osColumns, setOsColumns] = useState(() => ({
spas: initializeColumns(props.columns, localStorageCol.spas),
waivers: initializeColumns(props.columns, localStorageCol.waivers),
}));
const onToggle = (field: string) => {
setLocalStorageCol((prev) => ({
...prev,
[currentTab]: prev[currentTab].includes(field)
? prev[currentTab].filter((x) => x !== field)
: [...prev[currentTab], field],
}));
setOsColumns((prev) => ({
...prev,
[currentTab]: prev[currentTab].map((col) =>
col.field === field ? { ...col, hidden: !col.hidden } : col,
),
}));
};
return (
<div className="flex flex-col">
<div className="w-full my-2 max-w-screen-xl self-center px-4 lg:px-8">
<OsFiltering onToggle={onToggle} columns={osColumns[currentTab]} />
<FilterChips />
</div>
<div className="px-4 lg:px-8">
<OsTable onToggle={onToggle} columns={osColumns[currentTab]} />
<Pagination
pageNumber={url.state.pagination.number}
count={context.data?.total?.value || 0}
pageSize={url.state.pagination.size}
onPageChange={(number) =>
url.onSet((s) => ({
...s,
pagination: { ...s.pagination, number },
}))
}
onSizeChange={(size) =>
url.onSet((s) => ({
...s,
pagination: { number: 0, size },
}))
}
/>
</div>
</div>
);
};
export * from "./useOpensearch";
export * from "./types";
export * from "./Table";
export * from "./Filtering";
export * from "./Provider";
export * from "./Settings";
|