change customer filter to text box from select box
This commit is contained in:
@ -54,7 +54,6 @@ export default function ContactRecordsList() {
|
|||||||
|
|
||||||
// State for data
|
// State for data
|
||||||
const [contactRecords, setContactRecords] = useState<ContactRecord[]>([]);
|
const [contactRecords, setContactRecords] = useState<ContactRecord[]>([]);
|
||||||
const [customers, setCustomers] = useState<Customer[]>([]);
|
|
||||||
const [pagination, setPagination] = useState<PaginationInfo>({
|
const [pagination, setPagination] = useState<PaginationInfo>({
|
||||||
page: initialPage,
|
page: initialPage,
|
||||||
pageSize: initialPageSize,
|
pageSize: initialPageSize,
|
||||||
@ -64,25 +63,6 @@ export default function ContactRecordsList() {
|
|||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
// Fetch customers for the filter dropdown
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchCustomers = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/customers');
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Failed to fetch customers');
|
|
||||||
}
|
|
||||||
const data = await response.json();
|
|
||||||
setCustomers(data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching customers:', err);
|
|
||||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchCustomers();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Fetch contact records with filters and pagination
|
// Fetch contact records with filters and pagination
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchContactRecords = async () => {
|
const fetchContactRecords = async () => {
|
||||||
@ -173,22 +153,17 @@ export default function ContactRecordsList() {
|
|||||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="customerId" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
<label htmlFor="customerId" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
Customer
|
Search Customer
|
||||||
</label>
|
</label>
|
||||||
<select
|
<input
|
||||||
|
type="text"
|
||||||
id="customerId"
|
id="customerId"
|
||||||
name="customerId"
|
name="customerId"
|
||||||
value={customerId}
|
value={customerId}
|
||||||
onChange={(e) => setCustomerId(e.target.value)}
|
onChange={(e) => setCustomerId(e.target.value)}
|
||||||
|
placeholder="Search customer..."
|
||||||
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
|
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
|
||||||
>
|
/>
|
||||||
<option value="">All Customers</option>
|
|
||||||
{customers.map((customer) => (
|
|
||||||
<option key={customer.id} value={customer.id}>
|
|
||||||
{customer.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="contactType" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
<label htmlFor="contactType" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
|||||||
Reference in New Issue
Block a user