Merge pull request #104 from Azzoo/main

Date & Time filter for charts #83
WildAid · Jul 28, 2020 · 0e23f24 · 0e23f24
2 parents bd810e6 + 876becb
commit 0e23f24
Show file tree

Hide file tree

Showing 29 changed files with 1,286 additions and 327 deletions.
diff --git a/README.md b/README.md
@@ -133,14 +133,14 @@ This method checks if the user is already authenticated and redirects the user t
 
 ```js
 const auth = authService.isStitchAuthenticated;
-
 if (route.auth){
   if (!auth){
     return <Redirect to="/login" />;
   } else {
     if (!authService.isAuthenticated){
-      authService.getUserFromLocalStorage();
-      return <Redirect to={route.path} />
+      return authService.reauthenticateUser().then(()=>{
+        return <Redirect to={route.path} />
+      });
     }
   }
 }
@@ -152,6 +152,7 @@ if (route.routes){
 } else {
   return <route.component isLoggedIn={auth} {...props} />;
 }
+};
 ```
 
 #### MongoDB Charts
@@ -166,12 +167,12 @@ Example chart options:
 
 ```js
 const chartOptions = {
-  width: "100%", 
+  width: "100%",
   height: "100%",
   refreshInterval: 1300, // in seconds.
-  useAuthenticatedAccess: true, 
+  useAuthenticatedAccess: true,
   chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
-  filter: {exampleField: "someValue"} 
+  filter: {exampleField: "someValue"}
 };
 ```
 

