create page updated

src/components/ContextComponents/Building/Build/Build.tsx

@@ -14,6 +14,7 @@ import {
   retrieveHeadersEndpoint,
   retrieveHeadersAndValidationByEndpoint,
 } from "@/(apicalls)/validations/validations";
+import PageCreate from "../../Commons/PageCreate";
 
 const Build: React.FC = () => {
   const [renderTable, setRenderTable] = React.useState(false);
@@ -47,8 +48,9 @@ const Build: React.FC = () => {
       isRender: setRenderTable,
     },
     update: {
-      endpoint: "/building/build/create",
+      endpoint: "/building/build/update",
-      variableReact: setCreateValidation,
+      isRender: setRenderUpdate,
+      variableReact: setUpdateValidation,
       variableKey: "validation",
       component: renderUpdate ? (
         <UpdateButton
@@ -57,7 +59,7 @@ const Build: React.FC = () => {
           isFormEnabled={isFormEnabled}
           pageToSet={
             <BuildUpdatePage
-              validation={createValidation}
+              validation={updateValidation}
               tableSelectedRow={tableSelectedRow}
               setTableSelectedRow={setTableSelectedRow}
               formPageFunction={setFormPage}
@@ -68,27 +70,32 @@ const Build: React.FC = () => {
           isFormEnabledFunction={setIsFormEnabled}
         />
       ) : (
-        <IsNotAllowedButton label="Bina Oluştur" />
+        <IsNotAllowedButton label="Bina Güncelle" />
       ),
-      isRender: setRenderCreate,
     },
     create: {
-      endpoint: "/building/build/update/{build_uu_id}",
+      endpoint: "/building/build/create",
-      variableReact: setUpdateValidation,
+      isRender: setRenderCreate,
-      variableKey: "headers",
+      variableReact: setCreateValidation,
+      variableKey: "validation",
       component: renderCreate ? (
         <CreateButton
-          validation={updateValidation}
-          title="Bina Oluştur Sayfasına Hoş geldiniz"
           buttonLabel="Yeni Bina ekle"
+          pageToSet={
+            <PageCreate
+              validation={createValidation}
+              formPageFunction={setFormPage}
+              isFormEnabledFunction={setIsFormEnabled}
+              onClickAction={() => console.log("Create button clicked")}
+            />
+          }
           isFormEnabled={isFormEnabled}
           formPageFunction={setFormPage}
           isFormEnabledFunction={setIsFormEnabled}
         />
       ) : (
-        <IsNotAllowedButton label="Binayı Güncelle" />
+        <IsNotAllowedButton label="Binayı Oluştur" />
       ),
-      isRender: setRenderUpdate,
     },
     delete: {
       endpoint: "/building/build/delete",
@@ -115,26 +122,23 @@ const Build: React.FC = () => {
                     setTableHeaders(validator?.headers);
                   }
                 })
-                .catch((error) => {});
+                .catch(() => {});
             } else if (endpointNeed.variableKey === "validation") {
               retrieveHeadersAndValidationByEndpoint({
                 endpoint: endpointNeed.endpoint,
               })
                 .then((validator) => {
-                  console.log("validator", validator);
                   if (JSON.stringify(validator?.validated) !== "{}") {
                     endpointNeed.variableReact(validator);
                   }
                 })
-                .catch((error) => {});
+                .catch(() => {});
             }
             endpointNeed.isRender(true);
           }
         }
       })
-      .catch((error) => {
+      .catch(() => {});
-        console.log("error", error);
-      });
   }, []);
 
   return (

src/components/ContextComponents/Commons/ButtonCreate.tsx

@@ -1,34 +1,24 @@
 "use client";
 import React from "react";
 import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
-import PageCreate from "@/components/ContextComponents/Commons/PageCreate";
 
 interface CreateButtonProps {
-  title: string;
+
-  validation: any;
   buttonLabel: string;
+  pageToSet: any;
   isFormEnabled: boolean;
   formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
   isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const CreateButton: React.FC<CreateButtonProps> = ({
-  title,
+
-  validation,
+  pageToSet,
   buttonLabel,
   isFormEnabled,
   formPageFunction,
   isFormEnabledFunction,
 }) => {
-  const pageCreate = (
-    <PageCreate
-      validation={validation}
-      title={title}
-      formPageFunction={formPageFunction}
-      isFormEnabledFunction={isFormEnabledFunction}
-      onClickAction={() => console.log("Create button clicked")}
-    />
-  );
 
   function openFormPage({
     isFormEnabled,
@@ -40,7 +30,7 @@ const CreateButton: React.FC<CreateButtonProps> = ({
     setIsFormEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   }) {
     if (!isFormEnabled) {
-      setFormPage(pageCreate);
+      setFormPage(pageToSet);
       setIsFormEnabled(true);
     }
   }

src/components/ContextComponents/Commons/PageCreate.tsx

@@ -1,9 +1,20 @@
 import React from "react";
 import IsNotAllowed from "./PageisNotAllowed";
 import EventButton from "./ButtonEvent";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
 
 interface CreatePageButtonProps {
-  title: string;
   validation: any;
   formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
   isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
@@ -11,20 +22,63 @@ interface CreatePageButtonProps {
 }
 
 const PageCreate: React.FC<CreatePageButtonProps> = ({
-  title,
   validation,
   formPageFunction,
   isFormEnabledFunction,
   onClickAction,
 }) => {
+  const [zodValidation, setZodValidation] = React.useState(z.object({}));
+  const validationObj: any = validation?.validated;
+  const validationHeaders = validation?.headers;
+
+  React.useEffect(() => {
+    console.log("validation", validation);
+    console.log("validationObj", validationObj);
+    console.log("validationHeaders", validationHeaders);
+
+    if (Object.keys(validationObj || {}).length === 0) {
+      let zodValidationInternal: any = {};
+
+      Object.keys(validationObj).map((key: string) => {
+        zodValidationInternal[key] = null;
+
+        const keyValidation = validationObj[key] || {
+          fieldType: { type: "string" },
+          required: false,
+        };
+        const fieldType: String = keyValidation.fieldType?.type || "string";
+        const required = keyValidation.required || false;
+        if (fieldType === "string") {
+          zodValidationInternal[key] = required
+            ? z.string()
+            : z.string().optional();
+        } else if (fieldType === "integer") {
+          zodValidationInternal[key] = required
+            ? z.number()
+            : z.number().optional();
+        }
+      });
+      setZodValidation(zodValidationInternal);
+    }
+  }, [validation]);
+
+  const form = useForm<z.infer<typeof zodValidation>>({
+    resolver: zodResolver(zodValidation),
+  });
+
   function closeFormPage() {
     formPageFunction(<IsNotAllowed />);
     isFormEnabledFunction(false);
   }
+  function onSubmit() {
+    console.log("onSubmit");
+  }
 
   return (
     <>
-      <h1 className="text-center text-3xl">{title}</h1>
+      <h1 className="text-center text-3xl">
+        Bina Oluştur Sayfasına Hoş geldiniz
+      </h1>
       <div className=" md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
         <EventButton
           onClick={() => closeFormPage()}
@@ -73,6 +127,118 @@ const PageCreate: React.FC<CreatePageButtonProps> = ({
           />
         </div>
       </div>
+      {
+        <Form {...form}>
+          <form
+            // onSubmit={onSubmit}
+            className="space-y-5 max-w-3xl mx-auto py-10"
+          >
+            {Object.entries(validationObj).map(
+              ([key, value]: [string, any]) => {
+                console.log("key", key);
+                const keyValidation = validationObj[key] || {
+                  fieldType: { type: "string" },
+                  required: false,
+                };
+                const fieldType = keyValidation.fieldType?.type || "string";
+                if (fieldType === "string" && validationHeaders[key]) {
+                  return (
+                    <>
+                      <div className="mb-4">
+                        <label className="mb-2.5 block font-medium text-black dark:text-white">
+                          {validationHeaders[key] || "Unknown"}
+                        </label>
+                        <div className="relative">
+                          <FormField
+                            control={form.control}
+                            name={key}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <input
+                                    type="text"
+                                    className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary"
+                                    {...field}
+                                    value={field.value}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          <span className="absolute right-4 top-4">
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="24"
+                              height="24"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              className="lucide lucide-pencil"
+                            >
+                              <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+                              <path d="m15 5 4 4" />
+                            </svg>
+                          </span>
+                        </div>
+                      </div>
+                    </>
+                  );
+                } else if (fieldType === "integer" && validationHeaders[key]) {
+                  return (
+                    <>
+                      <div className="mb-4">
+                        <label className="mb-2.5 block font-medium text-black dark:text-white">
+                          {validationHeaders[key] || "Unknown"}
+                        </label>
+                        <div className="relative">
+                          <FormField
+                            control={form.control}
+                            name={key}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <input
+                                    type="text"
+                                    className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary"
+                                    {...field}
+                                    value={field.value}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          <span className="absolute right-4 top-4">
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="24"
+                              height="24"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              className="lucide lucide-pencil"
+                            >
+                              <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+                              <path d="m15 5 4 4" />
+                            </svg>
+                          </span>
+                        </div>
+                      </div>
+                    </>
+                  );
+                }
+              }
+            )}
+          </form>
+        </Form>
+      }
     </>
   );
 };

src/components/ContextComponents/Commons/PageUpdate.tsx

@@ -44,7 +44,7 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
       setValidatedData(tableSelectedRow);
       let zodValidationInternal: any = {};
 
-      Object.entries(tableSelectedRow).map(([key, value]: [string, any]) => {
+      Object.keys(tableSelectedRow).map((key: string) => {
         zodValidationInternal[key] = null;
 
         const keyValidation = validationObj[key] || {
@@ -54,7 +54,6 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
         const fieldType: String = keyValidation.fieldType?.type || "string";
         const required = keyValidation.required || false;
         if (fieldType === "string") {
-          console.log("key", key, "value", value);
           zodValidationInternal[key] = required
             ? z.string()
             : z.string().optional();
@@ -147,7 +146,6 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
                     required: false,
                   };
                   const fieldType = keyValidation.fieldType?.type || "string";
-                  const required = keyValidation.required || false;
                   if (fieldType === "string" && validationHeaders[key]) {
                     return (
                       <>