716 lines
24 KiB
TypeScript
716 lines
24 KiB
TypeScript
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||
|
|
import Container from '@/components/shared/Container'
|
||
|
|
import { Dialog, Notification, toast } from '@/components/ui'
|
||
|
|
import { DX_CLASSNAMES } from '@/constants/app.constant'
|
||
|
|
import { GridDto, ListFormCustomizationTypeEnum } from '@/proxy/form/models'
|
||
|
|
import {
|
||
|
|
getListFormCustomization,
|
||
|
|
postListFormCustomization,
|
||
|
|
} from '@/services/list-form-customization.service'
|
||
|
|
import { useListFormColumns } from '@/shared/useListFormColumns'
|
||
|
|
import { useListFormCustomDataSource } from '@/shared/useListFormCustomDataSource'
|
||
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
|
import useResponsive from '@/utils/hooks/useResponsive'
|
||
|
|
import { Template } from 'devextreme-react/core/template'
|
||
|
|
import TreeListDx, {
|
||
|
|
ColumnChooser,
|
||
|
|
ColumnFixing,
|
||
|
|
Editing,
|
||
|
|
FilterPanel,
|
||
|
|
FilterRow,
|
||
|
|
HeaderFilter,
|
||
|
|
IStateStoringProps,
|
||
|
|
LoadPanel,
|
||
|
|
Pager,
|
||
|
|
RemoteOperations,
|
||
|
|
Scrolling,
|
||
|
|
SearchPanel,
|
||
|
|
Selection,
|
||
|
|
Sorting,
|
||
|
|
StateStoring,
|
||
|
|
TreeListTypes,
|
||
|
|
} from 'devextreme-react/tree-list'
|
||
|
|
import { Item, Toolbar } from 'devextreme-react/toolbar'
|
||
|
|
import CustomStore from 'devextreme/data/custom_store'
|
||
|
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
||
|
|
import { Helmet } from 'react-helmet'
|
||
|
|
import { RowMode } from '../form/types'
|
||
|
|
import { GridColumnData } from './GridColumnData'
|
||
|
|
import GridFilterDialogs from './GridFilterDialogs'
|
||
|
|
import {
|
||
|
|
addCss,
|
||
|
|
addJs,
|
||
|
|
controlStyleCondition,
|
||
|
|
GridExtraFilterState,
|
||
|
|
setFormEditingExtraItemValues,
|
||
|
|
setGridPanelColor,
|
||
|
|
} from './Utils'
|
||
|
|
import { GridBoxEditorComponent } from './editors/GridBoxEditorComponent'
|
||
|
|
import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent'
|
||
|
|
import { useFilters } from './useFilters'
|
||
|
|
import { useToolbar } from './useToolbar'
|
||
|
|
import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
|
||
|
|
import { GridExtraFilterToolbar } from './GridExtraFilterToolbar'
|
||
|
|
import { getList } from '@/services/form.service'
|
||
|
|
|
||
|
|
interface TreeProps {
|
||
|
|
listFormCode: string
|
||
|
|
searchParams?: URLSearchParams
|
||
|
|
isSubForm?: boolean
|
||
|
|
level?: number
|
||
|
|
refreshData?: () => Promise<void>
|
||
|
|
gridDto?: GridDto
|
||
|
|
}
|
||
|
|
|
||
|
|
const statedGridPanelColor = 'rgba(50, 200, 200, 0.5)'
|
||
|
|
|
||
|
|
const Tree = (props: TreeProps) => {
|
||
|
|
const { listFormCode, searchParams, isSubForm, level, gridDto: extGridDto } = props
|
||
|
|
const { translate } = useLocalization()
|
||
|
|
const { smaller } = useResponsive()
|
||
|
|
|
||
|
|
const gridRef = useRef<TreeListDx>()
|
||
|
|
const refListFormCode = useRef('')
|
||
|
|
|
||
|
|
const [treeListDataSource, setTreeListDataSource] = useState<CustomStore<any, any>>()
|
||
|
|
const [columnData, setColumnData] = useState<GridColumnData[]>()
|
||
|
|
const [formData, setFormData] = useState<any>()
|
||
|
|
const [mode, setMode] = useState<RowMode>('view')
|
||
|
|
const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
|
||
|
|
const [gridDto, setGridDto] = useState<GridDto>()
|
||
|
|
const [isPopupFullScreen, setIsPopupFullScreen] = useState(false)
|
||
|
|
const [expandedRowKeys, setExpandedRowKeys] = useState<any[]>([])
|
||
|
|
|
||
|
|
const defaultSearchParams = useRef<string | null>(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const initializeTreeList = async () => {
|
||
|
|
const response = await getList({ listFormCode })
|
||
|
|
setGridDto(response.data)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (extGridDto === undefined) {
|
||
|
|
initializeTreeList()
|
||
|
|
} else {
|
||
|
|
setGridDto(extGridDto)
|
||
|
|
}
|
||
|
|
}, [listFormCode, extGridDto])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!defaultSearchParams.current) {
|
||
|
|
defaultSearchParams.current = searchParams?.get('filter') ?? null
|
||
|
|
}
|
||
|
|
}, [searchParams])
|
||
|
|
|
||
|
|
const { toolbarData, toolbarModalData, setToolbarModalData } = useToolbar({
|
||
|
|
gridDto,
|
||
|
|
listFormCode,
|
||
|
|
getSelectedRowKeys,
|
||
|
|
getSelectedRowsData,
|
||
|
|
refreshData,
|
||
|
|
getFilter,
|
||
|
|
})
|
||
|
|
|
||
|
|
const { filterToolbarData, ...filterData } = useFilters({
|
||
|
|
gridDto,
|
||
|
|
gridRef,
|
||
|
|
listFormCode,
|
||
|
|
})
|
||
|
|
|
||
|
|
const { createSelectDataSource } = useListFormCustomDataSource({ gridRef })
|
||
|
|
const { getBandedColumns } = useListFormColumns({
|
||
|
|
gridDto,
|
||
|
|
listFormCode,
|
||
|
|
isSubForm,
|
||
|
|
gridRef,
|
||
|
|
})
|
||
|
|
|
||
|
|
function extractSearchParamsFields(filter: any): [string, string, any][] {
|
||
|
|
if (!Array.isArray(filter)) return []
|
||
|
|
|
||
|
|
if (filter.length === 3 && typeof filter[0] === 'string') {
|
||
|
|
return [filter as [string, string, any]]
|
||
|
|
}
|
||
|
|
|
||
|
|
return filter.flatMap((f) => extractSearchParamsFields(f))
|
||
|
|
}
|
||
|
|
|
||
|
|
async function getSelectedRowKeys() {
|
||
|
|
const tree = gridRef.current?.instance
|
||
|
|
if (!tree) {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
|
||
|
|
return await tree.getSelectedRowKeys()
|
||
|
|
}
|
||
|
|
|
||
|
|
function getSelectedRowsData() {
|
||
|
|
const tree = gridRef.current?.instance
|
||
|
|
if (!tree) {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
|
||
|
|
return tree.getSelectedRowsData()
|
||
|
|
}
|
||
|
|
|
||
|
|
function refreshData() {
|
||
|
|
gridRef.current?.instance.refresh()
|
||
|
|
}
|
||
|
|
|
||
|
|
function getFilter() {
|
||
|
|
const tree = gridRef.current?.instance
|
||
|
|
if (!tree) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
return tree.getCombinedFilter()
|
||
|
|
}
|
||
|
|
|
||
|
|
function onSelectionChanged(data: any) {
|
||
|
|
const treeOpt = gridDto?.gridOptions
|
||
|
|
const tree = gridRef.current?.instance
|
||
|
|
if (!treeOpt || !tree) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (treeOpt.editingOptionDto?.allowDeleting) {
|
||
|
|
try {
|
||
|
|
const opt = tree.option('toolbar')
|
||
|
|
if (opt && opt.items && Array.isArray(opt.items)) {
|
||
|
|
const deleteSelectedRecordsIndex = opt.items
|
||
|
|
.map((e: any) => e.name)
|
||
|
|
.indexOf('deleteSelectedRecords')
|
||
|
|
|
||
|
|
if (deleteSelectedRecordsIndex >= 0) {
|
||
|
|
tree.option(
|
||
|
|
`toolbar.items[${deleteSelectedRecordsIndex}].options.visible`,
|
||
|
|
data.selectedRowsData.length > 1,
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error updating toolbar items:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data.selectedRowsData.length) {
|
||
|
|
setFormData(data.selectedRowsData[0])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onCellPrepared(e: any) {
|
||
|
|
const columnFormats = gridDto?.columnFormats
|
||
|
|
if (!columnFormats) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let indxCol = 0; indxCol < columnFormats.length; indxCol++) {
|
||
|
|
const colFormat = columnFormats[indxCol]
|
||
|
|
for (let indxStyl = 0; indxStyl < colFormat.columnStylingDto.length; indxStyl++) {
|
||
|
|
const colStyle = colFormat.columnStylingDto[indxStyl]
|
||
|
|
if (e.rowType == colStyle.rowType) {
|
||
|
|
if (colStyle.useRow || e.column.dataField == colFormat.fieldName) {
|
||
|
|
if (
|
||
|
|
!colStyle.conditionValue ||
|
||
|
|
controlStyleCondition(e.data, colFormat.fieldName, colStyle)
|
||
|
|
) {
|
||
|
|
if (colStyle.cssClassName) {
|
||
|
|
e.cellElement.addClass(colStyle.cssClassName)
|
||
|
|
}
|
||
|
|
if (colStyle.cssStyles) {
|
||
|
|
e.cellElement.attr('style', e.cellElement.attr('style') + ';' + colStyle.cssStyles)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onInitNewRow(e: any) {
|
||
|
|
if (!gridDto?.columnFormats) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
setMode('new')
|
||
|
|
setIsPopupFullScreen(gridDto?.gridOptions.editingOptionDto?.popup?.fullScreen ?? false)
|
||
|
|
|
||
|
|
for (const colFormat of gridDto?.columnFormats) {
|
||
|
|
if (!colFormat.fieldName) {
|
||
|
|
continue
|
||
|
|
}
|
||
|
|
|
||
|
|
if (colFormat.defaultValue != null) {
|
||
|
|
e.data[colFormat.fieldName] = colFormat.defaultValue
|
||
|
|
}
|
||
|
|
|
||
|
|
if (extraFilters.some((f) => f.fieldName === colFormat.fieldName)) {
|
||
|
|
continue
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!searchParams) {
|
||
|
|
continue
|
||
|
|
}
|
||
|
|
|
||
|
|
const rawFilter = searchParams?.get('filter')
|
||
|
|
if (rawFilter) {
|
||
|
|
const parsed = JSON.parse(rawFilter)
|
||
|
|
const filters = extractSearchParamsFields(parsed)
|
||
|
|
|
||
|
|
const hasFilter = filters.some(([field, op, val]) => field === colFormat.fieldName)
|
||
|
|
|
||
|
|
if (hasFilter) {
|
||
|
|
const fieldMatch = filters.find(([field, op, val]) => field === colFormat.fieldName)
|
||
|
|
|
||
|
|
if (fieldMatch) {
|
||
|
|
const [, , val] = fieldMatch
|
||
|
|
const dType = colFormat.dataType as any
|
||
|
|
|
||
|
|
switch (dType) {
|
||
|
|
case 'date':
|
||
|
|
case 'datetime':
|
||
|
|
e.data[colFormat.fieldName] = new Date(val)
|
||
|
|
break
|
||
|
|
case 'number':
|
||
|
|
e.data[colFormat.fieldName] = Number(val)
|
||
|
|
break
|
||
|
|
case 'boolean':
|
||
|
|
e.data[colFormat.fieldName] = val === true || val === 'true'
|
||
|
|
break
|
||
|
|
case 'object':
|
||
|
|
try {
|
||
|
|
e.data[colFormat.fieldName] = JSON.parse(val)
|
||
|
|
} catch {}
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
e.data[colFormat.fieldName] = val
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onRowInserting(e: TreeListTypes.RowInsertingEvent) {
|
||
|
|
e.data = setFormEditingExtraItemValues(e.data)
|
||
|
|
}
|
||
|
|
|
||
|
|
function onRowUpdating(e: TreeListTypes.RowUpdatingEvent) {
|
||
|
|
if (gridDto?.gridOptions.editingOptionDto?.sendOnlyChangedFormValuesUpdate) {
|
||
|
|
if (Object.keys(e.newData).some((a) => a.includes(':'))) {
|
||
|
|
Object.keys(e.oldData).forEach((col) => {
|
||
|
|
if (col.includes(':')) {
|
||
|
|
e.newData[col] = e.newData[col] ?? e.oldData[col]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
e.newData = setFormEditingExtraItemValues(e.newData)
|
||
|
|
} else {
|
||
|
|
let newData = { ...e.oldData, ...e.newData }
|
||
|
|
newData = setFormEditingExtraItemValues(newData)
|
||
|
|
Object.keys(newData).forEach((key) => {
|
||
|
|
if (key.includes(':')) {
|
||
|
|
delete newData[key]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
e.newData = newData
|
||
|
|
}
|
||
|
|
|
||
|
|
if (gridDto?.gridOptions.keyFieldName) {
|
||
|
|
delete e.newData[gridDto?.gridOptions.keyFieldName]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onEditingStart(e: TreeListTypes.EditingStartEvent) {
|
||
|
|
setMode('edit')
|
||
|
|
setIsPopupFullScreen(gridDto?.gridOptions.editingOptionDto?.popup?.fullScreen ?? false)
|
||
|
|
const columns = e.component.option('columns') as GridColumnData[]
|
||
|
|
columns?.forEach((col) => {
|
||
|
|
if (!col.dataField?.includes(':')) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const field = col.dataField.split(':')
|
||
|
|
if (!e.data[field[0]]) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const json = JSON.parse(e.data[field[0]])
|
||
|
|
e.data[col.dataField] = json[field[1]]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function onDataErrorOccurred(e: TreeListTypes.DataErrorOccurredEvent) {
|
||
|
|
toast.push(
|
||
|
|
<Notification type="danger" duration={2000}>
|
||
|
|
{e.error?.message}
|
||
|
|
</Notification>,
|
||
|
|
{
|
||
|
|
placement: 'top-end',
|
||
|
|
},
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const customSaveState = useCallback(
|
||
|
|
(state: any) =>
|
||
|
|
postListFormCustomization({
|
||
|
|
listFormCode: listFormCode,
|
||
|
|
customizationType: ListFormCustomizationTypeEnum.GridState,
|
||
|
|
filterName: `tree-${gridRef.current?.instance.option('stateStoring')?.storageKey ?? ''}`,
|
||
|
|
customizationData: JSON.stringify(state),
|
||
|
|
}).then(() => {
|
||
|
|
setGridPanelColor(statedGridPanelColor)
|
||
|
|
}),
|
||
|
|
[listFormCode],
|
||
|
|
)
|
||
|
|
|
||
|
|
const customLoadState = useCallback(
|
||
|
|
() =>
|
||
|
|
getListFormCustomization(
|
||
|
|
listFormCode,
|
||
|
|
ListFormCustomizationTypeEnum.GridState,
|
||
|
|
`tree-${gridRef.current?.instance.option('stateStoring')?.storageKey ?? ''}`,
|
||
|
|
).then((response: any) => {
|
||
|
|
setGridPanelColor(statedGridPanelColor)
|
||
|
|
if (response.data?.length > 0) {
|
||
|
|
return JSON.parse(response.data[0].customizationData)
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
[listFormCode],
|
||
|
|
)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (gridRef?.current) {
|
||
|
|
gridRef.current.instance.option('columns', undefined)
|
||
|
|
gridRef.current.instance.option('dataSource', undefined)
|
||
|
|
gridRef.current.instance.state(null)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (refListFormCode.current !== listFormCode) {
|
||
|
|
setExtraFilters([])
|
||
|
|
}
|
||
|
|
}, [listFormCode])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!gridDto) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const treeOpt = gridDto.gridOptions
|
||
|
|
if (treeOpt.customJsSources.length) {
|
||
|
|
for (const js of treeOpt.customJsSources) {
|
||
|
|
addJs(js)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (treeOpt.customStyleSources.length) {
|
||
|
|
for (const css of treeOpt.customStyleSources) {
|
||
|
|
addCss(css)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (gridDto?.gridOptions.extraFilterDto) {
|
||
|
|
setExtraFilters(
|
||
|
|
gridDto.gridOptions.extraFilterDto.map((f) => ({
|
||
|
|
fieldName: f.fieldName,
|
||
|
|
operator: f.operator,
|
||
|
|
controlType: f.controlType,
|
||
|
|
value: f.defaultValue ?? '',
|
||
|
|
})),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (gridDto.gridOptions.editingOptionDto?.popup) {
|
||
|
|
setIsPopupFullScreen(gridDto.gridOptions.editingOptionDto?.popup?.fullScreen ?? false)
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set initial expanded row keys
|
||
|
|
if (gridDto.gridOptions.treeOptionDto?.expandedRowKeys) {
|
||
|
|
setExpandedRowKeys(gridDto.gridOptions.treeOptionDto.expandedRowKeys)
|
||
|
|
} else if (gridDto.gridOptions.treeOptionDto?.autoExpandAll) {
|
||
|
|
setExpandedRowKeys([])
|
||
|
|
}
|
||
|
|
}, [gridDto])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!gridDto) return
|
||
|
|
|
||
|
|
const cols = getBandedColumns()
|
||
|
|
setColumnData(cols)
|
||
|
|
|
||
|
|
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams, cols)
|
||
|
|
setTreeListDataSource(dataSource)
|
||
|
|
}, [gridDto, searchParams])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const activeFilters = extraFilters.filter((f) => f.value)
|
||
|
|
|
||
|
|
let base: any = null
|
||
|
|
if (defaultSearchParams.current) {
|
||
|
|
base = JSON.parse(defaultSearchParams.current)
|
||
|
|
}
|
||
|
|
|
||
|
|
const baseTriplets = extractSearchParamsFields(base)
|
||
|
|
|
||
|
|
const extraTriplets = activeFilters.map(
|
||
|
|
(f) => [f.fieldName, f.operator, f.value] as [string, string, any],
|
||
|
|
)
|
||
|
|
|
||
|
|
const merged = [...baseTriplets, ...extraTriplets].reduce(
|
||
|
|
(acc, cur) => {
|
||
|
|
const [field, op] = cur
|
||
|
|
const idx = acc.findIndex((a) => a[0] === field && a[1] === op)
|
||
|
|
if (idx >= 0) {
|
||
|
|
acc[idx] = cur
|
||
|
|
} else {
|
||
|
|
acc.push(cur)
|
||
|
|
}
|
||
|
|
return acc
|
||
|
|
},
|
||
|
|
[] as [string, string, any][],
|
||
|
|
)
|
||
|
|
|
||
|
|
let filter: any = null
|
||
|
|
if (merged.length === 1) {
|
||
|
|
filter = merged[0]
|
||
|
|
} else if (merged.length > 1) {
|
||
|
|
filter = merged.reduce((acc, f, idx) => {
|
||
|
|
if (idx === 0) return f
|
||
|
|
return [acc, 'and', f]
|
||
|
|
}, null as any)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (filter) {
|
||
|
|
searchParams?.set('filter', JSON.stringify(filter))
|
||
|
|
} else {
|
||
|
|
searchParams?.delete('filter')
|
||
|
|
}
|
||
|
|
|
||
|
|
gridRef.current?.instance.refresh()
|
||
|
|
}, [extraFilters])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
refListFormCode.current = listFormCode
|
||
|
|
if (!gridRef?.current) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
gridRef.current.instance.option('columns', columnData as any)
|
||
|
|
gridRef.current.instance.option('dataSource', treeListDataSource)
|
||
|
|
|
||
|
|
const stateStoring: IStateStoringProps = {
|
||
|
|
enabled: gridDto?.gridOptions.stateStoringDto?.enabled,
|
||
|
|
type: gridDto?.gridOptions.stateStoringDto?.type,
|
||
|
|
savingTimeout: gridDto?.gridOptions.stateStoringDto?.savingTimeout,
|
||
|
|
storageKey: gridDto?.gridOptions.stateStoringDto?.storageKey,
|
||
|
|
}
|
||
|
|
if (
|
||
|
|
gridDto?.gridOptions.stateStoringDto?.enabled &&
|
||
|
|
gridDto?.gridOptions.stateStoringDto?.type === 'custom'
|
||
|
|
) {
|
||
|
|
stateStoring.customSave = customSaveState
|
||
|
|
stateStoring.customLoad = customLoadState
|
||
|
|
}
|
||
|
|
gridRef.current.instance.option('stateStoring', stateStoring)
|
||
|
|
}, [columnData])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<WidgetGroup widgetGroups={gridDto?.widgets ?? []} />
|
||
|
|
|
||
|
|
<Container className={DX_CLASSNAMES}>
|
||
|
|
{!isSubForm && (
|
||
|
|
<Helmet
|
||
|
|
titleTemplate="%s | Erp Platform"
|
||
|
|
title={translate('::' + gridDto?.gridOptions.title)}
|
||
|
|
defaultTitle="Erp Platform"
|
||
|
|
></Helmet>
|
||
|
|
)}
|
||
|
|
{gridDto && columnData && (
|
||
|
|
<div className="p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 ">
|
||
|
|
<TreeListDx
|
||
|
|
ref={gridRef as any}
|
||
|
|
id={'TreeList-' + listFormCode}
|
||
|
|
height={gridDto.gridOptions.height || 'calc(100vh - 150px)'}
|
||
|
|
width={gridDto.gridOptions.width || '100%'}
|
||
|
|
dataStructure="plain"
|
||
|
|
keyExpr={gridDto.gridOptions.keyFieldName}
|
||
|
|
parentIdExpr={gridDto.gridOptions.treeOptionDto?.parentIdExpr || 'parentId'}
|
||
|
|
hasItemsExpr={gridDto.gridOptions.treeOptionDto?.hasItemsExpr}
|
||
|
|
rootValue={
|
||
|
|
gridDto.gridOptions.treeOptionDto?.rootValue === '' ||
|
||
|
|
gridDto.gridOptions.treeOptionDto?.rootValue === undefined
|
||
|
|
? null
|
||
|
|
: gridDto.gridOptions.treeOptionDto?.rootValue
|
||
|
|
}
|
||
|
|
{...(!gridDto.gridOptions.treeOptionDto?.autoExpandAll && {
|
||
|
|
expandedRowKeys: expandedRowKeys,
|
||
|
|
onRowExpanding: (e: any) => {
|
||
|
|
setExpandedRowKeys((prev) => [...prev, e.key])
|
||
|
|
},
|
||
|
|
onRowCollapsing: (e: any) => {
|
||
|
|
setExpandedRowKeys((prev) => prev.filter((k) => k !== e.key))
|
||
|
|
},
|
||
|
|
})}
|
||
|
|
autoExpandAll={gridDto.gridOptions.treeOptionDto?.autoExpandAll || false}
|
||
|
|
allowColumnResizing={gridDto.gridOptions.columnOptionDto?.allowColumnResizing}
|
||
|
|
allowColumnReordering={gridDto.gridOptions.columnOptionDto?.allowColumnReordering}
|
||
|
|
showBorders={gridDto.gridOptions.columnOptionDto?.showBorders}
|
||
|
|
showRowLines={gridDto.gridOptions.columnOptionDto?.showRowLines}
|
||
|
|
showColumnLines={gridDto.gridOptions.columnOptionDto?.showColumnLines}
|
||
|
|
columnResizingMode={gridDto.gridOptions.columnOptionDto?.columnResizingMode}
|
||
|
|
columnAutoWidth={gridDto.gridOptions.columnOptionDto?.columnAutoWidth}
|
||
|
|
rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
|
||
|
|
rowAlternationEnabled={gridDto.gridOptions.columnOptionDto?.rowAlternationEnabled}
|
||
|
|
hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
|
||
|
|
columnHidingEnabled={gridDto.gridOptions.columnOptionDto?.columnHidingEnabled}
|
||
|
|
focusedRowEnabled={gridDto.gridOptions.columnOptionDto?.focusedRowEnabled}
|
||
|
|
showColumnHeaders={gridDto.gridOptions.columnOptionDto?.showColumnHeaders}
|
||
|
|
filterSyncEnabled={true}
|
||
|
|
onSelectionChanged={onSelectionChanged}
|
||
|
|
onInitNewRow={onInitNewRow}
|
||
|
|
onCellPrepared={onCellPrepared}
|
||
|
|
onRowInserting={onRowInserting}
|
||
|
|
onRowUpdating={onRowUpdating}
|
||
|
|
onEditingStart={onEditingStart}
|
||
|
|
onDataErrorOccurred={onDataErrorOccurred}
|
||
|
|
onEditCanceled={() => {
|
||
|
|
setMode('view')
|
||
|
|
setIsPopupFullScreen(false)
|
||
|
|
}}
|
||
|
|
onSaved={() => {
|
||
|
|
setMode('view')
|
||
|
|
setIsPopupFullScreen(false)
|
||
|
|
}}
|
||
|
|
onRowInserted={() => {
|
||
|
|
props.refreshData?.()
|
||
|
|
}}
|
||
|
|
onRowUpdated={() => {
|
||
|
|
props.refreshData?.()
|
||
|
|
}}
|
||
|
|
onRowRemoved={() => {
|
||
|
|
props.refreshData?.()
|
||
|
|
}}
|
||
|
|
onContentReady={(e) => {
|
||
|
|
// Restore expanded keys after data refresh (only if autoExpandAll is false)
|
||
|
|
if (
|
||
|
|
!gridDto.gridOptions.treeOptionDto?.autoExpandAll &&
|
||
|
|
expandedRowKeys.length > 0
|
||
|
|
) {
|
||
|
|
e.component.option('expandedRowKeys', expandedRowKeys)
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<RemoteOperations filtering={true} sorting={true} grouping={false} />
|
||
|
|
<Editing
|
||
|
|
refreshMode={gridDto.gridOptions.editingOptionDto?.refreshMode}
|
||
|
|
mode={smaller.md ? 'form' : gridDto.gridOptions.editingOptionDto?.mode}
|
||
|
|
allowDeleting={gridDto.gridOptions.editingOptionDto?.allowDeleting}
|
||
|
|
allowUpdating={gridDto.gridOptions.editingOptionDto?.allowUpdating}
|
||
|
|
allowAdding={gridDto.gridOptions.editingOptionDto?.allowAdding}
|
||
|
|
useIcons={gridDto.gridOptions.editingOptionDto?.useIcons}
|
||
|
|
popup={{
|
||
|
|
title:
|
||
|
|
(mode === 'new' ? '✚ ' : '🖊️ ') +
|
||
|
|
translate('::' + gridDto.gridOptions.editingOptionDto?.popup?.title),
|
||
|
|
showTitle: gridDto.gridOptions.editingOptionDto?.popup?.showTitle,
|
||
|
|
hideOnOutsideClick:
|
||
|
|
gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
|
||
|
|
width: gridDto.gridOptions.editingOptionDto?.popup?.width,
|
||
|
|
height: gridDto.gridOptions.editingOptionDto?.popup?.height,
|
||
|
|
resizeEnabled: gridDto.gridOptions.editingOptionDto?.popup?.resizeEnabled,
|
||
|
|
fullScreen: isPopupFullScreen,
|
||
|
|
toolbarItems: [
|
||
|
|
{
|
||
|
|
widget: 'dxButton',
|
||
|
|
toolbar: 'top',
|
||
|
|
location: 'after',
|
||
|
|
options: {
|
||
|
|
icon: isPopupFullScreen ? 'collapse' : 'fullscreen',
|
||
|
|
hint: isPopupFullScreen
|
||
|
|
? translate('::Normal Boyut')
|
||
|
|
: translate('::Tam Ekran'),
|
||
|
|
stylingMode: 'text',
|
||
|
|
onClick: () => setIsPopupFullScreen(!isPopupFullScreen),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Template name={'cellEditTagBox'} render={TagBoxEditorComponent} />
|
||
|
|
<Template name={'cellEditGridBox'} render={GridBoxEditorComponent} />
|
||
|
|
<Template name="extraFilters">
|
||
|
|
<GridExtraFilterToolbar
|
||
|
|
filters={gridDto?.gridOptions.extraFilterDto ?? []}
|
||
|
|
extraFilters={extraFilters}
|
||
|
|
setExtraFilters={setExtraFilters}
|
||
|
|
/>
|
||
|
|
</Template>
|
||
|
|
<Toolbar
|
||
|
|
visible={(toolbarData?.length ?? 0) > 0 || (filterToolbarData?.length ?? 0) > 0}
|
||
|
|
>
|
||
|
|
{toolbarData?.map((item) => (
|
||
|
|
<Item key={item.name} {...item} />
|
||
|
|
))}
|
||
|
|
{filterToolbarData?.map((item) => (
|
||
|
|
<Item key={item.name} {...item} />
|
||
|
|
))}
|
||
|
|
{gridDto?.gridOptions.extraFilterDto?.length ? (
|
||
|
|
<Item location="before" template="extraFilters" cssClass="no-default" />
|
||
|
|
) : null}
|
||
|
|
</Toolbar>
|
||
|
|
<Sorting mode={gridDto.gridOptions?.sortMode}></Sorting>
|
||
|
|
<FilterRow
|
||
|
|
visible={gridDto.gridOptions.filterRowDto?.visible}
|
||
|
|
applyFilter={gridDto.gridOptions.filterRowDto?.applyFilter}
|
||
|
|
></FilterRow>
|
||
|
|
<FilterPanel visible={gridDto.gridOptions.filterPanelDto.visible}></FilterPanel>
|
||
|
|
<HeaderFilter visible={gridDto.gridOptions.headerFilterDto.visible}></HeaderFilter>
|
||
|
|
<SearchPanel
|
||
|
|
visible={gridDto.gridOptions.searchPanelDto.visible}
|
||
|
|
width={gridDto.gridOptions.searchPanelDto.width}
|
||
|
|
></SearchPanel>
|
||
|
|
<Selection
|
||
|
|
mode={gridDto.gridOptions.selectionDto?.mode}
|
||
|
|
recursive={gridDto.gridOptions.treeOptionDto?.recursiveSelection || false}
|
||
|
|
></Selection>
|
||
|
|
<Pager
|
||
|
|
visible={gridDto.gridOptions.pagerOptionDto?.visible}
|
||
|
|
allowedPageSizes={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
|
||
|
|
?.split(',')
|
||
|
|
.map((a: any) => +a)}
|
||
|
|
showPageSizeSelector={gridDto.gridOptions.pagerOptionDto?.showPageSizeSelector}
|
||
|
|
showInfo={gridDto.gridOptions.pagerOptionDto?.showInfo}
|
||
|
|
showNavigationButtons={gridDto.gridOptions.pagerOptionDto?.showNavigationButtons}
|
||
|
|
infoText={gridDto.gridOptions.pagerOptionDto?.infoText}
|
||
|
|
displayMode={gridDto.gridOptions.pagerOptionDto?.displayMode}
|
||
|
|
></Pager>
|
||
|
|
<ColumnChooser
|
||
|
|
enabled={gridDto.gridOptions.columnOptionDto?.columnChooserEnabled}
|
||
|
|
mode={gridDto.gridOptions.columnOptionDto?.columnChooserMode}
|
||
|
|
></ColumnChooser>
|
||
|
|
<ColumnFixing
|
||
|
|
enabled={gridDto.gridOptions.columnOptionDto?.columnFixingEnabled}
|
||
|
|
></ColumnFixing>
|
||
|
|
<Scrolling mode={gridDto.gridOptions.pagerOptionDto?.scrollingMode}></Scrolling>
|
||
|
|
<LoadPanel
|
||
|
|
enabled={gridDto.gridOptions.pagerOptionDto?.loadPanelEnabled}
|
||
|
|
text={gridDto.gridOptions.pagerOptionDto?.loadPanelText}
|
||
|
|
></LoadPanel>
|
||
|
|
</TreeListDx>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Dialog
|
||
|
|
isOpen={toolbarModalData?.open || false}
|
||
|
|
onClose={() => setToolbarModalData(undefined)}
|
||
|
|
onRequestClose={() => setToolbarModalData(undefined)}
|
||
|
|
>
|
||
|
|
{toolbarModalData?.content}
|
||
|
|
</Dialog>
|
||
|
|
<GridFilterDialogs gridRef={gridRef as any} listFormCode={listFormCode} {...filterData} />
|
||
|
|
</Container>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Tree
|