Skip to content

Commit 3997685

Browse files
erinz2020erinz2020
authored
Merge pull request #1366 from WildMeOrg/update_encounter_page_labels
update labels in encounter page
2 parents 82895b0 + ca13e4c commit 3997685

File tree

4 files changed

+78
-81
lines changed

4 files changed

+78
-81
lines changed

‎frontend/src/components/generalInputs/CoordinatesInput.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,11 +106,11 @@ export const CoordinatesInput = observer(({ store }) => {
106106
return (
107107
<div>
108108
<Form.Group>
109-
<Form.Label>
110-
<FormattedMessage id="FILTER_GPS_COORDINATES" />
111-
</Form.Label>
112109
<div className="d-flex flex-row gap-3">
113110
<div className="w-50">
111+
<h6>
112+
<FormattedMessage id="LATITUDE" />
113+
</h6>
114114
<Form.Control
115115
type="number"
116116
required
@@ -129,6 +129,9 @@ export const CoordinatesInput = observer(({ store }) => {
129129
)}
130130
</div>
131131
<div className="w-50">
132+
<h6>
133+
<FormattedMessage id="LONGITUDE" />
134+
</h6>
132135
<Form.Control
133136
type="number"
134137
required

‎frontend/src/pages/Encounter/LocationSectionEdit.jsx‎

Lines changed: 58 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,67 @@
1-
import React from 'react';
2-
import { observer } from 'mobx-react-lite';
3-
import SelectInput from '../../components/generalInputs/SelectInput';
1+
import React from "react";
2+
import { observer } from "mobx-react-lite";
3+
import SelectInput from "../../components/generalInputs/SelectInput";
44
import { Alert } from "react-bootstrap";
5-
import TextInput from '../../components/generalInputs/TextInput';
6-
import CoordinatesInput from '../../components/generalInputs/CoordinatesInput';
5+
import TextInput from "../../components/generalInputs/TextInput";
6+
import CoordinatesInput from "../../components/generalInputs/CoordinatesInput";
77
import { Suspense, lazy } from "react";
88
import convertToTreeData from "../../utils/converToTreeData";
9-
import { FormattedMessage } from 'react-intl';
10-
9+
import { FormattedMessage } from "react-intl";
1110

1211
const TreeSelect = lazy(() => import("antd/es/tree-select"));
1312
export const LocationSectionEdit = observer(({ store }) => {
14-
const locationOptions = convertToTreeData(store.siteSettingsData?.locationData?.locationID, "value", "label");
13+
const locationOptions = convertToTreeData(
14+
store.siteSettingsData?.locationData?.locationID,
15+
"value",
16+
"label",
17+
);
1518

16-
return <div>
17-
<TextInput
18-
label="LOCATION"
19-
value={
20-
store.getFieldValue("location", "verbatimLocality") ??
21-
""
22-
}
23-
onChange={(v) =>
24-
store.setFieldValue("location", "verbatimLocality", v)
25-
}
26-
/>
27-
<label><FormattedMessage id="LOCATION_ID"/></label>
28-
<Suspense fallback={<div>Loading location picker...</div>}>
29-
<TreeSelect
30-
id="location-tree-select"
31-
treeData={locationOptions}
32-
value={store.getFieldValue("location", "locationId") ?? ""}
33-
treeNodeFilterProp="value"
34-
treeLine
35-
showSearch
36-
size="large"
37-
allowClear
38-
style={{ width: "100%" }}
39-
placeholder="Select locations"
40-
dropdownStyle={{ maxHeight: "500px", zIndex: 9999 }}
41-
onChange={(val) =>
42-
store.setFieldValue("location", "locationId", val)
43-
}
44-
/>
45-
</Suspense>
46-
<SelectInput
47-
label="COUNTRY"
48-
value={store.getFieldValue("location", "country") ?? ""}
49-
onChange={(v) =>
50-
store.setFieldValue("location", "country", v)
51-
}
52-
options={
53-
store.siteSettingsData?.country?.map((item) => {
54-
return {
55-
value: item,
56-
label: item,
57-
};
58-
}) || []
59-
}
60-
className="mb-3"
19+
return (
20+
<div>
21+
<TextInput
22+
label="LOCATION"
23+
value={store.getFieldValue("location", "verbatimLocality") ?? ""}
24+
onChange={(v) => store.setFieldValue("location", "verbatimLocality", v)}
25+
/>
26+
<h6 className="mt-1">
27+
<FormattedMessage id="LOCATION_ID" />
28+
</h6>
29+
<Suspense fallback={<div>Loading location picker...</div>}>
30+
<TreeSelect
31+
id="location-tree-select"
32+
treeData={locationOptions}
33+
value={store.getFieldValue("location", "locationId") ?? ""}
34+
treeNodeFilterProp="value"
35+
treeLine
36+
showSearch
37+
size="large"
38+
allowClear
39+
style={{ width: "100%" }}
40+
placeholder="Select locations"
41+
dropdownStyle={{ maxHeight: "500px", zIndex: 9999 }}
42+
onChange={(val) => store.setFieldValue("location", "locationId", val)}
6143
/>
62-
<CoordinatesInput store={store} />
63-
{store.errors.hasSectionError("location") && (
64-
<Alert variant="danger">
65-
{store.errors.getSectionErrors("location").join(";")}
66-
</Alert>
67-
)}
44+
</Suspense>
45+
<SelectInput
46+
label="COUNTRY"
47+
value={store.getFieldValue("location", "country") ?? ""}
48+
onChange={(v) => store.setFieldValue("location", "country", v)}
49+
options={
50+
store.siteSettingsData?.country?.map((item) => {
51+
return {
52+
value: item,
53+
label: item,
54+
};
55+
}) || []
56+
}
57+
className="mb-3"
58+
/>
59+
<CoordinatesInput store={store} />
60+
{store.errors.hasSectionError("location") && (
61+
<Alert variant="danger">
62+
{store.errors.getSectionErrors("location").join(";")}
63+
</Alert>
64+
)}
6865
</div>
69-
})
66+
);
67+
});

‎frontend/src/pages/Encounter/LocationSectionReview.jsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React from "react";
22
import { observer } from "mobx-react-lite";
33
import MapDisplay from "./MapDisplay";
44
import { AttributesAndValueComponent } from "../../components/AttributesAndValueComponent";
5-
import { FormattedMessage } from "react-intl";
65

76
export const LocationSectionReview = observer(({ store }) => {
7+
const lat = store.getFieldValue("location", "locationGeoPoint")?.lat;
8+
const lon = store.getFieldValue("location", "locationGeoPoint")?.lon;
89
return (
910
<div>
1011
<AttributesAndValueComponent
@@ -20,24 +21,15 @@ export const LocationSectionReview = observer(({ store }) => {
2021
value={store.getFieldValue("location", "country")}
2122
/>
2223
<div>
23-
<h6>
24-
<FormattedMessage id="COORDINATES" />
25-
</h6>
26-
<div>
27-
{store.getFieldValue("location", "locationGeoPoint")?.lat != null &&
28-
`latitude: ${store.getFieldValue("location", "locationGeoPoint").lat}`}
29-
</div>
30-
<div>
31-
{store.getFieldValue("location", "locationGeoPoint")?.lon != null &&
32-
`longitude: ${store.getFieldValue("location", "locationGeoPoint").lon}`}
33-
</div>
24+
<AttributesAndValueComponent
25+
attributeId="LATITUDE"
26+
value={typeof lat === "number" ? lat : ""}
27+
/>
28+
<AttributesAndValueComponent
29+
attributeId="LONGITUDE"
30+
value={typeof lon === "number" ? lon : ""}
31+
/>
3432
</div>
35-
<div>
36-
<h6>
37-
<FormattedMessage id="MAP" />
38-
</h6>
39-
</div>
40-
<div></div>
4133
<MapDisplay store={store} />
4234
</div>
4335
);

‎frontend/src/pages/Encounter/MetadataSectionReview.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@ export const MetadataSectionReview = observer(({ store }) => {
99
<div>
1010
<h6>
1111
<FormattedMessage id="ENCOUNTER_ID" />
12+
{": "}
1213
</h6>
1314
<p>{store.encounterData?.id || ""}</p>
1415
</div>
1516
<div>
1617
<h6>
1718
<FormattedMessage id="DATE_CREATED" />
19+
{": "}
1820
</h6>
1921
<p>
2022
{(() => {
@@ -32,6 +34,7 @@ export const MetadataSectionReview = observer(({ store }) => {
3234
<div>
3335
<h6>
3436
<FormattedMessage id="LAST_EDIT" />
37+
{": "}
3538
</h6>
3639
<p>
3740
{(() => {
@@ -52,6 +55,7 @@ export const MetadataSectionReview = observer(({ store }) => {
5255
<div>
5356
<h6>
5457
<FormattedMessage id="IMPORTED_VIA" />
58+
{": "}
5559
</h6>
5660
<p>
5761
{store.encounterData?.importTaskId ? (

0 commit comments

Comments
 (0)