Skip to content

GitLab

Commit 80ab8493 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

객관식 choice추가 삭제

parent e19694ac
Hide whitespace changes
Inline Side-by-side
frontend/src/questions/CheckboxForm.tsx
View file @ 80ab8493
......@@ -4,9 +4,10 @@ import { CheckboxType } from "../types";
type Props = {
element: CheckboxType;
handleQuestion: (id: string) => void;
currentId: string;
};
export const CheckboxForm = ({ element, handleQuestion }: Props) => {
export const CheckboxForm = ({ element, handleQuestion, currentId }: Props) => {
const [choices, setChoices] = useState([...element.content.choices]);
function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
......@@ -16,21 +17,55 @@ export const CheckboxForm = ({ element, handleQuestion }: Props) => {
handleQuestion(element._id);
console.log(choices);
}
function deleteValue() {
//제일 마지막 index 제거
choices.splice(-1, 1);
element.content.choices = choices;
handleQuestion(element._id);
}
function addValue() {
choices.push({ text: "", value: choices.length });
element.content.choices = choices;
handleQuestion(element._id);
}
return (
<div id="content" className="flex mt-4">
{choices.map((choice: any, index: number) => (
<div>
<input type="checkbox" disabled></input>
<input
id={`${index}`}
type="text"
className="mx-2 border-b-2"
placeholder={choice.text}
onChange={handleContent}
></input>
</div>
))}
</div>
<>
<div id="content" className="mt-4 p-5">
{choices.map((choice: any, index: number) => (
<div className="m-5">
<input type="checkbox" disabled></input>
<input
id={`${index}`}
type="text"
className="mx-2 border-b-2"
placeholder="선택지"
value={choice.text}
onChange={handleContent}
disabled={currentId !== element._id}
></input>
</div>
))}
</div>
<div>
<button
type="button"
name="rateValues"
className="border border-red-500 rounded mx-2 px-2"
onClick={deleteValue}
disabled={currentId !== element._id}
>
삭제
</button>
<button
type="button"
name="rateValues"
className="border border-blue-500 rounded mx-2 px-2"
onClick={addValue}
disabled={currentId !== element._id}
>
추가
</button>
</div>
</>
);
};
frontend/src/questions/DropdownForm.tsx
View file @ 80ab8493
......@@ -4,9 +4,10 @@ import { DropdownType } from "../types";
type Props = {
element: DropdownType;
handleQuestion: (id: string) => void;
currentId: string;
};
export const DropdownForm = ({ element, handleQuestion }: Props) => {
export const DropdownForm = ({ element, handleQuestion, currentId }: Props) => {
const [choices, setChoices] = useState([...element.content.choices]);
function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
......@@ -16,22 +17,59 @@ export const DropdownForm = ({ element, handleQuestion }: Props) => {
handleQuestion(element._id);
console.log(choices);
}
function deleteValue() {
//제일 마지막 index 제거
choices.splice(-1, 1);
element.content.choices = choices;
handleQuestion(element._id);
}
function addValue() {
choices.push({ text: "", value: choices.length });
element.content.choices = choices;
handleQuestion(element._id);
}
return (
<div id="content" className="flex mt-4">
<select className="mr-3">
<>
<div id="content" className="flex-row mt-4 p-5">
<select className="mr-3">
{choices.map((choice: any, index: number) => (
<option>{choice.text}</option>
))}
</select>
{choices.map((choice: any, index: number) => (
<option>{choice.text}</option>
<div className="my-5">
<input
id={`${index}`}
type="text"
className="mx-2 border-b-2"
placeholder="선택지"
value={choice.text}
onChange={handleContent}
disabled={currentId !== element._id}
></input>
</div>
))}
</select>
{choices.map((choice: any, index: number) => (
<input
id={`${index}`}
type="text"
className="mx-2 border-b-2"
placeholder={choice.text}
onChange={handleContent}
></input>
))}
</div>
</div>
<div>
<button
type="button"
name="rateValues"
className="border border-red-500 rounded mx-2 px-2"
onClick={deleteValue}
disabled={currentId !== element._id}
>
삭제
</button>
<button
type="button"
name="rateValues"
className="border border-blue-500 rounded mx-2 px-2"
onClick={addValue}
disabled={currentId !== element._id}
>
추가
</button>
</div>
</>
);
};
frontend/src/questions/EssayForm.tsx
View file @ 80ab8493
......@@ -3,9 +3,10 @@ import { EssayType } from "../types";
type Props = {
element: EssayType;
currentId: string;
};
export const EssayForm = ({ element }: Props) => {
export const EssayForm = ({ element, currentId }: Props) => {
return (
<div id="commentarea" className="flex mt-4 w-full justify-center">
<input className="border w-11/12 h-16" disabled></input>
......
frontend/src/questions/FileForm.tsx
View file @ 80ab8493
......@@ -3,9 +3,10 @@ import { FileType } from "../types";
type Props = {
element: FileType;
currentId: string;
};
export const FileForm = ({ element }: Props) => {
export const FileForm = ({ element, currentId }: Props) => {
return (
<div id="content" className="flex mt-4 w-full justify-center">
<input type="file" className=" w-11/12 h-16" disabled></input>
......
frontend/src/questions/Question.tsx
View file @ 80ab8493
......@@ -34,12 +34,10 @@ export const Question = ({
changeCurrentId,
currentId,
}: Props) => {
const handleEdit = () => {
//setCurrentId해주고 currentId===element._id가 같은 input들만 disabled=false
const handleEditClick = () => {
changeCurrentId(element._id);
};
async function handleComplete() {
//db에서 element._id인 애를 findOneAndUpdate() 해준다.
async function handleEditComplete() {
try {
const newQuestion: BasicQuestionType = await questionApi.updateQuestion(
element
......@@ -65,21 +63,21 @@ export const Question = ({
) {
element.content = {
choices: [
{ text: "선택지1", value: "1" },
{ text: "선택지2", value: "2" },
{ text: "선택지3", value: "3" },
{ text: "", value: 0 },
{ text: "", value: 1 },
{ text: "", value: 2 },
],
};
} else if (selectedType === "essay") {
element.content = { choices: [] };
} else if (selectedType === "rating") {
element.content = {
minRateDescription: "가장 낮음",
maxRateDescription: "가장 높음",
minRateDescription: "",
maxRateDescription: "",
choices: [
{ text: "1", value: "1" },
{ text: "2", value: "2" },
{ text: "3", value: "3" },
{ text: "", value: 0 },
{ text: "", value: 1 },
{ text: "", value: 2 },
],
};
}
......@@ -100,21 +98,41 @@ export const Question = ({
function getContent(element: BasicQuestionType) {
switch (element.type) {
case "essay":
return <EssayForm element={element} />;
return <EssayForm element={element} currentId={currentId} />;
case "radio":
return <RadioForm handleQuestion={handleQuestion} element={element} />;
return (
<RadioForm
handleQuestion={handleQuestion}
element={element}
currentId={currentId}
/>
);
case "checkbox":
return (
<CheckboxForm handleQuestion={handleQuestion} element={element} />
<CheckboxForm
handleQuestion={handleQuestion}
element={element}
currentId={currentId}
/>
);
case "dropdown":
return (
<DropdownForm handleQuestion={handleQuestion} element={element} />
<DropdownForm
handleQuestion={handleQuestion}
element={element}
currentId={currentId}
/>
);
case "file":
return <FileForm element={element} />;
return <FileForm element={element} currentId={currentId} />;
case "rating":
return <RatingForm handleQuestion={handleQuestion} element={element} />;
return (
<RatingForm
handleQuestion={handleQuestion}
element={element}
currentId={currentId}
/>
);
default:
return <></>;
}
......@@ -131,6 +149,7 @@ export const Question = ({
placeholder={"Question Title"}
value={element.title}
onChange={handleQuestionInfo}
disabled={currentId !== element._id}
></input>
<select
id={element._id}
......@@ -158,6 +177,7 @@ export const Question = ({
placeholder="질문에 대한 설명을 입력해주세요"
value={element.comment}
onChange={handleQuestionInfo}
disabled={currentId !== element._id}
></input>
</div>
{getContent(element)}
......@@ -173,11 +193,11 @@ export const Question = ({
삭제
</button>
{currentId === element._id ? (
<button type="button" className="px-1" onClick={handleComplete}>
<button type="button" className="px-1" onClick={handleEditComplete}>
수정완료
</button>
) : (
<button type="button" className="px-1" onClick={handleEdit}>
<button type="button" className="px-1" onClick={handleEditClick}>
수정하기
</button>
)}
......
frontend/src/questions/RadioForm.tsx
View file @ 80ab8493
......@@ -4,9 +4,10 @@ import { RadioType } from "../types";
type Props = {
element: RadioType;
handleQuestion: (id: string) => void;
currentId: string;
};
export const RadioForm = ({ element, handleQuestion }: Props) => {
export const RadioForm = ({ element, handleQuestion, currentId }: Props) => {
const [choices, setChoices] = useState([...element.content.choices]);
function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
......@@ -16,20 +17,56 @@ export const RadioForm = ({ element, handleQuestion }: Props) => {
handleQuestion(element._id);
console.log(choices);
}
function deleteValue() {
//제일 마지막 index 제거
choices.splice(-1, 1);
element.content.choices = choices;
handleQuestion(element._id);
}
function addValue() {
choices.push({ text: "", value: choices.length });
element.content.choices = choices;
handleQuestion(element._id);
}
return (
<div id="content" className="flex mt-4">
{choices.map((choice: any, index: number) => (
<div>
<input type="radio" disabled></input>
<input
id={`${index}`}
type="text"
className="mx-2 border-b-2"
placeholder={choice.text}
onChange={handleContent}
></input>
</div>
))}
</div>
<>
<div id="content" className="mt-4 p-5">
{choices.map((choice: any, index: number) => (
<div className="m-5">
<input type="radio" disabled></input>
<input
id={`${index}`}
type="text"
className="mx-2 border-b-2"
placeholder="선택지"
value={choice.text}
onChange={handleContent}
disabled={currentId !== element._id}
></input>
</div>
))}
</div>
<div>
<button
type="button"
name="rateValues"
className="border border-red-500 rounded mx-2 px-2"
onClick={deleteValue}
disabled={currentId !== element._id}
>
삭제
</button>
<button
type="button"
name="rateValues"
className="border border-blue-500 rounded mx-2 px-2"
onClick={addValue}
disabled={currentId !== element._id}
>
추가
</button>
</div>
</>
);
};
frontend/src/questions/RatingForm.tsx
View file @ 80ab8493
......@@ -4,9 +4,10 @@ import { RatingType } from "../types";
type Props = {
element: RatingType;
handleQuestion: (id: string) => void;
currentId: string;
};
export const RatingForm = ({ element, handleQuestion }: Props) => {
export const RatingForm = ({ element, handleQuestion, currentId }: Props) => {
const [choices, setChoices] = useState([...element.content.choices]);
function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
......@@ -30,7 +31,7 @@ export const RatingForm = ({ element, handleQuestion }: Props) => {
handleQuestion(element._id);
}
function addValue() {
choices.push({ text: "0", value: 0 });
choices.push({ text: "0", value: choices.length });
element.content.choices = choices;
handleQuestion(element._id);
}
......@@ -42,26 +43,32 @@ export const RatingForm = ({ element, handleQuestion }: Props) => {
name="minRateDescription"
className="border-b-2 text-center"
size={10}
placeholder={element.content.minRateDescription}
placeholder="비동의"
value={element.content.minRateDescription}
onChange={handleContent}
disabled={currentId !== element._id}
></input>
{choices.map((e: any, index: number) => (
{choices.map((choice: any, index: number) => (
<input
name="text"
id={`${index}`}
type="text"
className="border border-black rounded-full py-1 m-2 text-center"
size={1}
placeholder={e.text}
placeholder="0"
value={choice.text}
onChange={handleContent}
disabled={currentId !== element._id}
></input>
))}
<input
name="maxRateDescription"
className="border-b-2 text-center"
size={10}
placeholder={element.content.maxRateDescription}
placeholder="동의"
value={element.content.maxRateDescription}
onChange={handleContent}
disabled={currentId !== element._id}
></input>
</div>
<div>
......@@ -70,6 +77,7 @@ export const RatingForm = ({ element, handleQuestion }: Props) => {
name="rateValues"
className="border border-red-500 rounded mx-2 px-2"
onClick={deleteValue}
disabled={currentId !== element._id}
>
삭제
</button>
......@@ -78,6 +86,7 @@ export const RatingForm = ({ element, handleQuestion }: Props) => {
name="rateValues"
className="border border-blue-500 rounded mx-2 px-2"
onClick={addValue}
disabled={currentId !== element._id}
>
추가
</button>
......
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