From 948d8fbfa4439d314a3b830a9dd2d86feba00c52 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 12:17:29 +0200 Subject: [PATCH 01/14] Add developer best practices to README.md --- README.md | 26 +++++++++++++++++++ .../src/{ => api-lib}/ReduxStateInterfaces.ts | 0 .../src/commons/files/fileInterfaces.ts | 2 +- .../form/borehole/borehole/geometry.jsx | 2 +- .../form/borehole/borehole/geometryImport.jsx | 2 +- .../form/borehole/borehole/geometryTable.jsx | 10 +++---- .../form/borehole/borehole/sectionDisplay.jsx | 2 +- .../form/borehole/borehole/sectionInput.jsx | 2 +- .../borehole/completion/backfillDisplay.jsx | 3 +-- .../borehole/completion/backfillInput.jsx | 6 ++--- .../borehole/completion/casingDisplay.jsx | 4 +-- .../form/borehole/completion/casingInput.jsx | 2 +- .../form/borehole/completion/completion.jsx | 2 +- .../completion/instrumentationDisplay.jsx | 2 +- .../groundwaterLevelMeasurementDisplay.jsx | 2 +- .../hydrogeology/hydrotestDisplay.jsx | 2 +- .../borehole/hydrogeology/hydrotestInput.jsx | 2 +- .../hydrogeology/observationDisplay.jsx | 2 +- .../hydrogeology/observationInput.jsx | 2 +- .../hydrogeology/waterIngressDisplay.jsx | 2 +- .../segments/coordinateSegmentInterfaces.ts | 2 +- .../commons/menu/detailView/detailHeader.tsx | 2 +- .../src/commons/menu/headerComponent.tsx | 2 +- .../mainView/actions/actionsInterfaces.ts | 2 +- .../actions/importer/importModalContent.tsx | 2 +- .../src/commons/menu/mainView/mainSideNav.tsx | 2 +- .../menuComponents/menuComponentInterfaces.ts | 2 +- src/client/src/commons/menu/profilePopup.tsx | 2 +- .../src/components/dataCard/dataCards.jsx | 2 +- .../components/dataCard/dataDisplayCard.jsx | 2 +- .../src/components/dataCard/dataInputCard.jsx | 2 +- ...{baseComponents.js => styledComponents.js} | 0 32 files changed, 62 insertions(+), 37 deletions(-) rename src/client/src/{ => api-lib}/ReduxStateInterfaces.ts (100%) rename src/client/src/components/{baseComponents.js => styledComponents.js} (100%) diff --git a/README.md b/README.md index b270b3cbb..e38cf5530 100644 --- a/README.md +++ b/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 im [Figma File](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) definiert. Unter Pages/Screens sind die definitiven Designs zu finden. +- Als Defaulticons können [Lucid Icons](https://lucide.dev/icons/) verwendet werden. Custom Icons können aus dem [Figma file](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert werden. Stand jetzt werden die Icons als SVG eingebunden, 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 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 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 `api/apiInterfaces.ts` definiert (`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 in den `common.json` Files unter `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 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. diff --git a/src/client/src/ReduxStateInterfaces.ts b/src/client/src/api-lib/ReduxStateInterfaces.ts similarity index 100% rename from src/client/src/ReduxStateInterfaces.ts rename to src/client/src/api-lib/ReduxStateInterfaces.ts diff --git a/src/client/src/commons/files/fileInterfaces.ts b/src/client/src/commons/files/fileInterfaces.ts index 350e50c33..60718d931 100644 --- a/src/client/src/commons/files/fileInterfaces.ts +++ b/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; diff --git a/src/client/src/commons/form/borehole/borehole/geometry.jsx b/src/client/src/commons/form/borehole/borehole/geometry.jsx index ceab36f97..0a9e0fc8e 100644 --- a/src/client/src/commons/form/borehole/borehole/geometry.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/borehole/geometryImport.jsx b/src/client/src/commons/form/borehole/borehole/geometryImport.jsx index 219b49271..07300ef4f 100644 --- a/src/client/src/commons/form/borehole/borehole/geometryImport.jsx +++ b/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 }) => { diff --git a/src/client/src/commons/form/borehole/borehole/geometryTable.jsx b/src/client/src/commons/form/borehole/borehole/geometryTable.jsx index c5278949a..6d062bcb1 100644 --- a/src/client/src/commons/form/borehole/borehole/geometryTable.jsx +++ b/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(); diff --git a/src/client/src/commons/form/borehole/borehole/sectionDisplay.jsx b/src/client/src/commons/form/borehole/borehole/sectionDisplay.jsx index 229ecd007..63b81a4b3 100644 --- a/src/client/src/commons/form/borehole/borehole/sectionDisplay.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/borehole/sectionInput.jsx b/src/client/src/commons/form/borehole/borehole/sectionInput.jsx index d6abc03d3..91c04bedc 100644 --- a/src/client/src/commons/form/borehole/borehole/sectionInput.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/completion/backfillDisplay.jsx b/src/client/src/commons/form/borehole/completion/backfillDisplay.jsx index a376769f5..38dcc8360 100644 --- a/src/client/src/commons/form/borehole/completion/backfillDisplay.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/completion/backfillInput.jsx b/src/client/src/commons/form/borehole/completion/backfillInput.jsx index e39970271..2d00ed9a4 100644 --- a/src/client/src/commons/form/borehole/completion/backfillInput.jsx +++ b/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(); diff --git a/src/client/src/commons/form/borehole/completion/casingDisplay.jsx b/src/client/src/commons/form/borehole/completion/casingDisplay.jsx index e50c9cb9f..b92094fb3 100644 --- a/src/client/src/commons/form/borehole/completion/casingDisplay.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/completion/casingInput.jsx b/src/client/src/commons/form/borehole/completion/casingInput.jsx index 2b0dd7147..899964a20 100644 --- a/src/client/src/commons/form/borehole/completion/casingInput.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/completion/completion.jsx b/src/client/src/commons/form/borehole/completion/completion.jsx index 48d23a6ec..db309e6b4 100644 --- a/src/client/src/commons/form/borehole/completion/completion.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.jsx b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.jsx index abd2eca41..5a9deca7a 100644 --- a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.jsx b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.jsx index 8bac18adf..53ae6f4a0 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.jsx b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.jsx index dd301c871..1b764cf25 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.jsx b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.jsx index bbb476916..d1728b128 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.jsx b/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.jsx index 284f0ddfe..db4798905 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/hydrogeology/observationInput.jsx b/src/client/src/commons/form/borehole/hydrogeology/observationInput.jsx index 41e3f01bd..d33437b30 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/observationInput.jsx +++ b/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 => { diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.jsx b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.jsx index d53ceaa0c..2846ac0a1 100644 --- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.jsx +++ b/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"; diff --git a/src/client/src/commons/form/borehole/segments/coordinateSegmentInterfaces.ts b/src/client/src/commons/form/borehole/segments/coordinateSegmentInterfaces.ts index 83ee9330c..152ef528f 100644 --- a/src/client/src/commons/form/borehole/segments/coordinateSegmentInterfaces.ts +++ b/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, diff --git a/src/client/src/commons/menu/detailView/detailHeader.tsx b/src/client/src/commons/menu/detailView/detailHeader.tsx index 227acf196..64579ffa1 100644 --- a/src/client/src/commons/menu/detailView/detailHeader.tsx +++ b/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"; diff --git a/src/client/src/commons/menu/headerComponent.tsx b/src/client/src/commons/menu/headerComponent.tsx index 5b1b8551f..ea2a4c7b0 100644 --- a/src/client/src/commons/menu/headerComponent.tsx +++ b/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"; diff --git a/src/client/src/commons/menu/mainView/actions/actionsInterfaces.ts b/src/client/src/commons/menu/mainView/actions/actionsInterfaces.ts index 3baebc5b9..635fd7ea1 100644 --- a/src/client/src/commons/menu/mainView/actions/actionsInterfaces.ts +++ b/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; diff --git a/src/client/src/commons/menu/mainView/actions/importer/importModalContent.tsx b/src/client/src/commons/menu/mainView/actions/importer/importModalContent.tsx index 645a57c2c..38787dbfd 100644 --- a/src/client/src/commons/menu/mainView/actions/importer/importModalContent.tsx +++ b/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"; diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx index 54e28d1a2..07fe27265 100644 --- a/src/client/src/commons/menu/mainView/mainSideNav.tsx +++ b/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"; diff --git a/src/client/src/commons/menu/mainView/menuComponents/menuComponentInterfaces.ts b/src/client/src/commons/menu/mainView/menuComponents/menuComponentInterfaces.ts index a96a29b19..c135dc73e 100644 --- a/src/client/src/commons/menu/mainView/menuComponents/menuComponentInterfaces.ts +++ b/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 { diff --git a/src/client/src/commons/menu/profilePopup.tsx b/src/client/src/commons/menu/profilePopup.tsx index 2edaf4c6b..e9b7d2364 100644 --- a/src/client/src/commons/menu/profilePopup.tsx +++ b/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 }) { diff --git a/src/client/src/components/dataCard/dataCards.jsx b/src/client/src/components/dataCard/dataCards.jsx index 1797085be..e1e4095b9 100644 --- a/src/client/src/components/dataCard/dataCards.jsx +++ b/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 {props.children()}; diff --git a/src/client/src/components/dataCard/dataDisplayCard.jsx b/src/client/src/components/dataCard/dataDisplayCard.jsx index c578cf742..53b5a05d9 100644 --- a/src/client/src/components/dataCard/dataDisplayCard.jsx +++ b/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"; diff --git a/src/client/src/components/dataCard/dataInputCard.jsx b/src/client/src/components/dataCard/dataInputCard.jsx index c41c483de..670cde8ea 100644 --- a/src/client/src/components/dataCard/dataInputCard.jsx +++ b/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"; diff --git a/src/client/src/components/baseComponents.js b/src/client/src/components/styledComponents.js similarity index 100% rename from src/client/src/components/baseComponents.js rename to src/client/src/components/styledComponents.js From 4e6dd81a1b64b041ab61c633fa083c50f518dee1 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 13:42:31 +0200 Subject: [PATCH 02/14] Add camel case hint to README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e38cf5530..672ad923e 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### Translation - Texte werden mit dem `useTranslation` hook von `react-i18next` übersetzt. Das `withTranslation HOC` wird nicht mehr verwendet. -- Neue Übersetzungskeys alphabetisch sortiert in den `common.json` Files unter `public/locale` erfassen. +- Neue Übersetzungskeys alphabetisch sortiert und in camel case in den `common.json` Files unter `public/locale` erfassen. #### Api From 693d3b365657e0ea837eeb67d0c405529f3d3eaf Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 13:53:54 +0200 Subject: [PATCH 03/14] Update README.md Co-authored-by: Daniel Jovanovic --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 672ad923e..85b4f48b4 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,6 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### Api -- Neue Endpoints werden immer im .net api erstellt. Das python legacy api wird nicht erweitert. +- 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 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. From c3e1c185c3a0ab8cf53c6b3764995eaee2022bfe Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 13:54:04 +0200 Subject: [PATCH 04/14] Update README.md Co-authored-by: Daniel Jovanovic --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 85b4f48b4..383ea19d7 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### UI/UX - Das UI Design ist im [Figma File](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) definiert. Unter Pages/Screens sind die definitiven Designs zu finden. -- Als Defaulticons können [Lucid Icons](https://lucide.dev/icons/) verwendet werden. Custom Icons können aus dem [Figma file](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert werden. Stand jetzt werden die Icons als SVG eingebunden, um die Icons farblich stylen zu können müssen fill und stroke wie folgt angepasst werden `fill="currentColor" stroke="currentColor"`. +- Standardmässig werden die [Lucid Icons](https://lucide.dev/icons/) verwendet. Custom-Icons können aus dem [Figma file](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert werden. Stand jetzt werden die Icons als SVG eingebunden, 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 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 components/styledComponents.js definiert. #### Typescript From 55c4820011d96a12b7c3eeee6609c078e362eba6 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 13:54:12 +0200 Subject: [PATCH 05/14] Update README.md Co-authored-by: Daniel Jovanovic --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 383ea19d7..819162859 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### Typescript - Neue Komponenten werden in Typescript geschrieben. -- Es werden bevorzugt interfaces statt types verwendet. +- Es werden bevorzugt Interfaces statt Types verwendet. - Interfaces die Api Calls abbilden werden unter `api/apiInterfaces.ts` definiert (`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. From 83067057128ff891c49b465cee271d25229e1f25 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 13:54:19 +0200 Subject: [PATCH 06/14] Update README.md Co-authored-by: Daniel Jovanovic --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 819162859..316751a74 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### Translation - Texte werden mit dem `useTranslation` hook von `react-i18next` übersetzt. Das `withTranslation HOC` wird nicht mehr verwendet. -- Neue Übersetzungskeys alphabetisch sortiert und in camel case in den `common.json` Files unter `public/locale` erfassen. +- Neue Übersetzungskeys alphabetisch sortiert und in CamelCase in den `common.json` Files unter `public/locale` erfassen. #### Api From 68272e4a9038b76891a117495e9d509ab12e2c9d Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 13:54:25 +0200 Subject: [PATCH 07/14] Update README.md Co-authored-by: Daniel Jovanovic --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 316751a74..3e3490c4b 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof - 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` erfassen. -#### Api +#### 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 oder wo sinnvoll mit `useQuery` von `react-query` gemacht. From 170e71d4b82172d64be7bb62c2009d6dbef02fdd Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 14:04:03 +0200 Subject: [PATCH 08/14] Update File links --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3e3490c4b..a04433a9f 100644 --- a/README.md +++ b/README.md @@ -77,19 +77,19 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof - Das UI Design ist im [Figma File](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 dem [Figma file](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert werden. Stand jetzt werden die Icons als SVG eingebunden, 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 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 components/styledComponents.js definiert. +- [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 `api/apiInterfaces.ts` definiert (`api-lib/ReduxStateInterfaces.ts` für das legacy api). +- Interfaces die Api Calls abbilden werden unter [apiInterfaces.ts](./src/client/api/apiInterfaces.ts) definiert ([ReduxStateInterfaces.ts](./src/client/api-lib/apiInterfaces.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` erfassen. +- Neue Übersetzungskeys alphabetisch sortiert und in CamelCase in den `common.json` Files unter [public/locale](./src/client/public/locale) erfassen. #### API From cae9c1fd039cc458868636b1effb8cf68071f0bf Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 14:05:41 +0200 Subject: [PATCH 09/14] Fix path --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a04433a9f..ff08c59a6 100644 --- a/README.md +++ b/README.md @@ -83,7 +83,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof - 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/api-lib/apiInterfaces.ts) für das legacy api). +- 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. From b3de82abaf1242737056fc338c05f407cc3359fa Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 14:08:37 +0200 Subject: [PATCH 10/14] Fix spelling of Legacy API --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ff08c59a6..36bc1b379 100644 --- a/README.md +++ b/README.md @@ -76,14 +76,14 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### UI/UX - Das UI Design ist im [Figma File](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 dem [Figma file](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert werden. Stand jetzt werden die Icons als SVG eingebunden, um die Icons farblich stylen zu können müssen `fill` und `stroke` wie folgt angepasst werden `fill="currentColor" stroke="currentColor"`. +- Standardmässig werden die [Lucid Icons](https://lucide.dev/icons/) verwendet. Custom-Icons können aus dem [Figma File](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert werden. Stand jetzt werden die Icons als SVG eingebunden, 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). +- 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. @@ -93,6 +93,6 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### API -- Neue Endpoints werden immer im .NET API erstellt. Das Python Legacy-API wird nicht erweitert. +- 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 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. From 736dca07cb6dc018561f03ca95345b6900f60371 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 14:09:21 +0200 Subject: [PATCH 11/14] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Roswita Tschümperlin <108136714+tschumpr@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 36bc1b379..4612d07af 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof - 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. +- 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 From 587ff357cb9955849b9a12c01472fec51a95d275 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 14:09:44 +0200 Subject: [PATCH 12/14] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Roswita Tschümperlin <108136714+tschumpr@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4612d07af..5765bc948 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### UI/UX -- Das UI Design ist im [Figma File](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) definiert. Unter Pages/Screens sind die definitiven Designs zu finden. +- 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 dem [Figma File](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert werden. Stand jetzt werden die Icons als SVG eingebunden, 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. From a7d467233e4654abcdebae39e3b34b9a85333067 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 14:20:22 +0200 Subject: [PATCH 13/14] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5765bc948..35803c185 100644 --- a/README.md +++ b/README.md @@ -83,7 +83,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof - 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). +- 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. @@ -94,5 +94,5 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### 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 oder wo sinnvoll mit `useQuery` von `react-query` gemacht. +- 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. From 4aa6028b3ebf45983e98937465b71409109390a0 Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 5 Aug 2024 14:26:13 +0200 Subject: [PATCH 14/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 35803c185..bc38922ed 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsof #### 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 dem [Figma File](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert werden. Stand jetzt werden die Icons als SVG eingebunden, um die Icons farblich stylen zu können müssen `fill` und `stroke` wie folgt angepasst werden `fill="currentColor" stroke="currentColor"`. +- 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