fix surveyInfo
This commit is contained in:
parent
6068c717d3
commit
33f2b5ef62
8 changed files with 91 additions and 62 deletions
|
|
@ -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{
|
||||||
|
|
|
||||||
|
|
@ -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} ${
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
.settingSurvey{
|
.settingSurvey{
|
||||||
width: 85%;
|
width: 85%;
|
||||||
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.startEndTime{
|
.startEndTime{
|
||||||
|
|
|
||||||
|
|
@ -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='Время начала'/>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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({
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue