TodoVisitStatusUpdate.js

/**
 * @copyright 2015, Prometheus Research, LLC
 */
'use strict';

import React from 'react';
import * as data from 'rex-widget/data';
import {WithFormValue, Field} from 'rex-widget/form';
import {Preloader} from 'rex-widget/ui';
import {VBox} from 'rex-widget/layout';
import RadioGroup from 'rex-widget/lib/form/RadioGroup';
import {groupBy} from 'lodash';
import {Card} from '@prometheusresearch/react-ui';

const NO_TODO = 'No ToDo items associated';

function Visit({title,
                status,
                todo,
                visitOptions,
                onChangeVisit,
                todoOptions,
                onChangeTodo}) {
  return (
    <VBox paddingBottom={5}>
      <Card header={title} padding={3}>
        <RadioGroup
          horizontal
          options={visitOptions} 
          value={status}
          onChange={onChangeVisit}
          />
        {todo ? todo.map(t => <Todo {...t} />) : NO_TODO}
      </Card>
    </VBox>
  );
}

function Todo(props) {
  let {title} = props;
  return (
    <VBox padding={3}>
      <Card header={title} padding={3}>
        test
      </Card>
    </VBox>
  );
}


@data.Fetch(({visitTodo, id}) => {
  let fetch = {};
  if (id) {
    fetch.visitTodo = visitTodo.params({id});
  }
  return fetch;
})
class TodoVisitStatusUpdate extends React.Component {

  render() {
    let {value} = this.props.formValue;
    console.log('VAL', value);
    return (
      <Field {...this.props} readOnly={false}>
        {value === undefined ? <Preloader/> : this.renderValue(value)}
      </Field>
    );
  }

  renderValue(value) {
    let todo = groupBy(value.todo, 'visit_id');
    let {options: visitOptions} = this.props.visitFields[0];
    let {options: todoOptions} = this.props.todoFields[0];
    let toOption = (o) => ({id: o.value, title: o.label});
    return (
      <div>
        {value.visit.map(v =>
          <Visit
            key={v.id}
            id={v.id}
            title={v.title}
            status={v.status}
            todo={todo[v.id]}
            visitOptions={visitOptions.map(toOption)}
            onChangeVisit={this.onChange.bind(this, 'visit', v.id)}
            todoOptions={todoOptions.map(toOption)}
          />
        )}
      </div>
    );
  }

  onChange(what, id, status) {
    console.log(what, id, status);
    let {formValue} = this.props;
    let {value} = formValue;
    let newValue = {...value, [what]: value[what].map(
      (v) => (v.id == id ? {...v, status} : v)
    )};
    console.log(newValue);
    formValue.update(newValue);
  }

  componentWillReceiveProps(nextProps) {
    let {formValue} = nextProps;
    let {visitTodo} = nextProps.fetched;
    if (formValue.value === undefined && visitTodo.data) {
      formValue.update(visitTodo.data);
    }
  }

  componentDidMount() {
    let {setDataParams, formValue} = this.props;
    let studyEnrollment = formValue.root.value.study_enrollment
                          || [{id: null}];
    let {id} = studyEnrollment[0];
    setDataParams({id});
  }
}

export default WithFormValue(TodoVisitStatusUpdate);