diff --git a/dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx b/dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx index a846552..c2f08ce 100644 --- a/dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx +++ b/dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx @@ -2,9 +2,10 @@ import {DataGrid} from '@mui/x-data-grid'; import {useContext, useEffect, useState} from "react"; import {deleteRequest, getRequest} from "@/common/utils/RequestUtil.js"; import {ProjectContext} from "@/states/Dashboard/contexts/Project"; -import {Button, Stack, TextField} from "@mui/material"; +import {Button, Link, Stack, TextField, Typography} from "@mui/material"; import {Search} from "@mui/icons-material"; import columns from "./columns.jsx"; +import LicenseDialog from "@/states/Dashboard/pages/Licenses/components/LicenseDialog/index.js"; const LOCAL_STORAGE_KEY_PAGINATION = 'licenses_table_pagination'; const LOCAL_STORAGE_KEY_COLUMNS = 'licenses_table_columns'; @@ -21,6 +22,11 @@ export const Licenses = () => { 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 [dialogOpen, setDialogOpen] = useState(false); + + const [editLicenseObj, setEditLicenseObj] = useState(null); + const [switchToLicenseKey, setSwitchToLicenseKey] = useState(null); + const fetchLicenses = async () => { setIsLoading(true); try { @@ -28,6 +34,17 @@ export const Licenses = () => { setRows(data?.licenses.map((license) => ({id: license.key, ...license})) || []); setPaginationModel(prev => ({...prev, rowCount: data.total})); setIsLoading(false); + + if (switchToLicenseKey) { + setTimeout(() => { + const row = document.querySelector(`[data-id="${switchToLicenseKey}"]`); + if (row) { + row.scrollIntoView({behavior: 'smooth', block: 'center'}); + row.click(); + } + setSwitchToLicenseKey(null); + }, 100); + } } catch (e) { console.error(e); setIsLoading(false); @@ -52,14 +69,25 @@ export const Licenses = () => { } } - const handlePaginationModelChange = (model) => setPaginationModel(prev => ({...prev, page: model.page, - pageSize: model.pageSize})); + const editLicense = (licenseKey) => { + setEditLicenseObj(licenseKey); + setDialogOpen(true); + } - const handleColumnWidthChange = (params) => setColumnSettings((prev) => ({...prev, - [params.colDef.field]: params.width})); + const handlePaginationModelChange = (model) => setPaginationModel(prev => ({ + ...prev, page: model.page, + pageSize: model.pageSize + })); - const getColumnsWithWidth = () => columns(deleteLicense).map(column => ({...column, - width: columnSettings[column.field] || column.width})); + const handleColumnWidthChange = (params) => setColumnSettings((prev) => ({ + ...prev, + [params.colDef.field]: params.width + })); + + const getColumnsWithWidth = () => columns(deleteLicense, editLicense).map(column => ({ + ...column, + width: columnSettings[column.field] || column.width + })); const updateDisplayedColumns = (columns) => { const newColumns = Object.keys(columns).filter(column => !columns[column]); @@ -67,13 +95,26 @@ export const Licenses = () => { localStorage.setItem(LOCAL_STORAGE_KEY_DISPLAYED_COLUMNS, JSON.stringify(newColumns)); } + const switchToEndPage = async (licenseKey) => { + await fetchLicenses(); + setTimeout(() => { + setPaginationModel(prev => ({...prev, page: Math.ceil(prev.rowCount / prev.pageSize)})); + }, 100); + setSwitchToLicenseKey(licenseKey); + } + return ( + setDialogOpen(false)} editLicense={editLicenseObj} + switchToEnd={switchToEndPage} setEditLicense={setEditLicenseObj}/> }}/> - + + { sx={{display: 'grid', gridTemplateRows: 'auto 1fr auto'}} pageSizeOptions={[10, 25, 50]} columnVisibilityModel={disabledColumns.reduce((acc, column) => ({...acc, [column]: false}), {})} onColumnVisibilityModelChange={updateDisplayedColumns} + slots={{ + noRowsOverlay: () => + No licenses created. setDialogOpen(true)}> + Create one + + }} onColumnWidthChange={handleColumnWidthChange}/> );