Add search for relationships

2023-09-19 15:48:32 +03:00 · 2023-09-19 15:48:32 +03:00 · 525ca9f5c7
commit 525ca9f5c7
parent 4fec674ac6
5 changed files with 316 additions and 268 deletions
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@ -319,7 +319,7 @@ export default function ControlPanel() {
                        </Dropdown.Menu>
                      }
                    >
-                      <div className="px-3 py-1 hover:bg-gray-100 rounded-md">
+                      <div className="px-3 py-1 hover:bg-gray-100 rounded">
                        {category}
                      </div>
                    </Dropdown>
@ -363,7 +363,7 @@ export default function ControlPanel() {
          </div>
        </nav>
      )}
-      <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700">
+      <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700 select-none">
        <div className="flex justify-start items-center">
          <Dropdown
            position="bottomLeft"
@ -396,7 +396,7 @@ export default function ControlPanel() {
            }
            trigger="click"
          >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded-md">
+            <div className="py-1 px-2 hover:bg-slate-200 rounded">
              <i className="fa-solid fa-table-list"></i> <IconCaretdown />
            </div>
          </Dropdown>
@ -435,33 +435,27 @@ export default function ControlPanel() {
            }
            trigger="click"
          >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded-md">
+            <div className="py-1 px-2 hover:bg-slate-200 rounded">
              zoom <IconCaretdown />
            </div>
          </Dropdown>
          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
+            className="py-1 px-2 hover:bg-slate-200 rounded"
            title="Zoom in"
          >
            <i className="fa-solid fa-magnifying-glass-plus"></i>
          </button>
          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
+            className="py-1 px-2 hover:bg-slate-200 rounded"
            title="Zoom out"
          >
            <i className="fa-solid fa-magnifying-glass-minus"></i>
          </button>
          <Divider layout="vertical" margin="8px" />
-          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Undo"
-          >
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Undo">
            <i className="fa-solid fa-rotate-left "></i>
          </button>
-          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Redo"
-          >
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Redo">
            <i className="fa-solid fa-rotate-right"></i>
          </button>
          <Divider layout="vertical" margin="8px" />
@ -478,31 +472,25 @@ export default function ControlPanel() {
            }
            trigger="click"
          >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded-md">
+            <div className="py-1 px-2 hover:bg-slate-200 rounded">
              <i className="fa-solid fa-plus"></i> <IconCaretdown />
            </div>
          </Dropdown>
-          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Edit"
-          >
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Edit">
            <i className="fa-solid fa-pen-to-square"></i>
          </button>
          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
+            className="py-1 px-2 hover:bg-slate-200 rounded"
            title="Delete"
          >
            <i className="fa-solid fa-trash"></i>
          </button>
          <Divider layout="vertical" margin="8px" />
-          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
-            title="Save"
-          >
+          <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Save">
            <i className="fa-regular fa-floppy-disk"></i>
          </button>
          <button
