375 lines
11 KiB
TypeScript
375 lines
11 KiB
TypeScript
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
|
|
import {
|
|
Box,
|
|
Button,
|
|
type ComboboxItem,
|
|
type ComboboxLikeRenderOptionInput,
|
|
Grid,
|
|
GridCol,
|
|
Group,
|
|
Popover,
|
|
Select,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
} from '@mantine/core';
|
|
import { isNotEmpty, useForm } from '@mantine/form';
|
|
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
|
import { AppItem } from 'components';
|
|
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import * as fa6 from 'react-icons/fa6';
|
|
import * as si from 'react-icons/si';
|
|
import * as vsc from 'react-icons/vsc';
|
|
import { popoverClasses, selectClasses, textInputClasses } from 'styles';
|
|
import type { Application } from 'types';
|
|
import AddItemModal from '../Shared/AddItemModal';
|
|
import NoItemsFound from '../Shared/NoItemsFound';
|
|
import SettingsHeader from '../Shared/SettingsHeader';
|
|
import DebouncedApplication from './DebouncedApplication';
|
|
|
|
const ApplicationSettings = () => {
|
|
const allIcons: any = { ...fa6, ...vsc, ...si };
|
|
const defaultApplication: Application = {
|
|
id: null,
|
|
name: '',
|
|
url: '',
|
|
icon: '',
|
|
baseUrl: '',
|
|
filterName: 'Default',
|
|
index: 0,
|
|
enabled: 1,
|
|
};
|
|
const form = useForm({
|
|
initialValues: defaultApplication,
|
|
validate: {
|
|
name: isNotEmpty('Name is required'),
|
|
url: isNotEmpty('URL is required'),
|
|
icon: isNotEmpty('Icon is required'),
|
|
filterName: isNotEmpty('Filter name is required'),
|
|
},
|
|
});
|
|
const appsEndpoint = 'api/applications';
|
|
const appsOrderEndpoint = 'api/applicationOrder';
|
|
const { data: applicationData, isFetching: isAppsFetching } = useQueryAPI({
|
|
endpoint: appsEndpoint,
|
|
});
|
|
const [applications, setApplications] = useState<Application[]>([]);
|
|
const [applicationList, setApplicationList] = useState<Application[]>([]);
|
|
const { isMobile, reorder } = useCommonHooks();
|
|
const { mutateAsync } = useMutationAPI();
|
|
const [searchValue, setSearchValue] = useState('');
|
|
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
|
|
const [dragging, setDragging] = useState(false);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
function onDragEnd(result: any) {
|
|
if (!result.destination) {
|
|
return;
|
|
}
|
|
|
|
if (result.destination.index === result.source.index) {
|
|
return;
|
|
}
|
|
|
|
const items = reorder(applications, result.source.index, result.destination.index);
|
|
setApplicationList(
|
|
items.map((item: any, index: number) => {
|
|
return {
|
|
...item,
|
|
index: index,
|
|
};
|
|
}),
|
|
);
|
|
}
|
|
|
|
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
|
|
|
const handleClose = () => {
|
|
closeModal();
|
|
form.reset();
|
|
};
|
|
useEffect(() => {
|
|
if (applicationData && !isAppsFetching) {
|
|
setApplications(
|
|
applicationData
|
|
.filter(
|
|
(a: Application) =>
|
|
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
|
|
a.url.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
|
|
a.baseUrl.toLowerCase().includes(debouncedSearch.toLowerCase()),
|
|
)
|
|
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
|
|
);
|
|
}
|
|
if (debouncedSearch === searchValue) {
|
|
setIsLoading(false);
|
|
}
|
|
}, [applicationData, isAppsFetching, debouncedSearch]);
|
|
|
|
useEffect(() => {
|
|
if (applicationList.length > 0 && applicationList !== applications) {
|
|
mutateAsync({
|
|
method: 'PATCH',
|
|
endpoint: appsOrderEndpoint,
|
|
body: applicationList,
|
|
});
|
|
}
|
|
}, [applicationList]);
|
|
return (
|
|
<Stack>
|
|
<SettingsHeader
|
|
setDragging={applications.length > 0 ? setDragging : undefined}
|
|
openModal={openModal}
|
|
title={'Applications'}
|
|
tooltip={{
|
|
title:
|
|
'Applications are the app buttons that will be displayed on the homepage.',
|
|
highlightList: [
|
|
'Applications',
|
|
'applicationData',
|
|
'application',
|
|
'app',
|
|
'apps',
|
|
'name',
|
|
'base url',
|
|
'url',
|
|
'icon',
|
|
'filter',
|
|
],
|
|
description:
|
|
'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
|
|
}}
|
|
searchValue={searchValue}
|
|
setSearchValue={setSearchValue}
|
|
searchPlaceholder={'Search Applications...'}
|
|
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
|
|
/>
|
|
<TextInput
|
|
key={form.key('baseUrl')}
|
|
{...form.getInputProps('baseUrl')}
|
|
label={'Base URL'}
|
|
placeholder='eg. /nextcloud'
|
|
className={textInputClasses.settingsItem}
|
|
w={'45%'}
|
|
classNames={textInputClasses}
|
|
/>
|
|
</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
|
|
/>
|
|
</Group>
|
|
<Group w={'100%'} justify='center' pos={'relative'}>
|
|
<Select
|
|
key={form.key('icon')}
|
|
{...form.getInputProps('icon')}
|
|
label={'Icon'}
|
|
className={selectClasses.settingsItem}
|
|
classNames={{
|
|
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,
|
|
}}
|
|
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
|
|
/>
|
|
</Group>
|
|
<Group mt={'1rem'}>
|
|
<Button type='submit' color={'green'}>
|
|
Save
|
|
</Button>
|
|
<Button
|
|
color={'red'}
|
|
styles={{ label: { color: 'black' } }}
|
|
onClick={handleClose}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</form>
|
|
}
|
|
/>
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
|
<Stack
|
|
mt={isMobile ? '10rem' : '6rem'}
|
|
mb={isMobile ? '6rem' : '1rem'}
|
|
align='center'
|
|
>
|
|
{applications.length > 0 ? (
|
|
<Droppable droppableId={'groupList'}>
|
|
{(provided) => (
|
|
<Grid
|
|
columns={18}
|
|
w={dragging ? '30%' : '75%'}
|
|
ref={provided.innerRef}
|
|
{...provided.droppableProps}
|
|
>
|
|
{applications?.map((application: Application, index: number) => (
|
|
<GridCol span={dragging ? 18 : 6} key={application.id}>
|
|
{dragging ? (
|
|
<Draggable
|
|
key={application.id}
|
|
draggableId={`${application.id}`}
|
|
index={Number(application.index)}
|
|
>
|
|
{(provided) => (
|
|
<Box
|
|
ref={provided.innerRef}
|
|
{...provided.draggableProps}
|
|
{...provided.dragHandleProps}
|
|
>
|
|
<Box pos={'relative'} h={'100%'}>
|
|
<Text
|
|
style={{
|
|
color: 'var(--mantine-color-primary-0)',
|
|
zIndex: 1,
|
|
position: 'absolute',
|
|
right: 4,
|
|
bottom: 0,
|
|
}}
|
|
>
|
|
#{index + 1}
|
|
</Text>
|
|
<AppItem
|
|
key={application.name}
|
|
name={application.name}
|
|
url={application.url}
|
|
icon={application.icon}
|
|
enabled={application.enabled}
|
|
scale={2}
|
|
linksActive={false}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Draggable>
|
|
) : (
|
|
<Popover
|
|
withArrow
|
|
withOverlay
|
|
trapFocus
|
|
closeOnClickOutside={!isOpen}
|
|
classNames={popoverClasses}
|
|
middlewares={{ shift: { padding: 20 } }}
|
|
position='bottom'
|
|
offset={isMobile ? -100 : 0}
|
|
>
|
|
<Popover.Target>
|
|
<Box
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<AppItem
|
|
key={application.name}
|
|
name={application.name}
|
|
url={application.url}
|
|
icon={application.icon}
|
|
enabled={application.enabled}
|
|
scale={2}
|
|
linksActive={false}
|
|
/>
|
|
</Box>
|
|
</Popover.Target>
|
|
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
|
|
<DebouncedApplication
|
|
application={application}
|
|
setIsOpen={setIsOpen}
|
|
allIcons={allIcons}
|
|
/>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
)}
|
|
</GridCol>
|
|
))}
|
|
{provided.placeholder}
|
|
</Grid>
|
|
)}
|
|
</Droppable>
|
|
) : (
|
|
<NoItemsFound />
|
|
)}
|
|
</Stack>
|
|
</DragDropContext>
|
|
</Stack>
|
|
);
|
|
};
|
|
export default ApplicationSettings;
|