From ce92a35c9fb7e73c60d8bd4003aa8c242ef319d2 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:48:53 +0300
Subject: [PATCH] edit table sidesheet

---
 src/components/canvas.jsx         |   2 +
 src/components/control_panel.jsx  |  11 +-
 src/components/editor_panel.jsx   |   9 +-
 src/components/table.jsx          | 527 ++++++++++++++++++++++++++++--
 src/components/table_overview.jsx |  12 +-
 src/index.css                     |  39 +++
 src/pages/editor.jsx              |   6 +-
 7 files changed, 565 insertions(+), 41 deletions(-)

diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index e0d859f..bc2a92a 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -365,6 +365,8 @@ export default function Canvas(props) {
               onMouseDown={(e) =>
                 handleMouseDownRect(e, table.id, ObjectType.TABLE)
               }
+              selectedTable={props.selectedTable}
+              setSelectedTable={props.setSelectedTable}
             />
           ))}
           {linking && (
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 9073f41..886f511 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -18,6 +18,7 @@ import {
   Form,
   Image,
   Modal,
+  Spin,
 } from "@douyinfe/semi-ui";
 import { toPng, toJpeg, toSvg } from "html-to-image";
 import { saveAs } from "file-saver";
@@ -31,7 +32,7 @@ export default function ControlPanel(props) {
     `diagram_${new Date().toISOString()}`
   );
   const [extension, setExtension] = useState("");
-  const {layout, setLayout} = useContext(LayoutContext);
+  const { layout, setLayout } = useContext(LayoutContext);
 
   const menu = {
     File: {
@@ -364,7 +365,13 @@ export default function ControlPanel(props) {
         cancelText="Cancel"
         width={470}
       >
-        <Image src={dataUrl} alt="Diagram" width={420}></Image>
+        {dataUrl !== "" || dataUrl ? (
+          <Image src={dataUrl} alt="Diagram" width={420}></Image>
+        ) : (
+          <div className="text-center my-3">
+            <Spin tip="Loading..." size="large"></Spin>
+          </div>
+        )}
         <Form
           labelPosition="left"
           labelAlign="right"
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index b3d3d9a..a514775 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -30,7 +30,7 @@ const EditorPanel = (props) => {
   const [tab, setTab] = useState("1");
   // const map = useRef(new Map());
   // const {tables, setTables} = useContext(TableContext);
-  const {areas, setAreas} = useContext(AreaContext);
+  const { areas, setAreas } = useContext(AreaContext);
 
   const tabList = [
     { tab: "Tables", itemKey: "1" },
@@ -39,8 +39,11 @@ const EditorPanel = (props) => {
     { tab: "Editor", itemKey: "4" },
   ];
   const contentList = [
-    <TableOverview />,
-    <ReferenceOverview/>,
+    <TableOverview
+      selectedTable={props.selectedTable}
+      setSelectedTable={props.setSelectedTable}
+    />,
+    <ReferenceOverview />,
     <Shape />,
     <CodeMirror
       value={props.code}
diff --git a/src/components/table.jsx b/src/components/table.jsx
index d8c036d..d66e503 100644
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@@ -1,16 +1,28 @@
 import { React, useState, useContext } from "react";
-// import { sqlDataTypes } from "../data/data";
-import { IconEdit, IconPlus, IconMore, IconMinus } from "@douyinfe/semi-icons";
+import { sqlDataTypes, tableThemes, defaultTableTheme } from "../data/data";
+import {
+  IconEdit,
+  IconPlus,
+  IconMore,
+  IconMinus,
+  IconDeleteStroked,
+  IconKeyStroked,
+  IconCheckboxTick,
+  IconColorPalette,
+} from "@douyinfe/semi-icons";
 import {
   // Modal,
-  // Form,
-  // Checkbox,
-  // Row,
-  // Col,
+  Select,
+  Card,
+  Form,
+  Checkbox,
+  Row,
+  Col,
   Popover,
   Tag,
   Button,
   SideSheet,
+  Toast,
 } from "@douyinfe/semi-ui";
 import { LayoutContext, TableContext } from "../pages/editor";
 
@@ -18,22 +30,41 @@ export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
   const [visible, setVisible] = useState(false);
-  const {layout} = useContext(LayoutContext);
-  const {setTables} = useContext(TableContext);
-  // const [editFieldVisible, setEditFieldVisible] = useState(-1);
-  // const [field, setField] = useState({
-  //   name: "",
-  //   type: "",
-  //   default: "",
-  //   primary: false,
-  //   unique: false,
-  //   notNull: false,
-  //   increment: false,
-  //   comment: "",
-  // });
+  const { layout } = useContext(LayoutContext);
+  const { setTables } = useContext(TableContext);
 
   const height = props.tableData.fields.length * 36 + 50 + 3;
 
+  const updatedField = (tid, fid, updatedValues) => {
+    setTables((prev) =>
+      prev.map((table, i) => {
+        if (tid === i) {
+          return {
+            ...table,
+            fields: table.fields.map((field, j) =>
+              fid === j ? { ...field, ...updatedValues } : field
+            ),
+          };
+        }
+        return table;
+      })
+    );
+  };
+
+  const updateTable = (tid, updatedValues) => {
+    setTables((prev) =>
+      prev.map((table, i) => {
+        if (tid === i) {
+          return {
+            ...table,
+            ...updatedValues,
+          };
+        }
+        return table;
+      })
+    );
+  };
+
   return (
     <g>
       <foreignObject
@@ -77,7 +108,16 @@ export default function Table(props) {
                     opacity: "0.7",
                     marginRight: "6px",
                   }}
-                  onClick={() => setVisible(true)}
+                  onClick={() => {
+                    if (!layout.sidebar) {
+                      setVisible(true);
+                    } else {
+                      props.setSelectedTable(`${props.tableData.id}`);
+                      document
+                        .getElementById(`scroll_table_${props.tableData.id}`)
+                        .scrollIntoView({ behavior: "smooth" });
+                    }
+                  }}
                 ></Button>
                 <Button
                   icon={<IconPlus />}
@@ -94,9 +134,11 @@ export default function Table(props) {
                     <div className="text-slate-600">
                       <p className="mb-2">
                         <strong>Comment :</strong>{" "}
-                        {props.tableData.comment === ""
-                          ? "No comment"
-                          : <div>{props.tableData.comment}</div>}
+                        {props.tableData.comment === "" ? (
+                          "No comment"
+                        ) : (
+                          <div>{props.tableData.comment}</div>
+                        )}
                       </p>
                       <p className="text-slate-600">
                         <strong
@@ -133,7 +175,7 @@ export default function Table(props) {
                   position="rightTop"
                   showArrow
                   trigger="click"
-                  style={{width: "200px"}}
+                  style={{ width: "200px" }}
                 >
                   <Button
                     icon={<IconMore />}
@@ -245,7 +287,9 @@ export default function Table(props) {
                               ...updatedTables[props.tableData.id].fields,
                             ];
                             updatedFields.splice(i, 1);
-                            updatedTables[props.tableData.id].fields = [...updatedFields];
+                            updatedTables[props.tableData.id].fields = [
+                              ...updatedFields,
+                            ];
                             return updatedTables;
                           });
                         }}
@@ -262,12 +306,437 @@ export default function Table(props) {
         </div>
       </foreignObject>
       <SideSheet
-        title="Sidesheet"
-        visible={visible && !layout.sidebar}
+        title="Edit table"
+        visible={visible}
         onCancel={() => setVisible((prev) => !prev)}
+        style={{ paddingBottom: "16px" }}
       >
-        <p>This is the content of a basic sidesheet.</p>
-        <p>Here is more content...</p>
+        <Form
+          labelPosition="left"
+          onChange={(value) => updateTable(props.tableData.id, value.values)}
+        >
+          <Form.Input
+            initValue={props.tableData.name}
+            field="name"
+            label="Name"
+          />
+        </Form>
+        <div>
+          {props.tableData.fields.map((f, j) => (
+            <Form
+              key={j}
+              onChange={(value) =>
+                updatedField(props.tableData.id, j, value.values)
+              }
+              initValues={f}
+            >
+              <Row
+                type="flex"
+                justify="start"
+                align="middle"
+                gutter={6}
+                className="hover:bg-slate-100"
+              >
+                <Col span={8}>
+                  <Form.Input
+                    field="name"
+                    noLabel={true}
+                    className="m-0"
+                    placeholder="Name"
+                  />
+                </Col>
+                <Col span={8}>
+                  <Form.Select
+                    className="w-full"
+                    field="type"
+                    noLabel={true}
+                    optionList={sqlDataTypes.map((value, index) => {
+                      return {
+                        label: value,
+                        value: value,
+                      };
+                    })}
+                    filter
+                    placeholder="Type"
+                  ></Form.Select>
+                </Col>
+                <Col
+                  span={8}
+                  style={{ display: "flex", justifyContent: "space-around" }}
+                >
+                  <Button
+                    type={f.notNull ? "primary" : "tertiary"}
+                    title="Nullable"
+                    theme={f.notNull ? "solid" : "light"}
+                    onClick={() =>
+                      updatedField(props.tableData.id, j, {
+                        notNull: !f.notNull,
+                      })
+                    }
+                  >
+                    ?
+                  </Button>
+                  <Button
+                    type={f.primary ? "primary" : "tertiary"}
+                    title="Primary"
+                    theme={f.primary ? "solid" : "light"}
+                    onClick={() =>
+                      updatedField(props.tableData.id, j, {
+                        primary: !f.primary,
+                      })
+                    }
+                    icon={<IconKeyStroked />}
+                  ></Button>
+                  <Popover
+                    content={
+                      <div className="px-1">
+                        <Form
+                          onChange={(value) =>
+                            updatedField(props.tableData.id, j, value.values)
+                          }
+                        >
+                          <Form.Input
+                            field="default"
+                            label="Default"
+                            initValue={f.default}
+                            trigger="blur"
+                            placeholder="Set default"
+                          />
+                          <Form.Input
+                            field="check"
+                            label="Check Expression"
+                            trigger="blur"
+                            placeholder="Set constraint"
+                            initValue={f.check}
+                          />
+                          <div className="flex justify-between items-center my-3">
+                            <label htmlFor="unique" className="font-medium">
+                              Unique
+                            </label>
+                            <Checkbox
+                              value="unique"
+                              defaultChecked={f.unique}
+                              onChange={(checkedValues) =>
+                                updatedField(props.tableData.id, j, {
+                                  [checkedValues.target.value]:
+                                    checkedValues.target.checked,
+                                })
+                              }
+                            ></Checkbox>
+                          </div>
+                          <div className="flex justify-between items-center my-3">
+                            <label htmlFor="increment" className="font-medium">
+                              Autoincrement
+                            </label>
+                            <Checkbox
+                              value="increment"
+                              defaultChecked={f.increment}
+                              onChange={(checkedValues) =>
+                                updatedField(props.tableData.id, j, {
+                                  [checkedValues.target.value]:
+                                    checkedValues.target.checked,
+                                })
+                              }
+                            ></Checkbox>
+                          </div>
+                          <Form.TextArea
+                            field="comment"
+                            label="Comment"
+                            placeholder="Add comment"
+                            initValue={f.comment}
+                            autosize
+                            rows={2}
+                          />
+                        </Form>
+                        <Button
+                          icon={<IconDeleteStroked />}
+                          type="danger"
+                          block
+                          onClick={(ev) => {
+                            setTables((prev) => {
+                              const updatedTables = [...prev];
+                              const updatedFields = [
+                                ...updatedTables[props.tableData.id].fields,
+                              ];
+                              updatedFields.splice(j, 1);
+                              updatedTables[props.tableData.id].fields = [
+                                ...updatedFields,
+                              ];
+                              return updatedTables;
+                            });
+                          }}
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    }
+                    trigger="click"
+                    position="rightTop"
+                    showArrow
+                  >
+                    <Button type="tertiary" icon={<IconMore />}></Button>
+                  </Popover>
+                </Col>
+              </Row>
+            </Form>
+          ))}
+          {props.tableData.indices.length > 0 && (
+            <Card
+              bodyStyle={{ padding: "14px" }}
+              style={{ marginTop: "12px", marginBottom: "12px" }}
+              headerLine={false}
+            >
+              <div className="font-medium ms-1 mb-1">Indices</div>
+              {props.tableData.indices.map((idx, k) => (
+                <div className="flex justify-between items-center mb-2" key={k}>
+                  <Select
+                    placeholder="Select fields"
+                    multiple
+                    optionList={props.tableData.fields.map((e) => ({
+                      value: e.name,
+                      label: e.name,
+                    }))}
+                    className="w-full"
+                    defaultValue={idx.fields}
+                    onChange={(value) => {
+                      setTables((prev) =>
+                        prev.map((t, i) => {
+                          if (t.id === props.tableData.id) {
+                            return {
+                              ...t,
+                              indices: t.indices.map((index, j) => {
+                                if (j === k)
+                                  return {
+                                    name: `${value.join("_")}_index`,
+                                    fields: [...value],
+                                  };
+                                return index;
+                              }),
+                            };
+                          }
+                          return t;
+                        })
+                      );
+                    }}
+                  />
+                  <Popover
+                    content={
+                      <div className="px-1">
+                        <Form>
+                          <Form.Input
+                            field="name"
+                            label="Name"
+                            initValue={idx.name}
+                            trigger="blur"
+                            placeholder="Index name"
+                          />
+                        </Form>
+                        <Button
+                          icon={<IconDeleteStroked />}
+                          type="danger"
+                          block
+                          onClick={() => {
+                            setTables((prev) =>
+                              prev.map((t, i) => {
+                                if (t.id === props.tableData.id) {
+                                  const updatedIndices = [...t.indices];
+                                  updatedIndices.splice(k, 1);
+                                  return {
+                                    ...t,
+                                    indices: updatedIndices,
+                                  };
+                                }
+                                return t;
+                              })
+                            );
+                          }}
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    }
+                    trigger="click"
+                    position="rightTop"
+                    showArrow
+                  >
+                    <Button
+                      icon={<IconMore />}
+                      type="tertiary"
+                      style={{ marginLeft: "12px" }}
+                    ></Button>
+                  </Popover>
+                </div>
+              ))}
+            </Card>
+          )}
+          <Card
+            bodyStyle={{ padding: "14px" }}
+            style={{ marginTop: "12px", marginBottom: "12px" }}
+            headerLine={false}
+          >
+            <div className="font-medium ms-1">Comment</div>
+            <Form
+              onChange={(value) =>
+                updateTable(props.tableData.id, value.values)
+              }
+            >
+              <Form.TextArea
+                field="comment"
+                noLabel={true}
+                showClear
+                onClear={() => updateTable(props.tableData.id, { comment: "" })}
+                initValue={props.tableData.comment}
+                autosize
+                placeholder="Add comment"
+                rows={1}
+              />
+            </Form>
+          </Card>
+          <Row gutter={6} className="mt-2">
+            <Col span={8}>
+              <Popover
+                content={
+                  <div>
+                    <div className="flex justify-between items-center p-2">
+                      <div className="font-medium">Theme</div>
+                      <Button
+                        type="tertiary"
+                        size="small"
+                        onClick={() =>
+                          updateTable(props.tableData.id, {
+                            color: defaultTableTheme,
+                          })
+                        }
+                      >
+                        Clear
+                      </Button>
+                    </div>
+                    <hr />
+                    <div className="py-3">
+                      <div>
+                        {tableThemes
+                          .slice(0, Math.ceil(tableThemes.length / 2))
+                          .map((c) => (
+                            <button
+                              key={c}
+                              style={{ backgroundColor: c }}
+                              className="p-3 rounded-full mx-1"
+                              onClick={() =>
+                                updateTable(props.tableData.id, { color: c })
+                              }
+                            >
+                              {props.tableData.color === c ? (
+                                <IconCheckboxTick style={{ color: "white" }} />
+                              ) : (
+                                <IconCheckboxTick style={{ color: c }} />
+                              )}
+                            </button>
+                          ))}
+                      </div>
+                      <div className="mt-3">
+                        {tableThemes
+                          .slice(Math.ceil(tableThemes.length / 2))
+                          .map((c) => (
+                            <button
+                              key={c}
+                              style={{ backgroundColor: c }}
+                              className="p-3 rounded-full mx-1"
+                              onClick={() =>
+                                updateTable(props.tableData.id, { color: c })
+                              }
+                            >
+                              <IconCheckboxTick
+                                style={{
+                                  color:
+                                    props.tableData.color === c ? "white" : c,
+                                }}
+                              />
+                            </button>
+                          ))}
+                      </div>
+                    </div>
+                  </div>
+                }
+                trigger="click"
+                position="bottomLeft"
+                showArrow
+              >
+                <Button type="tertiary" icon={<IconColorPalette />}></Button>
+              </Popover>
+            </Col>
+            <Col span={7}>
+              <Button
+                block
+                onClick={() => {
+                  setTables((prev) =>
+                    prev.map((t, i) => {
+                      if (t.id === props.tableData.id) {
+                        return {
+                          ...t,
+                          indices: [
+                            ...t.indices,
+                            { name: `index_${t.indices.length}`, fields: [] },
+                          ],
+                        };
+                      }
+                      return t;
+                    })
+                  );
+                }}
+              >
+                Add index
+              </Button>
+            </Col>
+            <Col span={6}>
+              <Button
+                onClick={() => {
+                  setTables((prev) =>
+                    prev.map((t, i) => {
+                      if (t.id === props.tableData.id) {
+                        return {
+                          ...t,
+                          fields: [
+                            ...t.fields,
+                            {
+                              name: "",
+                              type: "",
+                              default: "",
+                              primary: false,
+                              unique: false,
+                              notNull: false,
+                              increment: false,
+                              comment: "",
+                            },
+                          ],
+                        };
+                      }
+                      return t;
+                    })
+                  );
+                }}
+                block
+              >
+                Add field
+              </Button>
+            </Col>
+            <Col span={3}>
+              <Button
+                icon={<IconDeleteStroked />}
+                type="danger"
+                onClick={() => {
+                  Toast.success(`Table deleted!`);
+                  setTables((prev) =>
+                    prev
+                      .filter((e) => e.id !== props.tableData.id)
+                      .map((e, idx) => ({ ...e, id: idx }))
+                  );
+                  props.setSelectedTable("");
+                  setVisible(false);
+                }}
+              ></Button>
+            </Col>
+          </Row>
+        </div>
       </SideSheet>
     </g>
   );
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index 4062716..f3a0bb3 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -31,7 +31,6 @@ import { TableContext } from "../pages/editor";
 
 export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
-  const [tableActiveKey, setTableActiveKey] = useState("");
   const [value, setValue] = useState("");
   const { tables, setTables } = useContext(TableContext);
   const [filteredResult, setFilteredResult] = useState(
@@ -95,7 +94,7 @@ export default function TableOverview(props) {
             onChange={(v) => setValue(v)}
             onSelect={(v) => {
               const { id } = tables.find((t) => t.name === v);
-              setTableActiveKey(`${id}`);
+              props.setSelectedTable(`${id}`);
               document
                 .getElementById(`scroll_table_${id}`)
                 .scrollIntoView({ behavior: "smooth" });
@@ -140,8 +139,8 @@ export default function TableOverview(props) {
         </Col>
       </Row>
       <Collapse
-        activeKey={tableActiveKey}
-        onChange={(k) => setTableActiveKey(k)}
+        activeKey={props.selectedTable}
+        onChange={(k) => props.setSelectedTable(k)}
         accordion
       >
         {tables.length <= 0 ? (
@@ -332,8 +331,9 @@ export default function TableOverview(props) {
                     <Collapse
                       activeKey={indexActiveKey}
                       onChange={(itemKey) => setIndexActiveKey(itemKey)}
+                      accordion
                     >
-                      <Collapse.Panel header="Indices" itemKey="1" accordion>
+                      <Collapse.Panel header="Indices" itemKey="1">
                         {t.indices.map((idx, k) => (
                           <div
                             className="flex justify-between items-center mb-2"
@@ -555,7 +555,7 @@ export default function TableOverview(props) {
                             .filter((e) => e.id !== i)
                             .map((e, idx) => ({ ...e, id: idx }))
                         );
-                        setTableActiveKey("");
+                        props.setSelectedTable("");
                       }}
                     ></Button>
                   </Col>
diff --git a/src/index.css b/src/index.css
index e69de29..011d791 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.cm-focused {
+  outline: none !important;
+}
+
+.bg-blue {
+  background-color: #124559;
+}
+
+.semi-form-vertical .semi-form-field {
+  margin: 0;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  overflow: hidden;
+}
+
+.semi-card .semi-collapse-item{
+  border: none !important;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; 
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c5c5c5; 
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #b9b9b9; 
+}
\ No newline at end of file
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index 6ecb9c1..a677cc0 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -17,6 +17,7 @@ export default function Editor(props) {
   const [areas, setAreas] = useState([]);
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
+  const [selectedTable, setSelectedTable] = useState("");
   const [layout, setLayout] = useState({
     header: true,
     sidebar: true,
@@ -37,7 +38,6 @@ export default function Editor(props) {
 
   useEffect(()=>{
     document.title = "Editor";
-    console.log("hey");
   }, [])
 
   return (
@@ -65,11 +65,15 @@ export default function Editor(props) {
                     resize={resize}
                     setResize={setResize}
                     width={width}
+                    selectedTable={selectedTable}
+                    setSelectedTable={setSelectedTable}
                   />
                 )}
                 <Canvas
                   code={code}
                   setCode={setCode}
+                  selectedTable={selectedTable}
+                  setSelectedTable={setSelectedTable}
                 />
               </DndProvider>
               {layout.services && <Sidebar />}