smueller/LicenseAPI
1
0
Fork 0
mirror of https://github.com/gnmyt/LicenseAPI.git synced 2026-01-10 10:11:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement LicenseDialog component

Browse Source
This commit is contained in:
Mathias Wagner
2024-07-22 17:22:05 +02:00
parent 930a8994ce
commit e8a2c93038
1 changed files with 56 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
dashboard/src/states/Dashboard/pages/Licenses/Licenses.jsx
View File

@ -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 (
<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>
);