Skip to content

Commit

Permalink
fix: disables all edit form buttons when in readOnly mode
Browse files Browse the repository at this point in the history
  • Loading branch information
collinlokken committed Sep 12, 2023
1 parent c72d62a commit 5cf41d9
Show file tree
Hide file tree
Showing 14 changed files with 192 additions and 103 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,28 @@
],
"readOnly": true
}
}
},
"uiRecipes": [
{
"name": "MyCustomList",
"type": "dmss://system/SIMOS/UiRecipe",
"description": "",
"plugin": "@development-framework/dm-core-plugins/list",
"dimensions": "*",
"config": {
"type": "PLUGINS:dm-core-plugins/list/ListPluginConfig",
"views": [],
"headers": [
"name",
"plateNumber"
],
"openInline": false,
"functionality": {
"type": "PLUGINS:dm-core-plugins/list/FunctionalityConfig",
"delete": true
},
"readOnly": true
}
}
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@
"showInline": false,
"uiRecipe": "defaultForm"
},
{
"name": "ceo",
"type": "PLUGINS:dm-core-plugins/form/fields/ObjectField",
"showInline": false,
"uiRecipe": "defaultForm"
},
{
"name": "trainee",
"type": "PLUGINS:dm-core-plugins/form/fields/ObjectField",
Expand All @@ -56,6 +62,12 @@
"name": "locations",
"type": "PLUGINS:dm-core-plugins/form/fields/ArrayField",
"showInline": true
},
{
"name": "customers",
"type": "PLUGINS:dm-core-plugins/form/fields/ArrayField",
"showInline": false,
"uiRecipe": "myCustomArrayRecipe"
}
],
"fields": [
Expand All @@ -68,8 +80,7 @@
"customers",
"isBankrupt"
],
"readOnly": true,
"editToggle": true
"readOnly": true
}
}
]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"initialUiRecipe": {
"name": "form",
"type": "CORE:UiRecipe",
"plugin": "@development-framework/dm-core-plugins/form"
"plugin": "@development-framework/dm-core-plugins/form",
"config": {
"type": "PLUGINS:dm-core-plugins/form/FormInput",
"readOnly": true
}
},
"uiRecipes": [
{
Expand All @@ -18,6 +22,27 @@
"type": "CORE:UiRecipe",
"plugin": "@development-framework/dm-core-plugins/form",
"category": "edit"
},
{
"name": "myCustomArrayRecipe",
"type": "dmss://system/SIMOS/UiRecipe",
"description": "",
"plugin": "@development-framework/dm-core-plugins/list",
"dimensions": "*",
"config": {
"type": "PLUGINS:dm-core-plugins/list/ListPluginConfig",
"views": [],
"headers": [
"name",
"plateNumber"
],
"openInline": false,
"functionality": {
"type": "PLUGINS:dm-core-plugins/list/FunctionalityConfig",
"delete": true
},
"readOnly": true
}
}
]
}
8 changes: 0 additions & 8 deletions packages/dm-core-plugins/blueprints/form/FormInput.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,6 @@
"optional": true,
"contained": true,
"default": false
},
{
"name": "editToggle",
"type": "dmss://system/SIMOS/BlueprintAttribute",
"attributeType": "boolean",
"optional": true,
"contained": true,
"default": false
}
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,13 @@
"dimensions": "*",
"default": [],
"optional": false
},
{
"name": "readOnly",
"type": "CORE:BlueprintAttribute",
"attributeType": "boolean",
"optional": true,
"default": false
}
]
}
10 changes: 1 addition & 9 deletions packages/dm-core-plugins/src/form/components/AttributeList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Stack, TAttribute, TBlueprint } from '@development-framework/dm-core'
import React, { useState } from 'react'
import { AttributeField } from '../fields/AttributeField'
import { TConfig } from '../types'
import { Button } from '@equinor/eds-core-react'

