moment js + dropdown :3

This commit is contained in:
Roman Hergenreder 2020-06-15 00:37:29 +02:00
parent dfc9697ed8
commit 2f9115d24a
7 changed files with 3064 additions and 16 deletions

1501
admin/dist/main.js vendored

File diff suppressed because one or more lines are too long

@ -8329,6 +8329,11 @@
"minimist": "^1.2.5" "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": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "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/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0", "@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"moment": "^2.26.0",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "3.4.1" "react-scripts": "3.4.1"

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 * as React from "react";
import Icon from "./icon"; import Icon from "./icon";
import {useState} from "react";
import {getPeriodString} from "./global";
export default class Header extends React.Component { export default function Header(props) {
render() {
let notificationCount = 0; const parent = {
let notificationText = ""; 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 */} {/*Left navbar links */}
<ul className={"navbar-nav"}> <ul className={"navbar-nav"}>
@ -17,7 +49,7 @@ export default class Header extends React.Component {
</a> </a>
</li> </li>
<li className={"nav-item d-none d-sm-inline-block"}> <li className={"nav-item d-none d-sm-inline-block"}>
<a href={"#"} className={"nav-link"}> <a href={"#"} onClick={() => onChangeView("dashboard")} className={"nav-link"}>
Home Home
</a> </a>
</li> </li>
@ -39,22 +71,23 @@ export default class Header extends React.Component {
<ul className={"navbar-nav ml-auto"}> <ul className={"navbar-nav ml-auto"}>
{/* Notifications Dropdown Menu */} {/* Notifications Dropdown Menu */}
<li className={"nav-item dropdown"}> <li className={"nav-item dropdown"} onClick={() => showDropdown(!dropdownVisible)}>
<a href={"#"} className={"nav-link"} data-toggle={"dropdown"}> <a href={"#"} className={"nav-link"} data-toggle={"dropdown"}>
<Icon icon={"bell"} type={"far"} /> <Icon icon={"bell"} type={"far"} />
<span className={"badge badge-warning navbar-badge"}> <span className={"badge badge-warning navbar-badge"}>
{notificationCount} {notificationCount}
</span> </span>
</a> </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"}> <span className={"dropdown-item dropdown-header"}>
{notificationText} {notificationText}
</span> </span>
{notificationItems}
<div className={"dropdown-divider"} /> <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> </div>
</li> </li>
</ul> </ul>
</nav> </nav>
} )
} }

@ -67,9 +67,17 @@ class AdminDashboard extends React.Component {
return <b>Loading <Icon icon={"spinner"} /></b> 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 <> return <>
<Header /> <Header {...controlObj} />
<Sidebar currentView={this.state.currentView} notifications={this.state.notifications} onChangeView={this.onChangeView.bind(this)} showDialog={this.showDialog.bind(this)} api={this.api} /> <Sidebar {...controlObj} />
<div className={"content-wrapper p-2"}> <div className={"content-wrapper p-2"}>
<section className={"content"}> <section className={"content"}>
{this.createContent()} {this.createContent()}

1501
js/admin.min.js vendored

File diff suppressed because one or more lines are too long