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

editing 상태 변경

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