<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import reactMixin from 'react-mixin';
import autoBind from 'react-autobind';
import $ from 'jquery';
import Select from 'react-select';
import _ from 'underscore';
import DocumentTitle from 'react-document-title';
import SurveyScope from '../models/surveyScope';
import cascadeMixin from './cascadeMixin';
import AssetNavigator from './assetNavigator';
import {Link, hashHistory} from 'react-router';
import alertify from 'alertifyjs';

import {
  surveyToValidJson,
  notify,
  assign,
  t,
} from '../utils';

import {
  AVAILABLE_FORM_STYLES,
  update_states,
} from '../constants';

import ui from '../ui';
import bem from '../bem';
import stores from '../stores';
import actions from '../actions';
import dkobo_xlform from '../../xlform/src/_xlform.init';
import {dataInterface} from '../dataInterface';

var FormStyle__panel = bem('form-style__panel'),
    FormStyle__row = bem('form-style'),
    FormStyle__panelheader = bem('form-style__panelheader'),
    FormStyle__paneltext = bem('form-style__paneltext');

var ErrorMessage = bem.create('error-message'),
    ErrorMessage__strong = bem.create('error-message__header', '<strong>'),
    ErrorMessage__link = bem.create('error-message__link', '<a>');

var webformStylesSupportUrl = "http://support.kobotoolbox.org/customer/en/portal/articles/2108533";

class FormSettingsEditor extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);
  }
  render () {
    return (
          <div className="mdl-grid">
            <div className="mdl-cell mdl-cell--4-col">
              {this.props.meta.map((mtype) => {
                return (
                    <FormCheckbox htmlFor={mtype} onChange={this.props.onCheckboxChange} {...mtype} />
                  );
              })}
            </div>
            <div className="mdl-cell mdl-cell--4-col">
              {this.props.phoneMeta.map((mtype) => {
                return (
                    <FormCheckbox htmlFor={mtype} onChange={this.props.onCheckboxChange} {...mtype} />
                  );
              })}
            </div>
          </div>
      );
  }
  focusSelect () {
    this.refs.webformStyle.focus();
  }
};

class FormCheckbox extends React.Component {
  constructor(props) {
    super(props);
  }
  render () {
    return (
        <div className="form-group">
          <input type="checkbox" id={this.props.name} checked={this.props.value} onChange={this.props.onChange} />
          <label htmlFor={this.props.name}>
            {this.props.label}
          </label>
        </div>
      );
  }
};

class FormSettingsBox extends React.Component {
  constructor(props) {
    super(props);
    var formId = this.props.survey.settings.get('form_id');
    this.state = {
      formSettingsExpanded: false,
      xform_id_string: formId,
      meta: [],
      phoneMeta: [],
      styleValue: 'field-list'
    };
    autoBind(this);
  }
  componentDidMount () {
    this.updateState();
  }
  updateState (newState={}) {
    'start end today deviceid'.split(' ').forEach(this.passValueIntoObj('meta', newState));
    'username simserial subscriberid phonenumber'.split(' ').map(this.passValueIntoObj('phoneMeta', newState));
    this.setState(newState);
  }
  getSurveyDetail (sdId) {
    return this.props.survey.surveyDetails.filter(function(sd){
      return sd.attributes.name === sdId;
    })[0];
  }
  passValueIntoObj (category, newState) {
    newState[category] = [];
    return (id) => {
      var sd = this.getSurveyDetail(id);
      if (sd) {
        newState[category].push(assign({}, sd.attributes));
      }
    };
  }
  onCheckboxChange (evt) {
    this.getSurveyDetail(evt.target.id).set('value', evt.target.checked);
    this.updateState({
      asset_updated: update_states.UNSAVED_CHANGES,
    });
  }
  onFieldChange (evt) {
    var fieldId = evt.target.id,
        value = evt.target.value;
    if (fieldId === 'form_id') {
      this.props.survey.settings.set('form_id', value);
    }
    this.setState({
      xform_id_string: this.props.survey.settings.get('form_id')
    });
  }
  toggleSettingsEdit () {
    this.setState({
      formSettingsExpanded: !this.state.formSettingsExpanded
    });
  }
  onStyleChange (evt) {
    var newStyle = evt.target.value;
    this.props.survey.settings.set('style', newStyle);
    this.setState({
      styleValue: newStyle
    });
  }
  render () {
    var metaData = [].concat(this.state.meta).concat(this.state.phoneMeta).filter(function(item){
      return item.value;
    }).map(function(item){
      return item.label;
    }).join(', ');

    if (metaData === '') {
      metaData = t('none (0 metadata specified)');
    }

    var metaContent;
    if (!this.state.formSettingsExpanded) {
      metaContent = (
          <bem.FormMeta__button m={'metasummary'} onClick={this.toggleSettingsEdit}>
            {t('metadata:')}
            {metaData}
          </bem.FormMeta__button>
        );
    } else {
      metaContent = (
          <FormSettingsEditor {...this.state} onCheckboxChange={this.onCheckboxChange}
            />
        );
    }
    return (
        <bem.FormMeta>
          <bem.FormMeta__button m='expand' onClick={this.toggleSettingsEdit}>
            <i />
          </bem.FormMeta__button>
          {metaContent}
        </bem.FormMeta>
      );
  }
};

