91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { UserPlus } from 'lucide-react';
|
|
import { KeenIcon, useDataGrid } from '@/components';
|
|
import { DefaultTooltip } from '@/components';
|
|
import { useState } from 'react';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from '@/components/ui/select';
|
|
|
|
interface ListToolbarProps {
|
|
createMember: () => void;
|
|
onReload: () => void;
|
|
isReloading: boolean;
|
|
groups: any;
|
|
}
|
|
|
|
const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolbarProps) => {
|
|
|
|
const [groupFilter, setGroupFilter] = useState('');
|
|
const [usernameFilter, setUsernameFilter] = useState('');
|
|
const {table}=useDataGrid();
|
|
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setUsernameFilter(e.target.value);
|
|
table.getColumn('username')?.setFilterValue(e.target.value);
|
|
};
|
|
|
|
const handleGroupChange = (e: any) => {
|
|
let value = e.target.value;
|
|
if (value === '__all__') value = '';
|
|
setGroupFilter(value);
|
|
table.getColumn('group_name')?.setFilterValue(value);
|
|
};
|
|
|
|
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">
|
|
<SelectValue placeholder="Select Group" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={"__all__"}>All Group</SelectItem>
|
|
{groups.map((el: any, idx: any) => (
|
|
<SelectItem key={idx} value={el.name}>
|
|
{el.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex gap-3 items-center">
|
|
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
|
|
Add Data
|
|
</Button>
|
|
<DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
|
|
<Button
|
|
variant="outline"
|
|
className="h-7.5"
|
|
onClick={onReload}
|
|
disabled={isReloading}
|
|
>
|
|
{isReloading ? (
|
|
<div className="animate-spin">
|
|
<KeenIcon icon="arrows-circle" />
|
|
</div>
|
|
) : (
|
|
<KeenIcon icon="arrows-circle" />
|
|
)}
|
|
</Button>
|
|
</DefaultTooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ListToolbar; |