Fix table

This commit is contained in:
koalasat
2025-05-11 16:34:45 +02:00
parent d6609e991e
commit 1287c4454b
2 changed files with 14 additions and 71 deletions

View File

@ -6,9 +6,6 @@ import {
Dialog, Dialog,
Typography, Typography,
Paper, Paper,
ListItemButton,
ListItemText,
ListItemAvatar,
useTheme, useTheme,
CircularProgress, CircularProgress,
IconButton, IconButton,
@ -18,7 +15,6 @@ import {
} from '@mui/material'; } from '@mui/material';
import { import {
DataGrid, DataGrid,
type GridColumnVisibilityModel,
GridPagination, GridPagination,
type GridPaginationModel, type GridPaginationModel,
type GridColDef, type GridColDef,
@ -97,7 +93,6 @@ const BookTable = ({
pageSize: 0, pageSize: 0,
page: 0, page: 0,
}); });
const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({});
const [fullscreen, setFullscreen] = useState(defaultFullscreen); const [fullscreen, setFullscreen] = useState(defaultFullscreen);
const [paymentMethods, setPaymentMethods] = useState<string[]>([]); const [paymentMethods, setPaymentMethods] = useState<string[]>([]);
const [page, setPage] = useState<number>(0); const [page, setPage] = useState<number>(0);
@ -173,42 +168,6 @@ const BookTable = ({
}; };
}, []); }, []);
const robotObj = useCallback((width: number) => {
return {
field: 'maker_nick',
headerName: t('Robot'),
width: width * fontSize,
renderCell: (params: { row: PublicOrder }) => {
const thirdParty = thirdParties[params.row.coordinatorShortAlias];
return (
<ListItemButton
style={{ cursor: 'pointer' }}
onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}}
>
<ListItemAvatar sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}>
<RobotAvatar
hashId={params.row.maker_hash_id}
style={{ width: '3.215em', height: '3.215em' }}
smooth={true}
flipHorizontally={true}
orderType={params.row.type}
statusColor={statusBadgeColor(params.row.maker_status)}
tooltip={t(params.row.maker_status)}
small={true}
/>
</ListItemAvatar>
<ListItemText
primary={params.row.maker_nick ?? thirdParty.longAlias}
sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}
/>
</ListItemButton>
);
},
};
}, []);
const robotSmallObj = useCallback((width: number) => { const robotSmallObj = useCallback((width: number) => {
return { return {
field: 'maker_nick', field: 'maker_nick',
@ -611,7 +570,7 @@ const BookTable = ({
priority: 1, priority: 1,
order: 5, order: 5,
normal: { normal: {
width: fav.mode === 'swap' ? 9.5 : 6.5, width: fav.mode === 'swap' ? 9.5 : 7,
object: amountObj, object: amountObj,
}, },
}, },
@ -630,6 +589,10 @@ const BookTable = ({
width: 6, width: 6,
object: premiumObj, object: premiumObj,
}, },
small: {
width: 4,
object: premiumObj,
},
}, },
payment_method: { payment_method: {
priority: 4, priority: 4,
@ -647,10 +610,6 @@ const BookTable = ({
priority: 5, priority: 5,
order: 1, order: 1,
normal: { normal: {
width: 17.14,
object: robotObj,
},
small: {
width: 5, width: 5,
object: robotSmallObj, object: robotSmallObj,
}, },
@ -712,8 +671,7 @@ const BookTable = ({
} { } {
const useSmall = maxWidth < 70; const useSmall = maxWidth < 70;
const selectedColumns: object[] = []; const selectedColumns: object[] = [];
const columnVisibilityModel: GridColumnVisibilityModel = {}; let width: number = -4;
let width: number = 0;
for (const [key, value] of Object.entries(columnSpecs)) { for (const [key, value] of Object.entries(columnSpecs)) {
// do not use col currency on swaps // do not use col currency on swaps
@ -729,23 +687,18 @@ const BookTable = ({
if (width + colWidth < maxWidth || selectedColumns.length < 2) { if (width + colWidth < maxWidth || selectedColumns.length < 2) {
width = width + colWidth; width = width + colWidth;
selectedColumns.push([colObject(colWidth), value.order]); selectedColumns.push([colObject(colWidth), value.order]);
columnVisibilityModel[key] = true;
} else {
selectedColumns.push([colObject(colWidth), value.order]);
columnVisibilityModel[key] = false;
} }
} }
// sort columns by column.order value // sort columns by column.order value
selectedColumns.sort(function (first, second) { const columns = selectedColumns
.sort(function (first, second) {
return first[1] - second[1]; return first[1] - second[1];
}); })
.map(function (item) {
const columns: Array<GridColDef<GridValidRowModel>> = selectedColumns.map(function (item) {
return item[0]; return item[0];
}); });
setColumnVisibilityModel(columnVisibilityModel);
return { columns, width: maxWidth }; return { columns, width: maxWidth };
}; };
@ -860,17 +813,12 @@ const BookTable = ({
/> />
)} )}
<ClickThroughDataGrid <ClickThroughDataGrid
autoHeight
sx={headerStyleFix} sx={headerStyleFix}
localeText={localeText} localeText={localeText}
rows={filteredOrders} rows={filteredOrders}
getRowId={(params: PublicOrder) => `${String(params.coordinatorShortAlias)}/${params.id}`} getRowId={(params: PublicOrder) => `${String(params.coordinatorShortAlias)}/${params.id}`}
loading={federation.loading} loading={federation.loading}
columns={columns} columns={columns}
columnVisibilityModel={columnVisibilityModel}
onColumnVisibilityModelChange={(newColumnVisibilityModel) => {
setColumnVisibilityModel(newColumnVisibilityModel);
}}
page={page} page={page}
onPageChange={setPage} onPageChange={setPage}
hideFooter={!showFooter} hideFooter={!showFooter}
@ -903,7 +851,6 @@ const BookTable = ({
/> />
)} )}
<ClickThroughDataGrid <ClickThroughDataGrid
autoHeight
sx={headerStyleFix} sx={headerStyleFix}
localeText={localeText} localeText={localeText}
rowHeight={3.714 * theme.typography.fontSize} rowHeight={3.714 * theme.typography.fontSize}
@ -913,10 +860,6 @@ const BookTable = ({
columns={columns} columns={columns}
hideFooter={!showFooter} hideFooter={!showFooter}
slots={gridComponents} slots={gridComponents}
columnVisibilityModel={columnVisibilityModel}
onColumnVisibilityModelChange={(newColumnVisibilityModel) => {
setColumnVisibilityModel(newColumnVisibilityModel);
}}
page={page} page={page}
onPageChange={setPage} onPageChange={setPage}
paginationModel={paginationModel} paginationModel={paginationModel}

View File

@ -208,7 +208,7 @@ const TakeButton = ({
alignItems='flex-start' alignItems='flex-start'
justifyContent='space-evenly' justifyContent='space-evenly'
> >
<Grid item sx={{ width: '12em' }}> <Grid item>
<Tooltip <Tooltip
placement='top' placement='top'
enterTouchDelay={500} enterTouchDelay={500}