Listelerdeki başlığa Menüdeki Icon getirildi.
This commit is contained in:
parent
bd81a77216
commit
e22ea52c6a
3 changed files with 52 additions and 6 deletions
|
|
@ -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 ?? '',
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue