Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-11 07:55:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

🔀 Merge pull request #177 from ajnart/ajnart/issue150

Browse Source 
✨ Ability to toggle categories
This commit is contained in:
Thomas Camlong
2022-06-06 21:40:02 +02:00
committed by GitHub
parent 2e461b4e7a 1d1495453a
commit ace8bd75e7
1 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/AppShelf/AppShelf.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Grid, Group, Title } from '@mantine/core'; import { Accordion, Grid, Group } from '@mantine/core';
import { import {
closestCenter, closestCenter,
DndContext, DndContext,
@@ -11,6 +11,7 @@ import {
useSensors, useSensors,
} from '@dnd-kit/core'; } from '@dnd-kit/core';
import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'; import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import { useLocalStorage } from '@mantine/hooks';
import { useConfig } from '../../tools/state'; import { useConfig } from '../../tools/state';
import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem'; import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
@@ -18,8 +19,14 @@ import { ModuleWrapper } from '../modules/moduleWrapper';
import { DownloadsModule } from '../modules'; import { DownloadsModule } from '../modules';
const AppShelf = (props: any) => { const AppShelf = (props: any) => {
const [toggledCategories, settoggledCategories] = useLocalStorage({
key: 'app-shelf-toggled',
// This is a bit of a hack to get the 5 first categories to be toggled on by default
defaultValue: { 0: true, 1: true, 2: true, 3: true, 4: true } as Record<string, boolean>,
});
const [activeId, setActiveId] = useState(null); const [activeId, setActiveId] = useState(null);
const { config, setConfig } = useConfig(); const { config, setConfig } = useConfig();
const sensors = useSensors( const sensors = useSensors(
useSensor(TouchSensor, { useSensor(TouchSensor, {
activationConstraint: { activationConstraint: {
@@ -110,26 +117,31 @@ const AppShelf = (props: any) => {
const noCategory = config.services.filter( const noCategory = config.services.filter(
(e) => e.category === undefined || e.category === null (e) => e.category === undefined || e.category === null
); );
// Create an item with 0: true, 1: true, 2: true... For each category
return ( return (
// Return one item for each category // Return one item for each category
<Group grow direction="column"> <Group grow direction="column">
{categoryList.map((category) => ( <Accordion
<> order={2}
<Title order={3} key={category}> iconPosition="right"
{category} multiple
</Title> styles={{
{item(category)} item: {
</> borderRadius: '20px',
))} },
{/* Return the item for all services without category */} }}
{noCategory && noCategory.length > 0 ? ( initialState={toggledCategories}
<> onChange={(idx) => settoggledCategories(idx)}
<Title order={3}>Other</Title> >
{item()} {categoryList.map((category, idx) => (
</> <Accordion.Item label={category}>{item(category)}</Accordion.Item>
) : null} ))}
<ModuleWrapper mt="xl" module={DownloadsModule} /> {/* Return the item for all services without category */}
{noCategory && noCategory.length > 0 ? (
<Accordion.Item label="Other">{item()}</Accordion.Item>
) : null}
<ModuleWrapper mt="xl" module={DownloadsModule} />
</Accordion>
</Group> </Group>
); );
} }