sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

correction of working capacity

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-05-14 17:59:36 +05:00
parent bc293f6370
commit fa5fe30c34
11 changed files with 180 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

12
SurveyFrontend/src/api/AuthApi.ts
View file

@ -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;

37
SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css
View file

@ -1,43 +1,64 @@
/*AnswerOption.module.css*/
/*!*AnswerOption.module.css*!*/
.answer {
width: 100%;
display: flex;
gap: 10px;
margin-bottom: 17px;
align-items: flex-start;
}
.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 {
padding: 0;
border: none;
background-color: transparent;
background: none;
position: relative;
top: 0;
transition: top 0.1s ease;
cursor: pointer;
height: 24px;
}
.buttonMarker.editing {
top: 3px;
}
.answerIcon {
vertical-align: middle;
width: 24px;
height: 24px;
display: block;
}
.answerInput {
vertical-align: middle;
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 {

23
SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
View file

@ -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;

14
SurveyFrontend/src/components/Header/Header.tsx
View file

@ -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>
);
};

5
SurveyFrontend/src/components/Logo/Logo.tsx
View file

@ -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>
);

3
SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
View file

@ -30,6 +30,9 @@
margin-bottom: 5px;
font-size: 24px;
font-weight: 600;
line-height: 1.5;
overflow-y: hidden;
min-height: 1em;
}
.buttonQuestion{

8
SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
View file

@ -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}>

6
SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
View file

@ -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 {

1
SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
View file

@ -11,6 +11,7 @@
}
.param{
border-radius: 4px;
background-color: #FFFFFF;
padding-top: 15px;
padding-bottom: 97px;

58
SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css
View file

@ -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;
}
.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;

47
SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
View file

@ -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();
@ -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 (