jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add dynamic section (#842)

Browse Source 
* chore: add parent_section_id and change position to x and y_offset for sqlite section table

* chore: rename existing positions to x_offset and y_offset

* chore: add related mysql migration

* chore: add missing height and width to section table

* fix: missing width and height in migration copy script

* fix: typecheck issues

* fix: test not working caused by unsimilar schemas

* wip: add dynamic section

* refactor: improve structure of gridstack sections

* feat: add rendering of dynamic sections

* feat: add saving of moved sections

* wip: add static row count, restrict min-width and height

* chore: address pull request feedback

* fix: format issues

* fix: size calculation within dynamic sections

* fix: on resize not called when min width or height is reached

* fix: size of items while dragging is to big

* chore: temporarly remove migration files

* chore: readd migrations

* fix: format and deepsource issues

* chore: remove db_dev.sqlite file

* chore: add *.sqlite to .gitignore

* chore: address pull request feedback

* feat: add dynamic section actions for adding and removing them
This commit is contained in:
Meier Lukas
2024-08-10 12:37:16 +02:00
committed by GitHub
parent a9d87e4e6b
commit 9ce172e78a
38 changed files with 3765 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
View File

@@ -6,7 +6,8 @@ import { GridStack } from "@homarr/gridstack";
import type { Section } from "~/app/[locale]/boards/_types";
interface InitializeGridstackProps {
section: Section;
section: Omit<Section, "items">;
itemIds: string[];
refs: {
wrapper: RefObject<HTMLDivElement>;
items: MutableRefObject<Record<string, RefObject<GridItemHTMLElement>>>;
@@ -15,20 +16,21 @@ interface InitializeGridstackProps {
sectionColumnCount: number;
}
export const initializeGridstack = ({ section, refs, sectionColumnCount }: InitializeGridstackProps) => {
export const initializeGridstack = ({ section, itemIds, refs, sectionColumnCount }: InitializeGridstackProps) => {
if (!refs.wrapper.current) return false;
// initialize gridstack
const newGrid = refs.gridstack;
newGrid.current = GridStack.init(
{
column: sectionColumnCount,
margin: Math.round(Math.max(Math.min(refs.wrapper.current.offsetWidth / 100, 10), 1)),
margin: 10,
cellHeight: 128,
float: true,
alwaysShowResizeHandle: true,
acceptWidgets: true,
staticGrid: true,
minRow: 1,
minRow: section.kind === "dynamic" && "height" in section ? (section.height as number) : 1,
maxRow: section.kind === "dynamic" && "height" in section ? (section.height as number) : 0,
animate: false,
styleInHead: true,
disableRemoveNodeOnDrop: true,
@@ -43,7 +45,7 @@ export const initializeGridstack = ({ section, refs, sectionColumnCount }: Initi
grid.batchUpdate();
grid.removeAll(false);
section.items.forEach(({ id }) => {
itemIds.forEach((id) => {
const ref = refs.items.current[id]?.current;
if (!ref) return;