Commit 16ddf98e authored by Matija Obreza's avatar Matija Obreza

Testing Grid

Grid applied to accession and inventory details pages
parent b46143cb
......@@ -26,6 +26,7 @@ const styles = (theme) => createStyles({
item: {
display: 'inline-grid',
gridColumn: 'span 12',
height: '100%',
},
xs: (props: any) => ({
[theme.breakpoints.up('xs')]: {
......
......@@ -24,6 +24,7 @@ import Table, { TextAlign } from '@gringlobal/client/ui/common/table/Table';
import { CooperatorOwnedTableConfiguration as TableConfiguration } from '@gringlobal/client/ui/common/table/TableConfiguration';
import { PageSection } from '@gringlobal/client/ui/common/layout/Section';
import Narrative from '@gringlobal/client/ui/common/Narrative';
import { GridContainer, GridItem } from '@gringlobal/client/ui/common/grid';
interface ICropTraitDetailsPage extends React.ClassAttributes<any>, WithTranslation {
......@@ -95,77 +96,81 @@ class CropTraitDetailsPage extends React.Component<ICropTraitDetailsPage> {
<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 && <Narrative>{ cropTrait.description }</Narrative> }
<Properties>
{ cropTrait.crop &&
<PropertiesItem title={ t('client:model.CropTrait.crop') }>
<CropLink crop={ cropTrait.crop } />
<GridContainer spacing="1rem">
<GridItem>
<Card>
<CardHeader
title={ cropTrait.title || cropTrait.codedName }
subheader={ <code>{ cropTrait.codedName }</code> }
/>
<CardContent>
{ cropTrait.description && <Narrative>{ cropTrait.description }</Narrative> }
<Properties>
{ cropTrait.crop &&
<PropertiesItem title={ t('client:model.CropTrait.crop') }>
<CropLink crop={ cropTrait.crop } />
</PropertiesItem>
}
<PropertiesItem title={ t('client:model.CropTrait.dataTypeCode') }>
<CodeValueDisplay codeGroup={ CropTrait.CodeValues.dataTypeCode } value={ cropTrait.dataTypeCode } />
</PropertiesItem>
}
<PropertiesItem title={ t('client:model.CropTrait.dataTypeCode') }>
<CodeValueDisplay codeGroup={ CropTrait.CodeValues.dataTypeCode } value={ cropTrait.dataTypeCode } />
</PropertiesItem>
<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 title={ t('client:model.CropTrait.categoryCode') }>
<CodeValueDisplay codeGroup={ CropTrait.CodeValues.categoryCode } value={ cropTrait.categoryCode } />
</PropertiesItem>
)) }
{ cropTrait.originalValueTypeCode &&
<PropertiesItem title={ t('client:model.CropTrait.originalValueTypeCode') }>
<CodeValueDisplay codeGroup={ CropTrait.CodeValues.originalValueTypeCode } value={ cropTrait.originalValueTypeCode } />
</PropertiesItem>
}
{ ['isArchived', 'isCoded', 'isPeerReviewed'].map((property) => (
<PropertiesItem key={ property } title={ t(`client:model.CropTrait.${property}`, `client:model._.${property}`) }>
{ YesNoToBoolean(cropTrait[property]) ? t('common:label.yes') : t('common:label.no') }
</PropertiesItem>
)) }
{ cropTrait.createdDate &&
<PropertiesItem title={ t('client:model._.createdDate') }>
<PrettyDate value={ cropTrait.createdDate } />
</PropertiesItem>
}
{ cropTrait.modifiedDate &&
<PropertiesItem title={ t('client:model._.modifiedDate') }>
<PrettyDate value={ cropTrait.modifiedDate } />
</PropertiesItem>
}
{ cropTrait.ownedDate &&
<PropertiesItem title={ t('client:model._.ownedDate') }>
<PrettyDate value={ cropTrait.ownedDate } />
</PropertiesItem>
}
{ cropTrait.ownedBy &&
<PropertiesItem title={ t('client:model._.ownedBy') }>
<CooperatorLink cooperator={ cropTrait.ownedBy }/>
</PropertiesItem>
}
{ cropTrait.note &&
<PropertiesItem title={ t('client:model._.note') }>
{ cropTrait.note }
</PropertiesItem>
}
</Properties>
</CardContent>
<CardActions>
<Button variant="contained" color="secondary" onClick={ this.handleEdit }>
{ t('common:action.edit') }
</Button>
<Button variant="outlined" color="secondary" onClick={ this.handleRemove }>
{ t('common:action.remove') }
</Button>
</CardActions>
{ YesNoToBoolean(cropTrait.isCoded) && cropTrait.codes && cropTrait.codes.length > 0 &&
{ [ '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 } />
</PropertiesItem>
}
{ ['isArchived', 'isCoded', 'isPeerReviewed'].map((property) => (
<PropertiesItem key={ property } title={ t(`client:model.CropTrait.${property}`, `client:model._.${property}`) }>
{ YesNoToBoolean(cropTrait[property]) ? t('common:label.yes') : t('common:label.no') }
</PropertiesItem>
)) }
{ cropTrait.createdDate &&
<PropertiesItem title={ t('client:model._.createdDate') }>
<PrettyDate value={ cropTrait.createdDate } />
</PropertiesItem>
}
{ cropTrait.modifiedDate &&
<PropertiesItem title={ t('client:model._.modifiedDate') }>
<PrettyDate value={ cropTrait.modifiedDate } />
</PropertiesItem>
}
{ cropTrait.ownedDate &&
<PropertiesItem title={ t('client:model._.ownedDate') }>
<PrettyDate value={ cropTrait.ownedDate } />
</PropertiesItem>
}
{ cropTrait.ownedBy &&
<PropertiesItem title={ t('client:model._.ownedBy') }>
<CooperatorLink cooperator={ cropTrait.ownedBy }/>
</PropertiesItem>
}
{ cropTrait.note &&
<PropertiesItem title={ t('client:model._.note') }>
{ cropTrait.note }
</PropertiesItem>
}
</Properties>
</CardContent>
<CardActions>
<Button variant="contained" color="secondary" onClick={ this.handleEdit }>
{ t('common:action.edit') }
</Button>
<Button variant="outlined" color="secondary" onClick={ this.handleRemove }>
{ t('common:action.remove') }
</Button>
</CardActions>
</Card>
</GridItem>
{ YesNoToBoolean(cropTrait.isCoded) && cropTrait.codes && cropTrait.codes.length > 0 &&
<GridItem>
<PageSection title={ t('crop.public.p.traitsDetails.codes') }>
<Table
noWrap
......@@ -177,9 +182,9 @@ class CropTraitDetailsPage extends React.Component<ICropTraitDetailsPage> {
total={ cropTrait.codes.length }
/>
</PageSection>
}
</Card>
</div>
</GridItem>
}
</GridContainer>
) }
</>
);
......
......@@ -199,8 +199,8 @@ class AdjustQuantity extends React.Component<WithTranslation> {
return (
<>
<ContentHeader title={ t('inventory.adjust.title') } />
<GridContainer spacing="1rem" >
<GridItem xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<GridContainer>
<GridItem>
<Card>
<CardContent>
<Form onSubmit={ this.scanBarcode } initialValues={ { barcode } } render={ ({ handleSubmit }) => (
......@@ -222,7 +222,7 @@ class AdjustQuantity extends React.Component<WithTranslation> {
</GridItem>
{ inventory &&
<GridItem xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<GridItem>
<Card>
<CardHeader title={ <>{ inventory.inventoryNumber }</> } />
<CardContent>
......@@ -309,7 +309,7 @@ class AdjustQuantity extends React.Component<WithTranslation> {
</GridItem>
}
{ actions &&
<GridItem xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<GridItem md={ 6 }>
<Card>
<CardHeader title={ t('inventory.actions.title') } />
<InventoryActionsTable actions={ actions } />
......@@ -318,7 +318,7 @@ class AdjustQuantity extends React.Component<WithTranslation> {
}
{ relatedInventories &&
<GridItem xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<GridItem md={ 6 }>
<Card>
<CardHeader title={ t('inventory.adjust.related') } />
<Table
......
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