EditForm içerisine Script ve Options komponentleri
This commit is contained in:
Sedat Öztürk
parent
f5b32d5a6b
commit
300bc5ae88
4 changed files with 2656 additions and 18 deletions
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.tab-nav-underline {
|
||||
@apply py-3 px-5 border-b-2 border-transparent;
|
||||
@apply py-2 px-4 border-b-2 border-transparent;
|
||||
}
|
||||
|
||||
.tab-nav-pill {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -17,7 +17,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
|
|||
import { Field, FieldArray, FieldProps, Form, Formik } from 'formik'
|
||||
import groupBy from 'lodash/groupBy'
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
|
||||
import { FaCalendarPlus, FaCalendarMinus, FaTag } from 'react-icons/fa'
|
||||
import { FaBolt, FaCalendarMinus, FaCalendarPlus, FaSlidersH, FaTag } from 'react-icons/fa'
|
||||
import { number, object, string } from 'yup'
|
||||
import {
|
||||
columnEditorTypeListOptions,
|
||||
|
|
@ -35,6 +35,8 @@ import {
|
|||
putListFormJsonRow,
|
||||
} from '@/services/admin/list-form.service'
|
||||
import { EditingFormItemDto, PlatformEditorTypes } from '@/proxy/form/models'
|
||||
import EditorOptionsBuilderDialog from './EditorOptionsBuilderDialog'
|
||||
import EditorScriptBuilderDialog from './EditorScriptBuilderDialog'
|
||||
|
||||
const schema = object().shape({
|
||||
itemType: string().required(),
|
||||
|
|
@ -76,6 +78,8 @@ function JsonRowOpDialogEditForm({
|
|||
|
||||
const [fieldList, setFieldList] = useState<SelectBoxOption[]>([])
|
||||
const [isOpenOptionsDialog, setIsOpenOptionsDialog] = useState<Record<number, boolean>>({})
|
||||
const [optionsBuilderIndex, setOptionsBuilderIndex] = useState<number | null>(null)
|
||||
const [scriptBuilderIndex, setScriptBuilderIndex] = useState<number | null>(null)
|
||||
const [isHelperOpen, setIsHelperOpen] = useState(false)
|
||||
|
||||
const getFields = async () => {
|
||||
|
|
@ -731,22 +735,44 @@ function JsonRowOpDialogEditForm({
|
|||
)}
|
||||
</div>
|
||||
<div className="w-2/12 ml-2">
|
||||
<Field
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
name={`items.${index}.editorOptions`}
|
||||
component={Input}
|
||||
placeholder="Editor Options"
|
||||
/>
|
||||
<div className="flex gap-1">
|
||||
<Field
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
name={`items.${index}.editorOptions`}
|
||||
component={Input}
|
||||
placeholder="Editor Options"
|
||||
/>
|
||||
<Button
|
||||
shape="circle"
|
||||
variant="plain"
|
||||
type="button"
|
||||
size="sm"
|
||||
title="Build editor options"
|
||||
icon={<FaSlidersH />}
|
||||
onClick={() => setOptionsBuilderIndex(index)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-2/12 ml-2">
|
||||
<Field
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
name={`items.${index}.editorScript`}
|
||||
component={Input}
|
||||
placeholder="Editor Script"
|
||||
/>
|
||||
<div className="flex gap-1">
|
||||
<Field
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
name={`items.${index}.editorScript`}
|
||||
component={Input}
|
||||
placeholder="Editor Script"
|
||||
/>
|
||||
<Button
|
||||
shape="circle"
|
||||
variant="plain"
|
||||
type="button"
|
||||
size="sm"
|
||||
title="Build editor script"
|
||||
icon={<FaBolt />}
|
||||
onClick={() => setScriptBuilderIndex(index)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/12 ml-2 align-middle text-center">
|
||||
<Field
|
||||
|
|
@ -783,7 +809,15 @@ function JsonRowOpDialogEditForm({
|
|||
title="Add"
|
||||
icon={<FaCalendarPlus />}
|
||||
onClick={() => {
|
||||
arrayHelpers.insert(index + 1, '')
|
||||
arrayHelpers.insert(index + 1, {
|
||||
order: index + 2,
|
||||
dataField: '',
|
||||
editorType2: 'dxTextBox',
|
||||
colSpan: 1,
|
||||
editorOptions: '',
|
||||
editorScript: '',
|
||||
isRequired: false,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -798,10 +832,57 @@ function JsonRowOpDialogEditForm({
|
|||
title="Add"
|
||||
icon={<FaCalendarPlus />}
|
||||
onClick={() => {
|
||||
arrayHelpers.push('')
|
||||
arrayHelpers.push({
|
||||
order: 1,
|
||||
dataField: '',
|
||||
editorType2: 'dxTextBox',
|
||||
colSpan: 1,
|
||||
editorOptions: '',
|
||||
editorScript: '',
|
||||
isRequired: false,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{optionsBuilderIndex !== null && (
|
||||
<Field name={`items.${optionsBuilderIndex}.editorOptions`}>
|
||||
{({ form }: FieldProps<any>) => (
|
||||
<EditorOptionsBuilderDialog
|
||||
isOpen={optionsBuilderIndex !== null}
|
||||
value={values.items?.at(optionsBuilderIndex)?.editorOptions}
|
||||
editorType={values.items?.at(optionsBuilderIndex)?.editorType2}
|
||||
onClose={() => setOptionsBuilderIndex(null)}
|
||||
onApply={(val) =>
|
||||
form.setFieldValue(
|
||||
`items.${optionsBuilderIndex}.editorOptions`,
|
||||
val,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{scriptBuilderIndex !== null && (
|
||||
<Field name={`items.${scriptBuilderIndex}.editorScript`}>
|
||||
{({ form }: FieldProps<any>) => (
|
||||
<EditorScriptBuilderDialog
|
||||
isOpen={scriptBuilderIndex !== null}
|
||||
value={values.items?.at(scriptBuilderIndex)?.editorScript}
|
||||
currentField={values.items?.at(scriptBuilderIndex)?.dataField}
|
||||
fields={fieldList}
|
||||
onClose={() => setScriptBuilderIndex(null)}
|
||||
onApply={(val) =>
|
||||
form.setFieldValue(
|
||||
`items.${scriptBuilderIndex}.editorScript`,
|
||||
val,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue