Berkay/evyos-frontend-development
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated build add update delete

Browse Source
This commit is contained in:
Berkay
2025-12-02 17:13:25 +03:00
parent 0394d42d02
commit 5bb6021102
87 changed files with 1470 additions and 1158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/pages/people/add/form.tsx
View File

@@ -37,7 +37,7 @@ const PeopleForm = ({ refetchTable }: { refetchTable: () => void }) => {
const mutation = useAddPeopleMutation();
function onSubmit(values: PeopleAdd) { mutation.mutate({ data: values }); setTimeout(() => refetchTable(), 400) };
function onSubmit(values: PeopleAdd) { mutation.mutate({ data: values, refetchTable }) };
return (
<Form {...form}>

7
frontend/pages/people/add/page.tsx
View File

@@ -10,14 +10,11 @@ const PageAddPerson = () => {
const [sort, setSort] = useState({ createdAt: 'desc' });
const [filters, setFilters] = useState({});
const { data, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters });
const { data, isFetching, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters });
return (
<>
<PeopleDataTableAdd
data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit}
onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch}
/>
<PeopleDataTableAdd data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch} tableIsLoading={isLoading || isFetching} />
<PeopleForm refetchTable={refetch} />
</>
)

6
frontend/pages/people/add/queries.tsx
View File

@@ -3,7 +3,7 @@ import { useMutation } from '@tanstack/react-query'
import { PeopleAdd } from './types'
import { toISOIfNotZ } from '@/lib/utils';
const fetchGraphQlPeopleAdd = async (record: PeopleAdd): Promise<{ data: PeopleAdd | null; status: number }> => {
const fetchGraphQlPeopleAdd = async (record: PeopleAdd, refetchTable: () => void): Promise<{ data: PeopleAdd | null; status: number }> => {
console.log('Fetching test data from local API');
record.birthDate = toISOIfNotZ(record.birthDate || "");
record.expiryStarts = toISOIfNotZ(record.expiryStarts || "");
@@ -11,14 +11,14 @@ const fetchGraphQlPeopleAdd = async (record: PeopleAdd): Promise<{ data: PeopleA
try {
const res = await fetch('/api/people/add', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify(record) });
if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }
const data = await res.json();
const data = await res.json(); refetchTable();
return { data: data.data, status: res.status }
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
export function useAddPeopleMutation() {
return useMutation({
mutationFn: ({ data }: { data: PeopleAdd }) => fetchGraphQlPeopleAdd(data),
mutationFn: ({ data, refetchTable }: { data: PeopleAdd, refetchTable: () => void }) => fetchGraphQlPeopleAdd(data, refetchTable),
onSuccess: () => { console.log("People created successfully") },
onError: (error) => { console.error("Create people failed:", error) },
})

61
frontend/pages/people/add/table/columns.tsx
View File

@@ -48,20 +48,63 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
cell: ({ getValue }) => (<div className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">{String(getValue())}</div>),
},
{
accessorKey: "type",
header: "Type",
accessorKey: "firstName",
header: "First Name",
},
{
accessorKey: "token",
header: "Token",
accessorKey: "surname",
header: "Surname",
},
{
accessorKey: "typeToken",
header: "Type Token",
accessorKey: "middleName",
header: "Middle Name",
},
{
accessorKey: "description",
header: "Description",
accessorKey: "sexCode",
header: "Sex",
},
{
accessorKey: "personRef",
header: "Person Ref",
},
{
accessorKey: "personTag",
header: "Person Tag",
},
{
accessorKey: "fatherName",
header: "Father Name",
},
{
accessorKey: "motherName",
header: "Mother Name",
},
{
accessorKey: "countryCode",
header: "Country",
},
{
accessorKey: "nationalIdentityId",
header: "National ID",
},
{
accessorKey: "birthPlace",
header: "Birth Place",
},
{
accessorKey: "active",
header: "Active",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "isConfirmed",
header: "Confirmed",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "birthDate",
header: "Birth Date",
cell: ({ getValue }) => dateToLocaleString(getValue() as string),
},
{
accessorKey: "createdAt",
@@ -89,7 +132,7 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
cell: ({ row }) => {
return (
<div>
<Button className="bg-amber-400 text-black border-amber-400" variant="outline" size="sm" onClick={() => { router.push(`/build-types/update?uuid=${row.original.uuid}`) }}>
<Button className="bg-amber-400 text-black border-amber-400" variant="outline" size="sm" onClick={() => { router.push(`/people/update?uuid=${row.original.uuid}`) }}>
<Pencil />
</Button>
<Button className="bg-red-700 text-white border-red-700 mx-4" variant="outline" size="sm" onClick={() => { deleteHandler(row.original.uuid || "") }}>

15
frontend/pages/people/add/table/data-table.tsx
View File

@@ -71,6 +71,7 @@ import { getColumns, DraggableRow } from "./columns"
import { useRouter } from "next/navigation"
import { Home } from "lucide-react"
import { useDeleteUserMutation } from "@/pages/users/queries"
import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
export function PeopleDataTableAdd({
data,
@@ -80,6 +81,7 @@ export function PeopleDataTableAdd({
onPageChange,
onPageSizeChange,
refetchTable,
tableIsLoading
}: {
data: schemaType[],
totalCount: number,
@@ -87,7 +89,8 @@ export function PeopleDataTableAdd({
pageSize: number,
onPageChange: (page: number) => void,
onPageSizeChange: (size: number) => void,
refetchTable: () => void
refetchTable: () => void,
tableIsLoading: boolean
}) {
const router = useRouter();
@@ -100,7 +103,7 @@ export function PeopleDataTableAdd({
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const deleteMutation = useDeleteUserMutation()
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 400) }
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id, refetchTable }) }
const columns = getColumns(router, deleteHandler);
const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize, }), [currentPage, pageSize])
const totalPages = Math.ceil(totalCount / pageSize)
@@ -201,11 +204,9 @@ export function PeopleDataTableAdd({
))}
</TableHeader>
<TableBody className="**:data-[slot=table-cell]:first:w-8">
{table.getRowModel().rows?.length ? (<SortableContext items={dataIds} strategy={verticalListSortingStrategy} >
{table.getRowModel().rows.map((row) => <DraggableRow key={row.id} row={row} />)}
</SortableContext>) : (
<TableRow><TableCell colSpan={columns.length} className="h-24 text-center">No results.</TableCell></TableRow>
)}
{tableIsLoading ?
<TableSkeleton columnCount={table.getAllColumns().length} rowCount={pageSize} hasActions={true} /> :
<SortableContext items={dataIds} strategy={verticalListSortingStrategy}>{table.getRowModel().rows.map(row => <DraggableRow key={row.id} row={row} />)}</SortableContext>}
</TableBody>
</Table>
</DndContext>

16
frontend/pages/people/list/data-table.tsx
View File

@@ -71,6 +71,7 @@ import { schemaType } from "./schema"
import { getColumns, DraggableRow } from "./columns"
import { useRouter } from "next/navigation"
import { useDeleteUserMutation } from "@/pages/users/queries"
import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
export function PeopleDataTable({
data,
@@ -79,7 +80,8 @@ export function PeopleDataTable({
pageSize = 10,
onPageChange,
onPageSizeChange,
refetchTable
refetchTable,
tableIsLoading
}: {
data: schemaType[],
totalCount: number,
@@ -88,6 +90,7 @@ export function PeopleDataTable({
onPageChange: (page: number) => void,
onPageSizeChange: (size: number) => void,
refetchTable: () => void,
tableIsLoading: boolean
}) {
const router = useRouter();
@@ -100,7 +103,7 @@ export function PeopleDataTable({
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const deleteMutation = useDeleteUserMutation()
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 400) }
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id, refetchTable }); setTimeout(() => { refetchTable() }, 400) }
const columns = getColumns(router, deleteHandler);
const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize }), [currentPage, pageSize])
const totalPages = Math.ceil(totalCount / pageSize)
@@ -157,7 +160,6 @@ export function PeopleDataTable({
<IconChevronDown />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
{table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column) => {
return (
@@ -194,11 +196,9 @@ export function PeopleDataTable({
))}
</TableHeader>
<TableBody className="**:data-[slot=table-cell]:first:w-8">
{table.getRowModel().rows?.length ? (<SortableContext items={dataIds} strategy={verticalListSortingStrategy} >
{table.getRowModel().rows.map((row) => <DraggableRow key={row.id} row={row} />)}
</SortableContext>) : (
<TableRow><TableCell colSpan={columns.length} className="h-24 text-center">No results.</TableCell></TableRow>
)}
{tableIsLoading ?
<TableSkeleton columnCount={table.getAllColumns().length} rowCount={pageSize} hasActions={true} /> :
<SortableContext items={dataIds} strategy={verticalListSortingStrategy}>{table.getRowModel().rows.map(row => <DraggableRow key={row.id} row={row} />)}</SortableContext>}
</TableBody>
</Table>
</DndContext>

5
frontend/pages/people/page.tsx
View File

@@ -9,14 +9,13 @@ const PagePeople = () => {
const [sort, setSort] = useState({ createdAt: 'desc' });
const [filters, setFilters] = useState({});
const { data, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters });
const { data, isFetching, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters });
const handlePageChange = (newPage: number) => { setPage(newPage) };
const handlePageSizeChange = (newSize: number) => { setLimit(newSize); setPage(1) };
if (isLoading) { return <div className="flex items-center justify-center p-8">Loading...</div> }
if (error) { return <div className="flex items-center justify-center p-8 text-red-500">Error loading users</div> }
return <PeopleDataTable data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange} refetchTable={refetch} />;
return <PeopleDataTable data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange} refetchTable={refetch} tableIsLoading={isLoading || isFetching} />;
};
export { PagePeople };

6
frontend/pages/people/queries.tsx
View File

@@ -14,12 +14,12 @@ const fetchGraphQlPeopleList = async (params: ListArguments): Promise<PeopleList
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
const fetchGraphQlDeletePerson = async (uuid: string): Promise<boolean> => {
const fetchGraphQlDeletePerson = async (uuid: string, refetchTable: () => void): Promise<boolean> => {
console.log('Fetching test data from local API');
try {
const res = await fetch(`/api/people/delete?uuid=${uuid}`, { method: 'GET', cache: 'no-store', credentials: "include" });
if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }
const data = await res.json();
const data = await res.json(); refetchTable();
return data
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
@@ -30,7 +30,7 @@ export function useGraphQlPeopleList(params: ListArguments) {
export function useDeletePersonMutation() {
return useMutation({
mutationFn: ({ uuid }: { uuid: string }) => fetchGraphQlDeletePerson(uuid),
mutationFn: ({ uuid, refetchTable }: { uuid: string, refetchTable: () => void }) => fetchGraphQlDeletePerson(uuid, refetchTable),
onSuccess: () => { console.log("Person deleted successfully") },
onError: (error) => { console.error("Delete person failed:", error) },
})

13
frontend/pages/people/update/page.tsx
View File

@@ -7,6 +7,7 @@ import { useSearchParams, useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button';
const PageUpdatePeople = () => {
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
const [sort, setSort] = useState({ createdAt: 'desc' });
@@ -14,20 +15,14 @@ const PageUpdatePeople = () => {
const searchParams = useSearchParams()
const router = useRouter()
const uuid = searchParams?.get('uuid') || null
const backToPeople = <>
<div>UUID not found in search params</div>
<Button onClick={() => router.push('/people')}>Back to People</Button>
</>
const backToPeople = <><div>UUID not found in search params</div><Button onClick={() => router.push('/people')}>Back to People</Button></>
if (!uuid) { return backToPeople }
const { data, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters: { ...filters, uuid } });
const { data, isFetching, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters: { ...filters, uuid } });
const initData = data?.data?.[0] || null;
if (!initData) { return backToPeople }
return (
<>
<PeopleDataTableUpdate
data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit}
onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch}
/>
<PeopleDataTableUpdate data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch} tableIsLoading={isLoading || isFetching} />
<PeopleForm refetchTable={refetch} initData={initData} selectedUuid={uuid} />
</>
)

13
frontend/pages/people/update/table/data-table.tsx
View File

@@ -71,6 +71,7 @@ import { getColumns, DraggableRow } from "./columns"
import { useRouter } from "next/navigation"
import { Home } from "lucide-react"
import { useDeletePersonMutation } from "@/pages/people/queries"
import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
export function PeopleDataTableUpdate({
data,
@@ -80,6 +81,7 @@ export function PeopleDataTableUpdate({
onPageChange,
onPageSizeChange,
refetchTable,
tableIsLoading
}: {
data: schemaType[],
totalCount: number,
@@ -87,7 +89,8 @@ export function PeopleDataTableUpdate({
pageSize: number,
onPageChange: (page: number) => void,
onPageSizeChange: (size: number) => void,
refetchTable: () => void
refetchTable: () => void,
tableIsLoading: boolean
}) {
const router = useRouter();
@@ -194,11 +197,9 @@ export function PeopleDataTableUpdate({
))}
</TableHeader>
<TableBody className="**:data-[slot=table-cell]:first:w-8">
{table.getRowModel().rows?.length ? (<SortableContext items={dataIds} strategy={verticalListSortingStrategy} >
{table.getRowModel().rows.map((row) => <DraggableRow key={row.id} row={row} />)}
</SortableContext>) : (
<TableRow><TableCell colSpan={columns.length} className="h-24 text-center">No results.</TableCell></TableRow>
)}
{tableIsLoading ?
<TableSkeleton columnCount={table.getAllColumns().length} rowCount={pageSize} hasActions={true} /> :
<SortableContext items={dataIds} strategy={verticalListSortingStrategy}>{table.getRowModel().rows.map(row => <DraggableRow key={row.id} row={row} />)}</SortableContext>}
</TableBody>
</Table>
</DndContext>