diff --git a/src/components/Board/Sections/Category/category-actions.ts b/src/components/Board/Sections/Category/Actions/category-actions.ts similarity index 88% rename from src/components/Board/Sections/Category/category-actions.ts rename to src/components/Board/Sections/Category/Actions/category-actions.ts index 49158af25..ea56d20ca 100644 --- a/src/components/Board/Sections/Category/category-actions.ts +++ b/src/components/Board/Sections/Category/Actions/category-actions.ts @@ -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; }), }; diff --git a/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx b/src/components/Board/Sections/Category/Actions/category-menu-actions.tsx similarity index 93% rename from src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx rename to src/components/Board/Sections/Category/Actions/category-menu-actions.tsx index 71d9e4335..90ddb198c 100644 --- a/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx +++ b/src/components/Board/Sections/Category/Actions/category-menu-actions.tsx @@ -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, diff --git a/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx b/src/components/Board/Sections/Category/CategoryEditModal.tsx similarity index 100% rename from src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx rename to src/components/Board/Sections/Category/CategoryEditModal.tsx diff --git a/src/components/Board/Sections/Category/CategoryMenu.tsx b/src/components/Board/Sections/Category/CategoryMenu.tsx index 3ce01813c..cf85c3dce 100644 --- a/src/components/Board/Sections/Category/CategoryMenu.tsx +++ b/src/components/Board/Sections/Category/CategoryMenu.tsx @@ -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) => { {actions.map((action) => ( <> - {action.group && {t(action.group)}} + {action.group && {t(action.group)}} } @@ -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 [ { diff --git a/src/components/Board/Sections/CategorySection.tsx b/src/components/Board/Sections/CategorySection.tsx index 159983a14..6df61fd28 100644 --- a/src/components/Board/Sections/CategorySection.tsx +++ b/src/components/Board/Sections/CategorySection.tsx @@ -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 ( - {section.name} + + {section.name} {section.position} + diff --git a/src/components/Board/gridstack/context.tsx b/src/components/Board/gridstack/context.tsx index 73664ea19..b7adf0126 100644 --- a/src/components/Board/gridstack/context.tsx +++ b/src/components/Board/gridstack/context.tsx @@ -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 | null; diff --git a/src/components/Board/gridstack/useResizeGridItem.ts b/src/components/Board/gridstack/useResizeGridItem.ts index 5e86d5723..55421273c 100644 --- a/src/components/Board/gridstack/useResizeGridItem.ts +++ b/src/components/Board/gridstack/useResizeGridItem.ts @@ -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, diff --git a/src/components/Board/item/context.tsx b/src/components/Board/item/context.tsx index 9abf70355..ede54f514 100644 --- a/src/components/Board/item/context.tsx +++ b/src/components/Board/item/context.tsx @@ -11,8 +11,6 @@ const GridItemContext = createContext({ export const useGridItemRef = () => { const ctx = useContext(GridItemContext); - if (!ctx || !ctx.ref) - throw new Error('useGridstackContext must be used within a GridItemProvider'); return ctx.ref; }; diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx index c1b2045db..601cd353c 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx @@ -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 { diff --git a/src/components/Dashboard/Views/DashboardView.tsx b/src/components/Dashboard/Views/DashboardView.tsx index a7aff51e3..93e161949 100644 --- a/src/components/Dashboard/Views/DashboardView.tsx +++ b/src/components/Dashboard/Views/DashboardView.tsx @@ -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') => { diff --git a/src/modals.ts b/src/modals.ts index c8f4d3233..df1e58f87 100644 --- a/src/modals.ts +++ b/src/modals.ts @@ -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';