Commit d26a2abc authored by Valeriy Panov's avatar Valeriy Panov
Browse files

#250 Entry page

parent 5bcc7e2a
import {DescriptorService} from 'service/DescriptorService';
import {DatasetService} from 'service/DatasetService';
import {DescriptorListService} from 'service/DescriptorListService';
import {Descriptor, DescriptorList} from 'model/descriptor.model';
import {Page} from 'model/common.model';
import {Dataset} from 'model/dataset.model';
import {
SEARCH_DATASET_PAGE,
SEARCH_DESCRIPTOR_PAGE,
SEARCH_DESCRIPTOR_LIST_PAGE,
NEW_SEARCH,
} from 'constants/search';
import {log} from 'utilities/debug';
const search = (search: string) => ({
type: NEW_SEARCH,
payload: { search },
});
const searchDatasetPage = (paged: Page<Dataset>) => ({
type: SEARCH_DATASET_PAGE,
payload: { paged },
});
const searchDescriptorPage = (paged: Page<Descriptor>) => ({
type: SEARCH_DESCRIPTOR_PAGE,
payload: { paged },
});
const searchDescriptorListPage = (paged: Page<DescriptorList>) => ({
type: SEARCH_DESCRIPTOR_LIST_PAGE,
payload: { paged },
});
export function searchDatasets(page?, results?, sortBy?, filter?, order?) {
return (dispatch, getState) => {
const token = getState().login.access_token;
dispatch(search(filter._text));
return DatasetService.listDatasets(token, page, results, sortBy, filter, order)
.then((paged) => {
return dispatch(searchDatasetPage(paged));
})
.catch((error) => {
log('Error', error);
});
};
}
export function searchDescriptors(page?, results?, sortBy?, filter?, order?) {
return (dispatch, getState) => {
const token = getState().login.access_token;
dispatch(search(filter._text));
return DescriptorService.listDescriptors(token, page, results, sortBy, filter, order)
.then((paged) => {
return dispatch(searchDescriptorPage(paged));
})
.catch((error) => {
log('Error', error);
});
};
}
export function searchDescriptorLists(page?, results?, sortBy?, filter?, order?) {
return (dispatch, getState) => {
const token = getState().login.access_token;
dispatch(search(filter._text));
return DescriptorListService.listDescriptorLists(token, page, results, sortBy, filter, order)
.then((paged) => {
return dispatch(searchDescriptorListPage(paged));
})
.catch((error) => {
log('Error', error);
});
};
}
export const NEW_SEARCH = 'App/NEW_SEARCH';
export const SEARCH_DATASET_PAGE = 'App/SEARCH_DATASET_PAGE';
export const SEARCH_DESCRIPTOR_PAGE = 'App/SEARCH_DESCRIPTOR_PAGE';
export const SEARCH_DESCRIPTOR_LIST_PAGE = 'App/SEARCH_DESCRIPTOR_LIST_PAGE';
export interface IBasicModelFilter {
id?: number[];
_text?: string;
}
export interface IVersionedModelFilter extends IBasicModelFilter {
......
......@@ -13,6 +13,7 @@ import appMounted from './appMounted';
import vocabulary from './vocabulary';
import crop from './crop';
import history from './history';
import search from './search';
const rootReducer = combineReducers({
lookups,
......@@ -27,6 +28,7 @@ const rootReducer = combineReducers({
filter,
appMounted,
history,
search,
routing: routerReducer,
form: formReducer,
});
......
import * as update from 'immutability-helper';
import {
SEARCH_DATASET_PAGE,
SEARCH_DESCRIPTOR_PAGE,
SEARCH_DESCRIPTOR_LIST_PAGE,
NEW_SEARCH,
} from 'constants/search';
import {Dataset} from 'model/dataset.model';
import {Page} from 'model/common.model';
import {Descriptor, DescriptorList} from 'model/descriptor.model';
const INITIAL_STATE: {
search: string;
loading: boolean;
pagedDatasets: Page<Dataset>;
pagedDescriptors: Page<Descriptor>;
pagedDescriptorLists: Page<DescriptorList>;
} = {
search: null,
loading: false,
pagedDatasets: null,
pagedDescriptors: null,
pagedDescriptorLists: null,
};
function search(state = INITIAL_STATE, action: { type?: string, payload?: any } = {type: '', payload: {}}) {
switch (action.type) {
case NEW_SEARCH: {
return update(state, {
search: {$set: action.payload.search},
loading: {$set: true},
});
}
case SEARCH_DATASET_PAGE: {
return update(state, {
pagedDatasets: {$set: action.payload.paged},
loading: {$set: false},
});
}
case SEARCH_DESCRIPTOR_PAGE: {
return update(state, {
pagedDescriptors: {$set: action.payload.paged},
loading: {$set: false},
});
}
case SEARCH_DESCRIPTOR_LIST_PAGE: {
return update(state, {
pagedDescriptorLists: {$set: action.payload.paged},
loading: {$set: false},
});
}
default:
return state;
}
}
export default search;
import * as React from 'react';
const connect = require('react-redux').connect;
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import TextField from 'material-ui/TextField';
import Tabs, {Tab} from 'material-ui/Tabs';
import Paper from 'material-ui/Paper';
import Loading from 'ui/common/Loading';
import Container from 'ui/common/container';
import Heading from 'ui/common/heading';
import {searchDatasets, searchDescriptorLists, searchDescriptors} from 'actions/search';
import {Dataset, IDatasetFilter} from 'model/dataset.model';
import {Page} from 'model/common.model';
import {Descriptor, DescriptorList, IDescriptorFilter, IDescriptorListFilter} from 'model/descriptor.model';
import ContentHeader from 'ui/common/heading/ContentHeader';
function mapStateToProps(state) {
return {
};
interface IWelcomePageProps extends React.ClassAttributes<any> {
classes: any;
search: string;
loading: boolean;
pagedDatasets: Page<Dataset>;
pagedDescriptors: Page<Descriptor>;
pagedDescriptorLists: Page<DescriptorList>;
searchDatasets: (page?: number, results?: number, sortBy?: string, filter?: IDatasetFilter) => any;
searchDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter) => any;
searchDescriptorLists: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorListFilter) => any;
}
function mapDispatchToProps(dispatch) {
return {
};
}
const styles = (theme) => ({
alignCenter: {
textAlign: 'center',
},
paper: {
margin: 20,
height: 500,
overflow: 'auto' as 'auto',
},
});
class WelcomePage extends React.Component<IWelcomePageProps, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
search: props.search || '',
value: 0,
};
}
protected search = (e) => {
e.preventDefault();
const {search, value} = this.state;
const {searchDatasets, searchDescriptors, searchDescriptorLists} = this.props;
if (!search) {
return;
}
switch (value) {
case 0:
searchDatasets(0, 20, null, {_text: search});
break;
case 1:
searchDescriptors(0, 20, null, {_text: search});
break;
case 2:
searchDescriptorLists(0, 20, null, {_text: search});
break;
}
}
class WelcomePage extends React.Component<React.Props<any>, void> {
public render() {
return (
<Container testid="counter" size={ 12 } center>
<Heading title="Welcome to the Genesys Catalog" />
<h2>The TO-DO list</h2>
<ul>
<li>Entry page</li>
<li>... and everything else!</li>
</ul>
</Container>
);
}
protected onSearchChange = (e) => {
const search = e.target.value;
this.setState((state) => ({...state, search}));
}
protected handleChange = (event, value) => {
this.setState((state) => ({...state, value}));
}
protected getContent = (value) => {
const {pagedDatasets, pagedDescriptors, pagedDescriptorLists} = this.props;
switch (value) {
case 0:
return pagedDatasets && JSON.stringify(pagedDatasets.content);
case 1:
return pagedDescriptors && JSON.stringify(pagedDescriptors.content);
case 2:
return pagedDescriptorLists && JSON.stringify(pagedDescriptorLists.content);
}
}
public render() {
const {classes, loading} = this.props;
const {search, value} = this.state;
return (
<Container testid="counter" size={ 12 } center>
<ContentHeader title="Welcome to the Genesys Catalog"/>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ classes.alignCenter }>
<form onSubmit={ this.search }>
<TextField
label="Search"
value={ search }
onChange={ this.onSearchChange }
margin="normal"
/>
</form>
</Grid>
<Grid item xs={ 12 }>
<Tabs value={ value } onChange={ this.handleChange } centered>
<Tab label="Datasets"/>
<Tab label="Descriptors"/>
<Tab label="Descriptor lists"/>
</Tabs>
<Paper className={ classes.paper }>
{ loading ? <Loading/> : this.getContent(value) }
</Paper>
</Grid>
</Grid>
</Container>
);
}
}
const styled = withStyles(styles)(WelcomePage);
const mapStateToProps = (state, ownProps) => ({
search: state.search.search,
loading: state.search.loading,
pagedDatasets: state.search.pagedDatasets,
pagedDescriptors: state.search.pagedDescriptors,
pagedDescriptorLists: state.search.pagedDescriptorLists,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
searchDatasets,
searchDescriptors,
searchDescriptorLists,
}, dispatch);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(WelcomePage);
mapStateToProps,
mapDispatchToProps,
)(styled);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment