drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-24 10:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

dynamically add fields to tables

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:18 +03:00
parent ec1712afa0
commit 67073eaba0
1 changed files with 80 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/rect.jsx
View File

@ -1,37 +1,42 @@
import { React, useState } from "react"; import { React, useState } from "react";
import Node from "./node"; import Node from "./node";
import { Button } from "@arco-design/web-react"; import {
IconEdit,
IconDelete,
IconPlus,
IconMinus,
} from "@arco-design/web-react/icon";
const Rect = (props) => { const Rect = (props) => {
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const [hoveredField, setHoveredField] = useState(-1);
const [node, setNode] = useState(Node.NONE); const [node, setNode] = useState(Node.NONE);
const [fields, setFields] = useState([
{
name: "id",
type: "uuid",
default: "",
primary: true,
unique: true,
notNull: true,
increment: false,
},
{
name: "name",
type: "varchar(20)",
default: "n/a",
primary: false,
unique: false,
notNull: true,
increment: false,
},
]);
const table = { const table = {
name: "Students", name: "Students",
fields: [
{
name: "id",
type: "uuid",
default: "",
primary: true,
unique: true,
notNull: true,
increment: false,
},
{
name: "name",
type: "varchar(20)",
default: "n/a",
primary: false,
unique: false,
notNull: true,
increment: false,
},
],
}; };
const height = const height = fields.length * 36 + (fields.length - 1) * 2 + 40 + 2;
table.fields.length * 36 + (table.fields.length - 1) * 2 + 40 + 4;
return ( return (
<g> <g>
@ -57,20 +62,66 @@ const Rect = (props) => {
isHovered ? "border-sky-500" : "border-gray-500" isHovered ? "border-sky-500" : "border-gray-500"
} bg-gray-300 select-none rounded-md`} } bg-gray-300 select-none rounded-md`}
> >
<div className="p-3 font-bold text-slate-800 h-[40px] bg-gray-400 rounded-t-md"> <div className="p-3 font-bold text-slate-800 h-[40px] bg-gray-400 rounded-t-md flex justify-between">
{table.name} {table.name}
{isHovered && (
<div className="flex justify-end items-center">
<button className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80">
<IconEdit />
</button>
<button
className="btn bg-green-600 text-white text-xs py-1 px-2 me-2 opacity-80"
onClick={(e) => {
setFields([
...fields,
{
name: "age",
type: "numeric",
default: "n/a",
primary: false,
unique: false,
notNull: true,
increment: false,
},
]);
}}
>
<IconPlus />
</button>
<button className="btn bg-red-800 text-white text-xs py-1 px-2 opacity-80">
<IconDelete />
</button>
</div>
)}
</div> </div>
{table.fields.map((e, i) => { {fields.map((e, i) => {
return ( return (
<div <div
className={`${ className={`${
i === table.fields.length - 1 i === fields.length - 1 ? "" : "border-b-2 border-gray-400"
? ""
: "border-b-2 border-gray-400"
} h-[36px] p-2 flex justify-between`} } h-[36px] p-2 flex justify-between`}
onMouseEnter={() => {
setHoveredField(i);
}}
onMouseLeave={() => {
setHoveredField(-1);
}}
> >
<div>{e.name}</div> <div>{e.name}</div>
<div className="text-slate-600">{e.type}</div> <div className="text-slate-600">
{hoveredField === i ? (
<div>
<button className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80">
<IconEdit />
</button>
<button className="btn bg-red-800 text-white text-xs py-1 px-2 opacity-80">
<IconMinus />
</button>
</div>
) : (
e.type
)}
</div>
</div> </div>
); );
})} })}