611 lines
20 KiB
TypeScript
611 lines
20 KiB
TypeScript
import { DataGridTypes } from 'devextreme-react/data-grid'
|
||
import { DataType, HorizontalEdge, SortOrder, ValidationRule } from 'devextreme/common'
|
||
import CustomStore from 'devextreme/data/custom_store'
|
||
import { SelectedFilterOperation } from 'devextreme/ui/data_grid'
|
||
import { useEffect } from 'react'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
import { usePermission } from '@/utils/hooks/usePermission'
|
||
import { usePWA } from '@/utils/hooks/usePWA'
|
||
import { useDialogContext } from '../shared/DialogContext'
|
||
import { dynamicFetch } from '@/services/form.service'
|
||
import { GridColumnData } from './GridColumnData'
|
||
import {
|
||
ColumnFormatDto,
|
||
EditingFormItemDto,
|
||
GridDto,
|
||
PlatformEditorTypes,
|
||
UiCommandButtonPositionTypeEnum,
|
||
UiLookupDataSourceTypeEnum,
|
||
} from '@/proxy/form/models'
|
||
import { addCss } from './Utils'
|
||
|
||
const cellTemplateMultiValue = (
|
||
cellElement: HTMLElement,
|
||
cellInfo: DataGridTypes.ColumnCellTemplateData<any, any>,
|
||
) => {
|
||
if (cellInfo?.value) {
|
||
const values = Array.isArray(cellInfo.value)
|
||
? cellInfo.value.map((a: any) => {
|
||
const { lookup } = cellInfo.column
|
||
if (lookup && lookup.calculateCellValue) {
|
||
return lookup.calculateCellValue(a)
|
||
}
|
||
return ''
|
||
})
|
||
: [cellInfo.value]
|
||
|
||
// Badge benzeri HTML üret
|
||
const html = values
|
||
.filter((v) => v)
|
||
.map(
|
||
(v) => `
|
||
<div
|
||
style="
|
||
display:inline-block;
|
||
background-color:#dc3545;
|
||
color:#fff;
|
||
border-radius:12px;
|
||
padding:2px 8px;
|
||
margin:2px 2px;
|
||
font-size:12px;
|
||
font-weight:300;
|
||
line-height:1.4;
|
||
white-space:nowrap;
|
||
"
|
||
>
|
||
${v}
|
||
</div>
|
||
`,
|
||
)
|
||
.join('')
|
||
|
||
cellElement.innerHTML = html
|
||
cellElement.title = values.join(',')
|
||
}
|
||
}
|
||
|
||
function calculateFilterExpressionMultiValue(
|
||
this: DataGridTypes.Column,
|
||
filterValue: any,
|
||
selectedFilterOperation: string | null,
|
||
): string | Array<any> {
|
||
if (filterValue) {
|
||
if (selectedFilterOperation == '=' || selectedFilterOperation === null) {
|
||
return [this.dataField, 'contains', filterValue]
|
||
} else if (selectedFilterOperation == '<>') {
|
||
return [this.dataField, 'notcontains', filterValue]
|
||
} else {
|
||
return [this.dataField, selectedFilterOperation, filterValue]
|
||
}
|
||
} else {
|
||
// filterValue null ise isblank veya isnotblank secilmistir
|
||
if (selectedFilterOperation === '=') {
|
||
return [
|
||
this.dataField,
|
||
selectedFilterOperation,
|
||
filterValue,
|
||
'or',
|
||
this.dataField,
|
||
selectedFilterOperation,
|
||
' ',
|
||
]
|
||
} else if (selectedFilterOperation === '<>') {
|
||
return [
|
||
this.dataField,
|
||
selectedFilterOperation,
|
||
filterValue,
|
||
'and',
|
||
this.dataField,
|
||
selectedFilterOperation,
|
||
' ',
|
||
]
|
||
} else {
|
||
return [this.dataField, selectedFilterOperation, filterValue]
|
||
}
|
||
}
|
||
}
|
||
|
||
// lookup cache (module scope)
|
||
const __lookupCache = new Map<string, Promise<any[]>>()
|
||
|
||
const cachedLoader = (key: string, loader: () => Promise<any[]>) => {
|
||
if (__lookupCache.has(key)) return __lookupCache.get(key)!
|
||
const p = Promise.resolve()
|
||
.then(() => loader())
|
||
.then((res) => res ?? [])
|
||
.catch((err) => {
|
||
__lookupCache.delete(key) // hata olursa tekrar denenebilsin
|
||
throw err
|
||
})
|
||
__lookupCache.set(key, p)
|
||
return p
|
||
}
|
||
|
||
const useListFormColumns = ({
|
||
gridDto,
|
||
listFormCode,
|
||
isSubForm,
|
||
gridRef,
|
||
}: {
|
||
gridDto?: GridDto
|
||
listFormCode: string
|
||
isSubForm?: boolean
|
||
gridRef?: any
|
||
}) => {
|
||
const dialog: any = useDialogContext()
|
||
const { translate } = useLocalization()
|
||
const { checkPermission } = usePermission()
|
||
const isPwaMode = usePWA()
|
||
|
||
useEffect(() => {
|
||
// listFormCode değişince lookup cache temizlensin (farklı form farklı lookuplar)
|
||
__lookupCache.clear()
|
||
}, [listFormCode])
|
||
|
||
const lookupDataSource = (options: any, colData: any, listFormCode: string) => {
|
||
const { lookupDto } = colData
|
||
const filters = []
|
||
if (lookupDto.cascadeParentFields) {
|
||
if (lookupDto.dataSourceType == UiLookupDataSourceTypeEnum.StaticData) {
|
||
filters.push([
|
||
lookupDto?.cascadeRelationField,
|
||
lookupDto?.cascadeFilterOperator,
|
||
options?.data[lookupDto?.cascadeParentField],
|
||
])
|
||
//TODO: Statik data test edilecek
|
||
} else {
|
||
const data = options?.data ?? options
|
||
for (const cascadeParentField of lookupDto.cascadeParentFields.split(',')) {
|
||
filters.push(data[cascadeParentField])
|
||
}
|
||
}
|
||
}
|
||
//UiLookupDataSourceTypeEnum :
|
||
// Data = 1 (Statik Data),
|
||
// Query = 2 (API'den geliyor fakat API query çalıştırıyor)
|
||
// WebService = 3 (API servisten geliyor)
|
||
if (lookupDto.dataSourceType == UiLookupDataSourceTypeEnum.StaticData) {
|
||
return createLookupStaticDataSource(
|
||
() => JSON.parse(lookupDto?.lookupQuery),
|
||
filters.length ? filters : null,
|
||
`static:${listFormCode}:${colData.fieldName}`, // cache key
|
||
)
|
||
} else if (lookupDto.dataSourceType == UiLookupDataSourceTypeEnum.Query) {
|
||
return createLookupQueryDataSource(listFormCode, colData.fieldName, filters)
|
||
} else if (lookupDto.dataSourceType == UiLookupDataSourceTypeEnum.WebService) {
|
||
return createLookupApiDataSource(
|
||
listFormCode,
|
||
lookupDto?.lookupQuery,
|
||
filters,
|
||
colData.lookupDto?.valueExpr?.toLowerCase(),
|
||
)
|
||
} else {
|
||
return {
|
||
store: [],
|
||
}
|
||
}
|
||
}
|
||
|
||
const createLookupStaticDataSource = (
|
||
load: () => any,
|
||
filter: any = null,
|
||
key: any = 'static',
|
||
sort: any = 'name',
|
||
) => ({
|
||
store: new CustomStore({
|
||
key,
|
||
loadMode: 'raw',
|
||
load: async (loadOptions) => {
|
||
// load fonksiyonu sync sonuç döndürüyor olabilir, o yüzden Promise.resolve ile sar
|
||
return cachedLoader(`static:${key}`, () => Promise.resolve(load()))
|
||
},
|
||
}),
|
||
sort,
|
||
filter,
|
||
})
|
||
|
||
const createLookupQueryDataSource = (
|
||
listFormCode?: string,
|
||
listFormFieldName?: string,
|
||
filters?: any[],
|
||
) => {
|
||
return new CustomStore({
|
||
loadMode: 'raw',
|
||
load: async (loadOptions) => {
|
||
if (!isSubForm && listFormCode && !window.location.pathname.includes(listFormCode)) {
|
||
return
|
||
}
|
||
|
||
try {
|
||
const cacheKey = `query:${listFormCode}:${listFormFieldName}:${JSON.stringify(filters ?? null)}`
|
||
return cachedLoader(cacheKey, async () => {
|
||
const response = await dynamicFetch('list-form-select/lookup', 'POST', null, {
|
||
listFormCode,
|
||
listFormFieldName,
|
||
filters,
|
||
})
|
||
|
||
return (response.data ?? []).map((a: any) => ({
|
||
key: a.Key,
|
||
name: a.Name,
|
||
group: a.Group,
|
||
}))
|
||
})
|
||
} catch (error: any) {
|
||
return null
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const createLookupApiDataSource = (
|
||
listFormCode?: string,
|
||
lookupQuery?: string,
|
||
filters?: any[],
|
||
keyName?: string,
|
||
) => {
|
||
return new CustomStore({
|
||
key: keyName,
|
||
loadMode: 'raw',
|
||
load: async (loadOptions) => {
|
||
if (!isSubForm && listFormCode && !window.location.pathname.includes(listFormCode)) {
|
||
return
|
||
}
|
||
if (!lookupQuery) {
|
||
return
|
||
}
|
||
|
||
const [method, url, body, keySelector, nameSelector, groupSelector] = lookupQuery.split(';')
|
||
|
||
// body içindeki @paramN'leri filtrelerle değiştir
|
||
let resolvedBody = body
|
||
if (filters?.length) {
|
||
for (let i = 0; i < filters.length; i++) {
|
||
resolvedBody = resolvedBody.replace(new RegExp(`@param${i}`, 'g'), filters[i])
|
||
}
|
||
}
|
||
|
||
try {
|
||
const cacheKey = `api:${lookupQuery}:${JSON.stringify(filters ?? null)}`
|
||
return cachedLoader(cacheKey, async () => {
|
||
const response = await dynamicFetch(url, method, null, resolvedBody)
|
||
let { data } = response
|
||
if (!data) return []
|
||
if (!Array.isArray(data)) data = [data]
|
||
return data.map((a: any) => ({
|
||
key: eval(keySelector),
|
||
name: eval(nameSelector),
|
||
group: eval(groupSelector),
|
||
}))
|
||
})
|
||
} catch {
|
||
return
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const getCommandColumn = (): GridColumnData | undefined => {
|
||
if (!gridDto) {
|
||
return
|
||
}
|
||
|
||
const hasUpdate =
|
||
gridDto.gridOptions.editingOptionDto.allowUpdating &&
|
||
checkPermission(gridDto.gridOptions.permissionDto.u)
|
||
|
||
const hasDelete =
|
||
gridDto.gridOptions.editingOptionDto.allowDeleting &&
|
||
checkPermission(gridDto.gridOptions.permissionDto.d)
|
||
|
||
const hasCommandButtons = gridDto.gridOptions.commandColumnDto.length > 0
|
||
|
||
// Eğer hiçbir buton eklenecek durumda değilse: çık
|
||
if (!hasUpdate && !hasDelete && !hasCommandButtons) {
|
||
return
|
||
}
|
||
|
||
const column = {
|
||
type: 'buttons',
|
||
width: 'auto',
|
||
buttons: [] as any,
|
||
}
|
||
|
||
if (hasUpdate) {
|
||
column.buttons.push('edit')
|
||
}
|
||
|
||
if (hasDelete) {
|
||
column.buttons.push('delete')
|
||
}
|
||
|
||
gridDto.gridOptions.commandColumnDto.forEach((action) => {
|
||
if (action.buttonPosition !== UiCommandButtonPositionTypeEnum.CommandColumn) return
|
||
if (!checkPermission(action.authName)) return
|
||
|
||
const item = {
|
||
visible: true,
|
||
hint: action.hint,
|
||
icon: action.icon,
|
||
text: translate('::' + action.text),
|
||
onClick: (e: any) => {
|
||
if (typeof e.event?.preventDefault === 'function') {
|
||
e.event.preventDefault()
|
||
}
|
||
|
||
if (action.url) {
|
||
let url = action.url?.replace('@LISTFORMCODE', listFormCode)
|
||
gridDto.columnFormats.forEach((field) => {
|
||
if (field.fieldName) {
|
||
url = url.replace(`@${field.fieldName}`, e.row.data[field.fieldName])
|
||
}
|
||
})
|
||
window.open(url, isPwaMode ? '_self' : action.urlTarget)
|
||
} else if (action.dialogName) {
|
||
if (action.dialogParameters) {
|
||
const dynamicMap = JSON.parse(action.dialogParameters)
|
||
for (const [key, value] of Object.entries<string>(dynamicMap)) {
|
||
dynamicMap[key] = value.startsWith('@') ? e.row.data[value.replace('@', '')] : value
|
||
}
|
||
dialog.setConfig({
|
||
component: action.dialogName,
|
||
props: dynamicMap,
|
||
onClose: () => {
|
||
// Dialog kapandığında grid'i yenile
|
||
if (gridRef?.current?.instance) {
|
||
gridRef.current.instance.refresh()
|
||
}
|
||
},
|
||
})
|
||
}
|
||
} else if (action.onClick) {
|
||
eval(action.onClick)
|
||
}
|
||
},
|
||
}
|
||
|
||
column.buttons.push(item)
|
||
})
|
||
|
||
return column as GridColumnData
|
||
}
|
||
|
||
const getColumns = (columnFormats: ColumnFormatDto[]) => {
|
||
const columns: GridColumnData[] = []
|
||
|
||
if (!gridDto || !columnFormats) {
|
||
return columns
|
||
}
|
||
columnFormats.forEach((colData) => {
|
||
if (!colData.canRead || !colData.isActive) {
|
||
return
|
||
}
|
||
const column: GridColumnData = {}
|
||
column.colData = colData // Onemli: Baska event-callback lerde kullanmak icin eklendi, colData.lookupDto?.editorTemplateType
|
||
//column.showEditorAlways = true
|
||
column.dataField = colData.fieldName
|
||
if (colData.dataType) column.dataType = colData.dataType as DataType
|
||
if (colData.captionName) column.caption = translate('::' + colData.captionName)
|
||
if (colData.width > 0) column.width = colData.width
|
||
column.visible = colData.visible
|
||
|
||
column.alignment = colData.alignment
|
||
column.format = colData.format
|
||
|
||
let editorOptions: any = {}
|
||
if (colData.editorOptions) {
|
||
try {
|
||
editorOptions =
|
||
typeof colData.editorOptions === 'string'
|
||
? JSON.parse(colData.editorOptions)
|
||
: colData.editorOptions
|
||
} catch {
|
||
editorOptions = {}
|
||
}
|
||
}
|
||
|
||
column.editorOptions = { ...editorOptions }
|
||
|
||
if (column.editorOptions.displayFormat) {
|
||
column.format = column.editorOptions.displayFormat
|
||
}
|
||
|
||
// columnCustomizationDto
|
||
column.fixed = colData.columnCustomizationDto?.fixed
|
||
column.fixedPosition = colData.columnCustomizationDto?.fixedPosition as HorizontalEdge
|
||
column.allowReordering = colData.columnCustomizationDto?.allowReordering
|
||
|
||
// sort
|
||
if (colData.sortIndex >= 0) {
|
||
column.sortIndex = colData.sortIndex
|
||
column.sortOrder = colData.sortDirection as SortOrder
|
||
}
|
||
|
||
// filterRow
|
||
column.allowFiltering = colData.columnFilterDto?.allowFiltering
|
||
column.selectedFilterOperation = colData.columnFilterDto
|
||
?.selectedFilterOperation as SelectedFilterOperation
|
||
column.filterValue = colData.columnFilterDto?.filterValue
|
||
|
||
// headerFilter
|
||
column.allowHeaderFiltering = colData.columnHeaderDto?.allowHeaderFiltering
|
||
if (column.allowHeaderFiltering == true) {
|
||
column.headerFilter = {}
|
||
column.headerFilter.allowSearch = colData.columnHeaderDto?.allowSearch
|
||
column.headerFilter.dataSource = colData.columnHeaderDto?.dataSource
|
||
}
|
||
|
||
// search
|
||
column.allowSearch = colData.allowSearch
|
||
|
||
//export
|
||
column.allowExporting = colData.canExport
|
||
|
||
// grouping
|
||
column.allowGrouping = colData.columnGroupingDto?.allowGrouping
|
||
column.autoExpandGroup = colData.columnGroupingDto?.autoExpandGroup
|
||
if (colData.columnGroupingDto.groupIndex)
|
||
column.groupIndex = colData.columnGroupingDto?.groupIndex
|
||
|
||
// constsa dinamik olarak css verilerini ekle
|
||
if (colData.columnCssClass) {
|
||
column.cssClass = colData.columnCssClass
|
||
if (colData.columnCssValue) {
|
||
addCss(colData.columnCssValue)
|
||
}
|
||
}
|
||
|
||
column.allowEditing = colData.columnEditingDto?.allowEditing
|
||
|
||
// #region lookup ayarlari
|
||
if (colData.lookupDto?.dataSourceType) {
|
||
// UiColumnEditorTemplateTypeEnum : None:0, Table:1, TagBox:2
|
||
const allItems = gridDto.gridOptions.editingFormDto.flatMap((group) => group.items)
|
||
const formItem = allItems.find((a) => a?.dataField === colData.fieldName)
|
||
if (formItem?.editorType2 === PlatformEditorTypes.dxTagBox) {
|
||
column.extras = {
|
||
multiValue: true,
|
||
editorOptions: formItem.editorOptions,
|
||
tagBoxOptions: formItem.tagBoxOptions,
|
||
}
|
||
column.editCellTemplate = 'cellEditTagBox'
|
||
column.calculateFilterExpression = calculateFilterExpressionMultiValue
|
||
column.cellTemplate = cellTemplateMultiValue
|
||
} else if (formItem?.editorType2 === PlatformEditorTypes.dxGridBox) {
|
||
column.extras = {
|
||
multiValue: false,
|
||
editorOptions: formItem.editorOptions,
|
||
gridBoxOptions: formItem.gridBoxOptions,
|
||
}
|
||
column.editCellTemplate = 'cellEditGridBox'
|
||
column.cellTemplate = cellTemplateMultiValue
|
||
if (formItem.gridBoxOptions?.selectionMode === 'multiple') {
|
||
column.calculateFilterExpression = calculateFilterExpressionMultiValue
|
||
column.extras.multiValue = true
|
||
}
|
||
}
|
||
|
||
column.lookup = {
|
||
valueExpr: colData.lookupDto?.valueExpr?.toLowerCase(),
|
||
displayExpr: colData.lookupDto?.displayExpr?.toLowerCase(),
|
||
dataSource: (o) => lookupDataSource(o, colData, listFormCode),
|
||
}
|
||
//column.lookup.dataSource = lookupDataSource(null, colData)
|
||
|
||
//cascadeEmptyFields verisi dolu ise bu kolon/field bir parent field dir
|
||
if (colData.lookupDto.cascadeEmptyFields) {
|
||
// parent field guncellendigi zaman bu fonksiyon cagrilir
|
||
column.setCellValue = function (rowData: any, value: any) {
|
||
if (!colData.fieldName) return
|
||
//console.log({ rowData, value, colData })
|
||
rowData[colData.fieldName] = Array.isArray(value) ? value[0] : value
|
||
// cascadeEmptyFields alani aralarinda virgul olacak sekilde bosaltilmak istenen alanlari saklar
|
||
colData?.lookupDto?.cascadeEmptyFields?.split(',').forEach((emptyField: any) => {
|
||
rowData[emptyField] = null
|
||
})
|
||
}
|
||
}
|
||
}
|
||
// #endregion
|
||
if (colData.validationRuleDto) {
|
||
// for server side validation : https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/DataValidation/jQuery/Light/
|
||
column.validationRules = colData.validationRuleDto as ValidationRule[]
|
||
}
|
||
|
||
columns.push(column)
|
||
})
|
||
|
||
return columns
|
||
}
|
||
|
||
const getBandedColumns = () => {
|
||
if (!gridDto) {
|
||
return
|
||
}
|
||
|
||
const columns: GridColumnData[] = []
|
||
const insertedColumns: (string | undefined)[] = []
|
||
|
||
const commandColumn = getCommandColumn()
|
||
if (commandColumn) {
|
||
columns.push(commandColumn)
|
||
}
|
||
|
||
for (const col of gridDto.columnFormats) {
|
||
if (!col.fieldName) {
|
||
return
|
||
}
|
||
if (insertedColumns.some((a) => a === col.fieldName)) {
|
||
// kolon zaten eklenmis ise islem yapma
|
||
return
|
||
}
|
||
|
||
if (col.bandName) {
|
||
// banded kolon ise; en fazla iki kirilima kadar eklenir
|
||
const bands = col.bandName.split(':') // ic ice banded kolon const ise aralarinda : kullanilir
|
||
if (bands.length > 1) {
|
||
// band + band + column seklinde ise :
|
||
|
||
let topBand = columns.find((e) => e.caption == bands[0] && e.isBand == true)
|
||
if (!topBand) {
|
||
// en ustteki band ilk defa ekleniyor ise
|
||
topBand = { caption: bands[0], columns: [] as GridColumnData[], isBand: true }
|
||
columns.push(topBand)
|
||
}
|
||
topBand.columns ??= [] as GridColumnData[]
|
||
|
||
const band2 = { caption: bands[1], columns: [] as GridColumnData[], isBand: true }
|
||
topBand.columns.push(band2)
|
||
|
||
const rData = gridDto.columnFormats.filter((e) => e.bandName == col.bandName)
|
||
const cols = getColumns(rData) as GridColumnData[]
|
||
band2.columns.push(...cols)
|
||
insertedColumns.push(...cols.map((e) => e.dataField))
|
||
} else {
|
||
// band + column
|
||
const band = { caption: bands[0], columns: [] as GridColumnData[], isBand: true }
|
||
const rData = gridDto.columnFormats.filter((e) => e.bandName == bands[0])
|
||
const cols = getColumns(rData) as GridColumnData[]
|
||
band.columns.push(...cols)
|
||
columns.push(band)
|
||
insertedColumns.push(...cols.map((e) => e.dataField))
|
||
}
|
||
} else {
|
||
// band a bagli olmayan kolonlar
|
||
const cols = getColumns([col])
|
||
//console.log({ col, cols: JSON.stringify(cols) })
|
||
columns.push(...cols)
|
||
insertedColumns.push(...cols.map((e) => e.dataField))
|
||
}
|
||
}
|
||
|
||
// FormEditingExtraItem
|
||
// Devexpress Gridde kaydete basılınca
|
||
// formda gözükecek olan EditingFormDto.Items elemanları gelmiyor
|
||
// Sadece grid'de tanımlanmış columnları getiriyor.
|
||
// Bu elemanları da getirmesi için aşağıdaki şekilde,
|
||
// columns'da olmayan alanları da gizli olarak ekliyoruz
|
||
if (columns?.length) {
|
||
gridDto.gridOptions.editingFormDto.forEach((group) => {
|
||
group.items?.forEach((item: EditingFormItemDto) => {
|
||
if (!columns.some((a) => a.dataField === item.dataField)) {
|
||
columns.push({
|
||
dataField: item.dataField,
|
||
visible: false,
|
||
showInColumnChooser: false,
|
||
})
|
||
insertedColumns.push(item.dataField)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
return columns
|
||
}
|
||
|
||
return {
|
||
getBandedColumns,
|
||
}
|
||
}
|
||
|
||
export { useListFormColumns }
|