[WIP, DON'T MERGE] Replacing Typeahead, site-wide

.eslintrc

@@ -24,7 +24,15 @@
     "navigator": true
   },
   "rules": {
+    "array-bracket-newline": ["error", "consistent"],
     "array-bracket-spacing": ["error", "never", { "objectsInArrays": false }],
+    // "array-element-newline": ["error",
+    //   {
+    //     "multiline": true,
+    //     "minItems": 2
+    //   }
+    // ],
+    "comma-spacing": ["error", { "before": false, "after": true }],
     "comma-dangle": ["error", "never"],
     "eol-last": ["error", "always"],
     // "eqeqeq": ["warn", "smart"],
@@ -36,8 +44,9 @@
     "max-len": ["error", {
       "code": 200,
       "comments": 250,
-      "ignoreStrings": true,
+      // "ignoreStrings": true,
       "ignoreTemplateLiterals": true
+      // "ignorePattern": false
     }],
     "no-console": "error",
     "no-empty-function": "error",

fec/data/templates/layouts/main.jinja

@@ -43,9 +43,12 @@
     DISTRICT_MAP_CUTOFF = '{{ constants.DISTRICT_MAP_CUTOFF }}';
     WEBMANAGER_EMAIL = '{{ WEBMANAGER_EMAIL }}';
     CANONICAL_BASE = '{{ CANONICAL_BASE }}';
-    TRANSITION_URL = '{{ TRANSITION_URL }}';
+    {% if TRANSITION_URL %}TRANSITION_URL = '{{ TRANSITION_URL }}';{% endif %}
     {% if election_year %}ELECTION_YEAR = '{{ election_year }}';{% endif %}
 
+    useTt = {% if FEATURES.use_tt == False %}false{% else %}true{% endif %};
+    {# TODO: remove useTt with the use_tt feature flag #}
+
     function trackMetric(name, imagesSelector) {
       if (imagesSelector) {
         var images = document.querySelectorAll(imagesSelector);
@@ -89,11 +92,14 @@
              <div class="combo combo--search">
             <input
               class="js-site-search combo__input"
-              autocomplete="off"
               id="query"
               name="query"
               type="text"
-              aria-label="Search FEC.gov">
+              data-search-type="all"
+              aria-autocomplete="list"
+              aria-label="Search FEC.gov"
+              {% if FEATURES.use_tt == False %}data-{% endif %}autocomplete="off"
+            >
             <button type="submit" class="button--standard combo__button button--search">
               <span class="u-visually-hidden">Search</span>
             </button>

fec/data/templates/layouts/widgets.jinja

@@ -33,6 +33,8 @@
     DEFAULT_ELECTION_YEAR = '{{ DEFAULT_ELECTION_YEAR }}';{# see note #}
     START_YEAR = '{{ START_YEAR }}';{# see note #}
     END_YEAR = '{{ END_YEAR }}';{# see note #}
+    useTt = {% if FEATURES.use_tt == False %}false{% else %}true{% endif %};
+    {# TODO: remove useTt with the use_tt feature flag #}
     {# note: these are set through fec/data/views.py and come from /data/constants.py #}
 
     function trackMetric(name, imagesSelector) {

fec/data/templates/macros/filters/autosuggest-filter.jinja

@@ -0,0 +1,27 @@
+{% macro field(query_field_name, field_label, instructions=False, dataset='committees', allow_text=False, id_suffix='', minor_label_text=False, helper_text=False) %}
+<div
+  class="filter js-filter autosuggest-filter"
+  data-filter="autosuggest"
+  data-name="{{ query_field_name }}"
+  id="{{ query_field_name }}-field{{ id_suffix }}"
+  data-search-type="{{ dataset }}" {% if allow_text %}data-allow-text{% endif %}>
+  {% if minor_label_text %}
+    <label for="{{ query_field_name }}{{ id_suffix }}">{{ field_label }}</label>
+  {% else %}
+    <label class="label" for="{{ query_field_name }}{{ id_suffix }}">{{ field_label }}</label>
+  {% endif %}
+  {% if helper_text %}
+    <label class="label--help u-margin--top">{{ helper_text }}</label>
+  {% endif %}
+  <div class="combo combo--search--mini filter__autosuggest">
+    <ul class="dropdown__selected"></ul>
+    <input id="{{ query_field_name }}{{ id_suffix }}" type="text" class="combo__input" data-search-type="{{ dataset }}">
+    <button class="combo__button button--search button--standard" type="button">
+      <span class="u-visually-hidden">Search</span>
+    </button>
+  </div>
+  {% if instructions %}
+    <span class="filter__instructions">{{ instructions }}</span>
+  {% endif %}
+</div>
+{% endmacro %}

fec/data/templates/macros/filters/committee-types.jinja

@@ -1,3 +1,4 @@
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 
 {% macro field(
@@ -186,7 +187,13 @@
   </fieldset>
   {% if display_sponsor_candidate_filter %}
     <div class="filter sub--filter--indent">
+    {# TODO - Autosuggest #}
+    {% if (FEATURES.use_tt) == false %}
+      {{ autosuggest.field('sponsor_candidate_id', 'Leadership PAC sponsor', False, dataset='candidates', allow_text=False) }}
+    {% else %}
       {{ typeahead.field('sponsor_candidate_id', 'Leadership PAC sponsor', False, dataset='candidates', allow_text=False) }}
+    {% endif %}
+    {# TODO: remove useTt with the use_tt feature flag #}
     </div>
   {% endif %}
 </div>

fec/data/templates/macros/search.jinja

@@ -2,11 +2,16 @@
 {% if location == 'hero' %}
   {% set size = 'combo--search--medium' %}
 {% endif %}
-<form id="{{ location }}-search" action="/data/search" autocomplete="off" class="search__container">
+<form
+  id="{{ location }}-search"
+  action="/data/search"
+  {% if FEATURES.use_tt == False %}data-{% endif %}autocomplete="off"
+  class="search__container"
+  >
   <div class="combo combo--search {{ size }}">
     <label for="search" class="label">Candidate or committee name or ID</label>
-    <input id="search" class="js-search-input combo__input" type="text" name="search"
-    autocorrect="off" autocapitalize="off" spellcheck="false"
+    <input id="search" class="js-search-input combo__input" type="text" name="search" data-search-type="{{ result_type }}"
+    {% if FEATURES.use_tt == False %}data-{% endif %}autocorrect="off" autocapitalize="off" spellcheck="false"
     value="{{ query or '' }}">
     <button type="submit" class="combo__button button--search {{ button_color }}">
       <span class="u-visually-hidden">Search</span>

fec/data/templates/partials/audit-filter.jinja

@@ -1,6 +1,7 @@
 {% extends 'partials/filters.jinja' %}
 
 {% import 'macros/filters/dropdown-json.jinja' as dropdown %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 {% import 'macros/filters/years.jinja' as years %}
 
@@ -28,8 +29,15 @@
     }}
 
 {# committee/candidate name/id filter #}
+  {# TODO - Autosuggest #}
+  {% if (FEATURES.use_tt) == false %}
+    {{ autosuggest.field('q', 'Committee name or ID', '', dataset='auditCommittees', allow_text=True) }}
+    {{ autosuggest.field('qq', 'Authorized candidate name or ID', '', dataset='auditCandidates', allow_text=True) }}
+  {% else %}
     {{ typeahead.field('q', 'Committee name or ID', '', dataset='auditCommittees', allow_text=True) }}
     {{ typeahead.field('qq', 'Authorized candidate name or ID', '', dataset='auditCandidates', allow_text=True) }}
+  {% endif %}
+  {# TODO: remove useTt with the use_tt feature flag #}
 
 {# election cycle range filter #}
   {{ years.cycleRange('cycle', 'Election cycles covered by audit' ) }}

fec/data/templates/partials/candidates-filter.jinja

@@ -4,13 +4,21 @@
 {% import 'macros/filters/parties.jinja' as parties %}
 {% import 'macros/filters/states.jinja' as states %}
 {% import 'macros/filters/districts.jinja' as districts %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 {% import 'macros/filters/years.jinja' as years %}
 {% import 'macros/filters/date.jinja' as date %}
 
 {% block filters %}
 <div class="filters__inner">
+  {# TODO - Autosuggest #}
+  {% if (FEATURES.use_tt) == false %}
+  {{ autosuggest.field('q', 'Candidate name or ID', '', dataset='candidates', allow_text=True) }}
+  {% else %}
   {{ typeahead.field('q', 'Candidate name or ID', '', dataset='candidates', allow_text=True) }}
+  {% endif %}
+  {# TODO: remove useTt with the use_tt feature flag #}
+
   {{ years.years('election_year', 'Election year', end_year=constants.END_YEAR + 4) }}
   {{ office.checkbox() }}
   {{ parties.checkbox() }}

fec/data/templates/partials/candidates-office-filter.jinja

@@ -4,6 +4,7 @@
 {% import 'macros/filters/parties.jinja' as parties %}
 {% import 'macros/filters/states.jinja' as states %}
 {% import 'macros/filters/districts.jinja' as districts %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 {% import 'macros/filters/election-filter.jinja' as election_filter %}
 {% import 'macros/filters/range.jinja' as range_filter %}
@@ -13,7 +14,13 @@
  {% block filters %}
 <div class="js-accordion accordion--neutral" data-content-prefix="filter" data-open-first="false">
   <div class="filters__inner">
-    {{ typeahead.field('q', 'Candidate name or ID', '', dataset='candidates', allow_text=True) }}
+    {# TODO - Autosuggest #}
+    {% if (FEATURES.use_tt) == false %}
+      {{ autosuggest.field('q', 'Candidate name or ID', '', dataset='candidates', allow_text=True) }}
+    {% else %}
+      {{ typeahead.field('q', 'Candidate name or ID', '', dataset='candidates', allow_text=True) }}
+    {% endif %}
+    {# TODO: remove useTt with the use_tt feature flag #}
     {{ election_filter.full_cycle('election_year', 'Election year', 'cycle', 'election_full', table_context['office']) }}
   </div>
   <button type="button" class="js-accordion-trigger accordion__button">Candidate information</button>

fec/data/templates/partials/committees-filter.jinja

@@ -3,14 +3,21 @@
 {% import 'macros/filters/text.jinja' as text %}
 {% import 'macros/filters/parties.jinja' as parties %}
 {% import 'macros/filters/states.jinja' as states %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 {% import 'macros/filters/years.jinja' as years %}
 {% import 'macros/filters/date.jinja' as date %}
 
 {% block filters %}
 <div class="js-accordion accordion--neutral" data-content-prefix="filter" data-open-first="false">
   <div class="filters__inner">
-    {{ typeahead.field('q', 'Committee name or ID', False, dataset='committees', allow_text=True) }}
+    {# TODO - Autosuggest #}
+    {% if (FEATURES.use_tt) == false %}
+      {{ autosuggest.field('q', 'Committee name or ID', False, dataset='committees', allow_text=True) }}
+    {% else %}
+      {{ typeahead.field('q', 'Committee name or ID', False, dataset='committees', allow_text=True) }}
+    {% endif %}
+    {# TODO: remove useTt with the use_tt feature flag #}
     {{ years.cycles('cycle', 'Years active', show_tooltip=False) }}
   </div>
   <button type="button" class="js-accordion-trigger accordion__button">Committee details</button>

fec/data/templates/partials/communication-costs-filter.jinja

@@ -1,6 +1,7 @@
 {% extends 'partials/filters.jinja' %}
 
 {% import 'macros/filters/text.jinja' as text %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 {% import 'macros/filters/states.jinja' as states %}
 {% import 'macros/filters/date.jinja' as date %}
@@ -16,11 +17,23 @@ Filter communication costs
 
 <div class="js-accordion accordion--neutral" data-content-prefix="filter" data-open-first="false">
   <div class="filters__inner">
-    {{ typeahead.field('committee_id', 'Spender name or ID') }}
+    {# TODO - Autosuggest #}
+    {% if (FEATURES.use_tt) == false %}
+      {{ autosuggest.field('committee_id', 'Spender name or ID') }}
+    {% else %}
+      {{ typeahead.field('committee_id', 'Spender name or ID') }}
+    {% endif %}
+    {# TODO: remove useTt with the use_tt feature flag #}
   </div>
   <button type="button" class="js-accordion-trigger accordion__button">Candidate mentioned</button>
   <div class="accordion__content">
-    {{ typeahead.field('candidate_id', 'Candidate name or ID', dataset='candidates') }}
+    {# TODO - Autosuggest #}
+    {% if (FEATURES.use_tt) == false %}
+      {{ autosuggest.field('candidate_id', 'Candidate name or ID', dataset='candidates') }}
+    {% else %}
+      {{ typeahead.field('candidate_id', 'Candidate name or ID', dataset='candidates') }}
+    {% endif %}
+    {# TODO: remove useTt with the use_tt feature flag #}
     {{ support_oppose.checkbox('_processed') }}
   </div>
   <button type="button" class="js-accordion-trigger accordion__button">Transaction information</button>

fec/data/templates/partials/debts-filter.jinja

@@ -3,11 +3,18 @@
 {% import 'macros/filters/date.jinja' as date %}
 {% import 'macros/filters/range.jinja' as range %}
 {% import 'macros/filters/text.jinja' as text %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 
 {% block filters %}
   <div class="filters__inner">
+  {# TODO - Autosuggest #}
+  {% if (FEATURES.use_tt) == false %}
+    {{ autosuggest.field('committee_id', 'Committee Name or ID') }}
+  {% else %}
     {{ typeahead.field('committee_id', 'Committee Name or ID') }}
+  {% endif %}
+  {# TODO: remove useTt with the use_tt feature flag #}
     {{ text.field('creditor_debtor_name', 'Creditor/debtor Name') }}
     {# removing date filter for now, waiting for determination of its usefulness #}
     {# {{ date.field('date', 'Date') }} #}

fec/data/templates/partials/disbursements-filter.jinja

@@ -1,6 +1,7 @@
 {% extends 'partials/filters.jinja' %}
 
 {% import 'macros/filters/text.jinja' as text %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 {% import 'macros/filters/states.jinja' as states %}
 {% import 'macros/filters/date.jinja' as date %}
@@ -18,15 +19,28 @@ Filter disbursements
 
 {% block efiling_filters %}
 <div class="filters__inner">
+{# TODO - Autosuggest #}
+{% if (FEATURES.use_tt) == false %}
+  {{ autosuggest.field('committee_id', 'Spender name or ID', id_suffix='_raw') }}
+{% else %}
   {{ typeahead.field('committee_id', 'Spender name or ID', id_suffix='_raw') }}
+{% endif %}
+{# TODO: remove useTt with the use_tt feature flag #}
   {{ text.field('disbursement_description', 'Description', id_suffix='_raw') }}
 </div>
 {% endblock %}
 
 {% block filters %}
 <div class="filters__inner">
+{# TODO - Autosuggest #}
+{% if (FEATURES.use_tt) == false %}
+  {{ autosuggest.field('committee_id', 'Spender name or ID', helper_text = 'Limit 10 spender names or IDs') }}
+  {{ autosuggest.field('recipient_name', 'Recipient name or ID', allow_text=True, helper_text = 'Limit 10 recipient names or IDs') }}
+{% else %}
   {{ typeahead.field('committee_id', 'Spender name or ID', helper_text = 'Limit 10 spender names or IDs') }}
   {{ typeahead.field('recipient_name', 'Recipient name or ID', allow_text=True, helper_text = 'Limit 10 recipient names or IDs') }}
+{% endif %}
+{# TODO: remove useTt with the use_tt feature flag #}
   {{ years.cycles('two_year_transaction_period', 'Report time period', show_tooltip=True)  }}
   {{ date.field('date', 'Disbursement date range' ) }}
 </div>

fec/data/templates/partials/electioneering-communications-filter.jinja

@@ -1,6 +1,7 @@
 {% extends 'partials/filters.jinja' %}
 
 {% import 'macros/filters/text.jinja' as text %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 {% import 'macros/filters/states.jinja' as states %}
 {% import 'macros/filters/date.jinja' as date %}
@@ -14,8 +15,15 @@ Filter independent expenditures
 {% block filters %}
 <div class="js-accordion accordion--neutral" data-content-prefix="filter" data-open-first="false">
   <div class="filters__inner">
+  {# TODO - Autosuggest #}
+  {% if (FEATURES.use_tt) == false %}
+    {{ autosuggest.field('committee_id', 'Spender name or ID') }}
+    {{ autosuggest.field('candidate_id', 'Candidate mentioned', dataset='candidates') }}
+  {% else %}
     {{ typeahead.field('committee_id', 'Spender name or ID') }}
     {{ typeahead.field('candidate_id', 'Candidate mentioned', dataset='candidates') }}
+  {% endif %}
+  {# TODO: remove useTt with the use_tt feature flag #}
   </div>
   <button type="button" class="js-accordion-trigger accordion__button">Transaction information</button>
   <div class="accordion__content">

fec/data/templates/partials/filings-filter.jinja

@@ -1,6 +1,7 @@
 {% extends 'partials/filters.jinja' %}
 
 {% import 'macros/filters/text.jinja' as text %}
+{% import 'macros/filters/autosuggest-filter.jinja' as autosuggest %}
 {% import 'macros/filters/typeahead-filter.jinja' as typeahead %}
 {% import 'macros/filters/version-status.jinja' as version_status %}
 {% import 'macros/filters/states.jinja' as states %}
@@ -20,7 +21,13 @@ Filter reports
 
 {% block efiling_filters %}
   <div class="filters__inner">
+  {# TODO - Autosuggest #}
+  {% if (FEATURES.use_tt) == false %}
+    {{ autosuggest.field('q_filer', 'Committee name or ID', '', id_suffix='_raw') }}
+  {% else %}
     {{ typeahead.field('q_filer', 'Committee name or ID', id_suffix='_raw', allow_text=True ) }}
+  {% endif %}
+  {# TODO: remove useTt with the use_tt feature flag #}
     {{ date.field('receipt_date', 'Receipt date', id_suffix='_raw') }}
   </div>
 {% endblock %}
@@ -29,9 +36,17 @@ Filter reports
 <div class="js-accordion accordion--neutral" data-content-prefix="filter" data-open-first="true">
   <button type="button" class="js-accordion-trigger accordion__button">Filer</button>
   <div class="accordion__content">
+    {{ states.field('state') }}
+    {# TODO - Autosuggest #}
+    {% if (FEATURES.use_tt) == false %}
+      {{ autosuggest.field('q_filer', 'Committee name or ID', '', allow_text=True) }}
+      {{ autosuggest.field('candidate_id', 'Candidate name or ID', '', dataset='candidates') }}
+    {% else %}
+      {{ typeahead.field('q_filer', 'Committee name or ID', '', allow_text=True) }}
+      {{ typeahead.field('candidate_id', 'Candidate name or ID', '', dataset='candidates') }}
+    {% endif %}
+    {# TODO: remove useTt with the use_tt feature flag #}
 
-    {{ typeahead.field('q_filer', 'Committee name or ID', '', allow_text=True) }}
-    {{ typeahead.field('candidate_id', 'Candidate name or ID', '', dataset='candidates') }}
     {{ states.field('state', type='Candidate') }}
     {{ office.checkbox() }}
     {{ parties.checkbox() }}