evyos-center-server
/
wag-managment-frontend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create page updated

This commit is contained in:
berkay 2024-12-13 21:15:53 +03:00
parent 66bbb58ef3
commit 9c42225080
4 changed files with 197 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ContextComponents/Building/Build/Build.tsx
View File

@ -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",
variableReact: setCreateValidation,
endpoint: "/building/build/update",
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}",
variableReact: setUpdateValidation,
variableKey: "headers",
endpoint: "/building/build/create",
isRender: setRenderCreate,
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) => {
console.log("error", error);
});
.catch(() => {});
}, []);
return (

20
src/components/ContextComponents/Commons/ButtonCreate.tsx
View File

@ -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);
}
}

172
src/components/ContextComponents/Commons/PageCreate.tsx
View File

@ -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>
}
</>
);
};

4
src/components/ContextComponents/Commons/PageUpdate.tsx
View File

@ -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 (
<>