Dev doc (#1425)

README.md

@@ -70,3 +70,29 @@ Die Applikation benötigt für die Authentifizierung und Autorisierung eine gül
 ### Legacy API Authentifizierung
 
 Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsoft.github.io/reverse-proxy/articles/config-files.html) durch das neue API weitergeleitet. Die Authentifizierung wird über das neue API übernommen. Die Authentifizierung erfolgt mit der [LegacyApiAuthenticationMiddleware](src\api\Authentication\LegacyApiAuthenticationMiddleware.cs) welche den `Authorization` Header mit dem `sub` Claim des Benutzers befüllt. **⚠️Da die Validierung des `identity_tokens` dabei verloren geht, darf das Legacy API nicht öffentlich verfügbar sein**. Die Konfiguration des Legacy API Endpunkts erfolgt über die [Konfiguration](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration) von `ReverseProxy:Clusters:pythonApi:Destinations:legacyApi:Address`.
+
+## Developer best practices
+
+#### UI/UX
+
+- Das UI-Design ist in [Figma](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) definiert. Unter Pages/Screens sind die definitiven Designs zu finden.
+- Standardmässig werden die [Lucid Icons](https://lucide.dev/icons/) verwendet. Custom-Icons können aus [Figma](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert und als SVG eingebunden werden. Um die Icons farblich stylen zu können, müssen `fill` und `stroke` wie folgt angepasst werden `fill="currentColor" stroke="currentColor"`.
+- [MUI](https://mui.com/) wird als UI-Component library verwendet. Allgemeine Styles werden im [AppTheme.ts](./src/client/src/AppTheme.ts) definiert und diese Styles wo immer möglich verwendet. [MUI Styled Components](https://mui.com/system/styled/) im gleichen File mit der Komponente definieren, sobald die Styles mehrfach gebraucht werden. Übergreifende Styled Components werden in [styledComponents.js](./src/client/src/components/styledComponents.js) definiert. 
+
+#### Typescript
+
+- Neue Komponenten werden in Typescript geschrieben.
+- Es werden bevorzugt Interfaces statt Types verwendet.
+- Interfaces, die API Calls abbilden, werden unter [apiInterfaces.ts](./src/client/api/apiInterfaces.ts) definiert ([ReduxStateInterfaces.ts](./src/client/src/api-lib/ReduxStateInterfaces.ts) für das Legacy API).
+- Existieren mehrere Interfaces für eine Komponente, werden sie in einem separaten File neben der Komponente abgelegt. 
+- Das Interface für die React props der Komponente kann im selben File mit der Komponente definiert werden.
+
+#### Translation
+- Texte werden mit dem `useTranslation` hook von `react-i18next` übersetzt. Das `withTranslation HOC` wird nicht mehr verwendet.
+- Neue Übersetzungskeys alphabetisch sortiert und in CamelCase in den `common.json` Files unter [public/locale](./src/client/public/locale) erfassen.
+
+#### API
+
+- Neue Endpoints werden immer im .NET API erstellt. Das Python Legacy API wird nicht erweitert.
+- Redux wird nicht mehr erweitert. Datenabfragen werden mit dem Javascript [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) (siehe [fetchApiV2.js](src/client/src/api/fetchApiV2.js)) oder wo sinnvoll mit `useQuery` von `react-query` gemacht.
+- Wenn Abfragen aus dem Redux Store in neuen Komponenten gebraucht werden, sollten die React hooks `useSelector` und `useDispatch` verwendet werden.

src/client/src/commons/files/fileInterfaces.ts

@@ -1,4 +1,4 @@
-import { Borehole } from "../../ReduxStateInterfaces.ts";
+import { Borehole } from "../../api-lib/ReduxStateInterfaces.ts";
 
 export interface File {
   id: number;

src/client/src/commons/form/borehole/borehole/geometry.jsx

@@ -4,7 +4,7 @@ import GeometryTable from "./geometryTable";
 import GeometryChartNE from "./geometryChartNE";
 import { GeometryChartZE, GeometryChartZInteractive, GeometryChartZN } from "./geometryChartZ";
 import { Card, CardActions, CardContent, CircularProgress, Grid, Typography } from "@mui/material/";
-import { FullPageCentered } from "../../../../components/baseComponents";
+import { FullPageCentered } from "../../../../components/styledComponents";
 import { useBoreholeGeometry, useBoreholeGeometryMutations } from "../../../../api/fetchApiV2";
 import { DeleteButton } from "../../../../components/buttons/buttons.tsx";
 

src/client/src/commons/form/borehole/borehole/geometryImport.jsx

@@ -23,7 +23,7 @@ import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { FormSelect } from "../../../../components/form/form";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { AlertContext } from "../../../../components/alert/alertContext";
-import { StackHalfWidth } from "../../../../components/baseComponents.js";
+import { StackHalfWidth } from "../../../../components/styledComponents.js";
 import { DevTool } from "../../../../../hookformDevtools.ts";
 
 const GeometryImport = ({ boreholeId }) => {

src/client/src/commons/form/borehole/borehole/geometryTable.jsx

@@ -1,15 +1,15 @@
 import { useTranslation } from "react-i18next";
 import {
-  Typography,
+  CircularProgress,
   Table,
-  TableHead,
   TableBody,
+  TableCell,
   TableContainer,
+  TableHead,
   TableRow,
-  TableCell,
-  CircularProgress,
+  Typography,
 } from "@mui/material/";
-import { FullPageCentered } from "../../../../components/baseComponents";
+import { FullPageCentered } from "../../../../components/styledComponents";
 
 const GeometryTable = ({ data }) => {
   const { t } = useTranslation();

src/client/src/commons/form/borehole/borehole/sectionDisplay.jsx

@@ -1,4 +1,4 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import { deleteSection, useDomains } from "../../../../api/fetchApiV2";

src/client/src/commons/form/borehole/borehole/sectionInput.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { Checkbox, Divider, FormControlLabel, IconButton } from "@mui/material";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplayType, FormInput, FormSelect } from "../../../../components/form/form";
 import { addSection, updateSection, useDomains } from "../../../../api/fetchApiV2";
 import { useContext, useEffect } from "react";

src/client/src/commons/form/borehole/completion/backfillDisplay.jsx

@@ -1,7 +1,6 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth, StackHalfWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
-import { StackHalfWidth } from "../../../../components/baseComponents.js";
 import { useGetCasingName } from "./casingUtils";
 import { deleteBackfill } from "../../../../api/fetchApiV2";
 

src/client/src/commons/form/borehole/completion/backfillInput.jsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDomains, getCasings, addBackfill, updateBackfill } from "../../../../api/fetchApiV2";
+import { addBackfill, getCasings, updateBackfill, useDomains } from "../../../../api/fetchApiV2";
 import { completionSchemaConstants } from "./completionSchemaConstants";
 import { FormInput, FormSelect } from "../../../../components/form/form";
 import { DataInputCard } from "../../../../components/dataCard/dataInputCard";
-import { StackFullWidth, StackHalfWidth } from "../../../../components/baseComponents.js";
-import { useGetCasingOptions, prepareCasingDataForSubmit } from "./casingUtils";
+import { StackFullWidth, StackHalfWidth } from "../../../../components/styledComponents.js";
+import { prepareCasingDataForSubmit, useGetCasingOptions } from "./casingUtils";
 
 const BackfillInput = ({ item, parentId }) => {
   const domains = useDomains();

src/client/src/commons/form/borehole/completion/casingDisplay.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { Table, TableHead, TableBody, TableContainer, TableRow, TableCell, Typography } from "@mui/material";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import { deleteCasing, useDomains } from "../../../../api/fetchApiV2";

src/client/src/commons/form/borehole/completion/casingInput.jsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { Box, Divider, IconButton, Stack, Typography } from "@mui/material";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import Delete from "@mui/icons-material/Delete";
 import { useTranslation } from "react-i18next";
 import { addCasing, updateCasing, useDomains } from "../../../../api/fetchApiV2";

src/client/src/commons/form/borehole/completion/completion.jsx

@@ -14,7 +14,7 @@ import CompletionContent from "./completionContent";
 import CompletionHeaderInput from "./completionHeaderInput";
 import CompletionHeaderDisplay from "./completionHeaderDisplay";
 import { AddButton } from "../../../../components/buttons/buttons.tsx";
-import { FullPage } from "../../../../components/baseComponents";
+import { FullPage } from "../../../../components/styledComponents";
 import { DataCardExternalContext } from "../../../../components/dataCard/dataCardContext";
 import { PromptContext } from "../../../../components/prompt/promptContext.tsx";
 import TrashIcon from "../../../../assets/icons/trash.svg?react";

src/client/src/commons/form/borehole/completion/instrumentationDisplay.jsx

@@ -1,4 +1,4 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import { useGetCasingName } from "./casingUtils";

src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.jsx

@@ -1,4 +1,4 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import ObservationDisplay from "./observationDisplay";

src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.jsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { TableCell } from "@mui/material";
 import { FormResultTableDisplay } from "../../../../components/form/formResultTableDisplay";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import ObservationDisplay from "./observationDisplay";

src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.jsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { Box, IconButton, InputAdornment, Stack, Typography } from "@mui/material";
 import { FormInput, FormMultiSelect, FormSelect } from "../../../../components/form/form";
-import { StackHalfWidth } from "../../../../components/baseComponents";
+import { StackHalfWidth } from "../../../../components/styledComponents";
 import { DataCardButtonContainer } from "../../../../components/dataCard/dataCard";
 import { AddButton, CancelButton, SaveButton } from "../../../../components/buttons/buttons.tsx";
 import ObservationInput from "./observationInput";

src/client/src/commons/form/borehole/hydrogeology/observationDisplay.jsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import { useGetCasingName } from "../completion/casingUtils";
 

src/client/src/commons/form/borehole/hydrogeology/observationInput.jsx

@@ -4,7 +4,7 @@ import { FormInput, FormSelect } from "../../../../components/form/form";
 import { getCasingsByBoreholeId, useDomains } from "../../../../api/fetchApiV2";
 import { useTranslation } from "react-i18next";
 import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants";
-import { StackHalfWidth } from "../../../../components/baseComponents";
+import { StackHalfWidth } from "../../../../components/styledComponents";
 import { useGetCasingOptions } from "../completion/casingUtils";
 
 const ObservationInput = props => {

src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.jsx

@@ -1,4 +1,4 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import ObservationDisplay from "./observationDisplay";

src/client/src/commons/form/borehole/segments/coordinateSegmentInterfaces.ts

@@ -1,4 +1,4 @@
-import { Borehole, User } from "../../../../ReduxStateInterfaces";
+import { Borehole, User } from "../../../../api-lib/ReduxStateInterfaces";
 
 export enum ReferenceSystemCode {
   LV95 = 20104001,

src/client/src/commons/menu/detailView/detailHeader.tsx

@@ -7,7 +7,7 @@ import TrashIcon from "../../../assets/icons/trash.svg?react";
 import { useHistory, useLocation } from "react-router-dom";
 import { DeleteButton, EditButton, EndEditButton } from "../../../components/buttons/buttons";
 import { useDispatch, useSelector } from "react-redux";
-import { Borehole, ReduxRootState } from "../../../ReduxStateInterfaces";
+import { Borehole, ReduxRootState } from "../../../api-lib/ReduxStateInterfaces";
 import { deleteBorehole, lockBorehole, unlockBorehole } from "../../../api-lib";
 import { useTranslation } from "react-i18next";
 import { PromptContext } from "../../../components/prompt/promptContext";

src/client/src/commons/menu/headerComponent.tsx

@@ -2,7 +2,7 @@ import { Box, Stack } from "@mui/material";
 import { theme } from "../../AppTheme";
 import { VersionTag } from "./versionTag";
 import { ProfilePopup } from "./profilePopup";
-import { ReduxRootState, User } from "../../ReduxStateInterfaces";
+import { ReduxRootState, User } from "../../api-lib/ReduxStateInterfaces";
 import { useSelector } from "react-redux";
 import { LanguagePopup } from "./languagePopup.tsx";
 

src/client/src/commons/menu/mainView/actions/actionsInterfaces.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ErrorResponse } from "../menuComponents/menuComponentInterfaces";
-import { Workgroup } from "../../../../ReduxStateInterfaces";
+import { Workgroup } from "../../../../api-lib/ReduxStateInterfaces";
 
 export interface WorkgroupSelectProps {
   workgroup: number | null;

src/client/src/commons/menu/mainView/actions/importer/importModalContent.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { Box, Stack } from "@mui/material/";
 import TranslationText from "../../../../form/translationText.jsx";
 import { FileDropzone } from "../../../../files/fileDropzone.jsx";
-import { StackHalfWidth } from "../../../../../components/baseComponents.js";
+import { StackHalfWidth } from "../../../../../components/styledComponents.js";
 import { downloadCodelistCsv } from "../../../../../api/fetchApiV2.js";
 import { ImportContentProps } from "../actionsInterfaces.js";
 import Downloadlink from "../../../../files/downloadlink.jsx";

src/client/src/commons/menu/mainView/mainSideNav.tsx

@@ -13,7 +13,7 @@ import { theme } from "../../../AppTheme";
 import ImportModal from "./actions/importModal";
 import { DrawerContentTypes } from "../../../pages/editor/editorComponentInterfaces";
 import { ErrorResponse, MainSideNavProps } from "./menuComponents/menuComponentInterfaces";
-import { ReduxRootState, User } from "../../../ReduxStateInterfaces";
+import { ReduxRootState, User } from "../../../api-lib/ReduxStateInterfaces";
 import { FilterContext } from "../../../components/filter/filterContext";
 import { useTranslation } from "react-i18next";
 import { NavButton } from "../../../components/buttons/navButton";

src/client/src/commons/menu/mainView/menuComponents/menuComponentInterfaces.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Boreholes, Workgroup } from "../../../../ReduxStateInterfaces";
+import { Boreholes, Workgroup } from "../../../../api-lib/ReduxStateInterfaces";
 import { DrawerContentTypes } from "../../../../pages/editor/editorComponentInterfaces";
 
 export interface BoreholeNumbersPreviewProps {

src/client/src/commons/menu/profilePopup.tsx

@@ -2,7 +2,7 @@ import { useAuth } from "react-oidc-context";
 import { Button, IconButton, Popover, Stack, Typography } from "@mui/material";
 import { theme } from "../../AppTheme.ts";
 import ProfileIcon from "../../assets/icons/profile.svg?react";
-import { UserData } from "../../ReduxStateInterfaces";
+import { UserData } from "../../api-lib/ReduxStateInterfaces";
 import { MouseEvent, useState } from "react";
 
 export function ProfilePopup({ user }: { user: UserData }) {

src/client/src/components/dataCard/dataCards.jsx

@@ -4,7 +4,7 @@ import { CircularProgress, Typography } from "@mui/material";
 import { DataCard, DataCardButtonContainer, DataCardContainer, DataCardItem } from "./dataCard";
 import { DataCardContext, DataCardSwitchContext } from "./dataCardContext";
 import { AddButton } from "../buttons/buttons.tsx";
-import { FullPage, FullPageCentered } from "../baseComponents";
+import { FullPage, FullPageCentered } from "../styledComponents";
 
 const DataCardsContainer = props => {
   return <DataCardContainer>{props.children()}</DataCardContainer>;

src/client/src/components/dataCard/dataDisplayCard.jsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { DataCardButtonContainer } from "./dataCard.jsx";
 import { DataCardContext, DataCardSwitchContext } from "./dataCardContext";
 import { PromptContext } from "../prompt/promptContext.tsx";
-import { StackFullWidth } from "../baseComponents";
+import { StackFullWidth } from "../styledComponents";
 import { DeleteButton, EditButton } from "../buttons/buttons.tsx";
 import TrashIcon from "../../assets/icons/trash.svg?react";
 

src/client/src/components/dataCard/dataInputCard.jsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import { DataCardButtonContainer } from "./dataCard.jsx";
 import { DataCardContext, DataCardSwitchContext } from "./dataCardContext.jsx";
-import { StackFullWidth } from "../baseComponents";
+import { StackFullWidth } from "../styledComponents";
 import { CancelButton, SaveButton } from "../buttons/buttons.tsx";
 import { PromptContext } from "../prompt/promptContext.tsx";