WIP

_layouts/committee.html

@@ -35,7 +35,10 @@ <h2>Contributions</h2>
         Contributor tables do not presently include loans, although funds
         from loans are included in the total contributions received.
       </p>
-      <contributions-table contributions="{{ contributions | jsonify | escape }}"></contributions-table>
+      <contributions-table
+        contributions="{{ contributions | jsonify | escape }}"
+        iec=" {{finance.iec}}">
+      </contributions-table>
     {% endif %}
   </div>
 </article>

src/components/contributions-table.jsx

@@ -12,7 +12,7 @@ function name(contribution) {
 }
 
 class ContributionsTable extends React.Component {
-  static initialState(contributions) {
+  static initialState(contributions, iec) {
     return {
       contributions: contributions.map((contribution, i) => ({
         id: i,
@@ -23,7 +23,9 @@ class ContributionsTable extends React.Component {
         zip: contribution.Tran_Zip4,
         amount: contribution.Tran_Amt1,
         date: new Date(contribution.Tran_Date),
+        election_name: contribution.election_name || '',
       })),
+      sortOnElectionName: iec,
       filter: '',
       // Initial state is sorting by amount, "ascending", note that the columns
       // have different definitions of ascending/descending, see `applySortOrder`
@@ -32,6 +34,7 @@ class ContributionsTable extends React.Component {
         order: 1,
         column: 'amount',
       },
+      iec: iec
     };
   }
 
@@ -114,7 +117,56 @@ class ContributionsTable extends React.Component {
       return 0;
     };
 
+    function parseElectionName(input) {
+      const [name, ...rest] = input.split("-");
+
+      if (rest.length === 1) {
+        // If there is only one element after the split, assume it's the year
+        return { name, month: "november", year: rest[0] };
+      } else if (rest.length >= 2) {
+        // If there are two or more elements, assume the last is the year and the second-to-last is the month
+        return { name, month: rest[rest.length - 2], year: rest[rest.length - 1] };
+      } else {
+        // Handle the case where there are no elements after the split
+        return { name, month: "november", year: undefined };
+      }
+    }
+    const electionCompare = (x, y) => {
+      election1 = parseElectionName(x);
+      election2 = parseElectionName(y);
+
+      if (election1.name > election2.name)
+        return 1;
+      if (election1.name < election2.name)
+        return -1;
+
+      if (election1.year > election2.year)
+        return 1;
+      if (election1.year < election2.year)
+        return -1;
+
+      const monthOrder = {
+          january: 0,
+          february: 1,
+          march: 2,
+          april: 3,
+          may: 4,
+          june: 5,
+          july: 6,
+          august: 7,
+          september: 8,
+          october: 9,
+          november: 10,
+          december: 11,
+        };
+
+       return monthOrder[election1.month] - monthOrder[election2.month];
+    }
+
     const difference = (a, b) => {
+      if (sortOnElectionName && a.election_name !== b.election_name) {
+        return electionCompare(a.election_name, b.election_name);
+      }
       // We're doing some funkiness with ascending/decsending based on the
       // column to give a _maybe_ more intuitive behavior. The default sort is
       // ascending, but if you sort by amount, you probably want that to start in
@@ -198,6 +250,20 @@ class ContributionsTable extends React.Component {
     return (
       <div>
         <input className="filter" value={this.state.filterField} onChange={updateFilter} type="text" placeholder="Type to filter contributions" />
+        if (iec) {
+          <label>
+            <input
+              type="checkbox"
+              checked={this.state.sortOnElectionName}
+              onChange={() =>
+                this.setState((prevState) => ({
+                  sortOnElectionName: !prevState.sortOnElectionName,
+                }))
+              }
+            />
+            Sort by Election Name
+          </label>
+        }
         <select className="contributors__sort-select" defaultValue={'{ "column": "amount", "order": 1}'} onChange={e => this.updateSortOrder(e)}>
           <option value={'{ "column": "name", "order": 1}'}>Name (A-Z)</option>
           <option value={'{ "column": "name", "order": -1}'}>Name (Z-A)</option>
@@ -211,6 +277,14 @@ class ContributionsTable extends React.Component {
         <table className="contributors">
           <thead className="contributors__thead">
             <tr>
+              if (iec) {
+                <th className={`contributors__heading contributors__election_name${isActive('election_name')}`}>
+                <button type="button" className="sort-button" onClick={sortToggle('election_name')}>
+                  Election Name
+                  <span className="arrow-container" />
+                  </button>
+                </th>
+              }
               <th className={`contributors__heading contributors__name${isActive('name')}`}>
                 <button type="button" className="sort-button" onClick={sortToggle('name')}>
                   Name
@@ -259,6 +333,9 @@ class ContributionsTable extends React.Component {
             {
               this.applySortOrder(this.applyFilter(contributions)).map(contribution => (
                 <tr key={contribution.id}>
+                  <td className="contributors__cell contributors__election_name">
+                    {contribution.election_name}
+                  </td>
                   <td className="contributors__cell contributors__name">
                     {contribution.name}
                     <div className="contributors__card">