9ce172e78a
* 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
36 lines
957 B
TypeScript
36 lines
957 B
TypeScript
import { Box, Card } from "@mantine/core";
|
|
|
|
import type { DynamicSection } from "~/app/[locale]/boards/_types";
|
|
import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
|
|
import { BoardDynamicSectionMenu } from "./dynamic/dynamic-menu";
|
|
import { GridStack } from "./gridstack/gridstack";
|
|
import classes from "./item.module.css";
|
|
|
|
interface Props {
|
|
section: DynamicSection;
|
|
}
|
|
|
|
export const BoardDynamicSection = ({ section }: Props) => {
|
|
const board = useRequiredBoard();
|
|
return (
|
|
<Box className="grid-stack-item-content">
|
|
<Card
|
|
className={classes.itemCard}
|
|
w="100%"
|
|
h="100%"
|
|
withBorder
|
|
styles={{
|
|
root: {
|
|
"--opacity": board.opacity / 100,
|
|
overflow: "hidden",
|
|
},
|
|
}}
|
|
p={0}
|
|
>
|
|
<GridStack section={section} className="min-row" />
|
|
</Card>
|
|
<BoardDynamicSectionMenu section={section} />
|
|
</Box>
|
|
);
|
|
};
|