correction of working capacity

2025-05-14 17:59:36 +05:00 · 2025-05-14 17:59:36 +05:00 · fa5fe30c34
commit fa5fe30c34
parent bc293f6370
11 changed files with 180 additions and 82 deletions
--- a/SurveyFrontend/src/api/AuthApi.ts
+++ b/SurveyFrontend/src/api/AuthApi.ts
@ -20,6 +20,10 @@ export const registerUser = async (data: IRegistrationData) => {

        if (responseData.accessToken) {
            localStorage.setItem("token", responseData.accessToken);
+            localStorage.setItem("user", JSON.stringify({
+                firstName: data.firstName,
+                lastName: data.lastName
+            }));
        }

        return responseData;
@ -41,6 +45,14 @@ export const authUser = async (data: IAuthData) => {
        const token = responseData.accessToken || responseData.token;
        if (token) {
            localStorage.setItem("token", token);
+            const user = localStorage.getItem("user");
+            if (!responseData.user && user) {
+                responseData.user = JSON.parse(user);
+            }
+
+            if (responseData.user) {
+                localStorage.setItem("user", JSON.stringify(responseData.user));
+            }
        }

        return responseData;
--- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css
+++ b/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css
@ -1,46 +1,67 @@
-/*AnswerOption.module.css*/
+/*!*AnswerOption.module.css*!*/

-.answer{
+.answer {
    width: 100%;
    display: flex;
    gap: 10px;
    margin-bottom: 17px;
+    align-items: flex-start;
 }

-.textAnswer{
+.textAnswer {
    text-align: left;
    border: none;
-    background-color: #ffffff;
+    background: none;
    font-size: 18px;
    font-weight: 500;
    word-break: break-word;
    width: 70%;
+    padding: 0;
+    line-height: 24px;
+    cursor: text;
+    margin-top: 2px;
 }

-.buttonMarker{
+.buttonMarker {
    padding: 0;
    border: none;
-    background-color: transparent;
+    background: none;
+    position: relative;
+    top: 0;
+    transition: top 0.1s ease;
+    cursor: pointer;
+    height: 24px;
 }

-.answerIcon{
-    vertical-align: middle;
+.buttonMarker.editing {
+    top: 3px;
+}
+
+.answerIcon {
    width: 24px;
+    height: 24px;
+    display: block;
 }

-.answerInput{
-    vertical-align: middle;
+.answerInput {
    font-size: 18px;
    font-weight: 500;
    outline: none;
    border: none;
    resize: none;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
+    width: 70%;
+    padding: 0;
+    margin-top: 2px;
+    font-family: inherit;
+    min-height: 24px;
+    height: auto;
+    overflow-y: hidden;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }

-.deleteButton{
+.deleteButton {
    margin-left: auto;
    border: none;
    background-color: transparent;
--- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
+++ b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
@ -32,8 +32,22 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe

    const handleTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        setCurrentValue(event.target.value);
+        // Автоматическое изменение высоты
+        if (textAreaRef.current) {
+            textAreaRef.current.style.height = 'auto';
+            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+        }
    };

+    useEffect(() => {
+        if (isEditing && textAreaRef.current) {
+            textAreaRef.current.focus();
+            // Установка начальной высоты
+            textAreaRef.current.style.height = 'auto';
+            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+        }
+    }, [isEditing]);
+
    const handleSave = () => {
        setIsEditing(false);
        onChange(currentValue);
@ -66,7 +80,10 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe

    return (
        <div className={styles.answer}>
-            <button className={styles.buttonMarker} onClick={toggleSelect}>
+            <button
+                className={`${styles.buttonMarker} ${isEditing ? styles.editing : ''}`}
+                onClick={toggleSelect}
+            >
                <img
                    className={styles.answerIcon}
                    src={getImage()}
@ -74,7 +91,8 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
                />
            </button>
            {isEditing ? (
-                <textarea className={styles.answerInput}
+                <textarea
+                    className={styles.answerInput}
                    ref={textAreaRef}
                    value={currentValue}
                    onChange={handleTextareaChange}
@ -92,6 +110,7 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
            </button>
        </div>
    );
+
 };

 export default AnswerOption;
--- a/SurveyFrontend/src/components/Header/Header.tsx
+++ b/SurveyFrontend/src/components/Header/Header.tsx
@ -2,19 +2,24 @@ import React from "react";
 import Logo from "../Logo/Logo.tsx";
 import Account from "../Account/Account.tsx";
 import styles from './Header.module.css'
-import {Link, useLocation} from "react-router-dom";
+import {Link, useLocation, useNavigate} from "react-router-dom";



 const Header: React.FC = () => {
    const location = useLocation();
+    const navigate = useNavigate();
    const isCreateSurveyActive = location.pathname.includes('/survey/create');
    const isSurveyPage = location.pathname.includes('/survey/') && !location.pathname.includes('/survey/create');
    const isMySurveysPage = location.pathname === '/my-surveys' || isSurveyPage;

+    const handleLogoClick = () => {
+        navigate(location.pathname, { replace: true });
+    };
+
    return (
        <div className={styles.header}>
-            <Logo href='/' />
+            <Logo href={location.pathname} onClick={handleLogoClick} />
            <nav className={styles.pagesNav}>
                <Link to='/survey/create/questions'
                className={`${styles.pageLink} ${isCreateSurveyActive ? styles.active : ''}`}>
@ -27,10 +32,7 @@ const Header: React.FC = () => {
                    {isMySurveysPage && <hr className={styles.activeLine}/>}
                </Link>
            </nav>
-            <Account
-                href='/profile'
-                user='Иванов Иван'
-            />
+            <Account href={'/profile'} user={'Иванов Иван'}/>
        </div>
    );
 };
--- a/SurveyFrontend/src/components/Logo/Logo.tsx
+++ b/SurveyFrontend/src/components/Logo/Logo.tsx
@ -3,11 +3,12 @@ import styles from './Logo.module.css'

 interface LogoProps {
    href: string;
+    onClick: () => void
 }

-const Logo: React.FC<LogoProps> = ({href}) => {
+const Logo: React.FC<LogoProps> = ({href, onClick}) => {
    return (
-        <a className={styles.logo} href={href}>
+        <a className={styles.logo} href={href} onClick={onClick}>
            <img src='../../../public/logo.svg' alt="" />
        </a>
    );
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
+++ b/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
@ -30,6 +30,9 @@
    margin-bottom: 5px;
    font-size: 24px;
    font-weight: 600;
+    line-height: 1.5;
+    overflow-y: hidden;
+    min-height: 1em;
 }

 .buttonQuestion{
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
+++ b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
@ -38,6 +38,11 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu

    const handleTextareaQuestionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        setTextQuestion(event.target.value);
+
+        if (textareaQuestionRef.current) {
+            textareaQuestionRef.current.style.height = 'auto';
+            textareaQuestionRef.current.style.height = `${textareaQuestionRef.current.scrollHeight}px`;
+        }
    }

    const handleSaveQuestion = () => {
@ -59,6 +64,8 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
    useEffect(() => {
        if (isEditingQuestion && textareaQuestionRef.current) {
            textareaQuestionRef.current.focus();
+            textareaQuestionRef.current.style.height = 'auto';
+            textareaQuestionRef.current.style.height = `${textareaQuestionRef.current.scrollHeight}px`;
        }
    }, [isEditingQuestion]);

@ -109,6 +116,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
                            onKeyDown={handleQuestionKeyDown}
                            onBlur={handleQuestionBlur}
                            placeholder={initialTextQuestion}
+                            rows={1}
                        />
                    ) : (
                        <button className={styles.buttonQuestion} onClick={handleQuestionClick}>
--- a/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
+++ b/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
@ -30,7 +30,11 @@ const RegisterForm = () => {
            const responseData = await registerUser({username, firstName, lastName, email, password});
            console.log(responseData); //проверка вывода данных
            if (responseData && !responseData.error) {
-                console.log('Регистрация успешна')
+                console.log('Регистрация успешна');
+                localStorage.setItem("user", JSON.stringify({
+                    firstName,
+                    lastName
+                }));
                navigate('/my-surveys');
            }
            else {
--- a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
+++ b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
@ -11,6 +11,7 @@
 }

 .param{
+    border-radius: 4px;
    background-color: #FFFFFF;
    padding-top: 15px;
    padding-bottom: 97px;
--- a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css
+++ b/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css
@ -24,50 +24,60 @@
    text-align: center;
    font-size: 20px;
    font-weight: 600;
-    line-height: 20px;
    margin-bottom: 23px;
    word-break: break-word;
    padding: 0;
 }

-.textareaTitle{
-    margin-top: -17px;
-    width: 80%;
-    padding-top: 35px;
+.textareaTitle,
+.textareaDescrip {
+    width: 100%;
    resize: none;
-    text-align: center;
-    font-size: 40px;
-    font-weight: 600;
    border: none;
    outline: none;
-    line-height: 30px;
-    word-break: break-word;
+    font-family: inherit;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    display: block;
+    overflow-y: hidden;
 }

-.description{
+.textareaTitle {
+    font-size: 32px;
+    font-weight: 600;
+    text-align: center;
+    line-height: 1.2;
+    min-height: 40px;
+}
+
+.textareaDescrip {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 1.4;
+    min-height: 24px;
+}
+
+.descriptionWrapper {
+    width: 80%;
+    margin: 0 auto;
+    padding: 5px 0;
+}
+
+.description {
    border: none;
-    font-size: 24px;
+    font-size: 18px;
    font-weight: 500;
    text-align: center;
    background-color: white;
    display: block;
    margin: 0 auto;
+    padding: 5px 0;
+    width: 80%;
    word-break: break-word;
-    padding: 0;
 }

-.textareaDescrip{
-    width: 80%;
-    outline: none;
-    border: none;
-    resize: none;
-    text-align: center;
-    margin: 0 auto;
-    font-size: 22px;
-    font-weight: 500;
-    word-break: break-word;
-    padding: 0;
-}

 .descripButton{
    border: none;
--- a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
+++ b/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
@ -9,34 +9,50 @@ const SurveyInfo: React.FC = () => {
    const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
    const descriptionTextareaRef = useRef<HTMLTextAreaElement>(null);

+    const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
+        if (textarea) {
+            // Сброс высоты перед расчетом
+            textarea.style.height = 'auto';
+            // Устанавливаем высоту равной scrollHeight + небольшой отступ
+            textarea.style.height = `${textarea.scrollHeight}px`;
+            // Центрируем содержимое вертикально
+            textarea.style.paddingTop = `${Math.max(0, (textarea.clientHeight - textarea.scrollHeight) / 2)}px`;
+        }
+    };
+
    const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
        setDescriptionSurvey(descripEvent.target.value);
-    }
+        adjustTextareaHeight(descripEvent.target);
+    };

    const handleNewTitleChange = (titleEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
        setTitleSurvey(titleEvent.target.value);
+        adjustTextareaHeight(titleEvent.target);
+    };
+
+    useEffect(() => {
+        if (showNewTitleField && titleTextareaRef.current) {
+            titleTextareaRef.current.focus();
+            adjustTextareaHeight(titleTextareaRef.current);
        }
+    }, [showNewTitleField]);
+
+    useEffect(() => {
+        if (showDescriptionField && descriptionTextareaRef.current) {
+            descriptionTextareaRef.current.focus();
+            adjustTextareaHeight(descriptionTextareaRef.current);
+        }
+    }, [showDescriptionField]);
+

    const handleAddNewTitleClick = () => {
        setShowNewTitleField(true);
    }

-    useEffect(() => {
-        if (showNewTitleField && titleTextareaRef.current) {
-            titleTextareaRef.current.focus();
-        }
-    }, [showNewTitleField]);
-
    const handleAddDescriptionClick = () => {
        setShowDescriptionField(true);
    }

-    useEffect(() => {
-        if (showDescriptionField && descriptionTextareaRef.current){
-            descriptionTextareaRef.current.focus();
-        }
-    }, [showDescriptionField]);
-
    const handleTitleKeyDown = (titleClickEnter: React.KeyboardEvent<HTMLTextAreaElement>) => {
        if (titleClickEnter.key === 'Enter'){
            titleClickEnter.preventDefault();
@ -64,7 +80,7 @@ const SurveyInfo: React.FC = () => {
    };


-    const renderDescription = ()=> {
+    const renderDescription = () => {
        if (descriptionSurvey && !showDescriptionField) {
            return (
                <button className={styles.description} onClick={handleParagraphClick}>
@ -73,7 +89,7 @@ const SurveyInfo: React.FC = () => {
            );
        } else if (showDescriptionField) {
            return (
-                <p className={styles.description}>
+                <div className={styles.descriptionWrapper}>
                <textarea
                    ref={descriptionTextareaRef}
                    className={styles.textareaDescrip}
@ -82,8 +98,9 @@ const SurveyInfo: React.FC = () => {
                    onChange={handleDescriptionChange}
                    onKeyDown={handleDescriptionKeyDown}
                    onBlur={handleDescriptionBlur}
+                    rows={1} // Начальное количество строк
                />
-                </p>
+                </div>
            );
        } else {
            return (