Skip to content

Commit

Permalink
Merge pull request #895 from mapswipe/fix/footprint-type-instructions
Browse files Browse the repository at this point in the history 
Only show instructions for footprint tutorial
  • Loading branch information
@frozenhelium
frozenhelium committed Jul 17, 2023
2 parents 4a3b5c1 + 266c310 commit 713d9c1
Show file tree
Hide file tree
Showing 8 changed files with 246 additions and 251 deletions.
8 changes: 5 additions & 3 deletions manager-dashboard/app/components/GeoJsonPreview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
TileLayer,
Coords,
StyleFunction,
PointExpression,
} from 'leaflet';
import { _cs } from '@togglecorp/fujs';

Expand Down Expand Up @@ -50,6 +51,7 @@ interface Props {
geoJson: GeoJSON.GeoJSON | undefined;
url?: string | undefined;
previewStyle?: StyleFunction;
padding?: PointExpression;
}

function GeoJsonPreview(props: Props) {
Expand All @@ -58,6 +60,7 @@ function GeoJsonPreview(props: Props) {
geoJson,
url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
previewStyle,
padding,
} = props;

const mapRef = React.useRef<Map>();
Expand Down Expand Up @@ -91,8 +94,6 @@ function GeoJsonPreview(props: Props) {
{
// NOTE: we have a limit of 22
maxZoom: 22,
// attribution: '',
// subdomains: ['a', 'b', 'c'],
},
);

Expand Down Expand Up @@ -128,7 +129,7 @@ function GeoJsonPreview(props: Props) {
const bounds = newGeoJson.getBounds();

if (bounds.isValid()) {
map.fitBounds(bounds);
map.fitBounds(bounds, { padding });
}

return () => {
Expand All @@ -141,6 +142,7 @@ function GeoJsonPreview(props: Props) {
geoJson,
url,
previewStyle,
padding,
],
);

Expand Down
6 changes: 3 additions & 3 deletions manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
onChange={setFieldValueAndGenerateName}
error={error?.projectTopic}
label="Project Topic"
hint="Enter the topic of your project (50 char max)."
hint="Enter the topic of your project."
disabled={disabled}
autoFocus
/>
Expand All @@ -91,7 +91,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
value={value?.projectRegion}
onChange={setFieldValueAndGenerateName}
label="Project Region"
hint="Enter name of your project Region (50 chars max)"
hint="Enter name of your project Region"
error={error?.projectRegion}
disabled={disabled}
/>
Expand Down Expand Up @@ -148,7 +148,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
onChange={setFieldValue}
error={error?.lookFor}
label="Look For"
hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)"
hint="What should the users look for (e.g. buildings, cars, trees)?"
disabled={disabled}
/>
</div>
Expand Down
18 changes: 12 additions & 6 deletions manager-dashboard/app/views/NewProject/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,21 +185,27 @@ export const MIN_OPTIONS = 2;
export const MAX_SUB_OPTIONS = 6;
export const MIN_SUB_OPTIONS = 2;

const XS_TEXT_MAX_LENGTH = 25;
const SM_TEXT_MAX_LENGTH = 50;
const MD_TEXT_MAX_LENGTH = 1000;
// const LG_TEXT_MAX_LENGTH = 2000;
const XL_TEXT_MAX_LENGTH = 10000;

export const projectFormSchema: ProjectFormSchema = {
fields: (value): ProjectFormSchemaFields => {
let baseSchema: ProjectFormSchemaFields = {
projectTopic: {
required: true,
requiredValidation: requiredStringCondition,
validations: [getNoMoreThanNCharacterCondition(50)],
validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
},
projectType: {
required: true,
},
projectRegion: {
required: true,
requiredValidation: requiredStringCondition,
validations: [getNoMoreThanNCharacterCondition(50)],
validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
},
projectNumber: {
required: true,
Expand All @@ -222,12 +228,12 @@ export const projectFormSchema: ProjectFormSchema = {
lookFor: {
required: true,
requiredValidation: requiredStringCondition,
validations: [getNoMoreThanNCharacterCondition(25)],
validations: [getNoMoreThanNCharacterCondition(XS_TEXT_MAX_LENGTH)],
},
projectDetails: {
required: true,
requiredValidation: requiredStringCondition,
validations: [getNoMoreThanNCharacterCondition(10000)],
validations: [getNoMoreThanNCharacterCondition(XL_TEXT_MAX_LENGTH)],
},
tutorialId: {
required: true,
Expand Down Expand Up @@ -441,7 +447,7 @@ export const projectFormSchema: ProjectFormSchema = {
? {
required: true,
requiredValidation: requiredStringCondition,
validations: [getNoMoreThanNCharacterCondition(1000)],
validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
}
: {
forceValue: nullValue,
Expand Down Expand Up @@ -492,7 +498,7 @@ export const projectFormSchema: ProjectFormSchema = {
filterText: {
required: true,
requiredValidation: requiredStringCondition,
validations: [getNoMoreThanNCharacterCondition(1000)],
validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
},
};
}
Expand Down
4 changes: 4 additions & 0 deletions manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import {
} from '../../utils';
import styles from './styles.css';

// NOTE: the padding is selected wrt the size of the preview
const footprintGeojsonPadding = [140, 140];

interface Props {
className?: string;
geoJson: FootprintGeoJSON | undefined;
Expand Down Expand Up @@ -64,6 +67,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
previewStyle={previewStyles}
url={url}
geoJson={geoJson}
padding={footprintGeojsonPadding}
/>
<div className={styles.options}>
{customOptions?.map((option) => {
Expand Down
168 changes: 91 additions & 77 deletions manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export default function ScenarioPageInput(props: Props) {
lookFor,
} = props;

const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instructions');
const [activeSegmentInputFromState, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instructions');

const onFieldChange = useFormObject(
index,
Expand Down Expand Up @@ -170,6 +170,10 @@ export default function ScenarioPageInput(props: Props) {
[geoJsonFromProps, scenarioId],
);

const activeSegmentInput: ScenarioSegmentType['value'] = projectType && projectType !== PROJECT_TYPE_FOOTPRINT
? activeSegmentInputFromState
: 'instructions';

const previewPopUpData = value[activeSegmentInput];

return (
Expand Down Expand Up @@ -209,74 +213,82 @@ export default function ScenarioPageInput(props: Props) {
disabled={disabled}
/>
</div>
<Heading level={4}>
Hint
</Heading>
<div className={styles.scenarioForm}>
<div className={styles.scenarioFormContent}>
<TextInput
name={'title' as const}
value={value.hint?.title}
label="Title"
onChange={handleHintFieldChange}
error={hintError?.title}
disabled={disabled}
/>
<TextInput
name={'description' as const}
value={value.hint?.description}
label="Description"
onChange={handleHintFieldChange}
error={hintError?.description}
disabled={disabled}
/>
</div>
<SelectInput
name="icon"
label="Icon"
value={value.hint?.icon}
options={iconList}
keySelector={keySelector}
labelSelector={labelSelector}
onChange={handleHintFieldChange}
error={hintError?.icon}
disabled={disabled}
/>
</div>
<Heading level={4}>
Success
</Heading>
<div className={styles.scenarioForm}>
<div className={styles.scenarioFormContent}>
<TextInput
name={'title' as const}
value={value.success?.title}
label="Title"
onChange={handleSuccessFieldChange}
error={successError?.title}
disabled={disabled}
/>
<TextInput
name={'description' as const}
value={value.success?.description}
label="Description"
onChange={handleSuccessFieldChange}
error={successError?.description}
disabled={disabled}
/>
</div>
<SelectInput
name="icon"
label="Icon"
value={value.success?.icon}
options={iconList}
keySelector={keySelector}
labelSelector={labelSelector}
onChange={handleSuccessFieldChange}
error={successError?.icon}
disabled={disabled}
/>
</div>
{projectType && projectType !== PROJECT_TYPE_FOOTPRINT && (
<>
<Heading level={4}>
Hint
</Heading>
<div className={styles.scenarioForm}>
<div className={styles.scenarioFormContent}>
<TextInput
name={'title' as const}
value={value.hint?.title}
label="Title"
onChange={handleHintFieldChange}
error={hintError?.title}
disabled={disabled}
/>
<TextInput
name={'description' as const}
value={value.hint?.description}
label="Description"
onChange={handleHintFieldChange}
error={hintError?.description}
disabled={disabled}
/>
</div>
<SelectInput
name="icon"
label="Icon"
value={value.hint?.icon}
options={iconList}
keySelector={keySelector}
labelSelector={labelSelector}
onChange={handleHintFieldChange}
error={hintError?.icon}
disabled={disabled}
/>
</div>
</>
)}
{projectType && projectType !== PROJECT_TYPE_FOOTPRINT && (
<>
<Heading level={4}>
Success
</Heading>
<div className={styles.scenarioForm}>
<div className={styles.scenarioFormContent}>
<TextInput
name={'title' as const}
value={value.success?.title}
label="Title"
onChange={handleSuccessFieldChange}
error={successError?.title}
disabled={disabled}
/>
<TextInput
name={'description' as const}
value={value.success?.description}
label="Description"
onChange={handleSuccessFieldChange}
error={successError?.description}
disabled={disabled}
/>
</div>
<SelectInput
name="icon"
label="Icon"
value={value.success?.icon}
options={iconList}
keySelector={keySelector}
labelSelector={labelSelector}
onChange={handleSuccessFieldChange}
error={successError?.icon}
disabled={disabled}
/>
</div>
</>
)}
</div>
<div className={styles.scenarioPreview}>
{projectType === PROJECT_TYPE_CHANGE_DETECTION && (
Expand Down Expand Up @@ -306,14 +318,16 @@ export default function ScenarioPageInput(props: Props) {
lookFor={lookFor}
/>
)}
<SegmentInput
name={undefined}
value={activeSegmentInput}
options={previewOptions}
keySelector={valueSelector}
labelSelector={labelSelector}
onChange={setActiveInput}
/>
{(projectType && projectType !== PROJECT_TYPE_FOOTPRINT) && (
<SegmentInput
name={undefined}
value={activeSegmentInput}
options={previewOptions}
keySelector={valueSelector}
labelSelector={labelSelector}
onChange={setActiveInput}
/>
)}
</div>
</div>
);
Expand Down

0 comments on commit 713d9c1

Please sign in to comment.