This commit is contained in:
Sean Edmunds
@@ -26,7 +26,7 @@ import { buttonClasses, popoverClasses, selectClasses, textInputClasses } from '
|
||||
import type { Application } from 'types';
|
||||
import DebouncedApplication from './DebouncedApplication';
|
||||
|
||||
const ApplicationSettings = () => {
|
||||
export function Applications() {
|
||||
const allIcons: any = { ...fa6, ...vsc, ...si };
|
||||
const defaultApplication: Application = {
|
||||
id: null,
|
||||
@@ -141,165 +141,167 @@ const ApplicationSettings = () => {
|
||||
isLoading={isLoading}
|
||||
setIsLoading={setIsLoading}
|
||||
/>
|
||||
<AddItemModal
|
||||
modalOpened={modalOpened}
|
||||
handleClose={handleClose}
|
||||
title={'Add a new application'}
|
||||
body={
|
||||
<form
|
||||
onSubmit={form.onSubmit((values) => {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
endpoint: appsEndpoint,
|
||||
body: {
|
||||
...values,
|
||||
index: applications.length,
|
||||
},
|
||||
});
|
||||
handleClose();
|
||||
})}
|
||||
>
|
||||
<Stack gap={0} align='center'>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
key={form.key('name')}
|
||||
{...form.getInputProps('name')}
|
||||
label={'Name'}
|
||||
placeholder='eg. Nextcloud'
|
||||
className={textInputClasses.settingsItem}
|
||||
w={'45%'}
|
||||
classNames={textInputClasses}
|
||||
withAsterisk
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
key={form.key('baseUrl')}
|
||||
{...form.getInputProps('baseUrl')}
|
||||
label={'Base URL'}
|
||||
placeholder='eg. /nextcloud'
|
||||
className={textInputClasses.settingsItem}
|
||||
w={'45%'}
|
||||
classNames={textInputClasses}
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={isMobile ? '94%' : '92%'} justify='center'>
|
||||
<TextInput
|
||||
key={form.key('url')}
|
||||
{...form.getInputProps('url')}
|
||||
label={'URL'}
|
||||
placeholder='eg. https://domain.example.com/nextcloud'
|
||||
className={textInputClasses.settingsItem}
|
||||
w={'100%'}
|
||||
classNames={textInputClasses}
|
||||
withAsterisk
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'} justify='center' pos={'relative'}>
|
||||
<Select
|
||||
key={form.key('icon')}
|
||||
{...form.getInputProps('icon')}
|
||||
label={'Icon'}
|
||||
className={selectClasses.settingsItem}
|
||||
classNames={{
|
||||
wrapper: selectClasses.menuSelectWrapper,
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
dropdown: selectClasses.dropdown,
|
||||
}}
|
||||
w={'45%'}
|
||||
mt={'.75rem'}
|
||||
limit={100}
|
||||
placeholder='Search for an icon...'
|
||||
data={Object.keys(allIcons).map((icon) => {
|
||||
return { value: icon, label: icon };
|
||||
})}
|
||||
comboboxProps={{
|
||||
zIndex: 3000,
|
||||
}}
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
|
||||
const Icon = allIcons[item.option.value];
|
||||
return (
|
||||
<Group>
|
||||
{item.option.value}
|
||||
<Icon />
|
||||
</Group>
|
||||
);
|
||||
}}
|
||||
searchable
|
||||
maxDropdownHeight={175}
|
||||
onDropdownOpen={() => setIsOpen(true)}
|
||||
onDropdownClose={() => setIsOpen(false)}
|
||||
withAsterisk
|
||||
/>
|
||||
<TextInput
|
||||
key={form.key('filter')}
|
||||
{...form.getInputProps('filter')}
|
||||
label={'Filter'}
|
||||
placeholder='eg. Storage'
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={'1rem'}
|
||||
w={'45%'}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={defaultApplication.filterName}
|
||||
withAsterisk
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<Group mt={'1rem'}>
|
||||
<Button
|
||||
type='submit'
|
||||
className={buttonClasses.saveButton}
|
||||
classNames={buttonClasses}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
className={buttonClasses.cancelButton}
|
||||
classNames={buttonClasses}
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
}
|
||||
/>
|
||||
{modalOpened && (
|
||||
<AddItemModal
|
||||
modalOpened={modalOpened}
|
||||
handleClose={handleClose}
|
||||
title={'Add a new application'}
|
||||
body={
|
||||
<form
|
||||
onSubmit={form.onSubmit((values) => {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
endpoint: appsEndpoint,
|
||||
body: {
|
||||
...values,
|
||||
index: applications.length,
|
||||
},
|
||||
});
|
||||
handleClose();
|
||||
})}
|
||||
>
|
||||
<Stack gap={0} align='center'>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
key={form.key('name')}
|
||||
{...form.getInputProps('name')}
|
||||
label={'Name'}
|
||||
placeholder='eg. Nextcloud'
|
||||
className={textInputClasses.settingsItem}
|
||||
w={'45%'}
|
||||
classNames={textInputClasses}
|
||||
withAsterisk
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
key={form.key('baseUrl')}
|
||||
{...form.getInputProps('baseUrl')}
|
||||
label={'Base URL'}
|
||||
placeholder='eg. /nextcloud'
|
||||
className={textInputClasses.settingsItem}
|
||||
w={'45%'}
|
||||
classNames={textInputClasses}
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={isMobile ? '94%' : '92%'} justify='center'>
|
||||
<TextInput
|
||||
key={form.key('url')}
|
||||
{...form.getInputProps('url')}
|
||||
label={'URL'}
|
||||
placeholder='eg. https://domain.example.com/nextcloud'
|
||||
className={textInputClasses.settingsItem}
|
||||
w={'100%'}
|
||||
classNames={textInputClasses}
|
||||
withAsterisk
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'} justify='center' pos={'relative'}>
|
||||
<Select
|
||||
key={form.key('icon')}
|
||||
{...form.getInputProps('icon')}
|
||||
label={'Icon'}
|
||||
className={selectClasses.settingsItem}
|
||||
classNames={{
|
||||
wrapper: selectClasses.menuSelectWrapper,
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
dropdown: selectClasses.dropdown,
|
||||
}}
|
||||
w={'45%'}
|
||||
mt={'.75rem'}
|
||||
limit={100}
|
||||
placeholder='Search for an icon...'
|
||||
data={Object.keys(allIcons).map((icon) => {
|
||||
return { value: icon, label: icon };
|
||||
})}
|
||||
comboboxProps={{
|
||||
zIndex: 3000,
|
||||
}}
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
|
||||
const Icon = allIcons[item.option.value];
|
||||
return (
|
||||
<Group>
|
||||
{item.option.value}
|
||||
<Icon />
|
||||
</Group>
|
||||
);
|
||||
}}
|
||||
searchable
|
||||
maxDropdownHeight={175}
|
||||
onDropdownOpen={() => setIsOpen(true)}
|
||||
onDropdownClose={() => setIsOpen(false)}
|
||||
withAsterisk
|
||||
/>
|
||||
<TextInput
|
||||
key={form.key('filter')}
|
||||
{...form.getInputProps('filter')}
|
||||
label={'Filter'}
|
||||
placeholder='eg. Storage'
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={'1rem'}
|
||||
w={'45%'}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={defaultApplication.filterName}
|
||||
withAsterisk
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<Group mt={'1rem'}>
|
||||
<Button
|
||||
type='submit'
|
||||
className={buttonClasses.saveButton}
|
||||
classNames={buttonClasses}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
className={buttonClasses.cancelButton}
|
||||
classNames={buttonClasses}
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Stack
|
||||
mt={isMobile ? '10rem' : '6rem'}
|
||||
@@ -410,5 +412,4 @@ const ApplicationSettings = () => {
|
||||
</DragDropContext>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
export default ApplicationSettings;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user