sheet-widget 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/WidgetNode.js DELETED
@@ -1,219 +0,0 @@
1
- import React, { useEffect, useRef, useState } from 'react';
2
- import axios from 'axios';
3
- import { Handle, Position, useReactFlow } from '@xyflow/react';
4
- import TableEditor from './TableEditor';
5
-
6
- const TABLES_API = 'http://158.160.73.104:8000/api/tables/';
7
- const WIDGET_CONFIG_API = 'http://158.160.73.104:8000/api/widget/';
8
-
9
- const containerStyle = {
10
- padding: '12px',
11
- width: '100%',
12
- height: '100%',
13
- minWidth: '360px',
14
- minHeight: '300px',
15
- borderRadius: '12px',
16
- border: '1px solid #d9e2ec',
17
- background: '#ffffff',
18
- boxShadow: '0 8px 16px rgba(15, 23, 42, 0.08)',
19
- fontFamily: 'Arial, sans-serif',
20
- display: 'flex',
21
- flexDirection: 'column',
22
- overflow: 'hidden'
23
- };
24
-
25
- const titleStyle = {
26
- fontSize: '16px',
27
- fontWeight: 'bold',
28
- marginBottom: '8px',
29
- color: '#1f2933',
30
- cursor: 'grab'
31
- };
32
-
33
- const editorContainerStyle = {
34
- flex: 1,
35
- display: 'flex',
36
- flexDirection: 'column',
37
- border: '1px solid #e5e7eb',
38
- borderRadius: '10px',
39
- overflow: 'hidden',
40
- background: '#ffffff',
41
- minHeight: '220px'
42
- };
43
-
44
- const formRowStyle = {
45
- display: 'flex',
46
- gap: '12px',
47
- marginBottom: '10px',
48
- fontSize: '13px',
49
- color: '#52606d'
50
- };
51
-
52
- function WidgetNode({ id, data }) {
53
- const info = data?.info;
54
- const table = data?.table;
55
- const widgetId = data?.widgetId ?? info?.widgetId;
56
- const [tableTitle, setTableTitle] = useState(table?.title || 'Без названия');
57
- const [newTitle, setNewTitle] = useState('Новая таблица');
58
- const [rowsCount, setRowsCount] = useState(10);
59
- const [colsCount, setColsCount] = useState(8);
60
- const [isCreating, setIsCreating] = useState(false);
61
- const { setNodes } = useReactFlow();
62
- const lastSyncedConfig = useRef(null);
63
-
64
- useEffect(() => {
65
- if (!widgetId || !table?.id) {
66
- return;
67
- }
68
-
69
- const nextConfig = { tableId: table.id };
70
- const serialized = JSON.stringify(nextConfig);
71
-
72
- if (lastSyncedConfig.current === serialized) {
73
- return;
74
- }
75
-
76
- lastSyncedConfig.current = serialized;
77
-
78
- axios
79
- .put(`${WIDGET_CONFIG_API}${widgetId}`, nextConfig)
80
- .catch((error) => {
81
- console.error('Ошибка синхронизации конфига виджета:', error);
82
- });
83
- }, [table?.id, widgetId]);
84
-
85
- useEffect(() => {
86
- setTableTitle(table?.title || 'Без названия');
87
- }, [table?.title]);
88
-
89
- const handleCreateTable = async (titleOverride, rowsOverride, colsOverride) => {
90
- const titleValue = typeof titleOverride === 'string' ? titleOverride : newTitle;
91
- const rowsValue = rowsOverride ?? rowsCount;
92
- const colsValue = colsOverride ?? colsCount;
93
-
94
- if (!titleValue.trim()) {
95
- alert('Введите название таблицы');
96
- return;
97
- }
98
-
99
- setIsCreating(true);
100
- const emptyRows = Array.from({ length: rowsValue }, () =>
101
- Array.from({ length: colsValue }, () => '')
102
- );
103
-
104
- try {
105
- const response = await axios.post(TABLES_API, {
106
- title: titleValue,
107
- data: { rows: emptyRows }
108
- });
109
-
110
- setNodes((current) =>
111
- current.map((node) =>
112
- node.id === id
113
- ? {
114
- ...node,
115
- data: {
116
- ...node.data,
117
- table: response.data
118
- }
119
- }
120
- : node
121
- )
122
- );
123
- setTableTitle(response.data?.title || titleValue);
124
- } catch (error) {
125
- console.error(error);
126
- alert('Ошибка создания таблицы');
127
- } finally {
128
- setIsCreating(false);
129
- }
130
- };
131
-
132
-
133
- return (
134
- <div style={containerStyle}>
135
- <div style={titleStyle} className="node-drag-handle">
136
- {table ? tableTitle : data?.title || 'Новый виджет'}
137
- </div>
138
- {table ? (
139
- <>
140
- <div style={editorContainerStyle} className="nodrag">
141
- <TableEditor
142
- id={table.id}
143
- compactMode
144
- showCompactControls
145
- onTitleChange={setTableTitle}
146
- />
147
- </div>
148
- </>
149
- ) : (
150
- <div style={{ fontSize: '13px', color: '#52606d', lineHeight: 1.4 }}>
151
- {info ? (
152
- <>
153
- <div><strong>ID:</strong> {info.widgetId}</div>
154
- <div><strong>Роль:</strong> {info.role}</div>
155
- <div><strong>Доска:</strong> {info?.board?.name || 'Не указана'}</div>
156
- </>
157
- ) : (
158
- <div>Ожидание вызова getInfo...</div>
159
- )}
160
- <div style={{ marginTop: '12px' }}>
161
- <div style={formRowStyle}>
162
- <label style={{ flex: 2 }}>
163
- Название
164
- <input
165
- type="text"
166
- value={newTitle}
167
- onChange={(event) => setNewTitle(event.target.value)}
168
- style={{ width: '100%', padding: '6px', marginTop: '4px' }}
169
- />
170
- </label>
171
- </div>
172
- <div style={formRowStyle}>
173
- <label style={{ flex: 1 }}>
174
- Строк
175
- <input
176
- type="number"
177
- min="1"
178
- max="1000"
179
- value={rowsCount}
180
- onChange={(event) => setRowsCount(parseInt(event.target.value, 10) || 1)}
181
- style={{ width: '100%', padding: '6px', marginTop: '4px' }}
182
- />
183
- </label>
184
- <label style={{ flex: 1 }}>
185
- Столбцов
186
- <input
187
- type="number"
188
- min="1"
189
- max="100"
190
- value={colsCount}
191
- onChange={(event) => setColsCount(parseInt(event.target.value, 10) || 1)}
192
- style={{ width: '100%', padding: '6px', marginTop: '4px' }}
193
- />
194
- </label>
195
- </div>
196
- <button
197
- onClick={() => handleCreateTable()}
198
- disabled={isCreating}
199
- style={{
200
- padding: '8px 12px',
201
- borderRadius: '6px',
202
- border: 'none',
203
- background: isCreating ? '#94a3b8' : '#2563eb',
204
- color: '#fff',
205
- cursor: isCreating ? 'not-allowed' : 'pointer'
206
- }}
207
- >
208
- {isCreating ? 'Создаём...' : 'Создать таблицу'}
209
- </button>
210
- </div>
211
- </div>
212
- )}
213
- <Handle type="target" position={Position.Left} style={{ background: '#7b8794' }} />
214
- <Handle type="source" position={Position.Right} style={{ background: '#7b8794' }} />
215
- </div>
216
- );
217
- }
218
-
219
- export default WidgetNode;
package/src/index.js DELETED
@@ -1,3 +0,0 @@
1
- import 'handsontable/dist/handsontable.full.min.css';
2
-
3
- export { default as WidgetNode } from './WidgetNode';