Merge pull request '我的通知' (#14) from durian/forgeplus-react:feature_notification_xiesi into feature_notification

This commit is contained in:
tongChong 2021-09-14 16:20:59 +08:00
commit 9852bb14c3
4 changed files with 253 additions and 95 deletions

View File

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

View File

@ -62,7 +62,7 @@ function Index(props){
<ul className="securityUl ul-border-buttom">
<li>消息通知</li>
<li className={pathname.indexOf("/settings/notice/myNotice")>-1 || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><i className="iconfont icon-wodetongzhi"></i><span className="text-shodow-bold">我的通知</span></Link></li>
<li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span className="text-shodow-bold">通知管理</span></Link></li>
{/* <li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span className="text-shodow-bold">通知管理</span></Link></li> */}
</ul>
<ul className="securityUl">
<li>安全设置</li>

View File

@ -1,147 +1,271 @@
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 '../manager/Index.scss'
import DelModal from '../../../Wiki/components/ModalFun';
import Axios from 'axios';
import axios from 'axios';
import { Link } from 'react-router-dom';
import NoneData from '../../../Nodata.js';
function MyNotice(props) {
let current_user = props.current_user;
let pageSize = 20;
const [noticeType, setNoticeType] = useState("0");
const [selectedNum, setSelectedNum] = useState(0);
const [isBatchDelete, setIsBatchDelete] = useState(false);
const [notice_unread_count, setNotice_unread_count] = useState();//
const [letter_unread_count, setLetter_unread_count] = useState(0);//
const [at_unread_count, setAt_unread_count] = useState();//@
const [message_list, setMessage_list] = useState([]);
const [onlyUnread,setOnlyUnread] = useState();
const [noticeType, setNoticeType] = useState("2");//tab
const [selectedNum, setSelectedNum] = useState(0);//@
const [isBatchDelete, setIsBatchDelete] = useState(false);//@
const [batchDeleteCheckedAll, setBatchDeleteCheckAll] = useState(false);//@--
const [noticeUnreadCount, setNoticeUnreadCount] = useState();//
// const [letterUnreadCount, setLetterUnreadCount] = useState(0);//
const [atUnreadCount, setAtUnreadCount] = useState();//@
const [messageList, setMessageList] = useState([]);
const [messTotalCount, setMessTotalCount] = useState();//
const [currentPage, setCurrentPage] = useState(1);//
const [onlyUnread, setOnlyUnread] = useState();
const noticeSourceType = {
//
IssueAssigned:"icon-yixiuicon1", //
IssueAssignerExpire:"icon-yixiuicon1", //
IssueAtme:"icon-yixiuicon1", // @
IssueChanged:"icon-yixiuicon1", //
IssueCreatorExpire:"icon-yixiuicon1", //
IssueDelete:"icon-yixiuicon1", //
IssueDeleted:"icon-yixiuicon1", //
IssueJournal:"icon-yixiuicon1", //
//
LoginIpTip:"icon-xitongtongzhiicon", //
//
OrganizationJoined:"icon-xiaoxi2", //
OrganizationLeft:"icon-xiaoxi2", //
rganizationRole:"icon-xiaoxi2", //
ProjectJoined:"icon-xiaoxi2", //
ProjectLeft:"icon-xiaoxi2", //
ProjectRole:"icon-xiaoxi2", //
//
ProjectDelete:"icon-daimakuicon1", //
ProjectFollowed:"icon-daimakuicon1", //
ProjectForked:"icon-daimakuicon1", //
ProjectIssue:"icon-daimakuicon1", // /
ProjectSettingChanged:"icon-daimakuicon1", //
ProjectTransfer:"icon-daimakuicon1", //
ProjectVersion:"icon-daimakuicon1", //
ProjectMemberJoined:"icon-daimakuicon1", //
ProjectMemberLeft:"icon-daimakuicon1", //
ProjectPraised:"icon-daimakuicon1", //
//
ProjectPullRequest:"icon-hebingqingqiuicon", // /
PullRequestAssigned:"icon-hebingqingqiuicon", //
PullRequestAtme:"icon-hebingqingqiuicon", // @
PullRequestChanged:"icon-hebingqingqiuicon", //
PullRequestJournal:"icon-hebingqingqiuicon", //
//
ProjectMilestone:"icon-lichengbeiicon", //
};
useEffect(() => {
const params = {
type:noticeType==="0"?"notification":noticeType==="2"?"atme":"",
status:onlyUnread?onlyUnread:"",
limit: 20,
page: 0,
}
getMessageList(params);
}, [noticeType,onlyUnread])
// const params = {
// type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
// status: onlyUnread ? onlyUnread : "",
// limit: pageSize,
// page: currentPage,
// }
getMessageList();
}, [noticeType, onlyUnread, currentPage])
function getMessageList(params) {
Axios.get(`/users/yystopf/messages.json`, {
function getMessageList() {
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,
}).then((response) => {
setNotice_unread_count(response.data.unread_notification);
setAt_unread_count(response.data.unread_atme);
setMessage_list(response.data.messages);
})
if(response && response.data){
setNoticeUnreadCount(response.data.unread_notification);
setAtUnreadCount(response.data.unread_atme);
setMessageList(response.data.messages);
setMessTotalCount(response.data.total_count);
}
});
}
function readNotice(id){
if(id){
const params = {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
ids:id,
};
axios.post(`/users/${current_user.login}/messages/read.json`,params).then((response)=>{
response.status === 0 && getMessageList();
});
}
}
function handleClick(e) {
setNoticeType(e.key);
setCurrentPage(1);
setOnlyUnread();
if (e.key != "2") {
setIsBatchDelete(false);
}
}
function onChange() {
var selectedNum = 0;
const checkbox = document.getElementsByClassName("atme-checkbox");
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked ? selectedNum++ : "";
}
document.getElementById("checkAll").checked = selectedNum === checkbox.length;
setSelectedNum(selectedNum === checkbox.length ? checkbox.length : selectedNum);
}
function onCheckAllChange(e) {
const checkbox = document.getElementsByClassName("atme-checkbox");
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = e.target.checked;
}
setSelectedNum(e.target.checked ? checkbox.length : 0);
}
function deleteNotice() {
DelModal({
title: noticeType === "1" ? '删除私信' : '删除与我相关',
contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗?' : selectedNum === 0 ? '您确定要删除这条@我消息吗?' : '您确定要删除选中的' + selectedNum + '条消息吗?',
content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录请进行确认以防数据的丢失' : selectedNum === 0 ? '此操作将删除这条消息,请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息,请进行确认以防数据的丢失',
onOk: () => {
function onChange(e) {
var checkboxNum = 0;
let messageListNew=messageList.slice();
messageListNew.map((item)=>{
if(item.id===e.target.value){
item.checkedBatch = e.target.checked;
}
item.checkedBatch?checkboxNum++:"";
});
setMessageList(messageListNew);
setSelectedNum(checkboxNum);
setBatchDeleteCheckAll(checkboxNum === messageList.length);
}
function onChangeAll(e) {
setBatchDeleteCheckAll(e.target.checked);
setSelectedNum(e.target.checked?messageList.length:0);
let messageListNew=messageList.slice();
messageListNew.map((item)=>{
item.checkedBatch = e.target.checked;
});
setMessageList(messageListNew);
}
function deleteNotice(id) {
const ids = [];
console.log(messageList);
if(!id){
messageList.map(item=>{
item.checkedBatch && ids.push(item.id);
});
}
console.log(ids);
DelModal({
title: noticeType === "1" ? '删除私信' : '删除与我相关',
contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗?' : id ? '您确定要删除这条@我消息吗?' : '您确定要删除选中的' + selectedNum + '条消息吗?',
content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录请进行确认以防数据的丢失' : id ? '此操作将删除这条消息,请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息,请进行确认以防数据的丢失',
onOk: () => {
const params = {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
ids:id?id:ids,
};
console.log(params);
axios.delete(`/users/${current_user.login}/messages.json`,{
data:params,
}).then((response)=>{
response.status === 0 && getMessageList();
});
}
});
}
return (
<div className="notice01">
<div className="sshHead">
<Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
<Menu.Item key="0"><Badge count={notice_unread_count} title="">系统通知</Badge></Menu.Item>
<Menu.Item key="1" id="item-private"><Badge count={0}>私信</Badge></Menu.Item>
<Menu.Item key="2"><Badge count={at_unread_count}>@</Badge></Menu.Item>
<Menu.Item key="0"><Badge count={noticeUnreadCount} title="">系统通知</Badge></Menu.Item>
{/* <Menu.Item key="1" id="item-private"><Badge count={0}>私信</Badge></Menu.Item> */}
<Menu.Item key="2"><Badge count={atUnreadCount}>@</Badge></Menu.Item>
</Menu>
<button>所有{noticeType === "0" ? "系统通知" : noticeType === "1" ? "私信" : "@我"}一键已读</button>
<button onClick={()=>{readNotice([-1])}}>所有{noticeType === "0" ? "系统通知" : noticeType === "1" ? "私信" : "@我"}一键已读</button>
</div>
<div className={isBatchDelete ? "invisible " : "visible"}>
<div className="vertical-center-style">
<Checkbox onChange={(e)=>e.target.checked?setOnlyUnread(1):setOnlyUnread(2)}>仅看未读{noticeType === "1" ? `私信12` : noticeType==="0"?`消息(${notice_unread_count}`:`消息(${at_unread_count}`}</Checkbox>
<Checkbox checked={onlyUnread === 1?true:false} onChange={(e) => e.target.checked ? setOnlyUnread(1) : setOnlyUnread()}>仅看未读{noticeType === "1" ? `私信12` : noticeType === "0" ? `消息(${noticeUnreadCount}` : `消息(${atUnreadCount}`}</Checkbox>
</div>
{noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
{noticeType === "2" && messageList.length > 0 ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
</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">
<input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;
{/* <input type="checkbox" id="checkAll" onChange={onChangeAll} />&nbsp; */}
<Checkbox onChange={onChangeAll} checked={batchDeleteCheckedAll}>全选</Checkbox>
&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;
</div>
<div>
<button onClick={() => { setIsBatchDelete(false); setSelectedNum(0); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button className="deleteBut" onClick={selectedNum > 0 ? deleteNotice : () => { }}>删除</button>
<button className="deleteBut" onClick={selectedNum > 0 ? ()=>deleteNotice() : () => { }}>删除</button>
</div>
</div>
</div>}
{message_list.map(item => {
{messageList.map(item => {
//
//
// 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(
if (noticeType === "0") {
//
return (
<div className="mynotice-content vertical-center-style" key={item.id}>
<div className="mynotice-cont vertical-center-style">
{item.status === 1? <Badge color="#FA2020" />:<span className="system-notice-blank"></span>}
<i className="iconfont icon-yixiuicon1"></i>
<span className="sysNotice-length highlightSpan" onClick={()=>window.location.href=(`${item.notification_url}`)}>{item.content}</span>
<div className="mynotice-cont stretch-style">
{item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>}
<i className={"iconfont "+noticeSourceType[item.source]}></i>
<span className="sysNotice-length highlightSpan" onClick={() => window.open("https://"+`${item.notification_url}`)}>{item.content}</span>
</div>
<div className="mynotice-cont vertical-center-style float-left-little">
<span className="timeSpan">{item.time_ago}</span>
<a>标记为已读</a>
<span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span>
{item.status === 1 && <span className="invisable-read" onClick={()=>readNotice([item.id])}>标记为已读</span>}
</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-cont vertical-center-style">
<input type="checkbox" className={isBatchDelete ? 'atme-checkbox' : 'invisible'} onChange={onChange} />
<img src={`https://testforgeplus.trustie.net//${item.sender.image_url}`} className="currentImg" />
<span className="at-length highlightSpan">
{item.status === 1? <Badge color="#FA2020" className="at-badge"/>:<span className="system-notice-blank"></span>}
{item.content}
</span>
{/* <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>
{item.sender && <img src={`https://testforgeplus.trustie.net//${item.sender.image_url}`} className="currentImg" />}
<div className="atme-notice-text">
<div className="at-badge">{item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>}</div>
<div className="highlightSpan">{item.content}</div>
</div>
</div>
<div className="mynotice-cont vertical-center-style">
<span className="timeSpan">{item.time_ago}</span>
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;<a className="float-left-little" onClick={deleteNotice}>删除</a>
<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;
<span className="invisable-read float-left-little" onClick={()=>deleteNotice([item.id])}>删除</span>
</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">
<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>
<div className="private-letter-right">
<div>
<span>蒋宇航</span>
<span className="timeSpan">4分钟前</span>
<a onClick={deleteNotice}>删除</a>
</div>
<div onClick={() => props.history.push('/settings/notice/privateLetter')}>
<span className="highlightSpan letter-length-limit">最好的OpenStack控制台对标OpenStack社区Horizon项目,最好的OpenStack控制台对标OpenStack社区Horizon项目在易用性页面性能等方面进行深度优化提供简单控制台</span>
</div>
</div>
</div> */}
</div>
)
}

View File

@ -6,7 +6,7 @@
}
.ant-menu-item{
padding:0px;
// margin-right:34px!important;
margin-right:34px!important;
height: 34px;
width: 64px;
text-align: center;
@ -82,18 +82,18 @@ button:active {
padding: 15px 0 15px 10px;
border-bottom: 1px solid #EEEEEE;
color: #333333;
&:hover{
background: #F3F4F6;
}
& a{
& .invisable-read{
display: none;
}
&:hover a{
&:hover .invisable-read{
display: block;
color: #466AFF;
cursor: pointer;
}
&:hover .timeSpan{
@ -128,9 +128,24 @@ button:active {
.mynotice-cont{
padding:0;
& .atme-checkbox{
& .visible-checkbox{
margin-right: 10px;
}
& .invisible-checkbox{
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 {
@ -194,10 +209,7 @@ button:active {
max-width: 52rem;
}
.at-length{
max-width: 48rem;
margin-left: 18px;
}
#numberSpan{
color: #466AFF;
}
@ -207,6 +219,28 @@ button:active {
align-items: center;
}
.stretch-style{
display: flex;
align-items: baseline;
}
.float-left-little{
margin-right: 10px;
}
}
.paging{
float: right;
margin: 12px;
}
// .invisible_checkGroup{
// & .ant-checkbox-inner{
// display: none;
// }
// }
// .notice01{
// & .ant-checkbox-group{
// display: flex;
// flex-direction: column;
// }
// }