Skip to content

Commit 62f0d63

Browse files
mikonsemikonse
authored
Merge pull request #254 from SFTtech/milo/frontend-cleanup
frontend cleanup
2 parents 26c5f80 + 7810cf9 commit 62f0d63

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+640
-471
lines changed

‎CHANGELOG.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
**BREAKING CHANGES**
88

99
- changed config structure to only include the reverse-proxy base_url once in the `api` section
10+
- removed frontend config via separate `config.json` in favour of configuration in the backend config yaml
1011
- drop python 3.10 support
11-
- remove react native mobile app in favor of mobile optimized PWA
12+
- remove react native mobile app in favour of mobile optimized PWA
1213

1314
**Features**
1415

‎abrechnung/config.py

+19
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import enum
12
from datetime import timedelta
23
from pathlib import Path
34
from typing import List, Literal, Optional, Tuple, Type
@@ -13,9 +14,27 @@
1314
from sftkit.http import HTTPServerConfig
1415

1516

17+
class ServiceMessageType(enum.Enum):
18+
info = "info"
19+
error = "error"
20+
warning = "warning"
21+
success = "success"
22+
23+
24+
class ServiceMessage(BaseModel):
25+
type: ServiceMessageType
26+
title: str | None = None
27+
body: str
28+
29+
1630
class ServiceConfig(BaseModel):
1731
name: str
1832

33+
messages: list[ServiceMessage] | None = None
34+
imprint_url: str | None = None
35+
source_code_url: str = "https://github.com/SFTtech/abrechnung"
36+
issue_tracker_url: str = "https://github.com/SFTtech/abrechnung/issues"
37+
1938

2039
class DemoConfig(BaseModel):
2140
enabled: bool = False

‎abrechnung/http/routers/common.py

+21-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
from fastapi import APIRouter
1+
from fastapi import APIRouter, Depends
22
from pydantic import BaseModel
33

44
from abrechnung import MAJOR_VERSION, MINOR_VERSION, PATCH_VERSION, __version__
5+
from abrechnung.config import Config, ServiceConfig, ServiceMessage
6+
from abrechnung.http.dependencies import get_config
57

68
router = APIRouter(
79
prefix="/api",
@@ -34,3 +36,21 @@ async def get_version():
3436
"minor_version": MINOR_VERSION,
3537
"patch_version": PATCH_VERSION,
3638
}
39+
40+
41+
class FrontendConfig(BaseModel):
42+
messages: list[ServiceMessage] | None = None
43+
imprint_url: str | None = None
44+
source_code_url: str
45+
issue_tracker_url: str
46+
47+
48+
@router.get("/config", response_model=FrontendConfig, operation_id="get_config")
49+
async def get_frontend_config(config: Config = Depends(get_config)):
50+
cfg = FrontendConfig(
51+
messages=config.service.messages,
52+
imprint_url=config.service.imprint_url,
53+
source_code_url=config.service.source_code_url,
54+
issue_tracker_url=config.service.issue_tracker_url,
55+
)
56+
return cfg

‎api/openapi.json

+1-1
Large diffs are not rendered by default.

‎config/abrechnung.yaml

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
21
service:
3-
url: "http://localhost"
4-
api_url: "http://localhost/api"
52
name: "Abrechnung"
63

74
database:
@@ -12,6 +9,7 @@ database:
129

1310
api:
1411
secret_key: "please generate a unique one with pwgen -s 64 1"
12+
base_url: "http://localhost"
1513
host: "localhost"
1614
port: 8080
1715
id: default

‎docker/Dockerfile-frontend

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# syntax=docker/dockerfile:1.3
22
FROM docker.io/nginx:stable-alpine
33
COPY --chown=nginx:nginx frontend/dist/apps/web/ /var/www/abrechnung/
4-
COPY --chown=nginx:nginx frontend/apps/web/src/assets/config.json /var/www/abrechnung/config.json
54
COPY docker/nginx-static /etc/nginx/conf.d/default.conf
65
COPY --chmod=0755 docker/entrypoint-frontend.sh /docker-entrypoint.d/99-abrechnung.sh

‎docs/usage/configuration.rst

+11-17
Original file line numberDiff line numberDiff line change
@@ -142,23 +142,17 @@ E.g. to set the email auth username from the config yaml as below we'd use the e
142142
Frontend Configuration
143143
-------------------------
144144

