PSE2_FF
/
pse2_ff
0
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

#19-Konfiguration-anzeigen #55

Merged
3025495 merged 6 commits from #19-Konfiguration-anzeigen into main 2025-06-09 11:08:35 +02:00
Conversation 1 Commits 6 Files Changed 12
3019483 commented 2025-06-05 15:10:45 +02:00
Owner
  • First part of config.
  • Added standard kpi config data.
  • Added integrating from back- and frontend.

NOTE: Ticket noch nicht komplett fertig, aber für weiter bearbeitung von andern Tickets kann der teil in main gemergt werden :)

- First part of config. - Added standard kpi config data. - Added integrating from back- and frontend. NOTE: Ticket noch nicht komplett fertig, aber für weiter bearbeitung von andern Tickets kann der teil in main gemergt werden :)
3025495 was assigned by 3019483 2025-06-05 15:10:45 +02:00
3019483 added 3 commits 2025-06-05 15:10:45 +02:00
3019483 added 1 commit 2025-06-05 19:56:30 +02:00
3019483 added 1 commit 2025-06-05 21:45:19 +02:00
3019483 commented 2025-06-05 21:51:09 +02:00
Poster
Owner

Jetzt habe ich doch fertig gemacht.

  • Backend Standard-Konfig-Daten
  • Frontend Anbindung CRUD
  • Config Page mit Tabelle (drag drop Ticket #3 fertig)
  • Config Detialansicht seite (+ bearbeitbar)
  • Config Add-Seite (schickt auch ans Backend, training muss noch von andern Ticket integiert werden)
Jetzt habe ich doch fertig gemacht. - Backend Standard-Konfig-Daten - Frontend Anbindung CRUD - Config Page mit Tabelle (drag drop Ticket #3 fertig) - Config Detialansicht seite (+ bearbeitbar) - Config Add-Seite (schickt auch ans Backend, training muss noch von andern Ticket integiert werden)
3025495 approved these changes 2025-06-06 20:56:24 +02:00
project/frontend/src/components/ConfigTable.tsx
@ -0,0 +14,4 @@
useEffect(() => {
const fetchKennzahlen = async () => {
while (true) {
3025495 commented 2025-06-06 19:23:27 +02:00
Collaborator

Warum ist hier das while(true){}?

Warum ist hier das while(true){}?
3019483 commented 2025-06-08 14:50:33 +02:00
Poster
Owner

Das while (true) ist für eine "einfache" Retry-Logik:
Falls der API-Call beim ersten Mal fehlschlägt (z. B. weil der Backend-Service oder die Datenbank gerade erst gestartet wird oder temporär nicht verfügbar ist), wird der Fetch alle 2 Sekunden wiederholt, bis es erfolgreich ist. Dadurch muss der User die Seite nicht manuell neu laden, und es entstehen keine Fehler im Frontend, wenn z. B. der Coordinator oder die Datenbank neu startet oder gerade noch nicht bereit ist.

Das while (true) ist für eine "einfache" Retry-Logik: Falls der API-Call beim ersten Mal fehlschlägt (z. B. weil der Backend-Service oder die Datenbank gerade erst gestartet wird oder temporär nicht verfügbar ist), wird der Fetch alle 2 Sekunden wiederholt, bis es erfolgreich ist. Dadurch muss der User die Seite nicht manuell neu laden, und es entstehen keine Fehler im Frontend, wenn z. B. der Coordinator oder die Datenbank neu startet oder gerade noch nicht bereit ist.
project/frontend/src/components/ConfigTable.tsx
@ -0,0 +57,4 @@
throw new Error(`HTTP error! status: ${response.status}`);
}
const updatedKennzahl = await response.json();
3025495 commented 2025-06-06 19:54:44 +02:00
Collaborator

Du updatest hier den state von der "active - checkbox" im frontend erst, wenn du das response vom Server bekommst. Wenn alles auf deinem Rechner läuft funktioniert das noch gut, aber sobald frontend und backend nicht so schnell kommunizieren fühlt sich das sehr schnell laggy an (kannst du mit simuliertem langsamen Internet testen. Das fällt schon bei 4G auf).
Was man hier macht heißt "optimistic update", vereinfacht zusammengefasst: man updated die ui im frontend direkt und nur wenn der request failed rollt man das update zurück.
Wenn dich das interessiert, zu der Umsetzung steht mehr in dem pdf. Dazu ein bisschen Hintergrund: Da geht es um die Bibliothek "Tanstack Query" (die kann nicht nur react), die kümmert sich mittels caching darum, einen asyncronen state zu verwalten (also den Server-State im Frontend). Hier eine kurze erklärung zu react-query: https://ui.dev/c/query/why-react-query (wenn dich das weiter interessiert). Für die Begriffserklärung in dem PDF: Die Bibliothek unterstützt mehrere Funktionen:

  • useQuery: für das einfache laden von daten
  • useMutation: für das ändern von daten (das sind die mutations von denen da die rede ist)

Diese Liste, die häufiger in den Code-Beispielen vorkommt: ['todos', 'list', { sort }], steht immer für den key, unter dem das Element im cache abgelegt ist.

Du updatest hier den state von der "active - checkbox" im frontend erst, wenn du das response vom Server bekommst. Wenn alles auf deinem Rechner läuft funktioniert das noch gut, aber sobald frontend und backend nicht so schnell kommunizieren fühlt sich das sehr schnell laggy an (kannst du mit simuliertem langsamen Internet testen. Das fällt schon bei 4G auf). Was man hier macht heißt "optimistic update", vereinfacht zusammengefasst: man updated die ui im frontend direkt und nur wenn der request failed rollt man das update zurück. Wenn dich das interessiert, zu der Umsetzung steht mehr in dem pdf. Dazu ein bisschen Hintergrund: Da geht es um die Bibliothek "[Tanstack Query](https://tanstack.com/query/v4/docs/framework/react/overview)" (die kann nicht nur react), die kümmert sich mittels caching darum, einen asyncronen state zu verwalten (also den Server-State im Frontend). Hier eine kurze erklärung zu react-query: [https://ui.dev/c/query/why-react-query](https://ui.dev/c/query/why-react-query) (wenn dich das weiter interessiert). Für die Begriffserklärung in dem PDF: Die Bibliothek unterstützt mehrere Funktionen: - useQuery: für das einfache laden von daten - useMutation: für das ändern von daten (das sind die mutations von denen da die rede ist) Diese Liste, die häufiger in den Code-Beispielen vorkommt: ```['todos', 'list', { sort }]```, steht immer für den key, unter dem das Element im cache abgelegt ist.
👍 1
3019483 marked this conversation as resolved
project/frontend/src/components/KPIForm.tsx
@ -0,0 +26,4 @@
const [formData, setFormData] = useState<Partial<Kennzahl>>(emptyKPI);
const [isSaving, setIsSaving] = useState(false);
useEffect(() => {
3025495 commented 2025-06-06 20:01:19 +02:00
Collaborator

Du kannst dieses/n (keine ahnung ob das "der", "die" oder "das" hook ist) hook sparen, wenn du die initalData mit den Standard-Daten von emptyKPI vorbelegst:

interface KPIFormProps {
	mode: "add" | "edit";
	initialData?: Partial<Kennzahl>; //hier das null weg und das partial hinzu
	onSave: (data: Partial<Kennzahl>) => Promise<void>;
	onCancel: () => void;
	loading?: boolean;
}

const emptyKPI: Partial<Kennzahl> = {
	name: "",
	description: "",
	mandatory: false,
	type: "string",
	translation: "",
	example: "",
	active: true,
};

export function KPIForm({
	mode,
	initialData = emptyKPI, // und hier den wert setzen
	onSave,
	onCancel,
	loading = false,
}: KPIFormProps) {
	const [formData, setFormData] = useState<Partial<Kennzahl>>(initialData);
Du kannst dieses/n (keine ahnung ob das "der", "die" oder "das" hook ist) hook sparen, wenn du die initalData mit den Standard-Daten von emptyKPI vorbelegst: ```typescript interface KPIFormProps { mode: "add" | "edit"; initialData?: Partial<Kennzahl>; //hier das null weg und das partial hinzu onSave: (data: Partial<Kennzahl>) => Promise<void>; onCancel: () => void; loading?: boolean; } const emptyKPI: Partial<Kennzahl> = { name: "", description: "", mandatory: false, type: "string", translation: "", example: "", active: true, }; export function KPIForm({ mode, initialData = emptyKPI, // und hier den wert setzen onSave, onCancel, loading = false, }: KPIFormProps) { const [formData, setFormData] = useState<Partial<Kennzahl>>(initialData); ```
3019483 commented 2025-06-08 15:43:07 +02:00
Poster
Owner

Ich kenne es so, dass man für die Wiederverwendbarkeit der Komponente den useEffect benötigt. Wenn man zwischen den unterschiedlichen Modi (add/edit) wechselt oder im Edit-Modus zwischen verschiedenen KPIs zum Bearbeiten wechselt, verhindert der useEffect Fehler bei der initialen Datensetzung. Ohne den useEffect könnten z.B. alte Daten von einer KPI noch sichtbar bleiben, weil die neuen Daten nicht richtig "überschrieben" werden.

Wahrscheinlich ist es für unser Projekt eh nicht so wichtig. Oder ist es bei React ein bad practice/Soll ich es trotzdem ändern?

Ich kenne es so, dass man für die Wiederverwendbarkeit der Komponente den useEffect benötigt. Wenn man zwischen den unterschiedlichen Modi (add/edit) wechselt oder im Edit-Modus zwischen verschiedenen KPIs zum Bearbeiten wechselt, verhindert der useEffect Fehler bei der initialen Datensetzung. Ohne den useEffect könnten z.B. alte Daten von einer KPI noch sichtbar bleiben, weil die neuen Daten nicht richtig "überschrieben" werden. Wahrscheinlich ist es für unser Projekt eh nicht so wichtig. Oder ist es bei React ein bad practice/Soll ich es trotzdem ändern?
project/frontend/src/components/KPIForm.tsx
@ -0,0 +50,4 @@
}
};
const handleCancel = () => {
3025495 commented 2025-06-06 20:04:40 +02:00
Collaborator

ich glaube, die funktion brauchst du gar nicht, da der state eh verloren geht durch das onCancel()

ich glaube, die funktion brauchst du gar nicht, da der state eh verloren geht durch das onCancel()
👍 1
3019483 marked this conversation as resolved
3019483 added 1 commit 2025-06-08 15:53:41 +02:00
3025495 merged commit 3816831619 into main 2025-06-09 11:08:35 +02:00
3025495 deleted branch #19-Konfiguration-anzeigen 2025-06-09 11:08:35 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
3025495
Labels
Clear labels   
0 - 2 Std
   
1 - 2 Tag
   
2 - 5 Std
   
5 - 8 Std
   
Bug

Something is not working   
Doing

Doing   
Done

Done   
In Review
   
Kennzahlen Extraktion
   
Kennzahlen Konfigurieren
   
Kennzahlen überprüfen
   
Kennzahlen validieren
   
Kennzahlenwerte exportieren
   
Kunden Feedback
   
Nice to have
   
Pitchbook hochladen
   
To Do

To Do   
Wontfix

This won't be fixed
No Label
0 - 2 Std
1 - 2 Tag
2 - 5 Std
5 - 8 Std
Bug
Doing
Done
In Review
Kennzahlen Extraktion
Kennzahlen Konfigurieren
Kennzahlen überprüfen
Kennzahlen validieren
Kennzahlenwerte exportieren
Kunden Feedback
Nice to have
Pitchbook hochladen
To Do
Wontfix
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
3025495
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: PSE2_FF/pse2_ff#55
There is no content yet.
Delete Branch "#19-Konfiguration-anzeigen"

Deleting a branch is permanent. Although the deleted branch may exist for a short time before cleaning up, in most cases it CANNOT be undone. Continue?