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

updated living space

Browse Source
This commit is contained in:
Berkay
2025-11-27 20:22:40 +03:00
parent 3aebb79d36
commit eaca36573e
57 changed files with 2434 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
frontend/pages/living-space/add/form.tsx Normal file
View File

@@ -0,0 +1,137 @@
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { XCircle } from "lucide-react";
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 FormAddNewLivingSpace = ({ form, onSubmit, deleteAllSelections }: { form: any, onSubmit: (data: FormValues) => void, deleteAllSelections: () => 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-3 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">
<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 variant="outline" type="button" className="text-destructive hover:text-destructive" onClick={deleteAllSelections}>
<XCircle className="h-4 w-4 mr-2" />Clear All
</Button>
<Button type="submit">Submit</Button>
</div>
</form>
</Form>
</CardContent>
</Card>
</>
}
export { FormAddNewLivingSpace };

76
frontend/pages/living-space/add/page.tsx Normal file
View File

@@ -0,0 +1,76 @@
'use client';
import { useState, useEffect } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { FormValues, createForm } from "./schema";
import { FormAddNewLivingSpace } from "./form";
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";
import { useAddLivingSpaceMutation } from "./queries";
const PageLivingSpaceAdd = () => {
const [collectionToken, setCollectionToken] = useState<string | null>(null);
const [buildID, setBuildID] = useState<string | null>(null);
const [userTypeID, setUserTypeID] = useState<string | null>(null);
const [partID, setPartID] = useState<string | null>(null);
const [companyID, setCompanyID] = useState<string | null>(null);
const [personID, setPersonID] = useState<string | null>(null);
const form = createForm({ buildID, collectionToken, userTypeID, partID, companyID, personID });
useEffect(() => {
form.setValue("buildID", buildID || "");
form.setValue("collectionToken", collectionToken || "");
form.setValue("userTypeID", userTypeID || "");
form.setValue("partID", partID || "");
form.setValue("companyID", companyID || "");
form.setValue("personID", personID || "");
}, [buildID, collectionToken, userTypeID, partID, companyID, personID, form]);
const mutation = useAddLivingSpaceMutation();
function onSubmit(values: FormValues) { mutation.mutate({ data: values }) }
console.dir({ input: form.getValues() })
const [isUserTypeEnabled, setIsUserTypeEnabled] = useState(false);
const [isPartsEnabled, setIsPartsEnabled] = useState(false);
const [isHandleCompanyAndPersonEnable, setIsHandleCompanyAndPersonEnable] = useState(false);
const tabsClassName = "border border-gray-300 rounded-sm h-10"
const deleteAllSelections = () => {
setBuildID(null); setCollectionToken(null); setUserTypeID(null); setPartID(null); setCompanyID(null); setPersonID(null);
setIsUserTypeEnabled(false); setIsPartsEnabled(false); setIsHandleCompanyAndPersonEnable(false)
}
return <>
<div className="flex flex-col m-7">
<Tabs defaultValue="builds" className="w-full">
<TabsList className="grid w-full grid-flow-col auto-cols-fr gap-1.5">
<TabsTrigger className={tabsClassName} value="builds">Builds</TabsTrigger>
{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">
<TabsContent value="builds">
<PageLivingSpaceBuildsTableSection buildID={buildID} setBuildID={setBuildID} collectionToken={collectionToken} setCollectionToken={setCollectionToken} setIsUserTypeEnabled={setIsUserTypeEnabled} />
</TabsContent>
{isUserTypeEnabled && <TabsContent value="usertype">
<PageLivingSpaceUserTypesTableSection userTypeID={userTypeID} setUserTypeID={setUserTypeID} setIsPartsEnabled={setIsPartsEnabled} setIsHandleCompanyAndPersonEnable={setIsHandleCompanyAndPersonEnable} />
</TabsContent>}
{isPartsEnabled && buildID && <TabsContent value="parts">
<PageLivingSpacePartsTableSection buildId={buildID} 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><FormAddNewLivingSpace form={form} onSubmit={onSubmit} deleteAllSelections={deleteAllSelections} /></div>
</>
}
export { PageLivingSpaceAdd };

58
frontend/pages/living-space/add/queries.tsx Normal file
View File

@@ -0,0 +1,58 @@
'use client'
import { z } from 'zod'
import { useMutation } from '@tanstack/react-query'
import { toISOIfNotZ } from '@/lib/utils'
export const formSchema = z.object({
buildID: z.string({ error: "Build ID is required" }),
collectionToken: z.string({ error: "Collection Token is required" }),
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 fetchGraphQlLivingSpaceAdd = async (record: schemaType): 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;
console.dir({ record })
try {
const res = await fetch('/api/living-spaces/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();
return { data: data.data, status: res.status }
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
const fetchGraphQlLivingSpaceUpdate = async (record: schemaType, uuid: 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-spaces/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();
return { data: data.data, status: res.status }
} catch (error) { console.error('Error fetching test data:', error); throw error }
};
export function useAddLivingSpaceMutation() {
return useMutation({
mutationFn: ({ data }: { data: schemaType }) => fetchGraphQlLivingSpaceAdd(data),
onSuccess: () => { console.log("Living Space added successfully") },
onError: (error) => { console.error("Add Living Space add failed:", error) },
})
}
export function useUpdateLivingSpaceMutation() {
return useMutation({
mutationFn: ({ data, uuid }: { data: schemaType, uuid: string }) => fetchGraphQlLivingSpaceUpdate(data, uuid),
onSuccess: () => { console.log("Living Space updated successfully") },
onError: (error) => { console.error("Update Living Space update failed:", error) },
})
}

33
frontend/pages/living-space/add/schema.ts Normal file
View File

@@ -0,0 +1,33 @@
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({
buildID: z.string({ error: "Build ID is required" }),
collectionToken: z.string({ error: "Collection Token is required" }),
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({ buildID, collectionToken, userTypeID, partID, companyID, personID }: FormProps) {
return useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
buildID: buildID || "",
collectionToken: collectionToken || "",
userTypeID: userTypeID || "",
partID: partID || "",
companyID: companyID || "",
personID: personID || "",
expiryStarts: "",
expiryEnds: ""
}
});
}

11
frontend/pages/living-space/add/types.ts Normal file
View File

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