Skip to content

Commit 3ea5e16

Browse files
tnagorrafrozenhelium
tnagorra
authored and
frozenhelium
committed
Fix suboption value submission issue
- Use custom options readonly form on project page
1 parent 04daec7 commit 3ea5e16

File tree

10 files changed

+147
-232
lines changed

10 files changed

+147
-232
lines changed

‎manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx‎

Lines changed: 0 additions & 103 deletions
This file was deleted.

‎manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx‎

Lines changed: 1 addition & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,13 @@ import React, { useCallback } from 'react';
22
import { EntriesAsList, ObjectError, SetBaseValueArg } from '@togglecorp/toggle-form';
33
import TextInput from '#components/TextInput';
44
import { generateProjectName, PartialProjectFormType } from '#views/NewProject/utils';
5-
import { PROJECT_TYPE_FOOTPRINT, labelSelector, valueSelector } from '#utils/common';
5+
import { labelSelector, valueSelector } from '#utils/common';
66
import NumberInput from '#components/NumberInput';
77
import TextArea from '#components/TextArea';
88
import ImageInput from '#components/ImageInput';
99
import SelectInput from '#components/SelectInput';
1010
import useProjectOptions from '#views/NewProject/useProjectOptions';
1111
import styles from '#views/NewProject/styles.css';
12-
import Card from '#components/Card';
13-
import Heading from '#components/Heading';
14-
import Tabs,
15-
{
16-
Tab,
17-
TabList,
18-
TabPanel,
19-
} from '#components/Tabs';
20-
21-
import CustomOptionReadOnly from './CustomOptionReadOnly';
2212

2313
export interface Props<T extends PartialProjectFormType> {
2414
className?: string;
@@ -47,12 +37,6 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
4737
organisationsPending,
4838
} = useProjectOptions(value?.projectType);
4939

