Card formundaki Cascading sütunların düzenlemesi

This commit is contained in:
Sedat ÖZTÜRK 2025-11-11 15:00:52 +03:00
parent 18327a4d21
commit d66bda656d
3 changed files with 50 additions and 10 deletions

View file

@ -24,20 +24,61 @@ const FormDevExpress = (props: {
const { listFormCode, isSubForm, mode, refForm, formData, formItems, setFormData } = props const { listFormCode, isSubForm, mode, refForm, formData, formItems, setFormData } = props
const formDataRef = useRef(formData) const formDataRef = useRef(formData)
const formItemsRef = useRef(formItems)
useEffect(() => { useEffect(() => {
formDataRef.current = formData formDataRef.current = formData
}, [formData]) }, [formData])
useEffect(() => {
formItemsRef.current = formItems
}, [formItems])
// formItems değiştiğinde (özellikle cascading alanlar için) editörlerin dataSource'larını güncelle
useEffect(() => {
if (!refForm.current?.instance) return
const allItems = formItems.flatMap((group) => (group.items as SimpleItemWithColData[]) || [])
allItems.forEach((item) => {
if (item.colData?.lookupDto?.dataSourceType && item.editorOptions?.dataSource) {
try {
const editor = refForm.current?.instance.getEditor(item.dataField!)
if (editor) {
editor.option('dataSource', item.editorOptions.dataSource)
}
} catch (err) {
// Editor henüz oluşmamış olabilir, sessizce devam et
console.debug('Editor update skipped for', item.dataField, err)
}
}
})
}, [formItems])
return ( return (
<form className={`${DX_CLASSNAMES} ${!isSubForm ? 'px-2' : ''} pb-2`}> <form className={`${DX_CLASSNAMES} ${!isSubForm ? 'px-2' : ''} pb-2`}>
<FormDx <FormDx
ref={refForm} ref={refForm}
formData={formData} formData={formData}
onFieldDataChanged={async (e: FieldDataChangedEvent) => { onFieldDataChanged={async (e: FieldDataChangedEvent) => {
setFormData({ ...formData, [e.dataField!]: e.value }) const newFormData = { ...formData, [e.dataField!]: e.value }
// Cascading child field'leri temizle (parent field değiştiğinde)
const allItems = formItemsRef.current.flatMap((group) => (group.items as SimpleItemWithColData[]) || [])
const cascadingChildren = allItems.filter((item) => {
const parentFields = item.colData?.lookupDto?.cascadeParentFields?.split(',') || []
return parentFields.some(field => field.trim() === e.dataField)
})
// Parent field değiştiğinde child field'leri temizle
cascadingChildren.forEach((child) => {
newFormData[child.dataField!] = null
})
setFormData(newFormData)
//Dinamik script //Dinamik script
const changeItem = formItems const changeItem = formItemsRef.current
.flatMap((group) => (group.items as SimpleItemWithColData[]) || []) .flatMap((group) => (group.items as SimpleItemWithColData[]) || [])
.find((i: SimpleItemWithColData) => i.dataField === e.dataField) .find((i: SimpleItemWithColData) => i.dataField === e.dataField)

View file

@ -295,10 +295,11 @@ const useGridData = (props: {
// formData değiştiğinde sadece lookup datasource'ları güncelle // formData değiştiğinde sadece lookup datasource'ları güncelle
useEffect(() => { useEffect(() => {
if (!gridDto || !formData || !formItems.length) { if (!gridDto || !formItems.length) {
return return
} }
// View mode'da formData olsa da olmasa da cascading alanlar için dataSource oluşturulmalı
const updatedItems = formItems.map((groupItem) => ({ const updatedItems = formItems.map((groupItem) => ({
...groupItem, ...groupItem,
items: (groupItem.items as SimpleItemWithColData[])?.map((item) => { items: (groupItem.items as SimpleItemWithColData[])?.map((item) => {
@ -308,7 +309,8 @@ const useGridData = (props: {
...item, ...item,
editorOptions: { editorOptions: {
...item.editorOptions, ...item.editorOptions,
dataSource: getLookupDataSource(colData?.editorOptions, colData, formData), // formData null bile olsa getLookupDataSource çağrılmalı (null parametrelerle API çağrısı yapılacak)
dataSource: getLookupDataSource(colData?.editorOptions, colData, formData || null),
valueExpr: colData?.lookupDto?.valueExpr?.toLowerCase(), valueExpr: colData?.lookupDto?.valueExpr?.toLowerCase(),
displayExpr: colData?.lookupDto?.displayExpr?.toLowerCase(), displayExpr: colData?.lookupDto?.displayExpr?.toLowerCase(),
}, },
@ -319,7 +321,7 @@ const useGridData = (props: {
})) }))
setFormItems(updatedItems) setFormItems(updatedItems)
}, [formData]) }, [formData, gridDto])
useEffect(() => { useEffect(() => {
if (!gridReady) { if (!gridReady) {

View file

@ -138,16 +138,13 @@ export const useLookupDataSource = ({
const { lookupDto } = colData const { lookupDto } = colData
const filters: any[] = [] const filters: any[] = []
// Eğer cascadeParentFields varsa ve row verisi (data) yoksa boş döneriz // Cascading field'ler için - data yoksa veya parent field değeri yoksa null parametreler ile API çağrısı yap
if (lookupDto.cascadeParentFields && !data) {
return { store: [] }
}
if (lookupDto.cascadeParentFields) { if (lookupDto.cascadeParentFields) {
if (lookupDto.dataSourceType == UiLookupDataSourceTypeEnum.StaticData) { if (lookupDto.dataSourceType == UiLookupDataSourceTypeEnum.StaticData) {
filters.push([ filters.push([
lookupDto?.cascadeRelationField, lookupDto?.cascadeRelationField,
lookupDto?.cascadeFilterOperator, lookupDto?.cascadeFilterOperator,
options?.data[lookupDto?.cascadeParentField], options?.data?.[lookupDto?.cascadeParentField] ?? null,
]) ])
} else { } else {
for (const cascadeParentField of lookupDto.cascadeParentFields.split(',')) { for (const cascadeParentField of lookupDto.cascadeParentFields.split(',')) {