Commit dce3cbcd authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

editing 상태 변경

parent a2418d6c
...@@ -4,10 +4,10 @@ import { CheckboxType } from "../types"; ...@@ -4,10 +4,10 @@ import { CheckboxType } from "../types";
type Props = { type Props = {
element: CheckboxType; element: CheckboxType;
handleQuestion: (id: string) => void; handleQuestion: (id: string) => void;
save: boolean; isEditing: boolean;
}; };
export const CheckboxForm = ({ element, handleQuestion, save }: Props) => { export const CheckboxForm = ({ element, handleQuestion, isEditing }: Props) => {
const [choices, setChoices] = useState([...element.content.choices]); const [choices, setChoices] = useState([...element.content.choices]);
function handleContent(event: React.ChangeEvent<HTMLInputElement>) { function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
...@@ -41,7 +41,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => { ...@@ -41,7 +41,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
placeholder="선택지" placeholder="선택지"
value={choice.text} value={choice.text}
onChange={handleContent} onChange={handleContent}
disabled={save} disabled={!isEditing}
></input> ></input>
</div> </div>
))} ))}
...@@ -52,7 +52,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => { ...@@ -52,7 +52,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
name="rateValues" name="rateValues"
className="border border-red-500 rounded mx-2 px-2" className="border border-red-500 rounded mx-2 px-2"
onClick={deleteValue} onClick={deleteValue}
disabled={save} disabled={!isEditing}
> >
삭제 삭제
</button> </button>
...@@ -61,7 +61,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => { ...@@ -61,7 +61,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
name="rateValues" name="rateValues"
className="border border-blue-500 rounded mx-2 px-2" className="border border-blue-500 rounded mx-2 px-2"
onClick={addValue} onClick={addValue}
disabled={save} disabled={!isEditing}
> >
추가 추가
</button> </button>
......
...@@ -4,10 +4,10 @@ import { DropdownType } from "../types"; ...@@ -4,10 +4,10 @@ import { DropdownType } from "../types";
type Props = { type Props = {
element: DropdownType; element: DropdownType;
handleQuestion: (id: string) => void; handleQuestion: (id: string) => void;
save: boolean; isEditing: boolean;
}; };
export const DropdownForm = ({ element, handleQuestion, save }: Props) => { export const DropdownForm = ({ element, handleQuestion, isEditing }: Props) => {
const [choices, setChoices] = useState([...element.content.choices]); const [choices, setChoices] = useState([...element.content.choices]);
function handleContent(event: React.ChangeEvent<HTMLInputElement>) { function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
...@@ -45,7 +45,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => { ...@@ -45,7 +45,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
placeholder="선택지" placeholder="선택지"
value={choice.text} value={choice.text}
onChange={handleContent} onChange={handleContent}
disabled={save} disabled={!isEditing}
></input> ></input>
</div> </div>
))} ))}
...@@ -56,7 +56,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => { ...@@ -56,7 +56,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
name="rateValues" name="rateValues"
className="border border-red-500 rounded mx-2 px-2" className="border border-red-500 rounded mx-2 px-2"
onClick={deleteValue} onClick={deleteValue}
disabled={save} disabled={!isEditing}
> >
삭제 삭제
</button> </button>
...@@ -65,7 +65,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => { ...@@ -65,7 +65,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
name="rateValues" name="rateValues"
className="border border-blue-500 rounded mx-2 px-2" className="border border-blue-500 rounded mx-2 px-2"
onClick={addValue} onClick={addValue}
disabled={save} disabled={!isEditing}
> >
추가 추가
</button> </button>
......
...@@ -3,10 +3,10 @@ import { EssayType } from "../types"; ...@@ -3,10 +3,10 @@ import { EssayType } from "../types";
type Props = { type Props = {
element: EssayType; element: EssayType;
save: boolean; isEditing: boolean;
}; };
export const EssayForm = ({ element, save }: Props) => { export const EssayForm = ({ element, isEditing: save }: Props) => {
return ( return (
<div id="commentarea" className="flex mt-4 w-full justify-center"> <div id="commentarea" className="flex mt-4 w-full justify-center">
<input className="border w-11/12 h-16" disabled></input> <input className="border w-11/12 h-16" disabled></input>
......
...@@ -3,10 +3,10 @@ import { FileType } from "../types"; ...@@ -3,10 +3,10 @@ import { FileType } from "../types";
type Props = { type Props = {
element: FileType; element: FileType;
save: boolean; isEditing: boolean;
}; };
export const FileForm = ({ element, save }: Props) => { export const FileForm = ({ element, isEditing: save }: Props) => {
return ( return (
<div id="content" className="flex mt-4 w-full justify-center"> <div id="content" className="flex mt-4 w-full justify-center">
<input type="file" className=" w-11/12 h-16" disabled></input> <input type="file" className=" w-11/12 h-16" disabled></input>
......
...@@ -12,19 +12,23 @@ import { QUESTION_TYPES } from "../commons"; ...@@ -12,19 +12,23 @@ import { QUESTION_TYPES } from "../commons";
type Props = { type Props = {
element: BasicQuestionType; element: BasicQuestionType;
isEditing: boolean;
handleEditing: (qid: string, isEditing: boolean) => void;
handleQuestion: (element: BasicQuestionType) => void; handleQuestion: (element: BasicQuestionType) => void;
deleteQuestion: (id: string) => void; deleteQuestion: (id: string) => void;
// isSave: boolean;
}; };
export const Question = ({ export const Question = ({
element, element,
isEditing,
handleEditing,
handleQuestion, handleQuestion,
deleteQuestion, deleteQuestion,
}: // isSave, }: Props) => {
Props) => {
const [question, setQuestion] = useState({ ...element }); const [question, setQuestion] = useState({ ...element });
const [isSaved, setIsSaved] = useState(false); // const [isEditing, setIsEditing] = useState(false);
console.log("is editing in question:", isEditing);
async function handleEditComplete() { async function handleEditComplete() {
try { try {
...@@ -34,7 +38,8 @@ Props) => { ...@@ -34,7 +38,8 @@ Props) => {
); );
// console.log(newQuestion); // console.log(newQuestion);
handleQuestion(question); handleQuestion(question);
setIsSaved(true); // setIsEditing(true);
handleEditing(question._id, false);
// setSuccess(true); // setSuccess(true);
// setError(""); // setError("");
} catch (error) { } catch (error) {
...@@ -66,9 +71,7 @@ Props) => { ...@@ -66,9 +71,7 @@ Props) => {
choices: [{ text: "", value: 0 }], choices: [{ text: "", value: 0 }],
}; };
} }
// question.type = selectedType;
setQuestion({ ...question, type: selectedType, content: content }); setQuestion({ ...question, type: selectedType, content: content });
// handleQuestion(question._id);
} }
const handleElement = () => { const handleElement = () => {
...@@ -78,21 +81,19 @@ Props) => { ...@@ -78,21 +81,19 @@ Props) => {
function handleQuestionInfo(event: React.ChangeEvent<HTMLInputElement>) { function handleQuestionInfo(event: React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.currentTarget; const { name, value } = event.currentTarget;
// question[name] = value;
setQuestion({ ...question, [name]: value }); setQuestion({ ...question, [name]: value });
// handleQuestion(question._id);
} }
function getContent(element: BasicQuestionType) { function getContent(element: BasicQuestionType) {
switch (element.type) { switch (element.type) {
case "essay": case "essay":
return <EssayForm element={element} save={isSaved} />; return <EssayForm element={element} isEditing={isEditing} />;
case "radio": case "radio":
return ( return (
<RadioForm <RadioForm
handleQuestion={handleElement} handleQuestion={handleElement}
element={element} element={element}
save={isSaved} isEditing={isEditing}
/> />
); );
case "checkbox": case "checkbox":
...@@ -100,7 +101,7 @@ Props) => { ...@@ -100,7 +101,7 @@ Props) => {
<CheckboxForm <CheckboxForm
handleQuestion={handleElement} handleQuestion={handleElement}
element={element} element={element}
save={isSaved} isEditing={isEditing}
/> />
); );
case "dropdown": case "dropdown":
...@@ -108,17 +109,17 @@ Props) => { ...@@ -108,17 +109,17 @@ Props) => {
<DropdownForm <DropdownForm
handleQuestion={handleElement} handleQuestion={handleElement}
element={element} element={element}
save={isSaved} isEditing={isEditing}
/> />
); );
case "file": case "file":
return <FileForm element={element} save={isSaved} />; return <FileForm element={element} isEditing={isEditing} />;
case "rating": case "rating":
return ( return (
<RatingForm <RatingForm
handleQuestion={handleElement} handleQuestion={handleElement}
element={element} element={element}
save={isSaved} isEditing={isEditing}
/> />
); );
case "date": case "date":
...@@ -132,14 +133,14 @@ Props) => { ...@@ -132,14 +133,14 @@ Props) => {
const { checked, value } = event.currentTarget; const { checked, value } = event.currentTarget;
question[value] = checked; question[value] = checked;
setQuestion({ ...question, [value]: checked }); setQuestion({ ...question, [value]: checked });
// handleQuestion(question._id);
}; };
const onCancel = () => { const onCancel = () => {
console.log("element canceled button clicked", element); console.log("element canceled button clicked", element);
console.log("question canceled button clicked", question); console.log("question canceled button clicked", question);
setQuestion(element); setQuestion(element);
setIsSaved(true); // setIsEditing(true);
handleEditing(question._id, false);
}; };
const handleDelete = () => { const handleDelete = () => {
...@@ -152,12 +153,13 @@ Props) => { ...@@ -152,12 +153,13 @@ Props) => {
}; };
const handleEditClick = () => { const handleEditClick = () => {
setIsSaved(false); // setIsEditing(false);
handleEditing(question._id, true);
}; };
return ( return (
<div <div
style={{ borderColor: isSaved ? "#0A8A8A" : "red" }} style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}
className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg" className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
> >
<div className="flex h-16 w-full place-content-between items-center"> <div className="flex h-16 w-full place-content-between items-center">
...@@ -169,13 +171,13 @@ Props) => { ...@@ -169,13 +171,13 @@ Props) => {
placeholder={"Question Title"} placeholder={"Question Title"}
value={question.title} value={question.title}
onChange={handleQuestionInfo} onChange={handleQuestionInfo}
disabled={isSaved} disabled={!isEditing}
></input> ></input>
<select <select
id={question._id} id={question._id}
name="type" name="type"
onChange={handleSelect} onChange={handleSelect}
disabled={isSaved} disabled={!isEditing}
value={question.type} value={question.type}
className="w-32 md:w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5" className="w-32 md:w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
> >
...@@ -200,7 +202,7 @@ Props) => { ...@@ -200,7 +202,7 @@ Props) => {
placeholder="질문에 대한 설명을 입력해주세요" placeholder="질문에 대한 설명을 입력해주세요"
value={question.comment} value={question.comment}
onChange={handleQuestionInfo} onChange={handleQuestionInfo}
disabled={isSaved} disabled={!isEditing}
></input> ></input>
</div> </div>
{getContent(question)} {getContent(question)}
...@@ -211,22 +213,13 @@ Props) => { ...@@ -211,22 +213,13 @@ Props) => {
id="isRequired" id="isRequired"
value="isRequired" value="isRequired"
onChange={handleRequired} onChange={handleRequired}
disabled={isSaved} disabled={!isEditing}
checked={question.isRequired} checked={question.isRequired}
/> />
<label htmlFor="isRequired" className="px-1"> <label htmlFor="isRequired" className="px-1">
필수 필수
</label> </label>
{isSaved ? ( {isEditing ? (
<>
<button type="button" className="px-1" onClick={handleDelete}>
삭제
</button>
<button type="button" className="px-1" onClick={handleEditClick}>
수정
</button>
</>
) : (
<> <>
<button type="button" className="px-1" onClick={onCancel}> <button type="button" className="px-1" onClick={onCancel}>
취소 취소
...@@ -236,6 +229,15 @@ Props) => { ...@@ -236,6 +229,15 @@ Props) => {
확인 확인
</button> </button>
</> </>
) : (
<>
<button type="button" className="px-1" onClick={handleDelete}>
삭제
</button>
<button type="button" className="px-1" onClick={handleEditClick}>
수정
</button>
</>
)} )}
</div> </div>
</div> </div>
......
...@@ -4,10 +4,10 @@ import { RadioType } from "../types"; ...@@ -4,10 +4,10 @@ import { RadioType } from "../types";
type Props = { type Props = {
element: RadioType; element: RadioType;
handleQuestion: (id: string) => void; handleQuestion: (id: string) => void;
save: boolean; isEditing: boolean;
}; };
export const RadioForm = ({ element, handleQuestion, save }: Props) => { export const RadioForm = ({ element, handleQuestion, isEditing }: Props) => {
const [choices, setChoices] = useState([...element.content.choices]); const [choices, setChoices] = useState([...element.content.choices]);
function handleContent(event: React.ChangeEvent<HTMLInputElement>) { function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
...@@ -42,7 +42,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => { ...@@ -42,7 +42,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => {
placeholder="선택지" placeholder="선택지"
value={choice.text} value={choice.text}
onChange={handleContent} onChange={handleContent}
disabled={save} disabled={!isEditing}
></input> ></input>
</div> </div>
))} ))}
...@@ -53,7 +53,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => { ...@@ -53,7 +53,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => {
name="rateValues" name="rateValues"
className="border border-red-500 rounded mx-2 px-2" className="border border-red-500 rounded mx-2 px-2"
onClick={deleteValue} onClick={deleteValue}
disabled={save} disabled={!isEditing}
> >
삭제 삭제
</button> </button>
...@@ -62,7 +62,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => { ...@@ -62,7 +62,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => {
name="rateValues" name="rateValues"
className="border border-blue-500 rounded mx-2 px-2" className="border border-blue-500 rounded mx-2 px-2"
onClick={addValue} onClick={addValue}
disabled={save} disabled={!isEditing}
> >
추가 추가
</button> </button>
......
...@@ -4,10 +4,10 @@ import { RatingType } from "../types"; ...@@ -4,10 +4,10 @@ import { RatingType } from "../types";
type Props = { type Props = {
element: RatingType; element: RatingType;
handleQuestion: (id: string) => void; handleQuestion: (id: string) => void;
save: boolean; isEditing: boolean;
}; };
export const RatingForm = ({ element, handleQuestion, save }: Props) => { export const RatingForm = ({ element, handleQuestion, isEditing }: Props) => {
const [choices, setChoices] = useState([...element.content.choices]); const [choices, setChoices] = useState([...element.content.choices]);
function handleContent(event: React.ChangeEvent<HTMLInputElement>) { function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
...@@ -46,7 +46,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => { ...@@ -46,7 +46,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
placeholder="비동의" placeholder="비동의"
value={element.content.minRateDescription} value={element.content.minRateDescription}
onChange={handleContent} onChange={handleContent}
disabled={save} disabled={!isEditing}
></input> ></input>
{choices.map((choice: any, index: number) => ( {choices.map((choice: any, index: number) => (
<input <input
...@@ -59,7 +59,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => { ...@@ -59,7 +59,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
placeholder="0" placeholder="0"
value={choice.text} value={choice.text}
onChange={handleContent} onChange={handleContent}
disabled={save} disabled={!isEditing}
></input> ></input>
))} ))}
<input <input
...@@ -69,7 +69,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => { ...@@ -69,7 +69,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
placeholder="동의" placeholder="동의"
value={element.content.maxRateDescription} value={element.content.maxRateDescription}
onChange={handleContent} onChange={handleContent}
disabled={save} disabled={!isEditing}
></input> ></input>
</div> </div>
<div> <div>
...@@ -78,7 +78,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => { ...@@ -78,7 +78,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
name="rateValues" name="rateValues"
className="border border-red-500 rounded mx-2 px-2" className="border border-red-500 rounded mx-2 px-2"
onClick={deleteValue} onClick={deleteValue}
disabled={save} disabled={!isEditing}
> >
삭제 삭제
</button> </button>
...@@ -87,7 +87,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => { ...@@ -87,7 +87,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
name="rateValues" name="rateValues"
className="border border-blue-500 rounded mx-2 px-2" className="border border-blue-500 rounded mx-2 px-2"
onClick={addValue} onClick={addValue}
disabled={save} disabled={!isEditing}
> >
추가 추가
</button> </button>
......
...@@ -8,15 +8,9 @@ import { catchErrors } from "../helpers"; ...@@ -8,15 +8,9 @@ import { catchErrors } from "../helpers";
export const CreateSurvey = () => { export const CreateSurvey = () => {
let { surveyId } = useParams<{ surveyId: string }>(); let { surveyId } = useParams<{ surveyId: string }>();
interface CustomizedState { const [isEditing, setIsEditing] =
save: boolean; useState<{ qid: string; isEditing: boolean }[]>();
}
const location = useLocation();
const state = location.state as CustomizedState;
useEffect(() => {
getSurvey();
}, [surveyId]);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
...@@ -28,10 +22,22 @@ export const CreateSurvey = () => { ...@@ -28,10 +22,22 @@ export const CreateSurvey = () => {
comment: "", comment: "",
questions: [], questions: [],
}); });
useEffect(() => {
getSurvey();
}, [surveyId]);
async function getSurvey() { async function getSurvey() {
try { try {
if (surveyId) { if (surveyId) {
const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId); const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
const initEditing = thisSurvey.questions.map((question) => {
return { qid: question._id, isEditing: false };
});
console.log("init editing", initEditing);
setIsEditing(initEditing);
setSurvey(thisSurvey); setSurvey(thisSurvey);
setSuccess(true); setSuccess(true);
setError(""); setError("");
...@@ -45,13 +51,21 @@ export const CreateSurvey = () => { ...@@ -45,13 +51,21 @@ export const CreateSurvey = () => {
} }
} }
const handleEditing = (qid: string, edited: boolean) => {
console.log("handle editing:", qid, edited);
if (isEditing) {
const index = isEditing.findIndex((q) => q.qid === qid);
isEditing[index].isEditing = edited;
setIsEditing([...isEditing]);
}
};
const handleQuestion = (element: BasicQuestionType) => { const handleQuestion = (element: BasicQuestionType) => {
const index = survey.questions.findIndex( const index = survey.questions.findIndex(
(question) => question._id === element._id (question) => question._id === element._id
); );
survey.questions[index] = element; survey.questions[index] = element;
const newList = [...survey.questions]; const newList = [...survey.questions];
// const newList: BasicQuestionType[] = [...survey.questions];
console.log("new list in handle question", newList); console.log("new list in handle question", newList);
setSurvey({ ...survey, questions: newList }); setSurvey({ ...survey, questions: newList });
}; };
...@@ -84,6 +98,12 @@ export const CreateSurvey = () => { ...@@ -84,6 +98,12 @@ export const CreateSurvey = () => {
surveyId surveyId
); );
console.log(questions); console.log(questions);
const addedEditing = questions.map((question) => {
return { qid: question._id, isEditing: false };
});
console.log("added editing", addedEditing);
setIsEditing([...addedEditing]);
setSurvey({ ...survey, questions: questions }); setSurvey({ ...survey, questions: questions });
setSuccess(true); setSuccess(true);
setError(""); setError("");
...@@ -115,7 +135,7 @@ export const CreateSurvey = () => { ...@@ -115,7 +135,7 @@ export const CreateSurvey = () => {
const questions = survey.questions; const questions = survey.questions;
console.log(questions); console.log(questions);
console.log(state);
return ( return (
<> <>
{error ? alert(error) : <></>} {error ? alert(error) : <></>}
...@@ -147,7 +167,11 @@ export const CreateSurvey = () => { ...@@ -147,7 +167,11 @@ export const CreateSurvey = () => {
<Question <Question
key={question._id} key={question._id}
element={question} element={question}
// isSave={state ? true : false} isEditing={
isEditing?.filter((q) => q.qid === question._id)[0]
?.isEditing ?? true
}
handleEditing={handleEditing}
handleQuestion={handleQuestion} handleQuestion={handleQuestion}
deleteQuestion={deleteQuestion} deleteQuestion={deleteQuestion}
/> />
......
...@@ -11,12 +11,8 @@ export const EditSurvey = () => { ...@@ -11,12 +11,8 @@ export const EditSurvey = () => {
interface CustomizedState { interface CustomizedState {
save: boolean; save: boolean;
} }
const location = useLocation(); const [isEditing, setIsEditing] =
const state = location.state as CustomizedState; useState<{ qid: string; isEditing: boolean }[]>();
useEffect(() => {
getSurvey();
}, [surveyId]);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
...@@ -29,10 +25,21 @@ export const EditSurvey = () => { ...@@ -29,10 +25,21 @@ export const EditSurvey = () => {
questions: [], questions: [],
}); });
useEffect(() => {
getSurvey();
}, [surveyId]);
async function getSurvey() { async function getSurvey() {
try { try {
if (surveyId) { if (surveyId) {
const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId); const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
const initEditing = thisSurvey.questions.map((question) => {
return { qid: question._id, isEditing: false };
});
console.log("init editing", initEditing);
setIsEditing(initEditing);
setSurvey(thisSurvey); setSurvey(thisSurvey);
setSuccess(true); setSuccess(true);
setError(""); setError("");
...@@ -46,13 +53,21 @@ export const EditSurvey = () => { ...@@ -46,13 +53,21 @@ export const EditSurvey = () => {
} }
} }
const handleEditing = (qid: string, edited: boolean) => {
console.log("handle editing:", qid, edited);
if (isEditing) {
const index = isEditing.findIndex((q) => q.qid === qid);
isEditing[index].isEditing = edited;
setIsEditing([...isEditing]);
}
};
const handleQuestion = (element: BasicQuestionType) => { const handleQuestion = (element: BasicQuestionType) => {
const index = survey.questions.findIndex( const index = survey.questions.findIndex(
(question) => question._id === element._id (question) => question._id === element._id
); );
survey.questions[index] = element; survey.questions[index] = element;
const newList = [...survey.questions]; const newList = [...survey.questions];
// const newList: BasicQuestionType[] = [...survey.questions];
console.log("new list in handle question", newList); console.log("new list in handle question", newList);
setSurvey({ ...survey, questions: newList }); setSurvey({ ...survey, questions: newList });
}; };
...@@ -85,6 +100,13 @@ export const EditSurvey = () => { ...@@ -85,6 +100,13 @@ export const EditSurvey = () => {
surveyId surveyId
); );
console.log(questions); console.log(questions);
const addedEditing = questions.map((question) => {
return { qid: question._id, isEditing: false };
});
console.log("added editing", addedEditing);
setIsEditing([...addedEditing]);
setSurvey({ ...survey, questions: questions }); setSurvey({ ...survey, questions: questions });
setSuccess(true); setSuccess(true);
setError(""); setError("");
...@@ -116,6 +138,8 @@ export const EditSurvey = () => { ...@@ -116,6 +138,8 @@ export const EditSurvey = () => {
const questions = survey.questions; const questions = survey.questions;
console.log(questions); console.log(questions);
console.log("isediting", isEditing);
return ( return (
<> <>
{error ? alert(error) : <></>} {error ? alert(error) : <></>}
...@@ -147,6 +171,11 @@ export const EditSurvey = () => { ...@@ -147,6 +171,11 @@ export const EditSurvey = () => {
<Question <Question
key={question._id} key={question._id}
element={question} element={question}
isEditing={
isEditing?.filter((q) => q.qid === question._id)[0]
?.isEditing ?? false
}
handleEditing={handleEditing}
handleQuestion={handleQuestion} handleQuestion={handleQuestion}
deleteQuestion={deleteQuestion} deleteQuestion={deleteQuestion}
/> />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment