wba/frontend/src/js/component/wb-workflow-input.js

//
// Copyright (C) Stanislaw Adaszewski, 2020
// Contact: s.adaszewski@gmail.com
// Website: https://adared.ch/wba
// License: GNU Affero General Public License, Version 3
//

import { h, Component } from 'preact';
import wbInputSpecInfo from 'wb-input-spec-info';
import WBPathDisplay from 'wb-path-display';
import { parseKeepRef } from 'wb-process-misc';

class WBWorkflowInput extends Component {
  render({ app, inputSpec, inputsDict, browseDialogRef }) {
    const { isFile, isDirectory, isArray } = wbInputSpecInfo(inputSpec);

    if (!isFile && !isDirectory)
      return (
        <div>
          <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
            value={ inputsDict[inputSpec.id] }
            onchange={ e => (inputsDict[inputSpec.id] = e.target.value) }></input>
          <div class="mt-2 text-muted">{ inputSpec.doc }</div>
        </div>
      );

    const button = (
      <button class="btn btn-outline-primary"
        onclick={ e => {
          e.preventDefault();
          browseDialogRef.current.show(
            [].concat(isFile ? 'file' : []).concat(isDirectory ? 'directory' : []),
            isArray,
            v => {
              inputsDict[inputSpec.id] = JSON.stringify(v);
              this.setState({});
            });
        } }>
        Browse...
      </button>
    );

    let value = inputsDict[inputSpec.id];
    if (value) {
      try {
        value = jsyaml.load(value);
      } catch (_) {}
    }

    return (
      <div>
        <div class="input-group">
          <input class="form-control w-100" type="text" placeholder={ inputSpec.label }
            value={ inputsDict[inputSpec.id] }
            onchange={ e => (inputsDict[inputSpec.id] = e.target.value) }></input>
          <div class="input-group-append">
            { button }
          </div>
        </div>
        <div class="mt-2 text-muted">{ inputSpec.doc }</div>
        { value ?
          isArray ? (
            <ul class="mb-0">
              { value.map(path => (
                <li>
                  <WBPathDisplay app={ app } path={ parseKeepRef(path) } />
                </li>
              )) }
            </ul>
        ) : (
          <WBPathDisplay app={ app } path={ parseKeepRef(value) } />
        ) : null }
      </div>
    );
  }
}

export default WBWorkflowInput;