Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
survey
Commits
dce3cbcd
Commit
dce3cbcd
authored
Jul 27, 2022
by
Yoon, Daeki
😅
Browse files
editing 상태 변경
parent
a2418d6c
Changes
9
Show whitespace changes
Inline
Side-by-side
frontend/src/questions/CheckboxForm.tsx
View file @
dce3cbcd
...
@@ -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
>
...
...
frontend/src/questions/DropdownForm.tsx
View file @
dce3cbcd
...
@@ -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
>
...
...
frontend/src/questions/EssayForm.tsx
View file @
dce3cbcd
...
@@ -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
>
...
...
frontend/src/questions/FileForm.tsx
View file @
dce3cbcd
...
@@ -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
>
...
...
frontend/src/questions/Question.tsx
View file @
dce3cbcd
...
@@ -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
:
is
Saved
?
"
#0A8A8A
"
:
"
red
"
}
}
style
=
{
{
borderColor
:
is
Editing
?
"
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
=
{
is
Saved
}
disabled
=
{
!
is
Editing
}
></
input
>
></
input
>
<
select
<
select
id
=
{
question
.
_id
}
id
=
{
question
.
_id
}
name
=
"type"
name
=
"type"
onChange
=
{
handleSelect
}
onChange
=
{
handleSelect
}
disabled
=
{
is
Saved
}
disabled
=
{
!
is
Editing
}
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
=
{
is
Saved
}
disabled
=
{
!
is
Editing
}
></
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
=
{
is
Saved
}
disabled
=
{
!
is
Editing
}
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
>
...
...
frontend/src/questions/RadioForm.tsx
View file @
dce3cbcd
...
@@ -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
>
...
...
frontend/src/questions/RatingForm.tsx
View file @
dce3cbcd
...
@@ -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
>
...
...
frontend/src/survey/CreateSurvey.tsx
View file @
dce3cbcd
...
@@ -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
}
/>
/>
...
...
frontend/src/survey/EditSurvey.tsx
View file @
dce3cbcd
...
@@ -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
}
/>
/>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment