Skip to content

Commit 2a12896

Browse files
tnagorrafrozenhelium
tnagorra
authored and
frozenhelium
committed
Remove un-necessary key on request
- Fix issue with image uploads - Fix FileInput disable
1 parent 8a7b4d7 commit 2a12896

File tree

7 files changed

+151
-101
lines changed

7 files changed

+151
-101
lines changed

‎manager-dashboard/app/components/ExpandableContainer/styles.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838

3939
.children {
4040
border: var(--width-separator-thin) solid var(--color-separator);
41+
border-top: 0;
4142
border-bottom-left-radius: var(--radius-card-border);
4243
border-bottom-right-radius: var(--radius-card-border);
4344
padding: var(--spacing-medium);

‎manager-dashboard/app/components/FileInput/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ function FileInput<Name>(props: Props<Name>) {
138138
name={name}
139139
onChange={handleChange}
140140
accept={accept}
141+
disabled={disabled}
141142
/>
142143
</>
143144
)}

‎manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function Block(props: Props) {
3939
<MarkdownEditor
4040
name={'textDescription' as const}
4141
value={value?.textDescription}
42-
label={`Block ${index + 1}`}
42+
label={`Block #${index + 1}`}
4343
onChange={onBlockChange}
4444
error={error?.textDescription}
4545
disabled={disabled}

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import MobilePreview from '#components/MobilePreview';
55
import GeoJsonPreview from '#components/GeoJsonPreview';
66
import { IconKey, iconMap } from '#utils/common';
77

8-
import { CustomOptionPreviewType, FootprintGeoJSON } from '../../utils';
8+
import {
9+
PartialCustomOptionsType,
10+
FootprintGeoJSON,
11+
colorKeyToColorMap,
12+
} from '../../utils';
913
import styles from './styles.css';
1014

1115
interface Props {
@@ -17,7 +21,7 @@ interface Props {
1721
icon?: IconKey;
1822
}
1923
url: string | undefined;
20-
customOptionsPreview: CustomOptionPreviewType[] | undefined;
24+
customOptionsPreview: PartialCustomOptionsType | undefined;
2125
}
2226
export default function FootprintGeoJsonPreview(props: Props) {
2327
const {
@@ -48,15 +52,22 @@ export default function FootprintGeoJsonPreview(props: Props) {
4852
/>
4953
<div className={styles.options}>
5054
{customOptionsPreview?.map((option) => {
51-
const Icon = iconMap[option.icon];
55+
const Icon = option.icon
56+
? iconMap[option.icon]
57+
: iconMap.flagOutline;
5258
return (
5359
<div
54-
key={option.id}
60+
key={option.optionId}
5561
className={styles.optionContainer}
5662
>
5763
<div
5864
className={styles.option}
59-
style={{ backgroundColor: option.iconColor }}
65+
style={{
66+
backgroundColor: (
67+
option.iconColor
68+
|| colorKeyToColorMap.gray
69+
),
70+
}}
6071
>
6172
<Icon />
6273
</div>

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
FootprintGeoJSON,
2929
BuildAreaGeoJSON,
3030
ChangeDetectionGeoJSON,
31-
CustomOptionPreviewType,
31+
PartialCustomOptionsType,
3232
} from '../utils';
3333
import ScenarioGeoJsonPreview from './ScenarioGeoJsonPreview';
3434
import FootprintGeoJsonPreview from './FootprintGeoJsonPreview';
@@ -79,7 +79,7 @@ interface Props {
7979
projectType: ProjectType | undefined;
8080
url: string | undefined;
8181
urlB: string | undefined;
82-
customOptionsPreview?: CustomOptionPreviewType[];
82+
customOptionsPreview: PartialCustomOptionsType | undefined;
8383
scenarioId: number;
8484
disabled: boolean;
8585
}

‎manager-dashboard/app/views/NewTutorial/index.tsx‎

Lines changed: 51 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ import {
6767
import {
6868
tileServerUrls,
6969
tutorialFormSchema,
70-
colorKeyToColorMap,
70+
defaultFootprintCustomOptions,
7171
TutorialFormType,
7272
PartialTutorialFormType,
7373
PartialInformationPagesType,
@@ -77,15 +77,26 @@ import {
7777
InformationPageTemplateKey,
7878
infoPageTemplateOptions,
7979
infoPageBlocksMap,
80-
ColorKey,
81-
CustomOptionPreviewType,
80+
MAX_INFO_PAGES,
81+
MAX_OPTIONS,
8282
} from './utils';
8383
import CustomOptionPreview from './CustomOptionInput/CustomOptionPreview';
8484
import CustomOptionInput from './CustomOptionInput';
8585
import ScenarioPageInput from './ScenarioPageInput';
8686
import InformationPageInput from './InformationPageInput';
8787
import styles from './styles.css';
8888

89+
function deleteKey<T extends object, K extends keyof T>(
90+
value: T,
91+
key: K,
92+
): Omit<T, K> {
93+
const copy: Omit<T, K> & { [key in K]: T[K] | undefined } = {
94+
...value,
95+
};
96+
delete copy[key];
97+
return copy;
98+
}
99+
89100
type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
90101
function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
91102
const screens = scenarioPages.reduce<Record<string, CustomScreen>>(
@@ -102,34 +113,6 @@ function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
102113
return screens;
103114
}
104115

105-
// FIXME: need to confirm if the values are correct
106-
const defaultFootprintCustomOptions: PartialTutorialFormType['customOptions'] = [
107-
{
108-
optionId: 1,
109-
value: 1,
110-
title: 'Yes',
111-
icon: 'checkmarkOutline',
112-
iconColor: colorKeyToColorMap.green,
113-
description: 'the shape does outline a building in the image',
114-
},
115-
{
116-
optionId: 2,
117-
value: 0,
118-
title: 'No',
119-
icon: 'closeOutline',
120-
iconColor: colorKeyToColorMap.red,
121-
description: 'the shape doesn\'t match a building in the image',
122-
},
123-
{
124-
optionId: 3,
125-
value: 2,
126-
title: 'Not Sure',
127-
icon: 'removeOutline',
128-
iconColor: colorKeyToColorMap.orange,
129-
description: 'if you\'re not sure or there is cloud cover / bad imagery',
130-
},
131-
];
132-
133116
const defaultTutorialFormValue: PartialTutorialFormType = {
134117
// projectType: PROJECT_TYPE_BUILD_AREA,
135118
projectType: undefined,
@@ -247,7 +230,7 @@ function NewTutorial(props: Props) {
247230
setTutorialSubmissionStatus('imageUpload');
248231
try {
249232
const informationPagesPromises = informationPages.map(async (info, index) => {
250-
const blocks = info.blocks.map(async (block) => {
233+
const blocksPromise = info.blocks.map(async (block) => {
251234
if (!block.imageFile) {
252235
return block;
253236
}
@@ -269,24 +252,40 @@ function NewTutorial(props: Props) {
269252
};
270253
});
271254

255+
const blocks = await Promise.all(blocksPromise);
256+
272257
return {
273258
...info,
274259
// We are making sure that page number starts with 1
275260
// and is sequential
276261
pageNumber: index + 1,
277-
blocks: Promise.all(blocks),
262+
blocks,
278263
};
279264
});
280-
281265
const sanitizedInformationPages = await Promise.all(informationPagesPromises);
282266

283267
const uploadData = {
284268
...valuesToCopy,
269+
customOptions: valuesToCopy.customOptions?.map((option) => {
270+
const optionWithoutId = deleteKey(option, 'optionId');
271+
return {
272+
...optionWithoutId,
273+
subOptions: optionWithoutId.subOptions?.map(
274+
(subOption) => deleteKey(subOption, 'subOptionsId'),
275+
),
276+
};
277+
}),
285278
screens: sanitizedScenarioPages,
286279
informationPages: sanitizedInformationPages,
287280
createdBy: userId,
288281
};
289282

283+
console.log(uploadData);
284+
if (uploadData) {
285+
setTutorialSubmissionStatus('failed');
286+
return;
287+
}
288+
290289
const database = getDatabase();
291290
const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
292291
const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -482,24 +481,13 @@ function NewTutorial(props: Props) {
482481
return tileServerUrls[tileServerName];
483482
}, [value.tileServerB?.name, value.tileServerB?.url]);
484483

485-
// FIXME: we might not need this
486-
const customOptionsPreview: CustomOptionPreviewType[] = React.useMemo(() => {
487-
const customOptionsFromForm = value.customOptions;
488-
if (isNotDefined(customOptionsFromForm)) {
489-
return [];
490-
}
491-
const finalValue = customOptionsFromForm.map((custom) => (
492-
{
493-
id: custom.optionId,
494-
icon: custom.icon ?? 'removeOutline',
495-
iconColor: custom.iconColor as ColorKey ?? 'gray',
496-
}
497-
));
498-
return finalValue;
499-
}, [value.customOptions]);
500-
501484
const projectTypeEmpty = isNotDefined(value.projectType);
502485

486+
const {
487+
customOptions,
488+
informationPages,
489+
} = value;
490+
503491
return (
504492
<div className={_cs(styles.newTutorial, className)}>
505493
<Heading level={1}>
@@ -535,7 +523,7 @@ function NewTutorial(props: Props) {
535523
value={value.lookFor}
536524
onChange={setFieldValue}
537525
label="Look For"
538-
hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
526+
hint="What should the users look for (e.g. buildings, cars, trees)?"
539527
error={error?.lookFor}
540528
disabled={submissionPending || projectTypeEmpty}
541529
autoFocus
@@ -552,7 +540,7 @@ function NewTutorial(props: Props) {
552540
disabled={
553541
submissionPending
554542
|| projectTypeEmpty
555-
|| (value.customOptions && value.customOptions?.length >= 6)
543+
|| (customOptions && customOptions.length >= MAX_OPTIONS)
556544
}
557545
>
558546
Add Option
@@ -562,14 +550,14 @@ function NewTutorial(props: Props) {
562550
<NonFieldError
563551
error={optionsError}
564552
/>
565-
{value.customOptions?.length ? (
553+
{(customOptions && customOptions.length > 0) ? (
566554
<div className={styles.customOptionContainer}>
567555
<div className={styles.customOptionList}>
568-
{value.customOptions.map((option, index) => (
556+
{customOptions.map((option, index) => (
569557
<ExpandableContainer
570558
key={option.optionId}
571559
header={option.title || `Option ${index + 1}`}
572-
openByDefault
560+
openByDefault={index === customOptions.length - 1}
573561
actions={(
574562
<Button
575563
name={index}
@@ -594,7 +582,7 @@ function NewTutorial(props: Props) {
594582
))}
595583
</div>
596584
<CustomOptionPreview
597-
value={value.customOptions}
585+
value={customOptions}
598586
/>
599587
</div>
600588
) : (
@@ -623,8 +611,8 @@ function NewTutorial(props: Props) {
623611
disabled={(
624612
submissionPending
625613
|| projectTypeEmpty
626-
|| (value.informationPages
627-
&& value.informationPages.length >= 10)
614+
|| (informationPages
615+
&& informationPages.length >= MAX_INFO_PAGES)
628616
)}
629617
>
630618
{infoPageTemplate.label}
@@ -637,11 +625,11 @@ function NewTutorial(props: Props) {
637625
error={informationPagesError}
638626
/>
639627
<div className={styles.informationPageList}>
640-
{value.informationPages?.map((page, i) => (
628+
{informationPages?.map((page, i) => (
641629
<ExpandableContainer
642630
key={page.pageNumber}
643631
header={page.title || `Intro ${page.pageNumber}`}
644-
openByDefault
632+
openByDefault={i === informationPages.length - 1}
645633
actions={(
646634
<Button
647635
name={i}
@@ -664,7 +652,7 @@ function NewTutorial(props: Props) {
664652
/>
665653
</ExpandableContainer>
666654
))}
667-
{!(value.informationPages?.length) && (
655+
{!(informationPages?.length) && (
668656
<EmptyMessage
669657
title="Start adding Information pages"
670658
description="Add pages selecting templates from “Add page” dropdown"
@@ -744,7 +732,7 @@ function NewTutorial(props: Props) {
744732
projectType={value.projectType}
745733
onChange={onScenarioFormChange}
746734
error={scenarioError?.[task.scenarioId]}
747-
customOptionsPreview={customOptionsPreview}
735+
customOptionsPreview={customOptions}
748736
geoJson={value.tutorialTasks}
749737
url={tileServerAUrl}
750738
urlB={tileServerBUrl}
@@ -769,7 +757,7 @@ function NewTutorial(props: Props) {
769757
<Button
770758
name={undefined}
771759
onClick={handleSubmitButtonClick}
772-
// disabled={submissionPending || projectTypeEmpty}
760+
disabled={submissionPending || projectTypeEmpty}
773761
>
774762
Submit
775763
</Button>

0 commit comments

Comments
 (0)