Show article authors and scenarios in search results.

asl_articles/tests/test_authors.py

@@ -3,7 +3,7 @@
 import urllib.request
 import json
 
-from asl_articles.tests.utils import init_tests, find_child, wait_for_elem, find_search_result
+from asl_articles.tests.utils import init_tests, find_child, find_children, wait_for_elem, find_search_result
 from asl_articles.tests.react_select import ReactSelect
 
 from asl_articles.tests.test_articles import _create_article, _edit_article
@@ -64,8 +64,12 @@ def _check_authors( flask_app, all_authors, expected ):
     # check the authors in the UI
     for article_no,authors in enumerate( expected ):
 
-        # check the authors for the next article
+        # check the authors in the article's search result
         sr = find_search_result( "article {}".format( 1+article_no ) )
+        sr_authors = [ a.text for a in find_children( ".author", sr ) ]
+        assert sr_authors == authors
+
+        # check the authors in the article's config
         find_child( ".edit", sr ).click()
         dlg = wait_for_elem( 2, "#modal-form" )
         select = ReactSelect( find_child( ".authors .react-select", dlg ) )

asl_articles/tests/test_scenarios.py

@@ -3,7 +3,7 @@
 import urllib.request
 import json
 
-from asl_articles.tests.utils import init_tests, find_child, wait_for_elem, find_search_result
+from asl_articles.tests.utils import init_tests, find_child, find_children, wait_for_elem, find_search_result
 from asl_articles.tests.react_select import ReactSelect
 
 from asl_articles.tests.test_articles import _create_article, _edit_article
@@ -75,8 +75,12 @@ def _check_scenarios( flask_app, all_scenarios, expected ):
     # check the scenarios in the UI
     for article_no,scenarios in enumerate( expected ):
 
-        # check the scenarios for the next article
+        # check the scenarios in the article's search result
         sr = find_search_result( "article {}".format( 1+article_no ) )
+        sr_scenarios = [ s.text for s in find_children( ".scenario", sr ) ]
+        assert sr_scenarios == scenarios
+
+        # check the scenarios in the article's config
         find_child( ".edit", sr ).click()
         dlg = wait_for_elem( 2, "#modal-form" )
         select = ReactSelect( find_child( ".scenarios .react-select", dlg ) )

web/src/ArticleSearchResult.js

@@ -1,7 +1,7 @@
 import React from "react" ;
 import { ArticleSearchResult2 } from "./ArticleSearchResult2.js" ;
 import { gAppRef } from "./index.js" ;
-import { makeOptionalLink, applyUpdatedVals } from "./utils.js" ;
+import { makeScenarioDisplayName, applyUpdatedVals, makeOptionalLink, makeCommaList } from "./utils.js" ;
 
 const axios = require( "axios" ) ;
 
@@ -13,6 +13,12 @@ export class ArticleSearchResult extends React.Component
     render() {
         const pub = gAppRef.caches.publications[ this.props.data.pub_id ] ;
         const image_url = gAppRef.makeFlaskImageUrl( "article", this.props.data.article_image_id, true ) ;
+        const authors = makeCommaList( this.props.data.article_authors,
+            (a) => <span className="author" key={a}> {gAppRef.caches.authors[a].author_name} </span>
+        ) ;
+        const scenarios = makeCommaList( this.props.data.article_scenarios,
+            (s) => <span className="scenario" key={s}> { makeScenarioDisplayName( gAppRef.caches.scenarios[s] ) } </span>
+        ) ;
         let tags = [] ;
         if ( this.props.data.article_tags )
             this.props.data.article_tags.map( t => tags.push( <div key={t} className="tag"> {t} </div> ) ) ;
@@ -28,9 +34,11 @@ export class ArticleSearchResult extends React.Component
                 <img src="/images/edit.png" className="edit" onClick={this.onEditArticle.bind(this)} alt="Edit this article." />
                 <img src="/images/delete.png" className="delete" onClick={this.onDeleteArticle.bind(this)} alt="Delete this article." />
                 { this.props.data.article_subtitle && <div className="subtitle" dangerouslySetInnerHTML={{ __html: this.props.data.article_subtitle }} /> }
+                { authors.length > 0 && <div className="authors"> By {authors} </div> }
             </div>
             <div className="snippet" dangerouslySetInnerHTML={{__html: this.props.data.article_snippet}} />
-            { tags.length > 0 && <div className="tags"> <label>Tags:</label> {tags} </div> }
+            { scenarios.length > 0 && <div className="scenarios"> Scenarios: {scenarios} </div> }
+            { tags.length > 0 && <div className="tags"> Tags: {tags} </div> }
         </div> ) ;
     }
 

web/src/SearchResults.css

@@ -7,12 +7,13 @@
 }
 
 .search-result .name { padding: 2px 5px ; }
-.search-result .image { float: left ; margin-right: 0.25em ; height: 1em ; }
 .search-result .name a { font-weight: bold ; text-decoration: none ; }
 .search-result .name .publisher { font-size: 80% ; font-style: italic ; }
 .search-result .name .publication { font-size: 80% ; font-style: italic ; }
 .search-result .name img.edit { margin-left: 0.5em ; height: 0.8em ; cursor: pointer ; }
 .search-result .name img.delete { float: right ; margin: 0.2em 0 0 0.5em ; height: 0.8em ; cursor: pointer ; }
+.search-result .image { float: left ; margin-right: 0.25em ; height: 1em ; }
+.search-result .authors { font-size: 80% ; font-style: italic ; color: #666 ; }
 .search-result .description { font-size: 80% ; padding: 2px 5px ; }
 
 .search-result.publisher .name { border: 1px solid #c0c0c0 ; background: #a0e0f0 ; }
@@ -20,5 +21,7 @@
 .search-result.article .title { border: 1px solid #c0c0c0 ; background: #60f000 ; }
 .search-result.article .subtitle { font-size: 80% ; font-style: italic ; }
 
+.search-result .scenarios { font-size: 80% ; font-style: italic ; color: #666 ; }
+
 .search-result .tags { margin-top: 0.25em ; font-size: 80% ; font-style: italic ; color: #666 ; }
 .search-result .tags .tag { display: inline ; margin-right: 0.25em ; padding: 0 2px ; border: 1px solid #ccc ; background: #f0f0f0 ; }

web/src/utils.js

@@ -72,6 +72,16 @@ export function makeOptionalLink( caption, url ) {
     return link ;
 }
 
+export function makeCommaList( vals, extract ) {
+    let result = [] ;
+    for ( let i=0 ; i < vals.length ; ++i ) {
+        result.push( extract( vals[i] ) ) ;
+        if ( i < vals.length-1 )
+            result.push( ", " ) ;
+    }
+    return result ;
+}
+
 export function bytesDisplayString( nBytes )
 {
     if ( nBytes === 1 )