{t("FILTER.MAIN.VESSEL_INFO.NAME")}
-
+ goToPageWithFilter(
+ VIEW_VESSEL_PAGE,
+ {"vessel.permitNumber": vessel.permitNumber, "vessel.name": vessel.name}
+ )
+ }
+ >
+
@@ -227,14 +204,31 @@ class CrewViewPage extends Component {
-
-
+
-
) : (
@@ -245,4 +239,6 @@ class CrewViewPage extends Component {
}
}
-export default withTranslation("translation")(CrewViewPage);
+export default withQueryParams({
+ stripUnknownKeys: true
+})(withTranslation("translation")(CrewViewPage));
diff --git a/src/components/crew/crew.component.js b/src/components/crew/crew.component.js
index f3c28a60..bdf6e0c5 100644
--- a/src/components/crew/crew.component.js
+++ b/src/components/crew/crew.component.js
@@ -7,7 +7,7 @@ import { withTranslation } from "react-i18next";
import {
getColor,
getHighlightedText,
- goToPage,
+ goToPageWithFilter
} from "./../../helpers/get-data";
import SearchPanel from "./../partials/search-panel/search-panel.component";
@@ -107,6 +107,7 @@ class Crew extends Component {
highlighted: [],
loading: false,
currentFilter: null,
+ defaultFilter: null,
page: 1,
};
@@ -114,7 +115,6 @@ class Crew extends Component {
if (searchService.searchResults && searchService.searchResults.query) {
searchService.searchResults.query = value;
}
-
this.loadData({ searchQuery: value, offset: 0 });
};
@@ -134,7 +134,13 @@ class Crew extends Component {
};
componentDidMount() {
- this.loadData();
+ let { filter } = this.props;
+ if (filter) {
+ this.setState({ defaultFilter: filter });
+ //The loadData will be called automatically from filter-panel
+ } else {
+ this.loadData();
+ }
}
prepareSearchResultData(data) {
@@ -145,7 +151,6 @@ class Crew extends Component {
const addedCrew = allCrew.find((item) => {
return (
item.license === crewMember.captain.license &&
- item.vessel === crewMember.vessel &&
item.safetyLevel === crewMember.safetyLevel
);
});
@@ -154,11 +159,14 @@ class Crew extends Component {
if (addedCrew.date < crewMember.date) {
addedCrew.date = crewMember.date;
}
+ if (addedCrew.vessels.indexOf(crewMember.vessel) < 0) {
+ addedCrew.vessels.push(crewMember.vessel);
+ }
} else {
allCrew.push({
name: crewMember.captain.name,
rank: "captain",
- vessel: crewMember.vessel,
+ vessels: [crewMember.vessel],
license: crewMember.captain.license,
violations: crewMember.violations,
date: crewMember.date,
@@ -170,7 +178,6 @@ class Crew extends Component {
const addedCrew = allCrew.find((item) => {
return (
item.license === member.license &&
- item.vessel === crewMember.vessel &&
item.safetyLevel === crewMember.safetyLevel
);
});
@@ -182,7 +189,6 @@ class Crew extends Component {
}).value;
if (
member.name.includes(foundMatch) ||
- crewMember.vessel.includes(foundMatch) ||
member.license.includes(foundMatch)
) {
if (addedCrew) {
@@ -190,11 +196,14 @@ class Crew extends Component {
if (addedCrew.date < crewMember.date) {
addedCrew.date = crewMember.date;
}
+ if (addedCrew.vessels.indexOf(crewMember.vessel) < 0) {
+ addedCrew.vessels.push(crewMember.vessel);
+ }
} else {
allCrew.push({
name: member.name,
rank: "crew",
- vessel: crewMember.vessel,
+ vessels: [crewMember.vessel],
license: member.license,
violations: crewMember.violations,
date: crewMember.date,
@@ -206,10 +215,8 @@ class Crew extends Component {
}
});
});
- return allCrew.sort(
- (a, b) =>
- (a.name === b.name ? 0 : a.name < b.name ? -1 : 1) +
- (a.vessel === b.vessel ? 0 : a.vessel < b.vessel ? -1 : 1) / 10
+ return allCrew.sort((a, b) =>
+ a.name === b.name ? 0 : a.name < b.name ? -1 : 1
);
}
@@ -241,6 +248,18 @@ class Crew extends Component {
});
}
+ goCrewViewPage(item){
+ const filter = {};
+ if (item.license){
+ filter["crew.license"] = item.license;
+ }
+ if (item.name){
+ filter["crew.name"] = item.name;
+ }
+ goToPageWithFilter(VIEW_CREW_PAGE, filter);
+ }
+
+
render() {
const {
crew,
@@ -249,6 +268,7 @@ class Crew extends Component {
loading,
highlighted,
searchQuery,
+ defaultFilter,
page,
} = this.state;
@@ -272,6 +292,7 @@ class Crew extends Component {
)}
-
+
- {isAuthenticated && user.name
- ? `${user.name.first} ${user.name.last}`
+ {currentUser && currentUser.name
+ ? `${currentUser.name.first} ${currentUser.name.last}`
: t("WARNINGS.NOT_AUTHENTICATED")}
+
+
+ ) : (
+
+ );
+ }
+}
+
+export default withTranslation("translation")(NotesPage);
diff --git a/src/components/notes/notes.css b/src/components/notes/notes.css
new file mode 100644
index 00000000..558c59c5
--- /dev/null
+++ b/src/components/notes/notes.css
@@ -0,0 +1,7 @@
+.notes-overview table td:first-child {
+ width: 25%;
+}
+
+.notes-overview table td {
+ width: 15%;
+}
diff --git a/src/components/crew/crew-data.helper.js b/src/components/partials/boarding-data.helper.js
similarity index 62%
rename from src/components/crew/crew-data.helper.js
rename to src/components/partials/boarding-data.helper.js
index 63aedf85..d77e2d50 100644
--- a/src/components/crew/crew-data.helper.js
+++ b/src/components/partials/boarding-data.helper.js
@@ -1,8 +1,7 @@
import moment from "moment";
-export default class CrewDataHelper {
- constructor(permitNumber, boardings) {
- this.permitNumber = permitNumber;
+export default class BoardingDataHelper {
+ constructor(boardings) {
this.boardings = boardings;
}
@@ -34,6 +33,16 @@ export default class CrewDataHelper {
return name;
}
+ getCaptainName(item) {
+ let captainName;
+ this.boardings.forEach((boarding) => {
+ if (boarding.captain.license === item || boarding.captain.name === item) {
+ captainName = boarding.captain.name;
+ }
+ });
+ return captainName;
+ }
+
getBoardings() {
return this.boardings.map((boarding) => {
const violations = boarding.inspection.summary.violations
@@ -53,15 +62,13 @@ export default class CrewDataHelper {
risk: boarding.inspection.summary.safetyLevel.level,
boardedBy:
boarding.reportingOfficer && boarding.reportingOfficer.name
- ? boarding.reportingOfficer.name.first +
- " " +
- boarding.reportingOfficer.name.last
+ ? `${boarding.reportingOfficer.name.first} ${boarding.reportingOfficer.name.last}`
: "",
};
});
}
- getViolations() {
+ getViolations(crewLicense) {
const collection = [];
this.boardings.forEach((boarding) => {
if (
@@ -71,6 +78,9 @@ export default class CrewDataHelper {
) {
const { violations } = boarding.inspection.summary;
violations.map((violation) => {
+ if (crewLicense) {
+ if (violation.crewMember.license !== crewLicense) return "";
+ }
collection.push({
boardingId: boarding._id,
risk: boarding.inspection.summary.safetyLevel.level,
@@ -87,30 +97,32 @@ export default class CrewDataHelper {
return "";
});
}
+ return "";
});
return collection;
}
getVessels() {
- const collection = [];
+ const crewVessels = [];
+
this.boardings.forEach((boarding) => {
- if (
- boarding.vessel &&
- !collection.find((c) => c.permitNumber === boarding.vessel.permitNumber)
- ) {
- collection.push({
+ if (boarding.vessel) {
+ crewVessels.push({
permitNumber: boarding.vessel.permitNumber,
name: boarding.vessel.name,
- photos: boarding.vessel.attachments
- ? boarding.vessel.attachments.photoIDs
- : [],
- notes: boarding.vessel.attachments
- ? boarding.vessel.attachments.notes
- : [],
+ photos:
+ boarding.vessel.attachments && boarding.vessel.attachments.photoIDs
+ ? boarding.vessel.attachments.photoIDs
+ : [],
+ notes:
+ boarding.vessel.attachments && boarding.vessel.attachments.notes
+ ? boarding.vessel.attachments.notes
+ : [],
});
}
+ return "";
});
- return collection;
+ return crewVessels;
}
getPhotos(crewLicense) {
@@ -124,7 +136,19 @@ export default class CrewDataHelper {
!!crewMember.attachments.photoIDs.length
) {
crewMember.attachments.photoIDs.map((photo) => {
- photos.push({ url: photo, date: boarding.date });
+ photos.push({
+ url: photo,
+ date: boarding.date,
+ risk: boarding.inspection.summary.safetyLevel.level,
+ vessel:
+ boarding.vessel && boarding.vessel.name
+ ? boarding.vessel.name
+ : boarding.vessel,
+ boardedBy:
+ boarding.reportingOfficer && boarding.reportingOfficer.name
+ ? `${boarding.reportingOfficer.name.first} ${boarding.reportingOfficer.name.last}`
+ : "",
+ });
return "";
});
return "";
@@ -147,7 +171,19 @@ export default class CrewDataHelper {
!!crewMember.attachments.notes.length
) {
crewMember.attachments.notes.map((note) => {
- notes.push({ note: note, date: boarding.date });
+ notes.push({
+ note: note,
+ date: boarding.date,
+ risk: boarding.inspection.summary.safetyLevel.level,
+ vessel:
+ boarding.vessel && boarding.vessel.name
+ ? boarding.vessel.name
+ : boarding.vessel,
+ boardedBy:
+ boarding.reportingOfficer && boarding.reportingOfficer.name
+ ? `${boarding.reportingOfficer.name.first} ${boarding.reportingOfficer.name.last}`
+ : "",
+ });
return "";
});
return "";
diff --git a/src/components/partials/custom-select/custom-select.css b/src/components/partials/custom-select/custom-select.css
index 157bfe10..e49583b9 100644
--- a/src/components/partials/custom-select/custom-select.css
+++ b/src/components/partials/custom-select/custom-select.css
@@ -35,3 +35,7 @@
background: #eeeeee;
cursor: pointer;
}
+
+.select-menu .arrow {
+ width: 11px;
+}
diff --git a/src/components/partials/custom-select/custom-select.js b/src/components/partials/custom-select/custom-select.js
index 319f7db1..43ac069c 100644
--- a/src/components/partials/custom-select/custom-select.js
+++ b/src/components/partials/custom-select/custom-select.js
@@ -46,11 +46,17 @@ class CustomSelect extends Component {
return (
+
+
+
+
+ {t("BOARDING_PAGE.VIEW_BOARDING.NOTES")}
+
+ {`${notes.length} ${t(
+ "BOARDING_PAGE.VIEW_BOARDING.NOTES"
+ )}`}
+
+
+
+ {t("BOARDING_PAGE.ALL_DATES")} ⯆
+
+
+
+
+
+
+ | {t("TABLE.NOTE")} | +{t("BOARDING_PAGE.VIEW_BOARDING.BOARDING")} | ++ | {t("TABLE.VESSEL")} | +{t("TABLE.BOARDED_BY")} | +
| {note.note} | +{moment(note.date).format("L")} | +
+ |
+ {note.vessel} | +{note.boardedBy} | +
this.setState({ showOptionsList: !showOptionsList })}
>
{showOptionsList && (
{selected}
- ⯆
+
+ ![no logo]({require("../../../assets/filled-arrow.svg")})
+
+
diff --git a/src/components/partials/filter-panel/filter-panel.component.js b/src/components/partials/filter-panel/filter-panel.component.js
index bed427ef..573de03b 100644
--- a/src/components/partials/filter-panel/filter-panel.component.js
+++ b/src/components/partials/filter-panel/filter-panel.component.js
@@ -11,6 +11,33 @@ import "./filter-panel.css";
class FilterPanel extends Component {
state = { isFilterPanelShown: false, filterParts: [], searchQuery: "" };
+ componentDidMount(){
+ const { filter, configuration } = this.props;
+ if (configuration && filter && filter.length){
+ const flatConfig = {};
+ for (const section in configuration){
+ configuration[section].forEach((item, i) => {
+ flatConfig[item.field ? item.field : item.name] = item;
+ });
+ };
+ const defaultFilter = [];
+ filter.forEach((filterPart) => {
+ const config = flatConfig[filterPart.name];
+ if (config){
+ defaultFilter.push({
+ ...config,
+ value: filterPart.value
+ })
+ }
+ });
+
+ this.setState({filterParts: defaultFilter});
+ if (this.props.onFilterChanged) {
+ this.props.onFilterChanged(this.constructFilter(defaultFilter));
+ }
+ }
+ }
+
constructFilter(filterParts) {
let filterObject = {};
const { options } = this.props;
@@ -175,89 +202,3 @@ class FilterPanel extends Component {
}
export default withTranslation("translation")(FilterPanel);
-
-/*
-
-
-
-
-
-
-
- */
diff --git a/src/components/partials/filter-panel/filter-part.component.js b/src/components/partials/filter-panel/filter-part.component.js
index f91f4bfd..721432d8 100644
--- a/src/components/partials/filter-panel/filter-part.component.js
+++ b/src/components/partials/filter-panel/filter-part.component.js
@@ -15,6 +15,13 @@ import "./filter-panel.css";
class FilterPart extends Component {
state = { searchPanelShown: false, filterValue: "", searchQuery: "" };
+ componentDidMount(){
+ const {value} = this.props;
+ if (value){
+ this.setState({filterValue: value, searchQuery: value});
+ }
+ }
+
setSearch = (value) => {
this.setState({
searchQuery: value,
diff --git a/src/components/partials/overview-pages/boardings-overview/boardings-overview.component.js b/src/components/partials/overview-pages/boardings-overview/boardings-overview.component.js
index a1fabdae..d2147eda 100644
--- a/src/components/partials/overview-pages/boardings-overview/boardings-overview.component.js
+++ b/src/components/partials/overview-pages/boardings-overview/boardings-overview.component.js
@@ -3,15 +3,15 @@ import { withTranslation } from "react-i18next";
import moment from "moment";
import { NavLink } from "react-router-dom";
-import { goToPage } from "./../../../../helpers/get-data";
+import { goToPageWithFilter } from "./../../../../helpers/get-data";
import RiskIcon from "../../../partials/risk-icon/risk-icon.component";
-import { BOARDINGS_PAGE, VIEW_BOARDING_PAGE } from "../../../../root/root.constants.js";
+import { BOARDINGS_PAGE, BOARDING_FILTERED_PAGE } from "../../../../root/root.constants.js";
import "./boardings-overview.css";
-const BoardingsOverview = ({ t, boardings }) => (
+const BoardingsOverview = ({ t, boardings, filter }) => (
goToPage(VIEW_BOARDING_PAGE, boarding.id)}
+ onClick={() => goToPageWithFilter(BOARDING_FILTERED_PAGE, filter)}
>
{moment(boarding.date).format("L")}
{moment(boarding.time).format("LT")}
diff --git a/src/components/partials/overview-pages/notes-overview/notes-overview.component.js b/src/components/partials/overview-pages/notes-overview/notes-overview.component.js
index cde15f10..5f2831b3 100644
--- a/src/components/partials/overview-pages/notes-overview/notes-overview.component.js
+++ b/src/components/partials/overview-pages/notes-overview/notes-overview.component.js
@@ -2,11 +2,17 @@ import React, { memo, Fragment } from "react";
import moment from "moment";
import { withTranslation } from "react-i18next";
+import { goToPageWithFilter } from "./../../../../helpers/get-data";
+
import SeeLink from "../../../partials/see-all-link/see-all-link";
+import {
+ NOTES_PAGE,
+} from "../../../../root/root.constants.js";
+
import "./notes-overview.css";
-const NotesOverview = ({ t, notes }) => (
+const NotesOverview = ({ t, notesId, notes, filter }) => (
- {crew.slice(0,4).map((crewMember, ind) => (
+ {crew.slice(0, 4).map((crewMember, ind) => (
{crewMember.name}
{crewMember.license}
@@ -224,7 +196,9 @@ class VesselViewPage extends Component {
{!!delivery.business && !!delivery.location ? (
@@ -277,11 +251,11 @@ class VesselViewPage extends Component {
goToPage(VIEW_VESSEL_PAGE, item.permitNumber ? "pn" + item.permitNumber : (item.vessel ? "in" + item.vessel : "no_permit_number"))}
+ onClick={() => this.goVesselsViewPage(item)}
>
- {item.homePort || "N/A"}
+ {item.homePort ? item.homePort.slice(0, 4).join(", ") : "N/A"}
Boarding Information
-Vessel Information
-Last Delivery
-Catch
-{t("NAVIGATION.BOARDINGS")}
@@ -39,7 +39,7 @@ const BoardingsOverview = ({ t, boardings }) => ({t("BOARDING_PAGE.VIEW_BOARDING.NOTES")}
@@ -36,7 +42,10 @@ const NotesOverview = ({ t, notes }) => ( ))} -
+
))}
-
goToPageWithFilter(NOTES_PAGE, filter)}
+ >
diff --git a/src/components/partials/overview-pages/photo-overview/photo-overview.component.js b/src/components/partials/overview-pages/photo-overview/photo-overview.component.js
index 87f4e978..d611bd16 100644
--- a/src/components/partials/overview-pages/photo-overview/photo-overview.component.js
+++ b/src/components/partials/overview-pages/photo-overview/photo-overview.component.js
@@ -6,9 +6,15 @@ import { withTranslation } from "react-i18next";
import SeeLink from "../../../partials/see-all-link/see-all-link";
+import { goToPageWithFilter } from "./../../../../helpers/get-data";
+
+import {
+ PHOTOS_PAGE,
+} from "../../../../root/root.constants.js";
+
import "./photo-overview.css";
-const PhotosOverview = ({ t, photos }) => (
+const PhotosOverview = ({ t, photos, photosId, filter }) => (
{t("BOARDING_PAGE.VIEW_BOARDING.PHOTOS")}
@@ -36,7 +42,10 @@ const PhotosOverview = ({ t, photos }) => (
+
- {!data.length &&
);
-export default memo(VesselHeaderInfo);
+export default withTranslation("translation")(memo(VesselHeaderInfo));
diff --git a/src/components/partials/overview-pages/violations-overview/violations-overview.component.js b/src/components/partials/overview-pages/violations-overview/violations-overview.component.js
index 5601aec1..2468f96b 100644
--- a/src/components/partials/overview-pages/violations-overview/violations-overview.component.js
+++ b/src/components/partials/overview-pages/violations-overview/violations-overview.component.js
@@ -1,9 +1,8 @@
import React, { memo, Fragment } from "react";
import { withTranslation } from "react-i18next";
import moment from "moment";
-import { NavLink } from "react-router-dom";
-import { goToPage } from "./../../../../helpers/get-data";
+import { goToPage, goToPageWithFilter } from "./../../../../helpers/get-data";
import {
VIEW_BOARDING_PAGE,
@@ -12,7 +11,7 @@ import {
import SeeLink from "../../../partials/see-all-link/see-all-link";
-const ViolationsOverview = ({ t, violationsId, violations }) => (
+const ViolationsOverview = ({ t, filter, violations }) => (
goToPageWithFilter(PHOTOS_PAGE, filter)}
+ >
diff --git a/src/components/partials/overview-pages/vessel-header-info/vessel-header-info.component.js b/src/components/partials/overview-pages/vessel-header-info/vessel-header-info.component.js
index 05ca4f93..8777cb94 100644
--- a/src/components/partials/overview-pages/vessel-header-info/vessel-header-info.component.js
+++ b/src/components/partials/overview-pages/vessel-header-info/vessel-header-info.component.js
@@ -1,33 +1,34 @@
import React, { memo } from "react";
+import { withTranslation } from "react-i18next";
+
+import SeeLink from "../../../partials/see-all-link/see-all-link";
import "./vessel-header-info.css";
-const VesselHeaderInfo = ({ data, headerText, itemsAmount }) => (
+const VesselHeaderInfo = ({ t, data, headerText, itemsAmount }) => (
{headerText}
{!!itemsAmount ? itemsAmount : ""}
N/A
}
- {!!data.length &&
- data.slice(0,2).map((el, ind) => {
- const member = headerText === "Captains" ? el.name : el;
- return (
-
- {headerText === "Flag States" && (
-
- );
- })}
+
- ![no icon]({require("../../../../assets/nationality.png")})
-
- )}
- {member || "N/A"}
-
-
+ {headerText === "Flag States" && (
+
+ {itemsAmount > 1 && (
+
+
+
+ )}
+ {data || "N/A"}
+
+
+
+ )}
{t("TABLE.VIOLATIONS")}
@@ -61,7 +60,7 @@ const ViolationsOverview = ({ t, violationsId, violations }) => ( goToPage(VIOLATIONS_PAGE, violationsId)}
+ onClick={() => goToPageWithFilter(VIOLATIONS_PAGE, filter)}
>
diff --git a/src/components/photos/photos.component.js b/src/components/photos/photos.component.js
new file mode 100644
index 00000000..5e6d2a25
--- /dev/null
+++ b/src/components/photos/photos.component.js
@@ -0,0 +1,215 @@
+import React, { Component, Fragment } from "react";
+import { withTranslation } from "react-i18next";
+import moment from "moment";
+
+import LoadingPanel from "./../partials/loading-panel/loading-panel.component";
+import FilterPanel from "./../partials/filter-panel/filter-panel.component";
+import SearchPanel from "./../partials/search-panel/search-panel.component";
+import RiskIcon from "./../partials/risk-icon/risk-icon.component";
+
+import BoardingDataHelper from "../partials/boarding-data.helper.js";
+import OverviewService from "./../../services/overview.service";
+import { convertFilter } from "./../../helpers/get-data";
+
+// import UserPhoto from "../../components/partials/user-photo/user-photo.component";
+
+import './photos.css';
+
+const overviewService = OverviewService.getInstance();
+
+const filterConfiguration = {
+ Risk: [
+ {
+ name: "safetyLevel.red",
+ field: "inspection.summary.safetyLevel",
+ value: "Red",
+ title: "Red",
+ partTitle: "Risk: Red",
+ type: "risk",
+ },
+ {
+ name: "safetyLevel.amber",
+ field: "inspection.summary.safetyLevel",
+ value: "Amber",
+ title: "Amber",
+ partTitle: "Risk: Amber",
+ type: "risk",
+ },
+ {
+ name: "safetyLevel.green",
+ field: "inspection.summary.safetyLevel",
+ value: "Green",
+ title: "Green",
+ partTitle: "Risk: Green",
+ type: "risk",
+ },
+ ],
+ "Boarding Information": [
+ {
+ name: "date",
+ title: "Date",
+ type: "date",
+ },
+ {
+ name: "date-from",
+ title: "Date from",
+ type: "date",
+ },
+ {
+ name: "date-to",
+ title: "Date To",
+ type: "date",
+ },
+ {
+ name: "time",
+ field: "date",
+ title: "Time",
+ type: "time",
+ },
+ {
+ name: "location",
+ title: "Location",
+ type: "location",
+ },
+ ],
+ "Vessel Information": [
+ {
+ name: "vessel.permitNumber",
+ title: "Permit Number",
+ type: "string-equal",
+ },
+ {
+ name: "vessel.nationality",
+ title: "Nationality",
+ },
+ ],
+ "Crews": [
+ {
+ name: "crewLicense",
+ field: "crew.license",
+ title: "Crew License Number",
+ type: "string-equal",
+ },
+ {
+ name: "crewName",
+ field: "crew.name",
+ title: "Crew name",
+ },
+ {
+ name: "captainLicense",
+ field: "captain.license",
+ title: "Captain license Number",
+ type: "string-equal",
+ },
+ {
+ name: "captainName",
+ field: "captain.lastName",
+ title: "Captain name",
+ },
+ ],
+};
+
+class PhotosPage extends Component {
+ state = {
+ photos: [],
+ loading: false,
+ mounted: false
+ };
+
+ componentDidMount() {
+ const filter = JSON.parse(this.props.match.params.filter);
+
+ this.setState({ loading: true, mounted: true, filter: convertFilter(filter) }, () => {
+ const licenseNumber = filter["crew.license"];
+
+ overviewService
+ .getBoardingsByFilter(filter)
+ .then((data) => {
+ const dataHelper = new BoardingDataHelper(data);
+
+ const newState = {
+ loading: false,
+ photos: dataHelper.getPhotos(licenseNumber),
+ };
+ this.setState(newState);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ });
+ }
+
+ render() {
+ const { photos, loading, filter, mounted } = this.state;
+ const { t } = this.props;
+
+ return mounted && (
+
+
+
+ ) : (
+
+ );
+ }
+}
+
+export default withTranslation("translation")(PhotosPage);
diff --git a/src/components/photos/photos.css b/src/components/photos/photos.css
new file mode 100644
index 00000000..b14bda52
--- /dev/null
+++ b/src/components/photos/photos.css
@@ -0,0 +1,3 @@
+.photos-overview .photo-icon {
+ width: 75px;
+}
diff --git a/src/components/vessels/vessel-data.helper.js b/src/components/vessels/vessel-data.helper.js
index a3e94011..def2b194 100644
--- a/src/components/vessels/vessel-data.helper.js
+++ b/src/components/vessels/vessel-data.helper.js
@@ -17,13 +17,13 @@ export default class VesselDataHelper {
}
getVesselNames() {
- const collection = {};
+ const collection = [];
this.boardings.forEach((boarding) => {
if (boarding.vessel && boarding.vessel.name) {
- collection[boarding.vessel.name] = null;
+ collection.push(boarding.vessel.name);
}
});
- return Object.keys(collection);
+ return collection;
}
getBoardings() {
diff --git a/src/components/vessels/vessel-view/vessel-view.component.js b/src/components/vessels/vessel-view/vessel-view.component.js
index 67c8ccc2..b36ff42e 100644
--- a/src/components/vessels/vessel-view/vessel-view.component.js
+++ b/src/components/vessels/vessel-view/vessel-view.component.js
@@ -1,6 +1,7 @@
import React, { Component, Fragment } from "react";
import { withTranslation } from "react-i18next";
import moment from "moment";
+import { NavLink } from "react-router-dom";
import SeeLink from "../../partials/see-all-link/see-all-link";
@@ -14,6 +15,8 @@ import LoadingPanel from "./../../partials/loading-panel/loading-panel.component
import VesselDataHelper from "../vessel-data.helper";
import OverviewService from "./../../../services/overview.service";
+import { CREW_PAGE } from "../../../root/root.constants.js";
+
import "./vessel-view.css";
const overviewService = OverviewService.getInstance();
@@ -33,70 +36,38 @@ class VesselViewPage extends Component {
homePorts: [],
captains: [],
nationalities: [],
+ filter: null
};
componentDidMount() {
- const id = this.props.match.params.id;
-
- if (!id || id === "no_permit_number") return;
-
- if (id.indexOf("pn") === 0) {
- this.setState({ loading: true }, () => {
- const permitNumber = id.substring(2);
-
- overviewService
- .getBoardingsByPermitNumber(permitNumber)
- .then((data) => {
- const dataHelper = new VesselDataHelper(permitNumber, data);
-
- const newState = {
- permitNumbers: dataHelper.getPermitNumbers(),
- vesselNames: dataHelper.getVesselNames(),
- boardings: dataHelper.getBoardings(),
- nationalities: dataHelper.getNationalities(),
- homePorts: dataHelper.getHomePorts(),
- captains: dataHelper.getCaptains(),
- crew: dataHelper.getCrew(),
- deliveries: dataHelper.getDeliveries(),
- photos: dataHelper.getPhotos(),
- notes: dataHelper.getNotes(),
- violations: dataHelper.getViolations(),
- loading: false,
- };
- this.setState(newState);
- })
- .catch((error) => {
- console.error(error);
- });
- });
- } else if (id.indexOf("in") === 0) {
- this.setState({ loading: true }, () => {
- const itemName = id.substring(2);
- overviewService
- .getBoardingsByVesselName(itemName)
- .then((data) => {
- const dataHelper = new VesselDataHelper(itemName, data);
- const newState = {
- permitNumbers: dataHelper.getPermitNumbers(),
- vesselNames: dataHelper.getVesselNames(),
- boardings: dataHelper.getBoardings(),
- nationalities: dataHelper.getNationalities(),
- homePorts: dataHelper.getHomePorts(),
- captains: dataHelper.getCaptains(),
- crew: dataHelper.getCrew(),
- deliveries: dataHelper.getDeliveries(),
- photos: dataHelper.getPhotos(),
- notes: dataHelper.getNotes(),
- violations: dataHelper.getViolations(),
- loading: false,
- };
- this.setState(newState);
- })
- .catch((error) => {
- console.error(error);
- });
- });
- }
+ const filter = JSON.parse(this.props.match.params.filter);
+ if (!filter) return;
+ this.setState({ loading: true, filter }, () => {
+ const permitNumber = filter["vessel.permitNumber"]
+ overviewService
+ .getBoardingsByFilter(filter)
+ .then((data) => {
+ const dataHelper = new VesselDataHelper(permitNumber, data);
+ const newState = {
+ permitNumbers: dataHelper.getPermitNumbers(),
+ vesselNames: dataHelper.getVesselNames(),
+ boardings: dataHelper.getBoardings(),
+ nationalities: dataHelper.getNationalities(),
+ homePorts: dataHelper.getHomePorts(),
+ captains: dataHelper.getCaptains(),
+ crew: dataHelper.getCrew(),
+ deliveries: dataHelper.getDeliveries(),
+ photos: dataHelper.getPhotos(),
+ notes: dataHelper.getNotes(),
+ violations: dataHelper.getViolations(),
+ loading: false,
+ };
+ this.setState(newState);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ });
}
render() {
@@ -113,6 +84,7 @@ class VesselViewPage extends Component {
violations,
photos,
notes,
+ filter
} = this.state;
const { t } = this.props;
@@ -129,26 +101,26 @@ class VesselViewPage extends Component {
+
+
+
+
+ {t("BOARDING_PAGE.VIEW_BOARDING.PHOTOS")}
+
+ {`${photos.length} ${t(
+ "BOARDING_PAGE.VIEW_BOARDING.PHOTOS"
+ )}`}
+
+
+
+ {t("BOARDING_PAGE.ALL_DATES")} ⯆
+
+
+
+
+
+
+ | {t("TABLE.PHOTO")} | +{t("BOARDING_PAGE.VIEW_BOARDING.BOARDING")} | ++ | {t("TABLE.VESSEL")} | +{t("TABLE.BOARDED_BY")} | +
|
+ {/*
+
+ ![no logo]({require("../../assets/photo-big-icon.png")}){kind=icon}
+ |
+ {moment(photo.date).format("LLL")} | +
+ |
+ {photo.vessel} | +{photo.boardedBy} | +
-
@@ -170,7 +142,7 @@ class VesselViewPage extends Component {
-
+ {t("BUTTONS.SEE_ALL")}
+
) : (
@@ -246,7 +220,7 @@ class VesselViewPage extends Component {
- {deliveries.slice(0,4).map((delivery, ind) => (
+ {deliveries.slice(0, 4).map((delivery, ind) => (
-
-
) : (
diff --git a/src/components/vessels/vessels.component.js b/src/components/vessels/vessels.component.js
index cbc18391..a8bd50d8 100644
--- a/src/components/vessels/vessels.component.js
+++ b/src/components/vessels/vessels.component.js
@@ -4,7 +4,11 @@ import Pagination from "@material-ui/lab/Pagination";
import Highlighter from "react-highlight-words";
import { withTranslation } from "react-i18next";
-import { getColor, getHighlightedText, goToPage } from "./../../helpers/get-data";
+import {
+ getColor,
+ getHighlightedText,
+ goToPageWithFilter
+} from "./../../helpers/get-data";
import SearchPanel from "./../partials/search-panel/search-panel.component";
import FilterPanel from "./../partials/filter-panel/filter-panel.component";
@@ -69,15 +73,41 @@ const filterConfiguration = {
],
"Vessel Information": [
{
- name: "vessel.permitNumber",
+ name: "permitNumber",
+ field: "vessel.permitNumber",
title: "Permit Number",
type: "string-equal",
},
{
- name: "vessel.nationality",
+ name: "nationality",
+ field: "vessel.nationality",
title: "Nationality",
},
],
+ "Crews": [
+ {
+ name: "crewLicense",
+ field: "crew.license",
+ title: "Crew License Number",
+ type: "string-equal",
+ },
+ {
+ name: "crewName",
+ field: "crew.lastName",
+ title: "Crew name",
+ },
+ {
+ name: "captainLicense",
+ field: "captain.license",
+ title: "Captain license Number",
+ type: "string-equal",
+ },
+ {
+ name: "captainName",
+ field: "captain.lastName",
+ title: "Captain name",
+ },
+ ],
};
class Vessels extends Component {
@@ -94,6 +124,7 @@ class Vessels extends Component {
highlighted: [],
currentFilter: null,
loading: false,
+ defaultFilter: null,
page: 1,
};
@@ -146,7 +177,25 @@ class Vessels extends Component {
}
componentDidMount() {
- this.loadData();
+ const {filter} = this.props; //Or from other place
+
+ if (filter){
+ this.setState({defaultFilter: filter});
+ //The loadData will be called automatically from filter-panel
+ } else {
+ this.loadData();
+ }
+ }
+
+ goVesselsViewPage(item){
+ const filter = {};
+ if (item.permitNumber){
+ filter["vessel.permitNumber"] = item.permitNumber;
+ }
+ if (item.vessel){
+ filter["vessel.name"] = item.vessel;
+ }
+ goToPageWithFilter(VIEW_VESSEL_PAGE, filter);
}
render() {
@@ -158,6 +207,7 @@ class Vessels extends Component {
highlighted,
searchQuery,
page,
+ defaultFilter
} = this.state;
const { t } = this.props;
@@ -181,6 +231,7 @@ class Vessels extends Component {
diff --git a/src/components/violations/violations.component.js b/src/components/violations/violations.component.js
index bb0385f2..35c1f64e 100644
--- a/src/components/violations/violations.component.js
+++ b/src/components/violations/violations.component.js
@@ -7,10 +7,10 @@ import FilterPanel from "./../partials/filter-panel/filter-panel.component";
import SearchPanel from "./../partials/search-panel/search-panel.component";
import RiskIcon from "./../partials/risk-icon/risk-icon.component";
-import CrewDataHelper from "../crew/crew-data.helper.js";
+import BoardingDataHelper from "../partials/boarding-data.helper.js";
import OverviewService from "./../../services/overview.service";
-import { VIOLATIONS_PAGE } from "../../root/root.constants.js";
+import { convertFilter } from "./../../helpers/get-data";
const overviewService = OverviewService.getInstance();
@@ -62,12 +62,7 @@ const filterConfiguration = {
field: "date",
title: "Time",
type: "time",
- },
- {
- name: "location",
- title: "Location",
- type: "location",
- },
+ }
],
"Vessel Information": [
{
@@ -80,64 +75,67 @@ const filterConfiguration = {
title: "Nationality",
},
],
+ "Crews": [
+ {
+ name: "crewLicense",
+ field: "crew.license",
+ title: "Crew License Number",
+ type: "string-equal",
+ },
+ {
+ name: "crewName",
+ field: "crew.name",
+ title: "Crew name",
+ },
+ {
+ name: "captainLicense",
+ field: "captain.license",
+ title: "Captain license Number",
+ type: "string-equal",
+ },
+ {
+ name: "captainName",
+ field: "captain.lastName",
+ title: "Captain name",
+ },
+ ],
};
class ViolationsPage extends Component {
state = {
violations: [],
loading: false,
+ defaultFilter: null,
+ mounted: false
};
componentDidMount() {
- const { id } = this.props.match.params;
-
- if (!id) return;
-
- if (id.indexOf("ln") === 0) {
- this.setState({ loading: true }, () => {
- const licenseNumber = id.substring(2);
-
- overviewService
- .getBoardingsByCrewLicense(licenseNumber)
- .then((data) => {
- const dataHelper = new CrewDataHelper(licenseNumber, data);
-
- const newState = {
- loading: false,
- violations: dataHelper.getViolations(),
- };
- this.setState(newState);
- })
- .catch((error) => {
- console.error(error);
- });
- });
- }
- if (id.indexOf("in") === 0) {
- const crewName = id.substring(2);
+ const filter = JSON.parse(this.props.match.params.filter);
+ this.setState({ loading: true, mounted: true, filter: filter }, () => {
overviewService
- .getBoardingsByCrewName(crewName)
+ .getBoardingsByFilter(filter)
.then((data) => {
- const dataHelper = new CrewDataHelper(crewName, data);
+ const dataHelper = new BoardingDataHelper(data);
const newState = {
+ defaultFilter : convertFilter(filter),
loading: false,
- violations: dataHelper.getViolations(),
+ violations: dataHelper.getViolations(filter["crew.license"]),
};
this.setState(newState);
})
.catch((error) => {
console.error(error);
});
- }
+ });
}
render() {
- const { violations, loading } = this.state;
+ const { violations, loading, defaultFilter, mounted } = this.state;
const { t } = this.props;
- return (
+ return mounted && (
diff --git a/src/helpers/get-data.js b/src/helpers/get-data.js
index 18be7193..18df950a 100644
--- a/src/helpers/get-data.js
+++ b/src/helpers/get-data.js
@@ -171,10 +171,22 @@ export const checkUserType = (user) => {
return userRole;
};
+export const convertFilter = (filterObj) => {
+ const filter = [];
+ for (var key in filterObj){
+ filter.push({name: key, value: filterObj[key] });
+ }
+ return filter;
+};
+
export const goToPage = (path, id) => {
history.push(path.replace(":id", id));
};
+export const goToPageWithFilter = (path, filter) => {
+ history.push(path.replace(":filter", JSON.stringify(filter)));
+};
+
export const bufferToBase64 = (buffer) => {
var binary = "";
var bytes = new Uint8Array(buffer);
diff --git a/src/helpers/i18n/en/translation.json b/src/helpers/i18n/en/translation.json
index c8ba5027..7c6149f2 100644
--- a/src/helpers/i18n/en/translation.json
+++ b/src/helpers/i18n/en/translation.json
@@ -160,7 +160,8 @@
"BUSINESS": "Business",
"DELIVERIES": "Deliveries",
"ISSUED_TO": "Issued To",
- "CREW_MEMBER": "Crew Member"
+ "CREW_MEMBER": "Crew Member",
+ "PHOTO": "Photo"
},
"FILTER": {
"FROM": "From",
diff --git a/src/helpers/map-routing.js b/src/helpers/map-routing.js
index b047c422..81cf0f72 100644
--- a/src/helpers/map-routing.js
+++ b/src/helpers/map-routing.js
@@ -13,14 +13,13 @@ const mapRouting = (routes) => {
route.render = props => {
const auth = authService.isStitchAuthenticated;
-
+
if (route.auth){
if (!auth){
return
{t("BOARDING_PAGE.ALL_DATES")} ⯆