Modified view-agency component & css for updated interface

src/components/agencies/view-agency/view-agency.component.js

@@ -1,16 +1,27 @@
 import React, { Component, Fragment } from "react";
 import { NavLink } from "react-router-dom";
 import { withTranslation } from "react-i18next";
+import SearchIcon from "@material-ui/icons/Search";
+import Pagination from "@material-ui/lab/Pagination";
 
-import { EDIT_AGENCIES_PAGE } from "./../../../root/root.constants";
+import { EDIT_AGENCIES_PAGE, NEW_USER_PAGE,EDIT_USER_PAGE } from "./../../../root/root.constants";
+
+import { checkUserType,goToPage } from "../../../helpers/get-data";
 
 import AgencyService from "./../../../services/agency.service";
-import AgencyFormData from "../form-data/form-data.js";
+import AuthService from "../../../services/auth.service";
+import UserService from "../../../services/user.service";
+
+import AgencyFormData from "../form-data/form-data.js"
 import AgencyDataSharing from "../data-sharing/data-sharing.js";
+import UserPhoto from "../../partials/user-photo/user-photo.component";
+import Highlighter from "react-highlight-words";
 
 import "./view-agency.css";
 
 const agencyService = AgencyService.getInstance();
+const authService = AuthService.getInstance();
+const userService = UserService.getInstance();
 
 class ViewAgency extends Component {
   state = {
@@ -30,17 +41,27 @@ class ViewAgency extends Component {
     });
   };
 
