Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 01:15:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add the ability to edit the service.

Browse Source 
Fixes #2
This commit is contained in:
Aj - Thomas
2022-05-06 22:29:47 +02:00
parent db01831916
commit c9dd7db9ef
3 changed files with 155 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
components/AppShelf/AddAppShelfItem.tsx
View File

@@ -22,15 +22,6 @@ export default function AddItemShelfItem(props: any) {
const { addService } = useConfig();
const [opened, setOpened] = useState(false);
const theme = useMantineTheme();
const form = useForm({
initialValues: {
type: 'Other',
name: '',
icon: '',
url: '',
apiKey: undefined as unknown as string,
},
});
return (
<>
<Modal
@@ -40,76 +31,7 @@ export default function AddItemShelfItem(props: any) {
onClose={() => setOpened(false)}
title="Add a service"
>
<Center>
<Image
height={120}
width={120}
src={form.values.icon}
alt="Placeholder"
withPlaceholder
/>
</Center>
<form
onSubmit={form.onSubmit(() => {
addService(form.values);
setOpened(false);
form.reset();
})}
>
<Group direction="column" grow>
<TextInput
required
label="Service name"
placeholder="Plex"
value={form.values.name}
onChange={(event) => form.setFieldValue('name', event.currentTarget.value)}
error={form.errors.name && 'Invalid name'}
/>
<TextInput
required
label="Icon url"
placeholder="https://i.gifer.com/ANPC.gif"
value={form.values.icon}
onChange={(event) => {
form.setFieldValue('icon', event.currentTarget.value);
}}
error={form.errors.icon && 'Icon url is invalid'}
/>
<TextInput
required
label="Service url"
placeholder="http://localhost:8989"
value={form.values.url}
onChange={(event) => form.setFieldValue('url', event.currentTarget.value)}
error={form.errors.url && 'Service url is invalid'}
/>
<Select
label="Select the type of service (used for API calls)"
defaultValue="Other"
placeholder="Pick one"
value={form.values.type}
required
searchable
onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
data={ServiceTypeList}
/>
{(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
<TextInput
required
label="API key"
placeholder="Your API key"
value={form.values.apiKey}
onChange={(event) => form.setFieldValue('apiKey', event.currentTarget.value)}
error={form.errors.apiKey && 'Invalid API key'}
/>
)}
</Group>
<Group grow position="center" mt="xl">
<Button type="submit">Add service</Button>
</Group>
</form>
<AddAppShelfItemForm setOpened={setOpened} />
</Modal>
<AspectRatio
style={{
@@ -138,3 +60,101 @@ export default function AddItemShelfItem(props: any) {
</>
);
}
export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
const { setOpened } = props;
const { addService, config, setConfig } = useConfig();
const form = useForm({
initialValues: {
type: props.type ?? 'Other',
name: props.name ?? '',
icon: props.icon ?? '',
url: props.url ?? '',
apiKey: props.apiKey ?? (undefined as unknown as string),
},
});
return (
<>
<Center>
<Image height={120} width={120} src={form.values.icon} alt="Placeholder" withPlaceholder />
</Center>
<form
onSubmit={form.onSubmit(() => {
// If service already exists, update it.
if (config.services && config.services.find((s) => s.name === form.values.name)) {
setConfig({
...config,
services: config.services.map((s) => {
if (s.name === form.values.name) {
return {
...form.values,
};
}
return s;
}),
});
} else {
addService(form.values);
}
setOpened(false);
form.reset();
})}
>
<Group direction="column" grow>
<TextInput
required
label="Service name"
placeholder="Plex"
value={form.values.name}
onChange={(event) => form.setFieldValue('name', event.currentTarget.value)}
error={form.errors.name && 'Invalid name'}
/>
<TextInput
required
label="Icon url"
placeholder="https://i.gifer.com/ANPC.gif"
value={form.values.icon}
onChange={(event) => {
form.setFieldValue('icon', event.currentTarget.value);
}}
error={form.errors.icon && 'Icon url is invalid'}
/>
<TextInput
required
label="Service url"
placeholder="http://localhost:8989"
value={form.values.url}
onChange={(event) => form.setFieldValue('url', event.currentTarget.value)}
error={form.errors.url && 'Service url is invalid'}
/>
<Select
label="Select the type of service (used for API calls)"
defaultValue="Other"
placeholder="Pick one"
value={form.values.type}
required
searchable
onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
data={ServiceTypeList}
/>
{(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
<TextInput
required
label="API key"
placeholder="Your API key"
value={form.values.apiKey}
onChange={(event) => form.setFieldValue('apiKey', event.currentTarget.value)}
error={form.errors.apiKey && 'Invalid API key'}
/>
)}
</Group>
<Group grow position="center" mt="xl">
<Button type="submit">{props.message ?? 'Add service'}</Button>
</Group>
</form>
</>
);
}