Commit 52a7580e authored by Matija Obreza's avatar Matija Obreza
Browse files

Loading indicator for descriptor, partner, vocabulary, dataset

parent c4e55bed
......@@ -35,8 +35,11 @@ export const loadDescriptorList = (uuid: string) => (dispatch, getState) => {
return DescriptorListService.loadDescriptorList(token, uuid)
// receive the current descriptor list
// // Demo long load
// .then((descriptorList) => {
// await setTimeout(() => dispatch(receiveDescriptorList(descriptorList)), 10000);
.then((descriptorList) => {
return dispatch(receiveDescriptorList(descriptorList));
dispatch(receiveDescriptorList(descriptorList));
}).catch((error) => {
console.log(`No descriptor list with uuid ${uuid}`, error);
});
......
......@@ -7,6 +7,7 @@ import { listDatasetsRequest } from 'actions/dataset';
import { Dataset, IDatasetFilter } from 'model/dataset.model';
import { Page, Pagination } from 'model/common.model';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import DatasetFilters from './c/Filters';
import DatasetCard from './c/Card';
......@@ -78,10 +79,7 @@ class BrowsePage extends React.Component<IDatasetsProps, any> {
// console.log('Browsing datasets', pagination);
if (! paged || ! paged.content) {
console.log('paged===null?', paged);
return null;
}
const stillLoading: boolean = (! paged || ! paged.content);
return (
<Grid container spacing={ 0 }>
......@@ -95,11 +93,13 @@ class BrowsePage extends React.Component<IDatasetsProps, any> {
onChange={ this.onPaginationChange } displayName="datasets"
sortOptions={ sortOptions } />
</Grid>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
{ paged.content.map((e, i) => <DatasetCard className="m-20" dataset={ e } key={ `${e.uuid}` } />) }
</Grid>
</Grid>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
{ paged.content.map((e, i) => <DatasetCard className="m-20" dataset={ e } key={ `${e.uuid}` } />) }
</Grid>
</Grid>
}
</Grid>
</Grid>
<Grid container spacing={ 0 }>
......
......@@ -2,16 +2,18 @@ import * as React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';
import { loadDataset } from 'actions/dataset';
import { Dataset } from 'model/dataset.model';
import Loading from 'ui/common/Loading';
import BrowseMenu from './c/BrowseMenu';
import DatasetDisplay from './c/DatasetDisplay';
import Grid from 'material-ui/Grid';
import { Link } from 'react-router';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
import BrowseMenu from './c/BrowseMenu';
import { Dataset } from 'model/dataset.model';
import DatasetDisplay from './c/DatasetDisplay';
import { loadDataset } from 'actions/dataset';
interface IDatasetDetailProps extends React.ClassAttributes<any> {
classes: any;
uuid: string;
......@@ -43,9 +45,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
public render() {
const { classes, uuid, dataset } = this.props;
if (dataset && dataset.uuid !== uuid) {
return null;
}
const stillLoading: boolean = (! dataset || (uuid && dataset && dataset.uuid !== uuid));
return (
<div className="back-gray">
......@@ -60,9 +60,11 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
BACK TO LIST
</Button></Link>
</Grid>
<Grid item xs={ 12 } className="pt-10">
<DatasetDisplay dataset={ dataset }/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="pt-10">
<DatasetDisplay dataset={ dataset }/>
</Grid>
}
</Grid>
</Grid>
</Grid>
......
......@@ -87,10 +87,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
// console.log('Browsing descriptor lists', filter);
if (! paged || ! paged.content) {
console.log('paged===null?', paged);
return <Loading message="Fetching data..." />;
}
const stillLoading: boolean = (! paged || ! paged.content);
return (
<Grid container spacing={ 0 }>
......@@ -104,12 +101,14 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
onChange={ this.onPaginationChange } displayName="datasets"
sortOptions={ sortOptions } />
</Grid>
</Grid>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
{ paged.content.map((e: DescriptorList) => <DescriptorListCard className="m-20" descriptorList={ e } key={ `${e.uuid}` } />) }
</Grid>
</Grid>
</Grid>
}
</Grid>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
......
......@@ -89,7 +89,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
<div>
<ContentHeaderWithButton title="Descriptor list details" buttonName="BACK" buttonUrl="/descriptorlist" />
{ stillLoading ? <Loading className={ classes.contentContainer } /> :
<div>
<span>
<Grid container className={ classes.contentContainer }>
<Grid item xs={ 12 }>
<Card className={ classes.card } square>
......@@ -154,7 +154,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
</Section>
</Grid>
</Grid>
</div>
</span>
}
</div>
);
......
......@@ -8,12 +8,12 @@ import { Partner } from 'model/partner.model';
import { IPartnerFilter } from 'model/filter.model';
import { loadPartners } from 'actions/partner';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import PartnerFilters from './c/Filters';
import Summary from './c/Summary';
import PartnerCard from './c/PartnerCard';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import Grid from 'material-ui/Grid';
interface IBrowsePageProps extends React.ClassAttributes<any> {
......@@ -86,11 +86,7 @@ class PartnerListPage extends React.Component<IBrowsePageProps, any> {
const {classes, paged, pagination} = this.props;
// console.log('Browsing partners', pagination);
if (! paged || ! paged.content) {
console.log('paged===null?', paged);
return <Loading message="Fetching data..." />;
}
const stillLoading: boolean = (! paged || ! paged.content);
return (
<div className="back-gray">
......@@ -109,11 +105,15 @@ class PartnerListPage extends React.Component<IBrowsePageProps, any> {
sortOptions={ sort }
/>
</Grid>
</Grid>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 9 } className="pb-10">
{ paged.content.map((e, i) => <PartnerCard partner={ e } key={ i }/>) }
</Grid>
<Summary paged={ paged }/>
</Grid>
</Grid>
}
</Grid>
<Grid container spacing={ 0 } className="back-gray-yellow">
<Grid item md={ 3 } lg={ 2 } />
......
......@@ -7,6 +7,7 @@ import {loadPartner, editPartner, deletePartner} from 'actions/partner';
import {Partner} from 'model/partner.model';
import confirm from 'utilities/confirmAlert';
import Loading from 'ui/common/Loading';
import Markdown from 'ui/common/markdown';
import {FaoWiewsLink} from 'ui/common/Links';
......@@ -64,58 +65,56 @@ class PartnerPage extends React.Component<IPartnerPageProps, any> {
public render() {
const {uuid, partner} = this.props;
if (! partner || (uuid && (partner.uuid !== uuid))) {
// don't render if data not matching
return null;
}
// console.log('Showing descriptor list', partner);
const stillLoading: boolean = (! partner || (uuid && (partner.uuid !== uuid)));
return (
<div>
<Grid container spacing={ 0 } className="back-gray p-20">
<Grid item xs={ 12 }>
<Card square>
<CardHeader title={ (
<span>{ partner.shortName && <b>{ partner.shortName }</b> } { partner.name }</span>
) } />
<Divider />
<CardContent>
{ partner.description && <Markdown source={ partner.description } /> }
{ partner.urls && partner.urls.length > 0 && (
<div>
<h3>Websites</h3>
<ul>
{ partner.urls.map((url) => (
<li><a href="{ url }" target="_blank" rel="nofollow">{ url }</a></li>
)) }
</ul>
</div>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 } className="back-gray p-20">
<Grid item xs={ 12 }>
<Card square>
<CardHeader title={ (
<span>{ partner.shortName && <b>{ partner.shortName }</b> } { partner.name }</span>
) } />
<Divider />
<CardContent>
{ partner.description && <Markdown source={ partner.description } /> }
{ partner.urls && partner.urls.length > 0 && (
<div>
<h3>Websites</h3>
<ul>
{ partner.urls.map((url) => (
<li><a href="{ url }" target="_blank" rel="nofollow">{ url }</a></li>
)) }
</ul>
</div>
) }
{ partner.wiewsCodes && partner.wiewsCodes.length > 0 && (
<div>
<h3>Associated FAO WIEWS codes</h3>
<ul>
{ partner.wiewsCodes.map((wiewsCode) => (
<li><FaoWiewsLink wiewsCode={ wiewsCode }>{ wiewsCode }</FaoWiewsLink></li>
)) }
</ul>
</div>
) }
<div>Record version: <b>{ partner.version }</b> UUID: <b>{ partner.uuid }</b></div>
</CardContent>
{ (partner._permissions.write || partner._permissions.delete) && (
<CardActions>
{ partner._permissions.write && <Button onClick={ this.onEditPartner } type="button">Edit</Button> }
{ partner._permissions.delete && <Button onClick={ this.onDeletePartner } type="button">Delete</Button> }
</CardActions>
) }
{ partner.wiewsCodes && partner.wiewsCodes.length > 0 && (
<div>
<h3>Associated FAO WIEWS codes</h3>
<ul>
{ partner.wiewsCodes.map((wiewsCode) => (
<li><FaoWiewsLink wiewsCode={ wiewsCode }>{ wiewsCode }</FaoWiewsLink></li>
)) }
</ul>
</div>
) }
<div>Record version: <b>{ partner.version }</b> UUID: <b>{ partner.uuid }</b></div>
</CardContent>
{ (partner._permissions.write || partner._permissions.delete) && (
<CardActions>
{ partner._permissions.write && <Button onClick={ this.onEditPartner } type="button">Edit</Button> }
{ partner._permissions.delete && <Button onClick={ this.onDeletePartner } type="button">Delete</Button> }
</CardActions>
) }
</Card>
</Card>
</Grid>
</Grid>
</Grid>
}
</div>
);
}
......
......@@ -73,9 +73,7 @@ class BrowsePage extends React.Component<IBrowsePageProps & any, any> {
public render() {
const {classes, paged, createVocabulary} = this.props;
if (!(paged && paged.content)) {
return <Loading message="Fetching data..." />;
}
const stillLoading: boolean = (!(paged && paged.content));
return (
<div className={ classes.root }>
......@@ -90,11 +88,13 @@ class BrowsePage extends React.Component<IBrowsePageProps & any, any> {
sortOptions={ sortOptions }
/>
</Grid>
{ paged.content.map((vocabulary: Vocabulary, index) => (
<Grid key={ index } item xs={ 12 }>
<VocabularyCard className={ classes.card } vocabulary={ vocabulary } />
</Grid>
)) }
{ stillLoading ? <Loading /> :
paged.content.map((vocabulary: Vocabulary, index) => (
<Grid key={ index } item xs={ 12 }>
<VocabularyCard className={ classes.card } vocabulary={ vocabulary } />
</Grid>
))
}
<Grid item xs={ 12 }>
<PaginationComponent pageObj={ paged }
onChange={ this.onPaginationChange }
......
......@@ -2,16 +2,19 @@ import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Card, {CardHeader, CardContent} from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import Paper from 'material-ui/Paper';
import {loadVocabulary} from 'actions/vocabulary';
import {Vocabulary} from 'model/vocabulary.model';
import Loading from 'ui/common/Loading';
import Markdown from 'ui/common/markdown';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import Grid from 'material-ui/Grid';
import Card, {CardHeader, CardContent} from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import Paper from 'material-ui/Paper';
interface IDisplayPageProps extends React.ClassAttributes<any> {
classes: any;
uuid?: string;
......@@ -48,14 +51,13 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
public render() {
const {classes, uuid, vocabulary} = this.props;
if (uuid && vocabulary && vocabulary.uuid !== uuid) {
return null;
}
const stillLoading: boolean = (! vocabulary || (uuid && vocabulary && vocabulary.uuid !== uuid));
return vocabulary && (
return (
<div>
<ContentHeaderWithButton title="Vocabulary details" buttonName="BACK" buttonUrl="/vocabulary"/>
<Grid container className={ classes.contentContainer }>
{ stillLoading ? <Loading /> :
<Grid container className={ classes.contentContainer }>
<Grid item xs={ 12 }>
<Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader } title={ (
......@@ -79,6 +81,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</Paper>
) }
</Grid>
}
</div>
);
}
......
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