From 6fa01f07c035dd14563e40637d7844a8fed403db Mon Sep 17 00:00:00 2001 From: Matija Obreza Date: Fri, 22 Dec 2017 15:07:43 +0100 Subject: [PATCH 1/2] Reorganized React components - moved ui/common/login to ui/pages (it's not a reusable component) - all /dashboard/* are wrapped with a simple DashboardWrapper component - moved data-in-preparation and data-published to ui/pages/dashboard/ - removed obsolete data-publisher component - Moved ui/header and ui/footer to ui/layout/ (only used by App.tsx) - Moved ui/content-header/* to ui/common/heading/ --- config/webpack-base.config.js | 1 - config/webpack-production.config.js | 2 + src/ui/App.tsx | 4 +- .../heading}/ContentHeader.tsx | 0 .../heading}/ContentHeaderWithButton.tsx | 0 src/ui/content/index.tsx | 13 --- src/ui/{footer => layout/Footer}/index.tsx | 0 .../Header/LeftMenu.tsx} | 0 .../Header}/UserMenuComponent.tsx | 7 +- src/ui/{header => layout/Header}/index.tsx | 8 +- .../DashboardButton.tsx | 0 src/ui/pages/dashboard/DashboardWrapper.tsx | 40 +++++++ .../data-in-preparation/DataInPreparation.tsx | 7 +- .../data-in-preparation/index.tsx | 0 .../data-published/DataPublished.tsx | 7 +- .../{ => dashboard}/data-published/index.tsx | 0 .../index.tsx | 7 +- src/ui/pages/data-publisher/index.tsx | 48 -------- .../data-publisher/main-section/index.tsx | 88 --------------- .../data-publisher/tabs/DataInPreparation.tsx | 64 ----------- .../data-publisher/tabs/DataPublished.tsx | 33 ------ .../tabs/data-preparation-item/index.tsx | 105 ------------------ .../data-publisher/top-section/index.tsx | 49 -------- src/ui/pages/dataset/dataset-detail/index.tsx | 2 +- src/ui/pages/dataset/datset-list/index.tsx | 2 +- src/ui/pages/descriptor/descriptors/index.tsx | 2 +- src/ui/{common => pages}/login/Login.tsx | 0 src/ui/{common => pages}/login/index.tsx | 0 src/ui/pages/partner/partner-list/index.tsx | 2 +- src/ui/routes.tsx | 20 ++-- 30 files changed, 72 insertions(+), 439 deletions(-) rename src/ui/{content-header => common/heading}/ContentHeader.tsx (100%) rename src/ui/{content-header => common/heading}/ContentHeaderWithButton.tsx (100%) delete mode 100644 src/ui/content/index.tsx rename src/ui/{footer => layout/Footer}/index.tsx (100%) rename src/ui/{header/leftMenu.tsx => layout/Header/LeftMenu.tsx} (100%) rename src/ui/{header => layout/Header}/UserMenuComponent.tsx (92%) rename src/ui/{header => layout/Header}/index.tsx (95%) rename src/ui/pages/{administrator-dashboard => dashboard}/DashboardButton.tsx (100%) create mode 100644 src/ui/pages/dashboard/DashboardWrapper.tsx rename src/ui/pages/{ => dashboard}/data-in-preparation/DataInPreparation.tsx (86%) rename src/ui/pages/{ => dashboard}/data-in-preparation/index.tsx (100%) rename src/ui/pages/{ => dashboard}/data-published/DataPublished.tsx (86%) rename src/ui/pages/{ => dashboard}/data-published/index.tsx (100%) rename src/ui/pages/{administrator-dashboard => dashboard}/index.tsx (95%) delete mode 100644 src/ui/pages/data-publisher/index.tsx delete mode 100644 src/ui/pages/data-publisher/main-section/index.tsx delete mode 100644 src/ui/pages/data-publisher/tabs/DataInPreparation.tsx delete mode 100644 src/ui/pages/data-publisher/tabs/DataPublished.tsx delete mode 100644 src/ui/pages/data-publisher/tabs/data-preparation-item/index.tsx delete mode 100644 src/ui/pages/data-publisher/top-section/index.tsx rename src/ui/{common => pages}/login/Login.tsx (100%) rename src/ui/{common => pages}/login/index.tsx (100%) diff --git a/config/webpack-base.config.js b/config/webpack-base.config.js index d3e19d5..1fccc7d 100644 --- a/config/webpack-base.config.js +++ b/config/webpack-base.config.js @@ -187,7 +187,6 @@ module.exports = { }, plugins: [ - new webpack.NoEmitOnErrorsPlugin(), new HtmlWebpackExcludeAssetsPlugin(), new webpack.DefinePlugin({ diff --git a/config/webpack-production.config.js b/config/webpack-production.config.js index 4a5995b..6da9443 100644 --- a/config/webpack-production.config.js +++ b/config/webpack-production.config.js @@ -15,6 +15,8 @@ module.exports = webpackMerge(commonConfig, { }, plugins: [ + new webpack.NoEmitOnErrorsPlugin(), + new webpack.LoaderOptionsPlugin({ minimize: true, debug: false diff --git a/src/ui/App.tsx b/src/ui/App.tsx index ceb7ab8..2374ad4 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -11,8 +11,8 @@ import {serverInfoRequest} from 'actions/serverInfo'; import {setAppMounted} from 'actions/appMounted'; import theme from './theme'; -import Header from './header'; -import Footer from './footer/index'; +import Header from './layout/Header'; +import Footer from './layout/Footer'; const ssr: boolean = process.env.SSR === 'true'; const token: string = typeof window !== 'undefined' && cookies.get('access_token'); diff --git a/src/ui/content-header/ContentHeader.tsx b/src/ui/common/heading/ContentHeader.tsx similarity index 100% rename from src/ui/content-header/ContentHeader.tsx rename to src/ui/common/heading/ContentHeader.tsx diff --git a/src/ui/content-header/ContentHeaderWithButton.tsx b/src/ui/common/heading/ContentHeaderWithButton.tsx similarity index 100% rename from src/ui/content-header/ContentHeaderWithButton.tsx rename to src/ui/common/heading/ContentHeaderWithButton.tsx diff --git a/src/ui/content/index.tsx b/src/ui/content/index.tsx deleted file mode 100644 index 0a7517e..0000000 --- a/src/ui/content/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; - -interface IContainerProps extends React.Props { - routes: JSX.Element; -}; - -export default function Content({routes}: IContainerProps) { - return ( -
- { routes } -
- ); -} diff --git a/src/ui/footer/index.tsx b/src/ui/layout/Footer/index.tsx similarity index 100% rename from src/ui/footer/index.tsx rename to src/ui/layout/Footer/index.tsx diff --git a/src/ui/header/leftMenu.tsx b/src/ui/layout/Header/LeftMenu.tsx similarity index 100% rename from src/ui/header/leftMenu.tsx rename to src/ui/layout/Header/LeftMenu.tsx diff --git a/src/ui/header/UserMenuComponent.tsx b/src/ui/layout/Header/UserMenuComponent.tsx similarity index 92% rename from src/ui/header/UserMenuComponent.tsx rename to src/ui/layout/Header/UserMenuComponent.tsx index 87a4f1f..7331c81 100644 --- a/src/ui/header/UserMenuComponent.tsx +++ b/src/ui/layout/Header/UserMenuComponent.tsx @@ -8,6 +8,7 @@ interface IUserMenuComponentProps extends React.ClassAttributes { classes: any; logoutRequest: () => Promise; router: any; + userName: string; } const styles = { @@ -45,7 +46,7 @@ class UserMenuComponent extends React.Component { public render() { - const { classes, logoutRequest } = this.props; + const { classes, logoutRequest, userName } = this.props; return (
{ open={ this.state.open } onClose={ this.handleRequestClose } > - Administrator Dashboard + My Dashboard Logout
diff --git a/src/ui/header/index.tsx b/src/ui/layout/Header/index.tsx similarity index 95% rename from src/ui/header/index.tsx rename to src/ui/layout/Header/index.tsx index fa78316..3aea6d2 100644 --- a/src/ui/header/index.tsx +++ b/src/ui/layout/Header/index.tsx @@ -1,16 +1,17 @@ import * as React from 'react'; import { connect } from 'react-redux'; +import { Link } from 'react-router'; import AppBar from 'material-ui/AppBar'; import { withStyles } from 'material-ui/styles'; import Toolbar from 'material-ui/Toolbar'; import IconButton from 'material-ui/IconButton'; import MenuIcon from 'material-ui-icons/Menu'; -import LeftMenu from './leftMenu'; -import { Link } from 'react-router'; import {ROLE_ADMINISTRATOR, ROLE_CLIENT, ROLE_USER} from 'constants/userRoles'; import {saveCookies} from 'utilities'; + import UserMenuComponent from './UserMenuComponent'; +import LeftMenu from './LeftMenu'; const styleSheet = { root: { @@ -105,8 +106,9 @@ class Header extends React.Component { } private renderLogin = (roles: string[]) => { + console.log(this.props.login); if (this.hasRole(roles)) { - return ; + return ; } else { return Login; } diff --git a/src/ui/pages/administrator-dashboard/DashboardButton.tsx b/src/ui/pages/dashboard/DashboardButton.tsx similarity index 100% rename from src/ui/pages/administrator-dashboard/DashboardButton.tsx rename to src/ui/pages/dashboard/DashboardButton.tsx diff --git a/src/ui/pages/dashboard/DashboardWrapper.tsx b/src/ui/pages/dashboard/DashboardWrapper.tsx new file mode 100644 index 0000000..c9feda7 --- /dev/null +++ b/src/ui/pages/dashboard/DashboardWrapper.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import {withStyles} from 'material-ui/styles'; + +import DataTabs from 'ui/common/administration/tabs'; +import ContentHeader from 'ui/common/heading/ContentHeader'; + +const styles = { + root: { + width: '100%', + }, + content: { + backgroundColor: '#D4D2C6', + }, + bigNavButtonWrapper: { + padding: '10px 10px 10px 10px', + }, + bigNavButton: { + width: '100%', + backgroundColor: '#88BC40', + color: '#fff', + }, +}; + +class DashboardWrapper extends React.Component { + + public render() { + const { children } = this.props; + + return ( +
+ + { children } +
+ ); + } +} + +export default withStyles(styles)(DashboardWrapper); diff --git a/src/ui/pages/data-in-preparation/DataInPreparation.tsx b/src/ui/pages/dashboard/data-in-preparation/DataInPreparation.tsx similarity index 86% rename from src/ui/pages/data-in-preparation/DataInPreparation.tsx rename to src/ui/pages/dashboard/data-in-preparation/DataInPreparation.tsx index 313994f..6e49516 100644 --- a/src/ui/pages/data-in-preparation/DataInPreparation.tsx +++ b/src/ui/pages/dashboard/data-in-preparation/DataInPreparation.tsx @@ -6,8 +6,7 @@ import {Page} from 'model/common.model'; import {Dataset} from 'model/dataset.model'; import {Descriptor} from 'model/descriptors.model'; -import ContentHeader from 'ui/content-header/ContentHeader'; -import ContentHeaderWithButton from 'ui/content-header/ContentHeaderWithButton'; +import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import DataTabs from 'ui/common/administration/tabs'; interface IDataInPreparationProps extends React.ClassAttributes { @@ -34,10 +33,6 @@ const descriptorSortOptions = { const DataInPreparation = ({listDatasetsRequest, datasetPage, loadDescriptors, descriptorPage, classes}: IDataInPreparationProps) => (
- { @@ -33,10 +32,6 @@ const descriptorSortOptions = { const DataPublished = ({listDatasetsRequest, datasetPage, loadDescriptors, descriptorPage, classes}: IDataPublishedProps) => (
- -
diff --git a/src/ui/pages/data-publisher/index.tsx b/src/ui/pages/data-publisher/index.tsx deleted file mode 100644 index f38f60a..0000000 --- a/src/ui/pages/data-publisher/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import {bindActionCreators} from 'redux'; -import {connect} from 'react-redux'; -import Grid from 'material-ui/Grid'; -import {withStyles} from 'material-ui/styles'; - -import TopDataPublisherSection from './top-section'; -import MainDataPublisherSection from './main-section'; -import {createDatasetRequest} from 'actions/dataset'; - -interface IDatasetsProps extends React.ClassAttributes { - classes: any; - router: any; - createDatasetRequest: () => void; -} - -const styles = { - root: { - margin: '0px', - }, -}; - -class DataPublisher extends React.Component { - - public render() { - - const {classes} = this.props; - - return ( - - - - - - - ); - } -} - -const StyledComponent = withStyles(styles)(DataPublisher); - -const mapDispatchToProps = (dispatch) => bindActionCreators({ - createDatasetRequest, -}, dispatch); - -export default connect( - null, mapDispatchToProps, -)(StyledComponent); diff --git a/src/ui/pages/data-publisher/main-section/index.tsx b/src/ui/pages/data-publisher/main-section/index.tsx deleted file mode 100644 index cedf609..0000000 --- a/src/ui/pages/data-publisher/main-section/index.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import * as React from 'react'; -import {connect} from 'react-redux'; -import {Link} from 'react-router'; -import AppBar from 'material-ui/AppBar'; -import Tabs, {Tab} from 'material-ui/Tabs'; -import {withStyles} from 'material-ui/styles'; -import Button from 'material-ui/Button'; - -import DataInPreparation from '../tabs/DataInPreparation'; -import DataPublished from '../tabs/DataPublished'; -import Grid from 'material-ui/Grid'; - -interface IMainDataPublisherSection extends React.ClassAttributes { - classes: any; - location: any; - params: any; -} - -const styleSheet = { - root: { - borderBottom: '1px solid #B2AFA6', - }, - appBar: { - border: 'none', - background: 'none', - boxShadow: 'none', - }, - appBarrBox: { - backgroundColor: '#D4D2C6', - }, - barButtonBox: { - backgroundColor: '#D4D2C6', - }, - buttonPublish: { - color: 'white', - backgroundColor: '#88ba42', - margin: '6px', - float: 'right', - }, -}; - -class MainDataPublisherSection extends React.Component { - public constructor(props: any) { - super(props); - - this.state = { - value: 0, - }; - } - - protected handleChange = (event, value) => { - this.setState({value}); - } - - public render() { - - const {classes} = this.props; - - const {value} = this.state; - - return ( - - - - - - - - - - - - - - - - - { value === 0 && } - { value === 1 && } - - - ); - }; - -} - -export default withStyles(styleSheet)<{}>(MainDataPublisherSection); diff --git a/src/ui/pages/data-publisher/tabs/DataInPreparation.tsx b/src/ui/pages/data-publisher/tabs/DataInPreparation.tsx deleted file mode 100644 index 35bfeff..0000000 --- a/src/ui/pages/data-publisher/tabs/DataInPreparation.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import {connect} from 'react-redux'; -import {Link} from 'react-router'; -import Grid from 'material-ui/Grid'; -import {withStyles} from 'material-ui/styles'; -import {bindActionCreators} from 'redux'; - -import {Dataset} from 'model/dataset.model'; -import {Page} from 'model/common.model'; -import {IDatasetFilter} from 'model/filter.model'; -import {listDatasetsRequest} from 'actions/dataset'; -import PaginationComponent from 'ui/common/pagination'; - -import DataInPreparationItem from './data-preparation-item'; - -interface IDataInPreparation extends React.ClassAttributes { - classes: any; - location: any; - params: any; - datasetsArr: any; - listDatasetsRequest: (page?: number, results?: number, sortBy?: string, filter?: IDatasetFilter) => void; - pageObj: Page; -} - -const styles = { - root: { - color: 'black', - margin: '0px', - backgroundColor: '#E8E5E0', - }, -}; - -class DataInPreparation extends React.Component { - - public componentDidMount() { - if (this.props.datasetsArr.length === 0) { - this.props.listDatasetsRequest(); - } - } - - public render() { - const { classes, datasetsArr, pageObj, listDatasetsRequest } = this.props; - return ( - - - - - ); - }; - -} - -const mapStateToProps = (state, ownProps) => ({ - datasetsArr: state.pagination.datasetPage.content ? state.pagination.datasetPage.content : [], - pageObj: state.pagination.datasetPage, -}); - -const mapDispatchToProps = (dispatch) => bindActionCreators({ - listDatasetsRequest, -}, dispatch); - -export default connect( - mapStateToProps, mapDispatchToProps, -)(withStyles(styles)(DataInPreparation)); diff --git a/src/ui/pages/data-publisher/tabs/DataPublished.tsx b/src/ui/pages/data-publisher/tabs/DataPublished.tsx deleted file mode 100644 index 9b460ec..0000000 --- a/src/ui/pages/data-publisher/tabs/DataPublished.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import {connect} from 'react-redux'; -import { Link } from 'react-router'; -import {withStyles} from 'material-ui/styles'; - -interface IDataPublished extends React.ClassAttributes { - classes: any; - location: any; - params: any; -} - -const styleSheet = { - root: { - color: 'black', - }, -}; - -class DataPublished extends React.Component { - - public render() { - - const {classes} = this.props; - - return ( -
- Data Published body -
- ); - }; - -} - -export default withStyles(styleSheet)<{}>(DataPublished); diff --git a/src/ui/pages/data-publisher/tabs/data-preparation-item/index.tsx b/src/ui/pages/data-publisher/tabs/data-preparation-item/index.tsx deleted file mode 100644 index 9e355df..0000000 --- a/src/ui/pages/data-publisher/tabs/data-preparation-item/index.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import * as React from 'react'; -import {connect} from 'react-redux'; -import {Link} from 'react-router'; -import Grid from 'material-ui/Grid'; -import Button from 'material-ui/Button'; - -import {withStyles} from 'material-ui/styles'; -import Typography from 'material-ui/Typography'; - -interface IDataInPreparationItem extends React.ClassAttributes { - classes: any; - location: any; - datasetArr: any; -} - -const styleSheet = { - root: { - margin: '8px', - backgroundColor: 'white', - }, - infoText: { - color: '#016DB6', - }, - title: { - borderBottom: '1px solid #D4D4D4', - }, - infoTitle: { - color: '#016DB6', - padding: '8px', - }, - titleEditButton: { - float: 'right', - margin: '8px', - }, - infoNumber: { - padding: '8px', - }, - infoBody: { - padding: '8px', - }, - infoBodyRight: { - padding: '8px', - }, -}; - -class DataInPreparationItem extends React.Component { - - public render() { - - const {classes, datasetArr} = this.props; - - return ( - - - { - ( - datasetArr.map((dataset, index) => ( - - - - - - { dataset.id } - - - - - { dataset.title } - - - - - - - - - -
- - Description: { dataset.description } - -
-
- - Dataset creators: LOREM LORE, LOREM LORE - -
- - - Near Completion - - - - - )) - ) - } - - ); - }; - -} - -export default withStyles(styleSheet)(DataInPreparationItem); diff --git a/src/ui/pages/data-publisher/top-section/index.tsx b/src/ui/pages/data-publisher/top-section/index.tsx deleted file mode 100644 index f3321fd..0000000 --- a/src/ui/pages/data-publisher/top-section/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import {connect} from 'react-redux'; -import {Link} from 'react-router'; -import Grid from 'material-ui/Grid'; -import {withStyles} from 'material-ui/styles'; - -interface ITopDataPublisherSection extends React.ClassAttributes { - classes: any; - location: any; - params: any; -} - -const styleSheet = { - header: { - backgroundColor: '#88ba42', - fontSize: '24px', - color: '#fff', - padding: '8px', - }, - headText: { - fontSize: '24px', - marginTop: '9px', - marginBottom: '5px', - }, - infoText: { - fontSize: '12px', - margin: '0', - }, -}; - -class TopDataPublisherSection extends React.Component { - - public render() { - - const {classes} = this.props; - - return ( - - -

Data Publisher

-

Manage your Catalog Published Descriptors

- - - ); - }; - -} - -export default withStyles(styleSheet)<{}>(TopDataPublisherSection); diff --git a/src/ui/pages/dataset/dataset-detail/index.tsx b/src/ui/pages/dataset/dataset-detail/index.tsx index 93db47c..3d84227 100644 --- a/src/ui/pages/dataset/dataset-detail/index.tsx +++ b/src/ui/pages/dataset/dataset-detail/index.tsx @@ -11,7 +11,7 @@ import BrowseMenu from './BrowseMenu'; import {Dataset} from 'model/dataset.model'; import DetailInfo from './detail-info'; import {getDatasetRequest} from 'actions/dataset'; -import ContentHeader from 'ui/content-header/ContentHeader'; +import ContentHeader from 'ui/common/heading/ContentHeader'; interface IDatasetDetailProps extends React.ClassAttributes { classes: any; diff --git a/src/ui/pages/dataset/datset-list/index.tsx b/src/ui/pages/dataset/datset-list/index.tsx index f506128..ef52f7b 100644 --- a/src/ui/pages/dataset/datset-list/index.tsx +++ b/src/ui/pages/dataset/datset-list/index.tsx @@ -7,7 +7,7 @@ import {ROLE_ADMINISTRATOR} from 'constants/userRoles'; import {Dataset} from 'model/dataset.model'; import {Page} from 'model/common.model'; import PaginationComponent from 'ui/common/pagination'; -import ContentHeader from 'ui/content-header/ContentHeader'; +import ContentHeader from 'ui/common/heading/ContentHeader'; import DatasetCard from './DatasetCard'; import {IDatasetFilter} from 'model/filter.model'; import DatasetSearchMenu from './DatasetSearchMenu'; diff --git a/src/ui/pages/descriptor/descriptors/index.tsx b/src/ui/pages/descriptor/descriptors/index.tsx index f556791..c8e1fdd 100644 --- a/src/ui/pages/descriptor/descriptors/index.tsx +++ b/src/ui/pages/descriptor/descriptors/index.tsx @@ -11,7 +11,7 @@ import {Page} from 'model/common.model'; import PaginationComponent from 'ui/common/pagination'; import DescriptorSearchMenu from './DescriptorSearchMenu'; import {IDescriptorFilter} from 'model/filter.model'; -import ContentHeader from '../../../content-header/ContentHeader'; +import ContentHeader from 'ui/common/heading/ContentHeader'; interface IDescriptorListsPageProps extends React.ClassAttributes { login: any; diff --git a/src/ui/common/login/Login.tsx b/src/ui/pages/login/Login.tsx similarity index 100% rename from src/ui/common/login/Login.tsx rename to src/ui/pages/login/Login.tsx diff --git a/src/ui/common/login/index.tsx b/src/ui/pages/login/index.tsx similarity index 100% rename from src/ui/common/login/index.tsx rename to src/ui/pages/login/index.tsx diff --git a/src/ui/pages/partner/partner-list/index.tsx b/src/ui/pages/partner/partner-list/index.tsx index 0d1cf63..6014261 100644 --- a/src/ui/pages/partner/partner-list/index.tsx +++ b/src/ui/pages/partner/partner-list/index.tsx @@ -11,7 +11,7 @@ import {ROLE_ADMINISTRATOR} from 'constants/userRoles'; import {Page} from 'model/common.model'; import PaginationComponent from 'ui/common/pagination'; import {IPartnerFilter} from 'model/filter.model'; -import ContentHeader from '../../../content-header/ContentHeader'; +import ContentHeader from 'ui/common/heading/ContentHeader'; interface IPartnerListPageProps extends React.ClassAttributes { createNewPartner: () => void; diff --git a/src/ui/routes.tsx b/src/ui/routes.tsx index 2a79be5..1c188cf 100644 --- a/src/ui/routes.tsx +++ b/src/ui/routes.tsx @@ -6,10 +6,9 @@ import App from './App'; import DescriptorListsPage from './pages/descriptor'; import AuthorizedRouteComponent from './common/authorized/AuthorizedRouteComponent'; import WelcomePage from './pages/welcome'; -import Login from './common/login'; +import Login from './pages/login'; import PartnersPage from './pages/partner'; import Datasets from './pages/dataset'; -import DataPublisher from './pages/data-publisher'; import DatasetStepper from './pages/dataset/dataset-stepper'; import BasicInfoStep from './pages/dataset/dataset-stepper/steps/basic-info'; import Creators from './pages/dataset/dataset-stepper/steps/creators'; @@ -21,9 +20,11 @@ import {ROLE_ADMINISTRATOR, ROLE_USER} from 'constants/userRoles'; import DatasetDetail from './pages/dataset/dataset-detail'; import CreateDescriptorPage from './pages/descriptor/CreateDescriptorPage'; import DescriptorEditPage from './pages/descriptor/DescriptorEditPage'; -import DataInPreparation from './pages/data-in-preparation'; -import AdministrationDashboard from './pages/administrator-dashboard'; -import DataPublished from './pages/data-published'; + +import Dashboard from './pages/dashboard'; +import DashboardWrapper from './pages/dashboard/DashboardWrapper'; +import DataInPreparation from './pages/dashboard/data-in-preparation'; +import DataPublished from './pages/dashboard/data-published'; export default( @@ -36,10 +37,11 @@ export default( - - - - + + + + + -- GitLab From 5919e239e57254803be8d0e4e1bbbbf9c91c5f44 Mon Sep 17 00:00:00 2001 From: Matija Obreza Date: Fri, 22 Dec 2017 23:42:52 +0100 Subject: [PATCH 2/2] Added /gui Route for component testing --- .../descriptor}/DescriptorCard.tsx | 8 +- src/ui/common/DOI.tsx | 4 +- src/ui/common/markdown/index.tsx | 7 +- src/ui/common/tables/index.tsx | 60 +++++++ src/ui/layout/Header/UserMenuComponent.tsx | 7 + src/ui/layout/Header/index.tsx | 2 +- src/ui/pages/dashboard/index.tsx | 38 ++++ .../steps/traits/TraitsWrap.tsx | 2 +- src/ui/pages/descriptor/descriptors/index.tsx | 6 +- src/ui/pages/ui-design/Gui.tsx | 170 ++++++++++++++++++ src/ui/pages/ui-design/index.tsx | 36 ++++ .../ui-design/tests/UiDescriptorCard.tsx | 41 +++++ .../pages/ui-design/tests/UiDesignTables.tsx | 42 +++++ src/ui/pages/ui-design/tests/UiDoi.tsx | 17 ++ src/ui/routes.tsx | 3 + styles/app.styles.scss | 88 +++++++++ 16 files changed, 514 insertions(+), 17 deletions(-) rename src/ui/{pages/descriptor/descriptors => catalog/descriptor}/DescriptorCard.tsx (97%) create mode 100644 src/ui/common/tables/index.tsx create mode 100644 src/ui/pages/ui-design/Gui.tsx create mode 100644 src/ui/pages/ui-design/index.tsx create mode 100644 src/ui/pages/ui-design/tests/UiDescriptorCard.tsx create mode 100644 src/ui/pages/ui-design/tests/UiDesignTables.tsx create mode 100644 src/ui/pages/ui-design/tests/UiDoi.tsx diff --git a/src/ui/pages/descriptor/descriptors/DescriptorCard.tsx b/src/ui/catalog/descriptor/DescriptorCard.tsx similarity index 97% rename from src/ui/pages/descriptor/descriptors/DescriptorCard.tsx rename to src/ui/catalog/descriptor/DescriptorCard.tsx index 9fc0a06..2a0efc6 100644 --- a/src/ui/pages/descriptor/descriptors/DescriptorCard.tsx +++ b/src/ui/catalog/descriptor/DescriptorCard.tsx @@ -183,12 +183,6 @@ class DescriptorCard extends React.Component { title: classes.titleCard, } } title={ descriptor.title } - /*( - - { descriptor.title } - - ) - }*/ /> @@ -228,7 +222,7 @@ class DescriptorCard extends React.Component { - { T(`crop.${descriptor.crop}`) } + { T(`crop.${descriptor.crop}`) || descriptor.crop } diff --git a/src/ui/common/DOI.tsx b/src/ui/common/DOI.tsx index 0059dac..08b9611 100644 --- a/src/ui/common/DOI.tsx +++ b/src/ui/common/DOI.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; interface IMyProps extends React.Props { value: string; - noPrefix: boolean; + noPrefix?: boolean; }; /** @@ -10,7 +10,7 @@ interface IMyProps extends React.Props { */ export default function DOI({ value, - noPrefix, + noPrefix = false, }: IMyProps) { if (value) { return ( diff --git a/src/ui/common/markdown/index.tsx b/src/ui/common/markdown/index.tsx index 9464584..356af29 100644 --- a/src/ui/common/markdown/index.tsx +++ b/src/ui/common/markdown/index.tsx @@ -4,13 +4,14 @@ import Input from 'material-ui/Input'; import InputLabel from 'material-ui/Input/InputLabel'; import FormControl from 'material-ui/Form/FormControl'; -interface IMarkdownTextProps extends React.ClassAttributes { +interface IMarkdownTextProps extends React.HTMLProps { source: string; } -export default function Markdown({source}: IMarkdownTextProps) { +export default function Markdown({source, style, className}: IMarkdownTextProps) { + if (source) { - return ( ); + return (
); } else { return null; } diff --git a/src/ui/common/tables/index.tsx b/src/ui/common/tables/index.tsx new file mode 100644 index 0000000..a8f4862 --- /dev/null +++ b/src/ui/common/tables/index.tsx @@ -0,0 +1,60 @@ +// +// Tables +// +import * as React from 'react'; +import MuiTable from 'material-ui/Table'; +import {TableBody as MuiTableBody, TableCell as MuiTableCell, TableFooter as MuiTableFooter, TableHead as MuiTableHead, TableRow as MuiTableRow} from 'material-ui/Table'; + +interface ITableProps extends React.HTMLProps { + headers: string[] | any; + children: any; + widths?: string[]; +}; + +function Table({ headers, children, widths = [] }: ITableProps) { + // console.log('headers are', typeof headers, headers instanceof Array); + return ( + + { widths && ( + + { widths.map((width, i) => ) } + + ) } + + { (! (headers instanceof Array)) && headers } + { headers instanceof Array && ( + + { headers.map((header) => ( + { header } + ), + ) } + + ) } + + + { children } + + + + + + ); +} + +function TableRow({ children, style }: React.HTMLProps) { + return ( + + { children } + + ); +} + +function TableCell({ children, style, className }: React.HTMLProps) { + return ( + + { children } + + ); +} + +export {Table, TableRow, TableCell}; diff --git a/src/ui/layout/Header/UserMenuComponent.tsx b/src/ui/layout/Header/UserMenuComponent.tsx index 7331c81..3e4c564 100644 --- a/src/ui/layout/Header/UserMenuComponent.tsx +++ b/src/ui/layout/Header/UserMenuComponent.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import {connect} from 'react-redux'; + import {withStyles} from 'material-ui/styles'; import Button from 'material-ui/Button'; import Menu, { MenuItem } from 'material-ui/Menu'; @@ -44,6 +45,11 @@ class UserMenuComponent extends React.Component { this.handleRequestClose(); } + public goToGuiTesting = () => { + this.props.router.push('/gui'); + this.handleRequestClose(); + } + public render() { const { classes, logoutRequest, userName } = this.props; @@ -65,6 +71,7 @@ class UserMenuComponent extends React.Component { > My Dashboard Logout + UI Tests
); diff --git a/src/ui/layout/Header/index.tsx b/src/ui/layout/Header/index.tsx index 3aea6d2..b2b7d68 100644 --- a/src/ui/layout/Header/index.tsx +++ b/src/ui/layout/Header/index.tsx @@ -106,7 +106,7 @@ class Header extends React.Component { } private renderLogin = (roles: string[]) => { - console.log(this.props.login); + // console.log(this.props.login); if (this.hasRole(roles)) { return ; } else { diff --git a/src/ui/pages/dashboard/index.tsx b/src/ui/pages/dashboard/index.tsx index c6fee53..b06fc30 100644 --- a/src/ui/pages/dashboard/index.tsx +++ b/src/ui/pages/dashboard/index.tsx @@ -11,6 +11,8 @@ import {Page} from 'model/common.model'; import {Dataset} from 'model/dataset.model'; import {Descriptor} from 'model/descriptors.model'; +import Paper from 'material-ui/Paper'; +import {Table, TableRow, TableCell} from 'ui/common/tables'; import DataTabs from 'ui/common/administration/tabs'; import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; @@ -120,6 +122,42 @@ class AdministrationDashboard extends React.Component + + + No. + Title + Created + Status + + + ) }> + + 1 + ha ha2 + ha ha3 + Okay + ha ha4 + + + 2 + ha ha2 + ha ha3 + Okay + ha ha4 + + + 3 + ha ha2 + ha ha3 + Nay okay + ha ha4 + +
+ + +
+ { login: any; diff --git a/src/ui/pages/ui-design/Gui.tsx b/src/ui/pages/ui-design/Gui.tsx new file mode 100644 index 0000000..4c839c1 --- /dev/null +++ b/src/ui/pages/ui-design/Gui.tsx @@ -0,0 +1,170 @@ +import * as React from 'react'; +import {bindActionCreators} from 'redux'; +import {connect} from 'react-redux'; +import { Link } from 'react-router'; +import {Route, IndexRoute, Not} from 'react-router'; + +import Grid from 'material-ui/Grid'; +import Paper from 'material-ui/Paper'; +import Tabs, {Tab} from 'material-ui/Tabs'; + +import ContentHeader from 'ui/common/heading/ContentHeader'; +import Markdown from 'ui/common/markdown'; +import {Table, TableRow, TableCell} from 'ui/common/tables'; + +import { UiTestingTabs as tabs } from './index'; + +const UiWrapper = connect((state) => ({}), (dispatch) => bindActionCreators({}, dispatch))(({ children, router }) => { + + // console.log('Looking up matcher', tabs, router); + + const currentTab: number = router ? tabs.findIndex((tab) => tab.path === router.location.pathname ) : 0; + + const tabChange = (e, index) => { + // console.log('Tab changed:', index, tabs[index]); + router.push(tabs[index].path); + }; + + return ( +
+ + + + { tabs.map((tab) => ) } + + + { children } +
+ ); +}); + +const UiReadme = () => { + return ( +
+
+ + \` component and +sometimes \`\` to demonstrate what it looks like in that context. We +(or you) may add other containers: add them to the \`\` component. + +# Don't mess up! +` } /> + +
+ + + + +
+ ); +}; + +const UiDesignWrapper = ({ children }) => { + + return ( +
+
+
+ { children } +
+
+
+ + { children } + +
+
+
+ { children } +
+
+
+ + +
+ { children } +
+ + +
+ { children } +
+ + +
+
+ + +
+ { children } +
+ + +
+ { children } +
+ + +
+ { children } +
+ + +
+
+ + +
+ { children } +
+ + +
+ { children } +
+ + +
+ { children } +
+ + +
+ { children } +
+ + +
+
+ ); +}; + +export { UiWrapper, UiDesignWrapper, UiReadme }; diff --git a/src/ui/pages/ui-design/index.tsx b/src/ui/pages/ui-design/index.tsx new file mode 100644 index 0000000..659a89a --- /dev/null +++ b/src/ui/pages/ui-design/index.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import {Route, IndexRoute, Not} from 'react-router'; + +import { UiWrapper, UiReadme, UiDesignWrapper } from './Gui'; + +// Add your UI testing components to the imports and then to the routes +import UiDesignTables from './tests/UiDesignTables'; +import UiDoi from './tests/UiDoi'; +import UiDescriptorCard from './tests/UiDescriptorCard'; + +// Register the label and the path that matches your + + + + + + + + ); +} + +export { guiTestingRoutes as default, UiTestingTabs }; diff --git a/src/ui/pages/ui-design/tests/UiDescriptorCard.tsx b/src/ui/pages/ui-design/tests/UiDescriptorCard.tsx new file mode 100644 index 0000000..95c4c5d --- /dev/null +++ b/src/ui/pages/ui-design/tests/UiDescriptorCard.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; + +import {Descriptor} from 'model/descriptors.model'; +import {Partner} from 'model/partner.model'; +import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard'; + +export default function GuiTest({ style }: React.HTMLProps) { + const d: Descriptor = new Descriptor({ + title: 'This is a very long descriptor title', + description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Aliquam dolor dui, semper in maximus sed, efficitur ut ipsum. Vivamus ornare +turpis tristique ligula aliquet, sed congue neque mattis. Nullam metus nulla, +facilisis quis commodo in, interdum eget eros. Aliquam in dui quis tortor +pharetra commodo. Nullam in faucibus risus, quis viverra felis. + +Duis sit amet luctus libero. In dapibus, arcu vel pulvinar tristique, purus nisl +fringilla eros, sit amet bibendum tortor ante sit amet felis. Praesent rhoncus +mollis volutpat. + +Maecenas facilisis rutrum arcu, nec euismod purus tincidunt quis. Integer elit +est, interdum malesuada mi non, tincidunt iaculis lorem. Praesent tristique +turpis odio, nec congue nibh rutrum eget. Duis gravida feugiat iaculis. +Curabitur tempus nulla non orci pharetra consectetur. Nunc id elit viverra +est pharetra mollis. Nulla facilisi. + +Fusce ut mauris volutpat, volutpat erat gravida, venenatis augue. Fusce id dolor +at elit rutrum ultrices id sagittis turpis. Duis scelerisque enim a risus +facilisis, vel feugiat massa facilisis. Aenean ac pulvinar urna. +`, + versionTag: '1.1', + category: 'PASSPORT', + dataType: 'TEXT', + owner: new Partner({ + name: 'Partner name comes here', + }), + }); + + return ( + + ); +}; diff --git a/src/ui/pages/ui-design/tests/UiDesignTables.tsx b/src/ui/pages/ui-design/tests/UiDesignTables.tsx new file mode 100644 index 0000000..92b3f3d --- /dev/null +++ b/src/ui/pages/ui-design/tests/UiDesignTables.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; + +import {Table, TableRow, TableCell} from 'ui/common/tables'; + +export default function UiDesignTables({ children, style }: React.HTMLProps) { + + return ( +
+ + No. + Title + Created + Status + + + ) }> + + 1 + ha ha2 + ha ha3 + Okay + ha ha4 + + + 2 + ha ha2 + ha ha3 + Okay + ha ha4 + + + 3 + ha ha2 + ha ha3 + Nay okay + ha ha4 + +
+
+ ); +}; diff --git a/src/ui/pages/ui-design/tests/UiDoi.tsx b/src/ui/pages/ui-design/tests/UiDoi.tsx new file mode 100644 index 0000000..e752d44 --- /dev/null +++ b/src/ui/pages/ui-design/tests/UiDoi.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; + +import DOI from 'ui/common/DOI'; + +export default function GuiTest({ style }: React.HTMLProps) { + + return ( +
+
+ +
+
+ +
+
+ ); +}; diff --git a/src/ui/routes.tsx b/src/ui/routes.tsx index 1c188cf..cee344f 100644 --- a/src/ui/routes.tsx +++ b/src/ui/routes.tsx @@ -26,6 +26,8 @@ import DashboardWrapper from './pages/dashboard/DashboardWrapper'; import DataInPreparation from './pages/dashboard/data-in-preparation'; import DataPublished from './pages/dashboard/data-published'; +import guiTestingRoutes from './pages/ui-design'; + export default( @@ -55,6 +57,7 @@ export default( + { guiTestingRoutes() } ); diff --git a/styles/app.styles.scss b/styles/app.styles.scss index d0443a0..562eb93 100644 --- a/styles/app.styles.scss +++ b/styles/app.styles.scss @@ -332,6 +332,26 @@ a:visited { filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.2)); } +/** Text **/ +.font-bold { + font-weight: bold; +} +.font-italic { + font-style: italic; +} +.text-left { + text-align: left; + body[dir="rtl"] & { + text-align: right; + } +} +.text-right { + text-align: right; + body[dir="rtl"] & { + text-align: left; + } +} + table.simple { width: 100%; thead { @@ -353,3 +373,71 @@ table.simple { padding: .25em 1em .25em 1em; } } + +table.genesys-table { + + thead { + tr, th { + font-weight: bold; + color: #b4b4b2; + font-size: 1rem; + } + } + // This adds the "margins" to the left and right of the table + tr > td, tr > th { + &:first-child { + border-left: solid 1rem White; + } + &:last-child { + border-right: solid 1rem White; + } + } + + tbody { + > tr { + > td { + border-bottom-color: white; + border-right: solid 1px White; + } + &:last-child > td { + } + &:nth-child(odd) > td { + background-color: #f3f2ee; + } + &:nth-child(even) > td { + background-color: #f8f7f5; + } + } + } + + tfoot { + tr { + // adds fake bottom-margin to the table + // height: '30px', + } + } +} +// Markdown +.markdown { + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } + + h1 { + font-size: 1.5rem; + font-weight: bold; + } + + h2 { + font-size: 1.3rem; + font-weight: bold; + } + + p { + font-size: 1.1rem; + } +} -- GitLab