sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Grid Popup Tabbed özelliği

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2025-11-07 17:06:17 +03:00
parent 99cbdadc7f
commit 226e71d1a7
2 changed files with 182 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/src/index.css
View file

@ -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;
} }

114
ui/src/views/list/Grid.tsx
View file

@ -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,40 +833,22 @@ 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 { // Tabbed item'ları grupla
itemType: e.itemType, const tabbedItems = sortedFormDto.filter((e: any) => e.itemType === 'tabbed')
colCount: e.colCount, const result: any[] = []
colSpan: e.colSpan,
caption: e.caption, // Helper function: item mapper
items: e.items const mapFormItem = (i: EditingFormItemDto) => {
?.sort((a: any, b: any) => {
return a.order >= b.order ? 1 : -1
})
.map((i: EditingFormItemDto) => {
let editorOptions: EditorOptionsWithButtons = {} let editorOptions: EditorOptionsWithButtons = {}
try { try {
editorOptions = i.editorOptions && JSON.parse(i.editorOptions) editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
if (editorOptions?.buttons) { 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( editorOptions.buttons = (editorOptions?.buttons || []).map(
(btn: any) => { (btn: any) => {
if ( 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') const rawFilter = searchParams?.get('filter')
if (rawFilter) { if (rawFilter) {
const parsed = JSON.parse(rawFilter) const parsed = JSON.parse(rawFilter)
@ -903,10 +885,12 @@ const Grid = (props: GridProps) => {
} }
} }
} catch {} } catch {}
const fieldName = i.dataField.split(':')[0] const fieldName = i.dataField.split(':')[0]
const listFormField = gridDto.columnFormats.find( const listFormField = gridDto.columnFormats.find(
(x: any) => x.fieldName === fieldName, (x: any) => x.fieldName === fieldName,
) )
if (listFormField?.sourceDbType === DbTypeEnum.Date) { if (listFormField?.sourceDbType === DbTypeEnum.Date) {
editorOptions = { editorOptions = {
...{ ...{
@ -930,6 +914,7 @@ const Grid = (props: GridProps) => {
...editorOptions, ...editorOptions,
} }
} }
const item: SimpleItemWithColData = { const item: SimpleItemWithColData = {
canRead: listFormField?.canRead ?? false, canRead: listFormField?.canRead ?? false,
canUpdate: listFormField?.canUpdate ?? false, canUpdate: listFormField?.canUpdate ?? false,
@ -947,9 +932,11 @@ const Grid = (props: GridProps) => {
editorOptions, editorOptions,
editorScript: i.editorScript, editorScript: i.editorScript,
} }
if (i.dataField.indexOf(':') >= 0) { if (i.dataField.indexOf(':') >= 0) {
item.label = { text: captionize(i.dataField.split(':')[1]) } item.label = { text: captionize(i.dataField.split(':')[1]) }
} }
if ( if (
(mode == 'edit' && !item.canUpdate) || (mode == 'edit' && !item.canUpdate) ||
(mode == 'new' && !item.canCreate) (mode == 'new' && !item.canCreate)
@ -961,9 +948,28 @@ const Grid = (props: GridProps) => {
} }
return item 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) => { .filter((a: any) => {
// return a.canRead
if (mode === 'view') { if (mode === 'view') {
return a.canRead return a.canRead
} else if (mode === 'new') { } else if (mode === 'new') {
@ -974,8 +980,50 @@ const Grid = (props: GridProps) => {
return false 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, : undefined,
}} }}
></Editing> ></Editing>