From 66bbb58ef378acfcdf80d000b754cbae8ad51e1b Mon Sep 17 00:00:00 2001 From: berkay Date: Thu, 12 Dec 2024 17:11:14 +0300 Subject: [PATCH] create page updated --- .../validations/validationProcesser.ts | 6 +- src/(apicalls)/validations/validations.tsx | 18 +- .../Building/Build/Build.tsx | 32 ++- .../Building/Build/BuildUpdate.tsx | 21 +- .../Commons/ButtonCreate.tsx | 3 + .../Commons/ButtonUpdate.tsx | 13 +- .../ContextComponents/Commons/PageCreate.tsx | 2 + .../ContextComponents/Commons/PageUpdate.tsx | 194 ++++++++++++++++-- .../ContextComponents/Commons/Table.tsx | 121 ++--------- 9 files changed, 267 insertions(+), 143 deletions(-) diff --git a/src/(apicalls)/validations/validationProcesser.ts b/src/(apicalls)/validations/validationProcesser.ts index cf1a7ee..84b2522 100644 --- a/src/(apicalls)/validations/validationProcesser.ts +++ b/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), }; } }); diff --git a/src/(apicalls)/validations/validations.tsx b/src/(apicalls)/validations/validations.tsx index 0c026c0..11f9e04 100644 --- a/src/(apicalls)/validations/validations.tsx +++ b/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 }; diff --git a/src/components/ContextComponents/Building/Build/Build.tsx b/src/components/ContextComponents/Building/Build/Build.tsx index 8740888..10d8d8c 100644 --- a/src/components/ContextComponents/Building/Build/Build.tsx +++ b/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(); 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 ? ( ) : ( @@ -45,15 +49,17 @@ const Build: React.FC = () => { update: { endpoint: "/building/build/create", variableReact: setCreateValidation, - variableKey: "headers", + variableKey: "validation", component: renderUpdate ? ( @@ -72,6 +78,7 @@ const Build: React.FC = () => { variableKey: "headers", component: renderCreate ? ( { } }) .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); } diff --git a/src/components/ContextComponents/Building/Build/BuildUpdate.tsx b/src/components/ContextComponents/Building/Build/BuildUpdate.tsx index 9cf196e..ac90309 100644 --- a/src/components/ContextComponents/Building/Build/BuildUpdate.tsx +++ b/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; - setRowData: React.Dispatch>; + validation: any; + tableSelectedRow: any; + setTableSelectedRow: React.Dispatch>; formPageFunction: React.Dispatch>; isFormEnabledFunction: React.Dispatch>; } const BuildUpdatePage: React.FC = ({ - rowData, - setRowData, + validation, + tableSelectedRow, + setTableSelectedRow, formPageFunction, isFormEnabledFunction, }) => { - if (JSON.stringify(rowData) === "{}") { - formPageFunction(); - setRowData({}); - isFormEnabledFunction(false); - } - return (
console.log("Create button clicked")} diff --git a/src/components/ContextComponents/Commons/ButtonCreate.tsx b/src/components/ContextComponents/Commons/ButtonCreate.tsx index 6e3290f..90b4657 100644 --- a/src/components/ContextComponents/Commons/ButtonCreate.tsx +++ b/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>; @@ -13,6 +14,7 @@ interface CreateButtonProps { const CreateButton: React.FC = ({ title, + validation, buttonLabel, isFormEnabled, formPageFunction, @@ -20,6 +22,7 @@ const CreateButton: React.FC = ({ }) => { const pageCreate = ( >; isFormEnabledFunction: React.Dispatch>; } @@ -14,6 +16,7 @@ const UpdateButton: React.FC = ({ buttonLabel, isFormEnabled, pageToSet, + rowData, formPageFunction, isFormEnabledFunction, }) => { @@ -27,8 +30,14 @@ const UpdateButton: React.FC = ({ setIsFormEnabled: React.Dispatch>; }) { if (!isFormEnabled) { - setFormPage(pageToSet); - setIsFormEnabled(true); + if (JSON.stringify(rowData) === "{}") { + alert("Lütfen bir satır seçiniz."); + formPageFunction(); + isFormEnabledFunction(false); + } else { + setFormPage(pageToSet); + setIsFormEnabled(true); + } } } diff --git a/src/components/ContextComponents/Commons/PageCreate.tsx b/src/components/ContextComponents/Commons/PageCreate.tsx index b742cff..b916c8a 100644 --- a/src/components/ContextComponents/Commons/PageCreate.tsx +++ b/src/components/ContextComponents/Commons/PageCreate.tsx @@ -4,6 +4,7 @@ import EventButton from "./ButtonEvent"; interface CreatePageButtonProps { title: string; + validation: any; formPageFunction: React.Dispatch>; isFormEnabledFunction: React.Dispatch>; onClickAction: () => void; @@ -11,6 +12,7 @@ interface CreatePageButtonProps { const PageCreate: React.FC = ({ title, + validation, formPageFunction, isFormEnabledFunction, onClickAction, diff --git a/src/components/ContextComponents/Commons/PageUpdate.tsx b/src/components/ContextComponents/Commons/PageUpdate.tsx index 0721b06..be22597 100644 --- a/src/components/ContextComponents/Commons/PageUpdate.tsx +++ b/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; - setRowData: React.Dispatch>; + validation: any; + tableSelectedRow: any; + setTableSelectedRow: React.Dispatch>; formPageFunction: React.Dispatch>; isFormEnabledFunction: React.Dispatch>; onClickAction: () => void; @@ -13,17 +26,60 @@ interface UpdatePageButtonProps { const PageUpdate: React.FC = ({ title, - rowData, - setRowData, + validation, + 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>({ + resolver: zodResolver(zodValidation), + }); + function closeFormPage() { formPageFunction(); - setRowData({}); + setTableSelectedRow({}); isFormEnabledFunction(false); } + function onSubmit() { + console.log("onSubmit"); + } return ( <> @@ -77,15 +133,123 @@ const PageUpdate: React.FC = ({
- {Object.entries(rowData).map(([key, value]: [string, any]) => { - return ( - <> -

- {key}: {value} -

- - ); - })} + {Object.keys(validatedData).length !== 0 && ( +
+ + {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 ( + <> +
+ +
+ ( + + + + + + + )} + /> + + + + + + +
+
+ + ); + } else if ( + fieldType === "integer" && + validationHeaders[key] + ) { + return ( + <> +
+ +
+ ( + + + + + + + )} + /> + + + + + + +
+
+ + ); + } + } + )} + + + )}
); diff --git a/src/components/ContextComponents/Commons/Table.tsx b/src/components/ContextComponents/Commons/Table.tsx index 1f94463..fcc5c8b 100644 --- a/src/components/ContextComponents/Commons/Table.tsx +++ b/src/components/ContextComponents/Commons/Table.tsx @@ -16,7 +16,8 @@ import { interface TableProps { createTable: any; headers: any; - rowClickedFunction: React.Dispatch>; + tableSelectedRow: any; + setTableSelectedRow: React.Dispatch>; } const formSchema = z.object({ @@ -25,7 +26,8 @@ const formSchema = z.object({ const Table: React.FC = ({ createTable, - rowClickedFunction, + tableSelectedRow, + setTableSelectedRow, headers, }) => { const [initalData, setInitalData] = React.useState([]); @@ -43,7 +45,7 @@ const Table: React.FC = ({ 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 = ({ } }, [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 = ({ 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 = ({
cleanSelection()} + onClick={() => setTableSelectedRow({})} > = ({ - {tabledata.map((packageItem, key) => ( + {tabledata.map((packageItem: any) => (
selectItem({ key })} + key={packageItem.uu_id} + 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 = ({ >
= ({ ); } )} - {/*
- - - - - */} ))}
-
- {packageItem.name} -
- 		-
- {packageItem.name} -
- 		-
- {packageItem.name} -
- 		-
- {packageItem.name} -
- 		-

- {packageItem.invoiceDate} -

- 		-

- {packageItem.status ? "Evet" : "Hayır"} -

-