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

App and sorting updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-01 13:59:18 -05:00
parent b741903649
commit c36ca07893
10 changed files with 390 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -1,3 +1,4 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import {
ActionIcon,
Box,
@@ -11,6 +12,7 @@ import {
Modal,
Popover,
Stack,
Switch,
Text,
TextInput,
} from '@mantine/core';
@@ -36,19 +38,50 @@ const ApplicationSettings = () => {
endpoint: endpoint,
});
const [applicationData, setApplicationData] = useState<Application[]>([]);
const [applicationList, setApplicationList] = useState<Application[]>([]);
const { theme, isMobile, modalStyle } = useCommonHooks();
const [newApplication, setNewApplication] = useState<Application>({
id: undefined,
id: null,
name: '',
url: '',
icon: '',
baseUrl: '',
filterName: '',
index: 0,
enabled: 1,
});
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [dragging, setDragging] = useState(false);
const reorder = (list: any, startIndex: any, endIndex: any) => {
const result = Array.from(list);
const [removed]: any = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
function onDragEnd(result: any) {
if (!result.destination) {
return;
}
if (result.destination.index === result.source.index) {
return;
}
const items = reorder(applicationData, 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);
useEffect(() => {
@@ -58,11 +91,21 @@ const ApplicationSettings = () => {
.filter((a: Application) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.sort((a: Application, b: Application) => (a.name > b.name ? 1 : -1)),
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
);
}
}, [apps, isAppsFetching, debouncedSearch]);
useEffect(() => {
if (applicationList.length > 0 && applicationList !== applicationData) {
mutateAsync({
method: 'PATCH',
endpoint: 'api/applicationOrder',
body: applicationList,
});
}
}, [applicationList]);
return (
<Stack w={'100%'}>
<Modal.Root
@@ -266,33 +309,132 @@ const ApplicationSettings = () => {
setSearchValue(event.target.value);
}}
/>
<Switch
label={<Text c={theme.primaryColor}>Reorder</Text>}
labelPosition='left'
pos={'absolute'}
right={isMobile ? '2rem' : '1rem'}
top={isMobile ? '10rem' : undefined}
onChange={(e) => {
setDragging(e.target.checked);
}}
color={theme.primaryColor}
styles={{
label: {
color: theme.primaryColor,
top: isMobile ? -22 : 0,
left: isMobile ? -8 : 0,
position: isMobile ? 'absolute' : undefined,
},
}}
/>
</Group>
<Stack w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{applicationData?.map((application: Application) => (
<GridCol span={6} key={application.id}>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
<Box
onClick={(e) => {
e.stopPropagation();
}}
>
<AppSettingsItem
url={application.url}
icon={application.icon}
name={application.name}
/>
</Box>
</Popover.Target>
<Popover.Dropdown>
<DebouncedApplication application={application} />
</Popover.Dropdown>
</Popover>
</GridCol>
))}
</Grid>
</Stack>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack w={'100%'} align='center'>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
w={'75%'}
align='center'
justify='center'
ref={provided.innerRef}
{...provided.droppableProps}
>
{applicationData?.map((app: Application) => (
<Draggable
key={app.id}
draggableId={`${app.id}`}
index={Number(app.index)}
>
{(provided) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Card
w={'400px'}
style={{
backgroundColor: theme.searchColor,
border: '1px solid var(--color-border)',
borderRadius: '8px',
}}
>
<Group gap={0} align='center' justify='space-between'>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{app.name}
</Text>
</Stack>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Filter Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{app.filterName}
</Text>
</Stack>
</Group>
</Card>
</Box>
)}
</Draggable>
))}
{provided.placeholder}
</Stack>
)}
</Droppable>
</Stack>
</DragDropContext>
) : (
<Stack w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{applicationData?.map((application: Application) => (
<GridCol span={6} key={application.id}>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
<Box
onClick={(e) => {
e.stopPropagation();
}}
>
<AppSettingsItem
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
/>
</Box>
</Popover.Target>
<Popover.Dropdown>
<DebouncedApplication application={application} />
</Popover.Dropdown>
</Popover>
</GridCol>
))}
</Grid>
</Stack>
)}
</Stack>
);
};