DatasetDisplay.tsx

import * as React from 'react';
import { withStyles } from 'material-ui/styles';

import {log} from 'utilities/debug';

import { Dataset } from 'model/dataset.model';
import { Descriptor } from 'model/descriptor.model';
import { RepositoryFile } from 'model/repositoryFile.model';
import { Creator } from 'model/creator.model';
import { AVAILABLE_LICENSES } from 'model/license.model';

import confirm from 'utilities/confirmAlert';
import Authorize from 'ui/common/authorized/Authorize';
import Section from 'ui/common/layout/Section';
import Markdown from 'ui/catalog/markdown';
import PrettyDate from 'ui/common/time/PrettyDate';
import { DatasetLink, DescriptorLink, ExternalLink, PartnerLink } from 'ui/catalog/Links';

import LocationMap from './LocationMap';
import Button from 'material-ui/Button';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
import List, { ListItem, ListItemText } from 'material-ui/List';

import AccessionIdentifiersTable from 'ui/catalog/accession/IdentifiersTable';
import Permissions from 'ui/common/permission/Permissions';
import CropChips from 'ui/catalog/crop/CropChips';

import Card, {CardHeader, CardContent, CardActions } from 'ui/common/Card';

const styles = (theme) => ({
    root: {
        flexGrow: 1,
    },
    gray: {
        backgroundColor: '#f3f2ee',
    },
    title: {
        fontSize: '30px',
        fontWeight: 'bold',
        [theme.breakpoints.down('md')]: {
            fontSize: '24px',
        },
    },
    grayRowsEven: theme.table.grayRowsEven,
    grayRowsOdd: theme.table.grayRowsOdd,
    green: {
        color: '#88ba42',
    },
    grayTitleBig: {
        fontSize: '14px',
        fontWeight: 'bold',
        lineHeight: '22px',
        padding: '15px 14px',
        margin: '0 1px',
        [theme.breakpoints.down('md')]: {
            marginLeft: '0',
            marginRight: '0',
        },
    },
    grayTitleSmall: {
        fontSize: '14px',
        lineHeight: '22px',
        padding: '10px 14px',
        margin: '0 1px',
        minHeight: '100%',
        [theme.breakpoints.down('md')]: {
            marginLeft: '0',
            marginRight: '0',
        },
    },
    rightTextWrapper: {
        display: 'flex',
        justifyContent: 'space-between',
        margin: '0 1px',
        padding: '10px 20px',
        [theme.breakpoints.down('md')]: {
            marginLeft: '0',
            marginRight: '0',
            padding: '10px 14px',
        },
    },
    buttonGreen: theme.buttons.green,
    dataContainer: {
        flexWrap: 'nowrap',
        marginBottom: '2px',
        wordWrap: 'break-word',
        [theme.breakpoints.down('md')]: {
            flexWrap: 'wrap',
        },
    },
    dataName: {
        [theme.breakpoints.down('lg')]: {
            display: 'none',
        },
    },
    margin1: {
        margin: '0 1px',
        [theme.breakpoints.down('md')]: {
            margin: '0',
        },
    },
    grayTitleA: {
        display: 'block',
        padding: '10px 14px',
    },
    centerAlign : {
         [theme.breakpoints.down('lg')]: {
            justifyContent: 'center',
         },
     },
    pdTop0: {
        [theme.breakpoints.down('md')]: {
            paddingTop: '0',
            marginLeft: '0',
            marginRight: '0',
        },
    },
});

interface IDetailInfoProps extends React.ClassAttributes<any> {
    classes: any;
    dataset: Dataset;
    publishDataset?: (dataset: Dataset, publish?: boolean) => any;
    deleteDataset?: (dataset: Dataset) => any;
}

class DetailInfo extends React.Component<IDetailInfoProps, any> {
    private onPublish = (e) => {
      const {dataset, publishDataset} = this.props;

      if (! publishDataset) {
        return;
      }

      confirm(<span>Publish <b>{ dataset.title }</b>?</span>, {
        description: `After publishing the dataset no changes are permitted, a new version must be created.`,
        confirmLabel: 'Publish',
        abortLabel: 'Cancel',
      }).then(() => {
        log('Publishing dataset', dataset);
        publishDataset(dataset);
      }).catch(() => {
          // don't
      });
    }

    private onUnpublish = (e) => {
      const {dataset, publishDataset} = this.props;

      if (! publishDataset) {
        return;
      }

      confirm(<span>Unpublish <b>{ dataset.title }</b>?</span>, {
          // description: `Deleting the descriptor is only possible when there is no associated data.`,
          confirmLabel: 'Unpublish',
          abortLabel: 'Cancel',
      }).then(() => {
        log('Publishing dataset', dataset);
        publishDataset(dataset, false);
      }).catch(() => {
          // don't
      });
    }

