<commit_before>import React from 'react';
import './Record.scss';
import Attribute from '../Attribute/Attribute';
import DeleteView from '../DeleteView/DeleteView';
import Dropdown from 'components/Dropdown';
import Popup from 'components/Popup';

// import { validateRecord } from '../../../utils/validators';

export class Record extends React.Component {
  constructor (props) {
    super(props);

    this.toggleAttributeVisibility = this.toggleAttributeVisibility.bind(this);
    this.updateRecordName = this.updateRecordName.bind(this);
    this.updateRecordType = this.updateRecordType.bind(this);
    this.updateRecordAttribute = this.updateRecordAttribute.bind(this);
    this.state = {
      showAttributes: false,
      mode: 'view',
      deleting: false,
      name: this.props.record.name,
      type: this.props.record.attributes.RecordType,
      attributes: this.props.record.attributes
    };
  }

  setMode (value) {
    this.setState({ mode: value });
  }

  // editRecord () {
  //   this.setMode('edit');
  //   this.setState({ showAttributes: true });
  // }

  // saveRecord () {
  //   this.setMode('view');
  // }

  // cancelRecordEdit () {
  //   this.setMode('view');
  // }

  toggleAttributeVisibility () {
    const currentVisibility = this.state.showAttributes;
    const newVisibility = !currentVisibility;
    this.setState({ showAttributes: newVisibility });
  }

  updateRecordName (recordName, recordId) {
    this.setState({
      name: recordName
    });
    const updatedRecordName = {
      name: recordName,
      recordId: recordId
    };
    this.props.editRecordAttribute(updatedRecordName);
  }

  updateRecordType (attribute, recordId) {
    const updatedRecordType = {
      type: attribute,
      recordId: recordId
    };
    this.props.editRecordAttribute(updatedRecordType);
  }

  updateRecordAttribute (attribute, attributeIndex, recordId) {
    this.setState({
      attributes: {
        [attributeIndex]: attribute
      }
    });
    const updatedRecordAttribute = { attribute, attributeIndex, recordId };
    this.props.editRecordAttribute(updatedRecordAttribute);
  }

  generateRecordObjects (record) {
    const recordObjects = [];
    recordObjects.push({ recordKey: 'Asiakirjatyypin tarkenne', name: record.name, type: '' });
    recordObjects.push({ recordKey: 'Tyyppi', name: record.attributes.RecordType, type: record.attributes.RecordType });
    return recordObjects;
  }

  generateRecordAttributes (records) {
    return records.map((record, index) => {
      return (
        <Attribute
          key={index}
          recordId={this.props.record.id}
          attributeIndex={record.type}
          attributeKey=''
          attribute={record.name}
          documentState={this.props.documentState}
          attributeTypes={this.props.recordTypes}
          mode={this.state.mode}
          type='record'
          editable={true}
          updateRecordName={this.updateRecordName}
          updateRecordType={this.updateRecordType}
          updateRecordAttribute={this.updateRecordAttribute}
          showAttributes={true}
        />
      );
    });
  }

  generateAttributes (attributes, recordName, recordType) {
    const attributeElements = [];
    for (const key in attributes) {
      if (attributes.hasOwnProperty(key) && this.props.attributeTypes[key]) {
        attributeElements.push(
          <Attribute
            key={key}
            recordId={this.props.record.id}
            attributeIndex={key}
            attributeKey={this.props.attributeTypes[key].name}
            attribute={attributes[key]}
            attributeTypes={this.props.attributeTypes}
            documentState={this.props.documentState}
            mode={this.state.mode}
            type='attribute'
            editable={true}
            updateRecordAttribute={this.updateRecordAttribute}
            showAttributes={this.state.showAttributes}
          />);
      }
    }
    return attributeElements;
  }

  cancelDeletion () {
    this.setState({ deleting: false });
  }

  delete () {
    this.setState({ deleting: false });
    this.props.removeRecord(this.props.record.id, this.props.record.action);
  }

