Update notifications.py

frontend/src/components/common/notice-item.js

@@ -24,6 +24,8 @@ const MSG_TYPE_SAML_SSO_FAILED = 'saml_sso_failed';
 const MSG_TYPE_REPO_SHARE_PERM_CHANGE = 'repo_share_perm_change';
 const MSG_TYPE_REPO_SHARE_PERM_DELETE = 'repo_share_perm_delete';
 const MSG_TYPE_FACE_CLUSTER = 'face_cluster';
+const MSG_TYPE_SEADOC_REPLY = 'reply';
+const MSG_TYPE_SEADOC_COMMENT = 'comment';
 
 dayjs.extend(relativeTime);
 
@@ -33,7 +35,7 @@ class NoticeItem extends React.Component {
     let noticeItem = this.props.noticeItem;
     let noticeType = noticeItem.type;
     let detail = noticeItem.detail;
-
+    console.log(detail, noticeItem, noticeType)
     if (noticeType === MSG_TYPE_ADD_USER_TO_GROUP) {
 
       let avatar_url = detail.group_staff_avatar_url;
@@ -375,6 +377,22 @@ class NoticeItem extends React.Component {
       return { avatar_url: null, notice };
     }
 
+    if (noticeType === MSG_TYPE_SEADOC_COMMENT) {
+      let avatar_url = detail.share_from_user_avatar_url;
+      let notice = '';
+      console.log(111)
+      notice = Utils.HTMLescape(notice);
+      return { avatar_url, notice };
+    }
+
+    if (noticeType === MSG_TYPE_SEADOC_REPLY) {
+      let avatar_url = detail.share_from_user_avatar_url;
+      let notice = detail.reply;
+      notice = Utils.HTMLescape(notice);
+      console.log(notice)
+      return { avatar_url, notice };
+    }
+
     // if (noticeType === MSG_TYPE_GUEST_INVITATION_ACCEPTED) {
 
     // }

frontend/src/components/common/notification-popover/index.css

@@ -5,7 +5,7 @@
 .notification-container {
   position: absolute;
   background: #fff;
-  width: 320px;
+  width: 400px;
   right: -16px;
   top: -1px;
   border-radius: 3px;
@@ -65,21 +65,15 @@
   margin-left: 20px;
 }
 
-.notification-container .notification-body .mark-notifications {
+.notification-container .mark-all-read {
   color: #b4b4b4;
   cursor: pointer;
-  border-bottom: 1px solid #ededed;
-  height: 36px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 1rem;
 }
 
-.notification-container .notification-body .mark-notifications:hover {
-  text-decoration: underline;
-}
-
 .notification-body .notification-list-container {
   max-height: 260px;
   overflow: auto;
@@ -190,3 +184,22 @@
 .notification-body .notification-footer:hover {
   text-decoration: underline;
 }
+
+.notification-container .notification-body .mark-notifications {
+  display: flex;
+}
+
+.notification-container .notification-body .mark-notifications .mark-all-read:hover {
+  text-decoration: underline;
+}
+
+.notification-container .notification-body .nav .nav-item .nav-link {
+  height: 46px;
+  margin-right: 15px;
+  margin-left: 15px;
+  font-size: 14px;
+}
+
+.notification-container .notification-body .nav .nav-item .nav-link.active {
+  color: #ED7109 !important;
+}

frontend/src/components/common/notification-popover/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+
 import './index.css';
 
 export default class NotificationPopover extends React.Component {
@@ -13,7 +15,9 @@ export default class NotificationPopover extends React.Component {
     onNotificationDialogToggle: PropTypes.func,
     listNotifications: PropTypes.func,
     onMarkAllNotifications: PropTypes.func,
+    tabItemClick: PropTypes.func,
     children: PropTypes.any,
+    currentTab: PropTypes.string,
   };
 
   static defaultProps = {
@@ -47,8 +51,12 @@ export default class NotificationPopover extends React.Component {
     }
   };
 
+  tabItemClick = (tab) => {
+    this.props.tabItemClick(tab);
+  };
+
   render() {
-    const { headerText, bodyText, footerText } = this.props;
+    const { headerText, bodyText, footerText, currentTab } = this.props;
     return (
       <Popover
         className="notification-wrapper"
@@ -64,12 +72,55 @@ export default class NotificationPopover extends React.Component {
             <span className="sf3-font sf3-font-x-01 notification-close-icon" onClick={this.props.onNotificationListToggle}></span>
           </div>
           <div className="notification-body">
-            <div className="mark-notifications" onClick={this.props.onMarkAllNotifications}>{bodyText}</div>
+          <div className="mark-notifications">
+            <ul className="nav">
+              <li className="nav-item" onClick={() => this.tabItemClick('general')}>
+                <span className={`nav-link ${currentTab === 'general' ? 'active' : ''}`}>
+                  {gettext('General')}
+                </span>
+              </li>
+              <li className="nav-item" onClick={() => this.tabItemClick('discussion')}>
+                <span className={`nav-link ${currentTab === 'discussion' ? 'active' : ''}`}>
+                  {gettext('Discussion')}
+                  
+                </span>
+              </li>
+            </ul>
+            <span className="mark-all-read" onClick={this.onMarkAllNotifications}>
+              {gettext('Mark all as read')}
+            </span>
+          </div>
+          {currentTab === 'general' &&
             <div className="notification-list-container" onScroll={this.onHandleScroll} ref={ref => this.notificationListRef = ref}>
               <div ref={ref => this.notificationsWrapperRef = ref}>
                 {this.props.children}
               </div>
             </div>
+          }
+          {currentTab === 'discussion' &&
+            <div className="notification-list-container" onScroll={this.onHandleScroll} ref={ref => this.notificationListRef = ref}>
+              <div ref={ref => this.notificationsWrapperRef = ref}>
+                {this.props.children}
+              </div>
+            </div>
+          }
+         
+            {/* <div className="mark-notifications" onClick={this.props.onMarkAllNotifications}>
+              <ul className="nav dtable-external-links-tab">
+                <li className="nav-item">
+                  <span className="nav-link">General</span>
+                </li>
+                <li className="nav-item">
+                  <span className="nav-link">Discussion</span>
+                </li>
+              </ul>
+                <span className="mark-all-read">{bodyText}</span>
+            </div>
+            <div className="notification-list-container" onScroll={this.onHandleScroll} ref={ref => this.notificationListRef = ref}>
+              <div ref={ref => this.notificationsWrapperRef = ref}>
+                {this.props.children}
+              </div>
+            </div> */}
             <div className="notification-footer" onClick={this.onNotificationDialogToggle}>{footerText}</div>
           </div>
         </div>

frontend/src/components/common/notification.js

@@ -14,6 +14,7 @@ class Notification extends React.Component {
       showNotice: false,
       unseenCount: 0,
       noticeList: [],
+      currentTab: 'general',
       isShowNotificationDialog: this.getInitDialogState(),
     };
   }
@@ -37,14 +38,35 @@ class Notification extends React.Component {
       this.setState({ showNotice: true });
     }
   };
+  
+  tabItemClick = (tab) => {
+    const { currentTab } = this.state;
+    if (currentTab === tab) return;
+    this.setState({ 
+      showNotice: true,
+      currentTab: tab
+     }, () => {
+      this.loadNotices();
+     });
+  };
 
   loadNotices = () => {
     let page = 1;
     let perPage = 5;
-    seafileAPI.listNotifications(page, perPage).then(res => {
-      let noticeList = res.data.notification_list;
-      this.setState({ noticeList: noticeList });
-    });
+    if (this.state.currentTab === 'general') {
+      seafileAPI.listNotifications(page, perPage).then(res => {
+        let noticeList = res.data.notification_list;
+        this.setState({ noticeList: noticeList });
+      });
+    }
+    if (this.state.currentTab === 'discussion') {
+      seafileAPI.listSdocNotifications(page, perPage).then(res => {
+        let noticeList = res.data.notification_list;
+        console.log(noticeList)
+        this.setState({ noticeList: noticeList });
+      });
+    }
+
   };
 
   onNoticeItemClick = (noticeItem) => {
@@ -91,7 +113,7 @@ class Notification extends React.Component {
   };
 
   render() {
-    const { unseenCount } = this.state;
+    const { unseenCount, currentTab } = this.state;
     return (
       <div id="notifications">
         <a href="#" onClick={this.onClick} className="no-deco" id="notice-icon" title={gettext('Notifications')} aria-label={gettext('Notifications')}>
@@ -103,9 +125,11 @@ class Notification extends React.Component {
             headerText={gettext('Notification')}
             bodyText={gettext('Mark all as read')}
             footerText={gettext('View all notifications')}
+            currentTab={currentTab}
             onNotificationListToggle={this.onNotificationListToggle}
             onNotificationDialogToggle={this.onNotificationDialogToggle}
             onMarkAllNotifications={this.onMarkAllNotifications}
+            tabItemClick={this.tabItemClick}
           >
             <ul className="notice-list list-unstyled" id="notice-popover">
               {this.state.noticeList.map(item => {