bruh

src/components/canvas.jsx

@@ -1,25 +1,9 @@
 import React, { useRef, useState } from "react";
 import { useDrop } from "react-dnd";
 import Table from "./table";
-import { defaultTableTheme } from "../data/data";
+import { defaultTableTheme, Cardinality, Constraint } from "../data/data";
 
 export default function Canvas(props) {
-  const Cardinality = {
-    NONE: -1,
-    ONE_TO_ONE: 0,
-    ONE_TO_MANY: 1,
-    MANY_TO_ONE: 2,
-    MANY_TO_MANY: 3,
-  };
-
-  const Constraint = {
-    none: "None",
-    restrict: "Restrict",
-    cascade: "Cascade",
-    setNull: "Set null",
-    setDefault: "Set default",
-  };
-
   const [dragging, setDragging] = useState(-1);
   const [linking, setLinking] = useState(false);
   const [line, setLine] = useState({
@@ -32,7 +16,7 @@ export default function Canvas(props) {
     endX: 0,
     endY: 0,
     name: "",
-    cardinality: Cardinality.NONE,
+    cardinality: Cardinality.ONE_TO_MANY,
     updateConstraint: Constraint.none,
     deleteConstraint: Constraint.none,
     mandatory: false,

src/components/reference_overview.jsx

@@ -1,7 +1,30 @@
 import React from "react";
-import { Collapse, Input } from "@douyinfe/semi-ui";
+import {
+  Collapse,
+  Input,
+  Form,
+  Row,
+  Col,
+  Button,
+  Checkbox,
+} from "@douyinfe/semi-ui";
+import { IconRowsStroked, IconDeleteStroked } from "@douyinfe/semi-icons";
+import { Cardinality, Constraint } from "../data/data";
+
+// import { Table } from "@douyinfe/semi-ui";
 
 export default function ReferenceOverview(props) {
+  //   const columns = [
+  //     {
+  //       title: "Primary",
+  //       dataIndex: "primary",
+  //     },
+  //     {
+  //       title: "Foreign",
+  //       dataIndex: "foreign",
+  //     },
+  //   ];
+
   return (
     <Collapse>
       {props.relationships.map((r, i) => (
@@ -14,7 +37,90 @@ export default function ReferenceOverview(props) {
           }
           itemKey={`${i}`}
         >
-          {r.name}
+          <Form>
+            <Form.Input initValue={r.name} field="name" label="Name" />
+
+            {/* <Table
+              columns={columns}
+              dataSource={[
+                {
+                  key: "1",
+                  primary: props.tables[r.startTableId].name,
+                  foreign: props.tables[r.endTableId].name,
+                },
+                {
+                  key: "2",
+                  primary: props.tables[r.startTableId].fields[r.startFieldId].name,
+                  foreign: props.tables[r.endTableId].fields[r.endFieldId].name,
+                },
+              ]}
+              pagination={false}
+              bordered
+            /> */}
+
+            <Form.Select
+              optionList={Object.values(Cardinality).map((v) => ({
+                label: v,
+                value: v,
+              }))}
+              field="cardinality"
+              label="Cardinality"
+              initValue={r.cardinality}
+              className="w-full"
+            ></Form.Select>
+            <Row gutter={6}>
+              <Col span={12}>
+                <Form.Select
+                  optionList={Object.values(Constraint).map((v) => ({
+                    label: v,
+                    value: v,
+                  }))}
+                  field="updateConstraint"
+                  label="On update"
+                  initValue={r.updateConstraint}
+                  className="w-full"
+                ></Form.Select>
+              </Col>
+              <Col span={12}>
+                <Form.Select
+                  optionList={Object.values(Constraint).map((v) => ({
+                    label: v,
+                    value: v,
+                  }))}
+                  field="deleteConstraint"
+                  label="On delete"
+                  initValue={r.deleteConstraint}
+                  className="w-full"
+                ></Form.Select>
+              </Col>
+            </Row>
+            <div className="flex justify-between items-center my-3">
+              <label htmlFor="unique" className="font-medium text-black">
+                Mandetory
+              </label>
+              <Checkbox
+                value="mandetory"
+                defaultChecked={r.mandetory}
+                onChange={(checkedValues) => {}}
+              ></Checkbox>
+            </div>
+            <Row gutter={6} className="mt-1">
+              <Col span={12}>
+                <Button
+                  icon={<IconRowsStroked />}
+                  disabled={r.Cardinality === Cardinality.ONE_TO_ONE}
+                  block
+                >
+                  Extract to table
+                </Button>
+              </Col>
+              <Col span={12}>
+                <Button icon={<IconDeleteStroked />} block type="danger">
+                  Delete
+                </Button>
+              </Col>
+            </Row>
+          </Form>
         </Collapse.Panel>
       ))}
     </Collapse>

src/data/data.js

@@ -100,4 +100,19 @@ const tableThemes = [
 
 const defaultTableTheme = "#9e9e9e";
 
-export { menu, sqlDataTypes, tableThemes, defaultTableTheme };
+const Cardinality = {
+  ONE_TO_ONE: "One to one",
+  ONE_TO_MANY: "One to many",
+  MANY_TO_ONE: "Many to one",
+  MANY_TO_MANY: "Many to many",
+};
+
+const Constraint = {
+  none: "None",
+  restrict: "Restrict",
+  cascade: "Cascade",
+  setNull: "Set null",
+  setDefault: "Set default",
+};
+
+export { menu, sqlDataTypes, tableThemes, defaultTableTheme, Cardinality, Constraint };