sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

EditForm içerisine Script ve Options komponentleri

Browse source
This commit is contained in:
Sedat Öztürk 2026-05-30 01:22:39 +03:00
parent f5b32d5a6b
commit 300bc5ae88
4 changed files with 2656 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/src/assets/styles/components/_tabs.css
View file

@ -15,7 +15,7 @@
} }
.tab-nav-underline { .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 { .tab-nav-pill {

1008
ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx Normal file
View file

File diff suppressed because it is too large Load diff

1549
ui/src/views/admin/listForm/edit/json-row-operations/EditorScriptBuilderDialog.tsx Normal file
View file

File diff suppressed because it is too large Load diff

87
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx
View file

@ -17,7 +17,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldArray, FieldProps, Form, Formik } from 'formik' import { Field, FieldArray, FieldProps, Form, Formik } from 'formik'
import groupBy from 'lodash/groupBy' import groupBy from 'lodash/groupBy'
import { Dispatch, SetStateAction, useEffect, useState } from 'react' 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 { number, object, string } from 'yup'
import { import {
columnEditorTypeListOptions, columnEditorTypeListOptions,
@ -35,6 +35,8 @@ import {
putListFormJsonRow, putListFormJsonRow,
} from '@/services/admin/list-form.service' } from '@/services/admin/list-form.service'
import { EditingFormItemDto, PlatformEditorTypes } from '@/proxy/form/models' import { EditingFormItemDto, PlatformEditorTypes } from '@/proxy/form/models'
import EditorOptionsBuilderDialog from './EditorOptionsBuilderDialog'
import EditorScriptBuilderDialog from './EditorScriptBuilderDialog'
const schema = object().shape({ const schema = object().shape({
itemType: string().required(), itemType: string().required(),
@ -76,6 +78,8 @@ function JsonRowOpDialogEditForm({
const [fieldList, setFieldList] = useState<SelectBoxOption[]>([]) const [fieldList, setFieldList] = useState<SelectBoxOption[]>([])
const [isOpenOptionsDialog, setIsOpenOptionsDialog] = useState<Record<number, boolean>>({}) 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 [isHelperOpen, setIsHelperOpen] = useState(false)
const getFields = async () => { const getFields = async () => {
@ -731,6 +735,7 @@ function JsonRowOpDialogEditForm({
)} )}
</div> </div>
<div className="w-2/12 ml-2"> <div className="w-2/12 ml-2">
<div className="flex gap-1">
<Field <Field
type="text" type="text"
autoComplete="off" autoComplete="off"
@ -738,8 +743,19 @@ function JsonRowOpDialogEditForm({
component={Input} component={Input}
placeholder="Editor Options" placeholder="Editor Options"
/> />
<Button
shape="circle"
variant="plain"
type="button"
size="sm"
title="Build editor options"
icon={<FaSlidersH />}
onClick={() => setOptionsBuilderIndex(index)}
/>
</div>
</div> </div>
<div className="w-2/12 ml-2"> <div className="w-2/12 ml-2">
<div className="flex gap-1">
<Field <Field
type="text" type="text"
autoComplete="off" autoComplete="off"
@ -747,6 +763,16 @@ function JsonRowOpDialogEditForm({
component={Input} component={Input}
placeholder="Editor Script" placeholder="Editor Script"
/> />
<Button
shape="circle"
variant="plain"
type="button"
size="sm"
title="Build editor script"
icon={<FaBolt />}
onClick={() => setScriptBuilderIndex(index)}
/>
</div>
</div> </div>
<div className="w-1/12 ml-2 align-middle text-center"> <div className="w-1/12 ml-2 align-middle text-center">
<Field <Field
@ -783,7 +809,15 @@ function JsonRowOpDialogEditForm({
title="Add" title="Add"
icon={<FaCalendarPlus />} icon={<FaCalendarPlus />}
onClick={() => { onClick={() => {
arrayHelpers.insert(index + 1, '') arrayHelpers.insert(index + 1, {
order: index + 2,
dataField: '',
editorType2: 'dxTextBox',
colSpan: 1,
editorOptions: '',
editorScript: '',
isRequired: false,
})
}} }}
/> />
</div> </div>
@ -798,10 +832,57 @@ function JsonRowOpDialogEditForm({
title="Add" title="Add"
icon={<FaCalendarPlus />} icon={<FaCalendarPlus />}
onClick={() => { 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> </div>
)} )}
/> />