84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import React from 'react';
|
||
import CardBox from './CardBox';
|
||
import { useRouter } from 'next/router';
|
||
import { humanize } from '../helpers/humanize';
|
||
|
||
const SearchResults = ({ searchResults, searchQuery }) => {
|
||
const router = useRouter();
|
||
|
||
return (
|
||
<>
|
||
<p className={'block font-bold mb-2'}>Aranan ifade: {searchQuery}</p>
|
||
{Object.keys(searchResults).map((tableName) => (
|
||
<>
|
||
<p className={'block font-bold mb-2'}>{humanize(tableName)}</p>
|
||
<CardBox
|
||
className='mb-6 border border-gray-300 rounded overflow-hidden'
|
||
hasTable
|
||
key={tableName}
|
||
>
|
||
<div className='overflow-x-auto'>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
{searchResults[tableName].length > 0 &&
|
||
Object.keys(searchResults[tableName][0]).map((key) => {
|
||
if (
|
||
key !== 'tableName' &&
|
||
key !== 'id' &&
|
||
key !== 'matchAttribute'
|
||
) {
|
||
return (
|
||
<th data-label={key} key={key}>
|
||
{humanize(key)}
|
||
</th>
|
||
);
|
||
}
|
||
return null;
|
||
})}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{searchResults[tableName].map((item, index) => (
|
||
<tr key={index}>
|
||
{Object.keys(item).map((key) => {
|
||
if (
|
||
key !== 'tableName' &&
|
||
key !== 'id' &&
|
||
key !== 'matchAttribute'
|
||
) {
|
||
return (
|
||
<td
|
||
key={key}
|
||
onClick={() =>
|
||
router.push(
|
||
`/${tableName}/${tableName}-view/?id=${item['id']}`,
|
||
)
|
||
}
|
||
>
|
||
{item[key]}
|
||
</td>
|
||
);
|
||
}
|
||
return null;
|
||
})}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{!Object.keys(searchResults).length && (
|
||
<div className={'text-center py-4'}>Veri bulunamadı</div>
|
||
)}
|
||
</CardBox>
|
||
</>
|
||
))}
|
||
{!Object.keys(searchResults).length && (
|
||
<div className={'py-4'}>Eşleşme bulunamadı</div>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default SearchResults;
|