Form ve Listeye ait Icon hook

ui/dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "/index.html",
-    "revision": "0.l905521idmg"
+    "revision": "0.kufulh89m3"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), {

ui/src/utils/hooks/useCurrentMenuIcon.tsx

@@ -0,0 +1,24 @@
+import { useStoreState } from '@/store/store'
+import { useLocation } from 'react-router-dom'
+import { FaUser } from 'react-icons/fa'
+import navigationIcon from '@/configs/navigation-icon.config'
+import { navigationTreeToFlat } from '@/utils/navigation'
+
+export function useCurrentMenuIcon(className = 'w-6 h-6'): JSX.Element {
+  const mainMenu = useStoreState((state) => state.abpConfig.menu.mainMenu)
+  const location = useLocation()
+  const menus = navigationTreeToFlat(mainMenu)
+
+  const currentMenu = menus.find((menu) => {
+    if (!menu.path) return false
+
+    // normalize: /list/ -> /form/
+    const formPath = menu.path.replace('/list/', '/form/')
+
+    return location.pathname.startsWith(menu.path) || location.pathname.startsWith(formPath)
+  })
+
+  const IconComponent = currentMenu?.icon ? navigationIcon[currentMenu.icon] || FaUser : FaUser
+
+  return <IconComponent className={className} />
+}

ui/src/views/form/FormEdit.tsx

@@ -7,6 +7,8 @@ import FormDevExpress from './FormDevExpress'
 import SubForms from './SubForms'
 import { FormProps } from './types'
 import { useGridData } from './useGridData'
+import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
+import { Badge } from '@/components/ui'
 
 const FormEdit = (
   props: FormProps = {
@@ -20,8 +22,8 @@ const FormEdit = (
   const params = useParams()
   const listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
   const id = props?.id ?? params?.id ?? ''
+  const MenuIcon = useCurrentMenuIcon('w-5 h-5')
 
-  // const refListFormCode = useRef('') //Şimdilik kalsın
   const { translate } = useLocalization()
   const {
     fetchData,
@@ -66,10 +68,21 @@ const FormEdit = (
           defaultTitle="Sözsoft Kurs Platform"
         ></Helmet>
       )}
+
       <div
         className={`flex items-center pb-2 px-2 ${isSubForm ? 'justify-end' : 'justify-between'}`}
       >
-        {!isSubForm && <h3>{translate('::' + gridDto?.gridOptions.title)}</h3>}
+        <div className="flex items-center gap-2">
+          {MenuIcon}
+          {!isSubForm && (
+            <>
+              <h4 className="text-slate-700 text-sm font-medium leading-none">
+                {translate('::' + gridDto?.gridOptions?.title)}
+              </h4>
+              <Badge content={mode} />
+            </>
+          )}
+        </div>
         {permissionResults && (
           <FormButtons
             isSubForm={isSubForm}

ui/src/views/form/FormNew.tsx

@@ -9,6 +9,8 @@ import FormButtons from './FormButtons'
 import FormDevExpress from './FormDevExpress'
 import { FormProps } from './types'
 import { useGridData } from './useGridData'
+import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
+import { Badge } from '@/components/ui'
 
 const FormNew = (
   props: FormProps = {
@@ -20,8 +22,9 @@ const FormNew = (
   const params = useParams()
   const listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
   const [searchParams] = useSearchParams()
-  // const refListFormCode = useRef('') //Şimdilik kalsın
   const { translate } = useLocalization()
+  const MenuIcon = useCurrentMenuIcon('w-5 h-5')
+
   const {
     setFormData,
     loading,
@@ -155,7 +158,17 @@ const FormNew = (
       <div
         className={`flex items-center pb-2 px-2 ${isSubForm ? 'justify-end' : 'justify-between'}`}
       >
-        {!isSubForm && <h3>{translate('::' + gridDto?.gridOptions.title)}</h3>}
+        <div className="flex items-center gap-2">
+          {MenuIcon}
+          {!isSubForm && (
+            <>
+              <h4 className="text-slate-700 text-sm font-medium leading-none">
+                {translate('::' + gridDto?.gridOptions?.title)}
+              </h4>
+              <Badge content={mode} />
+            </>
+          )}
+        </div>
         {permissionResults && (
           <FormButtons
             isSubForm={isSubForm}

ui/src/views/form/FormView.tsx

@@ -1,12 +1,14 @@
 import { Container, Loading } from '@/components/shared'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Helmet } from 'react-helmet'
-import { useParams } from 'react-router-dom'
+import { useLocation, useParams } from 'react-router-dom'
 import FormButtons from './FormButtons'
 import FormDevExpress from './FormDevExpress'
 import SubForms from './SubForms'
 import { FormProps } from './types'
 import { useGridData } from './useGridData'
+import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
+import { Badge } from '@/components/ui'
 
 const FormView = (
   props: FormProps = {
@@ -21,6 +23,8 @@ const FormView = (
   const listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
   const id = props?.id ?? params?.id ?? ''
   const { translate } = useLocalization()
+  const MenuIcon = useCurrentMenuIcon('w-5 h-5')
+
   const {
     loading,
     gridDto,
@@ -63,7 +67,17 @@ const FormView = (
       <div
         className={`flex items-center pb-2 px-2 ${isSubForm ? 'justify-end' : 'justify-between'}`}
       >
-        {!isSubForm && <h3>{translate('::' + gridDto?.gridOptions.title)}</h3>}
+        <div className="flex items-center gap-2">
+          {MenuIcon}
+          {!isSubForm && (
+            <>
+              <h4 className="text-slate-700 text-sm font-medium leading-none">
+                {translate('::' + gridDto?.gridOptions?.title)}
+              </h4>
+              <Badge content={mode} />
+            </>
+          )}
+        </div>
         {permissionResults && (
           <FormButtons
             isSubForm={isSubForm}

ui/src/views/list/List.tsx

@@ -2,18 +2,17 @@ import { useLocation, useParams, useSearchParams } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 import Container from '@/components/shared/Container'
 import Grid from './Grid'
-import { FaChartPie, FaList, FaTable, FaTh, FaUser } from 'react-icons/fa'
+import { FaList, FaTable, FaTh, FaUser } from 'react-icons/fa'
 import { useStoreState } from '@/store/store'
 import classNames from 'classnames'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { GridDto } from '@/proxy/form/models'
 import Card from './Card'
 import { Button } from '@/components/ui'
-import navigationIcon from '@/configs/navigation-icon.config'
-import { navigationTreeToFlat } from '@/utils/navigation'
 import Pivot from './Pivot'
 import { getList } from '@/services/form.service'
 import { Loading } from '@/components/shared'
+import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
 
 const List = () => {
   const params = useParams()
@@ -23,8 +22,7 @@ const List = () => {
   const [viewMode, setViewMode] = useState<'grid' | 'card' | 'pivot'>()
   const mode = useStoreState((state) => state.theme.mode)
   const [gridDto, setGridDto] = useState<GridDto>()
-  const mainMenu = useStoreState((state) => state.abpConfig.menu.mainMenu)
+  const MenuIcon = useCurrentMenuIcon('w-5 h-5')
-  const location = useLocation()
 
   const initializeGridAsync = async () => {
     const response = await getList({ listFormCode })
@@ -47,17 +45,6 @@ const List = () => {
     return null
   }
 
-  const getCurrentMenuIcon = (className = 'w-6 h-6'): JSX.Element => {
-    const menus = navigationTreeToFlat(mainMenu)
-    const currentMenu = menus.find((menu) => menu.path === location.pathname)
-
-    if (currentMenu?.icon) {
-      const IconComponent = navigationIcon[currentMenu.icon] || FaUser
-      return <IconComponent className={className} />
-    }
-    return <FaUser className={className} />
-  }
-
   return (
     <Container>
       {!gridDto ? (
@@ -71,7 +58,7 @@ const List = () => {
             })}
           >
             <div className="flex items-center gap-2">
-              {getCurrentMenuIcon('w-5 h-5')} {/* ikon biraz küçüldü */}
+              {MenuIcon}
               <h4 className="text-slate-700 text-sm font-medium leading-none">
                 {translate('::' + gridDto?.gridOptions?.title)}
               </h4>