Listelerdeki başlığa Menüdeki Icon getirildi.

This commit is contained in:
Sedat Öztürk 2025-09-21 02:17:18 +03:00
parent bd81a77216
commit e22ea52c6a
3 changed files with 52 additions and 6 deletions

View file

@ -6,11 +6,29 @@ import {
} from '@/constants/navigation.constant' } from '@/constants/navigation.constant'
import { MenuDto } from '@/proxy/menus/models' import { MenuDto } from '@/proxy/menus/models'
export function navigationTreeToFlat(items: NavigationTree[]): NavigationTree[] {
const result: NavigationTree[] = []
const traverse = (nodes: NavigationTree[]) => {
for (const node of nodes) {
const { subMenu, ...rest } = node
result.push(rest as NavigationTree)
if (subMenu && subMenu.length > 0) {
traverse(subMenu)
}
}
}
traverse(items)
return result
}
export default function getChildren(menu: MenuDto[], parentCode: string | null): NavigationTree[] { export default function getChildren(menu: MenuDto[], parentCode: string | null): NavigationTree[] {
const menus: NavigationTree[] = [] const menus: NavigationTree[] = []
for (const child of menu.filter((a) => a.parentCode === parentCode)) { for (const child of menu.filter((a) => a.parentCode === parentCode)) {
const item: NavigationTree = { const item: NavigationTree = {
key: child.url?.length ? child.url : child.code ?? '', key: child.url?.length ? child.url : (child.code ?? ''),
path: child.url ?? '', path: child.url ?? '',
title: child.displayName ?? '', title: child.displayName ?? '',
icon: child.icon ?? '', icon: child.icon ?? '',

View file

@ -7,7 +7,7 @@ import { Pagination, Select } from '@/components/ui'
import classNames from 'classnames' import classNames from 'classnames'
import { useStoreState } from '@/store/store' import { useStoreState } from '@/store/store'
import { getList } from '@/services/form.service' import { getList } from '@/services/form.service'
import { FaAngleRight } from 'react-icons/fa' import { FaAngleRight, FaInbox } from 'react-icons/fa'
interface MultiFormViewProps { interface MultiFormViewProps {
listFormCode: string listFormCode: string
@ -82,6 +82,15 @@ const CardView = ({ listFormCode, searchParams }: MultiFormViewProps) => {
return ( return (
<> <>
{data.length === 0 && (
<div className="flex flex-col items-center justify-center p-10 bg-gray-50 dark:bg-neutral-800/50 rounded-md border-2 border-dashed border-gray-200 dark:border-neutral-700">
<div className="text-center">
<FaInbox className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
<p className="mt-4 text-lg font-semibold text-gray-700 dark:text-gray-300">Kayıt Bulunamadı</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Görüntülenecek herhangi bir veri yok.</p>
</div>
</div>
)}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
{data.map((row, idx) => { {data.map((row, idx) => {
const keyField = gridDto.gridOptions.keyFieldName const keyField = gridDto.gridOptions.keyFieldName

View file

@ -1,14 +1,17 @@
import { useParams, useSearchParams } from 'react-router-dom' import { useLocation, useParams, useSearchParams } from 'react-router-dom'
import { useState } from 'react' import { useMemo, useState } from 'react'
import Container from '@/components/shared/Container' import Container from '@/components/shared/Container'
import Grid from './Grid' import Grid from './Grid'
import { FaList, FaTh } from 'react-icons/fa' import { FaList, FaTh, FaUser } from 'react-icons/fa'
import { useStoreState } from '@/store/store' import { useStoreState } from '@/store/store'
import classNames from 'classnames' import classNames from 'classnames'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { GridDto } from '@/proxy/form/models' import { GridDto } from '@/proxy/form/models'
import CardView from './CardView' import CardView from './CardView'
import { Button } from '@/components/ui' import { Button } from '@/components/ui'
import navigationIcon from '@/configs/navigation-icon.config'
import { NavigationTree } from '@/@types/navigation'
import { navigationTreeToFlat } from '@/utils/navigation'
const List = () => { const List = () => {
const params = useParams() const params = useParams()
@ -18,9 +21,22 @@ const List = () => {
const [viewMode, setViewMode] = useState<'grid' | 'card'>('grid') const [viewMode, setViewMode] = useState<'grid' | 'card'>('grid')
const mode = useStoreState((state) => state.theme.mode) const mode = useStoreState((state) => state.theme.mode)
const [gridDto, setGridDto] = useState<GridDto>() const [gridDto, setGridDto] = useState<GridDto>()
const mainMenu = useStoreState((state) => state.abpConfig.menu.mainMenu)
const location = useLocation()
if (!listFormCode) return null if (!listFormCode) 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 ( return (
<Container> <Container>
<div <div
@ -29,7 +45,10 @@ const List = () => {
'border-neutral-700': mode === 'dark', 'border-neutral-700': mode === 'dark',
})} })}
> >
<div className="flex items-center gap-2">
{getCurrentMenuIcon('w-6 h-6')}
<h3>{translate('::' + gridDto?.gridOptions?.title)}</h3> <h3>{translate('::' + gridDto?.gridOptions?.title)}</h3>
</div>
{gridDto?.gridOptions?.description === gridDto?.gridOptions?.title ? ( {gridDto?.gridOptions?.description === gridDto?.gridOptions?.title ? (
<p className="text-gray-600 mr-auto pt-1 ml-2"></p> <p className="text-gray-600 mr-auto pt-1 ml-2"></p>