feat(client): add appropriation node and node edit drawer
This commit is contained in:
10
client/public/icons/node/calculate.svg
Normal file
10
client/public/icons/node/calculate.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 828 B |
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -2,8 +2,8 @@ import { useUserSelector } from '@/store/userStore';
|
|||||||
import { Avatar } from 'antd';
|
import { Avatar } from 'antd';
|
||||||
import Title from 'antd/es/typography/Title';
|
import Title from 'antd/es/typography/Title';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import ContentDrawer from './ContentDrawer';
|
import ContentDrawer from './drawers/ContentDrawer';
|
||||||
import UserEdit from './UserEdit';
|
import UserEdit from './drawers/users/UserEdit';
|
||||||
|
|
||||||
interface HeaderProps {
|
interface HeaderProps {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -68,7 +68,7 @@ export default function Header({ title, additionalContent }: HeaderProps) {
|
|||||||
email={user?.email}
|
email={user?.email}
|
||||||
open={openEdit}
|
open={openEdit}
|
||||||
closeDrawer={closeEditDrawer}
|
closeDrawer={closeEditDrawer}
|
||||||
type="edit"
|
type="userEdit"
|
||||||
>
|
>
|
||||||
{user?.id && <UserEdit closeDrawer={closeEditDrawer} userId={user?.id} />}
|
{user?.id && <UserEdit closeDrawer={closeEditDrawer} userId={user?.id} />}
|
||||||
</ContentDrawer>
|
</ContentDrawer>
|
||||||
|
|||||||
139
client/src/components/ReactFlowDrawer.tsx
Normal file
139
client/src/components/ReactFlowDrawer.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
245
client/src/components/drawers/ContentDrawer.tsx
Normal file
245
client/src/components/drawers/ContentDrawer.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
56
client/src/components/nodes/AppropriationNode.tsx
Normal file
56
client/src/components/nodes/AppropriationNode.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -69,6 +69,9 @@ export default function IfElseNode({ data }: NodeProps<Node & IfElseNodeData>) {
|
|||||||
style={{ ...DEFAULT_HANDLE_STYLE }}
|
style={{ ...DEFAULT_HANDLE_STYLE }}
|
||||||
/>
|
/>
|
||||||
<Handle
|
<Handle
|
||||||
|
onClick={() => {
|
||||||
|
console.log("click");
|
||||||
|
}}
|
||||||
type="source"
|
type="source"
|
||||||
position={Position.Bottom}
|
position={Position.Bottom}
|
||||||
id="false"
|
id="false"
|
||||||
|
|||||||
Reference in New Issue
Block a user