export const AttributeList = (props: {
namePath: string
Expand Down Expand Up @@ -49,12 +48,5 @@ export const AttributeList = (props: {
)
})

return (
<Stack spacing={1}>
{config?.editToggle && (
<Button onClick={toggleHandler}>{readOnly ? 'Edit' : 'View'}</Button>
)}
{attributeFields}
</Stack>
)
return <Stack spacing={1}>{attributeFields}</Stack>
}
16 changes: 9 additions & 7 deletions packages/dm-core-plugins/src/form/components/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,15 @@ export const Form = (props: TFormProps) => {
config={config}
blueprint={blueprint}
/>
<Button
type="submit"
data-testid="form-submit"
style={{ alignSelf: 'flex-start' }}
>
Submit
</Button>
{!config?.readOnly && (
<Button
type="submit"
data-testid="form-submit"
style={{ alignSelf: 'flex-start' }}
>
Submit
</Button>
)}
</Stack>
</form>
</RegistryProvider>
Expand Down
48 changes: 25 additions & 23 deletions packages/dm-core-plugins/src/form/fields/ArrayField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,32 +111,34 @@ export default function ArrayField(props: TArrayFieldProps) {
readOnly={readOnly}
/>
</Stack>
<Button
disabled={readOnly}
variant="outlined"
type="button"
onClick={() => remove(index)}
>
Remove
</Button>
{!readOnly && (
<Button
variant="outlined"
type="button"
onClick={() => remove(index)}
>
Remove
</Button>
)}
</Stack>
)
})}
<Button
disabled={readOnly}
variant="outlined"
data-testid={`add-${namePath}`}
onClick={() => {
if (isPrimitiveType(type)) {
const defaultValue = isPrimitive(type) ? ' ' : {}
append(defaultValue)
} else {
handleAddObject()
}
}}
>
Add
</Button>
{!readOnly && (
<Button
variant="outlined"
data-testid={`add-${namePath}`}
onClick={() => {
if (isPrimitiveType(type)) {
const defaultValue = isPrimitive(type) ? ' ' : {}
append(defaultValue)
} else {
handleAddObject()
}
}}
>
Add
</Button>
)}
</Stack>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export const AttributeField = (props: TAttributeFieldProps) => {
optional={attribute.optional ?? false}
uiAttribute={uiAttribute}
defaultValue={attribute.default}
readOnly={readOnly}
/>
)

Expand Down
45 changes: 34 additions & 11 deletions packages/dm-core-plugins/src/form/fields/ObjectField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,13 @@ import { OpenObjectButton } from '../components/OpenObjectButton'
import { useRegistryContext } from '../context/RegistryContext'
import { getWidget } from '../context/WidgetContext'
import { TContentProps, TObjectFieldProps, TUiRecipeForm } from '../types'
import * as readline from 'readline'

