fix surveyInfo

This commit is contained in:
Tatiana Nikolaeva 2025-05-26 10:11:53 +05:00
parent 6068c717d3
commit 33f2b5ef62
8 changed files with 91 additions and 62 deletions

View file

@ -5,6 +5,7 @@ export interface ISurvey {
title: string; title: string;
description: string; description: string;
createdBy: number; createdBy: number;
createdAt: string;
} }
export interface INewSurvey{ export interface INewSurvey{

View file

@ -13,6 +13,17 @@ export const MySurveyList = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [surveys, setSurveys] = useState<MySurveyItem[]>([]); const [surveys, setSurveys] = useState<MySurveyItem[]>([]);
const formatDate = (dateString: string) => {
const date = new Date(dateString);
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear();
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${day}/${month}/${year} ${hours}:${minutes}`;
};
useEffect(() => { useEffect(() => {
const fetchSurvey = async () => { const fetchSurvey = async () => {
try { try {
@ -63,7 +74,7 @@ export const MySurveyList = () => {
<h1 className={styles.title}>{survey.title}</h1> <h1 className={styles.title}>{survey.title}</h1>
<h2 className={styles.description}>{survey.description}</h2> <h2 className={styles.description}>{survey.description}</h2>
</div> </div>
<span className={styles.date}>Дата создания: {survey.createdBy}</span> <span className={styles.date}>Дата создания: {formatDate(survey.createdAt)}</span>
</div> </div>
<div className={styles.container}> <div className={styles.container}>
<div className={`${styles.status} ${ <div className={`${styles.status} ${

View file

@ -1,18 +1,22 @@
import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx"; import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
import styles from './Results.module.css' import styles from './Results.module.css'
import {useState} from "react"; import {useOutletContext} from "react-router-dom";
import {ISurvey} from "../../api/SurveyApi.ts";
export const Results = () => { export const Results = () => {
const [descriptionSurvey, setDescriptionSurvey] = useState('');
const [titleSurvey, setTitleSurvey] = useState('Название опроса'); const { survey, setSurvey } = useOutletContext<{
survey: ISurvey;
setSurvey: (survey: ISurvey) => void;
}>();
return( return(
<div className={styles.results}> <div className={styles.results}>
<SurveyInfo <SurveyInfo
titleSurvey={titleSurvey} titleSurvey={survey.title}
descriptionSurvey={descriptionSurvey} descriptionSurvey={survey.description}
setDescriptionSurvey={setDescriptionSurvey} setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
setTitleSurvey={setTitleSurvey} setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
/> />
</div> </div>
) )

View file

@ -2,6 +2,7 @@
.settingSurvey{ .settingSurvey{
width: 85%; width: 85%;
height: 100vh;
} }
.startEndTime{ .startEndTime{

View file

@ -1,51 +1,25 @@
import React, {useState} from 'react'; import React from 'react';
import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx"; import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
import styles from "./SettingSurvey.module.css"; import styles from "./SettingSurvey.module.css";
import TimeEvent from "../TimeEvent/TimeEvent.tsx"; import TimeEvent from "../TimeEvent/TimeEvent.tsx";
import SaveButton from "../SaveButton/SaveButton.tsx"; import SaveButton from "../SaveButton/SaveButton.tsx";
// import {useParams} from "react-router-dom"; import {ISurvey} from "../../api/SurveyApi.ts";
// import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts"; import {useOutletContext} from "react-router-dom";
const SettingSurvey: React.FC = () => { const SettingSurvey: React.FC = () => {
const [descriptionSurvey, setDescriptionSurvey] = useState(''); const { survey, setSurvey } = useOutletContext<{
// const [survey, setSurvey] = useState<ISurvey | null>(null); survey: ISurvey;
const [titleSurvey, setTitleSurvey] = useState(''); setSurvey: (survey: ISurvey) => void;
// const { surveyId } = useParams<{ surveyId: string }>(); }>();
// useEffect(() => {
// if (!surveyId) {
// console.error('Survey ID is missing');
// return;
// }
// const id = parseInt(surveyId);
// if (isNaN(id)) {
// console.error('Invalid survey ID');
// return;
// }
//
// const fetchData = async () => {
// try {
// const surveyData = await getSurveyById(id);
// setSurvey(surveyData);
// setTitleSurvey(surveyData.title);
// setDescriptionSurvey(surveyData.description);
// } catch (error) {
// console.error('Ошибка:', error);
// }
// };
//
// fetchData();
//
// }, [surveyId]);
return ( return (
<div className={styles.settingSurvey}> <div className={styles.settingSurvey}>
<SurveyInfo <SurveyInfo
titleSurvey={titleSurvey} titleSurvey={survey.title}
descriptionSurvey={descriptionSurvey} descriptionSurvey={survey.description}
setDescriptionSurvey={setDescriptionSurvey} setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
setTitleSurvey={setTitleSurvey} setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
/> />
<div className={styles.startEndTime}> <div className={styles.startEndTime}>
<TimeEvent title='Время начала'/> <TimeEvent title='Время начала'/>

View file

@ -88,7 +88,7 @@ const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurve
} }
const renderTitle = () => { const renderTitle = () => {
if (isSurveyViewPage || isCompleteSurveyActive) { if (isCompleteSurveyActive) {
return ( return (
<button className={styles.titleSurvey}> <button className={styles.titleSurvey}>
<h1>{titleSurvey || 'Название опроса'}</h1> <h1>{titleSurvey || 'Название опроса'}</h1>

View file

@ -1,8 +1,8 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx"; import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
import QuestionsList, { Question } from "../QuestionsList/QuestionsList.tsx"; import QuestionsList, { Question } from "../QuestionsList/QuestionsList.tsx";
import { getSurveyById, ISurvey, updateSurvey } from "../../api/SurveyApi.ts"; import { ISurvey, updateSurvey } from "../../api/SurveyApi.ts";
import { useParams } from "react-router-dom"; import {useOutletContext} from "react-router-dom";
import { addNewQuestion, getListQuestions, updateQuestion, deleteQuestion } from "../../api/QuestionApi.ts"; import { addNewQuestion, getListQuestions, updateQuestion, deleteQuestion } from "../../api/QuestionApi.ts";
import styles from "./SurveyPage.module.css"; import styles from "./SurveyPage.module.css";
import SaveButton from "../SaveButton/SaveButton.tsx"; import SaveButton from "../SaveButton/SaveButton.tsx";
@ -153,22 +153,28 @@ class ActionQueue {
} }
export const SurveyPage: React.FC = () => { export const SurveyPage: React.FC = () => {
const [survey, setSurvey] = useState<ISurvey | null>(null); // const [survey, setSurvey] = useState<ISurvey | null>(null);
const [questions, setQuestions] = useState<Question[]>([]); const [questions, setQuestions] = useState<Question[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const { surveyId } = useParams<{ surveyId: string }>(); // const { surveyId } = useParams<{ surveyId: string }>();
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
const { survey, setSurvey } = useOutletContext<{
survey: ISurvey;
setSurvey: (survey: ISurvey) => void;
}>();
useEffect(() => { useEffect(() => {
if (!surveyId) { if (!survey.id) {
console.error('Survey ID is missing'); console.error('Survey ID is missing');
return; return;
} }
const id = parseInt(surveyId); // const id = parseInt(survey.id);
const id = survey.id;
if (isNaN(id)) { if (isNaN(id)) {
console.error('Invalid survey ID'); console.error('Invalid survey ID');
return; return;
@ -177,10 +183,10 @@ export const SurveyPage: React.FC = () => {
const fetchData = async () => { const fetchData = async () => {
try { try {
setLoading(true); setLoading(true);
const surveyData = await getSurveyById(id); // const surveyData = await getSurveyById(id);
setSurvey(surveyData); setSurvey(survey);
setTitle(surveyData.title); setTitle(survey.title);
setDescription(surveyData.description); setDescription(survey.description);
const questionsData = await getListQuestions(id); const questionsData = await getListQuestions(id);
const formattedQuestions = await Promise.all(questionsData.map(async q => { const formattedQuestions = await Promise.all(questionsData.map(async q => {
@ -205,14 +211,15 @@ export const SurveyPage: React.FC = () => {
}; };
fetchData(); fetchData();
}, [surveyId]); }, [survey.id]);
const handleSave = async () => { const handleSave = async () => {
if (!surveyId || !survey) return; if (!survey.id || !survey) return;
try { try {
setError(null); setError(null);
const id = parseInt(surveyId); // const id = parseInt(survey.id);
const id = survey.id;
const actionQueue = new ActionQueue(); const actionQueue = new ActionQueue();
actionQueue.add({ actionQueue.add({

View file

@ -1,16 +1,47 @@
import Header from "../../components/Header/Header.tsx"; import Header from "../../components/Header/Header.tsx";
import Navigation from "../../components/Navigation/Navigation.tsx"; import Navigation from "../../components/Navigation/Navigation.tsx";
import styles from './SurveyCreateAndEditingPage.module.css' import styles from './SurveyCreateAndEditingPage.module.css'
import { Outlet } from "react-router-dom"; import {Outlet, useParams, useLocation} from "react-router-dom";
import {useEffect, useState} from "react";
import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts";
export const SurveyCreateAndEditingPage = () => { export const SurveyCreateAndEditingPage = () => {
const { surveyId } = useParams<{ surveyId: string }>();
const location = useLocation();
const [survey, setSurvey] = useState<ISurvey | null>(null);
const [loading, setLoading] = useState(false);
const isCreateMode = location.pathname.includes('/survey/create');
useEffect(() => {
if (isCreateMode || !surveyId) return;
setLoading(true);
const fetchSurvey = async () => {
try {
const data = await getSurveyById(parseInt(surveyId));
setSurvey(data);
} catch (error) {
console.error("Ошибка загрузки опроса:", error);
} finally {
setLoading(false);
}
};
fetchSurvey();
}, [surveyId, isCreateMode]);
if (!isCreateMode) {
if (loading) return <div>Загрузка...</div>;
if (!survey) return <div>Опрос не найден</div>;
}
return ( return (
<div className={styles.layout}> <div className={styles.layout}>
<Header /> <Header />
<div className={styles.main}> <div className={styles.main}>
<Navigation /> <Navigation />
<div className={styles.content}> <div className={styles.content}>
<Outlet /> <Outlet context={{ survey, setSurvey }}/>
</div> </div>
</div> </div>
</div> </div>