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