sysadmin reconstruct notification page (#4089)

* sysadmin reconstruct notification page

* [system admin] notifications: fixup & improvement

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

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;