  render () {
    const { record } = this.props; // TYPE IS UNDEFINED
    const recordObjects = this.generateRecordObjects(record);
    const recordAttributes = this.generateRecordAttributes(recordObjects);
    const attributes = this.generateAttributes(record.attributes);

    // const isValidRecord = validateRecord(record, this.props.attributeTypes);
    // console.log(isValidRecord);

    return (
      <div className={'record col-xs-12 ' + (this.state.showAttributes ? 'record-open' : '')}>
        <div className='list-group'>
          { this.state.mode === 'view' &&
          <div className='record-button-group'>
            { this.props.documentState === 'edit' &&
            <Dropdown
              children={[
                {
                  text: 'Muokkaa asiakirjaa',
                  icon: 'fa-pencil',
                  style: 'btn-primary',
                  action: () => this.props.editRecordForm(record.id, this.state.name, this.state.attributes)
                },
                {
                  text: 'Poista asiakirja',
                  icon: 'fa-trash',
                  style: 'btn-delete',
                  action: () => this.setState({ deleting: true })
                }
              ]}
              extraSmall={true}
            />
            }
            <button
              className='btn btn-info btn-xs record-button pull-right'
              onClick={this.toggleAttributeVisibility}>
              <span
                className={'fa ' + (this.state.showAttributes ? 'fa-minus' : 'fa-plus')}
                aria-hidden='true'
              />
            </button>
          </div>
          }
          { recordAttributes }
          { attributes }
          {/* { this.state.mode === 'edit' &&
           <div className='col-xs-12'>
           <button className='btn btn-primary pull-right edit-record__submit'
           onClick={() => this.saveRecord()}>
           Valmis
           </button>
           <button className='btn btn-default pull-right edit-record__cancel'
           onClick={() => this.cancelRecordEdit()}>
           Peruuta
           </button>
           </div>
           } */}
        </div>
        { this.state.deleting &&
        <Popup
          content={
            <DeleteView
              type='record'
              target={this.props.record.name}
              action={() => this.delete()}
              cancel={() => this.cancelDeletion()}
            />
          }
          closePopup={() => this.cancelDeletion()}
        />
        }
      </div>
    );
  }
}

Record.propTypes = {
  attributeTypes: React.PropTypes.object.isRequired,
  documentState: React.PropTypes.string.isRequired,
  editRecordAttribute: React.PropTypes.func.isRequired,
  editRecordForm: React.PropTypes.func.isRequired,
  record: React.PropTypes.object.isRequired,
  recordTypes: React.PropTypes.object.isRequired,
  removeRecord: React.PropTypes.func.isRequired
};

export default Record;
<commit_msg>Create button for complementing record attributes<commit_after>import React from 'react';
import './Record.scss';
import Attribute from '../Attribute/Attribute';
import DeleteView from '../DeleteView/DeleteView';
import Dropdown from 'components/Dropdown';
import Popup from 'components/Popup';

// import { validateRecord } from '../../../utils/validators';

export class Record extends React.Component {
  constructor (props) {
    super(props);

    this.toggleAttributeVisibility = this.toggleAttributeVisibility.bind(this);
    this.updateRecordName = this.updateRecordName.bind(this);
    this.updateRecordType = this.updateRecordType.bind(this);
    this.updateRecordAttribute = this.updateRecordAttribute.bind(this);
    this.state = {
      showAttributes: false,
      mode: 'view',
      deleting: false,
      name: this.props.record.name,
      type: this.props.record.attributes.RecordType,
      attributes: this.props.record.attributes
    };
  }

  setMode (value) {
    this.setState({ mode: value });
  }

  // editRecord () {
  //   this.setMode('edit');
  //   this.setState({ showAttributes: true });
  // }

  // saveRecord () {
  //   this.setMode('view');
  // }

  // cancelRecordEdit () {
  //   this.setMode('view');
  // }

  toggleAttributeVisibility () {
    const currentVisibility = this.state.showAttributes;
    const newVisibility = !currentVisibility;
    this.setState({ showAttributes: newVisibility });
  }

  updateRecordName (recordName, recordId) {
    this.setState({
      name: recordName
    });
    const updatedRecordName = {
      name: recordName,
      recordId: recordId
    };
    this.props.editRecordAttribute(updatedRecordName);
  }

  updateRecordType (attribute, recordId) {
    const updatedRecordType = {
      type: attribute,
      recordId: recordId
    };
    this.props.editRecordAttribute(updatedRecordType);
  }

  updateRecordAttribute (attribute, attributeIndex, recordId) {
    this.setState({
      attributes: {
        [attributeIndex]: attribute
      }
    });
    const updatedRecordAttribute = { attribute, attributeIndex, recordId };
    this.props.editRecordAttribute(updatedRecordAttribute);
  }

  generateRecordObjects (record) {
    const recordObjects = [];
    recordObjects.push({ recordKey: 'Asiakirjatyypin tarkenne', name: record.name, type: '' });
    recordObjects.push({ recordKey: 'Tyyppi', name: record.attributes.RecordType, type: record.attributes.RecordType });
    return recordObjects;
  }

