Skip to content

Commit

Permalink
Reorganise mission definition page items
Browse files Browse the repository at this point in the history
  • Loading branch information
@andchiind
andchiind committed Oct 17, 2023
1 parent e173613 commit 46df9a1
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 75 deletions.
191 changes: 117 additions & 74 deletions frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import { MissionDefinitionUpdateForm } from 'models/MissionDefinitionUpdateForm'
import { config } from 'config'
import { Icons } from 'utils/icons'

const boxBackgroundColour = tokens.colors.ui.background__light.hex
const boxBorderColour = tokens.colors.interactive.primary__resting.hex

const StyledFormCard = styled(Card)`
display: flex;
justify-content: center;
Expand All @@ -28,14 +31,27 @@ const StyledButtonSection = styled.div`
const StyledFormContainer = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
align: left;
align-items: flex-start;
margin: auto;
gap: 10px;
align-content: flex-start;
width: 50%;
gap: 10px 10px;
`
const StyledFormItem = styled.div`
flex: 1 0 30%;
width: 200px;
height: auto;
padding: 5px;
margin: auto;
word-break: break-word;
hyphens: auto;
min-height: 60px;
border-style: solid;
border-width: 1px;
border-radius: 5px;
border-color: ${boxBorderColour};
background-color: ${boxBackgroundColour};
`
const StyledDialog = styled(Dialog)`
display: flex;
Expand All @@ -51,17 +67,29 @@ const StyledMissionDefinitionPage = styled.div`
gap: 1rem;
margin: 2rem;
`
const StyledButton = styled(Button)`
width: 150px;
`
const StyledInspectionFrequencyDiv = styled.div`
> * {
padding: 10px;
}
`

function KeyValuePairDisplay({ left, right, onEdit }: { left: string; right: any, onEdit?: () => void }) {
function KeyValuePairDisplay({ left, right, onEdit }: { left: string; right: any; onEdit?: () => void }) {
return (
<>
<StyledFormItem>
<Typography
variant="body_long_bold"
group="paragraph"
color={tokens.colors.text.static_icons__secondary.rgba}
>
{left}
{onEdit && <Icon name={Icons.Edit} size={16} onClick={onEdit}></Icon>}
{onEdit && (
<Button style={{ padding: '5px' }} variant="ghost" onClick={onEdit}>
<Icon name={Icons.Edit} size={16} />
</Button>
)}
</Typography>
<Typography
variant="body_long_italic"
Expand All @@ -70,7 +98,7 @@ function KeyValuePairDisplay({ left, right, onEdit }: { left: string; right: any
>
{right}
</Typography>
</>
</StyledFormItem>
)
}

Expand All @@ -83,7 +111,7 @@ function MissionDefinitionPageBody({ missionDefinition, updateMissionDefinition
const { TranslateText } = useLanguageContext()
let navigate = useNavigate()
const [isEditDialogOpen, setIsEditDialogOpen] = useState<boolean>(false)
const [selectedField, setSelectedField] = useState<string>("")
const [selectedField, setSelectedField] = useState<string>('')

const displayInspectionFrequency = (inspectionFrequency: string) => {
if (inspectionFrequency === null) return TranslateText('No inspection frequency set')
Expand All @@ -109,37 +137,49 @@ function MissionDefinitionPageBody({ missionDefinition, updateMissionDefinition

return (
<>
<KeyValuePairDisplay left={TranslateText('Name')} right={missionDefinition.name} onEdit={onEdit('name')} />
<KeyValuePairDisplay left={TranslateText('Comment')} right={missionDefinition.comment} onEdit={onEdit('comment')} />
<KeyValuePairDisplay
left={TranslateText('Inspection frequency')}
right={displayInspectionFrequency(missionDefinition.inspectionFrequency)}
onEdit={onEdit('inspectionFrequency')}
/>
<KeyValuePairDisplay left={TranslateText('Area')} right={missionDefinition.area.areaName} />
<KeyValuePairDisplay left={TranslateText('Deck')} right={missionDefinition.area.deckName} />
<KeyValuePairDisplay left={TranslateText('Plant')} right={missionDefinition.area.plantCode} />
<KeyValuePairDisplay left={TranslateText('Installation')} right={missionDefinition.area.installationCode} />
<KeyValuePairDisplay
left={TranslateText('Mission source')}
right={TranslateText(missionDefinition.sourceType)}
/>
<Button
<StyledFormContainer>
<KeyValuePairDisplay
left={TranslateText('Name')}
right={missionDefinition.name}
onEdit={onEdit('name')}
/>
<KeyValuePairDisplay left={TranslateText('Area')} right={missionDefinition.area.areaName} />
<KeyValuePairDisplay left={TranslateText('Deck')} right={missionDefinition.area.deckName} />
<KeyValuePairDisplay left={TranslateText('Plant')} right={missionDefinition.area.plantCode} />
<KeyValuePairDisplay
left={TranslateText('Installation')}
right={missionDefinition.area.installationCode}
/>
<KeyValuePairDisplay
left={TranslateText('Mission source')}
right={TranslateText(missionDefinition.sourceType)}
/>
<KeyValuePairDisplay
left={TranslateText('Comment')}
right={missionDefinition.comment}
onEdit={onEdit('comment')}
/>
<KeyValuePairDisplay
left={TranslateText('Inspection frequency')}
right={displayInspectionFrequency(missionDefinition.inspectionFrequency)}
onEdit={onEdit('inspectionFrequency')}
/>
</StyledFormContainer>
<StyledButton
disabled={missionDefinition.lastRun === null}
onClick={() => navigate(`${config.FRONTEND_BASE_ROUTE}/mission/${missionDefinition.lastRun.id}`)}
>
{TranslateText('View last run') +
(missionDefinition.lastRun ? '' : ': ' + TranslateText('Not yet performed'))}
</Button>
{
isEditDialogOpen &&
</StyledButton>
{isEditDialogOpen && (
<MissionDefinitionEditDialog
fieldName={selectedField}
missionDefinition={missionDefinition}
closeEditDialog={() => setIsEditDialogOpen(false)}
updateMissionDefinition={updateMissionDefinition}
/>
}
)}
</>
)
}
Expand All @@ -151,15 +191,20 @@ interface IMissionDefinitionEditDialogProps {
updateMissionDefinition: (missionDefinition: CondensedMissionDefinition) => void
}

function MissionDefinitionEditDialog({ missionDefinition, updateMissionDefinition, fieldName, closeEditDialog }: IMissionDefinitionEditDialogProps) {
function MissionDefinitionEditDialog({
missionDefinition,
updateMissionDefinition,
fieldName,
closeEditDialog,
}: IMissionDefinitionEditDialogProps) {
const defaultMissionDefinitionForm: MissionDefinitionUpdateForm = {
comment: missionDefinition.comment,
inspectionFrequency: missionDefinition.inspectionFrequency,
name: missionDefinition.name,
isDeprecated: false,
}
const { TranslateText } = useLanguageContext()

const [form, setForm] = useState<MissionDefinitionUpdateForm>(defaultMissionDefinitionForm)

const updateInspectionFrequencyFormDays = (newDay: string) => {
Expand Down Expand Up @@ -205,66 +250,64 @@ function MissionDefinitionEditDialog({ missionDefinition, updateMissionDefinitio

const getFormItem = () => {
switch (fieldName) {
case "inspectionFrequency":
return <StyledFormItem>
<div>
<TextField
id="compact-textfield"
label={TranslateText('Days between inspections')}
unit={TranslateText('days')}
value={inspectionFrequencyDays}
onChange={(changes: ChangeEvent<HTMLInputElement>) =>
updateInspectionFrequencyFormDays(changes.target.value)
}
/>
<TextField
id="compact-textfield"
label={TranslateText('Hours between inspections')}
unit={TranslateText('hours')}
value={inspectionFrequencyHours}
onChange={(changes: ChangeEvent<HTMLInputElement>) =>
updateInspectionFrequencyFormHours(changes.target.value)
}
/>
</div>
</StyledFormItem>
case "comment":
return <StyledFormItem>
case 'inspectionFrequency':
return (
<StyledInspectionFrequencyDiv>
<TextField
id="commentEdit"
multiline
rows={2}
label={TranslateText('Comment')}
value={form.comment ?? ''}
id="compact-textfield"
label={TranslateText('Days between inspections')}
unit={TranslateText('days')}
value={inspectionFrequencyDays}
onChange={(changes: ChangeEvent<HTMLInputElement>) =>
setForm({ ...form, comment: changes.target.value })
updateInspectionFrequencyFormDays(changes.target.value)
}
/>
</StyledFormItem>
case "name":
return <StyledFormItem>
<TextField
id="nameEdit"
value={form.name ?? ''}
label={TranslateText("Name")}
id="compact-textfield"
label={TranslateText('Hours between inspections')}
unit={TranslateText('hours')}
value={inspectionFrequencyHours}
onChange={(changes: ChangeEvent<HTMLInputElement>) =>
setForm({ ...form, name: changes.target.value })
updateInspectionFrequencyFormHours(changes.target.value)
}
/>
</StyledFormItem>
</StyledInspectionFrequencyDiv>
)
case 'comment':
return (
<TextField
id="commentEdit"
multiline
rows={2}
label={TranslateText('Comment')}
value={form.comment ?? ''}
onChange={(changes: ChangeEvent<HTMLInputElement>) =>
setForm({ ...form, comment: changes.target.value })
}
/>
)
case 'name':
return (
<TextField
id="nameEdit"
value={form.name ?? ''}
label={TranslateText('Name')}
onChange={(changes: ChangeEvent<HTMLInputElement>) =>
setForm({ ...form, name: changes.target.value })
}
/>
)
default:
console.error("Invalid field name: ", fieldName)
break;
console.error('Invalid field name: ', fieldName)
break
}
}

return (
<StyledDialog open={true}>
<StyledFormCard>
<Typography variant="h2">{TranslateText('Edit mission definition')}</Typography>
<StyledFormContainer>
{getFormItem()}
</StyledFormContainer>
{getFormItem()}
<StyledButtonSection>
<Button onClick={handleSubmit} variant="outlined" color="primary">
{' '}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/utils/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {
navigation,
settings,
platform,
edit
edit,
} from '@equinor/eds-icons'

Icon.add({
Expand Down

0 comments on commit 46df9a1

Please sign in to comment.