Skip to content

Commit

Permalink
style: Add styling to set area coordinates
Browse files Browse the repository at this point in the history
  • Loading branch information
@mheggelund
mheggelund committed Oct 23, 2023
1 parent f64c447 commit 2571da3
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 44 deletions.
41 changes: 41 additions & 0 deletions src/components/AreaCoordinates/AreaCoordinates.styled.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Typography } from '@equinor/eds-core-react';
import styled from 'styled-components';
import { spacings } from '../../tokens/spacings';

export const SideSheet = styled.div`
display: flex;
flex-direction: column;
row-gap: ${spacings.MEDIUM};
`;
export const Form = styled.form`
display: flex;
flex-direction: column;
row-gap: ${spacings.LARGE};
`;

export const CoordinateGroup = styled.div`
display: flex;
flex-direction: column;
> .autocomplete-error {
> div {
> div {
border: solid 2px red;
}
}
}
> .input-error {
> div {
> input {
border: solid 2px red;
}
}
}
`;

export const ErrorMessage = styled(Typography)`
color: red;
`;
103 changes: 59 additions & 44 deletions src/components/AreaCoordinates/AreaCoordinates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
import { useQuery } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { AnalogueModelsService } from '../../api/generated/services/AnalogueModelsService';
import { ErrorType } from '../../features/AddModel/AddModelDialog/AddModelDialog';
import optionTypes from '../../features/Compute/ComputeVariogram/CaseCard/CaseCard';
import * as Styled from './AreaCoordinates.styled';

interface CoordinateType {
top: {
Expand All @@ -23,6 +23,12 @@ interface CoordinateType {
Y?: string;
};
}

type AreaErrorType = {
area?: string;
coordinateTop?: string;
coordinateBottom?: string;
};
export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
const [selectedArea, setSelectedArea] = useState<optionTypes>();
const [areaCoordinats, setAreaCoordinats] = useState<CoordinateType>({
Expand All @@ -35,7 +41,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
Y: undefined,
},
});
const [errors, setErrors] = useState({});
const [errors, setErrors] = useState<AreaErrorType>({});
const [submitting, setSubmitting] = useState(false);

const { data, isLoading } = useQuery({
Expand All @@ -53,9 +59,9 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
selectedArea?: optionTypes,
areaCoordinats?: CoordinateType,
) => {
const errors: ErrorType = {};
const errors: AreaErrorType = {};
if (selectedArea === undefined) {
errors.field = 'Area to define coordinates for not selected';
errors.area = 'Area to define coordinates for not selected';
}

if (
Expand All @@ -64,7 +70,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
areaCoordinats?.top.X.length < 1 ||
areaCoordinats?.top.Y.length < 1
) {
errors.formation = 'Top coordinates not selected';
errors.coordinateTop = 'Top coordinates not selected';
}

if (
Expand All @@ -73,7 +79,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
areaCoordinats?.bottom.X.length < 1 ||
areaCoordinats?.bottom.Y.length < 1
) {
errors.file = 'Bottom coordinates not selected';
errors.coordinateBottom = 'Bottom coordinates not selected';
}
console.log(errors);

Expand All @@ -100,87 +106,96 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
if (isLoading) <p>Loading.....</p>;

return (
<>
<Styled.SideSheet>
{data?.success && <Typography variant="h2">{data.data.name}</Typography>}
<Typography variant="h3">Set coordinates for model areas</Typography>
<form>
<Autocomplete
label={'Select area'}
options={modelAreas}
optionLabel={(option) => option.name}
onOptionsChange={(changes: AutocompleteChanges<optionTypes>) =>
setSelectedArea(changes.selectedItems[0])
}
></Autocomplete>
<Typography variant="h3">Set coordinates: </Typography>
<Styled.Form>
<Styled.CoordinateGroup>
<Typography variant="h6">Area to define</Typography>

<div>
<Typography variant="h6">Bottom Right Corner </Typography>
<div>
<Autocomplete
className={errors.area && 'autocomplete-error'}
label={'Select area'}
options={modelAreas}
optionLabel={(option) => option.name}
onOptionsChange={(changes: AutocompleteChanges<optionTypes>) =>
setSelectedArea(changes.selectedItems[0])
}
></Autocomplete>
</Styled.CoordinateGroup>

<Styled.CoordinateGroup>
<Typography variant="h6">Top Left Corner</Typography>
<div className={errors.coordinateTop && 'input-error'}>
<Label label="X-coordinate" />
<Input
type="string"
value={areaCoordinats.bottom.X}
value={areaCoordinats.top.X}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setAreaCoordinats({
...areaCoordinats,
bottom: {
...areaCoordinats.bottom,
X: e.currentTarget.value,
},
top: { ...areaCoordinats.top, X: e.currentTarget.value },
})
}
/>
</div>
<div>
<div className={errors.coordinateTop && 'input-error'}>
<Label label="Y-coordinate" />
<Input
type="string"
value={areaCoordinats.bottom.Y}
value={areaCoordinats.top.Y}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setAreaCoordinats({
...areaCoordinats,
bottom: {
...areaCoordinats.bottom,
Y: e.currentTarget.value,
},
top: { ...areaCoordinats.top, Y: e.currentTarget.value },
})
}
/>
</div>
</div>

<div>
<Typography variant="h6">Top Left Corner</Typography>
<div>
</Styled.CoordinateGroup>
<Styled.CoordinateGroup>
<Typography variant="h6">Bottom Right Corner </Typography>
<div className={errors.coordinateBottom && 'input-error'}>
<Label label="X-coordinate" />
<Input
type="string"
value={areaCoordinats.top.X}
value={areaCoordinats.bottom.X}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setAreaCoordinats({
...areaCoordinats,
top: { ...areaCoordinats.top, X: e.currentTarget.value },
bottom: {
...areaCoordinats.bottom,
X: e.currentTarget.value,
},
})
}
/>
</div>
<div>
<div className={errors.coordinateBottom && 'input-error'}>
<Label label="Y-coordinate" />
<Input
type="string"
value={areaCoordinats.top.Y}
value={areaCoordinats.bottom.Y}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setAreaCoordinats({
...areaCoordinats,
top: { ...areaCoordinats.top, Y: e.currentTarget.value },
bottom: {
...areaCoordinats.bottom,
Y: e.currentTarget.value,
},
})
}
/>
</div>
</div>
</Styled.CoordinateGroup>
{(errors.area || errors.coordinateBottom || errors.coordinateTop) && (
<Styled.ErrorMessage variant="h4">
Highlighted fields required
</Styled.ErrorMessage>
)}
<Button onClick={saveChange}>Save</Button>
</form>
</>
</Styled.Form>
</Styled.SideSheet>
);
};

Expand Down

0 comments on commit 2571da3

Please sign in to comment.