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 */
|
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 {
|
.big-button {
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -816,6 +816,7 @@ const Grid = (props: GridProps) => {
|
||||||
fullScreen: gridDto.gridOptions.editingOptionDto?.popup?.fullScreen,
|
fullScreen: gridDto.gridOptions.editingOptionDto?.popup?.fullScreen,
|
||||||
}}
|
}}
|
||||||
form={{
|
form={{
|
||||||
|
colCount: 1,
|
||||||
onFieldDataChanged: (e) => {
|
onFieldDataChanged: (e) => {
|
||||||
if (e.dataField) {
|
if (e.dataField) {
|
||||||
const formItem = gridDto.gridOptions.editingFormDto
|
const formItem = gridDto.gridOptions.editingFormDto
|
||||||
|
|
@ -832,150 +833,197 @@ const Grid = (props: GridProps) => {
|
||||||
},
|
},
|
||||||
items:
|
items:
|
||||||
gridDto.gridOptions.editingFormDto?.length > 0
|
gridDto.gridOptions.editingFormDto?.length > 0
|
||||||
? gridDto.gridOptions.editingFormDto
|
? (() => {
|
||||||
?.sort((a: any, b: any) => {
|
const sortedFormDto = gridDto.gridOptions.editingFormDto
|
||||||
return a.order >= b.order ? 1 : -1
|
.slice()
|
||||||
})
|
.sort((a: any, b: any) => (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) => {
|
|
||||||
let editorOptions: EditorOptionsWithButtons = {}
|
|
||||||
try {
|
|
||||||
editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
|
|
||||||
|
|
||||||
if (editorOptions?.buttons) {
|
// Tabbed item'ları grupla
|
||||||
/*
|
const tabbedItems = sortedFormDto.filter((e: any) => e.itemType === 'tabbed')
|
||||||
{
|
const result: any[] = []
|
||||||
"buttons": [
|
|
||||||
{
|
// Helper function: item mapper
|
||||||
"name": "custom",
|
const mapFormItem = (i: EditingFormItemDto) => {
|
||||||
"location": "after",
|
let editorOptions: EditorOptionsWithButtons = {}
|
||||||
"options": {
|
try {
|
||||||
"icon": "plus",
|
editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
|
||||||
"onClick": "function(e) { alert('Button clicked for ' + formData[i.dataField]); }"
|
|
||||||
}
|
if (editorOptions?.buttons) {
|
||||||
}
|
editorOptions.buttons = (editorOptions?.buttons || []).map(
|
||||||
]
|
(btn: any) => {
|
||||||
}
|
if (
|
||||||
*/
|
btn?.options?.onClick &&
|
||||||
editorOptions.buttons = (editorOptions?.buttons || []).map(
|
typeof btn.options.onClick === 'string'
|
||||||
(btn: any) => {
|
) {
|
||||||
if (
|
btn.options.onClick = eval(`(${btn.options.onClick})`)
|
||||||
btn?.options?.onClick &&
|
|
||||||
typeof btn.options.onClick === 'string'
|
|
||||||
) {
|
|
||||||
btn.options.onClick = eval(`(${btn.options.onClick})`)
|
|
||||||
}
|
|
||||||
return btn
|
|
||||||
},
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
return btn
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
// Eğer default value varsa, bu editörü readonly yapıyoruz
|
const rawFilter = searchParams?.get('filter')
|
||||||
const rawFilter = searchParams?.get('filter')
|
if (rawFilter) {
|
||||||
if (rawFilter) {
|
const parsed = JSON.parse(rawFilter)
|
||||||
const parsed = JSON.parse(rawFilter)
|
const filters = extractSearchParamsFields(parsed)
|
||||||
const filters = extractSearchParamsFields(parsed)
|
|
||||||
|
|
||||||
const hasFilter = filters.some(
|
const hasFilter = filters.some(
|
||||||
([field, op, val]) => field === i.dataField,
|
([field, op, val]) => field === i.dataField,
|
||||||
)
|
)
|
||||||
|
|
||||||
if (hasFilter) {
|
if (hasFilter) {
|
||||||
const existsInExtra = extraFilters.some(
|
const existsInExtra = extraFilters.some(
|
||||||
(f) => f.fieldName === i.dataField && !!f.value,
|
(f) => f.fieldName === i.dataField && !!f.value,
|
||||||
)
|
|
||||||
|
|
||||||
if (!existsInExtra) {
|
|
||||||
editorOptions = {
|
|
||||||
...editorOptions,
|
|
||||||
readOnly: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch {}
|
|
||||||
const fieldName = i.dataField.split(':')[0]
|
|
||||||
const listFormField = gridDto.columnFormats.find(
|
|
||||||
(x: any) => x.fieldName === fieldName,
|
|
||||||
)
|
)
|
||||||
if (listFormField?.sourceDbType === DbTypeEnum.Date) {
|
|
||||||
|
if (!existsInExtra) {
|
||||||
editorOptions = {
|
editorOptions = {
|
||||||
...{
|
|
||||||
type: 'date',
|
|
||||||
dateSerializationFormat: 'yyyy-MM-dd',
|
|
||||||
displayFormat: 'shortDate',
|
|
||||||
},
|
|
||||||
...editorOptions,
|
...editorOptions,
|
||||||
}
|
|
||||||
} else if (
|
|
||||||
listFormField?.sourceDbType === DbTypeEnum.DateTime ||
|
|
||||||
listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
|
|
||||||
listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
|
|
||||||
) {
|
|
||||||
editorOptions = {
|
|
||||||
...{
|
|
||||||
type: 'datetime',
|
|
||||||
dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssxxx',
|
|
||||||
displayFormat: 'shortDateShortTime',
|
|
||||||
},
|
|
||||||
...editorOptions,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const item: SimpleItemWithColData = {
|
|
||||||
canRead: listFormField?.canRead ?? false,
|
|
||||||
canUpdate: listFormField?.canUpdate ?? false,
|
|
||||||
canCreate: listFormField?.canCreate ?? false,
|
|
||||||
canExport: listFormField?.canExport ?? false,
|
|
||||||
dataField: i.dataField,
|
|
||||||
name: i.dataField,
|
|
||||||
editorType2: i.editorType2,
|
|
||||||
editorType:
|
|
||||||
i.editorType2 == PlatformEditorTypes.dxGridBox
|
|
||||||
? 'dxDropDownBox'
|
|
||||||
: i.editorType2,
|
|
||||||
colSpan: i.colSpan,
|
|
||||||
isRequired: i.isRequired,
|
|
||||||
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)
|
|
||||||
) {
|
|
||||||
item.editorOptions = {
|
|
||||||
...item.editorOptions,
|
|
||||||
readOnly: true,
|
readOnly: true,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
|
||||||
return item
|
const fieldName = i.dataField.split(':')[0]
|
||||||
})
|
const listFormField = gridDto.columnFormats.find(
|
||||||
.filter((a: any) => {
|
(x: any) => x.fieldName === fieldName,
|
||||||
// return a.canRead
|
)
|
||||||
if (mode === 'view') {
|
|
||||||
return a.canRead
|
if (listFormField?.sourceDbType === DbTypeEnum.Date) {
|
||||||
} else if (mode === 'new') {
|
editorOptions = {
|
||||||
return a.canCreate || a.canRead
|
...{
|
||||||
} else if (mode === 'edit') {
|
type: 'date',
|
||||||
return a.canUpdate || a.canRead
|
dateSerializationFormat: 'yyyy-MM-dd',
|
||||||
} else {
|
displayFormat: 'shortDate',
|
||||||
return false
|
},
|
||||||
|
...editorOptions,
|
||||||
|
}
|
||||||
|
} else if (
|
||||||
|
listFormField?.sourceDbType === DbTypeEnum.DateTime ||
|
||||||
|
listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
|
||||||
|
listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
|
||||||
|
) {
|
||||||
|
editorOptions = {
|
||||||
|
...{
|
||||||
|
type: 'datetime',
|
||||||
|
dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssxxx',
|
||||||
|
displayFormat: 'shortDateShortTime',
|
||||||
|
},
|
||||||
|
...editorOptions,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const item: SimpleItemWithColData = {
|
||||||
|
canRead: listFormField?.canRead ?? false,
|
||||||
|
canUpdate: listFormField?.canUpdate ?? false,
|
||||||
|
canCreate: listFormField?.canCreate ?? false,
|
||||||
|
canExport: listFormField?.canExport ?? false,
|
||||||
|
dataField: i.dataField,
|
||||||
|
name: i.dataField,
|
||||||
|
editorType2: i.editorType2,
|
||||||
|
editorType:
|
||||||
|
i.editorType2 == PlatformEditorTypes.dxGridBox
|
||||||
|
? 'dxDropDownBox'
|
||||||
|
: i.editorType2,
|
||||||
|
colSpan: i.colSpan,
|
||||||
|
isRequired: i.isRequired,
|
||||||
|
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)
|
||||||
|
) {
|
||||||
|
item.editorOptions = {
|
||||||
|
...item.editorOptions,
|
||||||
|
readOnly: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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) => {
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
} 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
|
||||||
|
}
|
||||||
|
}),
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
} as GroupItem
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
return result
|
||||||
|
})()
|
||||||
: undefined,
|
: undefined,
|
||||||
}}
|
}}
|
||||||
></Editing>
|
></Editing>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue