createKeyValueInput()

in source/webapp/src/lib/js/mediaUploadWizard.js [327:387]

• 59 lines of code
• 10 McCabe index (conditional complexity)

  createKeyValueInput(idx, key, val, placeholder, suffix, plus = true, minus = true) {
    const X = MediaUploadWizard.Constants.Carousel.Slide.Metadata;
    const id = `${X.Input.Metadata}-${suffix || idx}`;
    const kid = `${X.Input.Metadata}-key-${suffix || idx}`;
    const vid = `${X.Input.Metadata}-val-${suffix || idx}`;

    return `
    <div id="${id}" style="display:flex;">
      <div class="col-sm-10 mb-1">
        <div class="input-group mb-0 mr-sm-2">
          <input
          type="text"
          class="form-control form-control-sm col-sm-3"
          placeholder="Key"
          value="${key || ''}"
          pattern="^[a-zA-Z]+[a-zA-Z0-9-]{1,}$"
          required
          data-target="${kid}"
          ${!plus || !minus ? 'disabled' : ''}
          >
          <input
          type="text"
          class="form-control form-control-sm col-sm-9"
          placeholder="${placeholder || 'Value'}"
          value="${val || ''}"
          pattern="^[^<>()]{1,}$"
          required
          data-target="${vid}"
          ${!plus || !minus ? 'disabled' : ''}
          >
          <div class="invalid-feedback" style="font-size:60%">
            Key must be alphanumeric or '-' characters. Value must not contain '<', '>', '(', ')' characters.
          </div>
        </div>
      </div>
      <div class="col-sm-2 mb-1">
        <div class="btn-group mb-0 mr-sm-2" role="group" aria-label="add remove field">
          <button
          type="button"
          class="btn btn-sm btn-success"
          data-action="${X.Action.AddMetadataField}"
          data-target="${id}"
          ${!plus ? 'disabled' : ''}
          >
            <i class="fas fa-plus"></i>
          </button>

          <button
          type="button"
          class="btn btn-sm btn-success"
          data-action="${X.Action.RemoveMetadataField}"
          data-target="${id}"
          ${!minus ? 'disabled' : ''}
          >
            <i class="fas fa-minus"></i>
          </button>
        </div>
      </div>
    </div>
    `;
  }