Prospecting/app/views/Import/map.asp

<div class="card shadow-sm mb-3">
  <div class="card-body">
    <h1 class="h3 mb-1">Match columns</h1>
    <p class="text-muted">
      <i class="bi bi-file-earmark-spreadsheet"></i> <%= H(originalName) %> &middot;
      Choose what each column contains. Columns set to <em>Ignore</em> are not imported. Sample values come from the first rows of the file.
    </p>

    <form method="post" action="/import/run" id="mapForm">
      <input type="hidden" name="csrf" value="<%= H(csrf) %>" />
      <input type="hidden" name="token" value="<%= H(token) %>" />
      <input type="hidden" name="original_name" value="<%= H(originalName) %>" />
      <input type="hidden" name="ncols" value="<%= UBound(headers) + 1 %>" />

      <div class="table-responsive">
        <table class="table table-sm align-middle">
          <thead>
            <tr><th>Column in file</th><th>Import as</th><th>Sample values</th></tr>
          </thead>
          <tbody>
          <%
          Dim ci, ri, guess, fld, sample, usedGuess
          Set usedGuess = CreateObject("Scripting.Dictionary")
          For ci = 0 To UBound(headers)
              guess = ImportFile_GuessField(headers(ci))
              ' Only the first column guessed for a field is pre-selected.
              If Len(guess) > 0 Then
                  If usedGuess.Exists(guess) Then guess = "" Else usedGuess.Add guess, 1
              End If
          %>
            <tr>
              <td class="fw-semibold"><%= H(headers(ci)) %></td>
              <td>
                <select name="map_<%= ci %>" class="form-select form-select-sm">
                  <option value="">Ignore</option>
                  <% For Each fld In fields %>
                  <option value="<%= fld(0) %>"<% If fld(0) = guess Then Response.Write " selected" %>><%= H(fld(1)) %></option>
                  <% Next %>
                </select>
              </td>
              <td class="text-muted small">
                <%
                sample = ""
                For ri = 0 To rows.Count - 1
                    If Len(ImportFile_Cell(rows(ri), ci)) > 0 Then
                        If Len(sample) > 0 Then sample = sample & " &middot; "
                        sample = sample & H(Left(ImportFile_Cell(rows(ri), ci), 40))
                    End If
                Next
                Response.Write sample
                %>
              </td>
            </tr>
          <% Next %>
          </tbody>
        </table>
      </div>

      <div class="row g-3 mb-3">
        <div class="col-md-6">
          <label for="default_industry" class="form-label">Default industry <span class="text-muted">(used when a row has none)</span></label>
          <input type="text" class="form-control" id="default_industry" name="default_industry" maxlength="100" />
        </div>
        <div class="col-md-6 d-flex align-items-end">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="mark_customers" name="mark_customers" value="1" />
            <label class="form-check-label" for="mark_customers">These are previous customers</label>
          </div>
        </div>
      </div>

      <button type="submit" class="btn btn-primary" id="runBtn"><i class="bi bi-check2-circle"></i> Import</button>
      <a href="/import" class="btn btn-link">Cancel</a>
      <span class="text-muted small ms-2 d-none" id="working">Importing &mdash; large files can take a minute&hellip;</span>
    </form>
  </div>
</div>

<script>
  document.getElementById('mapForm').addEventListener('submit', function (e) {
    var hasName = Array.prototype.some.call(this.querySelectorAll('select'), function (s) { return s.value === 'name'; });
    if (!hasName) { e.preventDefault(); alert('Map one column to "Business name".'); return; }
    document.getElementById('runBtn').disabled = true;
    document.getElementById('working').classList.remove('d-none');
  });
</script>