Упрощение кода и улучшение стиля компонента TemplateEditor

2025-07-15 16:46:58 +03:00
parent 3b0b4145b1
commit 40145206b2
1 changed files with 88 additions and 81 deletions
--- a/src/components/TemplateManager/TemplateEditor.tsx
+++ b/src/components/TemplateManager/TemplateEditor.tsx
@@ -1,16 +1,16 @@
-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 } from '../../types/template';
-import DualSpreadsheet from '../DualSpreadsheet/DualSpreadsheet';
-import { Button } from '../ui/button';
+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 } from '../../types/template'
+import DualSpreadsheet from '../DualSpreadsheet/DualSpreadsheet'
+import { Button } from '../ui/button'

 interface TemplateEditorProps {
-  template: Template;
-  onSave: (template: Template) => void;
-  onCancel: () => void;
-  onBack: () => void;
+  template: Template
+  onSave: (template: Template) => void
+  onCancel: () => void
+  onBack: () => void
 }

 export const TemplateEditor: React.FC<TemplateEditorProps> = ({
@@ -19,98 +19,104 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
  onCancel,
  onBack,
 }) => {
-  const [editedTemplate, setEditedTemplate] = useState<Template>(template);
-  const [excelData, setExcelData] = useState<Record<string, any>>(template.excelData || {});
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const navigate = useNavigate();
+  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];
-    if (!file) return;
+    const file = event.target.files?.[0]
+    if (!file) return

-    const reader = new FileReader();
+    const reader = new FileReader()
    reader.onload = (e) => {
      try {
-        const data = new Uint8Array(e.target?.result as ArrayBuffer);
-        const workbook = XLSX.read(data, { type: 'array' });
-        
+        const data = new Uint8Array(e.target?.result as ArrayBuffer)
+        const workbook = XLSX.read(data, { type: 'array' })
+
        // Читаем первый лист
-        const firstSheetName = workbook.SheetNames[0];
-        const worksheet = workbook.Sheets[firstSheetName];
-        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
-        
+        const firstSheetName = workbook.SheetNames[0]
+        const worksheet = workbook.Sheets[firstSheetName]
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
+
        // Преобразуем в формат для нашей системы
-        const formattedData: Record<string, any> = {};
-        
-        (jsonData as any[][]).forEach((row, rowIndex) => {
+        const formattedData: Record<string, any> = {}
+
+        ;(jsonData as any[][]).forEach((row, rowIndex) => {
          row.forEach((cell, colIndex) => {
            if (cell !== undefined && cell !== null && cell !== '') {
-              const cellName = String.fromCharCode(65 + colIndex) + (rowIndex + 1);
-              formattedData[cellName] = cell;
+              const cellName =
+                String.fromCharCode(65 + colIndex) + (rowIndex + 1)
+              formattedData[cellName] = cell
            }
-          });
-        });
+          })
+        })

-        setExcelData(formattedData);
-        setEditedTemplate(prev => ({
+        setExcelData(formattedData)
+        setEditedTemplate((prev) => ({
          ...prev,
          excelFile: file,
          excelData: formattedData,
          updatedAt: new Date(),
-        }));
-        
+        }))
+
        // Принудительно обновляем данные в таблице
        setTimeout(() => {
-          setExcelData({...formattedData});
-        }, 100);
+          setExcelData({ ...formattedData })
+        }, 100)
      } catch (error) {
-        console.error('Ошибка при чтении Excel файла:', error);
-        alert('Ошибка при чтении Excel файла');
+        console.error('Ошибка при чтении Excel файла:', error)
+        alert('Ошибка при чтении Excel файла')
      }
-    };
-    reader.readAsArrayBuffer(file);
-  };
+    }
+    reader.readAsArrayBuffer(file)
+  }

  const handleSave = () => {
-    onSave(editedTemplate);
-  };
+    onSave(editedTemplate)
+  }

  const handleCreateElements = () => {
-    navigate('/elements');
-  };
+    navigate('/elements')
+  }

  return (
-    <div className="h-screen flex flex-col bg-gray-50">
+    <div className="flex h-screen flex-col bg-background">
      {/* Заголовок */}
-      <div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
+      <div className="flex-shrink-0 border-b bg-card px-4 py-3">
        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-3">
            <Button variant="ghost" size="icon" onClick={onBack}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <div>
-              <h1 className="text-xl font-semibold text-gray-800">
-                Редактирование шаблона: {editedTemplate.name}
-              </h1>
-              <p className="text-sm text-gray-600 mt-1">
+              <h1 className="text-lg font-semibold">{editedTemplate.name}</h1>
+              <p className="mt-0.5 text-xs text-muted-foreground">
                Настройте Excel шаблон и значения отчета
              </p>
            </div>
          </div>
          <div className="flex gap-2">
-            <Button 
-              variant="outline" 
+            <Button
+              variant="outline"
+              size="sm"
              onClick={handleCreateElements}
              className="flex items-center gap-2"
            >
-              <Wrench className="h-4 w-4" />
+              <Wrench className="h-3.5 w-3.5" />
              Создать элементы
            </Button>
-            <Button variant="outline" onClick={onCancel}>
+            <Button variant="outline" size="sm" onClick={onCancel}>
              Отмена
            </Button>
-            <Button onClick={handleSave} className="flex items-center gap-2">
-              <Save className="h-4 w-4" />
+            <Button
+              size="sm"
+              onClick={handleSave}
+              className="flex items-center gap-2"
+            >
+              <Save className="h-3.5 w-3.5" />
              Сохранить
            </Button>
          </div>
@@ -118,25 +124,26 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
      </div>

      {/* Панель загрузки Excel */}
-      <div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
+      <div className="flex-shrink-0 border-b bg-muted/30 px-4 py-2">
        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <div className="text-sm font-medium text-gray-700">
+          <div className="flex items-center gap-3">
+            <span className="text-xs font-medium text-muted-foreground">
              Excel шаблон:
-            </div>
+            </span>
            {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 className="flex items-center gap-2 rounded-md bg-emerald-50 px-2 py-1">
+                <Upload className="h-3 w-3 text-emerald-600" />
+                <span className="text-xs text-emerald-700">
+                  {editedTemplate.excelFile.name}
+                </span>
              </div>
            ) : (
-              <div className="text-sm text-gray-500">Файл не загружен</div>
+              <div className="text-xs text-muted-foreground">
+                Файл не загружен
+              </div>
            )}
          </div>
-          <div className="flex items-center gap-2">
-            <div className="text-sm text-gray-500">
-              Элементов создано: {editedTemplate.elements.length}
-            </div>
+          <div className="flex items-center gap-3">
            <input
              ref={fileInputRef}
              type="file"
@@ -148,21 +155,21 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
              variant="outline"
              size="sm"
              onClick={() => fileInputRef.current?.click()}
-              className="flex items-center gap-2"
+              className="flex h-7 items-center gap-2"
            >
-              <Upload className="h-4 w-4" />
-              {editedTemplate.excelFile ? 'Заменить файл' : 'Загрузить Excel'}
+              <Upload className="h-3 w-3" />
+              <span className="text-xs">
+                {editedTemplate.excelFile ? 'Заменить файл' : 'Загрузить Excel'}
+              </span>
            </Button>
          </div>
        </div>
      </div>

      {/* Таблицы - теперь занимают всё оставшееся пространство */}
-      <div className="flex-1 min-h-0">
-        <DualSpreadsheet 
-          templateData={{ Report: excelData }}
-        />
+      <div className="min-h-0 flex-1">
+        <DualSpreadsheet templateData={{ Report: excelData }} />
      </div>
    </div>
-  );
-}; 
+  )
+}