Grid ve Tree için Toolbar butonları Mobil düzenleme

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"
         },
         {

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;
+  width: 50% !important;
-  max-width: 70% !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;
+  width: 50% !important;
-  max-width: 30% !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 {

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}
                     />
                   </Template>
-                  <Toolbar
+                  <Toolbar visible={orderedToolbarData.length > 0}>
-                    visible={toolbarData.length > 0 || filterToolbarData.length > 0}
+                    {orderedToolbarData.map((item) => (
-                  >
-                    {toolbarData.map((item) => (
-                      <Item key={item.name} {...item}></Item>
-                    ))}
-                    {filterToolbarData.map((item) => (
                       <Item key={item.name} {...item}></Item>
                     ))}
                     {/* burada özel filtre alanını Template ile bağla */}

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}
                 />
               </Template>
-              <Toolbar
+              <Toolbar visible={orderedToolbarData.length > 0}>
-                visible={(toolbarData?.length ?? 0) > 0 || (filterToolbarData?.length ?? 0) > 0}
+                {orderedToolbarData.map((item) => (
-              >
-                {toolbarData?.map((item) => (
-                  <Item key={item.name} {...item}></Item>
-                ))}
-                {filterToolbarData?.map((item) => (
                   <Item key={item.name} {...item}></Item>
                 ))}
                 {/* burada özel filtre alanını Template ile bağla */}

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)
+  })
+}

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
-  const toToolbarText = (text: string) => text.toLocaleUpperCase(toolbarCulture)
   const permissionNames = [
     grdOpt?.permissionDto?.r,
     grdOpt?.permissionDto?.c,

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
-  const toToolbarText = (text: string) => text.toLocaleUpperCase(toolbarCulture)
   const translateToolbar = (localizationKey: string) => toToolbarText(translate(localizationKey))
 
   const [toolbarData, setToolbarData] = useState<ToolbarItem[]>([])