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

updated living space add list updagte

Browse Source
This commit is contained in:
Berkay
2025-11-29 12:31:05 +03:00
parent eaca36573e
commit d22fc017df
35 changed files with 858 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
frontend/pages/living-space/update/form.tsx Normal file
View File

@@ -0,0 +1,131 @@
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { DateTimePicker } from "@/components/ui/date-time-picker";
import { FormValues } from "./schema";
import { Label } from "@/components/ui/label";
const FormUpdateNewLivingSpace = ({ form, onSubmit }: { form: any, onSubmit: (data: FormValues) => void }) => {
return <>
<Card className="m-7">
<CardContent className="pt-6">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<div className="grid grid-cols-2 gap-4">
{/* <FormField
control={form.control}
name="buildID"
render={({ field }) => (
<FormItem className="mt-3">
<FormLabel>Build ID</FormLabel>
<FormControl>
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
{/* <FormField
control={form.control}
name="collectionToken"
render={({ field }) => (
<FormItem className="mt-3">
<FormLabel>Collection Token</FormLabel>
<FormControl>
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
<FormField
control={form.control}
name="userTypeID"
render={({ field }) => (
<FormItem className="mt-3">
<FormLabel>User Type ID</FormLabel>
<FormControl>
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="partID"
render={({ field }) => (
<FormItem className="mt-3">
<FormLabel>Part ID</FormLabel>
<FormControl>
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="companyID"
render={({ field }) => (
<FormItem className="mt-3">
<FormLabel>Company ID</FormLabel>
<FormControl>
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="personID"
render={({ field }) => (
<FormItem className="mt-3">
<FormLabel>Person ID</FormLabel>
<FormControl>
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* EXPIRY DATES */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-7">
<FormField
control={form.control}
name="expiryStarts"
render={({ field }) => (
<FormItem>
<FormLabel>Expiry Starts</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="expiryEnds"
render={({ field }) => (
<FormItem>
<FormLabel>Expiry Ends</FormLabel>
<FormControl>
<DateTimePicker {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex justify-end gap-4"><Button type="submit">Submit</Button></div>
</form>
</Form>
</CardContent>
</Card>
</>
}
export { FormUpdateNewLivingSpace };

92
frontend/pages/living-space/update/page.tsx Normal file
View File

@@ -0,0 +1,92 @@
'use client';
import { useState, useEffect } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { FormValues, createForm } from "./schema";
import { FormUpdateNewLivingSpace } from "./form";
import { useUpdateLivingSpaceMutation } from "./queries";
import { Button } from "@/components/ui/button";
import { IconArrowLeftToArc } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useGraphQlLivingSpaceList } from "../list/queries";
import { useSearchParams } from "next/navigation";
import PageLivingSpaceBuildsTableSection from "../tables/builds/page";
import PageLivingSpaceUserTypesTableSection from "../tables/userType/page";
import PageLivingSpacePartsTableSection from "../tables/part/page";
import PageLivingSpacePersonTableSection from "../tables/person/page";
import PageLivingSpaceCompanyTableSection from "../tables/company/page";
const PageLivingSpaceUpdate = () => {
const router = useRouter();
const searchParams = useSearchParams()
const uuid = searchParams?.get('uuid') || null
const buildIDFromUrl = searchParams?.get('buildID') || null
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
const [sort, setSort] = useState({ createdAt: 'desc' });
const [filters, setFilters] = useState({});
const backToBuildAddress = <><div>UUID not found in search params</div><Button onClick={() => router.push('/living-spaces')}>Back to Living Space List</Button></>
const { data, isLoading, refetch } = useGraphQlLivingSpaceList(buildIDFromUrl || '', { limit, skip: (page - 1) * limit, sort, filters: { ...filters, uuid } });
const initData = data?.data?.[0] || null;
const [userTypeID, setUserTypeID] = useState<string | null>(null);
const isPartInit = initData?.part !== null ? true : false;
const [isProperty, setIsProperty] = useState<boolean | null>(isPartInit);
const [partID, setPartID] = useState<string | null>(null);
const [companyID, setCompanyID] = useState<string | null>(null);
const [personID, setPersonID] = useState<string | null>(null);
const form = createForm({ userTypeID: initData?.userType || "", partID: initData?.part || "", companyID: initData?.company || "", personID: initData?.person || "" });
useEffect(() => {
if (initData) {
form.setValue("userTypeID", initData?.userType || ""); form.setValue("partID", initData?.part || ""); form.setValue("companyID", initData?.company || "");
form.setValue("personID", initData?.person || ""); form.setValue("expiryStarts", initData?.expiryStarts || ""); form.setValue("expiryEnds", initData?.expiryEnds || "");
setUserTypeID(initData?.userType || ""); setPartID(initData?.part || ""); setCompanyID(initData?.company || ""); setPersonID(initData?.person || "");
}
}, [initData])
useEffect(() => {
form.setValue("userTypeID", userTypeID || ""); form.setValue("partID", partID || ""); form.setValue("companyID", companyID || ""); form.setValue("personID", personID || "");
}, [userTypeID, partID, companyID, personID, form]);
const mutation = useUpdateLivingSpaceMutation();
function onSubmit(values: FormValues) { mutation.mutate({ data: values, uuid: uuid || "", buildID: buildIDFromUrl || "" }) }
const [isUserTypeEnabled, setIsUserTypeEnabled] = useState(true);
const [isPartsEnabled, setIsPartsEnabled] = useState(false);
const [isHandleCompanyAndPersonEnable, setIsHandleCompanyAndPersonEnable] = useState(true);
useEffect(() => { if (!!isProperty) { setIsPartsEnabled(true) } else { setPartID(null); setIsPartsEnabled(false) } }, [isProperty])
useEffect(() => { if (isPartInit) { setIsPartsEnabled(true) } else { setIsPartsEnabled(false) } }, [isPartInit])
if (!uuid) { return backToBuildAddress }; if (!initData) { return backToBuildAddress }
const tabsClassName = "border border-gray-300 rounded-sm h-10"
return <>
<div className="flex flex-col m-7">
<Tabs defaultValue="usertype" className="w-full">
<Button className="my-3 h-10" variant="outline" size="sm" onClick={() => { router.push("/living-spaces") }}>
<IconArrowLeftToArc /><span className="hidden lg:inline">Back to Living Space List</span>
</Button>
<TabsList className="grid w-full grid-flow-col auto-cols-fr gap-1.5">
{isUserTypeEnabled && <TabsTrigger className={tabsClassName} value="usertype">User Type</TabsTrigger>}
{isPartsEnabled && <TabsTrigger className={tabsClassName} value="parts">Parts</TabsTrigger>}
{isHandleCompanyAndPersonEnable && <TabsTrigger className={tabsClassName} value="company">Company</TabsTrigger>}
{isHandleCompanyAndPersonEnable && <TabsTrigger className={tabsClassName} value="person">Person</TabsTrigger>}
</TabsList>
<div className="mt-6">
{isUserTypeEnabled && <TabsContent value="usertype">
<PageLivingSpaceUserTypesTableSection userTypeID={userTypeID} setUserTypeID={setUserTypeID} setIsProperty={setIsProperty} setIsPartsEnabled={setIsPartsEnabled} setIsHandleCompanyAndPersonEnable={setIsHandleCompanyAndPersonEnable} />
</TabsContent>}
{isPartsEnabled && buildIDFromUrl && <TabsContent value="parts">
<PageLivingSpacePartsTableSection buildId={buildIDFromUrl} partID={partID} setPartID={setPartID} setIsPartsEnabled={setIsPartsEnabled} />
</TabsContent>}
{isHandleCompanyAndPersonEnable && <TabsContent value="company"><PageLivingSpaceCompanyTableSection companyID={companyID} setCompanyID={setCompanyID} /></TabsContent>}
{isHandleCompanyAndPersonEnable && <TabsContent value="person"><PageLivingSpacePersonTableSection personID={personID} setPersonID={setPersonID} /></TabsContent>}
</div>
</Tabs>
</div>
<div><FormUpdateNewLivingSpace form={form} onSubmit={onSubmit} /></div>
</>
}
export { PageLivingSpaceUpdate };

36
frontend/pages/living-space/update/queries.tsx Normal file
View File

@@ -0,0 +1,36 @@
'use client'
import { z } from 'zod'
import { useMutation } from '@tanstack/react-query'
import { toISOIfNotZ } from '@/lib/utils'
export const formSchema = z.object({
userTypeID: z.string({ error: "User Type ID is required" }),
partID: z.string({ error: "Part ID is required" }),
companyID: z.string({ error: "Company ID is required" }),
personID: z.string({ error: "Person ID is required" }),
expiryStarts: z.string().optional(),
expiryEnds: z.string().optional(),
});
export type schemaType = z.infer<typeof formSchema>;
const fetchGraphQlLivingSpaceUpdate = async (record: schemaType, uuid: string, buildID: string): Promise<{ data: schemaType | 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;
try {
const res = await fetch(`/api/living-space/update?uuid=${uuid || ''}&buildID=${buildID || ''}`, { 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();
return { data: data.data, status: res.status }
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
export function useUpdateLivingSpaceMutation() {
return useMutation({
mutationFn: ({ data, uuid, buildID }: { data: schemaType, uuid: string, buildID: string }) => fetchGraphQlLivingSpaceUpdate(data, uuid, buildID),
onSuccess: () => { console.log("Living Space updated successfully") },
onError: (error) => { console.error("Update Living Space update failed:", error) },
})
}

29
frontend/pages/living-space/update/schema.ts Normal file
View File

@@ -0,0 +1,29 @@
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { FormProps } from "./types";
export const formSchema = z.object({
userTypeID: z.string({ error: "User Type ID is required" }),
partID: z.string({ error: "Part ID is required" }),
companyID: z.string({ error: "Company ID is required" }),
personID: z.string({ error: "Person ID is required" }),
expiryStarts: z.string().optional(),
expiryEnds: z.string().optional(),
});
export type FormValues = z.infer<typeof formSchema>;
export function createForm({ userTypeID, partID, companyID, personID }: FormProps) {
return useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
userTypeID: userTypeID || "",
partID: partID || "",
companyID: companyID || "",
personID: personID || "",
expiryStarts: "",
expiryEnds: ""
}
});
}

9
frontend/pages/living-space/update/types.ts Normal file
View File

@@ -0,0 +1,9 @@
interface FormProps {
userTypeID: string | null;
partID: string | null;
companyID: string | null;
personID: string | null;
}
export type { FormProps };