DashboardTableRow.tsx 3.36 KB
Newer Older
1 2 3 4 5 6 7
import * as React from 'react';
import { translate } from 'react-i18next';

// ui
import { TableCell, TableRow } from 'ui/common/tables';
import PrettyDate from 'ui/common/time/PrettyDate';
import Permissions from 'ui/common/permission/Permissions';
Matija Obreza's avatar
Matija Obreza committed
8
import Markdown from 'ui/common/markdown';
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

// model
import { PublishState } from 'model/common.model';

import Button from '@material-ui/core/Button';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CropChips from 'crop/ui/c/CropChips';

const StatusCell = ({ publishState, t }: { publishState: PublishState, t: any }) => {
  switch (publishState) {
    case PublishState.PUBLISHED:
      return <TableCell style={ { color: '#88bb41', fontSize: '1rem' } }>{ t('status.published') }</TableCell>;
    case PublishState.REVIEWING:
      return <TableCell style={ { color: '#06a7ed', fontSize: '1rem' } }>{ t('status.inReview') }</TableCell>;
    default:
      return <TableCell style={ { color: '#ed9506', fontSize: '1rem' } }>{ t('status.inProgress') }</TableCell>;
  }
};

class DashboardTableRow extends React.Component<any> {

  public state = {
    inEditList: false,
  };

  private onCheckboxChange = (e, isChecked) => {
    const { row, addToEditAction, removeFromEditAction } = this.props;
    isChecked ? addToEditAction(row) : removeFromEditAction(row);

    this.setState({ ...this.state, inEditList: isChecked });
  }

  public componentWillMount() {
    const { inEditList } = this.props;
    this.setState({ ...this.state, inEditList });
  }

  public componentWillReceiveProps(nextProps) {
    const { inEditList } = nextProps;
    this.setState({ ...this.state, inEditList });
  }

  public render() {
    const { row, tab, index, isEditMode, DataLink, dataClassName, t } = this.props;
    const { inEditList } = this.state;

    return (
      <TableRow key={ row.id }>
        <TableCell className="font-bold" style={ { paddingRight: '8px', paddingLeft: '8px' } }>
          <FormControlLabel
            control={
              <Checkbox
                checked={ inEditList }
                onChange={ this.onCheckboxChange }
                style={ !isEditMode ? { opacity: 0 } : {} }
              />
            }
            label={ <b style={ { fontSize: '1rem' } }>{ index + 1 }</b> }
          />
        </TableCell>
        <TableCell className="font-bold" style={ { fontSize: '1rem' } }>
          <DataLink tab={ tab } row={ row }>{ <Markdown basic source={ row.title }/> || (<i>{ t('common:label.untitled') }</i>) }</DataLink>
        </TableCell>
        <TableCell><CropChips crops={ row.crops || [row.crop] }/></TableCell>
        <TableCell style={ { fontSize: '1rem' } }>{ row.owner.shortName }</TableCell>
        <TableCell style={ { fontSize: '1rem' } }>{ row.lastModifiedDate && <PrettyDate value={ row.lastModifiedDate }/> }</TableCell>
        <StatusCell t={ t } publishState={ row.state }/>
        <TableCell style={ { fontSize: '1rem' } }>
          <DataLink tab={ tab } row={ row }>
            <Button variant="raised">{ row.state === PublishState.DRAFT && row._permissions.write ? t('common:action.edit') : t('common:action.view') }</Button>
          </DataLink>
          { row._permissions.manage && <Permissions clazz={ dataClassName } id={ row.id }/> }
        </TableCell>
      </TableRow>
    );
  }
}

export default translate()(DashboardTableRow);