2 окна и настройка элементов

src/components/TemplateManager/TemplateEditor.tsx

@@ -1,10 +1,10 @@
-import { ArrowLeft, Save, Upload } from 'lucide-react';
+import { ArrowLeft, Save, Upload, Wrench } from 'lucide-react';
 import React, { useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import * as XLSX from 'xlsx';
-import { Template, TemplateElement } from '../../types/template';
+import { Template } from '../../types/template';
 import DualSpreadsheet from '../DualSpreadsheet/DualSpreadsheet';
 import { Button } from '../ui/button';
-import { ElementConstructor } from './ElementConstructor';
 
 interface TemplateEditorProps {
   template: Template;
@@ -22,6 +22,7 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
   const [editedTemplate, setEditedTemplate] = useState<Template>(template);
   const [excelData, setExcelData] = useState<Record<string, any>>(template.excelData || {});
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
 
   const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -70,36 +71,14 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
     reader.readAsArrayBuffer(file);
   };
 
-  const handleElementAdd = (element: TemplateElement) => {
-    setEditedTemplate(prev => ({
-      ...prev,
-      elements: [...prev.elements, element],
-      updatedAt: new Date(),
-    }));
-  };
-
-  const handleElementUpdate = (elementId: string, updates: Partial<TemplateElement>) => {
-    setEditedTemplate(prev => ({
-      ...prev,
-      elements: prev.elements.map(el => 
-        el.id === elementId ? { ...el, ...updates } : el
-      ),
-      updatedAt: new Date(),
-    }));
-  };
-
-  const handleElementDelete = (elementId: string) => {
-    setEditedTemplate(prev => ({
-      ...prev,
-      elements: prev.elements.filter(el => el.id !== elementId),
-      updatedAt: new Date(),
-    }));
-  };
-
   const handleSave = () => {
     onSave(editedTemplate);
   };
 
+  const handleCreateElements = () => {
+    navigate('/elements');
+  };
+
   return (
     <div className="h-screen flex flex-col bg-gray-50">
       {/* Заголовок */}
@@ -119,6 +98,14 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
             </div>
           </div>
           <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              onClick={handleCreateElements}
+              className="flex items-center gap-2"
+            >
+              <Wrench className="h-4 w-4" />
+              Создать элементы
+            </Button>
             <Button variant="outline" onClick={onCancel}>
               Отмена
             </Button>
@@ -130,64 +117,51 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
         </div>
       </div>
 
-      {/* Основной контент */}
-      <div className="flex-1 flex flex-col min-h-0">
-        {/* Загрузка Excel и таблицы */}
-        <div className="flex-1 flex flex-col">
-          {/* Панель загрузки Excel */}
-          <div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <div className="text-sm font-medium text-gray-700">
-                  Excel шаблон:
-                </div>
-                {editedTemplate.excelFile ? (
-                  <div className="flex items-center gap-2 text-sm text-green-600">
-                    <Upload className="h-4 w-4" />
-                    <span>{editedTemplate.excelFile.name}</span>
-                  </div>
-                ) : (
-                  <div className="text-sm text-gray-500">Файл не загружен</div>
-                )}
-              </div>
-              <div>
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept=".xlsx,.xls"
-                  onChange={handleFileUpload}
-                  className="hidden"
-                />
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => fileInputRef.current?.click()}
-                  className="flex items-center gap-2"
-                >
-                  <Upload className="h-4 w-4" />
-                  {editedTemplate.excelFile ? 'Заменить файл' : 'Загрузить Excel'}
-                </Button>
-              </div>
+      {/* Панель загрузки Excel */}
+      <div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="text-sm font-medium text-gray-700">
+              Excel шаблон:
             </div>
+            {editedTemplate.excelFile ? (
+              <div className="flex items-center gap-2 text-sm text-green-600">
+                <Upload className="h-4 w-4" />
+                <span>{editedTemplate.excelFile.name}</span>
+              </div>
+            ) : (
+              <div className="text-sm text-gray-500">Файл не загружен</div>
+            )}
           </div>
-
-          {/* Таблицы */}
-          <div className="flex-1 min-h-0">
-            <DualSpreadsheet 
-              templateData={{ Report: excelData }}
+          <div className="flex items-center gap-2">
+            <div className="text-sm text-gray-500">
+              Элементов создано: {editedTemplate.elements.length}
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".xlsx,.xls"
+              onChange={handleFileUpload}
+              className="hidden"
             />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => fileInputRef.current?.click()}
+              className="flex items-center gap-2"
+            >
+              <Upload className="h-4 w-4" />
+              {editedTemplate.excelFile ? 'Заменить файл' : 'Загрузить Excel'}
+            </Button>
           </div>
         </div>
+      </div>
 
-        {/* Конструктор элементов */}
-        <div className="h-80 border-t border-gray-200 bg-white flex-shrink-0">
-          <ElementConstructor
-            elements={editedTemplate.elements}
-            onElementAdd={handleElementAdd}
-            onElementUpdate={handleElementUpdate}
-            onElementDelete={handleElementDelete}
-          />
-        </div>
+      {/* Таблицы - теперь занимают всё оставшееся пространство */}
+      <div className="flex-1 min-h-0">
+        <DualSpreadsheet 
+          templateData={{ Report: excelData }}
+        />
       </div>
     </div>
   );