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

FormDevexpress, Grid ve Tree setReadOnly

Browse source
This commit is contained in:
Sedat Öztürk 2026-06-01 23:51:59 +03:00
parent 5e6d2f518b
commit daf0d51960
6 changed files with 285 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Administration.cs
View file

@ -1540,7 +1540,7 @@ public class ListFormSeeder_Administration : IDataSeedContributor, ITransientDep
}),
InsertFieldsDefaultValueJson = DefaultInsertFieldsDefaultValueJson(),
FormFieldsDefaultValueJson = JsonSerializer.Serialize(new FieldsDefaultValue[] {
new() { FieldName = "Status", FieldDbType = DbType.String, Value = "Aktif", CustomValueType = FieldCustomValueTypeEnum.Value },
new() { FieldName = "Status", FieldDbType = DbType.String, Value = "active", CustomValueType = FieldCustomValueTypeEnum.Value },
}),
CommandColumnJson = JsonSerializer.Serialize(new CommandColumnDto[] {
new() {
@ -1638,8 +1638,8 @@ public class ListFormSeeder_Administration : IDataSeedContributor, ITransientDep
DisplayExpr = "name",
ValueExpr = "key",
LookupQuery = JsonSerializer.Serialize(new LookupDataDto[] {
new () { Key="Aktif", Name="Aktif" },
new () { Key="Pasif", Name="Pasif" },
new () { Key= "active", Name= "Aktif" },
new () { Key= "passive", Name= "Pasif" },
}),
}),
ValidationRuleJson = DefaultValidationRuleRequiredJson,
@ -3044,7 +3044,7 @@ public class ListFormSeeder_Administration : IDataSeedContributor, ITransientDep
ValueExpr = "key",
LookupQuery = JsonSerializer.Serialize(new LookupDataDto[] {
new () { Key= "active", Name= "Aktif" },
new () { Key= "passive", Name= "Kapalı" },
new () { Key= "passive", Name= "Pasif" },
}),
}),
ValidationRuleJson = DefaultValidationRuleRequiredJson,

2
ui/public/version.json
View file

@ -137,4 +137,4 @@
]
}
]
}
}

29
ui/src/utils/editorScriptRuntime.ts Normal file
View file

@ -0,0 +1,29 @@
export type EditorScriptRuntimeContext = {
formData: Record<string, any>
e: any
editor: any
runtimeSetEditorReadOnly?: (field: string, readOnly: boolean) => void
setFormData?: (newData: any) => void
}
export const executeEditorScript = (
script: string,
{
formData,
e,
editor,
runtimeSetEditorReadOnly,
setFormData,
}: EditorScriptRuntimeContext,
) => {
const executor = new Function(
'formData',
'e',
'editor',
'runtimeSetEditorReadOnly',
'setFormData',
script,
)
return executor(formData, e, editor, runtimeSetEditorReadOnly, setFormData)
}

249
ui/src/views/form/FormDevExpress.tsx
View file

@ -1,4 +1,5 @@
import { DX_CLASSNAMES } from '@/constants/app.constant'
import { executeEditorScript } from '@/utils/editorScriptRuntime'
import {
Form as FormDx,
FormRef,
@ -6,7 +7,7 @@ import {
SimpleItem as SimpleItemDx,
} from 'devextreme-react/form'
import { FieldDataChangedEvent, GroupItem } from 'devextreme/ui/form'
import { Dispatch, RefObject, useEffect, useRef } from 'react'
import { Dispatch, RefObject, useEffect, useRef, useState } from 'react'
import { GridBoxEditorComponent } from './editors/GridBoxEditorComponent'
import { ImageUploadEditorComponent } from './editors/ImageUploadEditorComponent'
import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent'
@ -157,6 +158,8 @@ const FormDevExpress = (props: {
const formItemsRef = useRef(formItems)
const formInstanceRef = useRef<any>()
const lastContentReadyScriptKeyRef = useRef<string>()
const [runtimeReadOnlyFields, setRuntimeReadOnlyFields] = useState<Record<string, boolean>>({})
const runtimeReadOnlyFieldsRef = useRef<Record<string, boolean>>({})
useEffect(() => {
formDataRef.current = formData
@ -166,6 +169,143 @@ const FormDevExpress = (props: {
formItemsRef.current = formItems
}, [formItems])
useEffect(() => {
runtimeReadOnlyFieldsRef.current = runtimeReadOnlyFields
}, [runtimeReadOnlyFields])
const setRuntimeEditorReadOnly = (field: string, readOnly: boolean) => {
const resolvedField = findFormFieldKey(formItemsRef.current, field)
const key = String(resolvedField || field || '').toLowerCase()
if (!key || runtimeReadOnlyFieldsRef.current[key] === readOnly) {
return
}
runtimeReadOnlyFieldsRef.current = {
...runtimeReadOnlyFieldsRef.current,
[key]: readOnly,
}
setRuntimeReadOnlyFields(runtimeReadOnlyFieldsRef.current)
}
const getRuntimeEditorReadOnly = (formItem: SimpleItemWithColData) => {
const field = formItem.dataField || formItem.name
const resolvedField = findFormFieldKey(formItemsRef.current, field || '')
const key = String(resolvedField || field || '').toLowerCase()
return Object.prototype.hasOwnProperty.call(runtimeReadOnlyFields, key)
? runtimeReadOnlyFields[key]
: undefined
}
const applyEditorReadOnly = (form: any, field: string, readOnly: boolean) => {
setRuntimeEditorReadOnly(field, readOnly)
setFormEditorReadOnly(form, field, readOnly)
setTimeout(() => setFormEditorReadOnly(formInstanceRef.current ?? form, field, readOnly), 0)
}
const runEditorScript = (
formItem: SimpleItemWithColData,
eventValue: any,
component?: any,
) => {
if (!formItem?.editorScript) {
return
}
const form = formInstanceRef.current ?? component
const dataField = formItem.dataField
const nextFormData = {
...(formDataRef.current || {}),
...(form?.option?.('formData') || {}),
...(dataField ? { [dataField]: eventValue } : {}),
}
formDataRef.current = nextFormData
try {
const editor = {
dataField,
component: form,
}
const formData = nextFormData
const e = {
component: form,
dataField,
value: eventValue,
}
const runtimeSetEditorReadOnly = (field: string, readOnly: boolean) =>
applyEditorReadOnly(form, field, readOnly)
executeEditorScript(formItem.editorScript, {
formData,
e,
editor,
runtimeSetEditorReadOnly,
})
} catch (err) {
console.error('Script execution failed for', formItem.name, err)
}
}
const getEditorOptions = (formItem: SimpleItemWithColData, index?: number) => {
const runtimeReadOnly = getRuntimeEditorReadOnly(formItem)
const prevOnValueChanged = formItem.editorOptions?.onValueChanged
return {
...(index !== undefined && mode !== 'view' ? { autoFocus: index === 1 } : {}),
...(formItem.editorType === 'dxDateBox'
? {
useMaskBehavior: true,
openOnFieldClick: true,
showClearButton: true,
}
: {}),
...(formItem.colData?.placeHolder
? { placeholder: translate('::' + formItem.colData.placeHolder) }
: {}),
...formItem.editorOptions,
...(runtimeReadOnly !== undefined ? { readOnly: runtimeReadOnly } : {}),
...(mode === 'view' ? { readOnly: true } : {}),
...(formItem.editorScript
? {
onValueChanged: (e: any) => {
if (typeof prevOnValueChanged === 'function') {
prevOnValueChanged(e)
}
if (formItem.dataField) {
const nextFormData = {
...(formDataRef.current || {}),
...(formInstanceRef.current?.option?.('formData') || {}),
[formItem.dataField]: e?.value,
}
formDataRef.current = nextFormData
formInstanceRef.current?.option?.('formData', nextFormData)
setFormData(nextFormData)
}
runEditorScript(formItem, e?.value, formInstanceRef.current)
},
}
: {}),
buttons: (formItem.editorOptions?.buttons || []).map((btn: any) => {
if (btn?.options?.onClick && typeof btn.options.onClick === 'string') {
const origClick = eval(`(${btn.options.onClick})`)
btn.options.onClick = (e: any) => {
origClick({
...e,
formData: formDataRef.current,
fieldName: formItem.dataField,
mode,
})
}
}
return btn
}),
}
}
const getFormItemKey = (formItem: SimpleItemWithColData, index: number) => {
const runtimeReadOnly = getRuntimeEditorReadOnly(formItem)
return `formItem-${formItem.dataField || formItem.name || index}-${String(runtimeReadOnly)}`
}
// formItems değiştiğinde (özellikle cascading alanlar için) editörlerin dataSource'larını güncelle
useEffect(() => {
if (!refForm.current?.instance()) return
@ -250,9 +390,14 @@ const FormDevExpress = (props: {
value: getValueByField(currentFormData, formItem.dataField),
}
const runtimeSetEditorReadOnly = (field: string, readOnly: boolean) =>
setFormEditorReadOnly(form, field, readOnly)
applyEditorReadOnly(form, field, readOnly)
eval(formItem.editorScript!)
executeEditorScript(formItem.editorScript!, {
formData,
e,
editor,
runtimeSetEditorReadOnly,
})
} catch (err) {
console.error('Script execution failed on contentReady for', formItem.name, err)
}
@ -313,6 +458,7 @@ const FormDevExpress = (props: {
})
if (hasChanges) {
formDataRef.current = newFormData
setFormData(newFormData)
}
@ -321,35 +467,6 @@ const FormDevExpress = (props: {
updateCascadeDisabledStates()
}, 0)
//Dinamik script
const changeItem = formItemsRef.current
.flatMap((group) => flattenFormItems([group]))
.find(
(i: SimpleItemWithColData) =>
String(i.dataField || '').toLowerCase() === String(e.dataField || '').toLowerCase(),
)
if (changeItem?.editorScript) {
try {
const form = e.component
const editor = {
dataField: changeItem.dataField,
component: form,
}
const formData = newFormData
formDataRef.current = newFormData
const runtimeSetEditorReadOnly = (field: string, readOnly: boolean) =>
setFormEditorReadOnly(formInstanceRef.current ?? form, field, readOnly)
//setFormData({...formData, Path: e.value});
//UiEvalService.ApiGenerateBackgroundWorkers();
//setFormData({ ...formData, Path: (v => v === '1' ? '1-deneme' : v === '0' ? '0-deneme' : '')(e.value) })
eval(changeItem.editorScript)
} catch (err) {
console.error('Script execution failed for', changeItem.name, err)
}
}
}}
onContentReady={(e) => {
formInstanceRef.current = e.component
@ -383,7 +500,7 @@ const FormDevExpress = (props: {
return formItem.editorType2 === PlatformEditorTypes.dxTagBox ? (
<SimpleItemDx
cssClass="font-semibold"
key={'formItem-' + i}
key={getFormItemKey(formItem, i)}
{...formItem}
render={() => (
<TagBoxEditorComponent
@ -393,12 +510,12 @@ const FormDevExpress = (props: {
options={formItem.tagBoxOptions}
col={formItem.colData}
onValueChanged={(e: any) => {
setFormData({ ...formData, [formItem.dataField!]: e })
}}
editorOptions={{
...formItem.editorOptions,
...(mode === 'view' ? { readOnly: true } : {}),
const newData = { ...formDataRef.current, [formItem.dataField!]: e }
formDataRef.current = newData
setFormData(newData)
runEditorScript(formItem, e, formInstanceRef.current)
}}
editorOptions={getEditorOptions(formItem)}
></TagBoxEditorComponent>
)}
label={{
@ -409,7 +526,7 @@ const FormDevExpress = (props: {
) : formItem.editorType2 === PlatformEditorTypes.dxGridBox ? (
<SimpleItemDx
cssClass="font-semibold"
key={'formItem-' + i}
key={getFormItemKey(formItem, i)}
{...formItem}
render={() => (
<GridBoxEditorComponent
@ -418,12 +535,12 @@ const FormDevExpress = (props: {
options={formItem.gridBoxOptions}
col={formItem.colData}
onValueChanged={(e: any) => {
setFormData({ ...formData, [formItem.dataField!]: e })
}}
editorOptions={{
...formItem.editorOptions,
...(mode === 'view' ? { readOnly: true } : {}),
const newData = { ...formDataRef.current, [formItem.dataField!]: e }
formDataRef.current = newData
setFormData(newData)
runEditorScript(formItem, e, formInstanceRef.current)
}}
editorOptions={getEditorOptions(formItem)}
></GridBoxEditorComponent>
)}
label={{
@ -434,7 +551,7 @@ const FormDevExpress = (props: {
) : formItem.editorType2 === PlatformEditorTypes.dxImageUpload ? (
<SimpleItemDx
cssClass="font-semibold"
key={'formItem-' + i}
key={getFormItemKey(formItem, i)}
dataField={formItem.dataField}
name={formItem.name}
colSpan={formItem.colSpan}
@ -444,12 +561,12 @@ const FormDevExpress = (props: {
value={formData[formItem.dataField!]}
options={formItem.imageUploadOptions}
onValueChanged={(val: any) => {
setFormData({ ...formData, [formItem.dataField!]: val })
}}
editorOptions={{
...formItem.editorOptions,
...(mode === 'view' ? { readOnly: true } : {}),
const newData = { ...formDataRef.current, [formItem.dataField!]: val }
formDataRef.current = newData
setFormData(newData)
runEditorScript(formItem, val, formInstanceRef.current)
}}
editorOptions={getEditorOptions(formItem)}
/>
)}
label={{
@ -460,37 +577,9 @@ const FormDevExpress = (props: {
) : (
<SimpleItemDx
cssClass="font-semibold"
key={'formItem-' + i}
key={getFormItemKey(formItem, i)}
{...formItem}
editorOptions={{
...(mode === 'view' ? {} : { autoFocus: i === 1 }),
...(formItem.editorType === 'dxDateBox'
? {
useMaskBehavior: true,
openOnFieldClick: true,
showClearButton: true,
}
: {}),
...(formItem.colData?.placeHolder
? { placeholder: translate('::' + formItem.colData.placeHolder) }
: {}),
...formItem.editorOptions,
...(mode === 'view' ? { readOnly: true } : {}),
buttons: (formItem.editorOptions?.buttons || []).map((btn: any) => {
if (btn?.options?.onClick && typeof btn.options.onClick === 'string') {
const origClick = eval(`(${btn.options.onClick})`)
btn.options.onClick = (e: any) => {
origClick({
...e,
formData: formDataRef.current,
fieldName: formItem.dataField,
mode,
})
}
}
return btn
}),
}}
editorOptions={getEditorOptions(formItem, i)}
label={{ text: translate('::' + formItem.colData?.captionName) }}
/>
)

45
ui/src/views/list/Grid.tsx
View file

@ -16,6 +16,7 @@ import {
} from '@/services/list-form-customization.service'
import { useLocalization } from '@/utils/hooks/useLocalization'
import useResponsive from '@/utils/hooks/useResponsive'
import { executeEditorScript } from '@/utils/editorScriptRuntime'
import { Template } from 'devextreme-react/core/template'
import DataGrid, {
ColumnChooser,
@ -211,6 +212,7 @@ const setFormEditorReadOnly = (form: any, field: string, readOnly: boolean) => {
}
apply()
setTimeout(apply, 0)
return true
}
@ -826,7 +828,13 @@ const Grid = (props: GridProps) => {
}
}
eval(formItem.editorScript!)
executeEditorScript(formItem.editorScript!, {
formData,
e,
editor,
runtimeSetEditorReadOnly,
setFormData,
})
} catch (err) {
console.error('Script exec error', formItem.dataField, err)
}
@ -1550,9 +1558,19 @@ const Grid = (props: GridProps) => {
}
const runReadOnlyScripts = () => {
const editorValues = gridDto.gridOptions.editingFormDto
.flatMap((group) => flattenEditingFormItems([group]))
.reduce<Record<string, any>>((values, formItem) => {
const editorInstance = form?.getEditor?.(formItem.dataField)
if (editorInstance?.option) {
values[formItem.dataField] = editorInstance.option('value')
}
return values
}, {})
const formData = {
...editingFormDataRef.current,
...(form?.option?.('formData') || {}),
...editorValues,
}
editingFormDataRef.current = { ...formData }
@ -1563,6 +1581,10 @@ const Grid = (props: GridProps) => {
)
.forEach((formItem) => {
try {
const editorInstance = form?.getEditor?.(formItem.dataField)
const editorValue =
editorInstance?.option?.('value') ??
getValueByField(formData, formItem.dataField)
const editor = {
dataField: formItem.dataField,
component: grid,
@ -1570,10 +1592,16 @@ const Grid = (props: GridProps) => {
const e = {
component: form,
dataField: formItem.dataField,
value: getValueByField(formData, formItem.dataField),
value: editorValue,
}
eval(formItem.editorScript!)
executeEditorScript(formItem.editorScript!, {
formData,
e,
editor,
runtimeSetEditorReadOnly,
setFormData,
})
} catch (err) {
console.error('Script exec error on contentReady', formItem.dataField, err)
}
@ -1619,7 +1647,16 @@ const Grid = (props: GridProps) => {
}
}
eval(formItem.editorScript)
executeEditorScript(formItem.editorScript, {
formData,
e,
editor: {
dataField: e.dataField,
component: grid,
},
runtimeSetEditorReadOnly,
setFormData,
})
} catch (err) {
console.error('Script exec error', err)
}

45
ui/src/views/list/Tree.tsx
View file

@ -1,6 +1,7 @@
import Container from '@/components/shared/Container'
import { Dialog, Notification, toast } from '@/components/ui'
import { APP_NAME, DX_CLASSNAMES } from '@/constants/app.constant'
import { executeEditorScript } from '@/utils/editorScriptRuntime'
import {
DbTypeEnum,
EditingFormItemDto,
@ -199,6 +200,7 @@ const setFormEditorReadOnly = (form: any, field: string, readOnly: boolean) => {
}
apply()
setTimeout(apply, 0)
return true
}
@ -784,7 +786,13 @@ const Tree = (props: TreeProps) => {
}
}
eval(formItem.editorScript!)
executeEditorScript(formItem.editorScript!, {
formData,
e,
editor,
runtimeSetEditorReadOnly,
setFormData,
})
} catch (err) {
console.error('Script exec error', formItem.dataField, err)
}
@ -1212,9 +1220,19 @@ const Tree = (props: TreeProps) => {
}
const runReadOnlyScripts = () => {
const editorValues = gridDto.gridOptions.editingFormDto
.flatMap((group) => flattenEditingFormItems([group]))
.reduce<Record<string, any>>((values, formItem) => {
const editorInstance = form?.getEditor?.(formItem.dataField)
if (editorInstance?.option) {
values[formItem.dataField] = editorInstance.option('value')
}
return values
}, {})
const formData = {
...editingFormDataRef.current,
...(form?.option?.('formData') || {}),
...editorValues,
}
editingFormDataRef.current = { ...formData }
@ -1225,6 +1243,10 @@ const Tree = (props: TreeProps) => {
)
.forEach((formItem) => {
try {
const editorInstance = form?.getEditor?.(formItem.dataField)
const editorValue =
editorInstance?.option?.('value') ??
getValueByField(formData, formItem.dataField)
const editor = {
dataField: formItem.dataField,
component: grid,
@ -1232,10 +1254,16 @@ const Tree = (props: TreeProps) => {
const e = {
component: form,
dataField: formItem.dataField,
value: getValueByField(formData, formItem.dataField),
value: editorValue,
}
eval(formItem.editorScript!)
executeEditorScript(formItem.editorScript!, {
formData,
e,
editor,
runtimeSetEditorReadOnly,
setFormData,
})
} catch (err) {
console.error('Script exec error on contentReady', formItem.dataField, err)
}
@ -1281,7 +1309,16 @@ const Tree = (props: TreeProps) => {
}
}
eval(formItem.editorScript)
executeEditorScript(formItem.editorScript, {
formData,
e,
editor: {
dataField: e.dataField,
component: grid,
},
runtimeSetEditorReadOnly,
setFormData,
})
} catch (err) {
console.error('Script exec error', err)
}