Skip to content

feat(web): actual mobile optimization of position table #373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mikonse merged 1 commit into from
Mar 1, 2026
Merged

feat(web): actual mobile optimization of position table #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 54 additions & 24 deletions apps/web/src/components/ShareSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,9 +168,11 @@ interface ShareSelectProps {
shouldDisplayAccount?: (accountId: number) => boolean | undefined;
additionalShareInfoHeader?: React.ReactNode | undefined;
AdditionalShareInfo?: React.FC<{ account: Account }> | undefined;
excludeAccounts?: number[] | undefined;
communistShares?: number;
onChangeCommunistShares?: (value: number) => void;
currencyIdentifier?: string;
editable?: boolean | undefined;
hideShowEventsFilter?: boolean;
}

export const ShareSelect: React.FC<ShareSelectProps> = ({
Expand All @@ -184,11 +186,13 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
shouldDisplayAccount,
additionalShareInfoHeader,
AdditionalShareInfo,
excludeAccounts,
communistShares,
onChangeCommunistShares,
currencyIdentifier,
error,
helperText,
editable = false,
hideShowEventsFilter = false,
}) => {
const { t } = useTranslation();
const theme = useTheme();
Expand All @@ -213,17 +217,16 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
return true;
}

if (editable) {
return !(!showEvents && a.type === "clearing");
if (a.type === "clearing" && !showEvents && !hideShowEventsFilter) {
return false;
}

if (shouldDisplayAccount) {
return shouldDisplayAccount(accountId);
}
return false;

return editable;
};
if (excludeAccounts && excludeAccounts.includes(a.id)) {
return false;
}
if (!isAccountShown(a.id)) {
return false;
}
Expand All @@ -237,13 +240,14 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
return true;
})
.sort(sortFn);
}, [value, showEvents, editable, searchValue, unfilteredAccounts, excludeAccounts, shouldDisplayAccount]);
}, [value, showEvents, editable, searchValue, unfilteredAccounts, shouldDisplayAccount]);

