Commit d3e29bb8 authored by Matija Obreza's avatar Matija Obreza

Crop Traits: UI updates

parent 444024da
......@@ -12,10 +12,10 @@ import CropTrait from '@gringlobal/client/model/gringlobal/CropTrait';
import TranslatedCropTrait from '@gringlobal/client/model/gringlobal/TranslatedCropTrait';
// Ui
import ContentHeader from '@gringlobal/client/ui/common/heading/ContentHeader';
import { Button, Card, CardActions, CardContent } from '@material-ui/core';
import { Button, Card, CardActions, CardContent, CardHeader } from '@material-ui/core';
import { Properties, PropertiesItem } from '@gringlobal/client/ui/common/Properties';
import Loading from '@gringlobal/client/ui/common/Loading';
import { CooperatorLink } from 'ui/common/Links';
import { CooperatorLink, CropLink } from 'ui/common/Links';
import PrettyDate from '@gringlobal/client/ui/common/time/PrettyDate';
import { CodeValueDisplay } from 'common/CodeValue';
import PageTitle from '@gringlobal/client/ui/common/PageTitle';
......@@ -90,22 +90,22 @@ class CropTraitDetailsPage extends React.Component<ICropTraitDetailsPage> {
return (
<>
<PageTitle title={ t('crop.public.p.traitsDetails.title') }/>
<PageTitle title={ cropTrait && (cropTrait.title || cropTrait.codedName) || t('crop.public.p.traitsDetails.title') }/>
<ContentHeader title={ t('crop.public.p.traitsDetails.title') }/>
{ loading && <Loading /> }
{ cropTrait && (
<div>
<Card>
<CardHeader
title={ cropTrait.title || cropTrait.codedName }
subheader={ <code>{ cropTrait.codedName }</code> }
/>
<CardContent>
{ cropTrait.description && <p>{ cropTrait.description }</p> }
<Properties>
{ ['codedName', 'title', 'description', 'maxLength', 'numericFormat', 'numericMaximum', 'numericMinimum', 'ontologyUrl', 'originalValueFormat'].map((property) => property && (
<PropertiesItem key={ property } title={ t(`client:model.CropTrait.${property}`, `client:model._.${property}`) }>
{ cropTrait[property] }
</PropertiesItem>
)) }
{ cropTrait.crop &&
<PropertiesItem title={ t('client:model.CropTrait.crop') }>
{ cropTrait.crop.name }
<CropLink crop={ cropTrait.crop } />
</PropertiesItem>
}
<PropertiesItem title={ t('client:model.CropTrait.dataTypeCode') }>
......@@ -114,6 +114,11 @@ class CropTraitDetailsPage extends React.Component<ICropTraitDetailsPage> {
<PropertiesItem title={ t('client:model.CropTrait.categoryCode') }>
<CodeValueDisplay codeGroup={ CropTrait.CodeValues.categoryCode } value={ cropTrait.categoryCode } />
</PropertiesItem>
{ [ 'maxLength', 'originalValueFormat', 'numericFormat', 'numericMinimum', 'numericMaximum', 'ontologyUrl' ].map((property) => property && (
<PropertiesItem key={ property } title={ t(`client:model.CropTrait.${property}`, `client:model._.${property}`) }>
{ cropTrait[property] }
</PropertiesItem>
)) }
{ cropTrait.originalValueTypeCode &&
<PropertiesItem title={ t('client:model.CropTrait.originalValueTypeCode') }>
<CodeValueDisplay codeGroup={ CropTrait.CodeValues.originalValueTypeCode } value={ cropTrait.originalValueTypeCode } />
......
......@@ -17,7 +17,6 @@ export const AccessionLink = ({ accession }: { accession: Accession }): JSX.Elem
</Link>
);
export const InventoryLink = ({ inventory }: { inventory: Inventory }): JSX.Element => (
<Link to={ `/inventory/${ inventory.id }` }>
{ inventory.inventoryNumber }
......
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