145-
The frontend also has some configuration options. The javascript application expects a json file ``config.json`` under ``https://<domain>/config.json``.
146-
If you want to overwrite the default config please configure your webserver to serve your designated ``config.json`` at that url.
147-
148-
This also enables server administrators to show information banners / messages on top via the ``messages`` config key to e.g. announce maintenance.
145+
The frontend also has some configuration options which can be configured in the ``service`` section of the yaml configuration.
146+
This enables server administrators to show information banners / messages on top via the ``messages`` config key to e.g. announce maintenance.
149147

150148
Possible config options are
151149

152-
.. code-block:: json
153-
154-
{
155-
"messages": [
156-
{
157-
"type": "<'error'|'info'|'warning'|'success'>",
158-
"title": "<string, optional>",
159-
"body": "<string>"
160-
}
161-
],
162-
"imprintURL": "<string, optional>",
163-
"sourceCodeURL": "https://github.com/SFTtech/abrechnung"
164-
}
150+
.. code-block:: yaml
151+
152+
service:
153+
# ...
154+
messages:
155+
- type: "info" # "error" | "warning" | "success"
156+
body: "This is an informational message which will be displayed at the top of the application"
157+
title: "My optional title"
158+
imprint_url: "https://my-imprint-for-my-abrechnung-instance.mydomain.com"

‎frontend/apps/web/project.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"main": "apps/web/src/main.tsx",
3232
"polyfills": "apps/web/src/polyfills.ts",
3333
"tsConfig": "apps/web/tsconfig.app.json",
34-
"assets": ["apps/web/src/favicon.png", "apps/web/src/manifest.json", "apps/web/src/assets"],
34+
"assets": ["apps/web/src/favicon.png", "apps/web/src/manifest.webmanifest", "apps/web/src/assets"],
3535
"styles": ["apps/web/src/styles.css"],
3636
"scripts": [],
3737
"webpackConfig": "apps/web/webpack.config.js"