export default assign({
  componentDidMount() {
    if (this.state.editorState == 'existing') {
      let uid = this.props.params.assetid;
      stores.allAssets.whenLoaded(uid, (asset) => {
        let translations = (asset.content && asset.content.translations
                            && asset.content.translations.slice(0)) || [];
        this.launchAppForSurveyContent(asset.content, {
          name: asset.name,
          translations: translations,
          settings__style: asset.settings__style,
          asset_uid: asset.uid,
          asset_type: asset.asset_type,
        });
      });<commit_msg>disable "edge" elements in formbuilder explicitly to make sure they are hidden by default when formbuilder gets refreshed<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
import reactMixin from 'react-mixin';
import autoBind from 'react-autobind';
import $ from 'jquery';
import Select from 'react-select';
import _ from 'underscore';
import DocumentTitle from 'react-document-title';
import SurveyScope from '../models/surveyScope';
import cascadeMixin from './cascadeMixin';
import AssetNavigator from './assetNavigator';
import {Link, hashHistory} from 'react-router';
import alertify from 'alertifyjs';

import {
  surveyToValidJson,
  notify,
  assign,
  t,
} from '../utils';

import {
  AVAILABLE_FORM_STYLES,
  update_states,
} from '../constants';

import ui from '../ui';
import bem from '../bem';
import stores from '../stores';
import actions from '../actions';
import dkobo_xlform from '../../xlform/src/_xlform.init';
import {dataInterface} from '../dataInterface';

var FormStyle__panel = bem('form-style__panel'),
    FormStyle__row = bem('form-style'),
    FormStyle__panelheader = bem('form-style__panelheader'),
    FormStyle__paneltext = bem('form-style__paneltext');

var ErrorMessage = bem.create('error-message'),
    ErrorMessage__strong = bem.create('error-message__header', '<strong>'),
    ErrorMessage__link = bem.create('error-message__link', '<a>');

var webformStylesSupportUrl = "http://support.kobotoolbox.org/customer/en/portal/articles/2108533";

class FormSettingsEditor extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);
  }
  render () {
    return (
          <div className="mdl-grid">
            <div className="mdl-cell mdl-cell--4-col">
              {this.props.meta.map((mtype) => {
                return (
                    <FormCheckbox htmlFor={mtype} onChange={this.props.onCheckboxChange} {...mtype} />
                  );
              })}
            </div>
            <div className="mdl-cell mdl-cell--4-col">
              {this.props.phoneMeta.map((mtype) => {
                return (
                    <FormCheckbox htmlFor={mtype} onChange={this.props.onCheckboxChange} {...mtype} />
                  );
              })}
            </div>
          </div>
      );
  }
  focusSelect () {
    this.refs.webformStyle.focus();
  }
};

class FormCheckbox extends React.Component {
  constructor(props) {
    super(props);
  }
  render () {
    return (
        <div className="form-group">
          <input type="checkbox" id={this.props.name} checked={this.props.value} onChange={this.props.onChange} />
          <label htmlFor={this.props.name}>
            {this.props.label}
          </label>
        </div>
      );
  }
};

class FormSettingsBox extends React.Component {
  constructor(props) {
    super(props);
    var formId = this.props.survey.settings.get('form_id');
    this.state = {
      formSettingsExpanded: false,
      xform_id_string: formId,
      meta: [],
      phoneMeta: [],
      styleValue: 'field-list'
    };
    autoBind(this);
  }
  componentDidMount () {
    this.updateState();
  }
  updateState (newState={}) {
    'start end today deviceid'.split(' ').forEach(this.passValueIntoObj('meta', newState));
    'username simserial subscriberid phonenumber'.split(' ').map(this.passValueIntoObj('phoneMeta', newState));
    this.setState(newState);
  }
  getSurveyDetail (sdId) {
    return this.props.survey.surveyDetails.filter(function(sd){
      return sd.attributes.name === sdId;
    })[0];
  }
  passValueIntoObj (category, newState) {
    newState[category] = [];
    return (id) => {
      var sd = this.getSurveyDetail(id);
      if (sd) {
        newState[category].push(assign({}, sd.attributes));
      }
    };
  }
  onCheckboxChange (evt) {
    this.getSurveyDetail(evt.target.id).set('value', evt.target.checked);
    this.updateState({
      asset_updated: update_states.UNSAVED_CHANGES,
    });
  }
  onFieldChange (evt) {
    var fieldId = evt.target.id,
        value = evt.target.value;
    if (fieldId === 'form_id') {
      this.props.survey.settings.set('form_id', value);
    }
    this.setState({
      xform_id_string: this.props.survey.settings.get('form_id')
    });
  }
  toggleSettingsEdit () {
    this.setState({
      formSettingsExpanded: !this.state.formSettingsExpanded
    });
  }
  onStyleChange (evt) {
    var newStyle = evt.target.value;
    this.props.survey.settings.set('style', newStyle);
    this.setState({
      styleValue: newStyle
    });
  }
  render () {
    var metaData = [].concat(this.state.meta).concat(this.state.phoneMeta).filter(function(item){
      return item.value;
    }).map(function(item){
      return item.label;
    }).join(', ');

    if (metaData === '') {
      metaData = t('none (0 metadata specified)');
    }

    var metaContent;
    if (!this.state.formSettingsExpanded) {
      metaContent = (
          <bem.FormMeta__button m={'metasummary'} onClick={this.toggleSettingsEdit}>
            {t('metadata:')}
            {metaData}
          </bem.FormMeta__button>
        );
    } else {
      metaContent = (
          <FormSettingsEditor {...this.state} onCheckboxChange={this.onCheckboxChange}
            />
        );
    }
    return (
        <bem.FormMeta>
          <bem.FormMeta__button m='expand' onClick={this.toggleSettingsEdit}>
            <i />
          </bem.FormMeta__button>
          {metaContent}
        </bem.FormMeta>
      );
  }
};

export default assign({
  componentDidMount() {
    document.body.classList.add('hide-edge');

    if (this.state.editorState == 'existing') {
      let uid = this.props.params.assetid;
      stores.allAssets.whenLoaded(uid, (asset) => {
        let translations = (asset.content && asset.content.translations
                            && asset.content.translations.slice(0)) || [];
        this.launchAppForSurveyContent(asset.content, {
          name: asset.name,
          translations: translations,
          settings__style: asset.settings__style,
          asset_uid: asset.uid,
          asset_type: asset.asset_type,
        });
      });
{'fraction_non_alphanumeric': 0.14648003293536435, 'fraction_numerical': 0.0019761218608480855, 'mean_word_length': 2.625671641791045, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 57, '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': '5145394', 'n_tokens_mistral': 3748, 'n_tokens_neox': 3743, 'n_words': 668}