diff --git a/dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx b/dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx index f73aa89..bcc586c 100644 --- a/dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx +++ b/dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx @@ -6,46 +6,74 @@ import {Button, Stack, TextField} from "@mui/material"; import {Search} from "@mui/icons-material"; import columns from "./columns.jsx"; +const LOCAL_STORAGE_KEY_PAGINATION = 'licenses_table_pagination'; +const LOCAL_STORAGE_KEY_COLUMNS = 'licenses_table_columns'; +const LOCAL_STORAGE_KEY_DISPLAYED_COLUMNS = 'licenses_table_displayed_columns'; + export const Licenses = () => { const {currentProject} = useContext(ProjectContext); const [isLoading, setIsLoading] = useState(true); const [rows, setRows] = useState([]); - const [pageInfo, setPageInfo] = useState({totalRowCount: 0, totalPages: 0, pageSize: 100, page: 0}); + const [paginationModel, setPaginationModel] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY_PAGINATION)) + || {page: 1, pageSize: 25, rowCount: 0}); + + const [columnSettings, setColumnSettings] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY_COLUMNS)) || {}); + const [disabledColumns, setDisabledColumns] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY_DISPLAYED_COLUMNS)) || []); const fetchLicenses = async () => { setIsLoading(true); try { - const data = await getRequest(`/license/${currentProject.id}/list?limit=${pageInfo.pageSize}&page=${pageInfo.page}`); - + const data = await getRequest(`/license/${currentProject.id}/list?limit=${paginationModel.pageSize}&page=${paginationModel.page}`); setRows(data?.licenses.map((license) => ({id: license.key, ...license})) || []); - setPageInfo(pageInfo => ({totalRowCount: data.total, totalPages: Math.ceil(data.total / pageInfo.pageSize), - pageSize: pageInfo.pageSize, page: pageInfo.page})); + setPaginationModel(prev => ({...prev, rowCount: data.total})); setIsLoading(false); } catch (e) { console.error(e); + setIsLoading(false); } - } - - const onPageChange = async (page) => setPageInfo({...pageInfo, page: page}); + }; useEffect(() => { + localStorage.setItem(LOCAL_STORAGE_KEY_PAGINATION, JSON.stringify(paginationModel)); fetchLicenses(); - }, [pageInfo.page]); + }, [paginationModel.pageSize, paginationModel.page]); + + useEffect(() => { + localStorage.setItem(LOCAL_STORAGE_KEY_COLUMNS, JSON.stringify(columnSettings)); + }, [columnSettings]); + + const handlePaginationModelChange = (model) => setPaginationModel(prev => ({...prev, page: model.page, + pageSize: model.pageSize})); + + const handleColumnWidthChange = (params) => setColumnSettings((prev) => ({...prev, + [params.colDef.field]: params.width})); + + const getColumnsWithWidth = () => columns.map(column => ({...column, + width: columnSettings[column.field] || column.width})); + + const updateDisplayedColumns = (columns) => { + const newColumns = Object.keys(columns).filter(column => !columns[column]); + setDisabledColumns(newColumns); + localStorage.setItem(LOCAL_STORAGE_KEY_DISPLAYED_COLUMNS, JSON.stringify(newColumns)); + } return ( }}/> + InputProps={{startAdornment: }}/> - onPageChange(page.page)} disableColumnMenu - sx={{display: 'grid', gridTemplateRows: 'auto 1f auto'}} /> + ({...acc, [column]: false}), {})} + onColumnVisibilityModelChange={updateDisplayedColumns} + onColumnWidthChange={handleColumnWidthChange}/> ); } \ No newline at end of file