feat: drag and drop for files, code redactor in task + competition session decomposed

2026-05-23 10:57:09 +00:00 · 2025-03-01 22:52:51 +09:00
parent c79b3df909
commit 758d0de9ed
17 changed files with 784 additions and 132 deletions
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button } from "@/components/ui/button";
+
+interface ActionButtonsProps {
+  onHistoryClick: () => void;
+  onSubmit: () => void;
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({ onHistoryClick, onSubmit }) => {
+  return (
+    <div className="flex gap-3 justify-between">
+      <Button 
+        variant="ghost" 
+        className="font-hse-sans bg-white hover:bg-gray-100"
+        onClick={onHistoryClick}
+      >
+        История
+      </Button>
+      <Button 
+        onClick={onSubmit}
+        className="font-hse-sans"
+      >
+        Отправить решение
+      </Button>
+    </div>
+  );
+};
+
+export default ActionButtons;
@@ -0,0 +1,117 @@
+import React, { useRef, useEffect, useState } from 'react';
+import * as monaco from 'monaco-editor';
+import { Copy, Check } from 'lucide-react'; // Import Lucide React icons
+
+interface CodeSolutionProps {
+  answer: string;
+  setAnswer: (value: string) => void;
+  language?: string;
+}
+
+const CodeSolution: React.FC<CodeSolutionProps> = ({ 
+  answer, 
+  setAnswer, 
+  language = 'python' 
+}) => {
+  const editorContainerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const languageDisplay = language === 'python' ? 'Python 3.11' : language;
+
+  const copyToClipboard = () => {
+    if (answer) {
+      navigator.clipboard.writeText(answer)
+        .then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        })
+        .catch(err => {
+          console.error('Failed to copy: ', err);
+        });
+    }
+  };
+
+  useEffect(() => {
+    if (editorContainerRef.current) {
+      editorRef.current = monaco.editor.create(editorContainerRef.current, {
+        value: answer,
+        language,
+        theme: 'vs-light',
+        automaticLayout: true,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        fontSize: 14,
+        fontFamily: 'hse-sans, Menlo, Monaco, "Courier New", monospace',
+        lineNumbers: 'on',
+        lineNumbersMinChars: 3, 
+        glyphMargin: false, 
+        folding: false,
+        roundedSelection: false,
+        renderLineHighlight: 'none', 
+        overviewRulerBorder: false,
+        overviewRulerLanes: 0,
+        hideCursorInOverviewRuler: true,
+        scrollbar: {
+          useShadows: false,
+          verticalHasArrows: false,
+          horizontalHasArrows: false,
+          vertical: 'hidden',
+          horizontal: 'auto', 
+          verticalScrollbarSize: 0,
+          horizontalScrollbarSize: 8,
+          alwaysConsumeMouseWheel: false
+        },
+      });
+
+      editorRef.current.onDidChangeModelContent(() => {
+        if (editorRef.current) {
+          const value = editorRef.current.getValue();
+          setAnswer(value);
+        }
+      });
+
+      return () => {
+        if (editorRef.current) {
+          editorRef.current.dispose();
+        }
+      };
+    }
+  }, [language]); 
+
+  useEffect(() => {
+    if (editorRef.current) {
+      const currentValue = editorRef.current.getValue();
+      if (currentValue !== answer) {
+        editorRef.current.setValue(answer);
+      }
+    }
+  }, [answer]);
+
+  return (
+    <div className="bg-white rounded-lg overflow-hidden border border-gray-200">
+      <div className="flex items-center justify-between bg-gray-50 px-4 py-2 border-b border-gray-200">
+        <div className="text-sm font-medium text-gray-600">{languageDisplay}</div>
+        <button 
+          onClick={copyToClipboard}
+          className="flex items-center text-sm text-gray-500 hover:text-gray-700 transition-colors"
+        >
+          {copied ? (
+            <Check className="w-4 h-4 mr-1" />
+          ) : (
+            <Copy className="w-4 h-4 mr-1" />
+          )}
+        </button>
+      </div>
+      
+      <div className="p-4">
+        <div 
+          ref={editorContainerRef} 
+          className="w-full min-h-[300px] rounded bg-gray-50"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CodeSolution;
@@ -0,0 +1,93 @@
+import React from 'react';
+import { FileIcon } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+
+interface FileSolutionProps {
+  selectedFile: File | null;
+  setSelectedFile: (file: File | null) => void;
+  fileInputRef: React.RefObject<HTMLInputElement>;
+}
+
+const FileSolution: React.FC<FileSolutionProps> = ({ 
+  selectedFile, 
+  setSelectedFile, 
+  fileInputRef 
+}) => {
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      setSelectedFile(event.target.files[0]);
+    }
+  };
+
+  const handleFileUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.currentTarget.classList.add('bg-gray-50');
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.currentTarget.classList.remove('bg-gray-50');
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.currentTarget.classList.remove('bg-gray-50');
+    
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      setSelectedFile(e.dataTransfer.files[0]);
+    }
+  };
+
+  return (
+    <>
+      <input 
+        type="file" 
+        ref={fileInputRef}
+        className="hidden" 
+        onChange={handleFileChange}
+        accept=".jpg,.jpeg,.png,.pptx,.docx,.pdf,.xlsx,.txt"
+      />
+      
+      {selectedFile ? (
+        <div className="bg-white rounded-lg p-6 flex flex-col items-center justify-center min-h-[180px]">
+          <div className="flex flex-col items-center">
+            <FileIcon size={28} className="text-black mb-2" />
+            <span className="text-sm text-gray-700 font-medium mb-1 font-hse-sans">{selectedFile.name}</span>
+            <span className="text-xs text-gray-500 font-hse-sans">{(selectedFile.size / 1024).toFixed(1)} KB</span>
+            <Button 
+              variant="ghost" 
+              className="text-blue-500 text-sm mt-2 p-0 h-auto hover:bg-transparent hover:text-blue-600 font-hse-sans"
+              onClick={() => setSelectedFile(null)}
+            >
+              Выбрать другой файл
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div 
+          className="bg-white rounded-lg p-6 flex flex-col items-center justify-center min-h-[180px] cursor-pointer transition-colors"
+          onClick={handleFileUploadClick}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          <FileIcon size={28} className="text-black mb-3" />
+          <span 
+            className="bg-[var(--color-yellow-standard)] text-black font-medium rounded-full px-4 py-1.5 text-sm mb-2 font-hse-sans inline-block"
+          >
+            Загрузить файл
+          </span>
+          <p className="text-xs text-gray-500 text-center font-hse-sans">
+            Доступные форматы: jpg, jpeg, png
+          </p>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default FileSolution;
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Input } from "@/components/ui/input";
+
+interface InputSolutionProps {
+  answer: string;
+  setAnswer: (value: string) => void;
+}
+
+const InputSolution: React.FC<InputSolutionProps> = ({ answer, setAnswer }) => {
+  return (
+    <div className="bg-white rounded-lg p-4">
+      <Input 
+        className="border-0 shadow-none focus-visible:ring-0 font-hse-sans text-sm h-9"
+        placeholder="Введите ответ"
+        value={answer}
+        onChange={(e) => setAnswer(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export default InputSolution;
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Task } from "@/shared/types";
+import { getTaskBgColor, getTaskTextColor } from '@/pages/CompetitionSession/utils/utils';
+
+interface SolutionStatusProps {
+  task: Task;
+}
+
+const SolutionStatus: React.FC<SolutionStatusProps> = ({ task }) => {
+  return (
+    <div className={`${getTaskBgColor(task.status)} rounded-lg p-4 relative`}>
+      <div className="flex flex-col">
+        <span className={`${getTaskTextColor(task.status)} font-medium`}>
+          Решение 12345
+        </span>
+        <span className={`${getTaskTextColor(task.status)} mt-1`}>
+          Зачтено 5/10 баллов
+        </span>
+      </div>
+      <div className={`absolute bottom-2 right-3 text-xs ${getTaskTextColor(task.status)}`}>
+        1 марта, 08:41
+      </div>
+    </div>
+  );
+};
+
+export default SolutionStatus;
@@ -0,0 +1,52 @@
+import React, { useState, useRef } from 'react';
+import { Task } from "@/shared/types";
+import SolutionStatus from './components/SolutionStatus';
+import InputSolution from './components/InputSolution';
+import FileSolution from './components/FileSolution';
+import CodeSolution from './components/CodeSolution';
+import ActionButtons from './components/ActionButtons';
+
+interface TaskSolutionProps {
+  task: Task;
+  answer: string;
+  setAnswer: (value: string) => void;
+  onSubmit: () => void;
+  onHistoryClick: () => void;
+}
+
+const TaskSolution: React.FC<TaskSolutionProps> = ({ 
+  task, 
+  answer, 
+  setAnswer, 
+  onSubmit, 
+  onHistoryClick,
+}) => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="md:w-[500px] flex flex-col gap-4">
+      <SolutionStatus task={task} />
+      
+      {task.solutionType === 'input' && (
+        <InputSolution answer={answer} setAnswer={setAnswer} />
+      )}
+      
+      {task.solutionType === 'file' && (
+        <FileSolution 
+          selectedFile={selectedFile} 
+          setSelectedFile={setSelectedFile} 
+          fileInputRef={fileInputRef}
+        />
+      )}
+      
+      {task.solutionType === 'code' && (
+        <CodeSolution answer={answer} setAnswer={setAnswer} />
+      )}
+      
+      <ActionButtons onHistoryClick={onHistoryClick} onSubmit={onSubmit} />
+    </div>
+  );
+};
+
+export default TaskSolution;