Update search

Search now shows org cards and explains what the match is against.  It
links to org and proposal pages

Issue #34

cgap/static/search.js

@@ -21,28 +21,50 @@ app.component('ProposalSearch', {
       }
 
       // Create a dictionary of of org + proposal objects
-      const proposalGroups = this.matches.reduce(
+      const proposalGroupsObject = this.matches.reduce(
         function (accumulator, match) {
           if (!(match.organization.id in accumulator)) {
             accumulator[match.organization.id] = {
               organization: match.organization,
               proposals: [],
-              matches: ['title'],
+              matches: [],
             }
           }
           accumulator[match.organization.id].proposals.push(match);
           return accumulator;
         },
         {},
       )
+      const proposalGroups = Object.values(proposalGroupsObject)
+        .map((group) => {
+          if (hasMatch(group.organization.name, this.inputValue)) {
+            group.matches.push("Org Name");
+          }
+          if (hasMatch(group.organization.website, this.inputValue)) {
+            group.matches.push("Website");
+          }
+          if (hasMatch(group.organization.address, this.inputValue)) {
+            group.matches.push("Address");
+          }
+          if (hasMatch(group.organization.phone, this.inputValue)) {
+            group.matches.push("Phone");
+          }
+          if (hasMatch(group.organization.ceo_name, this.inputValue)) {
+            group.matches.push("CEO");
+          }
 
-      return proposalGroups;
+          const matchedProposals = group.proposals.filter((proposal) => {
+            return hasMatch(proposal.description, this.inputValue)
+            || hasMatch(proposal.name, this.inputValue);
+          })
+          if (matchedProposals.length > 0) {
+            group.matches.push("Proposal");
+          }
+          return group;
+        })
 
       // We want to filter here as well to prevent common UX lag between API requests
-      return this.matches.filter((match) => {
-        return hasMatch(match.organization.name, this.inputValue)
-        || hasMatch(match['description'], this.inputValue);
-      });
+      return proposalGroups.filter((match) => { return match.matches.length !== 0; });
     },
     hasMatches() {
       return this.filteredMatches.length >= 0 && this.inputValue !== '';
@@ -101,10 +123,10 @@ app.component('ProposalSearch', {
       <h6>Proposals</h6>
       <ul class="list-group list-group-flush">
         <li v-for="proposal in match.proposals" class="list-group-item">
-          {{proposal.description}} <a :href='generateProposalViewUrl(proposal.id)'>(view)</a>
+          {{proposal.name}}, {{proposal.requested_budget}} <a :href='generateProposalViewUrl(proposal.id)'>(view)</a>
         </li>
       </ul>
-      <p class="card-text">Matched on: <span v-for="term in match.matches" class="badge bg-secondary">{{term}}</span></p>
+      <p class="card-text">Matched on: <span v-for="term in match.matches" class="badge bg-secondary ms-1">{{term}}</span></p>
     </div>
   </div>
 </div>