sysadmin reconstruct notification page (#4089)

* sysadmin reconstruct notification page

* [system admin] notifications: fixup & improvement

* [system admin] notifications: fixup for urls.py

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-sys-notification-dialog.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Input } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  addNotification: PropTypes.func.isRequired
+};
+
+class SysAdminAddSysNotificationDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      isSubmitBtnActive: false
+    };
+  }
+
+  handleChange = (e) => {
+    const value = e.target.value;
+    if (!value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
+    this.setState({value: value});
+  }
+
+  handleSubmit = () => {
+    this.toggle();
+    this.props.addNotification(this.state.value.trim());
+  }
+
+  toggle = () => {
+    this.props.toggle();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Add new notification')}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <Input
+                type="textarea"
+                value={this.state.value}
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SysAdminAddSysNotificationDialog.propTypes = propTypes;
+
+export default SysAdminAddSysNotificationDialog;

frontend/src/pages/sys-admin/index.js

@@ -17,6 +17,7 @@ import TrashRepos from './repos/trash-repos';
 import DirView from './repos/dir-view';
 
 import WebSettings from './web-settings/web-settings';
+import Notifications from './notifications/notifications';
 import FileScanRecords from './file-scan-records';
 import WorkWeixinDepartments from './work-weixin-departments';
 
@@ -99,6 +100,7 @@ class SysAdmin extends React.Component {
             <TrashRepos path={siteRoot + 'sys/trash-libraries'} />
             <DirView path={siteRoot + 'sys/libraries/:repoID/*'} />
             <WebSettings path={siteRoot + 'sys/web-settings'} />
+            <Notifications path={siteRoot + 'sys/notifications'} />
             <FileScanRecords
               path={siteRoot + 'sys/file-scan-records'}
               currentTab={currentTab} 

frontend/src/pages/sys-admin/notifications/notifications.js

@@ -0,0 +1,293 @@
+import React, { Component, Fragment } from 'react';
+import { Button } from 'reactstrap';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { loginUrl, gettext } from '../../../utils/constants';
+import toaster from '../../../components/toast';
+import EmptyTip from '../../../components/empty-tip';
+import Loading from '../../../components/loading';
+import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
+import SysAdminAddSysNotificationDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-sys-notification-dialog';
+import MainPanelTopbar from '../main-panel-topbar';
+import OpMenu from './op-menu';
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false
+    };
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  render() {
+    const { loading, errorMsg, items } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center mt-4">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No notifications')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <table>
+          <thead>
+            <tr>
+              <th width="95%">{gettext('Notification Detail')}</th>
+              <th width="5%">{/*Operations*/}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item, index) => {
+              return (<Item
+                key={index}
+                item={item}
+                isItemFreezed={this.state.isItemFreezed}
+                onFreezedItem={this.onFreezedItem}
+                onUnfreezedItem={this.onUnfreezedItem}
+                deleteNotification={this.props.deleteNotification}
+                setToCurrent={this.props.setToCurrent}
+              />);
+            })}
+          </tbody>
+        </table>
+      );
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      highlight: false,
+      isDeleteDialogOpen: false
+    };
+  }
+
+  handleMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: true,
+        highlight: true
+      });
+    }
+  }
+
+  handleMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: false,
+        highlight: false
+      });
+    }
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({
+      highlight: false,
+      isOpIconShow: false
+    });
+    this.props.onUnfreezedItem();
+  }
+
+  toggleDeleteDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+  }
+
+  deleteNotification = () => {
+    this.props.deleteNotification(this.props.item.id);
+    this.toggleDeleteDialog();
+  }
+
+  setToCurrent = () => {
+    this.props.setToCurrent(this.props.item.id);
+  }
+
+  onMenuItemClick = (operation) => {
+    switch(operation) {
+      case 'Set to current':
+        this.setToCurrent();
+        break;
+      case 'Delete':
+        this.toggleDeleteDialog();
+        break;
+    }
+  }
+
+  render() {
+    const { item } = this.props;
+    const { isOpIconShown, isDeleteDialogOpen } = this.state;
+
+    return (
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          <td>
+            {item.msg}
+            {item.is_current &&
+              <span className="small text-orange">{gettext('(current notification)')}</span>
+            }
+          </td>
+          <td>
+            {isOpIconShown &&
+            <OpMenu
+              item={item}
+              onMenuItemClick={this.onMenuItemClick}
+              onFreezedItem={this.props.onFreezedItem}
+              onUnfreezedItem={this.onUnfreezedItem}
+            />
+            }
+          </td>
+        </tr>
+        {isDeleteDialogOpen &&
+          <CommonOperationConfirmationDialog
+            title={gettext('Delete Notification')}
+            message={gettext('Are you sure you want to delete the notification ?')}
+            toggleDialog={this.toggleDeleteDialog}
+            executeOperation={this.deleteNotification}
+            confirmBtnText={gettext('Delete')}
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+class Notifications extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      notificationList: [],
+      isAddNotificationDialogOpen: false
+    };
+  }
+
+  componentDidMount () {
+    seafileAPI.sysAdminListAllSysNotifications().then((res) => {
+      this.setState({
+        loading: false,
+        notificationList: res.data.notifications
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          });
+        }
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  toggleAddNotificationDialog = () => {
+    this.setState({isAddNotificationDialogOpen: !this.state.isAddNotificationDialogOpen});
+  }
+
+  addNotification = (msg) => {
+    seafileAPI.sysAdminAddSysNotification(msg).then(res => {
+      let notificationList = this.state.notificationList;
+      notificationList.unshift(res.data.notification);
+      this.setState({notificationList: notificationList});
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteNotification = (id) => {
+    seafileAPI.sysAdminDeleteSysNotification(id).then(res => {
+      let notificationList = this.state.notificationList.filter(item => {
+        return item.id != id;
+      });
+      this.setState({notificationList: notificationList});
+      toaster.success(gettext('Successfully deleted 1 item.'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  setToCurrent = (id) => {
+    seafileAPI.sysAdminSetSysNotificationToCurrent(id).then(res => {
+      let notificationList = this.state.notificationList.map(item => {
+        if (item.id == id) {
+          item.is_current = true;
+        } else {
+          item.is_current = false;
+        }
+        return item;
+      });
+      this.setState({notificationList: notificationList});
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  render() {
+    const { isAddNotificationDialogOpen } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleAddNotificationDialog}>{gettext('Add new notification')}</Button>
+        </MainPanelTopbar>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('All Notifications')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={this.state.notificationList}
+                deleteNotification={this.deleteNotification}
+                setToCurrent={this.setToCurrent}
+              />
+            </div>
+          </div>
+        </div>
+        {isAddNotificationDialogOpen &&
+          <SysAdminAddSysNotificationDialog
+            addNotification={this.addNotification}
+            toggle={this.toggleAddNotificationDialog}
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default Notifications;

frontend/src/pages/sys-admin/notifications/op-menu.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+
+const propTypes = {
+  item: PropTypes.object.isRequired,
+  onFreezedItem: PropTypes.func.isRequired,
+  onUnfreezedItem: PropTypes.func.isRequired,
+  onMenuItemClick: PropTypes.func.isRequired,
+};
+
+class OpMenu extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemMenuShow: false
+    };
+  }
+
+  onMenuItemClick = (e) => {
+    let operation = Utils.getEventData(e, 'op');
+    this.props.onMenuItemClick(operation);
+  }
+
+  onDropdownToggleClick = (e) => {
+    this.toggleOperationMenu(e);
+  }
+
+  toggleOperationMenu = (e) => {
+    this.setState(
+      {isItemMenuShow: !this.state.isItemMenuShow},
+      () => {
+        if (this.state.isItemMenuShow) {
+          this.props.onFreezedItem();
+        } else {
+          this.props.onUnfreezedItem();
+        }
+      }
+    );
+  }
+
+  translateOperations = (item) => {
+    let translateResult = '';
+    switch(item) {
+      case 'Set to current':
+        translateResult = gettext('Set to current');
+        break;
+      case 'Delete':
+        translateResult = gettext('Delete');
+        break;
+      default:
+        break;
+    }
+
+    return translateResult;
+  }
+
+  render() {
+    const { item } = this.props;
+    let operations = [];
+    if (!item.is_current) {
+      operations.push('Set to current');
+    }
+    operations.push('Delete');
+
+    return (
+      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
+        <DropdownToggle 
+          tag="i"
+          className="sf-dropdown-toggle fa fa-ellipsis-v"
+          title={gettext('More Operations')}
+          data-toggle="dropdown" 
+          aria-expanded={this.state.isItemMenuShow}
+        />
+        <DropdownMenu className="mt-2 mr-2">
+          {operations.map((item, index )=> {
+            return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+OpMenu.propTypes = propTypes;
+
+export default OpMenu;

frontend/src/pages/sys-admin/side-panel.js

@@ -129,10 +129,14 @@ class SidePanel extends React.Component {
                 }
                 {isDefaultAdmin &&
                   <li className="nav-item">
-                    <a className='nav-link ellipsis' href={siteRoot + 'sys/notificationadmin/'}>
+                    <Link
+                      className={`nav-link ellipsis ${this.getActiveClass('notifications')}`}
+                      to={siteRoot + 'sys/notifications/'}
+                      onClick={() => this.props.tabItemClick('notifications')}
+                    >
                       <span className="sf2-icon-msgs" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('Notifications')}</span>
-                    </a>
+                    </Link>
                   </li>
                 }
                 {isDefaultAdmin &&

seahub/urls.py

@@ -669,6 +669,7 @@ urlpatterns = [
     url(r'^sys/desktop-devices/$', sysadmin_react_fake_view, name="sys_desktop_devices"),
     url(r'^sys/mobile-devices/$', sysadmin_react_fake_view, name="sys_mobile_devices"),
     url(r'^sys/device-errors/$', sysadmin_react_fake_view, name="sys_device_errors"),
+    url(r'^sys/notifications/$', sysadmin_react_fake_view, name="sys_notifications"),
     url(r'^sys/web-settings/$', sysadmin_react_fake_view, name="sys_web_settings"),
     url(r'^sys/all-libraries/$', sysadmin_react_fake_view, name="sys_all_libraries"),
     url(r'^sys/system-library/$', sysadmin_react_fake_view, name="sys_system_library"),