Grid Popup Tabbed özelliği
This commit is contained in:
Sedat ÖZTÜRK
parent
99cbdadc7f
commit
226e71d1a7
2 changed files with 182 additions and 129 deletions
|
|
@ -4,6 +4,11 @@ body {
|
|||
font-size: 14px; /* body’ye font-size uygulanmaz */
|
||||
}
|
||||
|
||||
/* Popup formun içerisindeki Tabbed Item Title */
|
||||
.dx-tab-text-span-pseudo {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.big-button {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -816,6 +816,7 @@ const Grid = (props: GridProps) => {
|
|||
fullScreen: gridDto.gridOptions.editingOptionDto?.popup?.fullScreen,
|
||||
}}
|
||||
form={{
|
||||
colCount: 1,
|
||||
onFieldDataChanged: (e) => {
|
||||
if (e.dataField) {
|
||||
const formItem = gridDto.gridOptions.editingFormDto
|
||||
|
|
@ -832,40 +833,22 @@ const Grid = (props: GridProps) => {
|
|||
},
|
||||
items:
|
||||
gridDto.gridOptions.editingFormDto?.length > 0
|
||||
? gridDto.gridOptions.editingFormDto
|
||||
?.sort((a: any, b: any) => {
|
||||
return a.order >= b.order ? 1 : -1
|
||||
})
|
||||
.map((e: any) => {
|
||||
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
|
||||
})
|
||||
.map((i: EditingFormItemDto) => {
|
||||
? (() => {
|
||||
const sortedFormDto = gridDto.gridOptions.editingFormDto
|
||||
.slice()
|
||||
.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
|
||||
|
||||
// Tabbed item'ları grupla
|
||||
const tabbedItems = sortedFormDto.filter((e: any) => e.itemType === 'tabbed')
|
||||
const result: any[] = []
|
||||
|
||||
// Helper function: item mapper
|
||||
const mapFormItem = (i: EditingFormItemDto) => {
|
||||
let editorOptions: EditorOptionsWithButtons = {}
|
||||
try {
|
||||
editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
|
||||
|
||||
if (editorOptions?.buttons) {
|
||||
/*
|
||||
{
|
||||
"buttons": [
|
||||
{
|
||||
"name": "custom",
|
||||
"location": "after",
|
||||
"options": {
|
||||
"icon": "plus",
|
||||
"onClick": "function(e) { alert('Button clicked for ' + formData[i.dataField]); }"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
*/
|
||||
editorOptions.buttons = (editorOptions?.buttons || []).map(
|
||||
(btn: any) => {
|
||||
if (
|
||||
|
|
@ -879,7 +862,6 @@ const Grid = (props: GridProps) => {
|
|||
)
|
||||
}
|
||||
|
||||
// Eğer default value varsa, bu editörü readonly yapıyoruz
|
||||
const rawFilter = searchParams?.get('filter')
|
||||
if (rawFilter) {
|
||||
const parsed = JSON.parse(rawFilter)
|
||||
|
|
@ -903,10 +885,12 @@ const Grid = (props: GridProps) => {
|
|||
}
|
||||
}
|
||||
} catch {}
|
||||
|
||||
const fieldName = i.dataField.split(':')[0]
|
||||
const listFormField = gridDto.columnFormats.find(
|
||||
(x: any) => x.fieldName === fieldName,
|
||||
)
|
||||
|
||||
if (listFormField?.sourceDbType === DbTypeEnum.Date) {
|
||||
editorOptions = {
|
||||
...{
|
||||
|
|
@ -930,6 +914,7 @@ const Grid = (props: GridProps) => {
|
|||
...editorOptions,
|
||||
}
|
||||
}
|
||||
|
||||
const item: SimpleItemWithColData = {
|
||||
canRead: listFormField?.canRead ?? false,
|
||||
canUpdate: listFormField?.canUpdate ?? false,
|
||||
|
|
@ -947,9 +932,11 @@ const Grid = (props: GridProps) => {
|
|||
editorOptions,
|
||||
editorScript: i.editorScript,
|
||||
}
|
||||
|
||||
if (i.dataField.indexOf(':') >= 0) {
|
||||
item.label = { text: captionize(i.dataField.split(':')[1]) }
|
||||
}
|
||||
|
||||
if (
|
||||
(mode == 'edit' && !item.canUpdate) ||
|
||||
(mode == 'new' && !item.canCreate)
|
||||
|
|
@ -961,9 +948,28 @@ const Grid = (props: GridProps) => {
|
|||
}
|
||||
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
sortedFormDto.forEach((e: any) => {
|
||||
if (e.itemType !== 'tabbed') {
|
||||
// colCount: max(endpoint.colCount, max(item.colSpan))
|
||||
const maxItemColSpan = Math.max(
|
||||
...(e.items?.map((i: any) => i.colSpan || 1) || [1]),
|
||||
)
|
||||
const effectiveColCount = Math.max(
|
||||
maxItemColSpan,
|
||||
e.colCount || 1,
|
||||
)
|
||||
|
||||
result.push({
|
||||
itemType: e.itemType,
|
||||
colCount: effectiveColCount,
|
||||
colSpan: e.colSpan,
|
||||
caption: e.caption, // Group'larda caption olmalı
|
||||
items: e.items
|
||||
?.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
|
||||
.map(mapFormItem)
|
||||
.filter((a: any) => {
|
||||
// return a.canRead
|
||||
if (mode === 'view') {
|
||||
return a.canRead
|
||||
} else if (mode === 'new') {
|
||||
|
|
@ -974,8 +980,50 @@ const Grid = (props: GridProps) => {
|
|||
return false
|
||||
}
|
||||
}),
|
||||
} as GroupItem
|
||||
})
|
||||
} else if (tabbedItems.length > 0 && e === tabbedItems[0]) {
|
||||
// Tabbed için caption OLMAMALI - sadece tabs array içinde title kullan
|
||||
result.push({
|
||||
itemType: 'tabbed',
|
||||
colCount: 1,
|
||||
colSpan: 1,
|
||||
// caption kullanma! Tabs içindeki title'lar yeterli
|
||||
tabs: tabbedItems.map((tabbedItem: any) => {
|
||||
// Tab için colCount: max(endpoint.colCount, max(item.colSpan))
|
||||
const maxItemColSpan = Math.max(
|
||||
...(tabbedItem.items?.map((i: any) => i.colSpan || 1) || [1]),
|
||||
)
|
||||
const effectiveColCount = Math.max(
|
||||
maxItemColSpan,
|
||||
tabbedItem.colCount || 1,
|
||||
)
|
||||
|
||||
|
||||
return {
|
||||
title: tabbedItem.caption, // Her tab'ın title'ı
|
||||
colCount: effectiveColCount,
|
||||
items: tabbedItem.items
|
||||
?.sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))
|
||||
.map(mapFormItem)
|
||||
.filter((a: any) => {
|
||||
if (mode === 'view') {
|
||||
return a.canRead
|
||||
} else if (mode === 'new') {
|
||||
return a.canCreate || a.canRead
|
||||
} else if (mode === 'edit') {
|
||||
return a.canUpdate || a.canRead
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}),
|
||||
}
|
||||
}),
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
})()
|
||||
: undefined,
|
||||
}}
|
||||
></Editing>
|
||||
|
|
|
|||
Loading…
Reference in a new issue