added notification drop down list and notification page

Merge branch 'PR78' into develop
2021-11-06 14:16:37 +08:00 · 2021-11-06 14:16:37 +08:00 · 4329569bb1
parent f9fb61035d 4d91e63dcb
commit 4329569bb1
3 changed files with 113 additions and 58 deletions
--- a/web/src/components/MyEMS/Notification/Notification.js
+++ b/web/src/components/MyEMS/Notification/Notification.js
@ -62,7 +62,7 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => {

      let isResponseOK = false;
      if (!fetchSuccess) { 
-        fetch(APIBaseURL + '/notifications?' + 
+        fetch(APIBaseURL + '/webmessagesnew?' +
        'startdatetime=' + startDatetime.format('YYYY-MM-DDTHH:mm:ss') +
        '&enddatetime=' + endDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
          method: 'GET',
@ -90,7 +90,8 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => {
                let notification = {}
                notification['id'] = json[index]['id'];
                notification['subject'] = json[index]['subject'];
-                notification['created_datetime'] = json[index]['created_datetime']; 
+                notification['created_datetime'] = moment(parseInt(json[index]['created_datetime']))
+                    .format("YYYY-MM-DD HH:mm:ss");
                notification['message'] = json[index]['message'];
                notification['status'] = json[index]['status'];
                notification['url'] = json[index]['url'];
@ -250,7 +251,7 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => {
  const handleRead = (id, ) => {
    console.log('Mark As Read: ', id)
    let isResponseOK = false;
-    fetch(APIBaseURL + '/notifications/' + id, {
+    fetch(APIBaseURL + '/webmessages/' + id, {
      method: 'PUT',
      headers: {
        "Content-type": "application/json",
@ -259,7 +260,8 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => {
      },
      body: JSON.stringify({
        "data": {
-          "status": 'read'
+          "status": 'acknowledged',
+          "reply": 'ok'
        }
      }),
    }).then(response => {
--- a/web/src/components/navbar/NotificationDropdown.js
+++ b/web/src/components/navbar/NotificationDropdown.js
@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Card, Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import ListGroup from 'reactstrap/es/ListGroup';
@ -11,14 +11,70 @@ import useFakeFetch from '../../hooks/useFakeFetch';
 import FalconCardHeader from '../common/FalconCardHeader';
 import Notification from '../notification/Notification';
 import { withTranslation } from 'react-i18next';
+import { APIBaseURL } from "../../config";
+import moment from 'moment';
+import { toast } from "react-toastify";
+import { getCookieValue } from '../../helpers/utils';

 const NotificationDropdown = ({ t }) => {
  // State
-  const { data: newNotifications, setData: setNewNotifications } = useFakeFetch(rawNewNotifications);
-  const { data: earlierNotifications, setData: setEarlierNotifications } = useFakeFetch(rawEarlierNotifications);
+  const [rawNewNotificationschild, setRawNewNotificationschild] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [isAllRead, setIsAllRead] = useState(false);

+  useEffect(() => {
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/webmessagesnew', {
+      method: 'GET',
+      headers: {
+        "Content-type": "application/json",
+        "User-UUID": getCookieValue('user_uuid'),
+        "Token": getCookieValue('token')
+      },
+      body: null,
+
+    }).then(response => {
+      console.log(response);
+      if (response.ok) {
+        isResponseOK = true;
+      }
+      return response.json();
+      }).then(json => {
+        console.log(json)
+      if (isResponseOK) {
+        let NewnotificationList = []
+        if (json.length > 0) {
+              json.forEach((currentValue, index) => {
+                let notification = {}
+                notification['id'] = json[index]['id'];
+                notification['status'] = json[index]['status'];
+                notification['subject'] = json[index]['subject']
+                notification['message'] = json[index]['message'];
+                notification['created_datetime'] = moment(parseInt(json[index]['created_datetime']))
+                    .format("YYYY-MM-DD HH:mm:ss");
+                if (NewnotificationList.length > 3 ){
+                    return true
+                }
+                if (notification['message'].length > 40){
+                  notification['message'] = notification['message'].substring(0,30) + "...";
+                }
+                if (notification["status"] === "new"){
+                  NewnotificationList.push(notification);
+                }
+
+              });
+            }
+        setRawNewNotificationschild(NewnotificationList);
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+
+  }, [t,]);
+  console.log("test");
+  console.log(rawNewNotificationschild);
+
+
  // Handler
  const handleToggle = e => {
    e.preventDefault();
@ -27,30 +83,43 @@ const NotificationDropdown = ({ t }) => {

  const markAsRead = e => {
    e.preventDefault();
-    const updatedNewNotifications = newNotifications.map(notification => {
-      if (notification.hasOwnProperty('unread')) {
-        return {
-          ...notification,
-          unread: false
-        };
+    rawNewNotificationschild.map((notification,index) => {
+      console.log('Mark As Read: ', notification["id"])
+      let isResponseOK = false;
+      fetch(APIBaseURL + '/webmessages/' + notification["id"], {
+      method: 'PUT',
+      headers: {
+        "Content-type": "application/json",
+        "User-UUID": getCookieValue('user_uuid'),
+        "Token": getCookieValue('token')
+      },
+      body: JSON.stringify({
+        "data": {
+          "status": 'acknowledged',
+          "reply": 'ok'
        }
-      return notification;
-    });
-    const updatedEarlierNotifications = earlierNotifications.map(notification => {
-      if (notification.hasOwnProperty('unread')) {
-        return {
-          ...notification,
-          unread: false
-        };
+      }),
+      }).then(response => {
+      if (response.ok) {
+        isResponseOK = true;
+        return null;
+      } else {
+        return response.json();
      }
-      setIsAllRead(true);
-      return notification;
-    });
+    }).then(json => {
+      console.log(isResponseOK);
+      if (isResponseOK) {

-    setNewNotifications(updatedNewNotifications);
-    setEarlierNotifications(updatedEarlierNotifications);
+      } else {
+        toast.error(json.description)
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+  });
  };

+
  return (
    <Dropdown
      nav
@ -83,19 +152,13 @@ const NotificationDropdown = ({ t }) => {
          </FalconCardHeader>
          <ListGroup flush className="font-weight-normal fs--1">
            <div className="list-group-title">{t('notification_NEW')}</div>
-            {isIterableArray(newNotifications) &&
-              newNotifications.map((notification, index) => (
-                <ListGroupItem key={index} onClick={handleToggle}>
-                  <Notification {...notification} flush />
-                </ListGroupItem>
-              ))}
-            <div className="list-group-title">{t('notification_EARLIER')}</div>
-            {isIterableArray(earlierNotifications) &&
-              earlierNotifications.map((notification, index) => (
+            {isIterableArray(rawNewNotificationschild) &&
+              rawNewNotificationschild.map((notification, index) => (
                <ListGroupItem key={index} onClick={handleToggle}>
                  <Notification {...notification} flush />
                </ListGroupItem>
              ))}
+
          </ListGroup>
          <div className="card-footer text-center border-top-0" onClick={handleToggle}>
            <Link className="card-link d-block" to="/notification">
--- a/web/src/components/notification/Notification.js
+++ b/web/src/components/notification/Notification.js
@ -5,38 +5,28 @@ import { Link } from 'react-router-dom';
 import Avatar from '../common/Avatar';
 import createMarkup from '../../helpers/createMarkup';

-const Notification = ({ to, avatar, time, className, unread, flush, emoji, children }) => (
-  <Link className={classNames('notification', { 'bg-200': unread, 'notification-flush': flush }, className)} to={to}>
-    {avatar && (
-      <div className="notification-avatar">
-        <Avatar {...avatar} className="mr-3" />
-      </div>
-    )}
+const Notification = ({ created_datetime, id, status, flush, message,subject}) => (
+  <Link className={classNames('notification', { 'bg-200': status, 'notification-flush': flush }, id)}
+        to="/notification">
    <div className="notification-body">
-      <p className={emoji ? 'mb-1' : 'mb-0'} dangerouslySetInnerHTML={createMarkup(children)} />
+      <h5>{subject}</h5><p>{status}</p>
+      <p className={'mb-0'} dangerouslySetInnerHTML={createMarkup(message)} />
      <span className="notification-time">
-        {emoji && (
-          <span className="mr-1" role="img" aria-label="Emoji">
-            {emoji}
-          </span>
-        )}
-        {time}
+        {created_datetime}
      </span>
    </div>
  </Link>
 );

 Notification.propTypes = {
-  to: PropTypes.string.isRequired,
-  avatar: PropTypes.shape(Avatar.propTypes),
-  time: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  unread: PropTypes.bool,
+  created_datetime: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  status: PropTypes.string,
+  subject: PropTypes.string,
  flush: PropTypes.bool,
-  emoji: PropTypes.string,
-  children: PropTypes.node
+  message: PropTypes.node
 };

-Notification.defaultProps = { unread: false, flush: false };
+Notification.defaultProps = { status: "acknowledged", flush: false };

 export default Notification;