Skip to content

Modified view-agency component & css for updated interface #326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Oct 27, 2020
Merged

Modified view-agency component & css for updated interface #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
80828f9
Modified view-agency component & css for updated interface
deveshchatuphale7 Oct 17, 2020
55e797d
Merge branch 'main' into agency-officers
Oct 20, 2020
79ff6ae
Update view-agency.component.js
Oct 20, 2020
0bb22f8
Update view-agency.component.js
Sheeri Oct 20, 2020
9ca7ead
Merge branch 'agency-officers' of https://github.com/deveshchatuphale…
Sheeri Oct 20, 2020
99ea402
Fixed agency not found issue
deveshchatuphale7 Oct 20, 2020
c213885
Fixed agency not found issue
deveshchatuphale7 Oct 20, 2020
747f712
Merge branch 'main' into agency-officers
Oct 22, 2020
7445648
Changed agencyinfo reference to agency
deveshchatuphale7 Oct 22, 2020
03c6e86
Merge branch 'agency-officers' of https://github.com/deveshchatuphale…
deveshchatuphale7 Oct 22, 2020
f126eea
Merge remote-tracking branch 'upstream/main' into agency-officers
deveshchatuphale7 Oct 23, 2020
06951b9
fixed parsing error in translation.json
deveshchatuphale7 Oct 23, 2020
3caea11
Modified logic to populate officers
deveshchatuphale7 Oct 25, 2020
3eb12d8
Populating officers using getusers method
deveshchatuphale7 Oct 27, 2020
6c0324c
Merge remote-tracking branch 'upstream/main' into agency-officers
deveshchatuphale7 Oct 27, 2020
4055723
Removed unused var from reset password
deveshchatuphale7 Oct 27, 2020
dc172e2
Removed unused var from reset password
deveshchatuphale7 Oct 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 140 additions & 50 deletions src/components/agencies/view-agency/view-agency.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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);
Expand All @@ -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 (
Expand Down Expand Up @@ -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")}
Expand All @@ -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 && (
Expand Down
23 changes: 23 additions & 0 deletions src/components/agencies/view-agency/view-agency.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

1 change: 0 additions & 1 deletion src/components/restore-password/reset-password.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
3 changes: 1 addition & 2 deletions src/components/restore-password/restore-password.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions src/helpers/i18n/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down