diff --git a/src/components/boardings/boarding-view/crew/crew.section.js b/src/components/boardings/boarding-view/crew/crew.section.js
@@ -31,7 +31,7 @@ class CrewSection extends Component {
             subText={t("BOARDING_PAGE.VIEW_BOARDING.PHOTOS")}
           />
           <TextViewer
-            mainText={captain.attachments.notes[0]}
+            mainText={captain.attachments && captain.attachments.notes && captain.attachments.notes.length ? captain.attachments.notes[0] : ""}
             subText={t("BOARDING_PAGE.VIEW_BOARDING.NOTES")}
           />
         </section>

diff --git a/src/components/header/header.component.js b/src/components/header/header.component.js
@@ -29,6 +29,7 @@ const authService = AuthService.getInstance();
 class Header extends Component {
   state = {
     activeMenu: "",
+    currentUser: null
   };
 
   showActiveMenu = (value) => {
@@ -49,11 +50,18 @@ class Header extends Component {
     window.location.href = "/";
   };
 
+  componentDidMount(){
+    authService.on("user-object-changed", (user) => {
+      this.setState({user: {...user}})
+    });
+  }
+
   render() {
-    const { activeMenu } = this.state;
+    const { activeMenu, currentUser } = this.state;
     const { t } = this.props;
-
-    return (
+    const isAuthenticated = authService.isAuthenticated;
+    const user = currentUser ? currentUser : authService.user;
+    return isAuthenticated ? (
       <header className="flex-row align-center justify-center full-view header-top">
         <div className="flex-row align-center justify-between standard-view">
           <NavLink to={HOME_PAGE}>
@@ -200,11 +208,11 @@ class Header extends Component {
                 onClick={() => this.showActiveMenu("profile")}
               >
                 <div className="flex-row align-center">
-                  <UserPhoto imageId={authService.user.profilePic} defaultIcon={true}/>
+                  <UserPhoto imageId={user ? user.profilePic : null} defaultIcon={true}/>
                 </div>
                 <div className="flex-row align-center profile-name">
-                  {authService.isAuthenticated
-                    ? `${authService.user.name.first} ${authService.user.name.last}`
+                  {isAuthenticated && user.name
+                    ? `${user.name.first} ${user.name.last}`
                     : t("WARNINGS.NOT_AUTHENTICATED")}
                 </div>
                 <img
@@ -231,7 +239,7 @@ class Header extends Component {
           </div>
         </div>
       </header>
-    );
+    ): "";
   }
 }
 

diff --git a/src/components/home/boardings-section/boardings.section.js b/src/components/home/boardings-section/boardings.section.js
@@ -41,8 +41,11 @@ class BoardingsSection extends Component {
   };
 
   render() {
-    const { t } = this.props;
+    const { t, filter} = this.props;
 
+    if (filter && this.state.filter === ""){
+      chartOptions.filter = filter;
+    }
     return (
       <section className="flex-column justify-start align-start standard-view white-bg box-shadow margin-bottom charts-section">
         <div className="flex-row justify-between align-center full-view">

diff --git a/src/components/home/compliance-rate-section/compliance-rate.section.js b/src/components/home/compliance-rate-section/compliance-rate.section.js
@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React, { memo, Component } from "react";
 import { withTranslation } from "react-i18next";
 
 import ChartBox from "./../../charts/chart-box.component";
@@ -39,30 +39,39 @@ const chartComplianceRate = {
   ...stitchService.chartsConfig["compliance-rate"],
 };
 
-const ComplianceRateSection = ({ t }) => {
-  return (
-    <section className="flex-column justify-start align-start standard-view white-bg box-shadow margin-bottom charts-section">
-      <h2 className="chart-name">{t("HOME_PAGE.COMPLIANCE_RATE")}</h2>
-      <div className="flex-row justify-between align-stretch full-view lg-chart">
-        <div className="half-row-view">
-          <div className="align-stretch md-chart compliance-rate-value ">
-            <ChartBox options={chartComplianceRate}></ChartBox>
-          </div>
-          <div className="flex-row align-stretch md-chart">
-            <div className="half-row-view">
-              <ChartBox options={chartBoardingsCount}></ChartBox>
+class ComplianceRateSection extends Component{
+
+  render(){
+    const { t, filter } = this.props;
+    if (filter){
+      chartBoardingsCompliance.filter = filter;
+      chartCitationsAndWarnings.filter = filter;
+      chartBoardingsCount.filter = filter;
+    }
+    return (
+      <section className="flex-column justify-start align-start standard-view white-bg box-shadow margin-bottom charts-section">
+        <h2 className="chart-name">{t("HOME_PAGE.COMPLIANCE_RATE")}</h2>
+        <div className="flex-row justify-between align-stretch full-view lg-chart">
+          <div className="half-row-view">
+            <div className="align-stretch md-chart compliance-rate-value ">
+              <ChartBox options={chartComplianceRate}></ChartBox>
             </div>
-            <div className="half-row-view">
-              <ChartBox options={chartCitationsAndWarnings}></ChartBox>
+            <div className="flex-row align-stretch md-chart">
+              <div className="half-row-view">
+                <ChartBox options={chartBoardingsCount}></ChartBox>
+              </div>
+              <div className="half-row-view">
+                <ChartBox options={chartCitationsAndWarnings}></ChartBox>
+              </div>
             </div>
           </div>
+          <div className="half-row-view">
+            <ChartBox options={chartBoardingsCompliance}></ChartBox>
+          </div>
         </div>
-        <div className="half-row-view">
-          <ChartBox options={chartBoardingsCompliance}></ChartBox>
-        </div>
-      </div>
-    </section>
-  );
-};
+      </section>
+    );
+  };
 
+}
 export default withTranslation("translation")(memo(ComplianceRateSection));
diff --git a/src/components/home/home.component.js b/src/components/home/home.component.js
@@ -1,15 +1,18 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { withTranslation } from "react-i18next";
-
+import moment from "moment";
 import ComplianceRateSection from "./compliance-rate-section/compliance-rate.section";
 import BoardingsSection from "./boardings-section/boardings.section";
 import PatrolHoursSection from "./patrol-hours-section/patrol-hours.section";
 import SearchPanel from "./../partials/search-panel/search-panel.component";
+import DatesRange from "./../partials/dates-range/dates-range.component";
 
 import SearchService from "./../../services/search.service";
+import AuthService from "./../../services/auth.service";
 
 import "./home.css";
 
+const authService = AuthService.getInstance();
 const searchService = SearchService.getInstance();
 
 class Home extends Component {
@@ -19,6 +22,10 @@ class Home extends Component {
     crew: [],
     searchQuery: "",
     highlighted: [],
+    isLoaded: true,
+    datesFilter:{
+          date: { $gt: moment().subtract(1, "week").toDate() }
+      }
   };
 
   search = (value) => {
@@ -33,9 +40,21 @@ class Home extends Component {
     this.setState({ searchQuery: value });
   };
 
+  changeFilter = (filter) => {
+    let filterObject =
+    { $and : [{
+        date: { $gt: new Date(filter.start)}
+      }, {
+        date: { $lte: new Date(filter.end)}
+      }]
+    };
+    this.setState({datesFilter: filterObject});
+  }
+
   render() {
-    const { vessels, boardings, crew, searchQuery, highlighted } = this.state;
+    const { vessels, boardings, crew, searchQuery, highlighted, isLoaded, datesFilter } = this.state;
     const { t } = this.props;
+    const user = authService.user;
 
     return (
       <div className="flex-column full-view align-center home">
@@ -48,10 +67,18 @@ class Home extends Component {
           searchWords={highlighted}
           isAutofill={true}
         />
-        <h1>{`${t("HOME_PAGE.OVERVIEW")} April 01, 2020 - April 25, 2020`}</h1>
-        <ComplianceRateSection />
-        <BoardingsSection />
-        <PatrolHoursSection />
+      <div className="standard-view page-header">
+            <div className="item-label">{t("HOME_PAGE.DASHBOARD")}</div>
+            <div className="flex-row full-view justify-between align-center">
+              <div className="item-name">{isLoaded && user ? user.agency.name : t("LOADING.LOADING")}</div>
+              <DatesRange onFilterChange={this.changeFilter}></DatesRange>
+            </div>
+        </div>
+        {isLoaded && <Fragment>
+          <ComplianceRateSection filter={datesFilter}/>
+          <BoardingsSection filter={datesFilter} />
+          <PatrolHoursSection filter={datesFilter} />
+        </Fragment>}
       </div>
     );
   }

diff --git a/src/components/home/home.css b/src/components/home/home.css
@@ -16,3 +16,8 @@
     width: 100%;
     height: 100vh;
 }
+
+.home .page-header{
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
diff --git a/src/components/home/patrol-hours-section/patrol-hours.section.js b/src/components/home/patrol-hours-section/patrol-hours.section.js
@@ -41,7 +41,11 @@ class PatrolHoursSection extends Component {
   };
 
   render() {
-    const { t } = this.props;
+    const { t, filter } = this.props;
+
+    if (filter && this.state.filter === ""){
+      chartOptions.filter = filter;
+    }
 
     return (
       <section className="flex-column justify-start align-start standard-view white-bg box-shadow margin-bottom charts-section patrol-hours-section">

diff --git a/src/components/login/login.component.js b/src/components/login/login.component.js
@@ -34,7 +34,7 @@ class Login extends Component {
         this.setState({
           loading: false,
         });
-        history.replace(HOME_PAGE);
+        history.push(HOME_PAGE);
       })
       .catch((error) => {
         this.setState({