    private onDelete = (e) => {
      const {dataset, deleteDataset} = this.props;

      if (! deleteDataset) {
        return;
      }

      confirm(<span>Delete <b>{ dataset.title }</b>?</span>, {
          description: `Deleting the dataset will remove all related data.`,
          confirmLabel: 'Delete',
          abortLabel: 'Cancel',
      }).then(() => {
          deleteDataset(dataset);
      }).catch(() => {
          // don't
      });
    }

    public render() {
        const { classes, dataset, publishDataset, deleteDataset } = this.props;

        if (! dataset) {
          log('Waiting for dataset.');
          return null;
        }

        const license = dataset.rights && AVAILABLE_LICENSES.find((e) => e.code === dataset.rights);

        return (
            <div className={ classes.root }>
              <Grid container spacing={ 0 }>
                <Grid item xs={ 12 } className="p-10" id="dataset-top">
                    <Card className={ classes.card } square>
                        <CardHeader className={ classes.cardHeader }
                                    title={ <Markdown basic source={ dataset.title } /> }
                                    subheader={ <small>{ dataset.versionTag }</small> } />
                        <CardContent className={ classes.cardContent }>
                          { dataset.description && <Markdown className="mb-20" source={ dataset.description } /> }

                          <Properties>
                            <PropertiesItem title="Data provider:"><PartnerLink to={ dataset.owner } /></PropertiesItem>
                            { dataset.crops && dataset.crops.length > 0 &&
                              <PropertiesItem title="Crop:"><CropChips crops={ dataset.crops } /></PropertiesItem>
                            }
                            <PropertiesItem title="Number of accessions:">{ dataset.accessionCount }</PropertiesItem>
                            <PropertiesItem title="Number of traits:">{ dataset.descriptorCount }</PropertiesItem>
                            <PropertiesItem title="Upload date:"><PrettyDate value={ dataset.createdDate } /></PropertiesItem>
                          </Properties>
                      </CardContent>
                      { publishDataset && (dataset._permissions.write || dataset._permissions.delete) && (
                        <CardActions>
                          { dataset.published ?
                            <Authorize role="ROLE_ADMINISTRATOR">
                              <Button onClick={ this.onUnpublish } type="button">Un-publish</Button>
                            </Authorize>
                            :
                            <Button onClick={ this.onPublish } type="button">Publish</Button>
                          }
                          { ! dataset.published && dataset._permissions.write && <DatasetLink edit to={ dataset }><Button>Edit</Button></DatasetLink> }
                          { ! dataset.published && deleteDataset && dataset._permissions.delete && <Button onClick={ this.onDelete } type="button">Delete</Button> }
                          { dataset._permissions.manage && <Permissions clazz={ dataset.clazz } id={ dataset.id } /> }
                        </CardActions>
                      ) }
                  </Card>
                </Grid>
              </Grid>

              <Grid container spacing={ 0 }>
                <Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10" id="dataset-metadata">
                  <Section title="Dataset metadata">
                    { dataset.creators && dataset.creators.length > 0 &&
                      <div>
                        <div className="pt-15 pb-15 pl-20 pr-20">
                            <h4 className="font-bold m-0">Creators</h4>
                        </div>
                        <Divider/>
                        <Grid container spacing={ 0 } className="p-20">
                            <Grid item xs={ 12 }>
                              <Properties>
                                { dataset.creators && dataset.creators.map((e: Creator, i) => (
                                  <PropertiesItem title={ e.role } key={ e.id }>
                                      <p><b>{ e.fullName }</b></p>
                                      { e.institutionalAffiliation && <p>{ e.institutionalAffiliation }</p> }
                                      { e.email && <div><a href={ `mailto:${e.email}` }>{ e.email }</a></div> }
                                  </PropertiesItem>
                                )) }
                              </Properties>
                            </Grid>
                        </Grid>
                        <Divider/>
                      </div>
                    }

                      <div className="pt-15 pb-15 pl-20 pr-20">
                          <h4 className="font-bold m-0">Dataset use and licensing</h4>
                      </div>
                      <Divider/>
                      { license &&
                        <Grid container spacing={ 0 } className="p-20">
                            <Properties>
                                <PropertiesItem title="Licensed under:"><b>{ license.code }</b> { license.title }</PropertiesItem>
                                { license.url &&
                                  <PropertiesItem title="More information:">
                                    <ExternalLink link={ license.url }>{ license.url }</ExternalLink>
                                  </PropertiesItem>
                                }
                            </Properties>
                        </Grid>
                      }

                      <Divider/>
                      <div className="pt-15 pb-15 pl-20 pr-20">
                          <h4 className="font-bold m-0">
                              Data and resources
                          </h4>
                      </div>
                      <Divider/>
                      <Grid container spacing={ 0 } className="p-20">
                          <Grid item xs={ 12 }>
                            <Properties>
                              {
                                  dataset.repositoryFiles && dataset.repositoryFiles.map((e: RepositoryFile) => (
                                      <PropertiesItem key={ e.uuid } title={
                                        <a href={ `/proxy/api/v0/repository/download/${e.uuid}` }>
                                          <Button raised component="span" className={ `${classes.buttonGreen} ${classes.button}` }>
                                            Download
                                          </Button>
                                        </a>
                                       }>
                                          <p>{ e.title || 'Dataset file' }</p>
                                          <p>{ e.originalFilename }</p>
                                      </PropertiesItem>
                                  ))
                              }
                            </Properties>
                          </Grid>
                      </Grid>
                      <Divider/>
                      <div className="pt-15 pb-15 pl-20 pr-20">
                          <h4 className="font-bold m-0">
                              Partner contact information
                          </h4>
                      </div>
                      <Divider/>
                      <Grid container spacing={ 0 } className="p-20">
                          <Grid item xs={ 12 }>
                              <Grid container spacing={ 0 }>
                                  <Properties>
                                      { dataset.owner.email &&
                                          <PropertiesItem title="Email:">
                                              <div><a href={ `mailto:${dataset.owner.email}` }>{ dataset.owner.email }</a></div>
                                          </PropertiesItem> }
                                      { dataset.owner.phone && <PropertiesItem title="Phone number:">{ dataset.owner.phone }</PropertiesItem> }
                                      { dataset.owner.address && <PropertiesItem title="Address:">{ dataset.owner.address }</PropertiesItem> }
                                  </Properties>
                              </Grid>
                          </Grid>
                      </Grid>
                      <Divider/>
                      <div className="pt-15 pb-15 pl-20 pr-20">
                          <h4 className="font-bold m-0">
                              Other Metadata
                          </h4>
                      </div>
                      <Divider/>
                      <Grid container spacing={ 0 } className="p-20">
                          <Grid item xs={ 12 }>
                              <Grid container spacing={ 0 }>
                                  <Properties>
                                      <PropertiesItem title="Date of dataset:">{ dataset.created }</PropertiesItem>
                                      <PropertiesItem title="Related resources:">{ dataset.source }</PropertiesItem>
                                      <PropertiesItem title="Metadata create date:">
                                          { dataset.createdDate && <PrettyDate value={ dataset.createdDate } /> }
                                      </PropertiesItem>
                                      <PropertiesItem title="Metadata updated date:">
                                          { dataset.lastModifiedDate && <PrettyDate value={ dataset.lastModifiedDate } /> }
                                      </PropertiesItem>
                                  </Properties>
                              </Grid>
                          </Grid>
                      </Grid>
                  </Section>
                </Grid>
              </Grid>

              <Grid container spacing={ 0 }>
                  { dataset.locations && dataset.locations.length > 0 && (
                      <Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10" id="dataset-locations">
                          <Section title="Locations">
                              <div className="p-20">
                                  <LocationMap locations={ dataset.locations } classes={ {} }/>
                              </div>
                          </Section>
                      </Grid>
                  ) }

                  { dataset.descriptors && dataset.descriptors.length > 0 && (
                    <Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10" id="dataset-traits">
                      <Section title="Traits observed">
                        <List>
                        { dataset.descriptors.map((descriptor: Descriptor) => (
                          <ListItem key={ descriptor.uuid } className="">
                            <ListItemText primary={ <DescriptorLink to={ descriptor } /> }
                              secondary={ descriptor.description && <Markdown source={ descriptor.description } /> } />
                          </ListItem>
                        )) }
                        </List>
                      </Section>
                    </Grid>
                  ) }

                  { dataset.accessionIdentifiers && dataset.accessionIdentifiers.length > 0 && (
                    <Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10" id="dataset-accessions">
                      <Section title="Accessions evaluated">
                          <div className="p-20">
                              <AccessionIdentifiersTable accessionIdentifiers={ dataset.accessionIdentifiers } />
                          </div>
                      </Section>
                    </Grid>
                  ) }
              </Grid>
            </div>
        );
    }

}

export default ((withStyles as any)(styles)(DetailInfo));