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

633
frontend/pages/builds/add/form.tsx
View File

@@ -9,6 +9,8 @@ import { DateTimePicker } from "@/components/ui/date-time-picker"
import { BuildAdd, buildAddSchema } from "./schema"
import { useAddBuildMutation } from "./queries"
import { Checkbox } from "@/components/ui/checkbox"
import { PageBuildSelectionBuildTypes } from "../selections/build-types/page"
import { useState, useEffect } from "react"
const BuildsForm = ({ refetchTable }: { refetchTable: () => void }) => {
@@ -16,7 +18,6 @@ const BuildsForm = ({ refetchTable }: { refetchTable: () => void }) => {
resolver: zodResolver(buildAddSchema),
defaultValues: {
buildType: "",
collectionToken: "",
info: {
govAddressCode: "",
buildName: "",
@@ -37,354 +38,316 @@ const BuildsForm = ({ refetchTable }: { refetchTable: () => void }) => {
}
},
});
const [buildTypesID, setBuildTypesID] = useState('');
useEffect(() => { form.setValue("buildType", buildTypesID) }, [buildTypesID]);
const { handleSubmit } = form;
const mutation = useAddBuildMutation();
function onSubmit(values: BuildAdd) { mutation.mutate({ data: values }); setTimeout(() => refetchTable(), 400) };
return (
<Form {...form}>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4" >
<div>
<PageBuildSelectionBuildTypes buildTypesID={buildTypesID} setBuildTypesID={setBuildTypesID} />
<Form {...form}>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4" >
{/* ROW 1 */}
{/* ROW 1 */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="buildType"
render={({ field }) => (
<FormItem>
<FormLabel>Token</FormLabel>
<FormControl>
<Input placeholder="Token" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<FormField
control={form.control}
name="info.govAddressCode"
render={({ field }) => (
<FormItem>
<FormLabel>Gov Address Code</FormLabel>
<FormControl>
<Input placeholder="Gov Address Code" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.buildName"
render={({ field }) => (
<FormItem>
<FormLabel>Build Name</FormLabel>
<FormControl>
<Input placeholder="Build Name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.buildNo"
render={({ field }) => (
<FormItem>
<FormLabel>Build No</FormLabel>
<FormControl>
<Input placeholder="Build No" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="collectionToken"
render={({ field }) => (
<FormItem>
<FormLabel>Collection Token</FormLabel>
<FormControl>
<Input placeholder="Collection Token" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.maxFloor"
render={({ field }) => (
<FormItem>
<FormLabel>Max Floor</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Max Floor"
{...field}
onBlur={(e) => { field.onBlur(); const numValue = parseFloat(e.target.value); if (!isNaN(numValue)) { field.onChange(numValue) } }}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.undergroundFloor"
render={({ field }) => (
<FormItem>
<FormLabel>Underground Floor</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Underground Floor"
{...field}
onBlur={(e) => { field.onBlur(); const numValue = parseFloat(e.target.value); if (!isNaN(numValue)) { field.onChange(numValue) } }}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.govAddressCode"
render={({ field }) => (
<FormItem>
<FormLabel>Gov Address Code</FormLabel>
<FormControl>
<Input placeholder="Gov Address Code" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.buildName"
render={({ field }) => (
<FormItem>
<FormLabel>Build Name</FormLabel>
<FormControl>
<Input placeholder="Build Name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.buildNo"
render={({ field }) => (
<FormItem>
<FormLabel>Build No</FormLabel>
<FormControl>
<Input placeholder="Build No" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.taxNo"
render={({ field }) => (
<FormItem>
<FormLabel>Tax No</FormLabel>
<FormControl>
<Input placeholder="Tax No" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.liftCount"
render={({ field }) => (
<FormItem>
<FormLabel>Lift Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Lift Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex flex-row justify-evenly">
<FormField
control={form.control}
name="info.heatingSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Heating System
</FormLabel>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.coolingSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Cooling System
</FormLabel>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.hotWaterSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Hot Water System
</FormLabel>
</div>
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.maxFloor"
render={({ field }) => (
<FormItem>
<FormLabel>Max Floor</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Max Floor"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.undergroundFloor"
render={({ field }) => (
<FormItem>
<FormLabel>Underground Floor</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Underground Floor"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<Separator />
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.buildDate"
render={({ field }) => (
<FormItem>
<FormLabel>Build Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.decisionPeriodDate"
render={({ field }) => (
<FormItem>
<FormLabel>Decision Period Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.taxNo"
render={({ field }) => (
<FormItem>
<FormLabel>Tax No</FormLabel>
<FormControl>
<Input placeholder="Tax No" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.liftCount"
render={({ field }) => (
<FormItem>
<FormLabel>Lift Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Lift Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<FormField
control={form.control}
name="info.blockServiceManCount"
render={({ field }) => (
<FormItem>
<FormLabel>Block Service Man Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Block Service Man Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.securityServiceManCount"
render={({ field }) => (
<FormItem>
<FormLabel>Security Service Man Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Security Service Man Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.garageCount"
render={({ field }) => (
<FormItem>
<FormLabel>Total Garage Count In Numbers</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Total Garage Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.managementRoomId"
render={({ field }) => (
<FormItem>
<FormLabel>Management Room ID Assign</FormLabel>
<FormControl>
<Input placeholder="Management Room ID" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{buildTypesID && <Button type="submit" className="w-full">Add Build </Button>}
</form>
</Form>
</div>
<div className="flex flex-row justify-evenly">
<FormField
control={form.control}
name="info.heatingSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Heating System
</FormLabel>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.coolingSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Cooling System
</FormLabel>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.hotWaterSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Hot Water System
</FormLabel>
</div>
</FormItem>
)}
/>
</div>
<Separator />
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.buildDate"
render={({ field }) => (
<FormItem>
<FormLabel>Build Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.decisionPeriodDate"
render={({ field }) => (
<FormItem>
<FormLabel>Decision Period Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<FormField
control={form.control}
name="info.blockServiceManCount"
render={({ field }) => (
<FormItem>
<FormLabel>Block Service Man Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Block Service Man Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.securityServiceManCount"
render={({ field }) => (
<FormItem>
<FormLabel>Security Service Man Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Security Service Man Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.garageCount"
render={({ field }) => (
<FormItem>
<FormLabel>Total Garage Count In Numbers</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Total Garage Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.managementRoomId"
render={({ field }) => (
<FormItem>
<FormLabel>Management Room ID Assign</FormLabel>
<FormControl>
<Input placeholder="Management Room ID" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<Button type="submit" className="w-full">Add Build </Button>
</form>
</Form>
);
};

8
frontend/pages/builds/add/page.tsx
View File

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

1
frontend/pages/builds/add/queries.tsx
View File

@@ -7,7 +7,6 @@ const fetchGraphQlBuildAdd = async (record: BuildAdd): Promise<{ data: BuildAdd
console.log('Fetching test data from local API');
record.info.buildDate = toISOIfNotZ(record.info.buildDate);
record.info.decisionPeriodDate = toISOIfNotZ(record.info.decisionPeriodDate);
console.dir({ record })
try {
const res = await fetch('/api/builds/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}`) }

1
frontend/pages/builds/add/schema.ts
View File

@@ -3,7 +3,6 @@ import { z } from "zod"
export const buildAddSchema = z.object({
buildType: z.string(),
collectionToken: z.string(),
info: z.object({
govAddressCode: z.string(),
buildName: z.string(),

11
frontend/pages/builds/add/table/columns.tsx
View File

@@ -48,11 +48,6 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
header: "Token",
cell: ({ getValue }) => getValue(),
},
{
accessorKey: "collectionToken",
header: "Collection Token",
cell: ({ getValue }) => getValue(),
},
{
accessorKey: "info.govAddressCode",
header: "Gov Address Code",
@@ -101,17 +96,17 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
{
accessorKey: "info.heatingSystem",
header: "Heating System",
cell: ({ getValue }) => getValue(),
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "info.coolingSystem",
header: "Cooling System",
cell: ({ getValue }) => getValue(),
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "info.hotWaterSystem",
header: "Hot Water System",
cell: ({ getValue }) => getValue(),
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "info.blockServiceManCount",

27
frontend/pages/builds/add/table/data-table.tsx
View File

@@ -46,6 +46,7 @@ import { getColumns, DraggableRow } from "./columns"
import { useRouter } from "next/navigation"
import { Home } from "lucide-react"
import { useDeleteBuildMutation } from "@/pages/builds/queries"
import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
export function BuildDataTableAdd({
data,
@@ -55,6 +56,7 @@ export function BuildDataTableAdd({
onPageChange,
onPageSizeChange,
refetchTable,
tableIsLoading,
}: {
data: schemaType[],
totalCount: number,
@@ -62,7 +64,8 @@ export function BuildDataTableAdd({
pageSize: number,
onPageChange: (page: number) => void,
onPageSizeChange: (size: number) => void,
refetchTable: () => void
refetchTable: () => void,
tableIsLoading: boolean
}) {
const router = useRouter();
@@ -75,7 +78,7 @@ export function BuildDataTableAdd({
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const deleteMutation = useDeleteBuildMutation()
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)
@@ -148,9 +151,7 @@ export function BuildDataTableAdd({
</Button>
</div>
</div>
<TabsContent value="outline"
className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
>
<TabsContent value="outline" className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6">
<div className="overflow-hidden rounded-lg border">
<DndContext collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis]} sensors={sensors} id={sortableId} >
<Table>
@@ -168,11 +169,9 @@ export function BuildDataTableAdd({
))}
</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>
@@ -194,12 +193,8 @@ export function BuildDataTableAdd({
</SelectContent>
</Select>
</div>
<div className="flex w-fit items-center justify-center text-sm font-medium">
Page {currentPage} of {totalPages}
</div>
<div className="flex w-fit items-center justify-center text-sm font-medium">
Total Count: {totalCount}
</div>
<div className="flex w-fit items-center justify-center text-sm font-medium">Page {currentPage} of {totalPages}</div>
<div className="flex w-fit items-center justify-center text-sm font-medium">Total Count: {totalCount}</div>
<div className="ml-auto flex items-center gap-2 lg:ml-0">
<Button
variant="outline"

24
frontend/pages/builds/add/types.ts
View File

@@ -1,24 +0,0 @@
interface PeopleAdd {
firstName: string;
surname: string;
middleName?: string;
sexCode: string;
personRef?: string;
personTag?: string;
fatherName?: string;
motherName?: string;
countryCode: string;
nationalIdentityId: string;
birthPlace: string;
birthDate: string;
taxNo?: string;
birthname?: string;
expiryStarts?: string;
expiryEnds?: string;
}
export type { PeopleAdd };

7
frontend/pages/builds/list/columns.tsx
View File

@@ -38,11 +38,6 @@ function getColumns(router: any, activeRoute: string, deleteHandler: (id: string
header: "Token",
cell: ({ getValue }) => getValue(),
},
{
accessorKey: "collectionToken",
header: "Collection Token",
cell: ({ getValue }) => getValue(),
},
{
accessorKey: "info.govAddressCode",
header: "Gov Address Code",
@@ -86,7 +81,7 @@ function getColumns(router: any, activeRoute: string, deleteHandler: (id: string
{
accessorKey: "info.liftCount",
header: "Lift Count",
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
cell: ({ getValue }) => getValue(),
},
{
accessorKey: "info.heatingSystem",

17
frontend/pages/builds/list/data-table.tsx
View File

@@ -74,6 +74,7 @@ import { schemaType } from "./schema"
import { getColumns, DraggableRow } from "./columns"
import { useRouter } from "next/navigation"
import { useDeleteBuildMutation } from "@/pages/builds/queries"
import { TableSkeleton } from "@/components/skeletons/tableSkeleton";
export function BuildDataTable({
data,
@@ -82,7 +83,8 @@ export function BuildDataTable({
pageSize = 10,
onPageChange,
onPageSizeChange,
refetchTable
refetchTable,
tableIsLoading
}: {
data: schemaType[],
totalCount: number,
@@ -90,7 +92,8 @@ export function BuildDataTable({
pageSize?: number,
onPageChange: (page: number) => void,
onPageSizeChange: (size: number) => void,
refetchTable: () => void
refetchTable: () => void,
tableIsLoading: boolean
}) {
const router = useRouter();
@@ -122,7 +125,7 @@ export function BuildDataTable({
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const deleteMutation = useDeleteBuildMutation()
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 400) }
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id, refetchTable }) }
const columns = getColumns(router, activeRoute, deleteHandler);
const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize }), [currentPage, pageSize])
const totalPages = Math.ceil(totalCount / pageSize)
@@ -229,11 +232,9 @@ export function BuildDataTable({
))}
</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/builds/page.tsx
View File

@@ -9,14 +9,13 @@ const PageBuilds = () => {
const [sort, setSort] = useState({ createdAt: 'desc' });
const [filters, setFilters] = useState({});
const { data, isLoading, error, refetch } = useGraphQlBuildsList({ limit, skip: (page - 1) * limit, sort, filters });
const { data, isFetching, isLoading, error, refetch } = useGraphQlBuildsList({ 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 <BuildDataTable data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange} refetchTable={refetch} />;
return <BuildDataTable data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange} refetchTable={refetch} tableIsLoading={isFetching || isLoading} />;
};

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

@@ -13,12 +13,12 @@ const fetchGraphQlBuildsList = async (params: ListArguments): Promise<any> => {
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
const fetchGraphQlDeleteBuild = async (uuid: string): Promise<boolean> => {
const fetchGraphQlDeleteBuild = async (uuid: string, refetchTable: () => void): Promise<boolean> => {
console.log('Fetching test data from local API');
try {
const res = await fetch(`/api/builds/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 }
};
@@ -29,7 +29,7 @@ export function useGraphQlBuildsList(params: ListArguments) {
export function useDeleteBuildMutation() {
return useMutation({
mutationFn: ({ uuid }: { uuid: string }) => fetchGraphQlDeleteBuild(uuid),
mutationFn: ({ uuid, refetchTable }: { uuid: string, refetchTable: () => void }) => fetchGraphQlDeleteBuild(uuid, refetchTable),
onSuccess: () => { console.log("Person deleted successfully") },
onError: (error) => { console.error("Delete person failed:", error) },
})

0
frontend/pages/builds/selections/a.txt Normal file
View File

86
frontend/pages/builds/selections/build-types/columns.tsx Normal file
View File

@@ -0,0 +1,86 @@
"use client"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import { useSortable } from "@dnd-kit/sortable"
import { ColumnDef, flexRender, Row } from "@tanstack/react-table"
import { TableCell, TableRow } from "@/components/ui/table"
import { CSS } from "@dnd-kit/utilities"
import { schema, schemaType } from "./schema"
import { dateToLocaleString } from "@/lib/utils"
import { Pencil, Trash } from "lucide-react"
import { IconHandClick } from "@tabler/icons-react"
export function DraggableRow({ row, selectedID }: { row: Row<z.infer<typeof schema>>; selectedID: string }) {
const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.original._id })
return (
<TableRow data-dragging={isDragging} ref={setNodeRef}
className={`${row.original._id === selectedID ? "bg-blue-700/50 hover:bg-blue-700/50" : ""} relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80`}
style={{ transform: CSS.Transform.toString(transform), transition: transition }}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
))}
</TableRow>
)
}
function getColumns(selectionHandler: (id: string) => void): ColumnDef<schemaType>[] {
return [
{
accessorKey: "uuid",
header: "UUID",
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: "token",
header: "Token",
},
{
accessorKey: "typeToken",
header: "Type Token",
},
{
accessorKey: "description",
header: "Description",
},
{
accessorKey: "createdAt",
header: "Created",
cell: ({ getValue }) => dateToLocaleString(getValue() as string),
},
{
accessorKey: "updatedAt",
header: "Updated",
cell: ({ getValue }) => dateToLocaleString(getValue() as string),
},
{
accessorKey: "expiryStarts",
header: "Expiry Starts",
cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
},
{
accessorKey: "expiryEnds",
header: "Expiry Ends",
cell: ({ getValue }) => getValue() ? dateToLocaleString(getValue() as string) : "-",
},
{
id: "actions",
header: "Actions",
cell: ({ row }) => {
return (
<div>
<Button className="bg-blue-600 border-blue-600 text-white" variant="outline" size="sm" onClick={() => { selectionHandler(row.original._id) }}>
<IconHandClick />
</Button>
</div>
);
},
}
]
}
export { getColumns };

269
frontend/pages/builds/selections/build-types/data-table.tsx Normal file
View File

@@ -0,0 +1,269 @@
"use client"
import * as React from "react"
import {
closestCenter,
DndContext,
KeyboardSensor,
MouseSensor,
TouchSensor,
useSensor,
useSensors,
type UniqueIdentifier,
} from "@dnd-kit/core"
import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
import {
SortableContext,
verticalListSortingStrategy,
} from "@dnd-kit/sortable"
import {
IconChevronDown,
IconChevronLeft,
IconChevronRight,
IconChevronsLeft,
IconChevronsRight,
IconLayoutColumns,
IconPlus,
} from "@tabler/icons-react"
import {
ColumnFiltersState,
flexRender,
getCoreRowModel,
getFacetedRowModel,
getFacetedUniqueValues,
getFilteredRowModel,
getSortedRowModel,
SortingState,
useReactTable,
VisibilityState,
} from "@tanstack/react-table"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Label } from "@/components/ui/label"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs"
import { schemaType } from "./schema"
import { getColumns, DraggableRow } from "./columns"
import { useRouter } from "next/navigation"
import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
export function BuildTypesDataTable({
data,
totalCount,
currentPage = 1,
pageSize = 10,
onPageChange,
onPageSizeChange,
refetchTable,
tableIsLoading,
buildTypesID,
setBuildTypesID,
}: {
data: schemaType[],
totalCount: number,
currentPage?: number,
pageSize?: number,
onPageChange: (page: number) => void,
onPageSizeChange: (size: number) => void,
refetchTable: () => void,
tableIsLoading: boolean,
buildTypesID: string,
setBuildTypesID: (id: string) => void,
}) {
const router = useRouter();
const [rowSelection, setRowSelection] = React.useState({})
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
const [sorting, setSorting] = React.useState<SortingState>([])
const sortableId = React.useId()
const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}))
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const selectionHandler = (id: string) => { setBuildTypesID(id); }
const columns = getColumns(selectionHandler);
const pagination = React.useMemo(() => ({ pageIndex: currentPage - 1, pageSize: pageSize }), [currentPage, pageSize])
const totalPages = Math.ceil(totalCount / pageSize)
const table = useReactTable({
data,
columns,
pageCount: totalPages,
state: { sorting, columnVisibility, rowSelection, columnFilters, pagination },
manualPagination: true,
getRowId: (row) => row._id.toString(),
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onColumnVisibilityChange: setColumnVisibility,
onPaginationChange: (updater) => { const nextPagination = typeof updater === "function" ? updater(pagination) : updater; onPageChange(nextPagination.pageIndex + 1); onPageSizeChange(nextPagination.pageSize) },
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
})
const handlePageSizeChange = (value: string) => { const newSize = Number(value); onPageSizeChange(newSize); onPageChange(1) }
return (
<Tabs defaultValue="outline" className="w-full flex-col justify-start gap-6">
<div className="flex items-center justify-between px-4 lg:px-6">
<Label htmlFor="view-selector" className="sr-only">
View
</Label>
<Select defaultValue="outline">
<SelectTrigger className="flex w-fit @4xl/main:hidden" size="sm" id="view-selector">
<SelectValue placeholder="Select a view" />
</SelectTrigger>
<SelectContent>
<SelectItem value="outline">Outline</SelectItem>
<SelectItem value="past-performance">Past Performance</SelectItem>
<SelectItem value="key-personnel">Key Personnel</SelectItem>
<SelectItem value="focus-documents">Focus Documents</SelectItem>
</SelectContent>
</Select>
<div className="flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm">
<IconLayoutColumns />
<span className="hidden lg:inline">Customize Columns</span>
<span className="lg:hidden">Columns</span>
<IconChevronDown />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
{table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column) => {
return (
<DropdownMenuCheckboxItem key={column.id} className="capitalize" checked={column.getIsVisible()} onCheckedChange={(value) => column.toggleVisibility(!!value)} >
{column.id}
</DropdownMenuCheckboxItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<TabsContent value="outline" className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6">
<div className="overflow-hidden rounded-lg border">
<DndContext collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis]} sensors={sensors} id={sortableId} >
<Table>
<TableHeader className="bg-muted sticky top-0 z-10">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
)
})}
</TableRow>
))}
</TableHeader>
<TableBody className="**:data-[slot=table-cell]:first:w-8">
{tableIsLoading ?
<TableSkeleton columnCount={table.getAllColumns().length} rowCount={pageSize} hasActions={true} /> :
<SortableContext items={dataIds} strategy={verticalListSortingStrategy}>{table.getRowModel().rows.map(row => <DraggableRow selectedID={buildTypesID} key={row.id} row={row} />)}</SortableContext>}
</TableBody>
</Table>
</DndContext>
</div>
<div className="flex items-center justify-between px-4">
<div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
{table.getFilteredSelectedRowModel().rows.length} of{" "}
{table.getFilteredRowModel().rows.length} row(s) selected.
</div>
<div className="flex w-full items-center gap-8 lg:w-fit">
<div className="hidden items-center gap-2 lg:flex">
<Label htmlFor="rows-per-page" className="text-sm font-medium">Rows per page</Label>
<Select value={`${pageSize}`} onValueChange={handlePageSizeChange}>
<SelectTrigger size="sm" className="w-20" id="rows-per-page">
<SelectValue placeholder={pageSize} />
</SelectTrigger>
<SelectContent side="top">
{[10, 20, 30].map((size) => <SelectItem key={size} value={`${size}`}>{size}</SelectItem>)}
</SelectContent>
</Select>
</div>
<div className="flex w-fit items-center justify-center text-sm font-medium">
Page {currentPage} of {totalPages}
</div>
<div className="flex w-fit items-center justify-center text-sm font-medium">
Total Count: {totalCount}
</div>
<div className="ml-auto flex items-center gap-2 lg:ml-0">
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(1)}
disabled={currentPage === 1}
>
<IconChevronsLeft />
</Button>
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
>
<IconChevronLeft />
</Button>
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage >= totalPages}
>
<IconChevronRight />
</Button>
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(totalPages)}
disabled={currentPage >= totalPages}
>
<IconChevronsRight />
</Button>
</div>
</div>
</div>
</TabsContent>
<TabsContent value="past-performance" className="flex flex-col px-4 lg:px-6">
<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
</TabsContent>
<TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
</TabsContent>
<TabsContent value="focus-documents" className="flex flex-col px-4 lg:px-6">
<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
</TabsContent>
</Tabs>
)
}

33
frontend/pages/builds/selections/build-types/page.tsx Normal file
View File

@@ -0,0 +1,33 @@
'use client';
import { BuildTypesDataTable } from './data-table';
import { useGraphQlBuildTypesList } from './queries';
import { useState } from 'react';
const PageBuildSelectionBuildTypes = ({
buildTypesID,
setBuildTypesID,
}: {
buildTypesID: string,
setBuildTypesID: (id: string) => void,
}) => {
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
const [sort, setSort] = useState({ createdAt: 'desc' });
const [filters, setFilters] = useState({});
const { data, isFetching, isLoading, error, refetch } = useGraphQlBuildTypesList({ limit, skip: (page - 1) * limit, sort, filters });
const handlePageChange = (newPage: number) => { setPage(newPage) };
const handlePageSizeChange = (newSize: number) => { setLimit(newSize); setPage(1) };
if (error) { return <div className="flex items-center justify-center p-8 text-red-500">Error loading users</div> }
return <BuildTypesDataTable
data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange}
refetchTable={refetch} tableIsLoading={isLoading || isFetching} buildTypesID={buildTypesID} setBuildTypesID={setBuildTypesID}
/>;
};
export { PageBuildSelectionBuildTypes };

36
frontend/pages/builds/selections/build-types/queries.tsx Normal file
View File

@@ -0,0 +1,36 @@
'use client'
import { useQuery, useMutation } from '@tanstack/react-query'
import { ListArguments } from '@/types/listRequest'
const fetchGraphQlBuildTypesList = async (params: ListArguments): Promise<any> => {
console.log('Fetching test data from local API');
const { limit, skip, sort, filters } = params;
try {
const res = await fetch('/api/build-types/list', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify({ limit, skip, sort, filters }) });
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();
return { data: data.data, totalCount: data.totalCount }
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
const fetchGraphQlDeleteBuildType = async (uuid: string, refetchTable: () => void): Promise<boolean> => {
console.log('Fetching test data from local API');
try {
const res = await fetch(`/api/build-types/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(); refetchTable()
return data
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
export function useGraphQlBuildTypesList(params: ListArguments) {
return useQuery({ queryKey: ['graphql-build-types-list', params], queryFn: () => fetchGraphQlBuildTypesList(params) })
}
export function useDeleteBuildTypeMutation() {
return useMutation({
mutationFn: ({ uuid, refetchTable }: { uuid: string, refetchTable: () => void }) => fetchGraphQlDeleteBuildType(uuid, refetchTable),
onSuccess: () => { console.log("Build type deleted successfully") },
onError: (error) => { console.error("Delete build type failed:", error) },
})
}

16
frontend/pages/builds/selections/build-types/schema.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { z } from "zod";
export const schema = z.object({
_id: z.string(),
uuid: z.string(),
type: z.string(),
token: z.string(),
typeToken: z.string(),
description: z.string(),
createdAt: z.string(),
updatedAt: z.string(),
expiryStarts: z.string().nullable().optional(),
expiryEnds: z.string().nullable().optional(),
});
export type schemaType = z.infer<typeof schema>;

1
frontend/pages/builds/types.ts
View File

@@ -1,6 +1,5 @@
interface Build {
buildType: string;
collectionToken: string;
info: BuildInfo;
site?: string;
address?: string;

582
frontend/pages/builds/update/form.tsx
View File

@@ -9,301 +9,319 @@ import { DateTimePicker } from "@/components/ui/date-time-picker"
import { BuildUpdate, buildUpdateSchema } from "@/pages/builds/update/schema"
import { useUpdateBuildMutation } from "./queries"
import { Checkbox } from "@/components/ui/checkbox"
import { PageBuildSelectionBuildTypes } from "../selections/build-types/page"
import { useState, useEffect } from "react"
const BuildupdateForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: BuildUpdate, selectedUuid: string }) => {
const BuildupdateForm = ({ refetchTable, initData, selectedUuid, buildID }: { refetchTable: () => void, initData: BuildUpdate, selectedUuid: string, buildID: string }) => {
const [buildTypesID, setBuildTypesID] = useState<string>(buildID)
const form = useForm<BuildUpdate>({ resolver: zodResolver(buildUpdateSchema), defaultValues: { ...initData } })
const { handleSubmit } = form
const mutation = useUpdateBuildMutation();
function onSubmit(values: BuildUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid }); setTimeout(() => refetchTable(), 400) }
useEffect(() => { form.setValue("buildType", buildID) }, [])
useEffect(() => { form.setValue("buildType", buildTypesID) }, [buildTypesID])
function onSubmit(values: BuildUpdate) { mutation.mutate({ data: values as any, uuid: selectedUuid, refetchTable }) }
return (
<Form {...form}>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4" >
<div>
<PageBuildSelectionBuildTypes buildTypesID={buildTypesID} setBuildTypesID={setBuildTypesID} />
<Form {...form}>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4" >
{/* ROW 1 */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<FormField
control={form.control}
name="info.govAddressCode"
render={({ field }) => (
<FormItem>
<FormLabel>Gov Address Code</FormLabel>
<FormControl>
<Input placeholder="Gov Address Code" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.buildName"
render={({ field }) => (
<FormItem>
<FormLabel>Build Name</FormLabel>
<FormControl>
<Input placeholder="Build Name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.buildNo"
render={({ field }) => (
<FormItem>
<FormLabel>Build No</FormLabel>
<FormControl>
<Input placeholder="Build No" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* ROW 1 */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="buildType.token"
render={({ field }) => (
<FormItem>
<FormLabel>Token</FormLabel>
<FormControl>
<Input placeholder="Token" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.maxFloor"
render={({ field }) => (
<FormItem>
<FormLabel>Max Floor</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Max Floor"
{...field}
onBlur={(e) => { field.onBlur(); const numValue = parseFloat(e.target.value); if (!isNaN(numValue)) { field.onChange(numValue) } }}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.undergroundFloor"
render={({ field }) => (
<FormItem>
<FormLabel>Underground Floor</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Underground Floor"
{...field}
onBlur={(e) => { field.onBlur(); const numValue = parseFloat(e.target.value); if (!isNaN(numValue)) { field.onChange(numValue) } }}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="collectionToken"
render={({ field }) => (
<FormItem>
<FormLabel>Collection Token</FormLabel>
<FormControl>
<Input placeholder="Collection Token" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.taxNo"
render={({ field }) => (
<FormItem>
<FormLabel>Tax No</FormLabel>
<FormControl>
<Input placeholder="Tax No" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.liftCount"
render={({ field }) => (
<FormItem>
<FormLabel>Lift Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Lift Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.govAddressCode"
render={({ field }) => (
<FormItem>
<FormLabel>Gov Address Code</FormLabel>
<FormControl>
<Input placeholder="Gov Address Code" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.buildName"
render={({ field }) => (
<FormItem>
<FormLabel>Build Name</FormLabel>
<FormControl>
<Input placeholder="Build Name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.buildNo"
render={({ field }) => (
<FormItem>
<FormLabel>Build No</FormLabel>
<FormControl>
<Input placeholder="Build No" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex flex-row justify-evenly">
<FormField
control={form.control}
name="info.heatingSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Heating System
</FormLabel>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.coolingSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Cooling System
</FormLabel>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.hotWaterSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
<div className="leading-none">
<FormLabel>
Hot Water System
</FormLabel>
</div>
</FormItem>
)}
/>
</div>
<Separator />
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.buildDate"
render={({ field }) => (
<FormItem>
<FormLabel>Build Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.decisionPeriodDate"
render={({ field }) => (
<FormItem>
<FormLabel>Decision Period Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.maxFloor"
render={({ field }) => (
<FormItem>
<FormLabel>Max Floor</FormLabel>
<FormControl>
<Input placeholder="Max Floor" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.undergroundFloor"
render={({ field }) => (
<FormItem>
<FormLabel>Underground Floor</FormLabel>
<FormControl>
<Input placeholder="Underground Floor" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<FormField
control={form.control}
name="info.blockServiceManCount"
render={({ field }) => (
<FormItem>
<FormLabel>Block Service Man Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Block Service Man Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.securityServiceManCount"
render={({ field }) => (
<FormItem>
<FormLabel>Security Service Man Count</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Security Service Man Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.garageCount"
render={({ field }) => (
<FormItem>
<FormLabel>Total Garage Count In Numbers</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Total Garage Count"
{...field}
onBlur={(e) => {
field.onBlur();
const numValue = parseFloat(e.target.value);
if (!isNaN(numValue)) {
field.onChange(numValue);
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.managementRoomId"
render={({ field }) => (
<FormItem>
<FormLabel>Management Room ID Assign</FormLabel>
<FormControl>
<Input placeholder="Management Room ID" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{buildTypesID && <Button type="submit" className="w-full">Update Build </Button>}
</form>
</Form>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.taxNo"
render={({ field }) => (
<FormItem>
<FormLabel>Tax No</FormLabel>
<FormControl>
<Input placeholder="Tax No" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.liftCount"
render={({ field }) => (
<FormItem>
<FormLabel>Lift Count</FormLabel>
<FormControl>
<Input placeholder="Lift Count" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex flex-row justify-evenly">
<FormField
control={form.control}
name="info.heatingSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<div className="leading-none">
<FormLabel>
Heating System
</FormLabel>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.coolingSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<div className="leading-none">
<FormLabel>
Cooling System
</FormLabel>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.hotWaterSystem"
render={({ field }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<div className="leading-none">
<FormLabel>
Hot Water System
</FormLabel>
</div>
</FormItem>
)}
/>
</div>
<Separator />
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="info.buildDate"
render={({ field }) => (
<FormItem>
<FormLabel>Build Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.decisionPeriodDate"
render={({ field }) => (
<FormItem>
<FormLabel>Decision Period Date</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<FormField
control={form.control}
name="info.blockServiceManCount"
render={({ field }) => (
<FormItem>
<FormLabel>Block Service Man Count</FormLabel>
<FormControl>
<Input placeholder="Block Service Man Count" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.securityServiceManCount"
render={({ field }) => (
<FormItem>
<FormLabel>Security Service Man Count</FormLabel>
<FormControl>
<Input placeholder="Security Service Man Count" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.garageCount"
render={({ field }) => (
<FormItem>
<FormLabel>Total Garage Count In Numbers</FormLabel>
<FormControl>
<Input placeholder="Total Garage Count" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="info.managementRoomId"
render={({ field }) => (
<FormItem>
<FormLabel>Management Room ID Assign</FormLabel>
<FormControl>
<Input placeholder="Management Room ID" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<Button type="submit" className="w-full">Update Build</Button>
</form>
</Form>
);
}

9
frontend/pages/builds/update/page.tsx
View File

@@ -19,16 +19,13 @@ const PageUpdateBuild = () => {
<Button onClick={() => router.push('/builds')}>Back to Build</Button>
</>
if (!uuid) { return backToBuildAddress }
const { data, isLoading, error, refetch } = useGraphQlBuildsList({ limit, skip: (page - 1) * limit, sort, filters: { ...filters, _id: uuid } });
const { data, isFetching, isLoading, error, refetch } = useGraphQlBuildsList({ limit, skip: (page - 1) * limit, sort, filters: { ...filters, _id: uuid } });
const initData = data?.data?.[0] || null;
if (!initData) { return backToBuildAddress }
return (
<>
<BuildDataTableUpdate
data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit}
onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch}
/>
<BuildupdateForm refetchTable={refetch} initData={initData} selectedUuid={uuid} />
<BuildDataTableUpdate data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch} tableIsLoading={isFetching || isLoading} />
<BuildupdateForm refetchTable={refetch} initData={initData} selectedUuid={uuid} buildID={initData.buildType._id} />
</>
)
}

16
frontend/pages/builds/update/queries.tsx
View File

@@ -1,25 +1,23 @@
'use client'
import { useMutation } from '@tanstack/react-query'
import { UpdateBuildIbansUpdate } from './types';
import { toISOIfNotZ } from '@/lib/utils';
import { BuildUpdate } from './schema';
const fetchGraphQlBuildUpdate = async (record: UpdateBuildIbansUpdate, uuid: string): Promise<{ data: UpdateBuildIbansUpdate | null; status: number }> => {
const fetchGraphQlBuildUpdate = async (record: BuildUpdate, uuid: string, refetchTable: () => void): Promise<{ data: any | null; status: number }> => {
console.log('Fetching test data from local API');
record.expiryStarts = record.expiryStarts ? toISOIfNotZ(record.expiryStarts) : undefined;
record.expiryEnds = record.expiryEnds ? toISOIfNotZ(record.expiryEnds) : undefined;
record.startDate = toISOIfNotZ(record.startDate);
record.stopDate = toISOIfNotZ(record.stopDate);
record.info.buildDate = toISOIfNotZ(record.info.buildDate);
record.info.decisionPeriodDate = toISOIfNotZ(record.info.decisionPeriodDate);
try {
const res = await fetch(`/api/build/update?uuid=${uuid || ''}`, { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify(record) });
const res = await fetch(`/api/builds/update?uuid=${uuid || ''}`, { 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 useUpdateBuildMutation() {
return useMutation({
mutationFn: ({ data, uuid }: { data: UpdateBuildIbansUpdate, uuid: string }) => fetchGraphQlBuildUpdate(data, uuid),
mutationFn: ({ data, uuid, refetchTable }: { data: BuildUpdate, uuid: string, refetchTable: () => void }) => fetchGraphQlBuildUpdate(data, uuid, refetchTable),
onSuccess: () => { console.log("Build updated successfully") },
onError: (error) => { console.error("Update Build failed:", error) },
})

9
frontend/pages/builds/update/schema.ts
View File

@@ -1,12 +1,7 @@
import { z } from "zod"
export const buildUpdateSchema = z.object({
buildType: z.object({
token: z.string(),
typeToken: z.string(),
type: z.string(),
}),
collectionToken: z.string(),
buildType: z.string(),
info: z.object({
govAddressCode: z.string(),
buildName: z.string(),
@@ -23,7 +18,7 @@ export const buildUpdateSchema = z.object({
blockServiceManCount: z.number(),
securityServiceManCount: z.number(),
garageCount: z.number(),
managementRoomId: z.number(),
managementRoomId: z.string().optional(),
}),
});

11
frontend/pages/builds/update/table/columns.tsx
View File

@@ -37,11 +37,6 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
header: "Token",
cell: ({ getValue }) => getValue(),
},
{
accessorKey: "collectionToken",
header: "Collection Token",
cell: ({ getValue }) => getValue(),
},
{
accessorKey: "info.govAddressCode",
header: "Gov Address Code",
@@ -90,17 +85,17 @@ function getColumns(router: any, deleteHandler: (id: string) => void): ColumnDef
{
accessorKey: "info.heatingSystem",
header: "Heating System",
cell: ({ getValue }) => getValue(),
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "info.coolingSystem",
header: "Cooling System",
cell: ({ getValue }) => getValue(),
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "info.hotWaterSystem",
header: "Hot Water System",
cell: ({ getValue }) => getValue(),
cell: ({ getValue }) => getValue() ? (<div className="text-green-600 font-medium">Yes</div>) : (<div className="text-red-600 font-medium">No</div>),
},
{
accessorKey: "info.blockServiceManCount",

15
frontend/pages/builds/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 { useDeleteBuildMutation } from "@/pages/builds/queries"
import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
export function BuildDataTableUpdate({
data,
@@ -80,6 +81,7 @@ export function BuildDataTableUpdate({
onPageChange,
onPageSizeChange,
refetchTable,
tableIsLoading
}: {
data: schemaType[],
totalCount: number,
@@ -87,7 +89,8 @@ export function BuildDataTableUpdate({
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 BuildDataTableUpdate({
const dataIds = React.useMemo<UniqueIdentifier[]>(() => data?.map(({ _id }) => _id) || [], [data])
const deleteMutation = useDeleteBuildMutation()
const deleteHandler = (id: string) => { deleteMutation.mutate({ uuid: id }); setTimeout(() => { refetchTable() }, 200) }
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)
@@ -193,11 +196,9 @@ export function BuildDataTableUpdate({
))}
</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>

2
frontend/pages/builds/update/table/schema.tsx
View File

@@ -3,11 +3,11 @@ import { z } from "zod";
export const schema = z.object({
_id: z.string(),
buildType: z.object({
_id: z.string(),
token: z.string(),
typeToken: z.string(),
type: z.string(),
}),
collectionToken: z.string(),
info: z.object({
govAddressCode: z.string(),
buildName: z.string(),

50
frontend/pages/builds/update/types.ts
View File

@@ -1,13 +1,45 @@
interface UpdateBuildIbansUpdate {
iban: string;
startDate: string;
stopDate: string;
bankCode: string;
xcomment: string;
interface Build {
buildType: string;
info: BuildInfo;
site?: string;
address?: string;
areas?: string[];
ibans?: BuildIban[];
responsibles?: BuildResponsible[];
expiryStarts?: string;
expiryEnds?: string;
}
export type { UpdateBuildIbansUpdate };
interface BuildInfo {
govAddressCode: string;
buildName: string;
buildNo: string;
maxFloor: number;
undergroundFloor: number;
buildDate: Date;
decisionPeriodDate: Date;
taxNo: string;
liftCount: number;
heatingSystem: boolean;
coolingSystem: boolean;
hotWaterSystem: boolean;
blockServiceManCount: number;
securityServiceManCount: number;
garageCount: number;
managementRoomId: number;
}
interface BuildIban {
iban: string;
startDate: Date;
stopDate: Date;
bankCode: string;
xcomment: string;
}
interface BuildResponsible {
company: string;
person: string;
}
export type { Build, BuildInfo, BuildIban, BuildResponsible };