fix problems with settings

This commit is contained in:
Tatiana Nikolaeva 2025-05-26 13:20:41 +05:00
parent 71a6cdf3ce
commit b4125d2642
4 changed files with 30 additions and 12 deletions

View file

@ -13,4 +13,5 @@
text-align: center; text-align: center;
box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1); box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1);
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 20px;
} }

View file

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

View file

@ -1,26 +1,40 @@
import React from 'react'; import React, {useState} 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 {ISurvey} from "../../api/SurveyApi.ts"; import {ISurvey} from "../../api/SurveyApi.ts";
import {useOutletContext} from "react-router-dom"; import {useLocation, useOutletContext} from "react-router-dom";
const SettingSurvey: React.FC = () => { const SettingSurvey: React.FC = () => {
const location = useLocation();
const isSettingCreatePage = location.pathname.includes('/survey/create');
const { survey, setSurvey } = useOutletContext<{ const { survey, setSurvey } = useOutletContext<{
survey: ISurvey; survey: ISurvey;
setSurvey: (survey: ISurvey) => void; setSurvey: (survey: ISurvey) => void;
}>(); }>();
const [descriptionSurvey, setDescriptionSurvey] = useState('');
const [titleSurvey, setTitleSurvey] = useState('');
return ( return (
<div className={styles.settingSurvey}> <div className={styles.settingSurvey}>
<SurveyInfo {isSettingCreatePage ? (
titleSurvey={survey.title} <SurveyInfo
descriptionSurvey={survey.description} titleSurvey={titleSurvey}
setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })} descriptionSurvey={descriptionSurvey}
setTitleSurvey={(value) => setSurvey({ ...survey, title: value })} setDescriptionSurvey={setDescriptionSurvey}
/> setTitleSurvey={setTitleSurvey}
/>
) : (
<SurveyInfo
titleSurvey={survey.title}
descriptionSurvey={survey.description}
setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
/>
)}
<div className={styles.startEndTime}> <div className={styles.startEndTime}>
<TimeEvent title='Время начала'/> <TimeEvent title='Время начала'/>
<TimeEvent title='Время окончания'/> <TimeEvent title='Время окончания'/>

View file

@ -2,7 +2,7 @@
.timeEvent{ .timeEvent{
width: 49%; width: 44%;
padding: 17px 25px 48px 20px; padding: 17px 25px 48px 20px;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 6px; border-radius: 6px;
@ -18,19 +18,22 @@
.datetime{ .datetime{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 30px;
} }
.inputDate{ .inputDate{
width: fit-content;
border: 3px solid #007AFF26; border: 3px solid #007AFF26;
padding: 12px 107px 12px 21px; padding: 12px 40px 12px 21px;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
border-radius: 3px; border-radius: 3px;
} }
.inputTime{ .inputTime{
width: fit-content;
border: 3px solid #007AFF26; border: 3px solid #007AFF26;
padding: 12px 42px; padding: 12px 22px;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
border-radius: 3px; border-radius: 3px;