Fixed UI Managemember
This commit is contained in:
bagusajisaputroo
@ -1,3 +1,4 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
@ -18,7 +19,7 @@ export type Members = {
|
||||
created_at: Date;
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<Members>[] = [
|
||||
export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members>[] => [
|
||||
{
|
||||
accessorKey: 'no',
|
||||
header: ({ column }) => {
|
||||
@ -110,22 +111,12 @@ export const columns: ColumnDef<Members>[] = [
|
||||
const dataMembers = row.original;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
{/* <DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger> */}
|
||||
{/* <DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigator.clipboard.writeText(dataMembers.id.toString())}
|
||||
>
|
||||
Copy account ID
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent> */}
|
||||
</DropdownMenu>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleUpdate(dataMembers)}
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
import { DataTable } from '@/components/ui/DataTable';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { columns, Members, initialMember } from './Columns';
|
||||
import { getColumns, Members, initialMember } from './Columns';
|
||||
import { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
// import CustomerDialog from './CustomerDetailModal';
|
||||
import DetailMember from './blocks/DetailMember';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
import { useAuthContext } from '@/auth';
|
||||
import { LoaderTransparant } from '@/components';
|
||||
import { DataGridInner, LoaderTransparant } from '@/components';
|
||||
import { DataGridProvider } from '@/components';
|
||||
import { toast } from 'sonner';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
|
||||
const BASE_URL = apiConfig.service_customer;
|
||||
import { Helmet } from 'react-helmet';
|
||||
import ListToolbar from './blocks/ListToolBar';
|
||||
const ManageMembers = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [members, setMembers] = useState([]);
|
||||
@ -23,8 +25,8 @@ const ManageMembers = () => {
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [dialogType, setDialogType] = useState('');
|
||||
const closeDialog = () => {
|
||||
setIsDialogOpen(false)
|
||||
setMember(initialMember)
|
||||
setIsDialogOpen(false);
|
||||
setMember(initialMember);
|
||||
};
|
||||
const { getUser } = useAuthContext();
|
||||
|
||||
@ -50,7 +52,7 @@ const ManageMembers = () => {
|
||||
el.no = temp++;
|
||||
if (el.date_birth) {
|
||||
const d = new Date(el.date_birth);
|
||||
el.date_birth = d.toLocaleString("sv-SE");
|
||||
el.date_birth = d.toLocaleString('sv-SE');
|
||||
}
|
||||
el.name = el.fullname;
|
||||
return el;
|
||||
@ -58,14 +60,14 @@ const ManageMembers = () => {
|
||||
setMembers(resMembers);
|
||||
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
|
||||
params: {
|
||||
limit: 50,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'name',
|
||||
order_direction: 'ASC',
|
||||
limit: 50,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'name',
|
||||
order_direction: 'ASC'
|
||||
}
|
||||
});
|
||||
setProfession(getProfession.data.data.list)
|
||||
setProfession(getProfession.data.data.list);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message);
|
||||
console.log(error);
|
||||
@ -74,14 +76,14 @@ const ManageMembers = () => {
|
||||
|
||||
const handleUpdate = (data: any) => {
|
||||
setDialogType('update');
|
||||
setSelectedMember(data.id)
|
||||
setSelectedMember(data.id);
|
||||
setMember(data);
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
function createMember() {
|
||||
setDialogType('create');
|
||||
setSelectedMember('')
|
||||
setSelectedMember('');
|
||||
setMember(initialMember);
|
||||
setIsDialogOpen(true);
|
||||
}
|
||||
@ -92,7 +94,7 @@ const ManageMembers = () => {
|
||||
}
|
||||
|
||||
const handleYes = async () => {
|
||||
setLoading(true)
|
||||
setLoading(true);
|
||||
const userLogin: any = await getUser();
|
||||
const updateData: any = member;
|
||||
updateData.updated_by = userLogin.data ? userLogin.data.id : '';
|
||||
@ -135,7 +137,7 @@ const ManageMembers = () => {
|
||||
for (const property in updateData) {
|
||||
if (updateData[property]) form.append(property, updateData[property]);
|
||||
}
|
||||
|
||||
|
||||
if (dialogType === 'update') {
|
||||
await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, form, {
|
||||
headers: {
|
||||
@ -145,8 +147,8 @@ const ManageMembers = () => {
|
||||
toast.success('Success Edit Member');
|
||||
}
|
||||
if (dialogType === 'create') {
|
||||
const createMember:any = member
|
||||
createMember.pin = "admin"
|
||||
const createMember: any = member;
|
||||
createMember.pin = 'admin';
|
||||
delete createMember.password;
|
||||
delete createMember.try_pin;
|
||||
delete createMember.license_number;
|
||||
@ -162,7 +164,7 @@ const ManageMembers = () => {
|
||||
delete createMember.approval_description_premium;
|
||||
delete createMember.approval_description_agent;
|
||||
delete createMember.language;
|
||||
await axios.post(`${BASE_URL}/customers/create`, member)
|
||||
await axios.post(`${BASE_URL}/customers/create`, member);
|
||||
toast.success('Success Create Member. PIN sent to email');
|
||||
}
|
||||
} catch (error: any) {
|
||||
@ -171,12 +173,12 @@ const ManageMembers = () => {
|
||||
setDialogOpen(false);
|
||||
closeDialog();
|
||||
await fetchCustomers();
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
function setShowAddDialog(el: any) {
|
||||
setIsDialogOpen(el)
|
||||
setIsDialogOpen(el);
|
||||
}
|
||||
|
||||
if (loading) return <LoaderTransparant />;
|
||||
@ -196,7 +198,7 @@ const ManageMembers = () => {
|
||||
onYes={handleYes}
|
||||
onNo={() => setDialogOpen(false)}
|
||||
/>
|
||||
{ (member.id!=='' || dialogType==='create') ? (
|
||||
{member.id !== '' || dialogType === 'create' ? (
|
||||
<DetailMember
|
||||
showAddDialog={isDialogOpen}
|
||||
setShowAddDialog={setShowAddDialog}
|
||||
@ -207,9 +209,13 @@ const ManageMembers = () => {
|
||||
profession={profession}
|
||||
dialogType={dialogType}
|
||||
/>
|
||||
): ""}
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Members</h1>
|
||||
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
|
||||
Manage Members
|
||||
</h1>
|
||||
<div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
|
||||
<Breadcrumbs>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
@ -225,13 +231,20 @@ const ManageMembers = () => {
|
||||
</div>
|
||||
<div className="w-full overflow-x-auto px-4">
|
||||
<div className="min-w-[800px]">
|
||||
<DataTable
|
||||
<DataGridProvider
|
||||
data={members}
|
||||
createData={createMember}
|
||||
columns={columns}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={null}
|
||||
/>
|
||||
columns={getColumns(handleUpdate)}
|
||||
layout={{ card: true }}
|
||||
serverSide={false}
|
||||
toolbar={
|
||||
<ListToolbar createMember={createMember} />
|
||||
}
|
||||
onRowSelectionChange={(selected, table: any) => {
|
||||
const selectedRow = table.getSelectedRowModel().rows[0];
|
||||
if (selectedRow) handleUpdate(selectedRow.original);
|
||||
}}
|
||||
>
|
||||
</DataGridProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
53
src/pages/members/manage-members/blocks/ListToolBar.tsx
Normal file
53
src/pages/members/manage-members/blocks/ListToolBar.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useState } from 'react';
|
||||
|
||||
const ListToolbar = ({ createMember }: { createMember: () => void }) => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const [ usernameFilter, setUsernameFilter] = useState('');
|
||||
const [emailFilter, setEmailFilter] = useState('');
|
||||
|
||||
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUsernameFilter(e.target.value);
|
||||
table.getColumn('username')?.setFilterValue(e.target.value);
|
||||
};
|
||||
|
||||
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setEmailFilter(e.target.value);
|
||||
table.getColumn('email')?.setFilterValue(e.target.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 input-sm w-40"
|
||||
/>
|
||||
</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={'Refresh'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListToolbar;
|
||||
Reference in New Issue
Block a user