Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-01-14 19:42:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Issue with moving categories up / down

Browse Source
This commit is contained in:
Meier Lukas
2023-10-09 06:30:43 +02:00
parent afe4ae54fa
commit fe36cffd19
11 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Board/Sections/Category/category-actions.ts → src/components/Board/Sections/Category/Actions/category-actions.ts
View File

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
import { v4 } from 'uuid';
import { api } from '~/utils/api';
import { type CategorySection, type EmptySection } from '../../context';
import { type CategorySection, type EmptySection } from '../../../context';
type AddCategory = {
name: string;
@@ -100,16 +100,16 @@ export const useCategoryActions = ({ boardName }: { boardName: string }) => {
);
const moveCategory = useCallback(
({ id: categoryId, direction }: MoveCategory) => {
({ id, direction }: MoveCategory) => {
utils.boards.byName.setData({ boardName }, (prev) => {
if (!prev) return prev;
const currentCategory = prev.sections.find(
(section): section is CategorySection =>
section.type === 'category' && section.id === categoryId
(section): section is CategorySection => section.type === 'category' && section.id === id
);
if (!currentCategory) return prev;
if (currentCategory?.position === 1 && direction === 'up') return prev;
console.log('test');
if (currentCategory?.position === prev.sections.length - 2 && direction === 'down')
return prev;
@@ -118,19 +118,25 @@ export const useCategoryActions = ({ boardName }: { boardName: string }) => {
sections: prev.sections.map((section) => {
if (section.type !== 'category' && section.type !== 'empty') return section;
const offset = direction === 'up' ? -2 : 2;
console.log(section, offset);
// Move category and empty section
if (
section.position === currentCategory.position ||
section.position - 1 === currentCategory.position
) {
console.log('move category', section);
return {
...section,
position: section.position + offset,
};
}
// Move all sections behind
if (section.position >= currentCategory.position + offset) {
if (
direction === 'up' &&
(section.position === currentCategory.position - 2 ||
section.position === currentCategory.position - 1)
) {
console.log('something', section);
return {
...section,
position: section.position + 2,
@@ -138,16 +144,19 @@ export const useCategoryActions = ({ boardName }: { boardName: string }) => {
}
if (
direction === 'up' &&
direction === 'down' &&
(section.position === currentCategory.position + 2 ||
section.position === currentCategory.position + 3)
) {
console.log('something', section);
return {
...section,
position: section.position - 2,
};
}
console.log('no change', section);
return section;
}),
};

6
src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx → src/components/Board/Sections/Category/Actions/category-menu-actions.tsx
View File

@@ -1,12 +1,12 @@
import { v4 as uuidv4 } from 'uuid';
import { useCategoryActions } from '~/components/Board/Sections/Category/category-actions';
import { useCategoryActions } from '~/components/Board/Sections/Category/Actions/category-actions';
import { useRequiredBoard } from '~/components/Board/context';
import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
import { CategoryType } from '~/types/category';
import { CategoryEditModalInnerProps } from './CategoryEditModal';
import { CategoryEditModalInnerProps } from '../CategoryEditModal';
export const useCategoryActionHelper = (category: CategoryType) => {
export const useCategoryMenuActions = (category: CategoryType) => {
const boardName = useRequiredBoard().name;
const { addCategory, moveCategory, removeCategory, renameCategory } = useCategoryActions({
boardName,

0
src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx → src/components/Board/Sections/Category/CategoryEditModal.tsx
View File

6
src/components/Board/Sections/Category/CategoryMenu.tsx
View File

@@ -15,9 +15,9 @@ import {
import { useTranslation } from 'next-i18next';
import { useCallback, useMemo } from 'react';
import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
import { useCategoryActionHelper } from '~/components/Dashboard/Wrappers/Category/useCategoryActions';
import { AppItem, CategorySection } from '../../context';
import { useCategoryMenuActions } from './Actions/category-menu-actions';
type CategoryMenuProps = {
category: CategorySection;
@@ -42,7 +42,7 @@ export const CategoryMenu = ({ category }: CategoryMenuProps) => {
<Menu.Dropdown>
{actions.map((action) => (
<>
{action.group && <Menu.Label>{t(action.group)}</Menu.Label>}
{action.group && <Menu.Label key={action.group}>{t(action.group)}</Menu.Label>}
<Menu.Item
key={action.label}
icon={<action.icon size="1rem" />}
@@ -60,7 +60,7 @@ export const CategoryMenu = ({ category }: CategoryMenuProps) => {
const useEditModeActions = (category: CategorySection): ActionDefinition[] => {
const { addCategoryAbove, addCategoryBelow, moveCategoryUp, moveCategoryDown, edit, remove } =
useCategoryActionHelper(category);
useCategoryMenuActions(category);
return [
{

10
src/components/Board/Sections/CategorySection.tsx
View File

@@ -20,12 +20,6 @@ export const BoardCategorySection = ({ section, isOpened, toggle }: DashboardCat
const { refs } = useGridstack({ section });
const isEditMode = useEditModeStore((x) => x.enabled);
const { classes: cardClasses, cx } = useCardStyles(true);
const { t } = useTranslation(['layout/common', 'common']);
const openAllApps = useOpenAllApps();
const apps = useMemo(
() => section.items.filter((x): x is AppItem => x.type === 'app'),
[section.items.length]
);
return (
<Accordion
@@ -43,7 +37,9 @@ export const BoardCategorySection = ({ section, isOpened, toggle }: DashboardCat
<Accordion.Item value={section.id}>
<Group noWrap align="center">
<Accordion.Control>
<Title order={3}>{section.name}</Title>
<Title order={3}>
{section.name} {section.position}
</Title>
</Accordion.Control>
<CategoryMenu category={section} />
</Group>

2
src/components/Board/gridstack/context.tsx
View File

@@ -1,5 +1,5 @@
import { GridStack } from 'fily-publish-gridstack';
import { PropsWithChildren, createContext, createRef, useContext } from 'react';
import { PropsWithChildren, createContext, useContext } from 'react';
type GridstackContextProps = {
ref: React.MutableRefObject<GridStack | undefined> | null;

1
src/components/Board/gridstack/useResizeGridItem.ts
View File

@@ -13,6 +13,7 @@ export const useResizeGridItem = () => {
const gridstackRef = useGridstackRef();
return ({ height, width, ...options }: ResizeGridItemProps) => {
if (!itemRef?.current) return;
gridstackRef?.current?.update(itemRef.current!, {
...options,
h: height,

2
src/components/Board/item/context.tsx
View File

@@ -11,8 +11,6 @@ const GridItemContext = createContext<GridItemContextProps>({
export const useGridItemRef = () => {
const ctx = useContext(GridItemContext);
if (!ctx || !ctx.ref)
throw new Error('useGridstackContext must be used within a GridItemProvider');
return ctx.ref;
};

2
src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
View File

@@ -6,13 +6,13 @@ import { motion } from 'framer-motion';
import { useTranslation } from 'next-i18next';
import { ReactNode } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { CategoryEditModalInnerProps } from '~/components/Board/Sections/Category/CategoryEditModal';
import { useConfigContext } from '~/config/provider';
import { useConfigStore } from '~/config/store';
import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
import { generateDefaultApp } from '~/tools/shared/app';
import { AppType } from '~/types/app';
import { CategoryEditModalInnerProps } from '../../../../Wrappers/Category/CategoryEditModal';
import { useStyles } from '../Shared/styles';
interface AvailableElementTypesProps {

6
src/components/Dashboard/Views/DashboardView.tsx
View File

@@ -109,9 +109,9 @@ const useSidebarVisibility = () => {
const useStackedSections = () => {
const board = useRequiredBoard();
return board.sections.filter(
(s): s is CategorySection | EmptySection => s.type === 'category' || s.type === 'empty'
);
return board.sections
.filter((s): s is CategorySection | EmptySection => s.type === 'category' || s.type === 'empty')
.sort((a, b) => a.position - b.position);
};
const useSidebarSection = (position: 'left' | 'right') => {

2
src/modals.ts
View File

@@ -1,9 +1,9 @@
import { CategoryEditModal } from '~/components/Board/Sections/Category/CategoryEditModal';
import { ChangeAppPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
import { ChangeWidgetPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
import { EditAppModal } from '~/components/Dashboard/Modals/EditAppModal/EditAppModal';
import { SelectElementModal } from '~/components/Dashboard/Modals/SelectElement/SelectElementModal';
import { WidgetsEditModal } from '~/components/Dashboard/Tiles/Widgets/WidgetsEditModal';
import { CategoryEditModal } from '~/components/Dashboard/Wrappers/Category/CategoryEditModal';
import { CreateBoardModal } from './components/Manage/Board/create-board.modal';
import { DeleteBoardModal } from './components/Manage/Board/delete-board.modal';