moment js + dropdown :3
This commit is contained in:
parent
dfc9697ed8
commit
2f9115d24a
1501
admin/dist/main.js
vendored
1501
admin/dist/main.js
vendored
File diff suppressed because one or more lines are too long
5
admin/package-lock.json
generated
5
admin/package-lock.json
generated
@ -8329,6 +8329,11 @@
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.26.0",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
|
||||
"integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||
|
@ -6,6 +6,7 @@
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.5.0",
|
||||
"@testing-library/user-event": "^7.2.1",
|
||||
"moment": "^2.26.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "3.4.1"
|
||||
|
7
admin/src/global.js
Normal file
7
admin/src/global.js
Normal file
@ -0,0 +1,7 @@
|
||||
import moment from 'moment';
|
||||
|
||||
function getPeriodString(date) {
|
||||
return moment(date).fromNow();
|
||||
}
|
||||
|
||||
export { getPeriodString };
|
@ -1,13 +1,45 @@
|
||||
import * as React from "react";
|
||||
import Icon from "./icon";
|
||||
import {useState} from "react";
|
||||
import {getPeriodString} from "./global";
|
||||
|
||||
export default class Header extends React.Component {
|
||||
render() {
|
||||
export default function Header(props) {
|
||||
|
||||
let notificationCount = 0;
|
||||
let notificationText = "";
|
||||
const parent = {
|
||||
onChangeView: props.onChangeView || function() {},
|
||||
notifications: props.notifications || { },
|
||||
};
|
||||
|
||||
return <nav className={"main-header navbar navbar-expand navbar-white navbar-light"}>
|
||||
function onChangeView(view) {
|
||||
parent.onChangeView(view);
|
||||
}
|
||||
|
||||
const [dropdownVisible, showDropdown] = useState(false);
|
||||
const mailIcon = <Icon icon={"envelope"} type={"fas"} />;
|
||||
|
||||
let notificationCount = Object.keys(parent.notifications).length;
|
||||
let notificationText = "No new notifications";
|
||||
|
||||
if(notificationCount === 1) {
|
||||
notificationText = "1 new notification";
|
||||
} else if(notificationCount > 1) {
|
||||
notificationText = notificationCount + " new notification";
|
||||
}
|
||||
|
||||
let notificationItems = [];
|
||||
for (let uid in parent.notifications) {
|
||||
const notification = parent.notifications[uid];
|
||||
const createdAt = getPeriodString(notification.created_at);
|
||||
notificationItems.push(
|
||||
<a href="#" className={"dropdown-item"} key={"notification-" + uid}>
|
||||
{mailIcon}
|
||||
<span className={"ml-2"}>{notification.title}</span>
|
||||
<span className={"float-right text-muted text-sm"}>{createdAt}</span>
|
||||
</a>);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className={"main-header navbar navbar-expand navbar-white navbar-light"}>
|
||||
|
||||
{/*Left navbar links */}
|
||||
<ul className={"navbar-nav"}>
|
||||
@ -17,7 +49,7 @@ export default class Header extends React.Component {
|
||||
</a>
|
||||
</li>
|
||||
<li className={"nav-item d-none d-sm-inline-block"}>
|
||||
<a href={"#"} className={"nav-link"}>
|
||||
<a href={"#"} onClick={() => onChangeView("dashboard")} className={"nav-link"}>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
@ -39,22 +71,23 @@ export default class Header extends React.Component {
|
||||
<ul className={"navbar-nav ml-auto"}>
|
||||
|
||||
{/* Notifications Dropdown Menu */}
|
||||
<li className={"nav-item dropdown"}>
|
||||
<li className={"nav-item dropdown"} onClick={() => showDropdown(!dropdownVisible)}>
|
||||
<a href={"#"} className={"nav-link"} data-toggle={"dropdown"}>
|
||||
<Icon icon={"bell"} type={"far"} />
|
||||
<span className={"badge badge-warning navbar-badge"}>
|
||||
{notificationCount}
|
||||
</span>
|
||||
</a>
|
||||
<div className={"dropdown-menu dropdown-menu-lg dropdown-menu-right"}>
|
||||
<div className={"dropdown-menu dropdown-menu-lg dropdown-menu-right " + (dropdownVisible ? " show" : "")}>
|
||||
<span className={"dropdown-item dropdown-header"}>
|
||||
{notificationText}
|
||||
</span>
|
||||
{notificationItems}
|
||||
<div className={"dropdown-divider"} />
|
||||
<a href={"#"} className={"dropdown-item dropdown-footer"}>See All Notifications</a>
|
||||
<a href={"#"} onClick={() => onChangeView("dashboard")} className={"dropdown-item dropdown-footer"}>See All Notifications</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
}
|
||||
)
|
||||
}
|
@ -67,9 +67,17 @@ class AdminDashboard extends React.Component {
|
||||
return <b>Loading… <Icon icon={"spinner"} /></b>
|
||||
}
|
||||
|
||||
const controlObj = {
|
||||
notifications: this.state.notifications,
|
||||
currentView: this.state.currentView,
|
||||
onChangeView: this.onChangeView.bind(this),
|
||||
showDialog: this.showDialog.bind(this),
|
||||
api: this.api
|
||||
};
|
||||
|
||||
return <>
|
||||
<Header />
|
||||
<Sidebar currentView={this.state.currentView} notifications={this.state.notifications} onChangeView={this.onChangeView.bind(this)} showDialog={this.showDialog.bind(this)} api={this.api} />
|
||||
<Header {...controlObj} />
|
||||
<Sidebar {...controlObj} />
|
||||
<div className={"content-wrapper p-2"}>
|
||||
<section className={"content"}>
|
||||
{this.createContent()}
|
||||
|
1501
js/admin.min.js
vendored
1501
js/admin.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user