50-
const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
51-
52-
React.useEffect(() => {
53-
setFieldValue(tutorialOptions?.[0]?.value, 'tutorialId');
54-
}, [setFieldValue, value?.projectType, tutorialOptions]);
55-
5640
const setFieldValueAndGenerateName = React.useCallback(
5741
(...entries: EntriesAsList<PartialProjectFormType>) => {
5842
// NOTE: we need to use setFieldValue to set error on change
@@ -223,43 +207,6 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
223207
/>
224208
</div>
225209
</div>
226-
{(value.projectType === PROJECT_TYPE_FOOTPRINT && value?.customOptions) && (
227-
<Card
228-
title="Custom Options"
229-
contentClassName={styles.card}
230-
>
231-
<Heading level={4}>
232-
Option Instructions
233-
</Heading>
234-
<Tabs
235-
value={activeOptionsTab}
236-
onChange={setActiveOptionsTab}
237-
>
238-
<TabList>
239-
{value.customOptions.map((custom) => (
240-
241-
<Tab
242-
key={custom.optionId}
243-
name={`${custom.optionId}`}
244-
>
245-
{`Option ${custom.optionId}`}
246-
</Tab>
247-
))}
248-
</TabList>
249-
{value.customOptions.map((options) => (
250-
<TabPanel
251-
key={options.optionId}
252-
name={String(options.optionId)}
253-
>
254-
<CustomOptionReadOnly
255-
key={options.optionId}
256-
value={options}
257-
/>
258-
</TabPanel>
259-
))}
260-
</Tabs>
261-
</Card>
262-
)}
263210
</>
264211
);
265212
}

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

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ import TileServerInput, {
4343
} from '#components/TileServerInput';
4444
import InputSection from '#components/InputSection';
4545
import Button from '#components/Button';
46+
import NonFieldError from '#components/NonFieldError';
4647
import AnimatedSwipeIcon from '#components/AnimatedSwipeIcon';
47-
import BasicProjectInfoForm from './BasicProjectInfoForm';
48-
48+
import ExpandableContainer from '#components/ExpandableContainer';
4949
import {
5050
valueSelector,
5151
labelSelector,
@@ -57,6 +57,9 @@ import {
5757
PROJECT_TYPE_CHANGE_DETECTION,
5858
} from '#utils/common';
5959

60+
import CustomOptionInput from '#views/NewTutorial/CustomOptionInput';
61+
import CustomOptionPreview from '#views/NewTutorial/CustomOptionInput/CustomOptionPreview';
62+
6063
import {
6164
projectFormSchema,
6265
ProjectFormType,
@@ -72,6 +75,8 @@ import {
7275
validateAoiOnOhsome,
7376
validateProjectIdOnHotTaskingManager,
7477
} from './utils';
78+
import BasicProjectInfoForm from './BasicProjectInfoForm';
79+
7580
// eslint-disable-next-line postcss-modules/no-unused-class
7681
import styles from './styles.css';
7782

@@ -385,6 +390,22 @@ function NewProject(props: Props) {
385390

386391
const projectTypeEmpty = isNotDefined(value.projectType);
387392

393+
const { customOptions: customOptionsFromValue } = value;
394+
395+
const customOptions = customOptionsFromValue?.map((option) => ({
396+
...option,
397+
optionId: option.value,
398+
subOptions: option.subOptions?.map((subOption) => ({
399+
...subOption,
400+
subOptionsId: subOption.value,
401+
})),
402+
}));
403+
404+
const optionsError = React.useMemo(
405+
() => getErrorObject(error?.customOptions),
406+
[error?.customOptions],
407+
);
408+
388409
return (
389410
<div className={_cs(styles.newProject, className)}>
390411
<div className={styles.container}>
@@ -411,6 +432,47 @@ function NewProject(props: Props) {
411432
disabled={submissionPending || projectTypeEmpty}
412433
/>
413434
</InputSection>
435+
{(
436+
value.projectType === PROJECT_TYPE_FOOTPRINT
437+
&& customOptions
438+
&& customOptions.length > 0
439+
) && (
440+
<InputSection
441+
heading="Custom Options"
442+
>
443+
<NonFieldError
444+
error={optionsError}
445+
/>
446+
{(customOptions && customOptions.length > 0) ? (
447+
<div className={styles.customOptionContainer}>
448+
<div className={styles.customOptionList}>
449+
{customOptions.map((option, index) => (
450+
<ExpandableContainer
451+
key={option.value}
452+
header={option.title || `Option ${index + 1}`}
453+
>
454+
<CustomOptionInput
455+
key={option.value}
456+
value={option}
457+
index={index}
458+
// eslint-disable-next-line max-len
459+
// eslint-disable-next-line @typescript-eslint/no-empty-function
460+
onChange={() => {}}
461+
error={optionsError?.[option.value]}
462+
readOnly
463+
/>
464+
</ExpandableContainer>
465+
))}
466+
</div>
467+
<CustomOptionPreview
468+
value={customOptions}
469+
/>
470+
</div>
471+
) : (
472+
<div>No options</div>
473+
)}
474+
</InputSection>
475+
)}
414476
{(value.projectType === PROJECT_TYPE_BUILD_AREA
415477
|| value.projectType === PROJECT_TYPE_CHANGE_DETECTION
416478
|| value.projectType === PROJECT_TYPE_COMPLETENESS) && (

‎manager-dashboard/app/views/NewProject/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,18 @@
1313
max-width: 70rem;
1414
gap: var(--spacing-large);
1515

16+
.custom-option-container {
17+
display: flex;
18+
gap: var(--spacing-large);
19+
20+
.custom-option-list {
21+
display: flex;
22+
flex-direction: column;
23+
flex-grow: 1;
24+
gap: var(--spacing-medium);
25+
}
26+
}
27+
1628
.input-group {
1729
display: flex;
1830
flex-wrap: wrap;

0 commit comments

Comments
 (0)