junru0303
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: issue and jouranl support emoji #1

Closed
junru0303 wants to merge 2 commits from feature_social_enhance into master
pull from: feature_social_enhance
merge into: junru0303:master
Conversation 0 Commits 2 Files Changed 3 +198 -22
3 changed files with 198 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/forge/Order/Detail.js
View File

@ -3,10 +3,11 @@ import { Link } from "react-router-dom";
import axios from "axios"; import axios from "axios";
import { getImageUrl } from "educoder"; import { getImageUrl } from "educoder";
import { Form, Popconfirm, Tag, Spin } from "antd"; import { Form, Popconfirm, Tag, Spin, Popover, Icon, Button } from "antd";
import Attachments from "../Upload/attachment"; import Attachments from "../Upload/attachment";
import RenderHtml from "../../components/render-html"; import RenderHtml from "../../components/render-html";
import Comments from "../comments/comments"; import Comments from "../comments/comments";
import update from 'immutability-helper'
import "./order.css"; import "./order.css";
class Detail extends Component { class Detail extends Component {
@ -50,6 +51,8 @@ class Detail extends Component {
.get(url) .get(url)
.then((result) => { .then((result) => {
if (result) { if (result) {
// todo 增加后台返回
result.data.emojiComment = {}
this.setState({ this.setState({
data: result.data, data: result.data,
isSpins: false isSpins: false
@ -190,7 +193,54 @@ class Detail extends Component {
render() { render() {
const { projectsId, orderId, owner } = this.props.match.params; const { projectsId, orderId, owner } = this.props.match.params;
const { current_user } = this.props
const { data, isSpins } = this.state; const { data, isSpins } = this.state;
const emojiList = ["😀", "😅"];
const update_emoji_comment = (emoji) => {
// 无emoji评论
if (!data.emojiComment || !data.emojiComment[emoji] || data.emojiComment[emoji].users.length == 0) {
var emojiComment = data.emojiComment ? data.emojiComment : {}
emojiComment[emoji] = {
"users": [owner],
"total": 1
}
this.setState({
data: update(data, { emojiComment: { $set: emojiComment } })
})
return
}
// 有emoji评论
var userList = data.emojiComment[emoji].users
var addNewUser = true
for (var i = 0; i < userList.length; i++) {
if (userList[i] == owner) {
userList.splice(i, 1);
addNewUser = false
break
}
}
if (addNewUser) {
userList.push(owner)
}
var emojiComment = data.emojiComment
emojiComment[emoji] = {
"users": userList,
"total": userList.length
}
this.setState({
data: update(data, { emojiComment: { $set: emojiComment } })
})
}
const emojiComment = (
emojiList.map((emoji) => {
return <Button type="link" className="detail_emoji_comment_menu_item"
onClick={(e) => update_emoji_comment(emoji)} key={emoji}>{emoji}</Button>
})
);
const get_color = (type) => { const get_color = (type) => {
if (type === "高") { if (type === "高") {
return "#e67e22"; return "#e67e22";
@ -233,7 +283,7 @@ class Detail extends Component {
: "合并请求"} : "合并请求"}
】 】
</span> </span>
<span className="font-16 fwb" style={{wordBreak:"break-all"}}>{data && data.subject}</span> <span className="font-16 fwb" style={{ wordBreak: "break-all" }}>{data && data.subject}</span>
</span> </span>
{data && data.priority && ( {data && data.priority && (
@ -279,8 +329,8 @@ class Detail extends Component {
</Link> </Link>
</span> </span>
) : ( ) : (
"" ""
)} )}
</div> </div>
</div> </div>
</div> </div>
@ -289,8 +339,8 @@ class Detail extends Component {
{data && data.description && data.description.length > 0 ? ( {data && data.description && data.description.length > 0 ? (
this.commentCtx(data.description) this.commentCtx(data.description)
) : ( ) : (
<span className="color-grey-9 ml3 mr3">暂无描述</span> <span className="color-grey-9 ml3 mr3">暂无描述</span>
)} )}
</div> </div>
{data && data.attachments && data.attachments.length > 0 ? ( {data && data.attachments && data.attachments.length > 0 ? (
<Attachments <Attachments
@ -298,8 +348,37 @@ class Detail extends Component {
showNotification={this.props.showNotification} showNotification={this.props.showNotification}
/> />
) : ( ) : (
"" ""
)} )}
<div className="detail_emoji_comment" >
<style>
{`
.ant-popover-inner-content {
padding: 2px 5px;
}
`}
</style>
{current_user && current_user.login ? (
<Popover content={emojiComment} trigger="click">
<Button shape="circle"><Icon type="smile" theme="outlined" /></Button>
</Popover>
) : ("")
}
{current_user && current_user.login && data && data.emojiComment ? (
Object.keys(data.emojiComment).map(key => {
const item = data.emojiComment[key]
if (item.users.length == 0) {
return
}
return <Popover className="detail_emoji_pop" content={item.users.join(",")} key={key}>
<Button className="detail_emoji_button" shape="round" onClick={(e) => update_emoji_comment(key)}>
{key}+{item.total}
</Button>
</Popover>
})
) : ("")
}
</div>
</div> </div>
</div> </div>
@ -329,8 +408,8 @@ class Detail extends Component {
{data.issue_tags[0].name} {data.issue_tags[0].name}
</span> </span>
) : ( ) : (
"--" "--"
)} )}
</span> </span>
</p> </p>
<p className="grid-item-left pb15"> <p className="grid-item-left pb15">

18
src/forge/Order/order.css
View File

@ -44,6 +44,24 @@
display: flex; display: flex;
} }
.detail_emoji_comment {
margin-top: 20px;
}
.detail_emoji_comment_menu {
padding: 5px;
}
.detail_emoji_comment_menu_item {
padding-left: 0px;
padding-right: 0px;
}
.detail_emoji_pop {
margin-left: 10px;
}
.detail_emoji_button {
padding-left: 5px;
padding-right: 5px;
}
.detail_right { .detail_right {
flex-grow: 1; flex-grow: 1;
text-align: right; text-align: right;

103
src/forge/comments/comments.js
View File

@ -5,14 +5,15 @@ import axios from "axios";
import Upload from "../Upload/Index"; import Upload from "../Upload/Index";
import UploadImg from "../Images/upload.png"; import UploadImg from "../Images/upload.png";
import { getImageUrl } from "educoder"; import { getImageUrl } from "educoder";
import { List, Popconfirm, Pagination, Button, Tabs, Avatar } from "antd"; import { List, Popconfirm, Pagination, Button, Tabs, Popover, Icon } from "antd";
import Attachments from "../Upload/attachment"; import Attachments from "../Upload/attachment";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor"; import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import RenderHtml from "../../components/render-html"; import RenderHtml from "../../components/render-html";
import ChildrenComments from "./children_comments"; import ChildrenComments from "./children_comments";
import update from 'immutability-helper'
import "../Order/order.css"; import "../Order/order.css";
const { TabPane } = Tabs; const { TabPane } = Tabs;
class comments extends Component { class comments extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -94,7 +95,7 @@ class comments extends Component {
this.setState({ this.setState({
journal_spin: false journal_spin: false
}); });
if(result && result.data.status !== 411){ if (result && result.data.status !== 411) {
this.props.showNotification(result.data.message); this.props.showNotification(result.data.message);
} }
}) })
@ -202,7 +203,7 @@ class comments extends Component {
</span> </span>
<span> <span>
{item.value && item.value.length > 0 ? ( {item.value && item.value.length > 0 ? (
item.detail === "标记"? ( item.detail === "标记" ? (
<span <span
className="issue-tag-show" className="issue-tag-show"
style={{ background: item.value[0].color }} style={{ background: item.value[0].color }}
@ -272,12 +273,12 @@ class comments extends Component {
} }
commentCtx = (v) => { commentCtx = (v) => {
return <RenderHtml className="break_word_comments imageLayerParent" value={v} url={this.props.history.location}/>; return <RenderHtml className="break_word_comments imageLayerParent" value={v} url={this.props.history.location} />;
}; };
Paginations = ()=>{ Paginations = () => {
const { page, limit, search_count } = this.state; const { page, limit, search_count } = this.state;
if(search_count > limit){ if (search_count > limit) {
return( return (
<div className="pt30 mb50 edu-txt-center btp1"> <div className="pt30 mb50 edu-txt-center btp1">
<Pagination <Pagination
simple simple
@ -308,6 +309,62 @@ class comments extends Component {
new_journal_id, new_journal_id,
} = this.state; } = this.state;
const { current_user, only_show_content } = this.props; const { current_user, only_show_content } = this.props;
const emojiList = ["😀", "😅"];
const update_emoji_comment = (item, emoji) => {
// 无emoji评论
if (!item.emojiComment || !item.emojiComment[emoji] || item.emojiComment[emoji].users.length == 0) {
const idx = journalsdata.issue_journals.findIndex(function (journal) {
return journal.id == item.id;
})
var emojiComment = item.emojiComment ? item.emojiComment : {}
emojiComment[emoji] = {
"users": [current_user.login],
"total": 1
}
var journal = journalsdata.issue_journals[idx]
journal.emojiComment = emojiComment
this.setState({
journalsdata: update(journalsdata, { issue_journals: { [idx]: { $set: journal } } })
})
return
}
// 有emoji评论
var userList = item.emojiComment[emoji].users
var addNewUser = true
for (var i = 0; i < userList.length; i++) {
if (userList[i] == current_user.login) {
userList.splice(i, 1);
addNewUser = false
break
}
}
if (addNewUser) {
userList.push(current_user.login)
}
const idx = journalsdata.issue_journals.findIndex(function (journal) {
return journal.id == item.id;
})
var emojiComment = item.emojiComment
emojiComment[emoji] = {
"users": userList,
"total": userList.length
}
var journal = journalsdata.issue_journals[idx]
journal.emojiComment = emojiComment
this.setState({
journalsdata: update(journalsdata, { issue_journals: { [idx]: { $set: journal } } })
})
};
const emojiComment = (item) => {
return emojiList.map((emoji) => {
return <Button type="link" className="detail_emoji_comment_menu_item"
onClick={(e) => update_emoji_comment(item, emoji)} key={emoji}>{emoji}</Button>
})
};
const new_comment = (is_reply, item_id) => { const new_comment = (is_reply, item_id) => {
return ( return (
@ -315,7 +372,7 @@ class comments extends Component {
<Link <Link
to={`/${current_user && current_user.login}`} to={`/${current_user && current_user.login}`}
className="show-user-link mr10" className="show-user-link mr10"
> >1
<img <img
className="radius" className="radius"
src={getImageUrl( src={getImageUrl(
@ -416,11 +473,33 @@ class comments extends Component {
"" ""
)} )}
<div className="grid-item mt5"> <div className="grid-item mt5">
<span className="color-grey-8">{item.created_at}</span> <div>
<span className="color-grey-8">{item.created_at}</span>
{current_user && current_user.login ? (
<Popover content={emojiComment(item)} trigger="click" className="ml10">
<Button shape="circle"><Icon type="smile" theme="outlined" /></Button>
</Popover>
) : ("")
}
{current_user && current_user.login && item.emojiComment ? (
Object.keys(item.emojiComment).map(key => {
const comments = item.emojiComment[key]
if (comments.users.length == 0) {
return
}
return <Popover className="detail_emoji_pop" content={comments.users.join(",")} key={key}>
<Button className="detail_emoji_button" shape="round" onClick={(e) => update_emoji_comment(item, key)}>
{key}+{comments.total}
</Button>
</Popover>
})
) : ("")
}
</div>
<span className="text-right"> <span className="text-right">
{current_user && {current_user &&
(current_user.admin || (current_user.admin ||
current_user.login === item.user_login) ? ( current_user.login === item.user_login) ? (
<Popconfirm <Popconfirm
placement="bottom" placement="bottom"
title={"确定要删除当前评论吗?"} title={"确定要删除当前评论吗?"}