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-12 17:11:14 +03:00
parent 5f70bd9854
commit 66bbb58ef3
9 changed files with 267 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/(apicalls)/validations/validationProcesser.ts
View File

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

18
src/(apicalls)/validations/validations.tsx
View File

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

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

@ -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}
setRowData={setRowData}
validation={createValidation}
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);
}

21
src/components/ContextComponents/Building/Build/BuildUpdate.tsx
View File

@ -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<React.SetStateAction<any>>;
validation: 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,
setRowData,
validation,
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}
setRowData={setRowData}
validation={validation}
tableSelectedRow={tableSelectedRow}
setTableSelectedRow={setTableSelectedRow}
formPageFunction={formPageFunction}
isFormEnabledFunction={isFormEnabledFunction}
onClickAction={() => console.log("Create button clicked")}

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

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

13
src/components/ContextComponents/Commons/ButtonUpdate.tsx
View File

@ -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);
setIsFormEnabled(true);
if (JSON.stringify(rowData) === "{}") {
alert("Lütfen bir satır seçiniz.");
formPageFunction(<IsNotAllowed />);
isFormEnabledFunction(false);
} else {
setFormPage(pageToSet);
setIsFormEnabled(true);
}
}
}

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

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

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

@ -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<React.SetStateAction<any>>;
validation: 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,
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<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]) => {
return (
<>
<h1>
{key}: {value}
</h1>
</>
);
})}
{Object.keys(validatedData).length !== 0 && (
<Form {...form}>
<form
// onSubmit={onSubmit}
className="space-y-5 max-w-3xl mx-auto py-10"
>
{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>
</>
);

121
src/components/ContextComponents/Commons/Table.tsx
View File

@ -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}
onClick={() => 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<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>