Implement LicenseDialog component

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,
+    const editLicense = (licenseKey) => {
-        pageSize: model.pageSize}));
+        setEditLicenseObj(licenseKey);
+        setDialogOpen(true);
+    }
 
-    const handleColumnWidthChange = (params) => setColumnSettings((prev) => ({...prev,
+    const handlePaginationModelChange = (model) => setPaginationModel(prev => ({
-        [params.colDef.field]: params.width}));
+        ...prev, page: model.page,
+        pageSize: model.pageSize
+    }));
 
-    const getColumnsWithWidth = () => columns(deleteLicense).map(column => ({...column,
+    const handleColumnWidthChange = (params) => setColumnSettings((prev) => ({
-        width: columnSettings[column.field] || column.width}));
+        ...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 (
         <Stack>
+            <LicenseDialog open={dialogOpen} onClose={() => setDialogOpen(false)} editLicense={editLicenseObj}
+                           switchToEnd={switchToEndPage} setEditLicense={setEditLicenseObj}/>
 
             <Stack justifyContent="space-between" direction="row" sx={{mb: 2}} alignItems="center">
                 <TextField variant="outlined" size="small" placeholder="Lookup license"
                            InputProps={{startAdornment: <Search sx={{mr: 1}}/>}}/>
-                <Button variant="contained" color="primary">Create license</Button>
+
+                <Button variant="contained" color="primary" onClick={() => setDialogOpen(true)}>
+                    Create license
+                </Button>
             </Stack>
 
             <DataGrid rows={rows} columns={getColumnsWithWidth()} loading={isLoading} paginationMode="server"
@@ -82,6 +123,13 @@ export const Licenses = () => {
                       sx={{display: 'grid', gridTemplateRows: 'auto 1fr auto'}} pageSizeOptions={[10, 25, 50]}
                       columnVisibilityModel={disabledColumns.reduce((acc, column) => ({...acc, [column]: false}), {})}
                       onColumnVisibilityModelChange={updateDisplayedColumns}
+                      slots={{
+                          noRowsOverlay: () => <Stack justifyContent="center" alignItems="center" height="100%">
+                              <Typography variant="h6">No licenses created. <Link sx={{cursor: "pointer"}}
+                                                                                  onClick={() => setDialogOpen(true)}>
+                                  Create one</Link></Typography>
+                          </Stack>
+                      }}
                       onColumnWidthChange={handleColumnWidthChange}/>
         </Stack>
     );