бета настраиваемого интерфейса

src/pages/ElementsCreation/ui/Page/Page.tsx

@@ -5,13 +5,12 @@ import { ElementConstructor } from '../../../../components/TemplateManager/Eleme
 import { Button } from '../../../../components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { useTemplateContext } from '../../../../contexts/TemplateContext';
-import { Template, TemplateElement } from '../../../../types/template';
+import { FormLayoutSettings, Template, TemplateElement } from '../../../../types/template';
 
 export const ElementsCreation: FC = () => {
   const navigate = useNavigate();
   const { templates, updateTemplate } = useTemplateContext();
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 
   const handleTemplateSelect = (template: Template) => {
     setSelectedTemplate(template);
@@ -58,10 +57,51 @@ export const ElementsCreation: FC = () => {
     setSelectedTemplate(updatedTemplate);
   };
 
+  const handleElementsReorder = (reorderedElements: TemplateElement[]) => {
+    if (!selectedTemplate) return;
+    
+    // Обновляем порядок элементов
+    const elementsWithOrder = reorderedElements.map((element, index) => ({
+      ...element,
+      order: index,
+    }));
+    
+    const updatedTemplate = {
+      ...selectedTemplate,
+      elements: elementsWithOrder,
+      updatedAt: new Date(),
+    };
+    
+    updateTemplate(updatedTemplate);
+    setSelectedTemplate(updatedTemplate);
+  };
+
+  const handleLayoutSettingsChange = (settings: FormLayoutSettings) => {
+    if (!selectedTemplate) return;
+    
+    const updatedTemplate = {
+      ...selectedTemplate,
+      layoutSettings: settings,
+      updatedAt: new Date(),
+    };
+    
+    updateTemplate(updatedTemplate);
+    setSelectedTemplate(updatedTemplate);
+  };
+
   const handleBack = () => {
     setSelectedTemplate(null);
   };
 
+  // Настройки отображения по умолчанию
+  const defaultLayoutSettings: FormLayoutSettings = {
+    columns: 2,
+    grouping: 'none',
+    elementSpacing: 'normal',
+    showLabels: true,
+    enableDragDrop: true,
+  };
+
   if (selectedTemplate) {
     return (
       <div className="h-full bg-gray-50">
@@ -73,25 +113,33 @@ export const ElementsCreation: FC = () => {
               </Button>
               <div>
                 <h1 className="text-xl font-semibold text-gray-800">
-                  Создание элементов: {selectedTemplate.name}
+                  Конструктор элементов: {selectedTemplate.name}
                 </h1>
                 <p className="text-sm text-gray-600 mt-1">
-                  Создайте элементы формы для связи с ячейками шаблона
+                  Создайте элементы формы для связи с ячейками шаблона. Используйте drag & drop для изменения порядка.
                 </p>
               </div>
             </div>
-            <Button onClick={() => navigate('/templates')} variant="outline">
-              Перейти к шаблонам
-            </Button>
+            <div className="flex gap-2">
+              <Button onClick={() => navigate('/create-protocol')} variant="outline">
+                Предпросмотр формы
+              </Button>
+              <Button onClick={() => navigate('/templates')} variant="outline">
+                К шаблонам
+              </Button>
+            </div>
           </div>
         </div>
         
-        <div className="flex-1 bg-blue-50">
+        <div className="flex-1">
           <ElementConstructor
             elements={selectedTemplate.elements}
+            layoutSettings={selectedTemplate.layoutSettings || defaultLayoutSettings}
             onElementAdd={handleElementAdd}
             onElementUpdate={handleElementUpdate}
             onElementDelete={handleElementDelete}
+            onElementsReorder={handleElementsReorder}
+            onLayoutSettingsChange={handleLayoutSettingsChange}
           />
         </div>
       </div>
@@ -120,7 +168,7 @@ export const ElementsCreation: FC = () => {
         <div className="text-center py-12">
           <Wrench className="h-16 w-16 text-gray-400 mx-auto mb-4" />
           <h3 className="text-lg font-medium text-gray-900 mb-2">Нет доступных шаблонов</h3>
-          <p className="text-gray-600 mb-6">Создайте шаблон для начала работы с элементами</p>
+          <p className="text-gray-600 mb-6">Создайте шаблон протокола для начала работы с элементами</p>
           <Button onClick={() => navigate('/templates')}>
             <Plus className="h-4 w-4 mr-2" />
             Создать шаблон
@@ -144,8 +192,19 @@ export const ElementsCreation: FC = () => {
                     <Wrench className="h-4 w-4" />
                     <span>{template.elements.length} элементов создано</span>
                   </div>
+                  {template.layoutSettings && (
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                        {template.layoutSettings.columns} столбца
+                      </span>
+                      <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                        {template.layoutSettings.grouping === 'none' ? 'Без группировки' : 
+                         template.layoutSettings.grouping === 'by-type' ? 'По типу' : 'По категориям'}
+                      </span>
+                    </div>
+                  )}
                   <div className="text-xs text-gray-500 mt-2">
-                    Обновлен: {template.updatedAt.toLocaleDateString()}
+                    Обновлен: {template.updatedAt.toLocaleDateString('ru-RU')}
                   </div>
                 </div>
                 <div className="mt-4">