p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'feat/ui-1.0.4' into 'test' 

fix(Question): Optimise the display of check information for Question related form fields

See merge request opensource/answer!432
This commit is contained in:
Li Shuailing 2023-02-03 03:39:10 +00:00
parent 768037a527 e4e48ffab0
commit c7c293cdac
8 changed files with 101 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/common/interface.ts
View File

@ -56,7 +56,7 @@ export interface QuestionParams {
title: string;
url_title?: string;
content: string;
html: string;
html?: string;
tags: Tag[];
}
@ -207,7 +207,7 @@ export interface AnswerItem {
export interface PostAnswerReq {
content: string;
html: string;
html?: string;
question_id: string;
}

31
ui/src/components/Comment/components/Form/index.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, memo } from 'react';
import { Button } from 'react-bootstrap';
import { Button, Form } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
@ -7,7 +7,7 @@ import classNames from 'classnames';
import { TextArea, Mentions } from '@/components';
import { usePageUsers } from '@/hooks';
const Form = ({
const Index = ({
className = '',
value: initialValue = '',
onSendReply,
@ -18,7 +18,7 @@ const Form = ({
const [value, setValue] = useState('');
const pageUsers = usePageUsers();
const { t } = useTranslation('translation', { keyPrefix: 'comment' });
const [validationErrorMsg, setValidationErrorMsg] = useState('');
useEffect(() => {
if (!initialValue) {
return;
@ -32,6 +32,13 @@ const Form = ({
const handleSelected = (val) => {
setValue(val);
};
const handleSendReply = () => {
onSendReply(value).catch((ex) => {
if (ex.isError) {
setValidationErrorMsg(ex.msg);
}
});
};
return (
<div
className={classNames(
@ -39,17 +46,27 @@ const Form = ({
className,
)}>
<div>
<Mentions pageUsers={pageUsers.getUsers()} onSelected={handleSelected}>
<div
className={classNames('custom-form-control', {
'is-invalid': validationErrorMsg,
})}>
<Mentions
pageUsers={pageUsers.getUsers()}
onSelected={handleSelected}>
<TextArea size="sm" value={value} onChange={handleChange} />
</Mentions>
<div className="form-text">{t(`tip_${mode}`)}</div>
</div>
<Form.Control.Feedback type="invalid">
{validationErrorMsg}
</Form.Control.Feedback>
</div>
{type === 'edit' ? (
<div className="d-flex flex-row flex-md-column ms-0 ms-md-2 mt-2 mt-md-0">
<Button
size="sm"
className="text-nowrap "
onClick={() => onSendReply(value)}>
onClick={() => handleSendReply()}>
{t('btn_save_edits')}
</Button>
<Button
@ -64,7 +81,7 @@ const Form = ({
<Button
size="sm"
className="text-nowrap ms-0 ms-md-2 mt-2 mt-md-0"
onClick={() => onSendReply(value)}>
onClick={() => handleSendReply()}>
{t('btn_add_comment')}
</Button>
)}
@ -72,4 +89,4 @@ const Form = ({
);
};
export default memo(Form);
export default memo(Index);

27
ui/src/components/Comment/components/Reply/index.tsx
View File

@ -1,21 +1,30 @@
import { useState, memo } from 'react';
import { Button } from 'react-bootstrap';
import { Button, Form } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import { TextArea, Mentions } from '@/components';
import { usePageUsers } from '@/hooks';
const Form = ({ userName, onSendReply, onCancel, mode }) => {
const Index = ({ userName, onSendReply, onCancel, mode }) => {
const [value, setValue] = useState('');
const pageUsers = usePageUsers();
const { t } = useTranslation('translation', { keyPrefix: 'comment' });
const [validationErrorMsg, setValidationErrorMsg] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
const handleSelected = (val) => {
setValue(val);
};
const handleSendReply = () => {
onSendReply(value).catch((ex) => {
if (ex.isError) {
setValidationErrorMsg(ex.msg);
}
});
};
return (
<div className="mb-2">
@ -24,6 +33,10 @@ const Form = ({ userName, onSendReply, onCancel, mode }) => {
</div>
<div className="d-flex mb-1 align-items-start flex-column flex-md-row">
<div>
<div
className={classNames('custom-form-control', {
'is-invalid': validationErrorMsg,
})}>
<Mentions
pageUsers={pageUsers.getUsers()}
onSelected={handleSelected}>
@ -31,11 +44,15 @@ const Form = ({ userName, onSendReply, onCancel, mode }) => {
</Mentions>
<div className="form-text">{t(`tip_${mode}`)}</div>
</div>
<Form.Control.Feedback type="invalid">
{validationErrorMsg}
</Form.Control.Feedback>
</div>
<div className="d-flex flex-row flex-md-column ms-0 ms-md-2 mt-2 mt-md-0">
<Button
size="sm"
className="text-nowrap"
onClick={() => onSendReply(value)}>
onClick={() => handleSendReply()}>
{t('btn_add_comment')}
</Button>
<Button
@ -51,4 +68,4 @@ const Form = ({ userName, onSendReply, onCancel, mode }) => {
);
};
export default memo(Form);
export default memo(Index);

13
ui/src/components/Comment/index.tsx
View File

@ -109,9 +109,9 @@ const Comment = ({ objectId, mode, commentId }) => {
const userNames = unionBy(users.map((user) => user.userName));
const commentMarkDown = parseUserInfo(item.value);
const html = marked.parse(commentMarkDown);
if (!commentMarkDown || !html) {
return;
}
// if (!commentMarkDown || !html) {
// return;
// }
const params = {
object_id: objectId,
original_text: commentMarkDown,
@ -125,7 +125,7 @@ const Comment = ({ objectId, mode, commentId }) => {
};
if (item.type === 'edit') {
updateComment({
return updateComment({
...params,
comment_id: item.comment_id,
}).then(() => {
@ -140,8 +140,8 @@ const Comment = ({ objectId, mode, commentId }) => {
}),
);
});
} else {
addComment(params).then((res) => {
}
return addComment(params).then((res) => {
if (item.type === 'reply') {
const index = comments.findIndex(
(comment) => comment.comment_id === item.comment_id,
@ -163,7 +163,6 @@ const Comment = ({ objectId, mode, commentId }) => {
setVisibleComment(false);
});
}
};
const handleDelete = (id) => {

46
ui/src/pages/Questions/Ask/index.tsx
View File

@ -143,21 +143,7 @@ const Ask = () => {
const checkValidated = (): boolean => {
const bol = true;
const { title, content, tags, answer } = formData;
if (!title.value) {
// bol = false;
// formData.title = {
// value: '',
// isInvalid: true,
// errorMsg: t('form.fields.title.msg.empty'),
// };
} else if (Array.from(title.value).length > 150) {
// bol = false;
// formData.title = {
// value: title.value,
// isInvalid: true,
// errorMsg: t('form.fields.title.msg.range'),
// };
} else {
if (title.value && Array.from(title.value).length <= 150) {
formData.title = {
value: title.value,
isInvalid: false,
@ -165,14 +151,7 @@ const Ask = () => {
};
}
if (!content.value) {
// bol = false;
// formData.content = {
// value: '',
// isInvalid: true,
// errorMsg: t('form.fields.body.msg.empty'),
// };
} else {
if (content.value) {
formData.content = {
value: content.value,
isInvalid: false,
@ -180,29 +159,16 @@ const Ask = () => {
};
}
if (tags.value.length === 0) {
// bol = false;
// formData.tags = {
// value: [],
// isInvalid: true,
// errorMsg: t('form.fields.tags.msg.empty'),
// };
} else {
if (Array.isArray(tags.value) && tags.value.length > 0) {
formData.tags = {
value: tags.value,
isInvalid: false,
errorMsg: '',
};
}
if (checked) {
if (!answer.value) {
// bol = false;
// formData.answer = {
// value: '',
// isInvalid: true,
// errorMsg: t('form.fields.answer.msg.empty'),
// };
} else {
if (answer.value) {
formData.answer = {
value: answer.value,
isInvalid: false,
@ -227,7 +193,6 @@ const Ask = () => {
const params: Type.QuestionParams = {
title: formData.title.value,
content: formData.content.value,
html: editorRef.current.getHtml(),
tags: formData.tags.value,
};
if (isEdit) {
@ -261,7 +226,6 @@ const Ask = () => {
postAnswer({
question_id: id,
content: formData.answer.value,
html: editorRef2.current.getHtml(),
})
.then(() => {
navigate(pathFactory.questionLanding(id, params.url_title));

2
ui/src/pages/Questions/EditAnswer/index.tsx
View File

@ -140,8 +140,6 @@ const Index = () => {
usePageTags({
title: t('edit_answer', { keyPrefix: 'page_title' }),
});
console.log('formData.content.value', formData.content.value);
return (
<Container className="pt-4 mt-2 mb-5 edit-answer-wrap">
<Row className="justify-content-center">

7
ui/src/utils/common.ts
View File

@ -171,8 +171,11 @@ function handleFormError(
) {
if (error.list?.length > 0) {
error.list.forEach((item) => {
data[item.error_field].isInvalid = true;
data[item.error_field].errorMsg = item.error_msg;
const errorFieldObject = data[item.error_field];
if (errorFieldObject) {
errorFieldObject.isInvalid = true;
errorFieldObject.errorMsg = item.error_msg;
}
});
}
return data;

10
ui/src/utils/request.ts
View File

@ -48,7 +48,7 @@ class Request {
},
(error) => {
const { status, data: respData } = error.response || {};
const { data = {}, msg = '' } = respData || {};
const { data = {}, msg = '', reason = '' } = respData || {};
if (status === 400) {
// show error message
if (data instanceof Object && data.err_type) {
@ -79,7 +79,13 @@ class Request {
if (data instanceof Array && data.length > 0) {
// handle form error
return Promise.reject({ isError: true, list: data });
return Promise.reject({
code: status,
msg,
reason,
isError: true,
list: data,
});
}
if (!data || Object.keys(data).length <= 0) {