-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Change to dialog for edit name and description in modle view. (#…
…301)
- Loading branch information
1 parent
016ab2b
commit b59be59
Showing
6 changed files
with
143 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { Dialog } from '@equinor/eds-core-react'; | ||
| import styled from 'styled-components'; | ||
| import { spacings } from '../../../tokens/spacings'; | ||
|
|
||
| export const DialogWrapper = styled(Dialog)` | ||
| min-width: 300px; | ||
| `; | ||
|
|
||
| export const Buttons = styled(Dialog.Actions)` | ||
| display: flex; | ||
| flex-direction: row; | ||
| column-gap: ${spacings.SMALL}; | ||
| `; |
106 changes: 106 additions & 0 deletions
106
src/features/ModelView/EditNameDescription/EditNameDescription.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| /* eslint-disable max-lines-per-function */ | ||
| import { Button, Dialog, Typography } from '@equinor/eds-core-react'; | ||
| import _ from 'lodash'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { AnalogueModelDetail } from '../../../api/generated'; | ||
| import { ErrorBanner } from '../../../components/ErrorBanner/ErrorBanner'; | ||
| import { validateValues } from '../../HandleModel/HandleModelComponent/HandleModelComponent.hooks'; | ||
| import * as Styled2 from '../../HandleModel/HandleModelComponent/HandleModelComponent.styled'; | ||
| import { ModelMetadata } from '../../HandleModel/ModelMetadata/ModelMetadata'; | ||
| import * as Styled from './EditNameDescription.styled'; | ||
| export const EditNameDescription = ({ | ||
| edit, | ||
| isEdit, | ||
| defaultMetadata, | ||
| closeDialog, | ||
| }: { | ||
| edit: (metadata: AnalogueModelDetail) => Promise<void>; | ||
| isEdit: boolean; | ||
| defaultMetadata: AnalogueModelDetail; | ||
| closeDialog: () => void; | ||
| }) => { | ||
| const [errors, setErrors] = useState({}); | ||
| const [metadata, setMetadata] = | ||
| useState<AnalogueModelDetail>(defaultMetadata); | ||
| const [submitting, setSubmitting] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const cleanupStates = () => { | ||
| if (!isEdit) setMetadata(defaultMetadata); | ||
| setSubmitting(false); | ||
| }; | ||
|
|
||
| const finishSubmit = () => { | ||
| if (isEdit && edit) { | ||
| edit(metadata); | ||
| } | ||
| cleanupStates(); | ||
| }; | ||
|
|
||
| if (Object.keys(errors).length === 0 && submitting) { | ||
| finishSubmit(); | ||
| } | ||
| }, [defaultMetadata, edit, errors, isEdit, metadata, submitting]); | ||
|
|
||
| const getErroMessageList = () => { | ||
| if (_.isEmpty(errors)) return; | ||
|
|
||
| const errorList: string[] = []; | ||
|
|
||
| Object.keys(errors).forEach(function (key) { | ||
| // TODO: Fix the TS error for errors[key] | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| const message = errors[key]; | ||
| errorList.push(message); | ||
| }); | ||
| return errorList; | ||
| }; | ||
| const ErrorList = getErroMessageList(); | ||
|
|
||
| const handleSubmit = () => { | ||
| setErrors(validateValues(metadata, undefined, isEdit)); | ||
| setSubmitting(true); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setMetadata(defaultMetadata); | ||
| if (closeDialog) closeDialog(); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Styled.DialogWrapper open={isEdit ? isEdit : false}> | ||
| <Dialog.CustomContent> | ||
| <Typography variant="body_short">Edit name description</Typography> | ||
| {isEdit && ( | ||
| <> | ||
| <ModelMetadata | ||
| errors={errors} | ||
| metadata={metadata} | ||
| setMetadata={setMetadata} | ||
| /> | ||
| {!_.isEmpty(errors) && | ||
| ErrorList !== undefined && | ||
| ErrorList.map((e, i) => { | ||
| return ( | ||
| <Styled2.ErrorDiv key={i}> | ||
| <ErrorBanner text={e} /> | ||
| </Styled2.ErrorDiv> | ||
| ); | ||
| })} | ||
| </> | ||
| )} | ||
| </Dialog.CustomContent> | ||
| <Styled.Buttons> | ||
| <Button variant="outlined" onClick={handleSubmit}> | ||
| Save | ||
| </Button> | ||
| <Button color={'danger'} variant="outlined" onClick={handleClose}> | ||
| Cancel | ||
| </Button> | ||
| </Styled.Buttons> | ||
| </Styled.DialogWrapper> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters