Skip to content

Commit

Permalink
fixed bug that did not update the format if you did not re-set it in …
Browse files Browse the repository at this point in the history 
…the model. Added $each in the formats.
  • Loading branch information
@juliarobles
juliarobles committed Aug 1, 2024
1 parent 6034997 commit 33c80bb
Show file tree
Hide file tree
Showing 16 changed files with 362 additions and 316 deletions.
12 changes: 11 additions & 1 deletion .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
{
"extends": "./.config/.eslintrc"
"extends": "./.config/.eslintrc",
"rules": {
"react/jsx-key": "off",
"react/prop-types": "off",
"react-hooks/exhaustive-deps": "off",
"react-hooks/rules-of-hooks": "off",
"curly": "off",
"react/no-children-prop": "off",
"@typescript-eslint/naming-convention": "off",
"no-restricted-imports": "off"
}
}
26 changes: 13 additions & 13 deletions src/components/editors/formatEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,47 @@ import { FormatDefault } from 'utils/default';
import { css } from '@emotion/css';


interface Props extends StandardEditorProps<IFormat[]> {}
interface Props extends StandardEditorProps<IFormat[]> { }

export const FormatEditor: React.FC<Props> = ({ value: elements, onChange, context }) => {

if (!elements || !elements.length) {
elements = [];
}

const addElement = (newFormat : IFormat) => {
const addElement = (newFormat: IFormat) => {
const updated = [...elements, newFormat]
onChange(updated)
}

const updateElement = (idx : number, formatUpdated : IFormat) => {
const updateElement = (idx: number, formatUpdated: IFormat) => {
const updated = [...elements]
updated[idx] = formatUpdated
onChange(updated)
}

const deleteElement = (idx:number) => {
const deleteElement = (idx: number) => {
const updated = [...elements]
updated.splice(idx, 1)
onChange(updated)
}

const listFormats = elements.map((element:IFormat, idx:number) => {
const listFormats = elements.map((element: IFormat, idx: number) => {
return <div>
<ControlledCollapse label={element.id} collapsible>
<FormatForm format={element}
mode={Mode.EDIT}
updateFunction={(m:IFormat) => updateElement(idx, m)}
<FormatForm format={element}
mode={Mode.EDIT}
updateFunction={(m: IFormat) => updateElement(idx, m)}
deleteFunction={() => deleteElement(idx)}
context={context}/>
context={context} />
</ControlledCollapse>
</div>
})

return (<div style={{ marginRight: '15px'}}>
return (<div style={{ marginRight: '15px' }}>
{listFormats}
<ControlledCollapse label="Add new format" collapsible isOpen={false} className={css({color: useTheme2().colors.info.main})}>
<FormatForm format={FormatDefault} updateFunction={addElement} mode={Mode.CREATE} context={context}/>
<ControlledCollapse label="Add new format" collapsible isOpen={false} className={css({ color: useTheme2().colors.info.main })}>
<FormatForm format={FormatDefault} updateFunction={addElement} mode={Mode.CREATE} context={context} />
</ControlledCollapse>
</div>)
}
}
87 changes: 44 additions & 43 deletions src/components/editors/formatForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import { FormatDefault } from 'utils/default';
import { Mode } from 'utils/constants';

interface Props {
format : IFormat,
updateFunction : any,
deleteFunction ?: any,
mode : Mode,
context : StandardEditorContext<any, any>
format: IFormat,
updateFunction: any,
deleteFunction?: any,
mode: Mode,
context: StandardEditorContext<any, any>
}

export const FormatForm: React.FC<Props> = ({ format, updateFunction, deleteFunction, mode, context }) => {
export const FormatForm: React.FC<Props> = ({ format, updateFunction, deleteFunction, mode, context }) => {

const [currentFormat, setCurrentFormat] = useState<IFormat>(FormatDefault)
const [codeInput, setCodeInput] = useState<string>("")
Expand All @@ -29,20 +29,20 @@ export const FormatForm: React.FC<Props> = ({ format, updateFunction, deleteFun
const handleOnChangeFormat = (event: ChangeEvent<HTMLInputElement>) => {
setCurrentFormat({
...currentFormat,
[event.currentTarget.name] : event.target.value
[event.currentTarget.name]: event.target.value
})
}

const handleOnSubmitAddFormat = () => {
const newFormat = {
...currentFormat,
output : codeOutput,
input : codeInput
output: codeOutput,
input: codeInput
}
updateFunction(newFormat)
if(mode == Mode.EDIT) {
if (mode === Mode.EDIT) {
setDisabled(true)
} else {
} else {
setCurrentFormat(FormatDefault)
setCodeInput("")
setCodeOutput("")
Expand All @@ -61,11 +61,11 @@ export const FormatForm: React.FC<Props> = ({ format, updateFunction, deleteFun
}

const handleOnConfirmDeleteFormat = () => {
if(deleteFunction) deleteFunction()
if (deleteFunction) deleteFunction()
}

useEffect(() => {
if(mode == Mode.EDIT) setDisabled(true)
if (mode === Mode.EDIT) setDisabled(true)
}, [mode])

useEffect(() => {
Expand All @@ -76,42 +76,43 @@ export const FormatForm: React.FC<Props> = ({ format, updateFunction, deleteFun
}, [currentFormat])

const buttonEdit = () => {
if(mode == Mode.CREATE) {
if (mode === Mode.CREATE) {
return <div></div>
} else {
return (
<div style={{ marginBottom: '15px', marginRight: '10px'}}>
<HorizontalGroup justify='flex-end'>
<ConfirmButton
closeOnConfirm
confirmText='Delete'
disabled={!disabled}
onConfirm={handleOnConfirmDeleteFormat}
confirmVariant='destructive'
>
<Button variant='destructive' icon='trash-alt' disabled={!disabled}/>
</ConfirmButton>
<Button variant='primary' icon='edit' disabled={!disabled} onClick={handleOnClickEdit}>Edit</Button>
</HorizontalGroup>
</div>)
<div style={{ marginBottom: '15px', marginRight: '10px' }}>
<HorizontalGroup justify='flex-end'>
<ConfirmButton
closeOnConfirm
confirmText='Delete'
disabled={!disabled}
onConfirm={handleOnConfirmDeleteFormat}
confirmVariant='destructive'
>
<Button variant='destructive' icon='trash-alt' disabled={!disabled} />
</ConfirmButton>
<Button variant='primary' icon='edit' disabled={!disabled} onClick={handleOnClickEdit}>Edit</Button>
</HorizontalGroup>
</div>)
}
}

return <div>
{buttonEdit()}
<Form id="formatForm" onSubmit={handleOnSubmitAddFormat} maxWidth="none">{({register, errors, control}:FormAPI<any>) => {

<Form id="formatForm" onSubmit={handleOnSubmitAddFormat} maxWidth="none">{({ register, errors, control }: FormAPI<any>) => {
return (
<div>
<InlineField label="ID" labelWidth={10} required disabled={disabled}>
<Input {...register("id", { required: true })} value={currentFormat.id} disabled={disabled} onChange={handleOnChangeFormat} required/>
</InlineField>
</div>
)}}
<div>
<InlineField label="ID" labelWidth={10} required disabled={disabled}>
<Input {...register("id", { required: true })} value={currentFormat.id} disabled={disabled} onChange={handleOnChangeFormat} required />
</InlineField>
</div>
)
}}
</Form>
<InlineField label={"Input"} labelWidth={10} grow >
<div style={{ width: '100%'}}>
<CodeEditor
<div style={{ width: '100%' }}>
<CodeEditor
language='JSON'
value={codeInput}
height={200}
Expand All @@ -126,8 +127,8 @@ export const FormatForm: React.FC<Props> = ({ format, updateFunction, deleteFun
</div>
</InlineField>
<InlineField label={"Output"} labelWidth={10} grow >
<div style={{ width: '100%'}}>
<CodeEditor
<div style={{ width: '100%' }}>
<CodeEditor
language='JSON'
value={codeOutput}
height={200}
Expand All @@ -142,8 +143,8 @@ export const FormatForm: React.FC<Props> = ({ format, updateFunction, deleteFun
</div>
</InlineField>
<HorizontalGroup justify='flex-end'>
<Button type="button" hidden={(mode==Mode.EDIT) ? disabled : true} variant='primary' disabled={disabled} fill="text" onClick={handleOnClickCancel}>Cancel</Button>
<Button type='submit' form='formatForm' hidden={disabled} variant='primary' disabled={disabled} icon={(mode==Mode.EDIT) ? 'save' : 'plus'}>{mode.valueOf()} format</Button>
<Button type="button" hidden={(mode === Mode.EDIT) ? disabled : true} variant='primary' disabled={disabled} fill="text" onClick={handleOnClickCancel}>Cancel</Button>
<Button type='submit' form='formatForm' hidden={disabled} variant='primary' disabled={disabled} icon={(mode === Mode.EDIT) ? 'save' : 'plus'}>{mode.valueOf()} format</Button>
</HorizontalGroup>
</div>
}
}
26 changes: 13 additions & 13 deletions src/components/editors/modelEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Mode } from 'utils/constants';
import { css } from '@emotion/css';


interface Props extends StandardEditorProps<IModel[]> {}
interface Props extends StandardEditorProps<IModel[]> { }

export const ModelEditor: React.FC<Props> = ({ value: elements, onChange, context }) => {

Expand All @@ -19,39 +19,39 @@ export const ModelEditor: React.FC<Props> = ({ value: elements, onChange, contex
elements = [];
}

const addElement = (newModel : IModel) => {
const addElement = (newModel: IModel) => {
const updated = [...elements, newModel]
onChange(updated)
}

const updateElement = (idx : number, modelUpdated : IModel) => {
const updateElement = (idx: number, modelUpdated: IModel) => {
const updated = [...elements]
updated[idx] = modelUpdated
onChange(updated)
}

const deleteElement = (idx:number) => {
const deleteElement = (idx: number) => {
const updated = [...elements]
updated.splice(idx, 1)
onChange(updated)
}

const listModels = elements.map((element:IModel, idx:number) => {
const listModels = elements.map((element: IModel, idx: number) => {
return <div>
<ControlledCollapse label={element.id} collapsible>
<ModelForm model={element}
mode={Mode.EDIT}
updateFunction={(m:IModel) => updateElement(idx, m)}
<ModelForm model={element}
mode={Mode.EDIT}
updateFunction={(m: IModel) => updateElement(idx, m)}
deleteFunction={() => deleteElement(idx)}
context={context}/>
context={context} />
</ControlledCollapse>
</div>
})

return (<div style={{ marginRight: '15px'}}>
return (<div style={{ marginRight: '15px' }}>
{listModels}
<ControlledCollapse label={"Add new model"} collapsible isOpen={false} className={css({color: useTheme2().colors.info.main})}>
<ModelForm model={ModelDefault} updateFunction={addElement} mode={Mode.CREATE} context={context}/>
<ControlledCollapse label={"Add new model"} collapsible isOpen={false} className={css({ color: useTheme2().colors.info.main })}>
<ModelForm model={ModelDefault} updateFunction={addElement} mode={Mode.CREATE} context={context} />
</ControlledCollapse>
</div>)
}
}
Loading

0 comments on commit 33c80bb

Please sign in to comment.