From 3687e7218638b29bd9c7a94375f79e8e0934bf83 Mon Sep 17 00:00:00 2001 From: "v.pavlov" Date: Tue, 24 Jul 2018 16:28:50 +0300 Subject: [PATCH 1/2] Dashboard actions --- package-lock.json | 63 ++++------- package.json | 1 + src/ui/pages/dashboard/DashboardPage.tsx | 51 +-------- src/ui/pages/dashboard/MyDataPage.tsx | 2 + .../dashboard/c/DashboardActionsButton.tsx | 107 ++++++++++++++++++ 5 files changed, 135 insertions(+), 89 deletions(-) create mode 100644 src/ui/pages/dashboard/c/DashboardActionsButton.tsx diff --git a/package-lock.json b/package-lock.json index 2e0556d..012a099 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@babel/runtime": { - "version": "7.0.0-beta.53", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.53.tgz", - "integrity": "sha1-nfIq40gjzon3kAYFlLg+5XLixdI=", + "version": "7.0.0-beta.54", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.54.tgz", + "integrity": "sha1-Oeu0JyP+fKSz4bAOln6AE41Hyt8=", "requires": { "core-js": "^2.5.7", "regenerator-runtime": "^0.12.0" @@ -26,9 +26,9 @@ } }, "@material-ui/core": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-1.3.1.tgz", - "integrity": "sha512-h5pVkHgYrKExTdll4Y2Kmvkd5Hr4MxqEQLhRxzGTaXJ8RjOuRd+plfRk5r5ZauAdrIkKEsNcEt75VlEFX9aSGw==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-1.4.1.tgz", + "integrity": "sha512-czj0iqsAiX7J2tWfe1znmT7WOvhVw2WVrgrp6jImEiIZOOcZKsj5mM+Q9MIatK5YHIp1JazMmXpZJLkLWpVOyA==", "requires": { "@babel/runtime": "^7.0.0-beta.42", "@types/jss": "^9.5.3", @@ -40,6 +40,7 @@ "deepmerge": "^2.0.1", "dom-helpers": "^3.2.1", "hoist-non-react-statics": "^2.5.0", + "is-plain-object": "^2.0.4", "jss": "^9.3.3", "jss-camel-case": "^6.0.0", "jss-default-unit": "^8.0.2", @@ -49,10 +50,10 @@ "jss-vendor-prefixer": "^7.0.0", "keycode": "^2.1.9", "normalize-scroll-left": "^0.1.2", + "popper.js": "^1.0.0", "prop-types": "^15.6.0", "react-event-listener": "^0.6.0", "react-jss": "^8.1.0", - "react-popper": "^0.10.0", "react-transition-group": "^2.2.1", "recompose": "^0.27.0", "scroll": "^2.0.3", @@ -82,10 +83,15 @@ "recompose": "^0.26.0 || ^0.27.0" } }, + "@material-ui/lab": { + "version": "1.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-1.0.0-alpha.7.tgz", + "integrity": "sha512-iwTKLFUIsIrmZzymfnxGmmJv52UvGTLjsLUWxHkEaW16vLtORQi3C8I8wVcE0CdEceSux+pdSD8C8fsIlrzysg==" + }, "@types/jss": { - "version": "9.5.3", - "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.3.tgz", - "integrity": "sha512-RQWhcpOVyIhGryKpnUyZARwsgmp+tB82O7c75lC4Tjbmr3hPiCnM1wc+pJipVEOsikYXW0IHgeiQzmxQXbnAIA==", + "version": "9.5.4", + "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.4.tgz", + "integrity": "sha512-FAZoCrLjEb0GUgDP1I20748eIwyshM38cXJMFJ7hW2XbtSEo8RrSebgAH3jdXF4FV4NKzyD0TvXlf2MDE8yGrA==", "requires": { "csstype": "^2.0.0", "indefinite-observable": "^1.0.1" @@ -3012,9 +3018,9 @@ "dev": true }, "deepmerge": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.0.1.tgz", - "integrity": "sha512-VIPwiMJqJ13ZQfaCsIFnp5Me9tnjURiaIFxfz7EH0Ci0dTSQpZtSLrqOicXqEd/z2r+z+Klk9GzmnRsgpgbOsQ==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.1.1.tgz", + "integrity": "sha512-urQxA1smbLZ2cBbXbaYObM1dJ82aJ2H57A1C/Kklfh/ZN1bgH4G/n5KWhdNfOK11W98gqZfyYj7W4frJJRwA2w==" }, "define-properties": { "version": "1.1.2", @@ -12788,26 +12794,6 @@ "warning": "^3.0.0" } }, - "react-popper": { - "version": "0.10.4", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.10.4.tgz", - "integrity": "sha1-rypBXqIike3VBGeNev2opu4ylao=", - "requires": { - "popper.js": "^1.14.1", - "prop-types": "^15.6.1" - }, - "dependencies": { - "prop-types": { - "version": "15.6.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", - "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "requires": { - "loose-envify": "^1.3.1", - "object-assign": "^4.1.1" - } - } - } - }, "react-redux": { "version": "5.0.7", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz", @@ -12984,17 +12970,6 @@ "loose-envify": "^1.3.1", "prop-types": "^15.6.2", "react-lifecycles-compat": "^3.0.4" - }, - "dependencies": { - "prop-types": { - "version": "15.6.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", - "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "requires": { - "loose-envify": "^1.3.1", - "object-assign": "^4.1.1" - } - } } }, "react-virtualized": { diff --git a/package.json b/package.json index 27d38fd..168afe8 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ }, "dependencies": { "@material-ui/core": "^1.3.1", + "@material-ui/lab": "^1.0.0-alpha.7", "@material-ui/icons": "^1.1.0", "autosuggest-highlight": "^3.1.0", "axios": "^0.17.0", diff --git a/src/ui/pages/dashboard/DashboardPage.tsx b/src/ui/pages/dashboard/DashboardPage.tsx index d7ee896..8a175a9 100644 --- a/src/ui/pages/dashboard/DashboardPage.tsx +++ b/src/ui/pages/dashboard/DashboardPage.tsx @@ -1,30 +1,23 @@ import * as React from 'react'; import { connect } from 'react-redux'; -import Grid from '@material-ui/core/Grid'; import { bindActionCreators } from 'redux'; import { parse } from 'query-string'; import { filterCodeToUrl } from 'actions/filterCode'; -import { createPartner } from 'actions/partner'; -import { createDataset, listMyDatasets } from 'actions/dataset'; -import { createDescriptor, listMyDescriptors } from 'actions/descriptors'; -import { createDescriptorList, listMyDescriptorLists } from 'actions/descriptorList'; +import { listMyDatasets } from 'actions/dataset'; +import { listMyDescriptors } from 'actions/descriptors'; +import { listMyDescriptorLists } from 'actions/descriptorList'; import { setPageTitle } from 'actions/pageTitle'; import { Page } from 'model/common.model'; import { Dataset } from 'model/dataset.model'; import { Descriptor, DescriptorList } from 'model/descriptor.model'; -import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import { BaseMyDataPage } from './MyDataPage'; -import DashboardButton from './c/DashboardButton'; import MyDataTable from './c/MyDataTable'; +import DashboardActionsButton from './c/DashboardActionsButton'; interface IAdminDashProps extends React.ClassAttributes { - createDataset: any; - createPartner: any; - createDescriptor: any; - createDescriptorList: any; setPageTitle: (title: string) => void; title: string; history: any; @@ -59,7 +52,7 @@ class AdministrationDashboard extends BaseMyDataPage { public render() { - const {tab, datasets, descriptors, descriptorLists, createPartner, createDescriptor, createDescriptorList, filter, filterCode} = this.props; + const {tab, datasets, descriptors, descriptorLists, filter, filterCode} = this.props; // console.log('Dash', tab, filterCode, filter); @@ -79,37 +72,9 @@ class AdministrationDashboard extends BaseMyDataPage { return (
- -
- - - - - - - - - - - - - - - - - - - - - - - -
- +
); } @@ -130,10 +95,6 @@ const mapStateToProps = (state, ownProps) => ({ }); const mapDispatchToProps = (dispatch) => bindActionCreators({ - createPartner, - createDataset, - createDescriptor, - createDescriptorList, listDatasets: listMyDatasets, listDescriptors: listMyDescriptors, listDescriptorLists: listMyDescriptorLists, diff --git a/src/ui/pages/dashboard/MyDataPage.tsx b/src/ui/pages/dashboard/MyDataPage.tsx index a48b9ef..fee6684 100644 --- a/src/ui/pages/dashboard/MyDataPage.tsx +++ b/src/ui/pages/dashboard/MyDataPage.tsx @@ -17,6 +17,7 @@ import {setPageTitle} from 'actions/pageTitle'; import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import BackButton from 'ui/common/buttons/BackButton'; import MyDataTable from './c/MyDataTable'; +import DashboardActionsButton from './c/DashboardActionsButton'; interface IDataPublishedContainerProps extends React.ClassAttributes { title: string; @@ -185,6 +186,7 @@ class DP extends BaseMyDataPage { }/> + ); } diff --git a/src/ui/pages/dashboard/c/DashboardActionsButton.tsx b/src/ui/pages/dashboard/c/DashboardActionsButton.tsx new file mode 100644 index 0000000..9c022aa --- /dev/null +++ b/src/ui/pages/dashboard/c/DashboardActionsButton.tsx @@ -0,0 +1,107 @@ +import * as React from 'react'; + +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; + +import {withStyles} from '@material-ui/core/styles'; +import SpeedDial from '@material-ui/lab/SpeedDial'; +import SpeedDialAction from '@material-ui/lab/SpeedDialAction'; +import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'; + +import AddIcon from '@material-ui/icons/Add'; +import DescriptionIcon from '@material-ui/icons/Description'; +import PersonAddIcon from '@material-ui/icons/PersonAdd'; +import ListIcon from '@material-ui/icons/List'; + +import {createPartner} from '../../../../actions/partner'; +import {createDescriptorList} from '../../../../actions/descriptorList'; +import {createDataset} from '../../../../actions/dataset'; +import {createDescriptor} from '../../../../actions/descriptors'; + + +const styles = (theme) => ({ + speedDial: { + position: 'fixed' as 'fixed', + bottom: theme.spacing.unit * 2, + right: theme.spacing.unit * 3, + }, +}); + +interface IDashboardActionsButtonProps extends React.ClassAttributes { + createDataset: any; + createPartner: any; + createDescriptor: any; + createDescriptorList: any; + classes: any; +} + +class DashboardActionsButton extends React.Component { + + private handleOpen = () => { + this.setState({ + open: true, + }); + } + private handleClose = () => { + this.setState({ + open: false, + }); + } + + constructor(props) { + super(props); + this.state = { + open: false, + }; + } + + public render() { + const {classes, createDataset, createPartner, createDescriptor, createDescriptorList} = this.props; + const {open} = this.state; + + return ( + }/> } + onBlur={ this.handleClose } + onClick={ createDataset } + onMouseEnter={ this.handleOpen } + onMouseLeave={ this.handleClose } + open={ open } + > + } + tooltipTitle={
Create Partner
} + onClick={ createPartner } + /> + } + tooltipTitle={
Create Descriptor
} + onClick={ createDescriptor } + /> + } + tooltipTitle={
Create Descriptor list
} + onClick={ createDescriptorList } + /> + + ); + } +} + +const mapStateToProps = (state, ownProps) => ({ + // null +}); + +const mapDispatchToProps = (dispatch) => bindActionCreators({ + createPartner, + createDataset, + createDescriptor, + createDescriptorList, +}, dispatch); + +export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(DashboardActionsButton)); -- GitLab From a1ba72fa1a3c038a0d6a6e9dcbeec7587ca01b08 Mon Sep 17 00:00:00 2001 From: Matija Obreza Date: Tue, 24 Jul 2018 16:26:37 +0200 Subject: [PATCH 2/2] Default FAB action depends on selected tab --- src/ui/pages/dashboard/DashboardPage.tsx | 2 +- src/ui/pages/dashboard/MyDataPage.tsx | 2 +- .../dashboard/c/DashboardActionsButton.tsx | 79 +++++++++++++------ 3 files changed, 57 insertions(+), 26 deletions(-) diff --git a/src/ui/pages/dashboard/DashboardPage.tsx b/src/ui/pages/dashboard/DashboardPage.tsx index 8a175a9..73a8886 100644 --- a/src/ui/pages/dashboard/DashboardPage.tsx +++ b/src/ui/pages/dashboard/DashboardPage.tsx @@ -74,7 +74,7 @@ class AdministrationDashboard extends BaseMyDataPage {
- +
); } diff --git a/src/ui/pages/dashboard/MyDataPage.tsx b/src/ui/pages/dashboard/MyDataPage.tsx index fee6684..8d5bc17 100644 --- a/src/ui/pages/dashboard/MyDataPage.tsx +++ b/src/ui/pages/dashboard/MyDataPage.tsx @@ -186,7 +186,7 @@ class DP extends BaseMyDataPage { }/> - + ); } diff --git a/src/ui/pages/dashboard/c/DashboardActionsButton.tsx b/src/ui/pages/dashboard/c/DashboardActionsButton.tsx index 9c022aa..efea7e6 100644 --- a/src/ui/pages/dashboard/c/DashboardActionsButton.tsx +++ b/src/ui/pages/dashboard/c/DashboardActionsButton.tsx @@ -9,14 +9,16 @@ import SpeedDialAction from '@material-ui/lab/SpeedDialAction'; import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'; import AddIcon from '@material-ui/icons/Add'; -import DescriptionIcon from '@material-ui/icons/Description'; -import PersonAddIcon from '@material-ui/icons/PersonAdd'; -import ListIcon from '@material-ui/icons/List'; +import DatasetIcon from '@material-ui/icons/PlaylistAdd'; +import DescriptorIcon from '@material-ui/icons/Description'; +import PartnerIcon from '@material-ui/icons/PersonAdd'; +import DescriptorListIcon from '@material-ui/icons/List'; +import Authorize from 'ui/common/authorized/Authorize'; -import {createPartner} from '../../../../actions/partner'; -import {createDescriptorList} from '../../../../actions/descriptorList'; -import {createDataset} from '../../../../actions/dataset'; -import {createDescriptor} from '../../../../actions/descriptors'; +import {createPartner} from 'actions/partner'; +import {createDescriptorList} from 'actions/descriptorList'; +import {createDataset} from 'actions/dataset'; +import {createDescriptor} from 'actions/descriptors'; const styles = (theme) => ({ @@ -28,6 +30,7 @@ const styles = (theme) => ({ }); interface IDashboardActionsButtonProps extends React.ClassAttributes { + tab: string; createDataset: any; createPartner: any; createDescriptor: any; @@ -42,6 +45,7 @@ class DashboardActionsButton extends React.Component { this.setState({ open: false, @@ -56,38 +60,65 @@ class DashboardActionsButton extends React.Component }/> } onBlur={ this.handleClose } - onClick={ createDataset } + onClick={ defaultAction.action } onMouseEnter={ this.handleOpen } onMouseLeave={ this.handleClose } open={ open } > - } - tooltipTitle={
Create Partner
} - onClick={ createPartner } - /> - } + tooltipTitle={ Create Dataset } + onClick={ createDataset } + /> } + { tab !== 'descriptors' && } - tooltipTitle={
Create Descriptor
} + icon={ } + tooltipTitle={ Create Descriptor } onClick={ createDescriptor } - /> - } + { tab !== 'descriptorlists' && } - tooltipTitle={
Create Descriptor list
} + icon={ } + tooltipTitle={ Create Descriptor list } onClick={ createDescriptorList } - /> + /> } + + } + tooltipTitle={ Create Partner } + onClick={ createPartner } + /> + ); } -- GitLab