This repository has been archived on 2025-03-19. You can view files and clone it, but cannot push or open issues or pull requests.
feishin/src/renderer/features/playlists/components/update-playlist-form.tsx
jeffvli d63e5f5784 Add owner to playlist update query
- Support smart playlist rules
- Add user list query
2023-01-04 18:33:49 -08:00

99 lines
2.7 KiB
TypeScript

import { Group, Stack } from '@mantine/core';
import { useForm } from '@mantine/form';
import { ServerType, UpdatePlaylistBody, UpdatePlaylistQuery, User } from '/@/renderer/api/types';
import { Button, Select, Switch, TextInput, toast } from '/@/renderer/components';
import { useUpdatePlaylist } from '/@/renderer/features/playlists/mutations/update-playlist-mutation';
import { useCurrentServer } from '/@/renderer/store';
interface UpdatePlaylistFormProps {
body: Partial<UpdatePlaylistBody>;
onCancel: () => void;
query: UpdatePlaylistQuery;
users?: User[];
}
export const UpdatePlaylistForm = ({ users, query, body, onCancel }: UpdatePlaylistFormProps) => {
const mutation = useUpdatePlaylist();
const server = useCurrentServer();
const userList = users?.map((user) => ({
label: user.name,
value: user.id,
}));
const form = useForm<UpdatePlaylistBody>({
initialValues: {
comment: body?.comment || '',
name: body?.name || '',
ndParams: {
owner: body?.ndParams?.owner || '',
ownerId: body?.ndParams?.ownerId || '',
public: body?.ndParams?.public || false,
rules: undefined,
sync: body?.ndParams?.sync || false,
},
},
});
const handleSubmit = form.onSubmit((values) => {
mutation.mutate(
{ body: values, query },
{
onError: (err) => {
toast.error({ message: err.message, title: 'Error updating playlist' });
},
onSuccess: () => {
toast.success({ message: 'Playlist updated successfully' });
onCancel();
},
},
);
});
const isPublicDisplayed = server?.type === ServerType.NAVIDROME;
const isSubmitDisabled = !form.values.name || mutation.isLoading;
return (
<form onSubmit={handleSubmit}>
<Stack>
<TextInput
data-autofocus
required
label="Name"
{...form.getInputProps('name')}
/>
<TextInput
label="Description"
{...form.getInputProps('comment')}
/>
<Select
data={userList || []}
{...form.getInputProps('ndParams.ownerId')}
label="Owner"
/>
{isPublicDisplayed && (
<Switch
label="Is Public?"
{...form.getInputProps('public')}
/>
)}
<Group position="right">
<Button
variant="subtle"
onClick={onCancel}
>
Cancel
</Button>
<Button
disabled={isSubmitDisabled}
loading={mutation.isLoading}
type="submit"
variant="filled"
>
Save
</Button>
</Group>
</Stack>
</form>
);
};