editorOptions içerisinde dataSource bilgisi eklendi
This commit is contained in:
parent
74075aa68e
commit
b75158bc01
5 changed files with 70 additions and 57 deletions
|
|
@ -11,7 +11,6 @@ import { GridBoxEditorComponent } from './editors/GridBoxEditorComponent'
|
|||
import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent'
|
||||
import { RowMode, SimpleItemWithColData } from './types'
|
||||
import { PlatformEditorTypes } from '@/proxy/form/models'
|
||||
import { useLookupDataSource } from './useLookupDataSource'
|
||||
|
||||
const FormDevExpress = (props: {
|
||||
listFormCode: string
|
||||
|
|
@ -23,7 +22,6 @@ const FormDevExpress = (props: {
|
|||
setFormData: Dispatch<any>
|
||||
}) => {
|
||||
const { listFormCode, isSubForm, mode, refForm, formData, formItems, setFormData } = props
|
||||
const { getLookupDataSource } = useLookupDataSource({ listFormCode, isSubForm })
|
||||
|
||||
return (
|
||||
<form className={`${DX_CLASSNAMES} p-2`}>
|
||||
|
|
@ -51,6 +49,7 @@ const FormDevExpress = (props: {
|
|||
caption={formGroupItem.caption}
|
||||
>
|
||||
{(formGroupItem.items as SimpleItemWithColData[])?.map((formItem, i) => {
|
||||
console.log('formItem', formItem.colData)
|
||||
return formItem.editorType2 === PlatformEditorTypes.dxTagBox ? (
|
||||
<SimpleItemDx
|
||||
key={'formItem-' + i}
|
||||
|
|
@ -69,10 +68,6 @@ const FormDevExpress = (props: {
|
|||
...formItem.editorOptions,
|
||||
...(mode === 'view' ? { readOnly: true } : {}),
|
||||
}}
|
||||
dataSource={getLookupDataSource(
|
||||
formItem.colData?.editorOptions,
|
||||
formItem.colData,
|
||||
)}
|
||||
></TagBoxEditorComponent>
|
||||
)}
|
||||
>
|
||||
|
|
@ -95,10 +90,6 @@ const FormDevExpress = (props: {
|
|||
...formItem.editorOptions,
|
||||
...(mode === 'view' ? { readOnly: true } : {}),
|
||||
}}
|
||||
dataSource={getLookupDataSource(
|
||||
formItem.colData?.editorOptions,
|
||||
formItem.colData,
|
||||
)}
|
||||
></GridBoxEditorComponent>
|
||||
)}
|
||||
>
|
||||
|
|
@ -110,16 +101,6 @@ const FormDevExpress = (props: {
|
|||
{...formItem}
|
||||
editorOptions={{
|
||||
...formItem.editorOptions,
|
||||
...(formItem.colData?.lookupDto?.dataSourceType
|
||||
? {
|
||||
dataSource: getLookupDataSource(
|
||||
formItem.colData?.editorOptions,
|
||||
formItem.colData,
|
||||
),
|
||||
valueExpr: formItem.colData?.lookupDto?.valueExpr,
|
||||
displayExpr: formItem.colData?.lookupDto?.displayExpr,
|
||||
}
|
||||
: {}),
|
||||
...(mode === 'view' ? { readOnly: true } : { autoFocus: i === 1 }),
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ const GridBoxEditorComponent = ({
|
|||
onValueChanged,
|
||||
col,
|
||||
editorOptions,
|
||||
dataSource
|
||||
}: {
|
||||
value: any
|
||||
options?: GridBoxOptionsDto
|
||||
|
|
@ -19,7 +18,6 @@ const GridBoxEditorComponent = ({
|
|||
onValueChanged: (e: any) => void
|
||||
col?: ColumnFormatDto
|
||||
editorOptions: any
|
||||
dataSource: any
|
||||
}): ReactElement => {
|
||||
const gridRef = useRef<DataGrid>(null)
|
||||
const val = Array.isArray(value) ? value : [value]
|
||||
|
|
@ -34,7 +32,7 @@ const GridBoxEditorComponent = ({
|
|||
<DropDownBox
|
||||
{...editorOptions}
|
||||
value={val}
|
||||
dataSource={dataSource}
|
||||
dataSource={editorOptions?.dataSource}
|
||||
valueExpr={lookupDto?.valueExpr}
|
||||
displayExpr={lookupDto?.displayExpr}
|
||||
showClearButton={options?.showClearButton}
|
||||
|
|
@ -52,7 +50,7 @@ const GridBoxEditorComponent = ({
|
|||
<>
|
||||
<DataGrid
|
||||
ref={gridRef}
|
||||
dataSource={dataSource}
|
||||
dataSource={editorOptions?.dataSource}
|
||||
key={lookupDto?.valueExpr}
|
||||
filterRow={{
|
||||
visible: options?.filterRowVisible,
|
||||
|
|
@ -78,7 +76,7 @@ const GridBoxEditorComponent = ({
|
|||
//TODO:Bu kısım tekrar değerlendirilmeli
|
||||
onEditorPrepared={(event) => {
|
||||
const getListValues = async () => {
|
||||
const data = await dataSource?.load()
|
||||
const data = await editorOptions?.dataSource?.load()
|
||||
|
||||
const listValues = data.map((a: any) => ({
|
||||
key: a.key,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ const TagBoxEditorComponent = ({
|
|||
onValueChanged,
|
||||
col,
|
||||
editorOptions,
|
||||
dataSource
|
||||
}: {
|
||||
value: any
|
||||
setDefaultValue: boolean
|
||||
|
|
@ -19,7 +18,6 @@ const TagBoxEditorComponent = ({
|
|||
onValueChanged: (e: any) => void
|
||||
col?: ColumnFormatDto
|
||||
editorOptions: any
|
||||
dataSource: any
|
||||
}): ReactElement => {
|
||||
const val = Array.isArray(value) ? value : [value]
|
||||
const lookupDto = col?.lookupDto
|
||||
|
|
@ -33,7 +31,7 @@ const TagBoxEditorComponent = ({
|
|||
<TagBox
|
||||
{...editorOptions}
|
||||
{...(setDefaultValue ? { defaultValue: val } : { value: val })}
|
||||
dataSource={dataSource}
|
||||
dataSource={editorOptions?.dataSource}
|
||||
valueExpr={lookupDto?.valueExpr}
|
||||
displayExpr={lookupDto?.displayExpr}
|
||||
showClearButton={options?.showClearButton}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { PermissionResults, RowMode, SimpleItemWithColData } from './types'
|
|||
import { EditingFormItemDto, GridDto, PlatformEditorTypes } from '@/proxy/form/models'
|
||||
import { getAccessDeniedPath } from '@/utils/routing'
|
||||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||||
import { useLookupDataSource } from '../form/useLookupDataSource'
|
||||
|
||||
const useGridData = (props: {
|
||||
mode: RowMode
|
||||
|
|
@ -49,6 +50,7 @@ const useGridData = (props: {
|
|||
isSubForm,
|
||||
})
|
||||
const { createSelectDataSource } = useListFormCustomDataSource({})
|
||||
const { getLookupDataSource } = useLookupDataSource({ listFormCode, isSubForm })
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true)
|
||||
|
|
@ -220,6 +222,8 @@ const useGridData = (props: {
|
|||
})
|
||||
.map((i: EditingFormItemDto) => {
|
||||
let editorOptions = {}
|
||||
const colData = gridDto.columnFormats.find((x) => x.fieldName === i.dataField)
|
||||
|
||||
try {
|
||||
editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
|
||||
} catch {}
|
||||
|
|
@ -243,8 +247,17 @@ const useGridData = (props: {
|
|||
i.editorType2 == PlatformEditorTypes.dxGridBox ? 'dxDropDownBox' : i.editorType2,
|
||||
colSpan: i.colSpan,
|
||||
isRequired: i.isRequired,
|
||||
editorOptions,
|
||||
colData: gridDto?.columnFormats.find((x) => x.fieldName === i.dataField),
|
||||
editorOptions: {
|
||||
...editorOptions,
|
||||
...(colData?.lookupDto?.dataSourceType
|
||||
? {
|
||||
dataSource: getLookupDataSource(colData?.editorOptions, colData),
|
||||
valueExpr: colData?.lookupDto?.valueExpr?.toLowerCase(),
|
||||
displayExpr: colData?.lookupDto?.displayExpr?.toLowerCase(),
|
||||
}
|
||||
: {}),
|
||||
},
|
||||
colData,
|
||||
tagBoxOptions: i.tagBoxOptions,
|
||||
gridBoxOptions: i.gridBoxOptions,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import CustomStore from 'devextreme/data/custom_store'
|
|||
import { PermissionResults, SimpleItemWithColData } from '../form/types'
|
||||
import { usePermission } from '@/utils/hooks/usePermission'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { useLookupDataSource } from '../form/useLookupDataSource'
|
||||
|
||||
interface CardProps {
|
||||
listFormCode: string
|
||||
|
|
@ -34,6 +35,7 @@ const CardItem = ({
|
|||
listFormCode,
|
||||
dataSource,
|
||||
refreshData,
|
||||
getCachedLookupDataSource, // 🔹 Card’dan gelen cache fonksiyonu
|
||||
}: {
|
||||
isSubForm?: boolean
|
||||
row: any
|
||||
|
|
@ -41,6 +43,7 @@ const CardItem = ({
|
|||
listFormCode: string
|
||||
dataSource: CustomStore
|
||||
refreshData: () => void
|
||||
getCachedLookupDataSource: (editorOptions: any, colData: any) => any
|
||||
}) => {
|
||||
const [formData, setFormData] = useState(row)
|
||||
const refForm = useRef<FormDx>(null)
|
||||
|
|
@ -51,41 +54,33 @@ const CardItem = ({
|
|||
const keyField = gridDto.gridOptions.keyFieldName
|
||||
const rowId = row[keyField!]
|
||||
|
||||
// Form Items
|
||||
const formItems: GroupItem[] = useMemo(() => {
|
||||
if (!gridDto) return []
|
||||
|
||||
return gridDto?.gridOptions.editingFormDto
|
||||
?.sort((a: any, b: any) => {
|
||||
return a.order >= b.order ? 1 : -1
|
||||
})
|
||||
.map((e: any) => {
|
||||
return gridDto.gridOptions.editingFormDto
|
||||
?.sort((a, b) => (a.order >= b.order ? 1 : -1))
|
||||
.map((e) => {
|
||||
return {
|
||||
itemType: e.itemType,
|
||||
colCount: e.colCount,
|
||||
colSpan: e.colSpan,
|
||||
caption: e.caption,
|
||||
items: e.items
|
||||
?.sort((a: any, b: any) => {
|
||||
return a.order >= b.order ? 1 : -1
|
||||
})
|
||||
?.sort((a, b) => (a.order >= b.order ? 1 : -1))
|
||||
.map((i: EditingFormItemDto) => {
|
||||
let editorOptions = {}
|
||||
const colData = gridDto.columnFormats.find((x) => x.fieldName === i.dataField)
|
||||
|
||||
try {
|
||||
editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
|
||||
} catch {}
|
||||
|
||||
const item: SimpleItemWithColData = {
|
||||
canRead:
|
||||
gridDto.columnFormats.find((x: any) => x.fieldName === i.dataField)?.canRead ??
|
||||
false,
|
||||
canUpdate:
|
||||
gridDto.columnFormats.find((x: any) => x.fieldName === i.dataField)?.canUpdate ??
|
||||
false,
|
||||
canCreate:
|
||||
gridDto.columnFormats.find((x: any) => x.fieldName === i.dataField)?.canCreate ??
|
||||
false,
|
||||
canExport:
|
||||
gridDto.columnFormats.find((x: any) => x.fieldName === i.dataField)?.canExport ??
|
||||
false,
|
||||
canRead: colData?.canRead ?? false,
|
||||
canUpdate: colData?.canUpdate ?? false,
|
||||
canCreate: colData?.canCreate ?? false,
|
||||
canExport: colData?.canExport ?? false,
|
||||
dataField: i.dataField,
|
||||
name: i.dataField,
|
||||
editorType2: i.editorType2,
|
||||
|
|
@ -93,8 +88,17 @@ const CardItem = ({
|
|||
i.editorType2 == PlatformEditorTypes.dxGridBox ? 'dxDropDownBox' : i.editorType2,
|
||||
colSpan: i.colSpan,
|
||||
isRequired: i.isRequired,
|
||||
editorOptions,
|
||||
colData: gridDto.columnFormats.find((x) => x.fieldName === i.dataField),
|
||||
editorOptions: {
|
||||
...editorOptions,
|
||||
...(colData?.lookupDto?.dataSourceType
|
||||
? {
|
||||
dataSource: getCachedLookupDataSource(colData?.editorOptions, colData),
|
||||
valueExpr: colData?.lookupDto?.valueExpr?.toLowerCase(),
|
||||
displayExpr: colData?.lookupDto?.displayExpr?.toLowerCase(),
|
||||
}
|
||||
: {}),
|
||||
},
|
||||
colData,
|
||||
tagBoxOptions: i.tagBoxOptions,
|
||||
gridBoxOptions: i.gridBoxOptions,
|
||||
}
|
||||
|
|
@ -109,7 +113,7 @@ const CardItem = ({
|
|||
}),
|
||||
} as GroupItem
|
||||
})
|
||||
}, [gridDto])
|
||||
}, [gridDto, getCachedLookupDataSource])
|
||||
|
||||
const permissionResults: PermissionResults = {
|
||||
c:
|
||||
|
|
@ -186,6 +190,23 @@ const Card = ({ listFormCode, searchParams }: CardProps) => {
|
|||
const [pageSizeOptions, setPageSizeOptions] = useState<Option[]>([])
|
||||
const [dataSource, setDataSource] = useState<CustomStore>()
|
||||
|
||||
// ✅ Lookup cache burada (Card seviyesinde, tüm CardItem’lar ortak kullanır)
|
||||
const { getLookupDataSource } = useLookupDataSource({ listFormCode })
|
||||
const lookupCache = useRef<Map<string, any>>(new Map())
|
||||
|
||||
const getCachedLookupDataSource = useCallback(
|
||||
(editorOptions: any, colData: any) => {
|
||||
const key = colData?.fieldName
|
||||
if (!key) return null
|
||||
|
||||
if (!lookupCache.current.has(key)) {
|
||||
lookupCache.current.set(key, getLookupDataSource(editorOptions, colData))
|
||||
}
|
||||
return lookupCache.current.get(key)
|
||||
},
|
||||
[getLookupDataSource]
|
||||
)
|
||||
|
||||
const onPageSizeSelect = ({ value }: Option) => {
|
||||
setPageSize(value)
|
||||
setCurrentPage(1)
|
||||
|
|
@ -231,7 +252,8 @@ const Card = ({ listFormCode, searchParams }: CardProps) => {
|
|||
if (!gridDto) return
|
||||
|
||||
const pagerOptions = gridDto.gridOptions.pagerOptionDto
|
||||
const allowedSizes = pagerOptions?.allowedPageSizes
|
||||
const allowedSizes =
|
||||
pagerOptions?.allowedPageSizes
|
||||
?.split(',')
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !isNaN(n) && n > 0) || [10, 20, 50, 100]
|
||||
|
|
@ -271,6 +293,7 @@ const Card = ({ listFormCode, searchParams }: CardProps) => {
|
|||
listFormCode={listFormCode}
|
||||
dataSource={dataSource}
|
||||
refreshData={loadData}
|
||||
getCachedLookupDataSource={getCachedLookupDataSource} // 🔹 Prop olarak veriliyor
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
Loading…
Reference in a new issue