fix search and download
This commit is contained in:
unknown
@ -3,6 +3,7 @@ import { UserPlus } from 'lucide-react';
|
||||
import { KeenIcon, useDataGrid } from '@/components';
|
||||
import { DefaultTooltip } from '@/components';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@ -10,6 +11,9 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import { getAuth } from '@/auth';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
const API_URL = apiConfig.service_customer;
|
||||
|
||||
interface ListToolbarProps {
|
||||
createMember: () => void;
|
||||
@ -19,42 +23,70 @@ interface ListToolbarProps {
|
||||
}
|
||||
|
||||
const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolbarProps) => {
|
||||
|
||||
const [groupFilter, setGroupFilter] = useState('');
|
||||
const [usernameFilter, setUsernameFilter] = useState('');
|
||||
const [msisdnFilter, setMsisdnFilter] = useState('');
|
||||
const {table}=useDataGrid();
|
||||
const { table, reload } = useDataGrid();
|
||||
const [searchValue, setSearchValue] = useState<string>();
|
||||
const [typeSearchValue, setSearchTypeValue] = useState<string>();
|
||||
|
||||
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUsernameFilter(e.target.value);
|
||||
table.getColumn('username')?.setFilterValue(e.target.value);
|
||||
};
|
||||
const handleMsisdnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setMsisdnFilter(e.target.value);
|
||||
table.getColumn('msisdn')?.setFilterValue(e.target.value);
|
||||
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchValue(e.target.value)
|
||||
if (typeSearchValue === 'username') {
|
||||
table.getColumn('username')?.setFilterValue(e.target.value);
|
||||
table.getColumn('msisdn')?.setFilterValue('');
|
||||
}
|
||||
if (typeSearchValue === 'msisdn') {
|
||||
table.getColumn('msisdn')?.setFilterValue(e.target.value);
|
||||
table.getColumn('username')?.setFilterValue('');
|
||||
}
|
||||
if (groupFilter) table.getColumn('group_name')?.setFilterValue(groupFilter);
|
||||
};
|
||||
|
||||
const handleGroupChange = (e: any) => {
|
||||
let value = e.target.value;
|
||||
if (value === '__all__') value = '';
|
||||
setGroupFilter(value);
|
||||
if (typeSearchValue === 'username') table.getColumn('username')?.setFilterValue(searchValue);
|
||||
if (typeSearchValue === 'msisdn') table.getColumn('msisdn')?.setFilterValue(searchValue);
|
||||
table.getColumn('group_name')?.setFilterValue(value);
|
||||
};
|
||||
|
||||
const generateExportFilters = (groupFilter: string, typeSearchValue: any, searchValue: any): { id: string; value: string }[] => {
|
||||
const filters: { id: string; value: string }[] = [];
|
||||
if (groupFilter) filters.push({ id: 'group_name', value: groupFilter });
|
||||
if (typeSearchValue && searchValue) filters.push({ id: typeSearchValue, value: searchValue });
|
||||
return filters;
|
||||
};
|
||||
|
||||
const exporDataToExcel = async (filters: { id: string; value: string }[]) => {
|
||||
try {
|
||||
const filterParam = encodeURIComponent(JSON.stringify(filters));
|
||||
const response = await fetch(`${API_URL}/customer/export-excel?filter=${filterParam}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${getAuth()?.access_token}`,
|
||||
}
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to fetch file');
|
||||
|
||||
const blob = await response.blob();
|
||||
const contentDisposition = response.headers.get('content-disposition');
|
||||
const currentYear = new Date().getFullYear();
|
||||
const filename = `TPAY_members_${currentYear}.xlsx`;
|
||||
return { blob, filename };
|
||||
} catch (error:any) {
|
||||
console.error('Error exporting data:', error);
|
||||
toast.error(error)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<div className="flex gap-3 items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Username"
|
||||
value={usernameFilter}
|
||||
onChange={handleUsernameChange}
|
||||
className="input w-40"
|
||||
/>
|
||||
|
||||
<Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
|
||||
<SelectTrigger className="input input-sm w-40 text-gray-500">
|
||||
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
|
||||
<SelectValue placeholder="Select Group" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -66,15 +98,50 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Phone Number"
|
||||
value={msisdnFilter}
|
||||
onChange={handleMsisdnChange}
|
||||
className="input w-40"
|
||||
/>
|
||||
|
||||
<Select value={typeSearchValue} onValueChange={(value) => {setSearchTypeValue(value)}}>
|
||||
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
|
||||
<SelectValue placeholder="Select Search Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="username">Username</SelectItem>
|
||||
<SelectItem value="msisdn">Phone Number</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<label className="input input-sm w-1/3">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={`Search ${typeSearchValue || ''}`} // Use typeSearchValue if it's set, else fallback to an empty string
|
||||
value={searchValue}
|
||||
onChange={(e:any) => handleSearch(e)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5"
|
||||
onClick={async () => {
|
||||
const filters = generateExportFilters(groupFilter, typeSearchValue, searchValue);
|
||||
const result = await exporDataToExcel(filters);
|
||||
|
||||
if (result) {
|
||||
const url = window.URL.createObjectURL(result.blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = result.filename;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} else {
|
||||
toast.error('Failed to export data');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Export Data
|
||||
</Button>
|
||||
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
|
||||
Add Data
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user