OCLOMRS-40: redesign sources page user interface (#27)

openmrs · Jun 8, 2018 · 32afaff · 32afaff
1 parent 46d27a3
commit 32afaff
Show file tree

Hide file tree

Showing 8 changed files with 248 additions and 167 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,7 +7,7 @@ import store from './redux/reducers/store';
 import './App.css';
 import Login from './components/Login';
 import Authenticate from './components/Auth';
-import Dashboard from './components/dashboard/container';
+import SourceSearch from './components/dashboard/container/SourceSearch';
 
 const App = () => (
   <Provider store={store}>
@@ -17,7 +17,7 @@ const App = () => (
         <Navbar />
         <Switch>
           <Route exact path="/" component={Login} />
-          <Route exact path="/dashboard" component={Authenticate(Dashboard)} />
+          <Route exact path="/dashboard" component={Authenticate(SourceSearch)} />
         </Switch>
       </div>
     </BrowserRouter>

diff --git a/src/components/dashboard/components/ListWrapper.jsx b/src/components/dashboard/components/ListWrapper.jsx
@@ -5,7 +5,13 @@ import Loader from '../../Loader';
 
 const ListWrapper = ({ sources, fetching }) => {
   if (sources.length >= 1) {
-    return sources.map(source => <Card source={source} key={source.uuid} />);
+    return (
+      <div className="row justify-content-center">
+        {sources.map(source => (
+          <Card source={source} key={source.uuid} />
+        ))}
+      </div>
+    );
   }
   if (fetching) {
     return (

diff --git a/src/components/dashboard/components/SearchBar.jsx b/src/components/dashboard/components/SearchBar.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Tooltip from 'react-tooltip';
 
 /* eslint-disable */
-const SearchBar = ({ onSearch, onSubmit, searchValue, dict, ext, IR, IT, sort }) => (
+const SearchBar = ({ onSearch, onSubmit, searchValue, dict, ext, IR, IT }) => (
   <div className="container-fluid">
     <div className="row justify-content-center">
       <div className="col-1" />
@@ -15,8 +15,8 @@ const SearchBar = ({ onSearch, onSubmit, searchValue, dict, ext, IR, IT, sort })
             id="search"
             value={searchValue}
             onChange={onSearch}
-            className="search-bar col-5 col-sm-7 col-md-6 col-lg-7"
-            placeholder="Search for sources"
+            className="search-bar col-5 col-sm-7 col-md-6 col-lg-9"
+            placeholder="Search for a source"
           />
           <div className="dropdown d-inline d-md-none col-1 mini-source-btn">
             <a
@@ -38,41 +38,6 @@ const SearchBar = ({ onSearch, onSubmit, searchValue, dict, ext, IR, IT, sort })
               </a>
             </div>
           </div>
-          <div className="dropdown d-inline d-md-none mini-sort-btn col-1">
-            <a
-              className="dropdown-toggle"
-              href="#"
-              role="button"
-              id="sort"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-              data-tip="sort"
-            >
-              <i className="fas fa-sort-alpha-up fa-fw" />
-            </a>
-
-            <div className="dropdown-menu" aria-labelledby="sort">
-              <a
-                className="dropdown-item"
-                id="sortAsc"
-                href="#"
-                onClick={event => sort(event, 'sortAsc=name')}
-              >
-                <i className="fas fa-sort-alpha-up fa-fw" />
-                Name (Asc)
-              </a>
-              <a
-                className="dropdown-item"
-                href="#"
-                id="sortDesc"
-                onClick={event => sort(event, 'sortDesc=name')}
-              >
-                <i className="fas fa-sort-alpha-down fa-fw" />
-                Name (Desc)
-              </a>
-            </div>
-          </div>
           <div className="dropdown d-none d-md-inline d-lg-inline d-xl-inline mini-sort-btn col-md-2">
             <a
               className="dropdown-toggle"
@@ -83,8 +48,7 @@ const SearchBar = ({ onSearch, onSubmit, searchValue, dict, ext, IR, IT, sort })
               aria-haspopup="true"
               aria-expanded="false"
             >
-              <i className="fas fa-filter fa-fw" />
-              Source Type
+              Filter by source type
             </a>
 
             <div className="dropdown-menu source-menu" aria-labelledby="sourceType">
@@ -147,41 +111,6 @@ const SearchBar = ({ onSearch, onSubmit, searchValue, dict, ext, IR, IT, sort })
               </div>
             </div>
           </div>
-          <div className="dropdown d-none d-md-inline d-lg-inline d-xl-inline mini-sort-btn col-md-2">
-            <a
-              className="dropdown-toggle"
-              href="#"
-              role="button"
-              id="sort"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >
-              <i className="fas fa-sort fa-fw" />
-              Sort
-            </a>
-
-            <div className="dropdown-menu" aria-labelledby="sort">
-              <a
-                className="dropdown-item"
-                id="sort-asc"
-                href="#"
-                onClick={event => sort(event, 'sortAsc=name')}
-              >
-                <i className="fas fa-sort-alpha-up fa-fw" />
-                Name (Asc)
-              </a>
-              <a
-                className="dropdown-item"
-                id="sort-desc"
-                href="#"
-                onClick={event => sort(event, 'sortDesc=name')}
-              >
-                <i className="fas fa-sort-alpha-down fa-fw" />
-                Name (Desc)
-              </a>
-            </div>
-          </div>
         </form>
       </div>
     </div>

diff --git a/src/components/dashboard/components/SourceCard.jsx b/src/components/dashboard/components/SourceCard.jsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import Avatar from 'react-avatar';
-import moment from 'moment';
-import ReactTooltip from 'react-tooltip';
 
 const SourceCard = (source) => {
   const {
@@ -11,52 +8,44 @@ const SourceCard = (source) => {
       versions_url,
       concepts_url,
       owner,
-      updated_on,
+      owner_type,
       source_type,
       active_concepts,
-      active_mappings,
       versions,
+      owner_url,
     },
   } = source;
   return (
-    <div className="row justify-content-center ">
-      <div className="col-1 d-none d-lg-block d-xl-block d-md-block" />
-      <div className="col-10 mt-2 item-list pt-3">
-        <div className="row list-body">
-          <div className="col col-sm-2 col-md-1">
-            <Avatar name={source_type} round size={50} />
+    <div className="col-12 col-sm-6 col-md-4 col-lg-3 p-3">
+      <div className="card-container">
+        <div className="source-card-body">
+          <div className="float-created-at">
+            <a href={`https://www.openconceptlab.com${owner_url}`} className="source-owner-name">
+              {owner} <small>({owner_type})</small>
+            </a>
+          </div>
+          <div className="source-name col-12 mt-3">
+            <a href={`https://www.openconceptlab.com${url}`}>
+              <h6 className="text-left">{name}</h6>
+            </a>
           </div>
-          <div className="source-name ml-3 col-sm-6 col">
-            <h6>
-              <a href={`https://www.openconceptlab.com${url}`} className="name-url">
-                {owner} / <span className="font-weight-bold">{name}</span>
+          <div className="description col-12 text-left">
+            <p>
+              <a href={`https://www.openconceptlab.com${concepts_url}`} className="source-type">
+                {active_concepts} concepts,
+              </a>{' '}
+              <a href={`https://www.openconceptlab.com${versions_url}`} className="source-type">
+                Version {versions}
               </a>
-            </h6>
-            <p className="description col">
-              Source type: <span className="text-monospace">{source_type}</span>
-            </p>
-            <p className="update-time col">
-              Last updated on{' '}
-              <span className="text-monospace">{moment(updated_on).format('L')}</span>
             </p>
           </div>
-          <div className="col key-icons d-none d-lg-block d-xl-block d-md-block">
-            <a href={`https://www.openconceptlab.com${concepts_url}`} data-tip="active concepts">
-              <i className="fas fa-tag" />
-              {active_concepts}
-            </a>
-            <a href="#!" data-tip="active mappings">
-              <i className="fas fa-link" />
-              {active_mappings}
-            </a>
-            <a href={`https://www.openconceptlab.com${versions_url}`} data-tip="versions">
-              <i className="fas fa-asterisk" />
-              {versions}
-            </a>
+        </div>
+        <div className="source-card-footer">
+          <div className="avatar col-12">
+            Source type: <span className="d-inline ml-1">{source_type || 'N/A'}</span>
           </div>
         </div>
       </div>
-      <ReactTooltip />
     </div>
   );
 };

diff --git a/src/components/dashboard/container/index.jsx → ...ents/dashboard/container/SourceSearch.jsx b/src/components/dashboard/container/index.jsx → ...ents/dashboard/container/SourceSearch.jsx
@@ -21,11 +21,10 @@ export class SourceSearch extends Component {
 
     this.state = {
       searchInput: '',
-      sort: 'sortAsc=name',
+      sort: 'sortAsc=bestmatch',
     };
     this.onSearch = this.onSearch.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
-    this.sortData = this.sortData.bind(this);
   }
 
   componentDidMount() {
@@ -59,12 +58,6 @@ export class SourceSearch extends Component {
     this.props.fetchSources(this.state.searchInput, sourceType, 25, 1, sortParams || sort);
   }
 
-  sortData(event, sort) {
-    event.preventDefault();
-    this.setState({ sort });
-    this.onSubmit(event, sort);
-  }
-
   render() {
     const {
       searchInput, dict, ext, IR, IT,
@@ -80,17 +73,25 @@ export class SourceSearch extends Component {
           ext={ext}
           IR={IR}
           IT={IT}
-          sort={this.sortData}
         />
-        <ListWrapper sources={this.props.sources} fetching={this.props.isFetching} />
+        <div className="container-fluid">
+          <div className="row justify-content-center">
+            <div className="offset-sm-1 col-10">
+              <ListWrapper sources={this.props.sources} fetching={this.props.isFetching} />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
 }
 
-const mapStateToProps = state => ({
+export const mapStateToProps = state => ({
   sources: state.sources.sources,
   isFetching: state.sources.loading,
 });
 
-export default connect(mapStateToProps, { fetchSources })(SourceSearch);
+export default connect(
+  mapStateToProps,
+  { fetchSources },
+)(SourceSearch);