feat: persist table columns - enable in all other tables

This commit is contained in:
maciek
2023-05-03 14:39:18 +02:00
parent ddaebea67d
commit f2ad04e126
14 changed files with 50 additions and 9 deletions
@@ -111,7 +111,7 @@ const MarketBottomPanel = memo(
onMarketClick={onMarketClick}
onOrderTypeClick={onOrderTypeClick}
enforceBottomPlaceholder
id="bottomOrders"
id="marketOrders"
/>
</VegaWalletContainer>
</Tab>
@@ -120,6 +120,7 @@ const MarketBottomPanel = memo(
<TradingViews.Fills
marketId={marketId}
onMarketClick={onMarketClick}
id="marketFills"
/>
</VegaWalletContainer>
</Tab>
@@ -138,6 +139,7 @@ const MarketBottomPanel = memo(
<TradingViews.Positions
onMarketClick={onMarketClick}
noBottomPlaceholder
id="marketPositions"
/>
</VegaWalletContainer>
</Tab>
@@ -147,6 +149,7 @@ const MarketBottomPanel = memo(
pinnedAsset={pinnedAsset}
noBottomPlaceholder
hideButtons
id="marketCollateral"
/>
</VegaWalletContainer>
</Tab>
@@ -159,7 +162,10 @@ const MarketBottomPanel = memo(
<Tabs storageKey="console-trade-grid-bottom">
<Tab id="positions" name={t('Positions')}>
<VegaWalletContainer>
<TradingViews.Positions onMarketClick={onMarketClick} />
<TradingViews.Positions
onMarketClick={onMarketClick}
id="marketPositions"
/>
</VegaWalletContainer>
</Tab>
<Tab id="orders" name={t('Orders')}>
@@ -169,6 +175,7 @@ const MarketBottomPanel = memo(
onMarketClick={onMarketClick}
onOrderTypeClick={onOrderTypeClick}
enforceBottomPlaceholder
id="marketOrders"
/>
</VegaWalletContainer>
</Tab>
@@ -177,12 +184,17 @@ const MarketBottomPanel = memo(
<TradingViews.Fills
marketId={marketId}
onMarketClick={onMarketClick}
id="marketFills"
/>
</VegaWalletContainer>
</Tab>
<Tab id="accounts" name={t('Collateral')}>
<VegaWalletContainer>
<TradingViews.Collateral pinnedAsset={pinnedAsset} hideButtons />
<TradingViews.Collateral
pinnedAsset={pinnedAsset}
hideButtons
id="marketCollateral"
/>
</VegaWalletContainer>
</Tab>
</Tabs>
@@ -53,6 +53,7 @@ export const Portfolio = () => {
<PositionsContainer
onMarketClick={onMarketClick}
noBottomPlaceholder
id="portfolioPositions"
/>
</VegaWalletContainer>
</Tab>
@@ -67,7 +68,10 @@ export const Portfolio = () => {
</Tab>
<Tab id="fills" name={t('Fills')}>
<VegaWalletContainer>
<FillsContainer onMarketClick={onMarketClick} />
<FillsContainer
onMarketClick={onMarketClick}
id="portfolioFills"
/>
</VegaWalletContainer>
</Tab>
<Tab id="ledger-entries" name={t('Ledger entries')}>
@@ -87,7 +91,7 @@ export const Portfolio = () => {
<Tabs storageKey="console-portfolio-bottom">
<Tab id="collateral" name={t('Collateral')}>
<VegaWalletContainer>
<AccountsContainer />
<AccountsContainer id="portfolioCollateral" />
</VegaWalletContainer>
</Tab>
<Tab id="deposits" name={t('Deposits')}>
@@ -13,10 +13,12 @@ export const AccountsContainer = ({
pinnedAsset,
hideButtons,
noBottomPlaceholder,
id,
}: {
pinnedAsset?: PinnedAsset;
hideButtons?: boolean;
noBottomPlaceholder?: boolean;
id?: string;
}) => {
const { pubKey, isReadOnly } = useVegaWallet();
const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
@@ -42,6 +44,7 @@ export const AccountsContainer = ({
return (
<div className="h-full relative">
<AccountManager
id={id}
partyId={pubKey}
onClickAsset={onClickAsset}
onClickWithdraw={openWithdrawalDialog}
@@ -19,6 +19,7 @@ interface AccountManagerProps {
isReadOnly: boolean;
pinnedAsset?: PinnedAsset;
noBottomPlaceholder?: boolean;
id?: string;
}
export const AccountManager = ({
@@ -29,6 +30,7 @@ export const AccountManager = ({
isReadOnly,
pinnedAsset,
noBottomPlaceholder,
id,
}: AccountManagerProps) => {
const gridRef = useRef<AgGridReact | null>(null);
const variables = useMemo(() => ({ partyId }), [partyId]);
@@ -52,6 +54,7 @@ export const AccountManager = ({
return (
<div className="relative h-full">
<AccountTable
id={id}
ref={gridRef}
rowData={error ? [] : data}
onClickAsset={onClickAsset}
+2 -1
View File
@@ -100,6 +100,7 @@ export interface AccountTableProps extends AgGridReactProps {
onClickDeposit?: (assetId: string) => void;
isReadOnly: boolean;
pinnedAsset?: PinnedAsset;
id?: string;
}
export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
@@ -149,7 +150,6 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
(data) => data.asset.id !== pinnedAssetId
)}
defaultColDef={{
flex: 1,
resizable: true,
tooltipComponent: TooltipCellComponent,
sortable: true,
@@ -356,6 +356,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
);
}
}}
flex={1}
/>
}
</AgGrid>
+1
View File
@@ -24,6 +24,7 @@ export const DepositsTable = forwardRef<
>((props, ref) => {
return (
<AgGrid
id="depositTable"
ref={ref}
overlayNoRowsTemplate={t('No deposits')}
defaultColDef={{ flex: 1, resizable: true }}
+3
View File
@@ -6,9 +6,11 @@ import { FillsManager } from './fills-manager';
export const FillsContainer = ({
marketId,
onMarketClick,
id,
}: {
marketId?: string;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
id?: string;
}) => {
const { pubKey } = useVegaWallet();
@@ -25,6 +27,7 @@ export const FillsContainer = ({
partyId={pubKey}
marketId={marketId}
onMarketClick={onMarketClick}
id={id}
/>
);
};
+3
View File
@@ -12,12 +12,14 @@ interface FillsManagerProps {
partyId: string;
marketId?: string;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
id?: string;
}
export const FillsManager = ({
partyId,
marketId,
onMarketClick,
id,
}: FillsManagerProps) => {
const gridRef = useRef<AgGridReact | null>(null);
const scrolledToTop = useRef(true);
@@ -70,6 +72,7 @@ export const FillsManager = ({
return (
<div className="h-full relative">
<FillsTable
id={id}
ref={gridRef}
partyId={partyId}
rowModelType="infinite"
+2 -1
View File
@@ -34,6 +34,7 @@ export type Role = typeof TAKER | typeof MAKER | '-';
export type Props = (AgGridReactProps | AgReactUiProps) & {
partyId: string;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
id?: string;
};
export const FillsTable = forwardRef<AgGridReact, Props>(
@@ -42,7 +43,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
<AgGrid
ref={ref}
overlayNoRowsTemplate={t('No fills')}
defaultColDef={{ flex: 1, resizable: true }}
defaultColDef={{ resizable: true }}
style={{ width: '100%', height: '100%' }}
getRowId={({ data }) => data?.id}
tooltipShowDelay={0}
+2 -1
View File
@@ -49,11 +49,11 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
(props, ref) => {
return (
<AgGrid
id="ledgerTable"
style={{ width: '100%', height: 'calc(100% - 50px)' }}
ref={ref}
tooltipShowDelay={500}
defaultColDef={{
flex: 1,
resizable: true,
sortable: true,
tooltipComponent: TransferTooltipCellComponent,
@@ -203,6 +203,7 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
}
filterParams={dateRangeFilterParams}
filter={DateRangeFilter}
flex={1}
/>
</AgGrid>
);
@@ -6,9 +6,11 @@ import { PositionsManager } from './positions-manager';
export const PositionsContainer = ({
onMarketClick,
noBottomPlaceholder,
id,
}: {
onMarketClick?: (marketId: string) => void;
noBottomPlaceholder?: boolean;
id?: string;
}) => {
const { pubKey, isReadOnly } = useVegaWallet();
@@ -25,6 +27,7 @@ export const PositionsContainer = ({
onMarketClick={onMarketClick}
isReadOnly={isReadOnly}
noBottomPlaceholder={noBottomPlaceholder}
id={id}
/>
);
};
@@ -13,6 +13,7 @@ interface PositionsManagerProps {
onMarketClick?: (marketId: string) => void;
isReadOnly: boolean;
noBottomPlaceholder?: boolean;
id?: string;
}
export const PositionsManager = ({
@@ -20,6 +21,7 @@ export const PositionsManager = ({
onMarketClick,
isReadOnly,
noBottomPlaceholder,
id,
}: PositionsManagerProps) => {
const gridRef = useRef<AgGridReact | null>(null);
const { data, error, loading, reload } = usePositionsData(partyId, gridRef);
@@ -82,6 +84,7 @@ export const PositionsManager = ({
onFilterChanged={updateRowCount}
onRowDataUpdated={updateRowCount}
{...bottomPlaceholderProps}
id={id}
/>
<div className="pointer-events-none absolute inset-0">
<AsyncRenderer
+3 -1
View File
@@ -46,6 +46,7 @@ interface Props extends TypedDataAgGrid<Position> {
onMarketClick?: (id: string, metaKey?: boolean) => void;
style?: CSSProperties;
isReadOnly: boolean;
id?: string;
}
export interface AmountCellProps {
@@ -89,7 +90,6 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
ref={ref}
tooltipShowDelay={500}
defaultColDef={{
flex: 1,
resizable: true,
sortable: true,
filter: true,
@@ -368,6 +368,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
return getDateTimeFormat().format(new Date(value));
}}
minWidth={150}
flex={1}
/>
{onClose && !props.isReadOnly ? (
<AgGridColumn
@@ -383,6 +384,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
) : null
}
minWidth={80}
flex={1}
/>
) : null}
</AgGrid>
@@ -34,6 +34,7 @@ export const WithdrawalsTable = (
const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
return (
<AgGrid
id="withdrawals"
overlayNoRowsTemplate={t('No withdrawals')}
defaultColDef={{ flex: 1, resizable: true }}
style={{ width: '100%', height: '100%' }}