Merge 1d93279 into 6c69f41

openmrs · Jul 18, 2018 · 2569f15 · 2569f15
2 parents 6c69f41 + 1d93279
commit 2569f15
Show file tree

Hide file tree

Showing 14 changed files with 867 additions and 9 deletions.
diff --git a/src/App.js b/src/App.js
@@ -17,6 +17,7 @@ import NotFound from './components/NotFound';
 import DictionaryOverview from './components/dashboard/components/dictionary/DictionaryContainer';
 import OwnerDictionary from './components/dashboard/container/OwnerDictionary';
 import GeneralSearchContainer from './components/GeneralSearch/GeneralSearchContainer';
+import UserDashboard from './components/userDasboard/container/UserDashboard';
 
 const App = () => (
   <Provider store={store}>
@@ -25,7 +26,7 @@ const App = () => (
         <Navbar />
         <Switch>
           <Route exact path="/" component={Authenticate(Login)} />
-          <Route exact path="/dashboard" component={Authenticate(OwnerDictionary)} />
+          <Route exact path="/dashboard" component={Authenticate(UserDashboard)} />
           <Route exact path="/dashboard/sources" component={Authenticate(SourceSearch)} />
           <Route exact path="/dashboard/concepts" component={Authenticate(ConceptSearch)} />
           <Route exact path="/dashboard/dictionaries" component={Authenticate(DictionaryDisplay)} />

diff --git a/src/components/dashboard/components/dictionary/DictionaryCard.jsx b/src/components/dashboard/components/dictionary/DictionaryCard.jsx
@@ -49,16 +49,10 @@ const DictionaryCard = (dictionary) => {
         </div>
         <div className="source-card-footer">
           <Link
-            className="viewdetailslink"
+            className="view-details-link"
             to={`/dictionaryOverview${url}`}
           >
-            <button
-              type="button"
-              className="btn btn-outline-secondary"
-              id="viewDetails"
-            >
-          View Details
-            </button>
+            <span id="viewDetails">View Details</span>
           </Link>
         </div>
       </div>

diff --git a/src/components/userDasboard/components/CardWrapper.jsx b/src/components/userDasboard/components/CardWrapper.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DictionaryCard from '../../dashboard/components/dictionary/DictionaryCard';
+import Loader from '../../Loader';
+
+const CardWrapper = ({ dictionaries, fetching, org }) => {
+  if (dictionaries.length >= 1) {
+    return (
+      <div className="row justify-content-center">
+        {dictionaries.map(dictionary => (
+          <DictionaryCard dictionary={dictionary} key={dictionary.uuid} />
+        ))}
+      </div>
+    );
+  }
+  if (fetching && !org) {
+    return (
+      <div className="text-center mt-3">
+        <Loader />
+      </div>
+    );
+  }
+  return (
+    <div className="text-center mt-3 p-10">
+      {!org && <h6 className="p-20">No dictionary found</h6>}
+    </div>
+  );
+};
+
+CardWrapper.propTypes = {
+  fetching: PropTypes.bool.isRequired,
+  org: PropTypes.bool,
+  dictionaries: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+  })).isRequired,
+};
+
+CardWrapper.defaultProps = {
+  org: false,
+};
+export default CardWrapper;
diff --git a/src/components/userDasboard/components/DashboardDetails.jsx b/src/components/userDasboard/components/DashboardDetails.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const DashboardDetails = ({ numberOfOrgs, numberOfDictionary, organizations }) => {
+  const nameOfOrganizations = organizations.map(organization => organization.name).join(',');
+  const dictionary = numberOfDictionary < 2 ? 'dictionary' : 'dictionaries';
+  if (numberOfOrgs === 1) {
+    return (
+      <div className="user-data">
+        <p className="lead">
+          You belong to {nameOfOrganizations} organization. This can be changed via{' '}
+          <a href="https://qa.openconceptlab.org/" target="_blank" rel="noopener noreferrer">
+            the traditional OCL
+          </a>.
+        </p>
+        <p className="lead">
+          You can <Link to="dashboard/dictionaries">view all OpenMRS public dictionaries</Link>.
+        </p>
+      </div>
+    );
+  } else if (numberOfOrgs > 1) {
+    return (
+      <div className="user-data">
+        <p className="lead">
+          You belong to {numberOfOrgs} organizations:{' '}
+          {organizations.map(organization => (
+            <span className="d-block lead org-name text-capitalize" key={organization.id}>
+              <a
+                href={`https://qa.openconceptlab.org${organization.url}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <i className="fas fa-arrow-circle-right fa-fw" /> {organization.name}
+              </a>
+            </span>
+          ))}{' '}
+          This can be changed via{' '}
+          <a href="https://qa.openconceptlab.org/" target="_blank" rel="noopener noreferrer">
+            the traditional OCL
+          </a>.
+        </p>
+        <p className="lead">
+          You can <Link to="dashboard/dictionaries">view all OpenMRS public dictionaries</Link>.
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div className="user-data">
+      <p className="lead">
+        You do not belong to any organization. This can be changed via{' '}
+        <a href="https://qa.openconceptlab.org/" target="_blank" rel="noopener noreferrer">
+          the traditional OCL
+        </a>.
+      </p>
+      <p className="lead">
+        You currently have {numberOfDictionary} personal {dictionary}. You can{' '}
+        <Link to="dashboard/dictionaries">view all OpenMRS public dictionaries</Link>.
+      </p>
+    </div>
+  );
+};
+
+DashboardDetails.propTypes = {
+  numberOfOrgs: PropTypes.number.isRequired,
+  numberOfDictionary: PropTypes.number.isRequired,
+  organizations: PropTypes.array.isRequired,
+};
+
+export default DashboardDetails;
diff --git a/src/components/userDasboard/container/UserDashboard.jsx b/src/components/userDasboard/container/UserDashboard.jsx
@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import '../styles/user-dasboard-styles.css';
+import { fetchUserData, clearDictionaryData } from '../../../redux/actions/user';
+import { getUsername } from '../../dictionaryConcepts/components/helperFunction';
+import DashboardDetails from '../components/DashboardDetails';
+import CardWrapper from '../components/CardWrapper';
+import AddDictionary from '../../dashboard/components/dictionary/AddDictionary';
+
+export class UserDashboard extends Component {
+  static propTypes = {
+    fetchUserData: PropTypes.func.isRequired,
+    clearDictionaryData: PropTypes.func.isRequired,
+    loading: PropTypes.bool.isRequired,
+    orgDictionary: PropTypes.array.isRequired,
+    userDictionary: PropTypes.array.isRequired,
+    userOrganization: PropTypes.array.isRequired,
+    user: PropTypes.shape({
+      name: PropTypes.string,
+      orgs: PropTypes.number,
+      public_collections: PropTypes.number,
+    }).isRequired,
+  };
+
+  state = {
+    show: false,
+  };
+
+  componentDidMount() {
+    const username = getUsername();
+    this.props.fetchUserData(username);
+  }
+
+  componentWillUnmount() {
+    this.props.clearDictionaryData();
+  }
+
+  handleHide = () => this.setState({ show: false });
+  handleShow = () => this.setState({ show: true });
+
+  render() {
+    const {
+      user: { name, orgs, public_collections },
+      userOrganization,
+      userDictionary,
+      orgDictionary,
+      loading,
+    } = this.props;
+    const dictionary = public_collections < 2 ? 'dictionary' : 'dictionaries';
+    return (
+      <div className="container-fluid mt-5">
+        <AddDictionary show={this.state.show} handleHide={this.handleHide} />
+        <div className="row justify-content-center">
+          <div className="col-11 user-info">
+            <div className="row">
+              <div className="greetings">
+                <h5>Welcome {name}</h5>
+              </div>
+            </div>
+            <div className="row">
+              <DashboardDetails
+                numberOfOrgs={orgs}
+                numberOfDictionary={public_collections}
+                organizations={userOrganization}
+              />
+            </div>
+          </div>
+          <div className="col-11 user-dictionary-wrapper">
+            <div className="row">
+              <div className="greetings col-12 d-flex justify-content-between">
+                <h3>Your {dictionary}</h3>
+                <h6 className="see-more-link">
+                  <button
+                    className="btn btn-success btn-sm"
+                    id="add-dictionary"
+                    onClick={this.handleShow}
+                  >
+                    <i className="fas fa-plus fa-fw" /> New Dictionary
+                  </button>
+                </h6>
+              </div>
+              <div className="line-divider" />
+            </div>
+            <div className="row justify-content-center">
+              <div className="col-11">
+                <CardWrapper dictionaries={userDictionary} fetching={loading} />
+                <CardWrapper dictionaries={orgDictionary} fetching={loading} org />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const mapStateToProps = state => ({
+  user: state.user.user,
+  userDictionary: state.user.userDictionary,
+  orgDictionary: state.user.orgDictionary,
+  userOrganization: state.user.userOrganization,
+  loading: state.user.loading,
+});
+
+export default connect(
+  mapStateToProps,
+  { fetchUserData, clearDictionaryData },
+)(UserDashboard);
diff --git a/src/components/userDasboard/styles/user-dasboard-styles.css b/src/components/userDasboard/styles/user-dasboard-styles.css
@@ -0,0 +1,72 @@
+.user-info {
+  box-shadow: 0px 2px 20px 15px #b1b1b114;
+  padding: 2rem;
+}
+
+.user-info .user-data {
+  text-align: left;
+  font-size: 1rem;
+}
+
+.user-data .lead {
+  font-size: 1rem;
+}
+
+.user-dictionary-wrapper {
+  margin-top: 2rem;
+  box-shadow: 0px 2px 20px 15px #b1b1b114;
+  padding: .5rem;
+}
+
+.user-data a {
+  font-size: 1rem;
+  color: rgb(17, 88, 180);
+  font-weight: 400;
+}
+
+.see-more-link {
+  margin-top: .35rem;
+}
+
+.org-name {
+  line-height: 1rem;
+  padding: 0;
+  margin: .5rem;
+}
+
+.greetings h3 {
+  margin-bottom: .2rem;
+}
+
+.line-divider {
+  display: inline-block;
+  height: .3rem;
+  width: 5rem;
+  background: #343a40;
+  margin-left: 1.7rem;
+  border-radius: 100rem;
+  -webkit-border-radius: 100rem;
+  -moz-border-radius: 100rem;
+  -ms-border-radius: 100rem;
+  -o-border-radius: 100rem;
+}
+
+.view-details-link {
+  color: #343a40;
+  padding: .1rem .5rem;
+  border-radius: .2rem;
+  transition: all 400ms ease-in-out;
+  -webkit-transition: all 400ms ease-in-out;
+  -moz-transition: all 400ms ease-in-out;
+  -ms-transition: all 400ms ease-in-out;
+  -o-transition: all 400ms ease-in-out;
+  -webkit-border-radius: .2rem;
+  -moz-border-radius: .2rem;
+  -ms-border-radius: .2rem;
+  -o-border-radius: .2rem;
+}
+
+.view-details-link:hover {
+  color: #000000;
+  background: #8080801f;
+}
diff --git a/src/redux/actions/types.js b/src/redux/actions/types.js
@@ -35,3 +35,7 @@ export const TOTAL_CONCEPT_COUNT = '[concepts] total_concept_count';
 
 export const ADD_EXISTING_CONCEPTS = '[concepts] add_existing_concepts';
 export const SEARCH_RESULTS = '[searchResults] search';
+export const GET_USER = '[user] get_user';
+export const FETCH_USER_DICTIONARY = '[dictionary] fetch_user_dictionary';
+export const FETCH_ORG_DICTIONARY = '[dictionary] fetch_org_dictionary';
+export const FETCH_USER_ORGANIZATION = '[user] fetch_user_organization';