‎frontend/apps/web/src/app/authenticated-layout/AuthenticatedLayout.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -133,19 +133,19 @@ const DrawerContent: React.FC<DrawerContentProps> = ({ groupId }) => {
133133
borderTop: `1px solid ${theme.palette.divider}`,
134134
}}
135135
>
136-
{cfg.imprintURL && (
137-
<Link href={cfg.imprintURL} target="_blank" sx={{ mr: 2 }}>
136+
{cfg.imprint_url && (
137+
<Link href={cfg.imprint_url} target="_blank" sx={{ mr: 2 }}>
138138
{t("navbar.imprint")}
139139
</Link>
140140
)}
141141
<Tooltip title="Source Code">
142-
<Link sx={{ ml: 1 }} target="_blank" href={cfg.sourceCodeURL}>
142+
<Link sx={{ ml: 1 }} target="_blank" href={cfg.source_code_url}>
143143
<GitHub />
144144
</Link>
145145
</Tooltip>
146-
{cfg.issueTrackerURL && (
146+
{cfg.issue_tracker_url && (
147147
<Tooltip title="Bug reports">
148-
<Link sx={{ ml: 1 }} target="_blank" href={cfg.issueTrackerURL}>
148+
<Link sx={{ ml: 1 }} target="_blank" href={cfg.issue_tracker_url}>
149149
<BugReport />
150150
</Link>
151151
</Tooltip>

‎frontend/apps/web/src/assets/config.json

-6
This file was deleted.

‎frontend/apps/web/src/components/accounts/AccountClearingListEntry.tsx

+54-43
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { selectAccountBalances, useGroupCurrencySymbol } from "@abrechnung/redux";
2-
import { Box, ListItemAvatar, ListItemText, Tooltip, Typography } from "@mui/material";
2+
import { Box, Divider, ListItemAvatar, ListItemText, Tooltip, Typography } from "@mui/material";
33
import React from "react";
44
import { balanceColor } from "@/core/utils";
55
import { useAppSelector } from "@/store";
66
import { getAccountLink } from "@/utils";
77
import { ListItemLink, ClearingAccountIcon } from "../style";
88
import { useTranslation } from "react-i18next";
9-
import { useFormatCurrency, useFormatDatetime } from "@/hooks";
9+
import { useFormatCurrency, useFormatDatetime, useIsSmallScreen } from "@/hooks";
1010
import { ClearingAccount } from "@abrechnung/types";
1111

1212
interface Props {
@@ -20,52 +20,63 @@ export const AccountClearingListEntry: React.FC<Props> = ({ groupId, accountId,
2020
const formatCurrency = useFormatCurrency();
2121
const formatDatetime = useFormatDatetime();
2222
const balances = useAppSelector((state) => selectAccountBalances(state, groupId));
23-
const currency_symbol = useGroupCurrencySymbol(groupId);
24-
if (!currency_symbol) {
23+
const currencySymbol = useGroupCurrencySymbol(groupId);
24+
const isSmallScreen = useIsSmallScreen();
25+
if (!currencySymbol) {
2526
return null;
2627
}
2728

2829
return (
29-
<ListItemLink to={getAccountLink(groupId, clearingAccount.type, clearingAccount.id)}>
30-
<ListItemAvatar sx={{ minWidth: { xs: "40px", md: "56px" } }}>
31-
<Tooltip title="Clearing Account">
32-
<ClearingAccountIcon color="primary" />
33-
</Tooltip>
34-
</ListItemAvatar>
35-
<ListItemText
36-
primary={
37-
<Typography variant="body1" component="span">
38-
{clearingAccount.name}
39-
</Typography>
40-
}
41-
secondary={
42-
<Box component="span" display="flex" flexDirection="column">
43-
<span>{clearingAccount.description}</span>
44-
{clearingAccount.date_info != null && (
45-
<span>{formatDatetime(clearingAccount.date_info, "date")}</span>
30+
<>
31+
<ListItemLink to={getAccountLink(groupId, clearingAccount.type, clearingAccount.id)}>
32+
<ListItemAvatar sx={{ minWidth: { xs: "40px", md: "56px" } }}>
33+
<Tooltip title="Clearing Account">
34+
<ClearingAccountIcon color="primary" />
35+
</Tooltip>
36+
</ListItemAvatar>
37+
<ListItemText
38+
primary={
39+
<Typography variant="body1" component="span">
40+
{clearingAccount.name}
41+
</Typography>
42+
}
43+
secondary={
44+
<Box component="span" display="flex" flexDirection="column">
45+
<span>{clearingAccount.description}</span>
46+
{clearingAccount.date_info != null && (
47+
<span>{formatDatetime(clearingAccount.date_info, "date")}</span>
48+
)}
49+
</Box>
50+
}
51+
/>
52+
<ListItemText>
53+
<Typography align="right" variant="body2">
54+
<Typography
55+
component="span"
56+
sx={{
57+
color: (theme) =>
58+
balanceColor(balances[clearingAccount.id]?.clearingResolution[accountId], theme),
59+
}}
60+
>
61+
{formatCurrency(
62+
balances[clearingAccount.id]?.clearingResolution[accountId],
63+
currencySymbol
64+
)}
65+
</Typography>
66+
{!isSmallScreen && (
67+
<>
68+
<br />
69+
<Typography component="span" sx={{ typography: "body2", color: "text.secondary" }}>
70+
{t("common.lastChangedWithTime", {
71+
datetime: formatDatetime(clearingAccount.last_changed, "full"),
72+
})}
73+
</Typography>
74+
</>
4675
)}
47-
</Box>
48-
}
49-
/>
50-
<ListItemText>
51-
<Typography align="right" variant="body2">
52-
<Typography
53-
component="span"
54-
sx={{
55-
color: (theme) =>
56-
balanceColor(balances[clearingAccount.id]?.clearingResolution[accountId], theme),
57-
}}
58-
>
59-
{formatCurrency(balances[clearingAccount.id]?.clearingResolution[accountId], currency_symbol)}
60-
</Typography>
61-
<br />
62-
<Typography component="span" sx={{ typography: "body2", color: "text.secondary" }}>
63-
{t("common.lastChangedWithTime", {
64-
datetime: formatDatetime(clearingAccount.last_changed, "full"),
65-
})}
6676
</Typography>
67-
</Typography>
68-
</ListItemText>
69-
</ListItemLink>
77+
</ListItemText>
78+
</ListItemLink>
79+
<Divider sx={{ display: { lg: "none" } }} component="li" />
80+
</>
7081
);
7182
};

0 commit comments

Comments
 (0)