Skip to content

Commit 2f9fd10

Browse files
prabinoidprabinoid
authored
Merge pull request #167 from sumitdahal7/feat/overall-changes
Feat/overall changes
2 parents 65bac85 + e2e8b56 commit 2f9fd10

10 files changed

Lines changed: 217 additions & 144 deletions

File tree

‎frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const ProjectTypeAreaStats = ({
1212
projectTypeAreaStats = [],
1313
areaSwipedByProjectType = [],
1414
}) => {
15-
const data = {
15+
const rawData = {
1616
find: {
1717
totalcontributions: 0,
1818
totalArea: 0,
@@ -27,23 +27,39 @@ export const ProjectTypeAreaStats = ({
2727
};
2828

2929
projectTypeAreaStats.forEach((stat) => {
30-
if (['build_area', 'buildarea'].includes(stat.projectType.toLowerCase())) {
31-
data.find.totalcontributions = getShortNumber(stat.totalcontributions || 0);
32-
} else if (['foot_print', 'footprint'].includes(stat.projectType.toLowerCase())) {
33-
data.validate.totalcontributions = getShortNumber(stat.totalcontributions || 0);
34-
} else if (['change_detection', 'changedetection'].includes(stat.projectType.toLowerCase())) {
35-
data.compare.totalcontributions = getShortNumber(stat.totalcontributions || 0);
30+
const type = stat.projectType.toLowerCase();
31+
if (['build_area', 'buildarea', 'find'].includes(type)) {
32+
rawData.find.totalcontributions += Number(stat.totalcontributions || 0);
33+
} else if (['foot_print', 'footprint', 'validate'].includes(type)) {
34+
rawData.validate.totalcontributions += Number(stat.totalcontributions || 0);
35+
} else if (['change_detection', 'changedetection', 'compare'].includes(type)) {
36+
rawData.compare.totalcontributions += Number(stat.totalcontributions || 0);
3637
}
3738
});
3839

3940
areaSwipedByProjectType.forEach((stat) => {
40-
if (['build_area', 'buildarea'].includes(stat.projectType.toLowerCase())) {
41-
data.find.totalArea = getShortNumber(stat.totalArea || 0);
42-
} else if (['change_detection', 'changedetection'].includes(stat.projectType.toLowerCase())) {
43-
data.compare.totalArea = getShortNumber(stat.totalArea || 0);
41+
const type = stat.projectType.toLowerCase();
42+
if (['build_area', 'buildarea', 'find'].includes(type)) {
43+
rawData.find.totalArea += Number(stat.totalArea || 0);
44+
} else if (['change_detection', 'changedetection', 'compare'].includes(type)) {
45+
rawData.compare.totalArea += Number(stat.totalArea || 0);
4446
}
4547
});
4648

49+
const data = {
50+
find: {
51+
totalcontributions: getShortNumber(rawData.find.totalcontributions),
52+
totalArea: getShortNumber(rawData.find.totalArea),
53+
},
54+
validate: {
55+
totalcontributions: getShortNumber(rawData.validate.totalcontributions),
56+
},
57+
compare: {
58+
totalcontributions: getShortNumber(rawData.compare.totalcontributions),
59+
totalArea: getShortNumber(rawData.compare.totalArea),
60+
},
61+
};
62+
4763
return (
4864
<div
4965
className="flex justify-between items-center flex-wrap flex-nowrap-l"

‎frontend/src/components/projectDetail/index.js‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ export const ProjectDetail = (props) => {
167167
const minimumValidationLevel = levels
168168
.find((level) => level.id === props.project.validationPermissionLevelId);
169169

170+
const isSandbox = props.project.sandbox;
170171
return (
171172
<div className={`${props.className || 'blue-dark'}`}>
172173
<div className="db flex-l tasks-map-height">
@@ -255,32 +256,32 @@ export const ProjectDetail = (props) => {
255256
alignItems: "baseline",
256257
gap: "1rem",
257258
}}>
258-
<h4 className="mb2 mt0 fw6">
259-
<FormattedMessage {...messages.whoCanMap} />
260-
</h4>
261-
<PermissionBox
262-
permission={props.project.mappingPermission}
263-
className="dib pv2 ph3 red"
264-
/>
265-
<FormattedMessage {...messages.having} />
266-
<div className={`tc br1 f6 ba dib pv2 ph3 red`}>
267-
{minimumMappingLevel && minimumMappingLevel.name}
268-
</div>
269-
<FormattedMessage {...messages.levelOrAbove} />
259+
<h4 className="mb2 mt0 fw6">
260+
<FormattedMessage {...messages.whoCanMap} />
261+
</h4>
262+
<PermissionBox
263+
permission={props.project.mappingPermission}
264+
className="dib pv2 ph3 red"
265+
/>
266+
<FormattedMessage {...messages.having} />
267+
<div className={`tc br1 f6 ba dib pv2 ph3 red`}>
268+
{minimumMappingLevel && minimumMappingLevel.name}
269+
</div>
270+
<FormattedMessage {...messages.levelOrAbove} />
270271

271-
<h4 className="mb2 mt0 fw6">
272-
<FormattedMessage {...messages.whoCanValidate} />
273-
</h4>
274-
<PermissionBox
275-
permission={props.project.validationPermission}
276-
validation
277-
className="dib pv2 ph3 red"
278-
/>
279-
<FormattedMessage {...messages.having} />
280-
<div className={`tc br1 f6 ba dib pv2 ph3 red`}>
281-
{minimumValidationLevel && minimumValidationLevel.name}
282-
</div>
283-
<FormattedMessage {...messages.levelOrAbove} />
272+
<h4 className="mb2 mt0 fw6">
273+
<FormattedMessage {...messages.whoCanValidate} />
274+
</h4>
275+
<PermissionBox
276+
permission={props.project.validationPermission}
277+
validation
278+
className="dib pv2 ph3 red"
279+
/>
280+
<FormattedMessage {...messages.having} />
281+
<div className={`tc br1 f6 ba dib pv2 ph3 red`}>
282+
{minimumValidationLevel && minimumValidationLevel.name}
283+
</div>
284+
<FormattedMessage {...messages.levelOrAbove} />
284285
</div>}
285286

286287
<div className="mt3">
@@ -375,10 +376,12 @@ export const ProjectDetail = (props) => {
375376
<FormattedMessage {...messages.moreStats} />
376377
</CustomButton>
377378
</Link>
378-
<OSMChaButton
379-
project={props.project}
380-
className="bg-white blue-dark ba b--grey-light pa3"
381-
/>
379+
{!isSandbox && (
380+
<OSMChaButton
381+
project={props.project}
382+
className="bg-white blue-dark ba b--grey-light pa3"
383+
/>
384+
)}
382385
<DownloadAOIButton
383386
projectId={props.project.projectId}
384387
className="bg-white blue-dark ba b--grey-light pa3"
@@ -440,6 +443,7 @@ ProjectDetail.propTypes = {
440443
mappingPermission: PropTypes.string,
441444
validationPermission: PropTypes.string,
442445
teams: PropTypes.arrayOf(PropTypes.object),
446+
sandbox: PropTypes.bool,
443447
}).isRequired,
444448
className: PropTypes.string,
445449
};

‎frontend/src/components/projects/messages.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,14 @@ export default defineMessages({
273273
id: 'project.results.retry',
274274
defaultMessage: 'Retry',
275275
},
276+
imagery: {
277+
id: 'project.navFilters.imagery',
278+
defaultMessage: 'Imagery',
279+
},
280+
selectImagery: {
281+
id: 'project.navFilters.selectImagery',
282+
defaultMessage: 'Select imagery',
283+
},
276284
partner: {
277285
id: 'project.navFilters.partner',
278286
defaultMessage: 'Partner',

‎frontend/src/components/projects/moreFiltersForm.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useSelector } from 'react-redux';
22
import { Link } from 'react-router-dom';
33
import { useQueryParam, BooleanParam } from 'use-query-params';
44
import { FormattedMessage } from 'react-intl';
5+
import Select from 'react-select';
56

67
import messages from './messages';
78
import { Button } from '../button';
@@ -13,6 +14,7 @@ import { ProjectFilterSelect } from './filterSelectFields';
1314
import { PartnersFilterSelect } from './partnersFilterSelect';
1415
import { CommaArrayParam } from '../../utils/CommaArrayParam';
1516
import { formatFilterCountriesData } from '../../utils/countries';
17+
import { IMAGERY_OPTIONS } from '../../hooks/UseImageryOption';
1618

1719
export const MoreFiltersForm = (props) => {
1820
/* one useQueryParams for the main form */
@@ -27,6 +29,7 @@ export const MoreFiltersForm = (props) => {
2729
organisation: orgInQuery,
2830
location: countryInQuery,
2931
interests: interestInQuery,
32+
imagery: imageryInQuery,
3033
} = formQuery;
3134
const [campaignAPIState] = useTagAPI([], 'campaigns');
3235
const [orgAPIState] = useTagAPI([], 'organisations');
@@ -131,6 +134,25 @@ export const MoreFiltersForm = (props) => {
131134
/>
132135
)}
133136

137+
<fieldset id="imageryFilter" className={`${fieldsetStyle} mb3`}>
138+
<legend className={titleStyle}>
139+
<FormattedMessage {...messages.imagery} />
140+
</legend>
141+
<Select
142+
classNamePrefix="react-select"
143+
isClearable={true}
144+
options={IMAGERY_OPTIONS}
145+
value={IMAGERY_OPTIONS.find((o) => o.value === imageryInQuery) || null}
146+
placeholder={<FormattedMessage {...messages.selectImagery} />}
147+
onChange={(option) =>
148+
setFormQuery(
149+
{ ...formQuery, page: undefined, imagery: option ? option.value : undefined },
150+
'pushIn',
151+
)
152+
}
153+
/>
154+
</fieldset>
155+
134156
<div className="tr w-100 mt3 pb3 ph2">
135157
<Link to="/explore">
136158
<Button className="bg-white blue-dark mr1 f6 pv2">

‎frontend/src/components/taskSelection/action.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,7 @@ export function TaskMapAction({ project, tasks, activeTasks, getTasks, action, e
282282
taskBordersOnly={false}
283283
animateZoom={false}
284284
selected={tasksIds}
285+
zoomedTaskId={tasksIds}
285286
showTaskIds={action === 'VALIDATION'}
286287
priorityAreas={priorityArea}
287288
/>
@@ -437,6 +438,7 @@ export function TaskMapAction({ project, tasks, activeTasks, getTasks, action, e
437438
taskBordersOnly={false}
438439
animateZoom={false}
439440
selected={tasksIds}
441+
zoomedTaskId={tasksIds}
440442
showTaskIds={action === 'VALIDATION'}
441443
priorityAreas={priorityArea}
442444
/>

‎frontend/src/components/taskSelection/actionSidebars.js‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -473,23 +473,23 @@ export function CompletionTabForValidation({
473473
<h4 className="ttu blue-grey f5">
474474
<FormattedMessage {...messages.editStatus} />
475475
</h4>
476-
<p className="b mb2">
476+
{/* <p className="b mb2">
477477
<FormattedMessage {...messages.validatedQuestion} values={{ number: tasksIds.length }} />
478-
</p>
478+
</p> */}
479479
{tasksIds.length > 3 && (
480480
<div className="cf w-100 db pt1 pv2 blue-dark mb2 bb b--light-gray">
481481
<div className="cf w-100">
482-
<div className="fw8 f5 w-10 dib">
482+
<div className="fw8 f5 w-10 dib v-top pt2">
483483
<FormattedMessage {...messages.filterAll} />
484484
</div>
485-
<div className="w-auto dib">
485+
<div className="w-80 dib">
486486
{['VALIDATED', 'INVALIDATED'].map((value, index) => (
487-
<div className="dib" key={index}>
487+
<div className="flex items-start mb2" key={index}>
488488
<input
489489
type="radio"
490490
id={value}
491491
value={value}
492-
className="radio-input input-reset pointer v-mid dib h2 w2 mr2 ml3 br-100 ba b--blue-light"
492+
className="radio-input input-reset pointer flex-shrink-0 h2 w2 mr2 br-100 ba b--blue-light"
493493
checked={
494494
Object.values(validationStatus).every((status) => status === value) &&
495495
Object.values(validationStatus).length === tasksIds.length
@@ -500,11 +500,11 @@ export function CompletionTabForValidation({
500500
setValidationStatus(tempObj);
501501
}}
502502
/>
503-
<label htmlFor={value}>
503+
<label htmlFor={value} className="pointer lh-copy">
504504
{index ? (
505-
<FormattedMessage {...messages.incomplete} />
505+
<FormattedMessage {...messages.invalidMapping} />
506506
) : (
507-
<FormattedMessage {...messages.complete} />
507+
<FormattedMessage {...messages.validMapping} />
508508
)}
509509
</label>
510510
</div>
@@ -604,34 +604,38 @@ const TaskValidationSelector = ({
604604
return (
605605
<div className="cf w-100 db pt1 pv2 blue-dark">
606606
<div className="cf w-100">
607-
<div className="fw8 f5 w-10 dib">#{id}</div>
608-
<div className="w-auto dib">
609-
<input
610-
type="radio"
611-
value="VALIDATED"
612-
id={`#${id}-VALIDATED`}
613-
className="radio-input input-reset pointer v-mid dib h2 w2 mr2 ml3 br-100 ba b--blue-light"
614-
checked={currentStatus === 'VALIDATED'}
615-
onChange={() => updateStatus(id, 'VALIDATED')}
616-
/>
617-
<label htmlFor={`#${id}-VALIDATED`}>
618-
<FormattedMessage {...messages.complete} />
619-
</label>
620-
<input
621-
type="radio"
622-
value="INVALIDATED"
623-
id={`#${id}-INVALIDATED`}
624-
className="radio-input input-reset pointer v-mid dib h2 w2 mr2 ml3 br-100 ba b--blue-light"
625-
checked={currentStatus === 'INVALIDATED'}
626-
onChange={() => updateStatus(id, 'INVALIDATED')}
627-
/>
628-
<label htmlFor={`#${id}-INVALIDATED`}>
629-
<FormattedMessage {...messages.incomplete} />
630-
</label>
607+
<div className="fw8 f5 w-10 dib v-top pt2">#{id}</div>
608+
<div className="w-80 dib">
609+
<div className="flex items-start mb2">
610+
<input
611+
type="radio"
612+
value="VALIDATED"
613+
id={`#${id}-VALIDATED`}
614+
className="radio-input input-reset pointer flex-shrink-0 h2 w2 mr2 br-100 ba b--blue-light"
615+
checked={currentStatus === 'VALIDATED'}
616+
onChange={() => updateStatus(id, 'VALIDATED')}
617+
/>
618+
<label htmlFor={`#${id}-VALIDATED`} className="pointer lh-copy">
619+
<FormattedMessage {...messages.validMapping} />
620+
</label>
621+
</div>
622+
<div className="flex items-start mb2">
623+
<input
624+
type="radio"
625+
value="INVALIDATED"
626+
id={`#${id}-INVALIDATED`}
627+
className="radio-input input-reset pointer flex-shrink-0 h2 w2 mr2 br-100 ba b--blue-light"
628+
checked={currentStatus === 'INVALIDATED'}
629+
onChange={() => updateStatus(id, 'INVALIDATED')}
630+
/>
631+
<label htmlFor={`#${id}-INVALIDATED`} className="pointer lh-copy">
632+
<FormattedMessage {...messages.invalidMapping} />
633+
</label>
634+
</div>
631635
<CustomButton
632636
className={`${
633637
showCommentInput ? 'b--red red' : 'b--grey-light blue-dark'
634-
} bg-white ba br1 ml3 pv2 ph3`}
638+
} bg-white ba br1 mt1 pv2 ph3`}
635639
onClick={() => setShowCommentInput(!showCommentInput)}
636640
icon={
637641
comment ? (

0 commit comments

Comments
 (0)