From 866d9f1e85525e824e7dcdcd9680b7af7a88a250 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?= <76204082+iamsedatozturk@users.noreply.github.com> Date: Thu, 18 Jun 2026 14:23:15 +0300 Subject: [PATCH] =?UTF-8?q?Grid=20ve=20Tree=20i=C3=A7in=20Toolbar=20butonl?= =?UTF-8?q?ar=C4=B1=20Mobil=20d=C3=BCzenleme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Seeds/LanguagesData.json | 4 +-- ui/src/index.css | 23 +++++-------- ui/src/views/list/Grid.tsx | 14 ++++---- ui/src/views/list/Tree.tsx | 14 ++++---- ui/src/views/list/toolbarOrder.ts | 34 +++++++++++++++++++ ui/src/views/list/useFilters.tsx | 3 +- ui/src/views/list/useToolbar.tsx | 3 +- 7 files changed, 61 insertions(+), 34 deletions(-) create mode 100644 ui/src/views/list/toolbarOrder.ts diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json index 003ef74..554979d 100644 --- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json +++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json @@ -5397,13 +5397,13 @@ { "resourceName": "Platform", "key": "ListForms.ListFormEdit.CollapseAll", - "en": "Collapse", + "en": "Collapse All", "tr": "Daralt" }, { "resourceName": "Platform", "key": "ListForms.ListFormEdit.ExpandAll", - "en": "Expand", + "en": "Expand All", "tr": "Genişlet" }, { diff --git a/ui/src/index.css b/ui/src/index.css index ebc3de9..d975d76 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -115,14 +115,14 @@ div.dialog-after-open > div.dialog-content.maximized { .dx-datagrid-header-panel > .dx-toolbar .dx-toolbar-before, .dx-treelist-header-panel > .dx-toolbar .dx-toolbar-before { - width: 70% !important; - max-width: 70% !important; + width: 50% !important; + max-width: 50% !important; } .dx-datagrid-header-panel > .dx-toolbar .dx-toolbar-after, .dx-treelist-header-panel > .dx-toolbar .dx-toolbar-after { - width: 30% !important; - max-width: 30% !important; + width: 50% !important; + max-width: 50% !important; margin-left: auto; text-align: right; white-space: nowrap; @@ -138,21 +138,16 @@ div.dialog-after-open > div.dialog-content.maximized { padding-inline: 6px !important; } +.dx-datagrid-header-panel > .dx-toolbar .dx-toolbar-after .dx-button-text, +.dx-treelist-header-panel > .dx-toolbar .dx-toolbar-after .dx-button-text { + text-transform: none !important; +} + .dx-datagrid-header-panel > .dx-toolbar .dx-toolbar-menu-container, .dx-treelist-header-panel > .dx-toolbar .dx-toolbar-menu-container { margin-left: 2px !important; } -.dx-datagrid-header-panel .dx-button .dx-button-text, -.dx-treelist-header-panel .dx-button .dx-button-text { - text-transform: uppercase !important; -} - -.dx-toolbar-menu-section .dx-list-item-content, -.dx-toolbar-menu-section .dx-item-content { - text-transform: uppercase !important; -} - @media (max-width: 767px), (pointer: coarse) { .mobile-edit-popup.dx-overlay-wrapper, .dx-overlay-wrapper.mobile-edit-popup { diff --git a/ui/src/views/list/Grid.tsx b/ui/src/views/list/Grid.tsx index 1f8cc89..b568076 100644 --- a/ui/src/views/list/Grid.tsx +++ b/ui/src/views/list/Grid.tsx @@ -74,6 +74,7 @@ import { getList, getNextSequenceValue } from '@/services/form.service' import { layoutTypes } from '../admin/listForm/edit/types' import { useListFormCustomDataSource } from './useListFormCustomDataSource' import { useListFormColumns } from './useListFormColumns' +import { orderListToolbarItems } from './toolbarOrder' import { Loading } from '@/components/shared' import { useStoreState } from '@/store' import { workflowService } from '@/services/workflow.service' @@ -437,6 +438,10 @@ const Grid = (props: GridProps) => { getFilter, layout, }) + const orderedToolbarData = useMemo( + () => orderListToolbarItems([...toolbarData, ...filterToolbarData]), + [toolbarData, filterToolbarData], + ) const onSelectionChanged = useCallback( (data: any) => { @@ -1854,13 +1859,8 @@ const Grid = (props: GridProps) => { setExtraFilters={setExtraFilters} /> - 0 || filterToolbarData.length > 0} - > - {toolbarData.map((item) => ( - - ))} - {filterToolbarData.map((item) => ( + 0}> + {orderedToolbarData.map((item) => ( ))} {/* burada özel filtre alanını Template ile bağla */} diff --git a/ui/src/views/list/Tree.tsx b/ui/src/views/list/Tree.tsx index 851f9f2..2dfcf22 100644 --- a/ui/src/views/list/Tree.tsx +++ b/ui/src/views/list/Tree.tsx @@ -63,6 +63,7 @@ import { getList } from '@/services/form.service' import { layoutTypes } from '../admin/listForm/edit/types' import { useListFormCustomDataSource } from './useListFormCustomDataSource' import { useListFormColumns } from './useListFormColumns' +import { orderListToolbarItems } from './toolbarOrder' import { DataType } from 'devextreme/common' import { useStoreState } from '@/store/store' import SubForms from '../form/SubForms' @@ -474,6 +475,10 @@ const Tree = (props: TreeProps) => { getFilter, layout, }) + const orderedToolbarData = useMemo( + () => orderListToolbarItems([...(toolbarData ?? []), ...(filterToolbarData ?? [])]), + [toolbarData, filterToolbarData], + ) const onSelectionChanged = useCallback( (data: any) => { @@ -1624,13 +1629,8 @@ const Tree = (props: TreeProps) => { setExtraFilters={setExtraFilters} /> - 0 || (filterToolbarData?.length ?? 0) > 0} - > - {toolbarData?.map((item) => ( - - ))} - {filterToolbarData?.map((item) => ( + 0}> + {orderedToolbarData.map((item) => ( ))} {/* burada özel filtre alanını Template ile bağla */} diff --git a/ui/src/views/list/toolbarOrder.ts b/ui/src/views/list/toolbarOrder.ts new file mode 100644 index 0000000..fb4d910 --- /dev/null +++ b/ui/src/views/list/toolbarOrder.ts @@ -0,0 +1,34 @@ +import { ToolbarItem } from 'devextreme/ui/data_grid_types' + +const orderedToolbarItemNames = [ + 'searchPanel', + 'addRowButton', + 'refreshButton', + 'openDynamicGridReport', + 'workflowStart', + 'expandAllButton', + 'collapseAllButton', + 'fitColumns', +] + +const getToolbarItemPriority = (item: ToolbarItem) => { + const name = item.name ?? '' + + if (name.startsWith('workflowApproval_')) { + return orderedToolbarItemNames.indexOf('workflowStart') + } + + const priority = orderedToolbarItemNames.indexOf(name) + return priority === -1 ? orderedToolbarItemNames.length : priority +} + +export const orderListToolbarItems = (items: ToolbarItem[]) => { + return [...items].sort((left, right) => { + const priorityDiff = getToolbarItemPriority(left) - getToolbarItemPriority(right) + if (priorityDiff !== 0) { + return priorityDiff + } + + return items.indexOf(left) - items.indexOf(right) + }) +} diff --git a/ui/src/views/list/useFilters.tsx b/ui/src/views/list/useFilters.tsx index a30993b..bd83eb1 100644 --- a/ui/src/views/list/useFilters.tsx +++ b/ui/src/views/list/useFilters.tsx @@ -282,8 +282,7 @@ const useFilters = ({ const grdOpt = gridDto?.gridOptions const config = useStoreState((state) => state.abpConfig.config) - const toolbarCulture = config?.localization.currentCulture.cultureName ?? 'tr-TR' - const toToolbarText = (text: string) => text.toLocaleUpperCase(toolbarCulture) + const toToolbarText = (text: string) => text const permissionNames = [ grdOpt?.permissionDto?.r, grdOpt?.permissionDto?.c, diff --git a/ui/src/views/list/useToolbar.tsx b/ui/src/views/list/useToolbar.tsx index 471608f..7c99a95 100644 --- a/ui/src/views/list/useToolbar.tsx +++ b/ui/src/views/list/useToolbar.tsx @@ -77,8 +77,7 @@ const useToolbar = ({ (state) => state.abpConfig.config?.localization.currentCulture.cultureName, ) const localizationTexts = useStoreState((state) => state.abpConfig.texts) - const toolbarCulture = currentCulture ?? currentLang ?? 'tr-TR' - const toToolbarText = (text: string) => text.toLocaleUpperCase(toolbarCulture) + const toToolbarText = (text: string) => text const translateToolbar = (localizationKey: string) => toToolbarText(translate(localizationKey)) const [toolbarData, setToolbarData] = useState([])