-            className="py-1 px-2 hover:bg-slate-200 rounded-md"
+            className="py-1 px-2 hover:bg-slate-200 rounded"
            title="Commit"
          >
            <i className="fa-solid fa-code-branch"></i>
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@ -30,25 +30,18 @@ const EditorPanel = (props) => {

  const tabList = [
    { tab: "Tables", itemKey: "1" },
-    { tab: "References", itemKey: "2" },
+    { tab: "Relationships", itemKey: "2" },
    { tab: "Shapes", itemKey: "3" },
    { tab: "Editor", itemKey: "4" },
  ];
  const contentList = [
-    <div>
-      <TableOverview tables={props.tables} setTables={props.setTables} />
-    </div>,
-    <div>
+    <TableOverview tables={props.tables} setTables={props.setTables} />,
    <ReferenceOverview
      relationships={props.relationships}
      setRelationships={props.setRelationships}
      tables={props.tables}
-      />
-    </div>,
-    <div>
-      <Shape />
-    </div>,
-    <div>
+    />,
+    <Shape />,
    <CodeMirror
      value={props.code}
      height="100%"
@ -57,13 +50,12 @@ const EditorPanel = (props) => {
      onChange={(e) => {
        props.setCode(e);
      }}
-      />
-    </div>,
+    />,
  ];

  return (
    <div className="h-screen flex overflow-clip relative">
-      <div className="mt-2" style={{ width: `${props.width}px` }}>
+      <div style={{ width: `${props.width}px` }}>
        <Tabs
          type="card"
          tabList={tabList}
@ -72,7 +64,7 @@ const EditorPanel = (props) => {
          }}
          collapsible
        >
-          {contentList[parseInt(tab) - 1]}
+          <div className="p-2">{contentList[parseInt(tab) - 1]}</div>
        </Tabs>
        <button
          onClick={() => {
@ -151,7 +143,9 @@ const EditorPanel = (props) => {
        </button>
      </div>
      <div
-        className={`flex justify-center items-center p-1 h-full hover:bg-slate-300 cursor-col-resize ${props.resize? "bg-slate-300": ""}`}
+        className={`flex justify-center items-center p-1 h-full hover:bg-slate-300 cursor-col-resize ${
+          props.resize ? "bg-slate-300" : ""
+        }`}
        onMouseDown={() => props.setResize(true)}
      >
        <div className="w-1 border-x border-white h-1/6" />
--- a/src/components/reference_overview.jsx
+++ b/src/components/reference_overview.jsx
@ -1,6 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import {
+  AutoComplete,
  Collapse,
+  Empty,
  Form,
  Row,
  Col,
@ -14,7 +16,12 @@ import {
  IconDeleteStroked,
  IconLoopTextStroked,
  IconMore,
+  IconSearch,
 } from "@douyinfe/semi-icons";
+import {
+  IllustrationNoContent,
+  IllustrationNoContentDark,
+} from "@douyinfe/semi-illustrations";
 import { Cardinality, Constraint } from "../data/data";

 export default function ReferenceOverview(props) {
@ -28,10 +35,67 @@ export default function ReferenceOverview(props) {
      dataIndex: "foreign",
    },
  ];
+  const [refActiveIndex, setRefActiveIndex] = useState("");
+  const [value, setValue] = useState("");
+  const [filteredResult, setFilteredResult] = useState(
+    props.relationships.map((t) => {
+      return t.name;
+    })
+  );
+
+  const handleStringSearch = (value) => {
+    setFilteredResult(
+      props.relationships
+        .map((t) => {
+          return t.name;
+        })
+        .filter((i) => i.includes(value))
+    );
+  };
  return (
-    <Collapse>
-      {props.relationships.map((r, i) => (
-        <Collapse.Panel key={i} header={<div>{r.name}</div>} itemKey={`${i}`}>
+    <>
+      <AutoComplete
+        data={filteredResult}
+        value={value}
+        showClear
+        prefix={<IconSearch />}
+        placeholder="Search..."
+        emptyContent={<div className="p-3">No relationships found</div>}
+        onSearch={(v) => handleStringSearch(v)}
+        onChange={(v) => setValue(v)}
+        onSelect={(v) => {
+          const { id } = props.relationships.find((t) => t.name === v);
+          setRefActiveIndex(`${id}`);
+          document
+            .getElementById(`scroll_ref_${id}`)
+            .scrollIntoView({ behavior: "smooth" });
+        }}
+        className="w-full"
+      />
+      <Collapse
+        activeKey={refActiveIndex}
+        onChange={(k) => setRefActiveIndex(k)}
+        accordion
+      >
+        {props.relationships.length <= 0 ? (
+          <div className="select-none">
+            <Empty
+              image={
+                <IllustrationNoContent style={{ width: 160, height: 160 }} />
+              }
+              darkModeImage={
+                <IllustrationNoContentDark
+                  style={{ width: 160, height: 160 }}
+                />
+              }
+              title="No relationships"
+              description="Drag to connect fields and form relationships!"
+            />
+          </div>
+        ) : (
+          props.relationships.map((r, i) => (
+            <div id={`scroll_ref_${r.id}`} key={i}>
+              <Collapse.Panel header={<div>{r.name}</div>} itemKey={`${i}`}>
                <Form
                  onChange={(value) =>
                    props.setRelationships((prev) =>
@ -69,8 +133,9 @@ export default function ReferenceOverview(props) {
                                      r.startFieldId
                                    ].name,
                                  primary:
-                              props.tables[r.endTableId].fields[r.endFieldId]
-                                .name,
+                                    props.tables[r.endTableId].fields[
+                                      r.endFieldId
+                                    ].name,
                                },
                              ]}
                              pagination={false}
@ -179,7 +244,10 @@ export default function ReferenceOverview(props) {
                  </Col>
                </Row>
              </Collapse.Panel>
-      ))}
+            </div>
+          ))
+        )}
      </Collapse>
+    </>
  );
 }
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@ -80,7 +80,6 @@ export default function TableOverview(props) {

  return (
    <>
-      <div className="p-2">
      <Row gutter={6}>
        <Col span={16}>
          <AutoComplete
@ -93,10 +92,10 @@ export default function TableOverview(props) {
            onSearch={(v) => handleStringSearch(v)}
            onChange={(v) => setValue(v)}
            onSelect={(v) => {
-                const { id, name } = props.tables.find((t) => t.name === v);
+              const { id } = props.tables.find((t) => t.name === v);
              setTableActiveKey(`${id}`);
              document
-                  .getElementById(`${name}_scroll_id`)
+                .getElementById(`scroll_table_${id}`)
                .scrollIntoView({ behavior: "smooth" });
            }}
            className="w-full"
@ -140,7 +139,6 @@ export default function TableOverview(props) {
          </Button>
        </Col>
      </Row>
-      </div>
      <Collapse
        activeKey={tableActiveKey}
        onChange={(k) => setTableActiveKey(k)}
@ -163,7 +161,7 @@ export default function TableOverview(props) {
          </div>
        ) : (
          props.tables.map((t, i) => (
-            <div id={`${t.name}_scroll_id`} key={t.id}>
+            <div id={`scroll_table_${t.id}`} key={t.id}>
              <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
                {t.fields.map((f, j) => (
                  <Form
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@ -12,12 +12,12 @@ export default function Editor(props) {
  const [relationships, setRelationships] = useState([]);
  const [areas, setAreas] = useState([]);
  const [resize, setResize] = useState(false);
-  const [width, setWidth] = useState(320);
+  const [width, setWidth] = useState(340);

  const dragHandler = (e) => {
    if (!resize) return;
    const w = e.clientX;
-    if (w > 320) setWidth(w);
+    if (w > 340) setWidth(w);
  };

  return (