Allow inbox notification delete #1157

metasfresh · Sep 1, 2017 · 730981c · 730981c
1 parent 52d3f55
commit 730981c
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/src/actions/AppActions.js b/src/actions/AppActions.js
@@ -132,6 +132,10 @@ export function markAsRead(id) {
     return axios.put(config.API_URL + '/notifications/' + id + '/read');
 }
 
+export function deleteUserNotification(id) {
+    return axios.delete(config.API_URL + `/notifications?ids=${id}`);
+}
+
 export function getAttributesInstance(
     attrType, tmpId, docType, docId, tabId, rowId, fieldName, entity
 ) {

diff --git a/src/assets/css/inbox.css b/src/assets/css/inbox.css
@@ -129,3 +129,13 @@
     color: $brand-font-color-weak;
     padding-top: .3rem;
 }
+
+.inbox-item-delete {
+    color: $brand-danger-color !important;
+    text-decoration: none;
+    margin-right: 1em;
+}
+
+.inbox-item-delete:hover {
+    text-decoration: underline;
+}
diff --git a/src/components/inbox/Inbox.js b/src/components/inbox/Inbox.js
@@ -10,7 +10,10 @@ import InboxItem from './InboxItem';
 
 import {
     markAllAsRead,
-    markAsRead
+    markAsRead,
+    getNotifications,
+    getNotificationsSuccess,
+    deleteUserNotification
 } from '../../actions/AppActions';
 
 class Inbox extends Component {
@@ -56,6 +59,22 @@ class Inbox extends Component {
         close && close();
     }
 
+    handleDelete = (e, item) => {
+        const { dispatch } = this.props;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        deleteUserNotification(item.id).then( () => {
+            getNotifications().then(response => {
+                dispatch(getNotificationsSuccess(
+                    response.data.notifications,
+                    response.data.unreadCount
+                ));
+            });
+        });
+    }
+
     componentDidUpdate() {
         const {open} = this.props;
         const inboxWrapper =
@@ -128,6 +147,7 @@ class Inbox extends Component {
                                     item={item}
                                     close={close}
                                     onClick={() => this.handleClick(item)}
+                                    onDelete={(e) => this.handleDelete(e, item)}
                                 />
                             )}
                             {inbox && inbox.notifications.length == 0 &&

diff --git a/src/components/inbox/InboxItem.js b/src/components/inbox/InboxItem.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Moment from 'moment';
+import counterpart from 'counterpart';
 
 class InboxItem extends Component {
     constructor(props){
@@ -19,7 +20,7 @@ class InboxItem extends Component {
         document.getElementsByClassName('js-inbox-wrapper')[0].focus();
     }
 
-     handleKeyDown = (e) => {
+    handleKeyDown = (e) => {
         const {close} = this.props;
         switch(e.key){
             case 'ArrowDown':
@@ -46,7 +47,7 @@ class InboxItem extends Component {
     }
 
     render() {
-        const {item, onClick} = this.props;
+        const {item, onClick, onDelete} = this.props;
         return (
             <div
                 onClick={onClick}
@@ -75,15 +76,25 @@ class InboxItem extends Component {
                         {item.message}
                     </div>
                     <div className="inbox-item-footer">
-                        <span
+                        <div
                             title={
                                 Moment(item.timestamp)
                                     .format('DD.MM.YYYY HH:mm:ss')
                             }
                         >
                             {Moment(item.timestamp).fromNow()}
-                        </span>
-                        <span>Notification</span>
+                        </div>
+                        <div>
+                            <a
+                                href="javascript:void(0)"
+                                className="inbox-item-delete"
+                                onClick={onDelete}
+                            >
+                                {counterpart.translate('window.Delete.caption')}
+                            </a>
+
+                            <span>Notification</span>
+                        </div>
                     </div>
                 </div>
             </div>