Add Profile editing dialog

packages/core/src/components/molecules/ProfileSelector.tsx

@@ -1,20 +1,51 @@
 import React from "react";
-import { IProfile } from "../../service";
-import { CardActions, Button, ButtonGroup, Card, CardContent, Stack } from "@mui/material";
+import { IConfigurationService, IProfile } from "../../service";
+import { CardActions, Button, ButtonGroup, Card, CardContent, Stack, Dialog, DialogTitle, DialogContent, DialogActions } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { useComputed, useSignal } from "@preact/signals-react";
+
+export function ProfileSelector(props: { profile?: IProfile, profiles: string[], switchProfile: (name: string) => void, configService: IConfigurationService }) {
+	const { configService } = props;
 
-export function ProfileSelector(props: { profile?: IProfile, profiles: string[], switchProfile: (name: string) => void }) {
 	const [_t] = useTranslation();
+	const editing = useSignal<string | undefined>(undefined);
+
+	const dialog = useComputed(() => {
+		if (editing.value !== undefined) {
+			return <></>;
+		}
+		return (
+			<Dialog
+				open={true}
+				onClose={() => editing.value = undefined}
+			>
+				<DialogTitle>{_t('EditProfile')}</DialogTitle>
+				<DialogContent>
+					TODO
+				</DialogContent>
+				<DialogActions>
+					<Button onClick={() => editing.value = undefined}>{_t('Cancel')}</Button>
+					<Button>{_t('Save')}</Button>
+				</DialogActions>
+			</Dialog>
+		);
+	});
 
-	return <Stack>
-		{props.profiles.map(p => <Card key={p}>
-			<CardContent>{p}</CardContent>
-			<CardActions>
-				<ButtonGroup>
-					<Button>{_t('Edit')}</Button>
-					<Button onClick={() => props.switchProfile(p)}>{_t('Start')}</Button>
-				</ButtonGroup>
-			</CardActions>
-		</Card>)}
-	</Stack>
+	return (<>
+		<Stack spacing={1}>
+			{props.profiles.map(p => <Card key={p}>
+				<CardContent>{p}</CardContent>
+				<CardActions>
+					<ButtonGroup>
+						<Button onClick={() => editing.value = p}>{_t('Edit')}</Button>
+						<Button onClick={() => props.switchProfile(p)}>{_t('Start')}</Button>
+					</ButtonGroup>
+				</CardActions>
+			</Card>)}
+			<div>
+				<Button onClick={() => editing.value = ''}>{_t('AddProfile')}</Button>
+			</div>
+		</Stack>
+		{dialog}
+	</>);
 }

packages/core/src/components/pages/AppContext.tsx

@@ -82,7 +82,7 @@ export function AppContextProvider(props: PropsWithChildren<IAppInit>) {
 			case LoadState.Idle:
 				return (
 					<Box>
-						<ProfileSelector switchProfile={start} profiles={props.configService.getProfiles()} />
+						<ProfileSelector switchProfile={start} profiles={props.configService.getProfiles()} configService={configService} />
 					</Box>
 				);
 			case LoadState.Starting:

packages/core/src/translations/de.json

@@ -1,9 +1,13 @@
 {
+	"AddProfile": "Profil hinzufügen",
+	"Cancel": "Abbrechen",
 	"Edit": "Bearbeiten",
+	"EditProfile": "Profil bearbeiten",
 	"Home": "Home",
 	"Loading": "Laden...",
 	"Logout": "Abmelden",
 	"Movies": "Filme",
+	"Save": "Speichern",
 	"Search": "Suche",
 	"Start": "Starten",
 	"Starting": "Starten...",

packages/core/src/translations/en.json

@@ -1,9 +1,13 @@
 {
+	"AddProfile": "Add profile",
+	"Cancel": "Cancel",
 	"Edit": "Edit",
+	"EditProfile": "Edit profile",
 	"Home": "Home",
 	"Loading": "Loading...",
 	"Logout": "Logout",
 	"Movies": "Movies",
+	"Save": "Save",
 	"Search": "Search",
 	"Start": "Start",
 	"Starting": "Starting node...",