const SelectReference = (props: { type: string; namePath: string }) => {
const SelectReference = (props: {
type: string
namePath: string
disabled?: boolean
}) => {
const { setValue, watch } = useFormContext()
const dmssAPI = useDMSS()
const { idReference } = useRegistryContext()
Expand Down Expand Up @@ -78,8 +83,9 @@ const AddObject = (props: {
type: string
namePath: string
defaultValue: any
disabled?: boolean
}) => {
const { type, namePath, defaultValue } = props
const { type, namePath, defaultValue, disabled } = props
const { setValue } = useFormContext()
const dmssAPI = useDMSS()
const { idReference } = useRegistryContext()
Expand Down Expand Up @@ -118,14 +124,15 @@ const AddObject = (props: {
variant="outlined"
data-testid={`add-${namePath}`}
onClick={handleAdd}
disabled={disabled}
>
Add and save
</Button>
)
}

const RemoveObject = (props: { namePath: string }) => {
const { namePath } = props
const RemoveObject = (props: { namePath: string; disabled?: boolean }) => {
const { namePath, disabled } = props
const { setValue } = useFormContext()
const { idReference } = useRegistryContext()
const dmssAPI = useDMSS()
Expand All @@ -151,6 +158,7 @@ const RemoveObject = (props: { namePath: string }) => {
variant="outlined"
data-testid={`remove-${namePath}`}
onClick={onClick}
disabled={disabled}
>
Remove and save
</Button>
Expand All @@ -167,23 +175,25 @@ export const ContainedAttribute = (props: TContentProps): JSX.Element => {
uiRecipe,
blueprint,
defaultValue,
readOnly,
} = props
const { watch } = useFormContext()
const { idReference, onOpen } = useRegistryContext()
const value = watch(namePath)
const isDefined = value && Object.keys(value).length > 0

return (
<Stack spacing={0.25} alignItems="flex-start">
<Typography bold={true}>{displayLabel}</Typography>
{optional &&
!readOnly &&
(isDefined ? (
<RemoveObject namePath={namePath} />
<RemoveObject namePath={namePath} disabled={readOnly} />
) : (
<AddObject
namePath={namePath}
type={type}
defaultValue={defaultValue}
disabled={readOnly}
/>
))}
{isDefined &&
Expand Down Expand Up @@ -247,8 +257,15 @@ const Indent = styled.div`
`

export const UncontainedAttribute = (props: TContentProps): JSX.Element => {
const { type, namePath, displayLabel, uiAttribute, uiRecipe, optional } =
props
const {
type,
namePath,
displayLabel,
uiAttribute,
uiRecipe,
optional,
readOnly,
} = props
const { watch } = useFormContext()
const { idReference, onOpen } = useRegistryContext()
const value = watch(namePath)
Expand All @@ -263,8 +280,10 @@ export const UncontainedAttribute = (props: TContentProps): JSX.Element => {
<Typography bold={true}>{displayLabel}</Typography>
{address && <Typography>Address: {value.address}</Typography>}
<Stack direction="row" spacing={0.5}>
<SelectReference type={type} namePath={namePath} />
{optional && address && <RemoveObject namePath={namePath} />}
{!readOnly && <SelectReference type={type} namePath={namePath} />}
{optional && address && !readOnly && (
<RemoveObject namePath={namePath} />
)}
{address && onOpen && !uiAttribute?.showInline && (
<OpenObjectButton
viewId={namePath}
Expand All @@ -290,7 +309,8 @@ export const UncontainedAttribute = (props: TContentProps): JSX.Element => {
}

export const ObjectField = (props: TObjectFieldProps): JSX.Element => {
const { type, namePath, uiAttribute, displayLabel, defaultValue } = props
const { type, namePath, uiAttribute, displayLabel, defaultValue, readOnly } =
props
const { getValues } = useFormContext()

// Be able to override the object field
Expand All @@ -308,6 +328,7 @@ export const ObjectField = (props: TObjectFieldProps): JSX.Element => {
label={displayLabel}
type={type === 'object' && values ? values.type : type}
defaultValue={defaultValue}
readOnly={readOnly}
/>
)
}
Expand All @@ -321,6 +342,7 @@ export const ObjectTypeSelector = (props: TObjectFieldProps): JSX.Element => {
contained,
uiAttribute,
defaultValue,
readOnly,
} = props

const { blueprint, uiRecipes, isLoading, error } = useBlueprint(type)
Expand All @@ -345,6 +367,7 @@ export const ObjectTypeSelector = (props: TObjectFieldProps): JSX.Element => {
uiRecipe={uiRecipe}
uiAttribute={uiAttribute}
defaultValue={defaultValue}
readOnly={readOnly}
/>
)
}
1 change: 0 additions & 1 deletion packages/dm-core-plugins/src/form/types.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ export type TConfig = {
attributes: TAttributeConfig[]
fields: string[]
readOnly?: boolean
editToggle?: boolean
}

export type TUiRecipeForm = Omit<TUiRecipe, 'config'> & { config: TConfig }
Expand Down
Loading

0 comments on commit 5cf41d9

Please sign in to comment.