  generateRecordAttributes (records) {
    return records.map((record, index) => {
      return (
        <Attribute
          key={index}
          recordId={this.props.record.id}
          attributeIndex={record.type}
          attributeKey=''
          attribute={record.name}
          documentState={this.props.documentState}
          attributeTypes={this.props.recordTypes}
          mode={this.state.mode}
          type='record'
          editable={true}
          updateRecordName={this.updateRecordName}
          updateRecordType={this.updateRecordType}
          updateRecordAttribute={this.updateRecordAttribute}
          showAttributes={true}
        />
      );
    });
  }

  generateAttributes (attributes, recordName, recordType) {
    const attributeElements = [];
    for (const key in attributes) {
      if (attributes.hasOwnProperty(key) && this.props.attributeTypes[key]) {
        attributeElements.push(
          <Attribute
            key={key}
            recordId={this.props.record.id}
            attributeIndex={key}
            attributeKey={this.props.attributeTypes[key].name}
            attribute={attributes[key]}
            attributeTypes={this.props.attributeTypes}
            documentState={this.props.documentState}
            mode={this.state.mode}
            type='attribute'
            editable={true}
            updateRecordAttribute={this.updateRecordAttribute}
            showAttributes={this.state.showAttributes}
          />);
      }
    }
    return attributeElements;
  }

  cancelDeletion () {
    this.setState({ deleting: false });
  }

  delete () {
    this.setState({ deleting: false });
    this.props.removeRecord(this.props.record.id, this.props.record.action);
  }

  render () {
    const { record } = this.props; // TYPE IS UNDEFINED
    const recordObjects = this.generateRecordObjects(record);
    const recordAttributes = this.generateRecordAttributes(recordObjects);
    const attributes = this.generateAttributes(record.attributes);

    // const isValidRecord = validateRecord(record, this.props.attributeTypes);
    // console.log(isValidRecord);

    return (
      <div className={'record col-xs-12 ' + (this.state.showAttributes ? 'record-open' : '')}>
        <div className='list-group'>
          { this.state.mode === 'view' &&
          <div className='record-button-group'>
            { this.props.documentState === 'edit' &&
            <Dropdown
              children={[
                {
                  text: 'Muokkaa asiakirjaa',
                  icon: 'fa-pencil',
                  style: 'btn-primary',
                  action: () => this.props.editRecordForm(record.id, this.state.name, this.state.attributes)
                },
                {
                  text: 'Täydennä metatietoja',
                  icon: 'fa-plus-square',
                  style: 'btn-primary',
                  action: () => this.props.complementRecordForm(record.id, this.state.name, this.state.attributes)
                },
                {
                  text: 'Poista asiakirja',
                  icon: 'fa-trash',
                  style: 'btn-delete',
                  action: () => this.setState({ deleting: true })
                }
              ]}
              extraSmall={true}
            />
            }
            <button
              className='btn btn-info btn-xs record-button pull-right'
              onClick={this.toggleAttributeVisibility}>
              <span
                className={'fa ' + (this.state.showAttributes ? 'fa-minus' : 'fa-plus')}
                aria-hidden='true'
              />
            </button>
          </div>
          }
          { recordAttributes }
          { attributes }
          {/* { this.state.mode === 'edit' &&
           <div className='col-xs-12'>
           <button className='btn btn-primary pull-right edit-record__submit'
           onClick={() => this.saveRecord()}>
           Valmis
           </button>
           <button className='btn btn-default pull-right edit-record__cancel'
           onClick={() => this.cancelRecordEdit()}>
           Peruuta
           </button>
           </div>
           } */}
        </div>
        { this.state.deleting &&
        <Popup
          content={
            <DeleteView
              type='record'
              target={this.props.record.name}
              action={() => this.delete()}
              cancel={() => this.cancelDeletion()}
            />
          }
          closePopup={() => this.cancelDeletion()}
        />
        }
      </div>
    );
  }
}

Record.propTypes = {
  attributeTypes: React.PropTypes.object.isRequired,
  documentState: React.PropTypes.string.isRequired,
  editRecordAttribute: React.PropTypes.func.isRequired,
  editRecordForm: React.PropTypes.func.isRequired,
  record: React.PropTypes.object.isRequired,
  recordTypes: React.PropTypes.object.isRequired,
  removeRecord: React.PropTypes.func.isRequired
};

export default Record;

{'fraction_non_alphanumeric': 0.12593907936074306, 'fraction_numerical': 0.0005463734462505122, 'mean_word_length': 2.188112344872632, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 60, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7539750', 'n_tokens_mistral': 3947, 'n_tokens_neox': 3915, 'n_words': 674}