feat(client): add appropriation node and node edit drawer

client/public/icons/node/calculate.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_381_806" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_381_806)">
+<path d="M12 13.75H17V12.25H12V13.75ZM12 11.25H17V9.75H12V11.25ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z" fill="#606060"/>
+<path d="M9.75 14.0179H7.75V12.5179H9.75V14.0179Z" fill="#606060"/>
+<path d="M9.75 11.5179H7.75V10.0179H9.75V11.5179Z" fill="#606060"/>
+</g>
+</svg>

client/src/components/ContentDrawer.tsx

@@ -1,175 +0,0 @@
-import { Drawer } from 'antd';
-import { useEffect, useState } from 'react';
-import { Avatar, Typography } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { useUserSelector } from '@/store/userStore';
-
-interface ContentDrawerProps {
-  open: boolean;
-  closeDrawer: () => void;
-  children: React.ReactNode;
-  type: 'create' | 'edit';
-  login?: string;
-  name?: string;
-  email?: string | null;
-}
-
-export default function ContentDrawer({
-  open,
-  closeDrawer,
-  children,
-  type,
-  login,
-  name,
-  email,
-}: ContentDrawerProps) {
-  const user = useUserSelector();
-  const { t } = useTranslation();
-  const [width, setWidth] = useState<number | string>('30%');
-
-  const calculateWidths = () => {
-    const windowWidth = window.innerWidth;
-    const expanded = Math.max(windowWidth * 0.3, 300);
-    setWidth(expanded);
-  };
-
-  useEffect(() => {
-    calculateWidths();
-    window.addEventListener('resize', calculateWidths);
-    return () => window.removeEventListener('resize', calculateWidths);
-  }, []);
-  console.log(login, user?.login, login === user?.login);
-
-  const editDrawerTitle = (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 12,
-      }}
-    >
-      <div
-        onClick={closeDrawer}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '24px',
-          width: '24px',
-          cursor: 'pointer',
-        }}
-      >
-        <img
-          src="./icons/drawer/arrow_back.svg"
-          alt="close_drawer"
-          style={{ height: '16px', width: '16px' }}
-        />
-      </div>
-
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
-        <Avatar
-          src={
-            login ? `https://gamma.heado.ru/go/ava?name=${login}` : undefined
-          }
-          size={40}
-          style={{ flexShrink: 0 }}
-        />
-        <div>
-          <Typography.Text
-            strong
-            style={{ display: 'block', fontSize: '20px' }}
-          >
-            {name} {login === user?.login ? t('you') : ''}
-          </Typography.Text>
-          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
-            {email}
-          </Typography.Text>
-        </div>
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '24px',
-          width: '24px',
-        }}
-      >
-        <img
-          src="./icons/drawer/delete.svg"
-          alt="delete"
-          style={{ height: '18px', width: '16px' }}
-        />
-      </div>
-    </div>
-  );
-
-  const createDrawerTitle = (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 12,
-      }}
-    >
-      <div
-        onClick={closeDrawer}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '24px',
-          width: '24px',
-          cursor: 'pointer',
-        }}
-      >
-        <img
-          src="./icons/drawer/arrow_back.svg"
-          alt="close_drawer"
-          style={{ height: '16px', width: '16px' }}
-        />
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 12,
-          flex: 1,
-          fontSize: '20px',
-        }}
-      >
-        {t('newAccount')}
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '24px',
-          width: '24px',
-        }}
-        onClick={closeDrawer}
-      >
-        <img
-          src="./icons/drawer/delete.svg"
-          alt="delete"
-          style={{ height: '18px', width: '16px' }}
-        />
-      </div>
-    </div>
-  );
-
-  return (
-    <Drawer
-      title={type === 'create' ? createDrawerTitle : editDrawerTitle}
-      placement="right"
-      open={open}
-      width={width}
-      destroyOnHidden={true}
-      closable={false}
-    >
-      {children}
-    </Drawer>
-  );
-}

client/src/components/Header.tsx

@@ -2,8 +2,8 @@ import { useUserSelector } from '@/store/userStore';
 import { Avatar } from 'antd';
 import Title from 'antd/es/typography/Title';
 import { useState } from 'react';
-import ContentDrawer from './ContentDrawer';
-import UserEdit from './UserEdit';
+import ContentDrawer from './drawers/ContentDrawer';
+import UserEdit from './drawers/users/UserEdit';
 
 interface HeaderProps {
   title: string;
@@ -68,7 +68,7 @@ export default function Header({ title, additionalContent }: HeaderProps) {
         email={user?.email}
         open={openEdit}
         closeDrawer={closeEditDrawer}
-        type="edit"
+        type="userEdit"
       >
         {user?.id && <UserEdit closeDrawer={closeEditDrawer} userId={user?.id} />}
       </ContentDrawer>

client/src/components/ReactFlowDrawer.tsx

@@ -0,0 +1,139 @@
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  useNodesState,
+  useEdgesState,
+  Handle,
+  Position,
+} from "@xyflow/react";
+import IfElseNode from "./nodes/IfElseNode";
+import { useCallback, useEffect } from "react";
+import customEdgeStyle from "./edges/defaultEdgeStyle";
+import { message } from "antd";
+import AppropriationNode from "./nodes/AppropriationNode";
+import { useTranslation } from "react-i18next";
+
+function CustomNode({ data }: { data: any }) {
+  return (
+    <div
+      style={{
+        padding: 10,
+        border: "1px solid #ccc",
+        borderRadius: 5,
+        backgroundColor: "white",
+      }}
+    >
+      <div>
+        <div>{data.label}</div>
+      </div>
+      <div>
+        <Handle type="source" position={Position.Right} />
+      </div>
+      <div>
+        <Handle type="source" position={Position.Bottom} />
+      </div>
+    </div>
+  );
+}
+
+const nodeTypes = {
+  custom: CustomNode,
+  ifElse: IfElseNode,
+  appropriation: AppropriationNode,
+};
+
+const initialNodes = [
+  {
+    id: "1",
+    type: "ifElse",
+    position: { x: 100, y: 100 },
+    data: { condition: "B=2" },
+  },
+  {
+    id: "2",
+    type: "default",
+    position: { x: 400, y: 100 },
+    data: { label: "Приём" },
+  },
+  {
+    id: "3",
+    type: "appropriation",
+    position: { x: 400, y: 300 },
+    data: { value: "Выбрать {{account.role}}" },
+  },
+];
+
+const initialEdges = [
+  {
+    id: "e1-2",
+    source: "1",
+    target: "2",
+    label: "A1",
+    ...customEdgeStyle,
+  },
+];
+
+interface ReactFlowDrawerProps {
+  showDrawer: () => void;
+}
+
+export default function ReactFlowDrawer({ showDrawer }: ReactFlowDrawerProps) {
+  const { t } = useTranslation();
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback(
+    (con: { source: any; target: any }) => {
+      const exists = edges.some(
+        (edge) => edge.source === con.source && edge.target === con.target
+      );
+
+      if (exists) {
+        message.warning("Edge already exists");
+        return;
+      }
+
+      const newEdge = {
+        ...con,
+        ...customEdgeStyle,
+        id: `e${con.source}-${con.target}`,
+        label: "A1",
+      };
+
+      setEdges((eds) => [...eds, newEdge]);
+    },
+    [edges, setEdges]
+  );
+
+  useEffect(() => {
+    console.log("Nodes changed:", nodes);
+  }, [nodes]);
+
+  useEffect(() => {
+    console.log("Edges changed:", edges);
+  }, [edges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      // onNodesChange={onNodesChange}
+      // onEdgesChange={onEdgesChange}
+      // onConnect={onConnect}
+      nodesDraggable={false}
+      elementsSelectable={false}
+      nodesConnectable={false}
+      onNodeClick={(e) => {
+        console.log(e, "node clicked");
+        showDrawer();
+      }}
+      nodeTypes={nodeTypes}
+      fitView
+    >
+      <Background />
+      <Controls />
+    </ReactFlow>
+  );
+}

client/src/components/drawers/ContentDrawer.tsx

@@ -0,0 +1,245 @@
+import { Drawer } from "antd";
+import { useEffect, useState } from "react";
+import { Avatar, Typography } from "antd";
+import { useTranslation } from "react-i18next";
+import { useUserSelector } from "@/store/userStore";
+
+interface ContentDrawerProps {
+  open: boolean;
+  closeDrawer: () => void;
+  children: React.ReactNode;
+  type: "userCreate" | "userEdit" | "nodeEdit";
+  login?: string;
+  name?: string;
+  email?: string | null;
+}
+
+export default function ContentDrawer({
+  open,
+  closeDrawer,
+  children,
+  type,
+  login,
+  name,
+  email,
+}: ContentDrawerProps) {
+  const user = useUserSelector();
+  const { t } = useTranslation();
+  const [width, setWidth] = useState<number | string>("30%");
+
+  const calculateWidths = () => {
+    const windowWidth = window.innerWidth;
+    const expanded = Math.max(windowWidth * 0.3, 300);
+    setWidth(expanded);
+  };
+
+  useEffect(() => {
+    calculateWidths();
+    window.addEventListener("resize", calculateWidths);
+    return () => window.removeEventListener("resize", calculateWidths);
+  }, []);
+  console.log(login, user?.login, login === user?.login);
+
+  const userEditDrawerTitle = (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 12, flex: 1 }}>
+        <Avatar
+          src={
+            login ? `https://gamma.heado.ru/go/ava?name=${login}` : undefined
+          }
+          size={40}
+          style={{ flexShrink: 0 }}
+        />
+        <div>
+          <Typography.Text
+            strong
+            style={{ display: "block", fontSize: "20px" }}
+          >
+            {name} {login === user?.login ? t("you") : ""}
+          </Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
+            {email}
+          </Typography.Text>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+
+  const userCreateDrawerTitle = (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          flex: 1,
+          fontSize: "20px",
+        }}
+      >
+        {t("newAccount")}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+        onClick={closeDrawer}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+
+  const nodeEditDrawerTitle = (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          flex: 1,
+          fontSize: "20px",
+        }}
+      >
+        Редактирование блока
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+        onClick={closeDrawer}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <Drawer
+      // title={
+      //   type === "userCreate" ? userCreateDrawerTitle : userEditDrawerTitle
+      // }
+      title={(() => {
+        switch (type) {
+          case "userCreate":
+            return userCreateDrawerTitle;
+          case "userEdit":
+            return userEditDrawerTitle;
+          case "nodeEdit":
+            return nodeEditDrawerTitle;
+          default:
+            return null;
+        }
+      })()}
+      placement="right"
+      open={open}
+      width={width}
+      destroyOnHidden={true}
+      closable={false}
+    >
+      {children}
+    </Drawer>
+  );
+}

client/src/components/nodes/AppropriationNode.tsx

@@ -0,0 +1,56 @@
+import { Handle, Node, NodeProps, Position } from "@xyflow/react";
+import DEFAULT_HANDLE_STYLE from "./defaultHandleStyle";
+
+type AppropriationNodeData = { value: string };
+
+export default function AppropriationNode({
+  data,
+}: NodeProps<Node & AppropriationNodeData>) {
+  return (
+    <div
+      style={{
+        border: "0px solid",
+        borderRadius: 8,
+        backgroundColor: "white",
+        width: "248px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: "12px",
+          height: "48px",
+          fontWeight: "600px",
+          fontSize: "16px",
+          gap: "12px",
+        }}
+      >
+        <img
+          style={{ height: "24px", width: "24px" }}
+          src="/icons/node/calculate.svg"
+          alt="appropriation logo"
+        />{" "}
+        ПРИСВОЕНИЕ
+      </div>
+      <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          padding: "12px",
+          fontSize: "14px",
+          minHeight: "48px",
+        }}
+      >
+        {data.value as string}
+      </div>
+      <Handle
+        style={{ ...DEFAULT_HANDLE_STYLE }}
+        type="target"
+        position={Position.Top}
+        id="input"
+      />
+    </div>
+  );
+}

client/src/components/nodes/IfElseNode.tsx

@@ -69,6 +69,9 @@ export default function IfElseNode({ data }: NodeProps<Node & IfElseNodeData>) {
         style={{ ...DEFAULT_HANDLE_STYLE }}
       />
       <Handle
+        onClick={() => {
+          console.log("click");
+        }}
         type="source"
         position={Position.Bottom}
         id="false"