create page updated

src/(apicalls)/validations/validationProcesser.ts

@@ -43,14 +43,16 @@ class HeadersAndValidations {
           if (row.type !== "null") {
             this.validated[key] = {
               required: false,
-              fieldType: this.parseType(row.type),
+              fieldType: row.type,
+              // fieldType: this.parseType(row.type),
             };
           }
         });
       } else {
         this.validated[key] = {
           required: true,
-          fieldType: this.parseType(value),
+          fieldType: value,
+          // fieldType: this.parseType(value),
         };
       }
     });

src/(apicalls)/validations/validations.tsx

@@ -11,8 +11,6 @@ interface EndpointInterface {
 }
 
 async function retrieveHeadersEndpoint({ endpoint }: EndpointInterface) {
-  console.log("endpoint", endpoint);
-
   const selectResponse: any = await fetchDataWithToken(
     headersAndValidationEndpoint,
     {
@@ -23,10 +21,16 @@ async function retrieveHeadersEndpoint({ endpoint }: EndpointInterface) {
   );
   if (selectResponse.status === 200) {
     return {
+      status: selectResponse.status,
       headers: selectResponse?.headers,
+      message: selectResponse.message,
     };
   }
-  return { headers: {} };
+  return {
+    status: selectResponse.status,
+    headers: {},
+    message: selectResponse.message,
+  };
 }
 
 async function retrieveHeadersAndValidationByEndpoint({
@@ -53,7 +57,13 @@ async function retrieveHeadersAndValidationByEndpoint({
       message: selectResponse.message,
     };
   }
-  return selectResponse;
+  return {
+    status: selectResponse.status,
+    message: selectResponse.message,
+    
+    headers: null,
+    validated: null,
+  };
 }
 
 export { retrieveHeadersAndValidationByEndpoint, retrieveHeadersEndpoint };

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

@@ -10,7 +10,10 @@ import BuildUpdatePage from "@/components/ContextComponents/Building/Build/Build
 
 import { retrieveAvailableEvents } from "@/(apicalls)/cookies/token";
 import { retrieveBuildList } from "@/(apicalls)/building/build";
-import { retrieveHeadersEndpoint } from "@/(apicalls)/validations/validations";
+import {
+  retrieveHeadersEndpoint,
+  retrieveHeadersAndValidationByEndpoint,
+} from "@/(apicalls)/validations/validations";
 
 const Build: React.FC = () => {
   const [renderTable, setRenderTable] = React.useState(false);
@@ -18,13 +21,13 @@ const Build: React.FC = () => {
   const [renderUpdate, setRenderUpdate] = React.useState(false);
   const [renderDelete, setRenderDelete] = React.useState(false);
   const [isFormEnabled, setIsFormEnabled] = React.useState(false);
-  const [rowData, setRowData] = React.useState({});
   const [formPage, setFormPage] = React.useState(<IsNotAllowed />);
   const [createValidation, setCreateValidation] = React.useState({});
   const [updateValidation, setUpdateValidation] = React.useState({});
   const [deleteValidation, setDeleteValidation] = React.useState({});
   const [tableValidation, setTableValidation] = React.useState([]);
   const [tableHeaders, setTableHeaders] = React.useState({});
+  const [tableSelectedRow, setTableSelectedRow] = React.useState({});
 
   const endpointNeeds = {
     table: {
@@ -33,9 +36,10 @@ const Build: React.FC = () => {
       variableReact: setTableHeaders,
       component: renderTable ? (
         <Table
-          headers={tableHeaders || {}}
+          headers={tableHeaders}
+          tableSelectedRow={tableSelectedRow}
+          setTableSelectedRow={setTableSelectedRow}
           createTable={retrieveBuildList}
-          rowClickedFunction={setRowData}
         />
       ) : (
         <IsNotAllowed />
@@ -45,15 +49,17 @@ const Build: React.FC = () => {
     update: {
       endpoint: "/building/build/create",
       variableReact: setCreateValidation,
-      variableKey: "headers",
+      variableKey: "validation",
       component: renderUpdate ? (
         <UpdateButton
           buttonLabel="Bina Güncelle"
+          rowData={tableSelectedRow}
           isFormEnabled={isFormEnabled}
           pageToSet={
             <BuildUpdatePage
-              rowData={rowData}
+              validation={createValidation}
-              setRowData={setRowData}
+              tableSelectedRow={tableSelectedRow}
+              setTableSelectedRow={setTableSelectedRow}
               formPageFunction={setFormPage}
               isFormEnabledFunction={setIsFormEnabled}
             />
@@ -72,6 +78,7 @@ const Build: React.FC = () => {
       variableKey: "headers",
       component: renderCreate ? (
         <CreateButton
+          validation={updateValidation}
           title="Bina Oluştur Sayfasına Hoş geldiniz"
           buttonLabel="Yeni Bina ekle"
           isFormEnabled={isFormEnabled}
@@ -109,6 +116,17 @@ const Build: React.FC = () => {
                   }
                 })
                 .catch((error) => {});
+            } 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) => {});
             }
             endpointNeed.isRender(true);
           }

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

@@ -3,30 +3,27 @@ import PageUpdate from "@/components/ContextComponents/Commons/PageUpdate";
 import IsNotAllowed from "@/components/ContextComponents/Commons/PageisNotAllowed";
 
 interface BuildUpdatePageButtonProps {
-  rowData: any;
+  validation: any;
-  setRowData: React.Dispatch<React.SetStateAction<any>>;
+  tableSelectedRow: any;
+  setTableSelectedRow: React.Dispatch<React.SetStateAction<any>>;
   formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
   isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const BuildUpdatePage: React.FC<BuildUpdatePageButtonProps> = ({
-  rowData,
+  validation,
-  setRowData,
+  tableSelectedRow,
+  setTableSelectedRow,
   formPageFunction,
   isFormEnabledFunction,
 }) => {
-  if (JSON.stringify(rowData) === "{}") {
-    formPageFunction(<IsNotAllowed />);
-    setRowData({});
-    isFormEnabledFunction(false);
-  }
-
   return (
     <div>
       <PageUpdate
         title="Bina Güncelle Sayfasına Hoş geldiniz"
-        rowData={rowData}
+        validation={validation}
-        setRowData={setRowData}
+        tableSelectedRow={tableSelectedRow}
+        setTableSelectedRow={setTableSelectedRow}
         formPageFunction={formPageFunction}
         isFormEnabledFunction={isFormEnabledFunction}
         onClickAction={() => console.log("Create button clicked")}

src/components/ContextComponents/Commons/ButtonCreate.tsx

@@ -5,6 +5,7 @@ import PageCreate from "@/components/ContextComponents/Commons/PageCreate";
 
 interface CreateButtonProps {
   title: string;
+  validation: any;
   buttonLabel: string;
   isFormEnabled: boolean;
   formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
@@ -13,6 +14,7 @@ interface CreateButtonProps {
 
 const CreateButton: React.FC<CreateButtonProps> = ({
   title,
+  validation,
   buttonLabel,
   isFormEnabled,
   formPageFunction,
@@ -20,6 +22,7 @@ const CreateButton: React.FC<CreateButtonProps> = ({
 }) => {
   const pageCreate = (
     <PageCreate
+      validation={validation}
       title={title}
       formPageFunction={formPageFunction}
       isFormEnabledFunction={isFormEnabledFunction}

src/components/ContextComponents/Commons/ButtonUpdate.tsx

@@ -1,11 +1,13 @@
 "use client";
 import React from "react";
 import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
+import IsNotAllowed from "./PageisNotAllowed";
 
 interface UpdateButtonProps {
   buttonLabel: string;
   isFormEnabled: boolean;
   pageToSet: React.JSX.Element;
+  rowData: any;
   formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
   isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -14,6 +16,7 @@ const UpdateButton: React.FC<UpdateButtonProps> = ({
   buttonLabel,
   isFormEnabled,
   pageToSet,
+  rowData,
   formPageFunction,
   isFormEnabledFunction,
 }) => {
@@ -27,8 +30,14 @@ const UpdateButton: React.FC<UpdateButtonProps> = ({
     setIsFormEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   }) {
     if (!isFormEnabled) {
-      setFormPage(pageToSet);
+      if (JSON.stringify(rowData) === "{}") {
-      setIsFormEnabled(true);
+        alert("Lütfen bir satır seçiniz.");
+        formPageFunction(<IsNotAllowed />);
+        isFormEnabledFunction(false);
+      } else {
+        setFormPage(pageToSet);
+        setIsFormEnabled(true);
+      }
     }
   }
 

src/components/ContextComponents/Commons/PageCreate.tsx

@@ -4,6 +4,7 @@ import EventButton from "./ButtonEvent";
 
 interface CreatePageButtonProps {
   title: string;
+  validation: any;
   formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
   isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
   onClickAction: () => void;
@@ -11,6 +12,7 @@ interface CreatePageButtonProps {
 
 const PageCreate: React.FC<CreatePageButtonProps> = ({
   title,
+  validation,
   formPageFunction,
   isFormEnabledFunction,
   onClickAction,

src/components/ContextComponents/Commons/PageUpdate.tsx

@@ -1,11 +1,24 @@
-import React from "react";
+import React, { FormEvent } 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 UpdatePageButtonProps {
   title: string;
-  rowData: any;
+  validation: any;
-  setRowData: React.Dispatch<React.SetStateAction<any>>;
+  tableSelectedRow: any;
+  setTableSelectedRow: React.Dispatch<React.SetStateAction<any>>;
   formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
   isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
   onClickAction: () => void;
@@ -13,17 +26,60 @@ interface UpdatePageButtonProps {
 
 const PageUpdate: React.FC<UpdatePageButtonProps> = ({
   title,
-  rowData,
+  validation,
-  setRowData,
+  tableSelectedRow,
+  setTableSelectedRow,
   formPageFunction,
   isFormEnabledFunction,
   onClickAction,
 }) => {
+  const [validatedData, setValidatedData] = React.useState({});
+  const [zodValidation, setZodValidation] = React.useState(z.object({}));
+
+  const validationObj = validation?.validated;
+  const validationHeaders = validation?.headers;
+
+  React.useEffect(() => {
+    if (Object.keys(validatedData).length === 0) {
+      setValidatedData(tableSelectedRow);
+      let zodValidationInternal: any = {};
+
+      Object.entries(tableSelectedRow).map(([key, value]: [string, any]) => {
+        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") {
+          console.log("key", key, "value", value);
+          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 />);
-    setRowData({});
+    setTableSelectedRow({});
     isFormEnabledFunction(false);
   }
+  function onSubmit() {
+    console.log("onSubmit");
+  }
 
   return (
     <>
@@ -77,15 +133,123 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
         </div>
       </div>
       <div>
-        {Object.entries(rowData).map(([key, value]: [string, any]) => {
+        {Object.keys(validatedData).length !== 0 && (
-          return (
+          <Form {...form}>
-            <>
+            <form
-              <h1>
+              // onSubmit={onSubmit}
-                {key}: {value}
+              className="space-y-5 max-w-3xl mx-auto py-10"
-              </h1>
+            >
-            </>
+              {Object.entries(validatedData).map(
-          );
+                ([key, value]: [string, any]) => {
-        })}
+                  console.log("key", key);
+                  const keyValidation = validationObj[key] || {
+                    fieldType: { type: "string" },
+                    required: false,
+                  };
+                  const fieldType = keyValidation.fieldType?.type || "string";
+                  const required = keyValidation.required || false;
+                  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 as keyof typeof validatedData}
+                              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 || value}
+                                      defaultValue={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 as keyof typeof validatedData}
+                              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 || 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>
+        )}
       </div>
     </>
   );

src/components/ContextComponents/Commons/Table.tsx

@@ -16,7 +16,8 @@ import {
 interface TableProps {
   createTable: any;
   headers: any;
-  rowClickedFunction: React.Dispatch<React.SetStateAction<{}>>;
+  tableSelectedRow: any;
+  setTableSelectedRow: React.Dispatch<React.SetStateAction<{}>>;
 }
 
 const formSchema = z.object({
@@ -25,7 +26,8 @@ const formSchema = z.object({
 
 const Table: React.FC<TableProps> = ({
   createTable,
-  rowClickedFunction,
+  tableSelectedRow,
+  setTableSelectedRow,
   headers,
 }) => {
   const [initalData, setInitalData] = React.useState([]);
@@ -43,7 +45,7 @@ const Table: React.FC<TableProps> = ({
     if (incomingHeaders.length !== 0) {
       let headersNew: any = [];
       createTable({})
-        .then((res: Object) => {
+        .then((res: any) => {
           const resData: any = res?.data || [];
           if (resData?.length > 0) {
             settabledata(resData || []);
@@ -64,25 +66,6 @@ const Table: React.FC<TableProps> = ({
     }
   }, [headers]);
 
-  function selectItem({ key }: { key: number }) {
-    tabledata.map((item, index) => {
-      if (index === key) {
-        item.selected = true;
-      } else {
-        item.selected = false;
-      }
-    });
-    settabledata([...tabledata] as any);
-    rowClickedFunction(tabledata[key]);
-  }
-
-  function cleanSelection() {
-    tabledata.map((item) => {
-      item.selected = false;
-    });
-    settabledata([...tabledata] as any);
-  }
-
   function cleanSearch() {
     form.setValue("searchText", "");
     settabledata(Array.from(initalData));
@@ -94,7 +77,7 @@ const Table: React.FC<TableProps> = ({
       settabledata(Array.from(initalData));
     } else {
       const filteredList = Array.from(tabledata).filter((item) => {
-        Array.from(item).map((row) => {
+        return Object.values(item).some((row: any) => {
           console.log(row);
           return row.toLowerCase().includes(searchText.toLowerCase());
         });
@@ -111,7 +94,7 @@ const Table: React.FC<TableProps> = ({
           <div className="my-5 md:flex md:w-1/4 md:my-auto justify-center text-lg align-middle md:mr-5">
             <div
               className="w-full md:w-[300px] rounded-full inline-flex items-center justify-center gap-2.5 bg-red-700 px-10 py-4 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
-              onClick={() => cleanSelection()}
+              onClick={() => setTableSelectedRow({})}
             >
               <span>
                 <svg
@@ -231,13 +214,21 @@ const Table: React.FC<TableProps> = ({
               </tr>
             </thead>
             <tbody>
-              {tabledata.map((packageItem, key) => (
+              {tabledata.map((packageItem: any) => (
                 <tr
                   className={`${
-                    packageItem.selected === true ? "bg-blue-900" : ""
+                    tableSelectedRow?.uu_id === packageItem?.uu_id
+                      ? "bg-blue-900"
+                      : ""
                   }`}
-                  key={key}
+                  key={packageItem.uu_id}
-                  onClick={() => selectItem({ key })}
+                  onClick={() =>
+                    setTableSelectedRow(
+                      tableSelectedRow.uu_id == packageItem.uu_id
+                        ? {}
+                        : packageItem
+                    )
+                  }
                 >
                   {Object.entries(packageItem).map(
                     ([key, value]: [key: string, value: any]) => {
@@ -248,7 +239,7 @@ const Table: React.FC<TableProps> = ({
                         >
                           <h5
                             className={`font-medium ${
-                              packageItem.selected === true
+                              tableSelectedRow?.uu_id === packageItem.uu_id
                                 ? "bg-blue-900 text-white"
                                 : "text-black"
                             }`}
@@ -259,78 +250,6 @@ const Table: React.FC<TableProps> = ({
                       );
                     }
                   )}
-                  {/* <td className="border-b border-[#eee] py-5 pl-9 dark:border-strokedark xl:pl-11">
-                    <h5
-                      className={`font-medium ${
-                        packageItem.selected === true
-                          ? "bg-blue-900 text-white"
-                          : "text-black"
-                      }`}
-                    >
-                      {packageItem.name}
-                    </h5>
-                  </td>
-                  <td className="border-b border-[#eee] py-5 pl-9 dark:border-strokedark xl:pl-11">
-                    <h5
-                      className={`font-medium ${
-                        packageItem.selected === true
-                          ? "bg-blue-900 text-white"
-                          : "text-black"
-                      }`}
-                    >
-                      {packageItem.name}
-                    </h5>
-                  </td>
-                  <td className="border-b border-[#eee] py-5 pl-9 dark:border-strokedark xl:pl-11">
-                    <h5
-                      className={`font-medium ${
-                        packageItem.selected === true
-                          ? "bg-blue-900 text-white"
-                          : "text-black"
-                      }`}
-                    >
-                      {packageItem.name}
-                    </h5>
-                  </td>
-                  <td className="border-b border-[#eee] py-5 pl-9 dark:border-strokedark xl:pl-11">
-                    <h5
-                      className={`font-medium ${
-                        packageItem.selected === true
-                          ? "bg-blue-900 text-white"
-                          : "text-black"
-                      }`}
-                    >
-                      {packageItem.name}
-                    </h5>
-                  </td>
-                  <td className="border-b border-[#eee] py-5 dark:border-strokedark">
-                    <p
-                      className={`font-medium ${
-                        packageItem.selected === true
-                          ? "bg-blue-900 text-white"
-                          : "text-black"
-                      }`}
-                    >
-                      {packageItem.invoiceDate}
-                    </p>
-                  </td>
-                  <td
-                    className={`border-b border-[#eee] py-5 text-center dark:border-strokedark" ${
-                      packageItem.selected === true
-                        ? "bg-blue-100 text-white"
-                        : "text-black"
-                    }`}
-                  >
-                    <p
-                      className={`inline-flex rounded-full bg-opacity-10 px-3 py-1 text-sm font-medium ${
-                        packageItem.status
-                          ? "bg-success text-success"
-                          : "bg-danger text-danger"
-                      }`}
-                    >
-                      {packageItem.status ? "Evet" : "Hayır"}
-                    </p>
-                  </td> */}
                 </tr>
               ))}
             </tbody>