DescriptorUpload.tsx 6.05 KB
Newer Older
1
2
3
4
5
6
7
8
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

import * as React from 'react';
// import {connect} from 'react-redux';
// import {bindActionCreators} from 'redux';

import {log} from 'utilities/debug';

import { CSV, ICsvConfiguration } from 'utilities/CSV';
import { Descriptor } from 'model/descriptor.model';
import { VocabularyTerm } from 'model/vocabulary.model';

import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';

import Grid from 'material-ui/Grid';
import Paper from 'material-ui/Paper';
import Button from 'material-ui/Button';
import FormControl from 'material-ui/Form/FormControl';
import Input from 'material-ui/Input';
import InputLabel from 'material-ui/Input/InputLabel';


interface IDescriptorUpload extends React.ClassAttributes<any> {
  className?: any;
  onImport: (descriptors: Descriptor[]) => any;
}

// Page to edit a descriptor list
class DescriptorUpload extends React.Component<IDescriptorUpload, any> {

    public constructor(props: any) {
        super(props);
        this.state = { uploader: false, csvDescriptors: '', uploadedDescriptors: null };
    }

    private makeTerms = (codes, titles, descriptions) => {
      const terms: VocabularyTerm[] = [];
      if (! codes) {
        return terms;
      }
      const c: string[] = codes.split(/\n/g);
      const t: string[] = titles.split(/\n/g);
      const d: string[] = descriptions.split(/\n/g);

      // console.log(c, t, d);
      for (let i = 0; i < c.length; i++) {
        const term: VocabularyTerm = new VocabularyTerm();
        term.code = c[i].trim();
49
50
        term.title = t.length > i ? t[i].trim() : c[i].trim();
        term.description = d.length > i ? d[i].trim() : null;
51
52
53
54
55
56
57

        terms.push(term);
      }

      return terms;
    }

58
59
60
61
62
63
64
65
66
67
68
69
    public dataPasted = (e) => {
      e.preventDefault();
      console.log('Pasted', e.clipboardData);
      // console.log(e.clipboardData.getData('text/plain'));
      this.parseCsv(e.clipboardData.getData('text/plain'));
    }

    public textBlurred = (e) => {
      this.parseCsv(e.target.value);
    }

    private parseCsv(csvText: string) {
70
      // log('CSV text', csvText);
Matija Obreza's avatar
Matija Obreza committed
71
72
73
      if (! csvText) {
        return;
      }
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

      const config: ICsvConfiguration = CSV.detectConfiguration(csvText);

      log('CSV config', config);

      const newDescriptors: Descriptor[] = [];

      CSV.parse(csvText, config, {
        headers: [
          'crop', 'versionTag', 'title', 'category', '_keyDescriptor', 'description', 'dataType',
          'integerOnly', 'minValue', 'maxValue', 'vocabularyId', 'code', 'code_title', 'code_description',
          'published', 'columnName', 'uom', 'headingNumber'] })

        .on('json', (jsonObj) => {

          if (jsonObj.minValue) { jsonObj.minValue = +jsonObj.minValue; }
          if (jsonObj.maxValue) { jsonObj.maxValue = +jsonObj.maxValue; }
          if (jsonObj.integerOnly) { jsonObj.integerOnly = jsonObj.integerOnly === 'TRUE' ? true : false; }
          if (jsonObj._keyDescriptor) {
            jsonObj.key = jsonObj._keyDescriptor === 'TRUE' ? true : false;
            delete jsonObj._keyDescriptor;
          }

          if (jsonObj.code) {
              jsonObj.terms = this.makeTerms(jsonObj.code, jsonObj.code_title, jsonObj.code_description);
              delete jsonObj.code;
              delete jsonObj.code_title;
              delete jsonObj.code_description;
          }

          const d: Descriptor = new Descriptor(jsonObj);

          newDescriptors.push(d);
          // log(d);

        }).on('end', () => {
          log('All CSV parsed');
          this.setState({ ...this.state, uploader: true, uploadedDescriptors: newDescriptors });
          // this.props.onAccessionsUpdated(newIdentifiers);
        });
    }

    public clickImport = (e) => {
      // log('Sending', this.state.uploadedDescriptors);
      if (this.state.uploadedDescriptors && this.state.uploadedDescriptors.length > 0) {
        this.props.onImport(this.state.uploadedDescriptors);
      } else {
        log('Nothing to import');
      }
    }

    public render() {
        return (
          <div>
            <Paper className={ `${this.props.className} p-20 mb-20` }>
Matija Obreza's avatar
Matija Obreza committed
129
130
131
132
133
134
135
136
137
              <div className="p-20 even-row">
                  <h4>INSTRUCTIONS FOR USE</h4>
                  <ul>
                      <li>Download the template from ...TBD...</li>
                      <li>Do not change header name in the template</li>
                      <li>Fill the template with the descriptor information, save it.</li>
                      <li>Copy and paste the table from Excel into the text field below.</li>
                  </ul>
              </div>
138
139
              <FormControl fullWidth>
                  <InputLabel>Descriptor definitions</InputLabel>
140
                  <Input onPaste={ this.dataPasted } placeholder="Paste descriptor data here (tab separated)" onBlur={ this.textBlurred }/>
141
142
143
144
145
              </FormControl>
            </Paper>

            { this.state.uploadedDescriptors ? (
              <div>
Matija Obreza's avatar
Matija Obreza committed
146
                <ContentHeaderWithButton title={ `Uploaded ${this.state.uploadedDescriptors.length} descriptor definitions` } buttons={
147
148
149
150
151
152
153
154
155
156
                  <Button raised onClick={ this.clickImport }>Import descriptors</Button>
                } />
                <Grid container spacing={ 24 }>
                { this.state.uploadedDescriptors.map((d, index) => (
                  <Grid item key={ index } xs={ 12 } md={ 6 } xl={ 4 }>
                    <DescriptorCard descriptor={ d } />
                  </Grid>
                )) }
                </Grid>
              </div>
Matija Obreza's avatar
Matija Obreza committed
157

158
            ) : (
Matija Obreza's avatar
Matija Obreza committed
159
            <ContentHeaderWithButton title="No descriptors uploaded" />
160

Matija Obreza's avatar
Matija Obreza committed
161
          ) }
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
          </div>
        );
    }
}
//
// const mapStateToProps = (state, ownProps) => ({
//   descriptorList: ownProps.descriptorList,
// });
//
// const mapDispatchToProps = (dispatch) => bindActionCreators({
//   addDescriptorToDescriptorList,
//   removeDescriptorFromDescriptorList,
// }, dispatch);
//
// export default connect(mapStateToProps, mapDispatchToProps)(DescriptorListEditPage);

export default DescriptorUpload;