Untitled
unknown
javascript
a year ago
3.5 kB
9
Indexable
import React, { useState } from 'react'; type InputDefault = { defaultValue: any; onChange: (value: string) => void; }; export const SearchInput = ({ defaultValue, onChange }: InputDefault) => { const [searchQuery, setSearchQuery] = useState(defaultValue || ''); const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const value = e.target.value; setSearchQuery(value); onChange(value); }; return ( <div> <label htmlFor="inputId">searchIcon</label> <input className='input' type="text" placeholder="Cerca" value={searchQuery} onChange={handleInputChange} /> </div> ); }; "use client" import React, { useEffect, useState } from 'react' import Pagination from '@/app/components/Pagination'; import Table from '@/app/components/Table' import Title from '@/app/components/Title'; import { useSupplier } from '@/app/hooks/useSupplierAPI'; import { SearchInput } from '@/app/components/SearchInput/SearchInput'; type Props = { columns: string[]; }; type CollegementoArticoli = { id: number; supplierID: string; supplierName: string; undefArticles: string; assignedArticles: number; }; type ColumnDefinitionType<T> = { key: keyof T; label: string; header: string; width?: number; }; const Articoli = (props: Props) => { const [currentPage, setCurrentPage] = useState(1); const [searchTerm, setSearchTerm] = useState(''); const [filteredData, setFilteredData] = useState<CollegementoArticoli[]>([]); // filteredData state'i eklendi const { data } = useSupplier(); useEffect(() => { if (data) { // Filter data only if it exists const filtered = filterData(data, searchTerm); setFilteredData(filtered); } }, [data, searchTerm]); const filterData = (data: CollegementoArticoli[], searchTerm: string) => { return data.filter(item => item.supplierID.toLowerCase().includes(searchTerm.toLowerCase()) ); }; console.log(filterData, "filteredData"); const handleSearch = (searchValue: string) => { setSearchTerm(searchValue); setCurrentPage(1); }; const { columns } = props; const defaultColumns: Array<ColumnDefinitionType<CollegementoArticoli>> = [ { key: 'supplierID', label: 'Fornitori', header: 'Fornitori' }, { key: 'supplierName', label: 'Analizzare', header: 'Analizzare' }, { key: 'undefArticles', label: 'Assegnati', header: 'Assegnati' }, { key: 'assignedArticles', label: 'Fatturato Value', header: 'Fatturato Value' } ]; console.log(data, "dataaaa"); console.log(searchTerm, "searchTerm"); return ( <div> <Title Title={'Collegamento Articoli'} /> <SearchInput defaultValue={''} onChange={handleSearch} /> <Table data={filteredData} pageNumber={currentPage} pageSize={5} columns={columns && columns.length > 0 ? columns : defaultColumns} /> <Pagination pageSize={5} currentPage={currentPage} items={data.length} onPageChange={function (page: number): void { setCurrentPage(page) }} /> </div> ) } export default Articoli
Editor is loading...
Leave a Comment