React.useEffect(() => {
// set displayed split mode to evenly if we have a "shares" split with non-even shares
if (
splitMode === "shares" &&
Object.values(value).reduce((onlyDefaultShares, value) => onlyDefaultShares && value === 1, true)
Object.values(value).reduce((onlyDefaultShares, value) => onlyDefaultShares && value === 1, true) &&
(communistShares == null || communistShares === 1 || communistShares === 0)
) {
setFrontendSplitMode("evenly");
}
Expand Down Expand Up @@ -323,22 +327,25 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
</Stack>
{editable && (
<Stack direction="row" spacing={2} sx={{ paddingY: 1 }}>
<FormControlLabel
control={
<Checkbox
name="show-events"
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setShowEvents(event.target.checked)
}
/>
}
checked={showEvents}
label={t("shareSelect.showEvents")}
/>
{!hideShowEventsFilter && (
<FormControlLabel
control={
<Checkbox
name="show-events"
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setShowEvents(event.target.checked)
}
/>
}
checked={showEvents}
label={t("shareSelect.showEvents")}
/>
)}
<TextField
variant="standard"
value={frontendSplitMode}
sx={{ minWidth: 200 }}
sx={{ minWidth: hideShowEventsFilter ? undefined : 200 }}
fullWidth={hideShowEventsFilter}
onChange={(e) => handleSplitModeChange(e.target.value as FrontendSplitMode)}
label={t("shareSelect.splitMode")}
select
Expand All @@ -350,6 +357,29 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
</Stack>
)}
</Grid>
{communistShares != null &&
(frontendSplitMode === "evenly" ? (
<FormControlLabel
control={
<Checkbox
name="communist-shares"
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
onChangeCommunistShares?.(event.target.checked ? 1.0 : 0.0)
}
/>
}
checked={communistShares != null && communistShares > 0}
label={t("transactions.positions.shared")}
/>
) : (
<NumericInput
label={t("transactions.positions.shared")}
value={communistShares}
onChange={onChangeCommunistShares}
fullWidth
sx={{ mb: 1 }}
/>
))}
<Divider variant="middle" sx={{ marginLeft: 0 }} />
<TableContainer
sx={{
Expand Down Expand Up @@ -401,7 +431,7 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
/>
)}
</TableCell>
<TableCell width="100px">
<TableCell>
{editable ? (
<FormControlLabel
control={<Checkbox onChange={handleSelectAll} />}
Expand Down
1 change: 1 addition & 0 deletions apps/web/src/pages/accounts/AccountDetail/AccountClearingListEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const AccountClearingListEntry: React.FC<Props> = ({ groupId, accountId,
{clearingAccount.name}
</Typography>
}
slots={{ secondary: "div" }}
secondary={
<Stack>
<div>
Expand Down
8 changes: 6 additions & 2 deletions apps/web/src/pages/accounts/AccountDetail/AccountInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@ export const AccountInfo: React.FC<Props> = ({ groupId, account }) => {
return <Navigate to="/404" />;
}

const shouldDisplayAccount = (accountId: number) => {
return account.is_wip && accountId !== account.id;
};

return (
<>
<Grid container justifyContent="space-between">
Expand Down Expand Up @@ -251,7 +255,7 @@ export const AccountInfo: React.FC<Props> = ({ groupId, account }) => {
}
error={!!validationErrors.fieldErrors.clearing_shares}
helperText={validationErrors.fieldErrors.clearing_shares}
excludeAccounts={[account.id]}
shouldDisplayAccount={shouldDisplayAccount}
AdditionalShareInfo={({ account: participatingAccount }) => (
<TableCell width="100px" align="right">
<CurrencyDisplay
Expand All @@ -261,7 +265,7 @@ export const AccountInfo: React.FC<Props> = ({ groupId, account }) => {
</TableCell>
)}
onChange={(value) => pushChanges({ clearing_shares: value })}
editable={account.is_wip}
editable={true}
/>
</Grid>
) : null}
Expand Down
1 change: 1 addition & 0 deletions apps/web/src/pages/accounts/AccountDetail/AccountTransactionListEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export const AccountTransactionListEntry: React.FC<Props> = ({ groupId, transact
</Typography>
</>
}
slots={{ secondary: "div" }}
secondary={
<Stack>
<div>
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/pages/accounts/AccountDetail/ClearingAccountDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export const ClearingAccountDetail: React.FC<Props> = ({ groupId, account }) =>
{t("common.shared")}
</TableCell>
}
excludeAccounts={[account.id]}
AdditionalShareInfo={({ account: participatingAccount }) => (
<TableCell width="100px" align="right">
<CurrencyDisplay
Expand Down
21 changes: 16 additions & 5 deletions apps/web/src/pages/transactions/TransactionDetail/TransactionDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import { TransactionPositions } from "./purchase/TransactionPositions";
import { ValidationErrors as PositionValidationErrors } from "./purchase/types";
import { useTranslation } from "react-i18next";
import { stringifyError } from "@abrechnung/api";
import { useIsSmallScreen } from "@/hooks";
import { TransactionPositionsMobile } from "./purchase/TransactionPositionsMobile";

interface Props {
groupId: number;
Expand All @@ -39,6 +41,7 @@ export const TransactionDetail: React.FC<Props> = ({ groupId }) => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const transactionId = Number(params["id"]);
const isSmallScreen = useIsSmallScreen();

const [showPositions, setShowPositions] = React.useState(false);
const group = useGroup(groupId);
Expand Down Expand Up @@ -170,11 +173,19 @@ export const TransactionDetail: React.FC<Props> = ({ groupId }) => {
</Button>
</Grid>
) : (showPositions && transaction.is_wip) || hasPositions ? (
<TransactionPositions
groupId={groupId}
transactionId={transactionId}
validationErrors={positionValidationErrors}
/>
isSmallScreen ? (
<TransactionPositionsMobile
groupId={groupId}
transactionId={transactionId}
validationErrors={positionValidationErrors}
/>
) : (
<TransactionPositions
groupId={groupId}
transactionId={transactionId}
validationErrors={positionValidationErrors}
/>
)
) : null}
</>
);
Expand Down
33 changes: 15 additions & 18 deletions apps/web/src/pages/transactions/TransactionDetail/TransactionMetadata.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,27 +76,28 @@ export const TransactionMetadata: React.FC<Props> = ({
/>
</TableCell>
<TableCell></TableCell>
<TableCell width="100px" align="right">
{total}
</TableCell>
<TableCell align="right">{total}</TableCell>
</>
);
}

return (
<TableCell width="100px" align="right">
{total}
</TableCell>
);
return <TableCell align="right">{total}</TableCell>;
},
[showPositions, hasPositions, transaction, balanceEffect, groupCurrencyIdentifier, isSmallScreen]
);

const shouldDisplayAccount = React.useCallback(
(accountId: number) =>
balanceEffect[accountId] !== undefined &&
(balanceEffect[accountId].commonDebitors !== 0 || balanceEffect[accountId].positions !== 0),
[balanceEffect]
(accountId: number) => {
if (transaction.is_wip) {
return true;
}

return (
balanceEffect[accountId] !== undefined &&
(balanceEffect[accountId].commonDebitors !== 0 || balanceEffect[accountId].positions !== 0)
);
},
[balanceEffect, transaction.is_wip]
);

const pushChanges = React.useCallback(
Expand Down Expand Up @@ -367,14 +368,10 @@ export const TransactionMetadata: React.FC<Props> = ({
</TableCell>
</>
)}
<TableCell width="100px" align="right">
{t("common.total")}
</TableCell>
<TableCell align="right">{t("common.total")}</TableCell>
</>
) : (
<TableCell width="100px" align="right">
{t("common.shared")}
</TableCell>
<TableCell align="right">{t("common.shared")}</TableCell>
)
}
AdditionalShareInfo={ShareInfo}
Expand Down
Loading