+  goEditUser = (id) => {
+    goToPage(EDIT_USER_PAGE, id);
+  };
+
   componentDidMount() {
     const { id } = this.props.match.params;
-
     this.setState({ loading: true }, () => {
       agencyService
         .getAgency(id)
         .then((data) => {
           this.setState({
             agency: data,
-            loading: false,
           });
+
+          userService.getUsers(50,0,null).then((userData)=>{
+            this.setState({
+              agencyAdditionalInfo:{"officers": userData.users},
+              loading: false,
+            });
+          });
+
         })
         .catch((error) => {
           console.error(error);
@@ -49,8 +70,12 @@ class ViewAgency extends Component {
   }
 
   render() {
-    const { agencyAdditionalInfo, agency, activeTab, loading } = this.state;
+    const { agencyAdditionalInfo, agency, activeTab, loading, isFocused, total, limit, page } = this.state;
     const { t } = this.props;
+    const isGlobalAdmin = authService.user.global.admin;
+    const isAgencyAdmin = authService.user.agency.admin;
+    const isFieldOfficer =!authService.user.global.admin && !authService.user.agency.admin;
+
     const status = agency.active ? "active" : "inactive";
 
     return (
@@ -101,25 +126,22 @@ class ViewAgency extends Component {
         <div className="flex-column justify-between standard-view">
           <div className="flex-row">
             <div
-              className={`agency-tab ${
-                1 === activeTab ? "active-agency-tab" : ""
-              }`}
+              className={`agency-tab ${1 === activeTab ? "active-agency-tab" : ""
+                }`}
               onClick={() => this.handleChangeTab(1)}
             >
               {t("TABLE.OFFICERS")}
             </div>
             <div
-              className={`agency-tab ${
-                2 === activeTab ? "active-agency-tab" : ""
-              }`}
+              className={`agency-tab ${2 === activeTab ? "active-agency-tab" : ""
+                }`}
               onClick={() => this.handleChangeTab(2)}
             >
               {t("AGENCY_PAGE.FORM_DATA")}
             </div>
             <div
-              className={`agency-tab ${
-                3 === activeTab ? "active-agency-tab" : ""
-              }`}
+              className={`agency-tab ${3 === activeTab ? "active-agency-tab" : ""
+                }`}
               onClick={() => this.handleChangeTab(3)}
             >
               {t("AGENCY_PAGE.DATA_SHARING")}
@@ -128,44 +150,112 @@ class ViewAgency extends Component {
           <div className="flex-row">
             {1 === activeTab && (
               <div className="full-view white-bg box-shadow agency-tab-content">
-                <table className="custom-table">
-                  <thead>
-                    <tr className="border-bottom">
-                      <td>
-                        <div className="flex-row align-center justify-between agency-info-box">
-                          <div className="table-name">
-                            {`${t("TABLE.OFFICERS")} (${
-                              agencyAdditionalInfo.officers.length
-                            })`}
-                          </div>
-                          <button className="white-btn">
-                            {t("BUTTONS.CREATE_REPORT")}
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {agencyAdditionalInfo.officers
-                      ? agencyAdditionalInfo.officers.map((officer, ind) => (
-                          <tr className="table-row" key={ind}>
-                            <td>
-                              <div className="flex-row align-center agency-info-box">
-                                <div className="officer-container-img">
-                                  <img
-                                    className="icon"
-                                    src={require("../../../assets/crew-icon.png")}
-                                    alt="no logo"
+                <div className="flex-row align-center justify-between agency-info-box">
+
+                  <div className="table-name margin-left">
+                    {`${agencyAdditionalInfo.officers.length} ${t("TABLE.OFFICERS")}`}
+                  </div>
+
+                  <div className="flex-row align-center justify-between">
+                    <div className={`flex-row officer-search-panel search ${isFocused ? "focused" : ""}`}>
+                      <div className="flex-row align-center search-icon">
+                        <SearchIcon htmlColor={isFocused ? `#0a4074` : "#979797"} />
+                      </div>
+                      <input
+                        className="search-field officer-search-panel-input"
+                        type="search"
+                        placeholder={`${t("SEARCH.FILTER_SEARCH")} O-FISH`}
+                        onChange={this.setSearch}
+                        onFocus={() => this.setState({ isFocused: true })}
+                      ></input>
+                    </div>
+
+                    <div className="margin-left margin-right">
+                      <button className="white-btn">
+                        {t("BUTTONS.CREATE_REPORT")}
+                      </button>
+                    </div>
+
+                    <NavLink to={NEW_USER_PAGE}>
+                      <button className="blue-btn">
+                        {t("BUTTONS.ADD_NEW_USER")}
+                      </button>
+                    </NavLink>
+                  </div>
+                </div>
+                {agencyAdditionalInfo.officers ? (
+                  <div className="margin-left margin-right">
+                    <div className="margin-bottom">
+                    <table className="custom-table">
+                      <thead>
+                        <tr className="table-row border-bottom officer-table-border-width">
+                          <td>{t("TABLE.NAME")} </td>
+                          <td>{t("CREATE_USER_PAGE.USER_GROUP")}</td>
+                          <td>{t("CREATE_USER_PAGE.ROLE")}</td>
+                          <td>{t("TABLE.STATUS")}</td>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        { agencyAdditionalInfo.officers.map((officer, ind) => {
+                          const status = officer.active ? "active" : "inactive";
+                          return (
+                            <tr className="table-row" key={ind}>
+                              <td>
+                                <div className="flex-row align-center">
+                                  <UserPhoto
+                                    imageId={officer.profilePic || ""}
+                                    defaultIcon={false}
+                                  /><Highlighter
+                                    highlightClassName="highlighted"
+                                    searchWords={[]}
+                                    autoEscape={true}
+                                    textToHighlight={`${officer.name.first} ${officer.name.last}`}
                                   />
                                 </div>
-                                {officer.name}
-                              </div>
-                            </td>
-                          </tr>
-                        ))
-                      : t("WARNINGS.NO_OFFICERS")}
-                  </tbody>
-                </table>
+                              </td>
+                              <td>
+                                {isGlobalAdmin
+                                  ? officer.group
+                                    ? officer.group.name
+                                    : officer.userGroup
+                                      ? officer.userGroup.name
+                                      : "N/A"
+                                  : officer.userGroup}
+                              </td>
+                              <td>{(officer.global || officer.agency) ? checkUserType(officer) : "N/A"}</td>
+                              {isFieldOfficer && !isGlobalAdmin && (
+                                <td>{officer.email}</td>
+                              )}
+                              <td>
+                                <div className={`status-icon ${status}-status-icon`}>
+                                  {status}
+                                </div>
+                              </td>
+                              {isAgencyAdmin && officer._id && (
+                                <td>
+                                  <div
+                                    className="pointer see-all"
+                                    onClick={() => this.goEditUser(officer._id)}
+                                  >
+                                    {t("BUTTONS.EDIT")}
+                                  </div>
+                                </td>
+                              )}
+                            </tr>)
+                        })}
+                      </tbody>
+                    </table>
+                    </div>
+                    { total > limit && (
+                  <Pagination
+                    page={page}
+                    count={Math.ceil(total / limit)}
+                    shape="rounded"
+                    onChange={this.handlePageChange}
+                  />
+                )}
+                  </div>
+                ) : t("WARNINGS.NO_OFFICERS")}
               </div>
             )}
             {2 === activeTab && (

src/components/agencies/view-agency/view-agency.css

@@ -54,3 +54,26 @@
     height: 50px;
     margin-right: 10px;
 }
+
+.officer-search-panel {
+    width: 450px;
+    background: inherit;
+    border:1px solid #ececec;
+    border-radius: 5px;
+}
+
+.officer-search-panel .search-icon {
+    margin:auto 5px;
+  }
+
+.officer-search-panel-input {
+    outline: none;
+    border: none;
+    margin:8px auto;
+    flex-grow: 1;
+}
+
+.officer-table-border-width {
+    border-width: 3px;
+}
+

src/components/restore-password/reset-password.component.js

@@ -56,7 +56,6 @@ class ResetPassword extends Component {
 
   render() {
     const { error, loading } = this.state;
-    const { t } = this.props;
 
     return (
       <div className="flex-row justify-center align-center login-box">

src/components/restore-password/restore-password.component.js

@@ -37,8 +37,7 @@ class RestorePassword extends Component {
 
   render() {
     const { error, loading, success } = this.state;
-    const { t } = this.props;
-
+
     return (
       <div className="flex-row justify-center align-center login-box">
         <div className="white-bg box-shadow login">

src/helpers/i18n/en/translation.json

@@ -194,6 +194,8 @@
     "CREATE_REPORT": "Create Activity Report",
     "CREATE_USER": "Create User",
     "UPDATE_USER": "Update User",
+    "ADD_NEW_USER": "Add New User",
+    "MANAGE_SHARED_DATA": "Manage Shared Data",
     "SHARE_DATA": "Share Data",
     "STOP_SHARING": "Stop Sharing",
     "MANAGE_SHARED_DATA": "Manage Shared Data",