- {!isSubForm && (
-
- )}
-
- {!gridDto && (
-
- Loading CardView configuration...
-
- )}
-
- {gridDto && !cardViewDataSource && (
-
- Loading data source...
-
- )}
-
- {gridDto && cardViewDataSource && (
-
-
0
- ? gridDto.gridOptions.height
- : gridDto.gridOptions.fullHeight
- ? `calc(100vh - ${170 + widgetGroupHeight}px)`
- : undefined
- }
- onSelectionChanged={onSelectionChanged}
- onInitNewCard={onInitNewRow}
- onCardInserting={onRowInserting}
- onCardUpdating={onRowUpdating}
- onEditingStart={onEditingStart}
- onEditCanceled={() => {
- setMode('view')
- setIsPopupFullScreen(false)
- }}
- onCardInserted={() => {
- setMode('view')
- setIsPopupFullScreen(false)
- // Küçük bir gecikme ile reload - server transaction commit bekle
- refreshData()
- props.refreshData?.()
- }}
- onCardUpdated={() => {
- setMode('view')
- setIsPopupFullScreen(false)
- refreshData()
- props.refreshData?.()
- }}
- onCardRemoved={() => {
- refreshData()
- props.refreshData?.()
- }}
- >
- {/* Selection */}
-
-
- {/* Sorting */}
-
-
- {/* Header Filter */}
-
-
- {/* Filter Panel */}
-
-
- {/* Search Panel */}
-
-
- {/* Column Chooser */}
-
-
- {/* Paging */}
-
-
- {/* Pager */}
-
-
- {/* Editing */}
- {
- const cardView = cardViewRef.current?.instance()
- if (cardView) {
- // Form validasyonu yap
- const editForm = (cardView as any)
- .getController?.('validating')
- ?.validate?.()
-
- // Eğer validate fonksiyonu yoksa direkt kaydet
- if (!editForm) {
- cardView.saveEditData()
- return
- }
-
- // Validasyon hatası varsa kaydetme
- if (editForm && !editForm.brokenRules?.length) {
- cardView.saveEditData()
- }
- }
- },
- },
- },
- {
- widget: 'dxButton',
- toolbar: 'bottom',
- location: 'after',
- options: {
- text: translate('::Cancel'),
- onClick: () => {
- const cardView = cardViewRef.current?.instance()
- cardView?.cancelEditData()
- },
- },
- },
- {
- widget: 'dxButton',
- toolbar: 'top',
- location: 'after',
- options: {
- icon: isPopupFullScreen ? 'collapse' : 'fullscreen',
- hint: isPopupFullScreen
- ? translate('::Normal Boyut')
- : translate('::Tam Ekran'),
- stylingMode: 'text',
- onClick: () => setIsPopupFullScreen(!isPopupFullScreen),
- },
- },
- ],
- }}
- form={{
- colCount: 1,
- onFieldDataChanged: (e) => {
- if (e.dataField) {
- const formItem = gridDto.gridOptions.editingFormDto
- .flatMap((group) => group.items || [])
- .find((i) => i.dataField === e.dataField)
- if (formItem?.editorScript) {
- try {
- eval(formItem.editorScript)
- } catch (err) {
- console.error('Script exec error', err)
- }
- }
- }
- },
- items:
- gridDto.gridOptions.editingFormDto?.length > 0
- ? (() => {
- 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) {
- editorOptions.buttons = (editorOptions?.buttons || []).map(
- (btn: any) => {
- if (
- btn?.options?.onClick &&
- typeof btn.options.onClick === 'string'
- ) {
- btn.options.onClick = eval(`(${btn.options.onClick})`)
- }
- return btn
- },
- )
- }
-
- const rawFilter = searchParams?.get('filter')
- if (rawFilter) {
- const parsed = JSON.parse(rawFilter)
- const filters = extractSearchParamsFields(parsed)
-
- const hasFilter = filters.some(
- ([field, op, val]) => field === i.dataField,
- )
-
- if (hasFilter) {
- const existsInExtra = extraFilters.some(
- (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) {
- editorOptions = {
- ...{
- type: 'date',
- dateSerializationFormat: 'yyyy-MM-dd',
- displayFormat: 'shortDate',
- },
- ...editorOptions,
- }
- } else if (
- listFormField?.sourceDbType === DbTypeEnum.DateTime ||
- listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
- listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
- ) {
- editorOptions = {
- ...{
- type: 'datetime',
- dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
- displayFormat: 'shortDateShortTime',
- },
- ...editorOptions,
- }
- }
-
- // Set defaultValue for @AUTONUMBER fields
- if (
- typeof listFormField?.defaultValue === 'string' &&
- listFormField?.defaultValue === '@AUTONUMBER' &&
- mode === 'new'
- ) {
- editorOptions = {
- ...editorOptions,
- value: autoNumber(),
- }
- }
-
- 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') {
- // Backend'den gelen colCount ve colSpan değerlerini kullan
- const effectiveColCount = e.colCount || 1
- const effectiveColSpan = e.colSpan || 1
-
- result.push({
- itemType: e.itemType,
- colCount: effectiveColCount,
- colSpan: effectiveColSpan,
- 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) => {
- // Backend'den gelen colCount ve colSpan değerlerini kullan
- const effectiveColCount = 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,
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
- +a)}
- showPageSizeSelector={gridDto.gridOptions.pagerOptionDto?.showPageSizeSelector}
- showInfo={false}
- showNavigationButtons={gridDto.gridOptions.pagerOptionDto?.showNavigationButtons}
- displayMode={gridDto.gridOptions.pagerOptionDto?.displayMode}
- >
-
-
- {/* Toolbar */}
-
-
-