Commit 6dac9e2a authored by Matija Obreza's avatar Matija Obreza Committed by Viacheslav Pavlov
Browse files

Crops list with images

- API calls updated
parent 306d19a9
...@@ -13,8 +13,8 @@ const receiveCropDetails = (cropDetails: CropDetails): IReducerAction => ({ ...@@ -13,8 +13,8 @@ const receiveCropDetails = (cropDetails: CropDetails): IReducerAction => ({
type: RECEIVE_CROP_DETAILS, payload: cropDetails, type: RECEIVE_CROP_DETAILS, payload: cropDetails,
}); });
export const loadCropDetails = (shortName: string, locale: string) => (dispatch) => { export const loadCropDetails = (shortName: string) => (dispatch) => {
CropService.getCropDetails(locale, shortName) CropService.getCropDetails(shortName)
.then((details) => dispatch(receiveCropDetails(details))); .then((details) => dispatch(receiveCropDetails(details)));
}; };
......
...@@ -3,7 +3,7 @@ import {connect} from 'react-redux'; ...@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'; import {bindActionCreators} from 'redux';
// Models // Models
import Crop from 'model/genesys/Crop'; import CropDetails from 'model/genesys/CropDetails';
// UI // UI
import PageLayout, { PageContents } from 'ui/layout/PageLayout'; import PageLayout, { PageContents } from 'ui/layout/PageLayout';
...@@ -12,7 +12,7 @@ import CropCard from 'crop/ui/c/CropCard'; ...@@ -12,7 +12,7 @@ import CropCard from 'crop/ui/c/CropCard';
import GridLayout from 'ui/layout/GridLayout'; import GridLayout from 'ui/layout/GridLayout';
interface IBrowsePageProps extends React.ClassAttributes<any> { interface IBrowsePageProps extends React.ClassAttributes<any> {
crops: Crop[]; crops: CropDetails[];
} }
class BrowsePage extends React.Component<IBrowsePageProps> { class BrowsePage extends React.Component<IBrowsePageProps> {
......
import * as React from 'react'; import * as React from 'react';
import {connect} from 'react-redux'; import { connect } from 'react-redux';
import {bindActionCreators} from 'redux'; import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
// Actions // Actions
import {loadCropDetails} from 'crop/actions/public'; import { loadCropDetails } from 'crop/actions/public';
// Models // Models
import Crop from 'model/genesys/Crop'; import Crop from 'model/genesys/Crop';
...@@ -19,6 +19,7 @@ import ContentHeader from 'ui/common/heading/ContentHeader'; ...@@ -19,6 +19,7 @@ import ContentHeader from 'ui/common/heading/ContentHeader';
import Section from 'ui/common/layout/Section'; import Section from 'ui/common/layout/Section';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
import PropertiesCard from 'ui/common/PropertiesCard'; import PropertiesCard from 'ui/common/PropertiesCard';
import Number from 'ui/common/Number';
/*tslint:disable*/ /*tslint:disable*/
const styles = (theme) => ({ const styles = (theme) => ({
...@@ -48,7 +49,7 @@ const styles = (theme) => ({ ...@@ -48,7 +49,7 @@ const styles = (theme) => ({
/*tslint:enable*/ /*tslint:enable*/
interface IDisplayPageProps extends React.ClassAttributes<any> { interface IDisplayPageProps extends React.ClassAttributes<any> {
loadCropDetails: (shortName: string, lang: string) => void; loadCropDetails: (shortName: string) => void;
cropDetails: CropDetails; cropDetails: CropDetails;
crops: Crop[]; crops: Crop[];
shortName: string; shortName: string;
...@@ -60,21 +61,20 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -60,21 +61,20 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
protected static needs = [ protected static needs = [
({ params: { shortName } }) => { ({ params: { shortName } }) => {
return shortName ? loadCropDetails(shortName, 'en') : null; return shortName ? loadCropDetails(shortName) : null;
}, },
]; ];
public componentWillMount() { public componentWillMount() {
const { loadCropDetails, shortName, i18n } = this.props; const { loadCropDetails, shortName } = this.props;
const lang = i18n ? i18n.language : 'en';
if (shortName) { if (shortName) {
loadCropDetails(shortName, lang); loadCropDetails(shortName);
} }
} }
public render() { public render() {
const { cropDetails, shortName, classes } = this.props; const { cropDetails, shortName, classes } = this.props;
const crop = cropDetails ? cropDetails.crop : null; const crop = cropDetails;
return ( return (
<PageLayout withFooter> <PageLayout withFooter>
...@@ -90,7 +90,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -90,7 +90,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PageSection title="General information"> <PageSection title="General information">
<Properties> <Properties>
<PropertiesItem title="Accessions in genesys" keepEmpty>{ cropDetails.accessionCount || 0 }</PropertiesItem> <PropertiesItem title="Accessions in genesys" keepEmpty><Number value={ cropDetails.accessionCount || 0 } /></PropertiesItem>
</Properties> </Properties>
</PageSection> </PageSection>
......
...@@ -2,16 +2,17 @@ import * as React from 'react'; ...@@ -2,16 +2,17 @@ import * as React from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
// Models // Models
import Crop from 'model/genesys/Crop'; import CropDetails from 'model/genesys/CropDetails';
// UI // UI
import Card, {CardHeader, CardContent, CardActions} from 'ui/common/Card'; import Card, {CardHeader, CardContent, CardMedia, CardActions} from 'ui/common/Card';
import {Properties, PropertiesItem} from 'ui/common/Properties'; import {Properties, PropertiesItem} from 'ui/common/Properties';
import PrettyDate from 'ui/common/time/PrettyDate'; import PrettyDate from 'ui/common/time/PrettyDate';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Authorize from 'ui/common/authorized/Authorize'; import Authorize from 'ui/common/authorized/Authorize';
import Number from 'ui/common/Number';
const style = (theme) => ({ const style = (theme) => ({
root: { root: {
...@@ -20,23 +21,27 @@ const style = (theme) => ({ ...@@ -20,23 +21,27 @@ const style = (theme) => ({
justifyContent: 'space-between', justifyContent: 'space-between',
display: 'flex', display: 'flex',
}, },
media: {
height: 150,
},
}); });
const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: Crop, classes?: any, compact?: boolean, edit?: boolean }) => { const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean }) => {
if (!crop) { if (!crop) {
return null; return null;
} }
return compact ? ( return compact ? (
<Grid item xs={ 12 } sm={ 6 } md={ 4 }> <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } >
<Card className={ classes.root }> <Card className={ classes.root }>
{ crop.covers && crop.covers.length > 0 && <CardMedia className={ classes.media } title={ crop.name } image={ `/proxy/uploads/d${crop.covers[0].storagePath}` } /> }
<CardHeader title={ <CardHeader title={
<Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }> <Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
{ crop.name } { crop.name }
</Link> </Link>
}/> }/>
<CardContent> <CardContent>
{ crop.shortName } <Number value={ crop.accessionCount } />
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Grid>
......
...@@ -5,14 +5,12 @@ import RepositoryImage from 'model/repository/RepositoryImage'; ...@@ -5,14 +5,12 @@ import RepositoryImage from 'model/repository/RepositoryImage';
/* /*
* Defined in Swagger as '#/definitions/CropDetails' * Defined in Swagger as '#/definitions/CropDetails'
*/ */
class CropDetails { class CropDetails extends Crop {
public accessionCount: number; public accessionCount: number;
public blurb: Article; public blurb: Article;
public covers: RepositoryImage[]; public covers: RepositoryImage[];
public crop: Crop;
public overview: any; public overview: any;
} }
export default CropDetails; export default CropDetails;
...@@ -8,7 +8,7 @@ const URL_LIST_CROPS = UrlTemplate.parse(`/api/v1/crops`); ...@@ -8,7 +8,7 @@ const URL_LIST_CROPS = UrlTemplate.parse(`/api/v1/crops`);
const URL_SAVE_CROP = `/api/v1/crops/save`; const URL_SAVE_CROP = `/api/v1/crops/save`;
const URL_DELETE_CROP = UrlTemplate.parse(`/api/v1/crops/{shortName}`); const URL_DELETE_CROP = UrlTemplate.parse(`/api/v1/crops/{shortName}`);
const URL_GET_CROP = UrlTemplate.parse(`/api/v1/crops/{shortName}`); const URL_GET_CROP = UrlTemplate.parse(`/api/v1/crops/{shortName}`);
const URL_GET_CROP_DETAILS = UrlTemplate.parse(`/api/v1/crops/{shortName}/details/{lang}`); const URL_GET_CROP_DETAILS = UrlTemplate.parse(`/api/v1/crops/{shortName}/details`);
export class CropService { export class CropService {
...@@ -88,14 +88,13 @@ export class CropService { ...@@ -88,14 +88,13 @@ export class CropService {
} }
/** /**
* getCropDetails at /api/v1/crops/{shortName}/details/{lang} * getCropDetails at /api/v1/crops/{shortName}/details
* *
* @param lang lang
* @param shortName shortName * @param shortName shortName
*/ */
public static getCropDetails(lang: string, shortName: string): Promise<CropDetails> { public static getCropDetails(shortName: string): Promise<CropDetails> {
const apiUrl = URL_GET_CROP_DETAILS.expand({lang, shortName}); const apiUrl = URL_GET_CROP_DETAILS.expand({shortName});
// console.log(`Fetching from ${apiUrl}`); // console.log(`Fetching from ${apiUrl}`);
const content = { /* No content in request body */ }; const content = { /* No content in request body */ };
......
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