smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Form updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-13 12:53:17 -05:00
parent 29514d3290
commit c3530a23a4
10 changed files with 472 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -17,6 +17,7 @@ import {
TextInput,
Tooltip,
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
@@ -47,6 +48,13 @@ function DebouncedGroupSettingsItem({
category: group.categoryName,
index: 0,
});
const form = useForm({
initialValues: newBookmark,
validate: {
name: isNotEmpty('Name is required'),
url: isNotEmpty('URL is required'),
},
});
const [bookmarkList, setBookmarkList] = useState<Bookmark[]>(bookmarks);
const [isOpen, setIsOpen] = useState(false);
@@ -193,7 +201,7 @@ function DebouncedGroupSettingsItem({
borderRadius: '100%',
backgroundColor: 'var(--mantine-color-accent-0)',
position: 'absolute',
top: isMobile ? 140 : 78,
top: isMobile ? 140 : 92,
right: 18,
zIndex: 10,
fontSize: '1.25rem',
@@ -307,99 +315,95 @@ function DebouncedGroupSettingsItem({
</Popover.Target>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Stack w={'100%'} display={'flex'} pos={'relative'}>
<Group w={'100%'} justify='center'>
<TextInput
label={'Name'}
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
pt={'1rem'}
classNames={textInputClasses}
onChange={(event) => {
setNewBookmark({
...newBookmark,
name: event.target.value,
});
}}
/>
<TextInput
label={'Category'}
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
pt={'1rem'}
classNames={textInputClasses}
disabled
defaultValue={group.categoryName}
onChange={(event) => {
setNewBookmark({
...newBookmark,
category: event.target.value,
});
}}
/>
</Group>
<Group w={'100%'} justify='center' mb={60}>
<TextInput
label={'URL'}
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
<form
onSubmit={form.onSubmit((values) => {
mutateAsync({
method: 'POST',
endpoint: 'api/bookmarks',
body: { ...values, index: bookmarks.length },
});
setPopoverOpened(false);
form.reset();
})}
>
<Stack w={'100%'} display={'flex'} pos={'relative'}>
<Group w={'100%'} justify='center'>
<TextInput
key={form.key('name')}
{...form.getInputProps('name')}
label={'Name'}
placeholder='Google'
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
pt={'1rem'}
classNames={textInputClasses}
withAsterisk
/>
<TextInput
key={form.key('category')}
{...form.getInputProps('category')}
label={'Category'}
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
pt={'1rem'}
classNames={textInputClasses}
disabled
defaultValue={group.categoryName}
/>
</Group>
<Group w={'100%'} justify='center' mb={60}>
<TextInput
key={form.key('url')}
{...form.getInputProps('url')}
label={'URL'}
placeholder='https://google.com'
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
w={'100%'}
pt={'1rem'}
classNames={textInputClasses}
withAsterisk
/>
</Group>
<Group
w={'100%'}
pt={'1rem'}
classNames={textInputClasses}
onChange={(event) => {
setNewBookmark({
...newBookmark,
url: event.target.value,
});
}}
/>
</Group>
<Group
w={'100%'}
pos={'absolute'}
bottom={8}
align='center'
justify='center'
>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newBookmark) {
mutateAsync({
method: 'POST',
endpoint: 'api/bookmarks',
body: { ...newBookmark, index: bookmarks.length },
});
pos={'absolute'}
bottom={8}
align='center'
justify='center'
>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
setPopoverOpened(false);
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
setPopoverOpened(false);
}}
>
Cancel
</Button>
</Group>
</Stack>
form.reset();
}}
>
Cancel
</Button>
</Group>
</Stack>
</form>
</Card>
</Popover.Dropdown>
</Popover>