From 109158165c94be1b32adb26f5ff5468e91090047 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:48:01 +0300
Subject: [PATCH] bruh

---
 src/components/canvas.jsx             |  20 +----
 src/components/reference_overview.jsx | 110 +++++++++++++++++++++++++-
 src/data/data.js                      |  17 +++-
 3 files changed, 126 insertions(+), 21 deletions(-)

diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index d4f457d..711e4c6 100644
--- a/src/components/canvas.jsx
+++ b/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,
diff --git a/src/components/reference_overview.jsx b/src/components/reference_overview.jsx
index 48183ed..ddc29fe 100644
--- a/src/components/reference_overview.jsx
+++ b/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>
diff --git a/src/data/data.js b/src/data/data.js
index 66c336d..8e14572 100644
--- a/src/data/data.js
+++ b/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 };