From 6e3f58ce9d3e7bc79c74dfc33ec79d115b7160a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?= <76204082+iamsedatozturk@users.noreply.github.com> Date: Wed, 24 Sep 2025 20:46:03 +0300 Subject: [PATCH] =?UTF-8?q?Grid=20ve=20Form=20komponentlerine=20Script=20?= =?UTF-8?q?=C3=B6zelli=C4=9Fi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit FormView, FormNew, Grid Popup için Script özelliği eklendi. Ayrıca itemlara buton eklenebiliyor. Sadece textbox olan inputlara ekleniyor. Diğer komponenler için render özelliği kullanılması gerekiyor. --- .../GridOptionsDto/EditingFormDto.cs | 1 + .../Seeds/SeederData.json | 6 + ui/src/proxy/form/models.ts | 1 + .../JsonRowOpDialogEditForm.tsx | 226 ++++++++++++------ ui/src/views/form/FormDevExpress.tsx | 49 +++- ui/src/views/form/types.ts | 8 +- ui/src/views/form/useGridData.tsx | 1 + ui/src/views/list/Card.tsx | 4 +- ui/src/views/list/Grid.tsx | 128 +++++++++- 9 files changed, 334 insertions(+), 90 deletions(-) diff --git a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/EditingFormDto.cs b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/EditingFormDto.cs index dfbafded..b4ee940e 100644 --- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/EditingFormDto.cs +++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/EditingFormDto.cs @@ -46,4 +46,5 @@ public class EditingFormItemDto public bool IsRequired { get; set; } public GridBoxOptionsDto GridBoxOptions { get; set; } public TagBoxOptionsDto TagBoxOptions { get; set; } + public string Script { get; set; } } diff --git a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json index d9274e77..4048100a 100644 --- a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json +++ b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json @@ -14124,6 +14124,12 @@ "en": "Accept CustomValue", "tr": "Özel Değeri Kabul Et" }, + { + "resourceName": "Platform", + "key": "ListForms.ListFormFieldEdit.HelperOpen", + "en": "Helper Codes", + "tr": "Yardımcı Kodlar" + }, { "resourceName": "Platform", "key": "ListForms.ListFormFieldEdit.ShowClearButton", diff --git a/ui/src/proxy/form/models.ts b/ui/src/proxy/form/models.ts index 04cd351d..0e2f8ef4 100644 --- a/ui/src/proxy/form/models.ts +++ b/ui/src/proxy/form/models.ts @@ -404,6 +404,7 @@ export interface EditingFormItemDto { isRequired?: boolean gridBoxOptions?: GridBoxOptionsDto tagBoxOptions?: TagBoxOptionsDto + script?: string } export interface GridEditingPopupDto { diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx index 5732930b..74d9cc1b 100644 --- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx +++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx @@ -77,6 +77,7 @@ function JsonRowOpDialogEditForm({ const [fieldList, setFieldList] = useState([]) const [isOpenOptionsDialog, setIsOpenOptionsDialog] = useState>({}) + const [isHelperOpen, setIsHelperOpen] = useState(false) const getFields = async () => { if (!listFormCode) { @@ -138,7 +139,7 @@ function JsonRowOpDialogEditForm({ return ( (
-
- +
+ + + + + + {({ field, form }: FieldProps) => ( + option.value === values.itemType, - )} - onChange={(option) => form.setFieldValue(field.name, option?.value)} - /> - )} - - - - - - - - - - - +
Helper
+ +
+
+
● Editor Script
+
+
{'• setFormData({...formData, Path: e.value});'}
+
{'• UiEvalService.ApiGenerateBackgroundWorkers();'}
+
+ { + "• setFormData({ ...formData, Path: (v => v === '1' ? '1-deneme' : v === '0' ? '0-deneme' : '')(e.value) })" + } +
+
+
+ +
+
● Editor Options
+ 
+                            {`• {
+  "buttons": [
+    {
+      "name": "custom",
+      "location": "after",
+      "options": {
+        "icon": "plus",
+        "onClick": "function(e) { alert('Value: ' + e.formData[e.fieldName]); }"
+      }
+    }
+  ]
+}`}
+
+
+
+
+
Order
-
Data Field
+
Data Field
Editor Type
-
Editor Options
+
Editor Options
+
Editor Script
Is Required
Colspan
@@ -300,7 +353,7 @@ function JsonRowOpDialogEditForm({ placeholder="Order" />
-
+
-
+
+
+ +
+ diff --git a/ui/src/views/form/FormDevExpress.tsx b/ui/src/views/form/FormDevExpress.tsx index 93b2fcc4..b7f540eb 100644 --- a/ui/src/views/form/FormDevExpress.tsx +++ b/ui/src/views/form/FormDevExpress.tsx @@ -6,7 +6,7 @@ import { SimpleItem as SimpleItemDx, } from 'devextreme-react/form' import { FieldDataChangedEvent, GroupItem } from 'devextreme/ui/form' -import { Dispatch, RefObject } from 'react' +import { Dispatch, RefObject, useEffect, useRef } from 'react' import { GridBoxEditorComponent } from './editors/GridBoxEditorComponent' import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent' import { RowMode, SimpleItemWithColData } from './types' @@ -23,19 +23,41 @@ const FormDevExpress = (props: { }) => { const { listFormCode, isSubForm, mode, refForm, formData, formItems, setFormData } = props + const formDataRef = useRef(formData) + useEffect(() => { + formDataRef.current = formData + }, [formData]) + return ( { + onFieldDataChanged={async (e: FieldDataChangedEvent) => { setFormData({ ...formData, [e.dataField!]: e.value }) + + //Dinamik script + const changeItem = formItems + .flatMap((group) => (group.items as SimpleItemWithColData[]) || []) + .find((i: SimpleItemWithColData) => i.dataField === e.dataField) + + if (changeItem?.script) { + try { + //setFormData({...formData, Path: e.value}); + //UiEvalService.ApiGenerateBackgroundWorkers(); + //setFormData({ ...formData, Path: (v => v === '1' ? '1-deneme' : v === '0' ? '0-deneme' : '')(e.value) }) + eval(changeItem.script) + } catch (err) { + console.error('Script execution failed for', changeItem.name, err) + } + } }} onContentReady={(e) => { - const firstItem = formItems?.flatMap((g) => g.items || []).find((it) => !!it.name) + const groupItems = e.component.option('items') as any[] + const firstItem = groupItems?.[0]?.items?.[0] - if (firstItem?.name) { - const editor = e.component.getEditor(firstItem.name as string) + if (firstItem?.dataField) { + const editor = e.component.getEditor(firstItem.dataField) editor?.focus() } }} @@ -43,7 +65,6 @@ const FormDevExpress = (props: { {formItems.map((formGroupItem, i) => { return ( ) : ( { + if (btn?.options?.onClick && typeof btn.options.onClick === 'string') { + const origClick = eval(`(${btn.options.onClick})`) + btn.options.onClick = (e: any) => { + origClick({ + ...e, + formData: formDataRef.current, // 🔥 her zaman güncel state + fieldName: formItem.dataField, + mode, // "new" | "edit" | "view" + }) + } + } + return btn + }), }} /> ) diff --git a/ui/src/views/form/types.ts b/ui/src/views/form/types.ts index 63824d68..e5c2f602 100644 --- a/ui/src/views/form/types.ts +++ b/ui/src/views/form/types.ts @@ -1,6 +1,11 @@ import { FormItemComponent, SimpleItem } from 'devextreme/ui/form' import { Overwrite } from '../../utils/types' -import { ColumnFormatDto, GridBoxOptionsDto, PlatformEditorTypes, TagBoxOptionsDto } from '../../proxy/form/models' +import { + ColumnFormatDto, + GridBoxOptionsDto, + PlatformEditorTypes, + TagBoxOptionsDto, +} from '../../proxy/form/models' import { Meta } from '@/@types/routes' export type EditorType2 = FormItemComponent | PlatformEditorTypes.dxGridBox @@ -15,6 +20,7 @@ export type SimpleItemWithColData = Overwrite< canUpdate: boolean canExport: boolean editorType2: EditorType2 + script?: string } > export type RowMode = 'view' | 'edit' | 'new' diff --git a/ui/src/views/form/useGridData.tsx b/ui/src/views/form/useGridData.tsx index 424fec64..d48c7fe3 100644 --- a/ui/src/views/form/useGridData.tsx +++ b/ui/src/views/form/useGridData.tsx @@ -260,6 +260,7 @@ const useGridData = (props: { colData, tagBoxOptions: i.tagBoxOptions, gridBoxOptions: i.gridBoxOptions, + script: i.script, } if (i.dataField.indexOf(':') >= 0) { item.label = { text: captionize(i.dataField.split(':')[1]) } diff --git a/ui/src/views/list/Card.tsx b/ui/src/views/list/Card.tsx index aeb2dabc..73c5d8d3 100644 --- a/ui/src/views/list/Card.tsx +++ b/ui/src/views/list/Card.tsx @@ -20,7 +20,6 @@ import { Container, Loading } from '@/components/shared' import WidgetGroup from '@/components/common/WidgetGroup' import { GridExtraFilterState } from './Utils' import { useStoreActions, useStoreState } from '@/store/store' -import { FaTrashCan } from 'react-icons/fa6' const CardItem = ({ isSubForm, @@ -95,6 +94,7 @@ const CardItem = ({ colData, tagBoxOptions: i.tagBoxOptions, gridBoxOptions: i.gridBoxOptions, + script: i.script, } if (i.dataField.indexOf(':') >= 0) { item.label = { text: captionize(i.dataField.split(':')[1]) } @@ -383,7 +383,7 @@ const Card = (props: CardProps) => { }} className="p-1 pl-6 pr-2 border border-1 outline-none text-xs text-gray-700 dark:text-gray-200 placeholder-gray-400 rounded" /> - +