Card formundaki Cascading sütunların düzenlemesi
This commit is contained in:
parent
18327a4d21
commit
d66bda656d
3 changed files with 50 additions and 10 deletions
|
|
@ -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)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
|
||||||
|
|
@ -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(',')) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue