TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add an opsional <Dialog> component for handling the create new group form

Browse Source
This commit is contained in:
Wikzyy
2025-02-21 11:29:36 +07:00
parent 2a1d10fd3d
commit 2a74922621
2 changed files with 149 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ui/DataTable.tsx
View File

@ -19,13 +19,26 @@ import {
} from '@/components/ui/table';
import { useState } from 'react';
import { Input } from './input';
import { Button } from './button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger
} from './dialog';
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
}
export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
export function DataTable<TData, TValue>({
columns,
data,
createGroup
}: DataTableProps<TData, TValue> & { createGroup?: () => void }) {
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const table = useReactTable({
data,
@ -40,13 +53,19 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
return (
<div>
<div className="flex items-center py-4">
<div className="flex items-center py-4 justify-between">
<Input
placeholder="Search"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
className="max-w-sm"
/>
{createGroup && (
<Button variant="outline" onClick={createGroup}>
Create Group
</Button>
)}
</div>
<div className="rounded-md border">
<Table>

129
src/pages/groups/ManageGroups.tsx
View File

@ -1,5 +1,23 @@
import { DataTable } from '@/components/ui/DataTable';
import { columns, Group } from './Column';
import { Button } from '@/components/ui/button';
import { Link } from 'react-router-dom';
import {
Dialog,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger
} from '@/components/ui/dialog';
import { DialogContent } from '@mui/material';
import { useState } from 'react';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
const dataGroup: Group[] = [
{
@ -23,11 +41,120 @@ const dataGroup: Group[] = [
];
const ManageGroups = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [formData, setFormData] = useState({
groupName: '',
description: '',
pin_length: '',
max_pin_attempts: '',
default_notification: ''
});
const openDialog = () => setIsDialogOpen(true);
const closeDialog = () => setIsDialogOpen(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log('Submitted Data', formData);
closeDialog();
};
return (
<div>
<div className="container mx-auto pt-2">
<h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
<DataTable data={dataGroup} columns={columns} />
<DataTable data={dataGroup} columns={columns} createGroup={openDialog} />
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogContent className="w-[600px]">
<DialogHeader>
<div className="flex flex-col gap-2">
<DialogTitle>Create New Group</DialogTitle>
<DialogDescription>Fill out the form to create a new group</DialogDescription>
</div>
</DialogHeader>
<div className="p-5">
<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
<div className="grid grid-cols-4 items-center gap-4 w-full">
<label className="form-label text-sm">
<span className="text-red-500">*</span>Group Name:
</label>
<input
type="text"
name="groupName"
className="input w-full col-span-3"
value={formData.groupName}
onChange={handleChange}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4 w-full">
<label className="form-label text-sm">
<span className="text-red-500">*</span>Description:
</label>
<input
type="text"
name="description"
className="input w-full col-span-3"
value={formData.description}
onChange={handleChange}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4 w-full">
<label className="form-label text-sm">
<span className="text-red-500">*</span>PIN Length:
</label>
<input
type="text"
name="pin_length"
className="input w-full col-span-3"
value={formData.pin_length}
onChange={handleChange}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4 w-full">
<label className="form-label text-sm">
<span className="text-red-500">*</span>Max Pin Attempts:
</label>
<input
type="text"
name="max_pin_attempts"
className="input w-full col-span-3"
value={formData.max_pin_attempts}
onChange={handleChange}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4 w-full mb-5">
<label className="form-label text-sm">Default Notification:</label>
<Select
onValueChange={(e) => setFormData({ ...formData, default_notification: e })}
>
<SelectTrigger className="w-full col-span-3">
<SelectValue placeholder="Select Default Notification" />
</SelectTrigger>
<SelectContent className="w-full">
<SelectItem value="1 - notifSender">1 - notifSender</SelectItem>
<SelectItem value="2 - notifBenefeciary">2 - notifBenefeciary</SelectItem>
</SelectContent>
</Select>
{/* <input
type="text"
name="default_notification"
className="input w-full col-span-3"
value={formData.default_notification}
onChange={handleChange}
/> */}
</div>
<Button type="submit">Submit</Button>
</form>
</div>
</DialogContent>
</Dialog>
</div>
</div>
);