function renderModalContent()

in modules/ui/rapid_view_manage_datasets.js [94:234]
109 lines of code
6 McCabe index (conditional complexity)

  function renderModalContent(selection) {
    /* Header section */
    let headerEnter = selection.selectAll('.rapid-view-manage-header')
      .data([0])
      .enter()
      .append('div')
      .attr('class', 'modal-section rapid-view-manage-header');

    let line1 = headerEnter
      .append('div');

    line1
      .append('div')
      .attr('class', 'rapid-view-manage-header-icon')
      .call(svgIcon('#iD-icon-data', 'icon-30'));

    line1
      .append('div')
      .attr('class', 'rapid-view-manage-header-text')
      .text(t('rapid_feature_toggle.esri.title'));

    let line2 = headerEnter
      .append('div');

    line2
      .append('div')
      .attr('class', 'rapid-view-manage-header-about')
      .html(marked(t('rapid_feature_toggle.esri.about')));

    line2.selectAll('a')
      .attr('target', '_blank');


    /* Filter section */
    let filterEnter = selection.selectAll('.rapid-view-manage-filter')
      .data([0])
      .enter()
      .append('div')
      .attr('class', 'modal-section rapid-view-manage-filter');


    let filterSearchEnter = filterEnter
      .append('div')
      .attr('class', 'rapid-view-manage-filter-search-wrap');

    filterSearchEnter
      .call(svgIcon('#fas-filter', 'inline'));

    filterSearchEnter
      .append('input')
      .attr('class', 'rapid-view-manage-filter-search')
      .attr('placeholder', t('rapid_feature_toggle.esri.filter_datasets'))
      .call(utilNoAuto)
      .on('input', d3_event => {
        const element = d3_event.currentTarget;
        const val = (element && element.value) || '';
        _filterText = val.trim().toLowerCase();
        dsSection.call(renderDatasets);
      });


    let filterTypeEnter = filterEnter
      .append('div')
      .attr('class', 'rapid-view-manage-filter-type-wrap');

    filterTypeEnter
      .append('input')
      .attr('class', 'rapid-view-manage-filter-type')
      .attr('placeholder', t('rapid_feature_toggle.esri.any_type'))
      .call(utilNoAuto)
      .call(categoryCombo)
      .on('blur change', d3_event => {
        const element = d3_event.currentTarget;
        const val = (element && element.value) || '';
        const data = categoryCombo.data();
        if (data.some(item => item.value === val)) {  // only allow picking values from the list
          _filterCategory = val;
        } else {
          d3_event.currentTarget.value = '';
          _filterCategory = null;
        }
        dsSection.call(renderDatasets);
      });

    filterEnter
      .append('div')
      .attr('class', 'rapid-view-manage-filter-clear')
      .append('a')
      .attr('href', '#')
      .text(t('rapid_feature_toggle.esri.clear_filters'))
      .on('click', d3_event => {
        d3_event.preventDefault();
        const element = d3_event.currentTarget;
        element.blur();
        selection.selectAll('input').property('value', '');
        _filterText = null;
        _filterCategory = null;
        dsSection.call(renderDatasets);
      });

    filterEnter
      .append('div')
      .attr('class', 'rapid-view-manage-filter-results');


    /* Dataset section */
    let dsSection = selection.selectAll('.rapid-view-manage-datasets-section')
      .data([0]);

    // enter
    let dsSectionEnter = dsSection.enter()
      .append('div')
      .attr('class', 'modal-section rapid-view-manage-datasets-section');

    dsSectionEnter
      .append('div')
      .attr('class', 'rapid-view-manage-datasets-status');

    dsSectionEnter
      .append('div')
      .attr('class', 'rapid-view-manage-datasets');

    // update
    dsSection = dsSection
      .merge(dsSectionEnter)
      .call(renderDatasets);


    /* OK Button */
    let buttonsEnter = selection.selectAll('.modal-section.buttons')
      .data([0])
      .enter()
      .append('div')
      .attr('class', 'modal-section buttons');

    buttonsEnter
      .append('button')
      .attr('class', 'button ok-button action')
      .on('click', _myClose)
      .text(t('confirm.okay'));
  }