Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

我的通知

This commit is contained in:
谢思 2021-09-14 16:02:22 +08:00
parent c5bb61cb9a
commit 7fbd76630c
3 changed files with 141 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/forge/Nodata.js
View File

@ -1,7 +1,7 @@
import React , { Component } from 'react'; import React , { Component } from 'react';
import nodata from './Images/nodata.png'; import nodata from './Images/nodata.png';
import './css/index.scss';
class Nodata extends Component{ class Nodata extends Component{
render(){ render(){
const { _html , small } = this.props; const { _html , small } = this.props;

263
src/forge/SecuritySetting/notice/myNotice/Index.jsx
View File

@ -1,142 +1,95 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Badge, Button, Checkbox, Menu } from 'antd'; import { Badge, Button, Checkbox, Menu, Pagination } from 'antd';
import './Index.scss'; import './Index.scss';
import '../manager/Index.scss' import '../manager/Index.scss'
import DelModal from '../../../Wiki/components/ModalFun'; import DelModal from '../../../Wiki/components/ModalFun';
import axios from 'axios'; import axios from 'axios';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import NoneData from '../../../Nodata.js';
function MyNotice(props) { function MyNotice(props) {
let current_user = props.current_user;
let pageSize = 20;
const [noticeType, setNoticeType] = useState("2");//消息类别tab栏选择 const [noticeType, setNoticeType] = useState("2");//消息类别tab栏选择
const [selectedNum, setSelectedNum] = useState(0);//@我批量删除选择消息条数 const [selectedNum, setSelectedNum] = useState(0);//@我批量删除选择消息条数
const [isBatchDelete, setIsBatchDelete] = useState(false);//@我是否批量删除 const [isBatchDelete, setIsBatchDelete] = useState(false);//@我是否批量删除
const [batchDeleteCheckedAll, setBatchDeleteCheckAll] = useState(false);//@我批量删除--全选 const [batchDeleteCheckedAll, setBatchDeleteCheckAll] = useState(false);//@我批量删除--全选
const [batchDeleteList, setBatchDeleteList] = useState([]);//@我批量删除--选中
const [atmeIds, setAtmeIds] = useState([]);
const [noticeUnreadCount, setNoticeUnreadCount] = useState();//未读系统通知数量 const [noticeUnreadCount, setNoticeUnreadCount] = useState();//未读系统通知数量
const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量 // const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量
const [atUnreadCount, setAtUnreadCount] = useState(2);//未读@我数量 const [atUnreadCount, setAtUnreadCount] = useState();//未读@我数量
const [messageList, setMessageList] = useState([ const [messageList, setMessageList] = useState([]);
{ const [messTotalCount, setMessTotalCount] = useState();//消息总数
"id": 1, const [currentPage, setCurrentPage] = useState(1);//当前页数
"status": 1,
"content": "Atme Message Content 1",
"notification_url": "http://www.baidu.com",
"source": "PullRequestAtme",
"time_ago": "1天前",
"type": "atme",
"sender": {
"id": 5,
"type": "User",
"name": "testforge2",
"login": "testforge2",
"image_url": "system/lets/letter_avatars/2/T/236_177_85/120.png"
}
},
{
"id": 2,
"status": 0,
"content": "Atme Message Content 2",
"notification_url": "http://www.baidu.com",
"source": "IssueAtme",
"time_ago": "1天前",
"type": "atme",
"sender": {
"id": 4,
"type": "User",
"name": "testforge1",
"login": "testforge1",
"image_url": "system/lets/letter_avatars/2/T/19_237_174/120.png"
}
},
{
"id": 3,
"status": 1,
"content": "Notification Message Content 1",
"notification_url": "http://www.baidu.com",
"source": "IssueDelete",
"time_ago": "1天前",
"type": "notification"
},
{
"id": 4,
"status": 0,
"content": "Notification Message Content 2",
"notification_url": "http://www.baidu.com",
"source": "IssueChanged",
"time_ago": "1天前",
"type": "notification"
},
{
"id": 5,
"status": 0,
"content": "Notification Message Content 3",
"notification_url": "http://www.baidu.com",
"source": "ProjectJoined",
"time_ago": "1天前",
"type": "notification"
}
]);
const [onlyUnread, setOnlyUnread] = useState(); const [onlyUnread, setOnlyUnread] = useState();
const noticeType = { const noticeSourceType = {
// 易修 // 易修
IssueAssigned:1, // 有新指派给我的易修 IssueAssigned:"icon-yixiuicon1", // 有新指派给我的易修
IssueAssignerExpire:1, // 我负责的易修截止日期到达最后一天 IssueAssignerExpire:"icon-yixiuicon1", // 我负责的易修截止日期到达最后一天
IssueAtme:1, // 在易修中@我 IssueAtme:"icon-yixiuicon1", // 在易修中@我
IssueChanged:1, // 我创建或负责的易修状态变更 IssueChanged:"icon-yixiuicon1", // 我创建或负责的易修状态变更
IssueCreatorExpire:1, // 我创建的易修截止日期到达最后一天 IssueCreatorExpire:"icon-yixiuicon1", // 我创建的易修截止日期到达最后一天
IssueDeleted:1, // 我创建或负责的易修删除 IssueDelete:"icon-yixiuicon1", // 我创建或负责的易修删除
IssueJournal:1, // 我创建或负责的易修有新的评论 IssueDeleted:"icon-yixiuicon1", // 我创建或负责的易修删除
IssueJournal:"icon-yixiuicon1", // 我创建或负责的易修有新的评论
//平台通知 //平台通知
LoginIpTip:2, //登录异常提示 LoginIpTip:"icon-xitongtongzhiicon", //登录异常提示
//个人状态类通知 //个人状态类通知
OrganizationJoined:3, // 账号被拉入组织 OrganizationJoined:"icon-xiaoxi2", // 账号被拉入组织
OrganizationLeft:3, // 账号被移出组织 OrganizationLeft:"icon-xiaoxi2", // 账号被移出组织
rganizationRole:3, // 账号组织权限变更 rganizationRole:"icon-xiaoxi2", // 账号组织权限变更
ProjectJoined:3, // 账号被拉入项目 ProjectJoined:"icon-xiaoxi2", // 账号被拉入项目
ProjectLeft:3, // 账号被移出项目 ProjectLeft:"icon-xiaoxi2", // 账号被移出项目
ProjectRole:3, // 账号仓库权限变更 ProjectRole:"icon-xiaoxi2", // 账号仓库权限变更
//其他仓库通知 //其他仓库通知
ProjectDelete:4, // 我关注的仓库被删除 ProjectDelete:"icon-daimakuicon1", // 我关注的仓库被删除
ProjectFollowed:4, // 我管理的仓库被关注 ProjectFollowed:"icon-daimakuicon1", // 我管理的仓库被关注
ProjectForked:4, // 我管理的仓库被复刻 ProjectForked:"icon-daimakuicon1", // 我管理的仓库被复刻
ProjectIssue:4, // 我管理/关注的仓库有新的易修 ProjectIssue:"icon-daimakuicon1", // 我管理/关注的仓库有新的易修
ProjectSettingChanged:4, // 我管理的仓库项目设置被更改 ProjectSettingChanged:"icon-daimakuicon1", // 我管理的仓库项目设置被更改
ProjectTransfer:4, // 我关注的仓库被转移 ProjectTransfer:"icon-daimakuicon1", // 我关注的仓库被转移
ProjectVersion:4, // 我关注的仓库有新的发行版 ProjectVersion:"icon-daimakuicon1", // 我关注的仓库有新的发行版
ProjectMemberJoined:"icon-daimakuicon1", // 我管理的仓库有成员加入
ProjectMemberLeft:"icon-daimakuicon1", // 我管理的仓库有成员移出
ProjectPraised:"icon-daimakuicon1", // 我管理的仓库被点赞
//合并请求类通知 //合并请求类通知
ProjectPullRequest:5, // 我管理/关注的仓库有新的合并请求 ProjectPullRequest:"icon-hebingqingqiuicon", // 我管理/关注的仓库有新的合并请求
PullRequestAssigned:5, // 有新指派给我的合并请求 PullRequestAssigned:"icon-hebingqingqiuicon", // 有新指派给我的合并请求
PullReuqestAtme:5, // 在合并请求中@我 PullRequestAtme:"icon-hebingqingqiuicon", // 在合并请求中@我
PullRequestChanged:5, // 我创建或负责的合并请求状态变更 PullRequestChanged:"icon-hebingqingqiuicon", // 我创建或负责的合并请求状态变更
PullRequestJournal:5, // 我创建或负责的合并请求有新的评论 PullRequestJournal:"icon-hebingqingqiuicon", // 我创建或负责的合并请求有新的评论
//里程碑 //里程碑
ProjectMilestone:6, // 我管理的仓库有新的里程碑 ProjectMilestone:"icon-lichengbeiicon", // 我管理的仓库有新的里程碑
}; };
// useEffect(() => { useEffect(() => {
// const params = { // const params = {
// type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "", // type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
// status: onlyUnread ? onlyUnread : "", // status: onlyUnread ? onlyUnread : "",
// limit: 20, // limit: pageSize,
// page: 0, // page: currentPage,
// } // }
// getMessageList(params); getMessageList();
// }, [noticeType, onlyUnread]) }, [noticeType, onlyUnread, currentPage])
function getMessageList(params) { function getMessageList() {
axios.get(`/users/yystopf/messages.json`, { const params = {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
status: onlyUnread ? onlyUnread : "",
limit: pageSize,
page: currentPage,
};
axios.get(`/users/${current_user.login}/messages.json`, {
params: params, params: params,
}).then((response) => { }).then((response) => {
setNoticeUnreadCount(response.data.unread_notification); if(response && response.data){
setAtUnreadCount(response.data.unread_atme); setNoticeUnreadCount(response.data.unread_notification);
setMessageList(response.data.messages); setAtUnreadCount(response.data.unread_atme);
}) setMessageList(response.data.messages);
console.log(messageList); setMessTotalCount(response.data.total_count);
//@我消息列表ids }
const atmeIds = new Array(); });
} }
function readNotice(id){ function readNotice(id){
@ -145,17 +98,15 @@ function MyNotice(props) {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "", type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
ids:id, ids:id,
}; };
console.log(params); axios.post(`/users/${current_user.login}/messages/read.json`,params);
axios.post(`/users/yystopf/messages/read.json`,{ getMessageList;
params:params,
}).then((response)=>{
console.log(response);
})
} }
} }
function handleClick(e) { function handleClick(e) {
setNoticeType(e.key); setNoticeType(e.key);
setCurrentPage(1);
setOnlyUnread();
if (e.key != "2") { if (e.key != "2") {
setIsBatchDelete(false); setIsBatchDelete(false);
} }
@ -172,7 +123,7 @@ function MyNotice(props) {
}); });
setMessageList(messageListNew); setMessageList(messageListNew);
setSelectedNum(checkboxNum); setSelectedNum(checkboxNum);
setBatchDeleteCheckAll(checkboxNum === atUnreadCount); setBatchDeleteCheckAll(checkboxNum === messageList.length);
} }
@ -187,29 +138,36 @@ function MyNotice(props) {
} }
function deleteNotice(id) { function deleteNotice(id) {
console.log(id);
const ids = new Array();
if(id[0] == 0){
messageList.map((item)=>{
item.bacheckedBatch ? ids.push(item.id):"";
})
}
console.log(ids);
if(id){ if(id){
DelModal({ DelModal({
title: noticeType === "1" ? '删除私信' : '删除与我相关', title: noticeType === "1" ? '删除私信' : '删除与我相关',
contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗？' : id[0] != -1 ? '您确定要删除这条@我消息吗？' : '您确定要删除选中的' + selectedNum + '条消息吗？', contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗？' : id[0] != 0 ? '您确定要删除这条@我消息吗？' : '您确定要删除选中的' + selectedNum + '条消息吗？',
content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录，请进行确认以防数据的丢失' : id[0] != -1 ? '此操作将删除这条消息，请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息，请进行确认以防数据的丢失', content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录，请进行确认以防数据的丢失' : id[0] != 0 ? '此操作将删除这条消息，请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息，请进行确认以防数据的丢失',
onOk: () => { onOk: () => {
const params = { const params = {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "", type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
ids:id, ids:id[0]===0?ids:id,
}; };
// console.log(params); console.log(params);
axios.delete(`/users/yystopf/messages.json`,{ axios.delete(`/users/${current_user.login}/messages.json`,{
data:params, data:params,
}).then((response)=>{ }).then((response)=>{
// console.log(response); console.log(response);
}) });
getMessageList();
} }
}); });
} }
} }
return ( return (
<div className="notice01"> <div className="notice01">
<div className="sshHead"> <div className="sshHead">
@ -223,12 +181,14 @@ function MyNotice(props) {
<div className={isBatchDelete ? "invisible " : "visible"}> <div className={isBatchDelete ? "invisible " : "visible"}>
<div className="vertical-center-style"> <div className="vertical-center-style">
<Checkbox onChange={(e) => e.target.checked ? setOnlyUnread(1) : setOnlyUnread(2)}>仅看未读{noticeType === "1" ? `私信（12）` : noticeType === "0" ? `消息（${noticeUnreadCount}）` : `消息（${atUnreadCount}）`}</Checkbox> <Checkbox checked={onlyUnread === 1?true:false} onChange={(e) => e.target.checked ? setOnlyUnread(1) : setOnlyUnread()}>仅看未读{noticeType === "1" ? `私信（12）` : noticeType === "0" ? `消息（${noticeUnreadCount}）` : `消息（${atUnreadCount}）`}</Checkbox>
</div> </div>
{noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""} {noticeType === "2" && messageList.length > 0 ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
</div> </div>
<div className={isBatchDelete ? 'visible' : 'invisible'}> {messageList.length===0 ? <NoneData _html="暂无相关消息"/>:""}
{messageList && messageList.length>0 && <div className={isBatchDelete ? 'visible' : 'invisible'}>
<div className="vertical-center-style"> <div className="vertical-center-style">
{/* <input type="checkbox" id="checkAll" onChange={onChangeAll} />&nbsp; */} {/* <input type="checkbox" id="checkAll" onChange={onChangeAll} />&nbsp; */}
<Checkbox onChange={onChangeAll} checked={batchDeleteCheckedAll}>全选</Checkbox> <Checkbox onChange={onChangeAll} checked={batchDeleteCheckedAll}>全选</Checkbox>
@ -236,21 +196,20 @@ function MyNotice(props) {
</div> </div>
<div> <div>
<button onClick={() => { setIsBatchDelete(false); setSelectedNum(0); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp; <button onClick={() => { setIsBatchDelete(false); setSelectedNum(0); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button className="deleteBut" onClick={selectedNum > 0 ? ()=>deleteNotice([-1]) : () => { }}>删除</button> <button className="deleteBut" onClick={selectedNum > 0 ? ()=>deleteNotice([0]) : () => { }}>删除</button>
</div> </div>
</div> </div>}
{messageList.map(item => { {messageList.map(item => {
// 系统消息 // 系统消息
// 消息类别 if (noticeType === "0") {
// const iconName = item.source.startsWith("Issue")?"icon-yixiuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":item.source.startsWith("Project")?"icon-daimakuicon1": // 消息类别
if (noticeType === "0" && item.type === "notification") {
return ( return (
<div className="mynotice-content vertical-center-style" key={item.id}> <div className="mynotice-content vertical-center-style" key={item.id}>
<div className="mynotice-cont vertical-center-style"> <div className="mynotice-cont stretch-style">
{item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>} {item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>}
<i className="iconfont icon-yixiuicon1"></i> <i className={"iconfont "+noticeSourceType[item.source]}></i>
<span className="sysNotice-length highlightSpan" onClick={() => window.location.href = (`${item.notification_url}`)}>{item.content}</span> <span className="sysNotice-length highlightSpan" onClick={() => window.open("https://"+`${item.notification_url}`)}>{item.content}</span>
</div> </div>
<div className="mynotice-cont vertical-center-style float-left-little"> <div className="mynotice-cont vertical-center-style float-left-little">
<span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span> <span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span>
@ -258,29 +217,41 @@ function MyNotice(props) {
</div> </div>
</div> </div>
) )
} else if (noticeType === "2" && item.type === "atme") { } else if (noticeType === "2") {
//@我 //@我
return ( return (
<div className="mynotice-content vertical-center-style" key={item.id}> <div className="mynotice-content vertical-center-style" key={item.id}>
<div className="mynotice-cont vertical-center-style"> <div className="mynotice-cont vertical-center-style">
{/* <input type="checkbox" className={isBatchDelete ? 'atme-checkbox' : 'invisible'} onChange={onChange} /> */} {/* <input type="checkbox" className={isBatchDelete ? 'atme-checkbox' : 'invisible'} onChange={onChange} /> */}
<Checkbox value={item.id} className={isBatchDelete ? 'visible-checkbox' : 'invisible-checkbox'} onChange={onChange} checked={item.checkedBatch}></Checkbox> <Checkbox value={item.id} className={isBatchDelete ? 'visible-checkbox' : 'invisible-checkbox'} onChange={onChange} checked={item.checkedBatch}></Checkbox>
<img src={`https://testforgeplus.trustie.net//${item.sender.image_url}`} className="currentImg" /> {item.sender && <img src={`https://testforgeplus.trustie.net//${item.sender.image_url}`} className="currentImg" />}
<span className="at-length highlightSpan"> <div className="atme-notice-text">
{item.status === 1 ? <Badge color="#FA2020" className="at-badge" /> : <span className="system-notice-blank"></span>} <div className="at-badge">{item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>}</div>
{item.content} <div className="highlightSpan">{item.content}</div>
</span> </div>
</div> </div>
<div className="mynotice-cont vertical-center-style"> <div className="mynotice-cont vertical-center-style">
<span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span> <span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span>
{item.status === 1 && <span className="invisable-read" onClick={()=>readNotice([item.id])}>标记为已读</span>}&nbsp;&nbsp;&nbsp; {item.status === 1 && <span className="invisable-read" onClick={()=>readNotice([item.id])}>标记为已读</span>}&nbsp;&nbsp;&nbsp;
<span className="invisable-read" onClick={()=>deleteNotice([item.id])}>删除</span> <span className="invisable-read float-left-little" onClick={()=>deleteNotice([item.id])}>删除</span>
</div> </div>
</div> </div>
) )
} }
})} })}
{/* 分页 */}
<div className="paging">
<Pagination
simple
current = {currentPage}
pageSize={pageSize}
onChange={(page)=>{setCurrentPage(page)}}
total = {messTotalCount}
hideOnSinglePage
></Pagination>
</div>
{/* 私信 */} {/* 私信 */}
{/* <div className="mynotice-content vertical-center-style"> {/* <div className="mynotice-content vertical-center-style">
<Badge count={95}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img" /></Badge> <Badge count={95}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img" /></Badge>

28
src/forge/SecuritySetting/notice/myNotice/Index.scss
View File

@ -82,7 +82,6 @@ button:active {
padding: 15px 0 15px 10px; padding: 15px 0 15px 10px;
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
color: #333333; color: #333333;
&:hover{ &:hover{
background: #F3F4F6; background: #F3F4F6;
} }
@ -135,6 +134,18 @@ button:active {
& .invisible-checkbox{ & .invisible-checkbox{
display: none; display: none;
} }
.atme-notice-text{
position: relative;
margin-left: 12px;
max-width: 48rem;
& .at-badge{
position:absolute;
}
& .highlightSpan{
margin-left: 12px;
}
}
} }
& .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component { & .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
@ -198,10 +209,7 @@ button:active {
max-width: 52rem; max-width: 52rem;
} }
.at-length{
max-width: 48rem;
margin-left: 12px;
}
#numberSpan{ #numberSpan{
color: #466AFF; color: #466AFF;
} }
@ -211,10 +219,20 @@ button:active {
align-items: center; align-items: center;
} }
.stretch-style{
display: flex;
align-items: baseline;
}
.float-left-little{ .float-left-little{
margin-right: 10px; margin-right: 10px;
} }
.paging{
float: right;
margin: 12px;
}
// .invisible_checkGroup{ // .invisible_checkGroup{
// & .ant-checkbox-inner{ // & .ant-checkbox-inner{
// display: none; // display: none;