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

updated pages create update list delete

This commit is contained in:
berkay 2024-12-16 20:39:42 +03:00
parent ea8f29d6f4
commit 829151bdc8
23 changed files with 1107 additions and 736 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/(apicalls)/basics.ts
View File

@ -4,44 +4,44 @@ export const tokenSecret =
export const cookieObject: any = { export const cookieObject: any = {
httpOnly: true, httpOnly: true,
path: "/", path: "/",
// secure: true,
sameSite: "strict", sameSite: "strict",
maxAge: 3600, maxAge: 3600,
}; };
interface FilterListInterface { interface FilterListInterface {
page?: number; page?: number | null | undefined;
size?: number; size?: number | null | undefined;
order_field?: string; orderField?: string | null | undefined;
order_type?: string; orderType?: string | null | undefined;
include_joins?: any[]; includeJoins?: any[] | null | undefined;
query?: any; query?: any | null | undefined;
} }
class FilterList { class FilterList {
page?: number = 1; page?: number = 1;
size?: number = 5; size?: number = 5;
order_field?: string = "id"; orderField?: string = "id";
order_type?: string = "asc"; orderType?: string = "asc";
include_joins?: any[] = []; includeJoins?: any[] = [];
query?: any; query?: any;
constructor({ constructor({
page, page: page = 1,
size, size: size = 5,
order_field, orderField: orderField = "asc",
order_type, orderType: orderType = "id",
include_joins, includeJoins: includeJoins = [],
query, query: query = {},
}: FilterListInterface) { }: FilterListInterface) {
this.page = page || 1; this.page = page || 1;
this.size = size || 5; this.size = size || 5;
this.order_field = order_field || "id"; this.orderField = orderField || "id";
this.order_type = order_type || "asc"; this.orderType = orderType || "asc";
this.include_joins = include_joins || []; this.includeJoins = includeJoins || [];
this.query = query || {}; this.query = query || {};
} }
} }
export { FilterList }; const defaultFilterList = new FilterList({});
export { FilterList, defaultFilterList };
export type { FilterListInterface }; export type { FilterListInterface };

12
src/(apicalls)/building/build.tsx
View File

@ -1,14 +1,18 @@
"use server"; "use server";
import { fetchData, fetchDataWithToken } from "../api-fetcher"; import { fetchDataWithToken } from "../api-fetcher";
import { baseUrl, FilterList, FilterListInterface } from "../basics"; import {
baseUrl,
FilterList,
FilterListInterface,
defaultFilterList,
} from "../basics";
const buildListEndpoint = `${baseUrl}/building/build/list`; const buildListEndpoint = `${baseUrl}/building/build/list`;
async function retrieveBuildList(payload: FilterListInterface) { async function retrieveBuildList(payload: FilterListInterface) {
const feedObject = new FilterList(payload);
const tokenResponse: any = await fetchDataWithToken( const tokenResponse: any = await fetchDataWithToken(
buildListEndpoint, buildListEndpoint,
feedObject, new FilterList(payload || defaultFilterList),
"POST", "POST",
false false
); );

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

@ -34,17 +34,15 @@ class HeadersAndValidations {
} }
parseProcesser() { parseProcesser() {
const requiredKeys = Array.from(this.validation?.required);
Object.entries(this.properties).map(([key, value]) => { Object.entries(this.properties).map(([key, value]) => {
const isRequired: Boolean = requiredKeys.includes(key); const multipleTypes: Object[] = value?.anyOf || [];
const multipleTypes: Object[] = value?.anyOf; const isRequired: boolean = Object.keys(value).includes("anyOf");
if (!isRequired) { if (!isRequired) {
multipleTypes.map((row: any) => { multipleTypes.map((row: any) => {
if (row.type !== "null") { if (row.type !== "null") {
this.validated[key] = { this.validated[key] = {
required: false, required: false,
fieldType: row.type, fieldType: row.type,
// fieldType: this.parseType(row.type),
}; };
} }
}); });
@ -52,7 +50,6 @@ class HeadersAndValidations {
this.validated[key] = { this.validated[key] = {
required: true, required: true,
fieldType: value, fieldType: value,
// fieldType: this.parseType(value),
}; };
} }
}); });

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

@ -45,10 +45,8 @@ async function retrieveHeadersAndValidationByEndpoint({
"POST", "POST",
false false
); );
console.log("selectResponse", selectResponse);
if (selectResponse.status === 200) { if (selectResponse.status === 200) {
const responseParsed = new HeadersAndValidations(selectResponse); const responseParsed = new HeadersAndValidations(selectResponse);
console.log("responseParsed", responseParsed);
return { return {
status: selectResponse.status, status: selectResponse.status,
headers: responseParsed.headers, headers: responseParsed.headers,
@ -60,7 +58,7 @@ async function retrieveHeadersAndValidationByEndpoint({
return { return {
status: selectResponse.status, status: selectResponse.status,
message: selectResponse.message, message: selectResponse.message,
headers: null, headers: null,
validated: null, validated: null,
}; };

2
src/app/dashboard/page.tsx
View File

@ -17,8 +17,6 @@ const Dashboard: React.FC = async () => {
const eventsList = await retrieveAvailableEvents(); const eventsList = await retrieveAvailableEvents();
const availableMenu = retrieveAvailableCategories(eventsList || []); const availableMenu = retrieveAvailableCategories(eventsList || []);
return ( return (
<> <>
<DashboardPage leftSideMenuContent={availableMenu} /> <DashboardPage leftSideMenuContent={availableMenu} />

31
src/app/trybuildpage/page.tsx Normal file
View File

@ -0,0 +1,31 @@
"use server";
import React from "react";
import { redirect } from "next/navigation";
import {
checkAccessTokenIsValid,
retrieveAvailableEvents,
} from "@/(apicalls)/cookies/token";
import DashboardPage from "@/components/Dashboards/DashboardPage";
import { retrieveAvailableCategories } from "@/appEvents/categories";
import CreatePage from "@/components/ContextComponents/Commons/PageCreate";
const Dashboard: React.FC = async () => {
const token_is_valid = await checkAccessTokenIsValid();
if (!token_is_valid) {
redirect("/login/email");
}
const eventsList = await retrieveAvailableEvents();
const availableMenu = retrieveAvailableCategories(eventsList || []);
const pageInfo = {
title: "Bina Oluştur",
description: "Bina oluştur sayfasına hoş geldiniz",
};
return (
<>
<CreatePage pageInfo={pageInfo} endpoint="/building/build/create" />
</>
);
};
export default Dashboard;

182
src/appEvents/categoriesSecond.ts Normal file
View File

@ -0,0 +1,182 @@
import {
BuildIcon,
BuildPartIcon,
LivingSpaceIcon,
BuildAreaIcon,
} from "./building/iconSet";
import { AccountIcon, meetingIcon } from "./account/iconSet";
import { InviteIcon, TaskIcon } from "./decisionBook/iconSet";
import BuildPage from "./building/build";
import BuildLivingSpacePage from "./building/livingspace";
import AccountPage from "./account/account";
const BuildSubCategories = [
{
title: "Daireler",
icon: BuildPartIcon,
component: BuildPage,
selfEndpoints: {
list: "/building/parts/list",
create: "/building/parts/create",
update: "/building/parts/update/{build_uu_id}",
},
allEndpoints: [],
subCategories: [],
},
{
title: "Kullanılabilir Alanlar",
icon: BuildAreaIcon,
component: BuildPage,
selfEndpoints: {
list: "/building/area/list",
create: "/building/area/create",
update: "/building/area/update/{build_uu_id}",
},
allEndpoints: [],
subCategories: [],
},
{
title: "Yaşayan Kişiler",
icon: LivingSpaceIcon,
component: BuildLivingSpacePage,
selfEndpoints: {
list: "/building/living_space/list",
create: "/building/living_space/create",
update: "/building/living_space/update/{build_uu_id}",
},
allEndpoints: [],
subCategories: [],
},
];
const AccountSubCategories = [
{
title: "Bakiye Sorgulama",
icon: AccountIcon,
component: AccountPage,
selfEndpoints: { list: "/account/records/list" },
allEndpoints: [],
subCategories: [],
},
];
const DecisionBookSubCategories: any = [];
const MeetingSubCategories = [
{
title: "Davetiyeler",
icon: InviteIcon,
component: BuildPage,
selfEndpoints: {
list: "/build/decision_book/invite/list",
create: "/build/decision_book/invite/create",
update: "/build/decision_book/invite/update",
assign: "/build/decision_book/invitations/assign",
},
allEndpoints: [],
subCategories: [],
},
{
title: "Görev Ata",
icon: TaskIcon,
component: BuildPage,
selfEndpoints: {},
allEndpoints: [],
subCategories: [],
},
];
const buildAllEndpoints = [
"/building/build/list",
"/building/build/create",
"/building/build/update/{build_uu_id}",
"/building/parts/list",
"/building/parts/create",
"/building/parts/update/{build_uu_id}",
"/building/area/list",
"/building/area/create",
"/building/area/update/{build_uu_id}",
"/building/living_space/list",
"/building/living_space/create",
"/building/living_space/update/{build_uu_id}",
];
const meetingAllEndpoints = [
"/build/decision_book/invite/list",
"/build/decision_book/invite/create",
"/build/decision_book/invite/update",
"/build/decision_book/invitations/assign",
];
const accountAllEndpoints = ["/account/records/list"];
const LeftMenuCategories = [
{
title: "Bina Tanımları",
icon: BuildIcon,
component: BuildPage,
allEndpoints: buildAllEndpoints,
selfEndpoints: {
list: "/building/build/list",
create: "/building/build/create",
update: "/building/build/update/{build_uu_id}",
},
subCategories: BuildSubCategories,
},
{
title: "Toplantılar",
icon: meetingIcon,
allEndpoints: meetingAllEndpoints,
component: BuildPage,
selfEndpoints: {},
subCategories: MeetingSubCategories,
},
{
title: "Cari Hesaplar",
icon: AccountIcon,
component: BuildPage,
selfEndpoints: {},
allEndpoints: accountAllEndpoints,
subCategories: AccountSubCategories,
},
{
title: "Karar Defteri",
icon: "decision",
component: BuildPage,
selfEndpoints: {},
allEndpoints: [],
subCategories: DecisionBookSubCategories,
},
];
export function retrieveAvailableCategories(availableCategories: any) {
const availableCategoriesList = Array.from(
availableCategories?.availableEvents || []
);
let availableMenu: Array<any> = [];
for (let i = 0; i < LeftMenuCategories.length; i++) {
const category = LeftMenuCategories[i];
if (category.allEndpoints) {
const setCategory = isCategoryAvailable(
category,
availableCategoriesList
);
if (setCategory) {
availableMenu.push(category);
}
}
}
return availableMenu;
}
function isCategoryAvailable(category: any, availableCategoriesList: any) {
const categoryList = Array.from(category.allEndpoints);
for (let j = 0; j < categoryList.length; j++) {
const endpoint = categoryList[j];
if (availableCategoriesList.includes(endpoint)) {
return true;
}
}
}

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

@ -6,161 +6,99 @@ import IsNotAllowed from "@/components/ContextComponents/Commons/PageisNotAllowe
import DeleteButton from "@/components/ContextComponents/Commons/ButtonDelete"; import DeleteButton from "@/components/ContextComponents/Commons/ButtonDelete";
import UpdateButton from "@/components/ContextComponents/Commons/ButtonUpdate"; import UpdateButton from "@/components/ContextComponents/Commons/ButtonUpdate";
import CreateButton from "@/components/ContextComponents/Commons/ButtonCreate"; import CreateButton from "@/components/ContextComponents/Commons/ButtonCreate";
import BuildUpdatePage from "@/components/ContextComponents/Building/Build/BuildUpdate";
import { retrieveAvailableEvents } from "@/(apicalls)/cookies/token"; import { retrieveAvailableEvents } from "@/(apicalls)/cookies/token";
import { import {
retrieveBuildList, retrieveBuildList,
updateBuild, updateBuild,
createBuild, createBuild,
} from "@/(apicalls)/building/build"; } from "@/(apicalls)/building/build";
import { import CreatePage from "@/components/ContextComponents/Commons/PageCreate";
retrieveHeadersEndpoint, import DashPage from "@/components/ContextComponents/Commons/DashPage";
retrieveHeadersAndValidationByEndpoint, import PageUpdate from "@/components/ContextComponents/Commons/PageUpdate";
} from "@/(apicalls)/validations/validations";
import PageCreate from "../../Commons/PageCreate";
const Build: React.FC = () => { const Build: React.FC = () => {
const [renderTable, setRenderTable] = React.useState(false); const [formPage, setFormPage]: [any, any] = React.useState(null);
const [renderCreate, setRenderCreate] = React.useState(false); const [endpointNeedsList, setEndpointNeedsList] = React.useState({});
const [renderUpdate, setRenderUpdate] = React.useState(false);
const [renderDelete, setRenderDelete] = React.useState(false);
const [isFormEnabled, setIsFormEnabled] = React.useState(false);
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 = { const endpointNeeds = {
table: { table: {
endpoint: "/building/build/list", endpoint: "/building/build/list",
variableKey: "headers", component: (
variableReact: setTableHeaders,
component: renderTable ? (
<Table <Table
headers={tableHeaders} createEndpoint="/building/build/list"
tableSelectedRow={tableSelectedRow} updateEndpoint="/building/build/update"
setTableSelectedRow={setTableSelectedRow} tableFunction={retrieveBuildList}
createTable={retrieveBuildList} UpdatePage={PageUpdate}
setFormPage={setFormPage}
returnToPage={() => setFormPage(null)}
updatePageInfo={{
title: "Bina Güncelle",
description: "Bina güncelleme sayfasına hoş geldiniz",
}}
/> />
) : (
<IsNotAllowed />
),
isRender: setRenderTable,
},
update: {
endpoint: "/building/build/update",
isRender: setRenderUpdate,
variableReact: setUpdateValidation,
variableKey: "validation",
component: renderUpdate ? (
<UpdateButton
buttonLabel="Bina Güncelle"
rowData={tableSelectedRow}
isFormEnabled={isFormEnabled}
pageToSet={
<BuildUpdatePage
saveFunction={updateBuild}
validation={updateValidation}
tableSelectedRow={tableSelectedRow}
setTableSelectedRow={setTableSelectedRow}
formPageFunction={setFormPage}
isFormEnabledFunction={setIsFormEnabled}
/>
}
formPageFunction={setFormPage}
isFormEnabledFunction={setIsFormEnabled}
/>
) : (
<IsNotAllowedButton label="Bina Güncelle" />
), ),
notAllowed: <IsNotAllowed buttonKey="list-is-not-allowed" />,
}, },
create: { create: {
endpoint: "/building/build/create", endpoint: "/building/build/create",
isRender: setRenderCreate, component: (
variableReact: setCreateValidation,
variableKey: "validation",
component: renderCreate ? (
<CreateButton <CreateButton
buttonLabel="Yeni Bina ekle" buttonLabel="Yeni Bina ekle"
pageToSet={ setFormPage={() =>
<PageCreate setFormPage(
validation={createValidation} <CreatePage
formPageFunction={setFormPage} pageInfo={{
isFormEnabledFunction={setIsFormEnabled} title: "Bina Oluştur",
onClickAction={() => console.log("Create button clicked")} description: "Bina oluştur sayfasına hoş geldiniz",
/> }}
endpoint="/building/build/create"
returnToPage={() => setFormPage(null)}
/>
)
} }
isFormEnabled={isFormEnabled}
formPageFunction={setFormPage}
isFormEnabledFunction={setIsFormEnabled}
/> />
) : ( ),
<IsNotAllowedButton label="Binayı Oluştur" /> notAllowed: (
<IsNotAllowedButton
buttonKey="create-is-not-allowed"
label="Bina Oluştur"
/>
), ),
}, },
delete: { delete: {
endpoint: "/building/build/delete", endpoint: "/building/build/delete",
variableKey: "headers", component: <DeleteButton onClick={() => () => console.log("Hi")} />,
variableReact: setDeleteValidation, notAllowed: (
component: renderDelete ? ( <IsNotAllowedButton
<DeleteButton onClick={() => () => setIsFormEnabled(true)} /> buttonKey="delete-is-not-allowed"
) : ( label="Binayı Sil"
<IsNotAllowedButton label="Binayı Sil" /> />
), ),
isRender: setRenderDelete,
}, },
}; };
React.useEffect(() => { React.useEffect(() => {
retrieveAvailableEvents() retrieveAvailableEvents()
.then((data) => { .then((data) => {
for (const endpointNeed of Object.values(endpointNeeds)) { for (const [key, component] of Object.entries(endpointNeeds)) {
if (data?.availableEvents.includes(endpointNeed.endpoint)) { if (data?.availableEvents.includes(component.endpoint)) {
if (endpointNeed.variableKey === "headers") { setEndpointNeedsList((prev) => ({
retrieveHeadersEndpoint({ endpoint: endpointNeed.endpoint }) ...prev,
.then((validator) => { [key]: component.component,
if (JSON.stringify(validator?.headers) !== "{}") { }));
setTableHeaders(validator?.headers); } else {
} setEndpointNeedsList((prev) => ({
}) ...prev,
.catch(() => {}); [key]: component.notAllowed,
} else if (endpointNeed.variableKey === "validation") { }));
retrieveHeadersAndValidationByEndpoint({
endpoint: endpointNeed.endpoint,
})
.then((validator) => {
if (JSON.stringify(validator?.validated) !== "{}") {
endpointNeed.variableReact(validator);
}
})
.catch(() => {});
}
endpointNeed.isRender(true);
} }
} }
}) })
.catch(() => {}); .catch(() => {});
}, []); }, [formPage]);
return ( return (
<> <>{formPage ? formPage : <DashPage endpointNeeds={endpointNeedsList} />}</>
{isFormEnabled ? (
formPage
) : (
<div>
<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">
{endpointNeeds.update.component}
{endpointNeeds.create.component}
{endpointNeeds.delete.component}
</div>
{endpointNeeds.table.component}
</div>
)}
</>
); );
}; };

213
src/components/ContextComponents/Building/Build/BuildCreate.tsx Normal file
View File

@ -0,0 +1,213 @@
"use client";
import React from "react";
import EventButton from "@/components/ContextComponents/Commons/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";
import { retrieveValidationsByEndpoint } from "../../functions/retrieveEndpointAndValidations";
interface BuildCreateProps {
pageInfo: any;
endpoint: string;
}
const BuildCreate: React.FC<BuildCreateProps> = ({ pageInfo, endpoint }) => {
const [zodValidation, setZodValidation] = React.useState(z.object({}));
const [apiValidation, setApiValidation] = React.useState({});
const [apiHeaders, setApiHeaders] = React.useState({});
React.useEffect(() => {
retrieveValidationsByEndpoint(endpoint).then((validations: any) => {
setZodValidation(validations.zodValidation as any);
setApiHeaders(validations.apiValidation?.headers as Object);
setApiValidation(validations.apiValidation?.validated as Object);
});
}, []);
const form = useForm<z.infer<typeof zodValidation>>({
resolver: zodResolver(zodValidation),
});
function closeFormPage() {}
function onClickAction() {}
return (
<div>
<>
<h1 className="text-center text-3xl">{pageInfo.description}</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()}
label="Dashboarda Dön"
bgColor="bg-red-700"
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-square-x"
>
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
<path d="m15 9-6 6" />
<path d="m9 9 6 6" />
</svg>
}
/>
<div className="absolute right-0">
<EventButton
onClick={() => onClickAction()}
label="Kaydet"
bgColor="bg-emerald-700"
icon={
<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-check"
>
<path d="M20 6 9 17l-5-5" />
</svg>
}
/>
</div>
</div>
{
<Form {...form}>
<form
// onSubmit={onSubmit}
className="space-y-5 max-w-3xl mx-auto py-10"
>
{Object.entries(apiValidation).map(
([key, value]: [string, any]) => {
console.log("key", key);
const keyValidation = apiValidation[key] || {
fieldType: { type: "string" },
required: false,
};
const fieldType = keyValidation.fieldType?.type || "string";
if (fieldType === "string" && apiHeaders[key]) {
return (
<>
<div className="mb-4" key={key}>
<label className="mb-2.5 block font-medium text-black dark:text-white">
{apiHeaders[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" && apiHeaders[key]) {
return (
<>
<div className="mb-4" key={key}>
<label className="mb-2.5 block font-medium text-black dark:text-white">
{apiHeaders[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>
}
</>
</div>
);
};
export default BuildCreate;

11
src/components/ContextComponents/Building/Build/BuildTable.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
const BuildTable: React.FC = () => {
return (
<div>
{}
</div>
);
};
export default BuildTable;

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

@ -1,23 +1,16 @@
import React from "react"; import React from "react";
import PageUpdate from "@/components/ContextComponents/Commons/PageUpdate"; import PageUpdate from "@/components/ContextComponents/Commons/PageUpdate";
import IsNotAllowed from "@/components/ContextComponents/Commons/PageisNotAllowed";
interface BuildUpdatePageButtonProps { interface BuildUpdatePageButtonProps {
validation: any; endpoint: string;
tableSelectedRow: any; pageInfo: any;
saveFunction: any; selectedRow: 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> = ({ const BuildUpdatePage: React.FC<BuildUpdatePageButtonProps> = ({
validation, endpoint,
tableSelectedRow, pageInfo,
saveFunction, selectedRow,
setTableSelectedRow,
formPageFunction,
isFormEnabledFunction,
}) => { }) => {
return ( return (
<div> <div>
@ -28,7 +21,6 @@ const BuildUpdatePage: React.FC<BuildUpdatePageButtonProps> = ({
saveFunction={saveFunction} saveFunction={saveFunction}
setTableSelectedRow={setTableSelectedRow} setTableSelectedRow={setTableSelectedRow}
formPageFunction={formPageFunction} formPageFunction={formPageFunction}
isFormEnabledFunction={isFormEnabledFunction}
/> />
</div> </div>
); );

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

@ -3,47 +3,18 @@ import React from "react";
import EventButton from "@/components/ContextComponents/Commons/ButtonEvent"; import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
interface CreateButtonProps { interface CreateButtonProps {
setFormPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
buttonLabel: string; 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> = ({ const CreateButton: React.FC<CreateButtonProps> = ({
setFormPage,
pageToSet,
buttonLabel, buttonLabel,
isFormEnabled,
formPageFunction,
isFormEnabledFunction,
}) => { }) => {
function openFormPage({
isFormEnabled,
setFormPage,
setIsFormEnabled,
}: {
isFormEnabled: boolean;
setFormPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
setIsFormEnabled: React.Dispatch<React.SetStateAction<boolean>>;
}) {
if (!isFormEnabled) {
setFormPage(pageToSet);
setIsFormEnabled(true);
}
}
return ( return (
<EventButton <EventButton
onClick={() => key="create-button"
openFormPage({ onClick={() => setFormPage(<></>)}
isFormEnabled: isFormEnabled,
setFormPage: formPageFunction,
setIsFormEnabled: isFormEnabledFunction,
})
}
label={buttonLabel} label={buttonLabel}
bgColor="bg-indigo-700" bgColor="bg-indigo-700"
icon={ icon={

1
src/components/ContextComponents/Commons/ButtonDelete.tsx
View File

@ -9,6 +9,7 @@ interface DeleteButtonProps {
const DeleteButton: React.FC<DeleteButtonProps> = ({ onClick }) => { const DeleteButton: React.FC<DeleteButtonProps> = ({ onClick }) => {
return ( return (
<EventButton <EventButton
key="delete-button"
onClick={() => onClick()} onClick={() => onClick()}
label="Seçili Olanları Sil" label="Seçili Olanları Sil"
bgColor="bg-emerald-700" bgColor="bg-emerald-700"

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

@ -4,50 +4,38 @@ import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
import IsNotAllowed from "./PageisNotAllowed"; import IsNotAllowed from "./PageisNotAllowed";
interface UpdateButtonProps { interface UpdateButtonProps {
buttonLabel: string;
isFormEnabled: boolean;
pageToSet: React.JSX.Element; pageToSet: React.JSX.Element;
rowData: any; rowData: any;
formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>; formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
} }
const UpdateButton: React.FC<UpdateButtonProps> = ({ const UpdateButton: React.FC<UpdateButtonProps> = ({
buttonLabel,
isFormEnabled,
pageToSet, pageToSet,
rowData, rowData,
formPageFunction, formPageFunction,
isFormEnabledFunction,
}) => { }) => {
function openFormPage({ function openFormPage({
isFormEnabled,
setFormPage, setFormPage,
setIsFormEnabled,
}: { }: {
isFormEnabled: boolean;
setFormPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>; setFormPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
setIsFormEnabled: React.Dispatch<React.SetStateAction<boolean>>;
}) { }) {
if (!isFormEnabled) { if (JSON.stringify(rowData) === "{}") {
if (JSON.stringify(rowData) === "{}") { alert("Lütfen bir satır seçiniz.");
alert("Lütfen bir satır seçiniz."); formPageFunction(<IsNotAllowed />);
formPageFunction(<IsNotAllowed />); // isFormEnabledFunction(false);
isFormEnabledFunction(false); } else {
} else { setFormPage(pageToSet);
setFormPage(pageToSet);
setIsFormEnabled(true);
}
} }
} }
// isFormEnabled: isFormEnabled,
// setIsFormEnabled: isFormEnabledFunction,
return ( return (
<EventButton <EventButton
key="update-button"
onClick={() => onClick={() =>
openFormPage({ openFormPage({
isFormEnabled: isFormEnabled,
setFormPage: formPageFunction, setFormPage: formPageFunction,
setIsFormEnabled: isFormEnabledFunction,
}) })
} }
label={buttonLabel} label={buttonLabel}

21
src/components/ContextComponents/Commons/DashPage.tsx Normal file
View File

@ -0,0 +1,21 @@
"use client";
import React from "react";
interface DashPageProps {
endpointNeeds: any;
}
const DashPage: React.FC<DashPageProps> = ({ endpointNeeds }) => {
return (
<div>
<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">
{endpointNeeds?.create}
{endpointNeeds?.delete}
{endpointNeeds?.assign}
</div>
{endpointNeeds?.table}
</div>
);
};
export default DashPage;

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

@ -1,6 +1,7 @@
"use client";
import React from "react"; import React from "react";
import IsNotAllowed from "./PageisNotAllowed"; import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
import EventButton from "./ButtonEvent";
import { import {
Form, Form,
FormControl, FormControl,
@ -13,75 +14,48 @@ import {
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { retrieveValidationsByEndpoint } from "../functions/retrieveEndpointAndValidations";
interface CreatePageButtonProps { interface CreatePageProps {
validation: any; pageInfo: any;
formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>; endpoint: string;
isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>; returnToPage: any;
onClickAction: () => void;
} }
const PageCreate: React.FC<CreatePageButtonProps> = ({ const CreatePage: React.FC<CreatePageProps> = ({
validation, pageInfo,
formPageFunction, endpoint,
isFormEnabledFunction, returnToPage,
onClickAction,
}) => { }) => {
const [zodValidation, setZodValidation] = React.useState(z.object({})); const [zodValidation, setZodValidation] = React.useState(z.object({}));
const validationObj: any = validation?.validated; const [apiValidation, setApiValidation] = React.useState<{
const validationHeaders = validation?.headers; [key: string]: any;
}>({});
const [apiHeaders, setApiHeaders] = React.useState<{
[key: string]: any;
}>({});
React.useEffect(() => { React.useEffect(() => {
console.log("validation", validation); retrieveValidationsByEndpoint(endpoint).then((validations: any) => {
console.log("validationObj", validationObj); setZodValidation(validations.zodValidation as any);
console.log("validationHeaders", validationHeaders); setApiHeaders(validations.apiValidation?.headers as Object);
setApiValidation(validations.apiValidation?.validated as Object);
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>>({ const form = useForm<z.infer<typeof zodValidation>>({
resolver: zodResolver(zodValidation), resolver: zodResolver(zodValidation),
}); });
function closeFormPage() { function closeFormPage() {}
formPageFunction(<IsNotAllowed />); function saveAction() {}
isFormEnabledFunction(false);
}
function onSubmit() {
console.log("onSubmit");
}
return ( return (
<> <div>
<h1 className="text-center text-3xl"> <h1 className="text-center text-3xl my-7">{pageInfo.description}</h1>
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"> <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 <EventButton
onClick={() => closeFormPage()} onClick={() => returnToPage()}
label="Dashboarda Dön" label="Dashboarda Dön"
bgColor="bg-red-700" bgColor="bg-red-700"
icon={ icon={
@ -105,7 +79,7 @@ const PageCreate: React.FC<CreatePageButtonProps> = ({
/> />
<div className="absolute right-0"> <div className="absolute right-0">
<EventButton <EventButton
onClick={() => onClickAction()} onClick={() => saveAction()}
label="Kaydet" label="Kaydet"
bgColor="bg-emerald-700" bgColor="bg-emerald-700"
icon={ icon={
@ -129,118 +103,108 @@ const PageCreate: React.FC<CreatePageButtonProps> = ({
</div> </div>
{ {
<Form {...form}> <Form {...form}>
<form <form className="space-y-5 max-w-3xl mx-auto py-10">
// onSubmit={onSubmit} {Object.keys(apiValidation).map((key: string) => {
className="space-y-5 max-w-3xl mx-auto py-10" const keyValidation = apiValidation[key] || {
> fieldType: { type: "string" },
{Object.entries(validationObj).map( required: false,
([key, value]: [string, any]) => { };
console.log("key", key); const fieldType = keyValidation.fieldType?.type || "string";
const keyValidation = validationObj[key] || { if (fieldType === "string" && apiValidation[key]) {
fieldType: { type: "string" }, return (
required: false, <div className="mb-4" key={`${key}-header`}>
}; <label className="mb-2.5 block font-medium text-black dark:text-white">
const fieldType = keyValidation.fieldType?.type || "string"; {apiHeaders[key]}
if (fieldType === "string" && validationHeaders[key]) { </label>
return ( <div className="relative" key={key}>
<> <FormField
<div className="mb-4"> control={form.control}
<label className="mb-2.5 block font-medium text-black dark:text-white"> name={key as keyof z.infer<typeof zodValidation>}
{validationHeaders[key] || "Unknown"} render={({ field }) => (
</label> <FormItem>
<div className="relative"> <FormControl>
<FormField <input
control={form.control} type="text"
name={key} 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"
render={({ field }) => ( {...field}
<FormItem> value={field.value}
<FormControl> />
<input </FormControl>
type="text" <FormMessage />
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" </FormItem>
{...field} )}
value={field.value} />
/> <span className="absolute right-4 top-4">
</FormControl> <svg
<FormMessage /> xmlns="http://www.w3.org/2000/svg"
</FormItem> width="24"
)} height="24"
/> viewBox="0 0 24 24"
<span className="absolute right-4 top-4"> fill="none"
<svg stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" strokeWidth="2"
width="24" strokeLinecap="round"
height="24" strokeLinejoin="round"
viewBox="0 0 24 24" className="lucide lucide-pencil"
fill="none" >
stroke="currentColor" <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" />
strokeWidth="2" <path d="m15 5 4 4" />
strokeLinecap="round" </svg>
strokeLinejoin="round" </span>
className="lucide lucide-pencil" </div>
> </div>
<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" /> } else if (fieldType === "integer" && apiValidation[key]) {
</svg> return (
</span> <div className="mb-4" key={`${key}-header`}>
</div> <label className="mb-2.5 block font-medium text-black dark:text-white">
</div> {apiHeaders[key]}
</> </label>
); <div className="relative" key={key}>
} else if (fieldType === "integer" && validationHeaders[key]) { <FormField
return ( control={form.control}
<> name={key as keyof z.infer<typeof zodValidation>}
<div className="mb-4"> render={({ field }) => (
<label className="mb-2.5 block font-medium text-black dark:text-white"> <FormItem>
{validationHeaders[key] || "Unknown"} <FormControl>
</label> <input
<div className="relative"> type="text"
<FormField 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"
control={form.control} {...field}
name={key} value={field.value}
render={({ field }) => ( />
<FormItem> </FormControl>
<FormControl> <FormMessage />
<input </FormItem>
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} <span className="absolute right-4 top-4">
value={field.value} <svg
/> xmlns="http://www.w3.org/2000/svg"
</FormControl> width="24"
<FormMessage /> height="24"
</FormItem> viewBox="0 0 24 24"
)} fill="none"
/> stroke="currentColor"
<span className="absolute right-4 top-4"> strokeWidth="2"
<svg strokeLinecap="round"
xmlns="http://www.w3.org/2000/svg" strokeLinejoin="round"
width="24" className="lucide lucide-pencil"
height="24" >
viewBox="0 0 24 24" <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" />
fill="none" <path d="m15 5 4 4" />
stroke="currentColor" </svg>
strokeWidth="2" </span>
strokeLinecap="round" </div>
strokeLinejoin="round" </div>
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>
</Form> </Form>
} }
</> </div>
); );
}; };
export default PageCreate; export default CreatePage;

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

@ -13,41 +13,48 @@ import {
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { retrieveValidationsByEndpoint } from "../functions/retrieveEndpointAndValidations";
interface UpdatePageButtonProps { interface UpdatePageButtonProps {
title: string; endpoint: string;
validation: any; pageInfo: any;
tableSelectedRow: any; selectedRow: any;
returnToPage: any;
saveFunction: any; saveFunction: any;
setTableSelectedRow: React.Dispatch<React.SetStateAction<any>>;
formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
} }
const PageUpdate: React.FC<UpdatePageButtonProps> = ({ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
title, endpoint,
validation, pageInfo,
tableSelectedRow, selectedRow,
returnToPage,
saveFunction, saveFunction,
setTableSelectedRow,
formPageFunction,
isFormEnabledFunction,
}) => { }) => {
const [validatedData, setValidatedData] = React.useState({}); const [validatedData, setValidatedData] = React.useState({});
const [zodValidation, setZodValidation] = React.useState(z.object({})); const [zodValidation, setZodValidation] = React.useState(z.object({}));
const [apiValidation, setApiValidation] = React.useState<{
[key: string]: any;
}>({});
const [apiHeaders, setApiHeaders] = React.useState<{
[key: string]: any;
}>({});
const validationObj = validation?.validated; React.useEffect(() => {
const validationHeaders = validation?.headers; retrieveValidationsByEndpoint(endpoint).then((validations: any) => {
setZodValidation(validations.zodValidation as any);
setApiHeaders(validations.apiValidation?.headers as Object);
setApiValidation(validations.apiValidation?.validated as Object);
});
}, []);
React.useEffect(() => { React.useEffect(() => {
if (Object.keys(validatedData).length === 0) { if (Object.keys(validatedData).length === 0) {
setValidatedData(tableSelectedRow); setValidatedData(selectedRow);
let zodValidationInternal: any = {}; let zodValidationInternal: any = {};
Object.keys(tableSelectedRow).map((key: string) => { Object.keys(selectedRow).map((key: string) => {
zodValidationInternal[key] = null; zodValidationInternal[key] = null;
const keyValidation = apiValidation[key] || {
const keyValidation = validationObj[key] || {
fieldType: { type: "string" }, fieldType: { type: "string" },
required: false, required: false,
}; };
@ -65,28 +72,21 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
}); });
setZodValidation(zodValidationInternal); setZodValidation(zodValidationInternal);
} }
}, [validation]); }, []);
const form = useForm<z.infer<typeof zodValidation>>({ const form = useForm<z.infer<typeof zodValidation>>({
resolver: zodResolver(zodValidation), resolver: zodResolver(zodValidation),
}); });
function closeFormPage() { // function onSubmit(values: z.infer<typeof zodValidation>) {
formPageFunction(<IsNotAllowed />); function onSubmit() {}
setTableSelectedRow({});
isFormEnabledFunction(false);
}
function onSubmit(values: z.infer<typeof zodValidation>) {
console.log("onSubmit", values);
// saveFunction(validatedData);
}
return ( return (
<> <>
<h1 className="text-center text-3xl">{title}</h1> <h1 className="text-center text-3xl">{pageInfo?.title}</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"> <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 <EventButton
onClick={() => closeFormPage()} onClick={() => returnToPage()}
label="Dashboarda Dön" label="Dashboarda Dön"
bgColor="bg-red-700" bgColor="bg-red-700"
icon={ icon={
@ -133,122 +133,111 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
</div> </div>
</div> </div>
<div> <div>
{Object.keys(validatedData).length !== 0 && ( <Form {...form}>
<Form {...form}> <form
<form // onSubmit={onSubmit}
// onSubmit={onSubmit} className="space-y-5 max-w-3xl mx-auto py-10"
className="space-y-5 max-w-3xl mx-auto py-10" >
> {Object.keys(apiValidation).map((key: string) => {
{Object.entries(validatedData).map( const keyValidation = apiValidation[key] || {
([key, value]: [string, any]) => { fieldType: { type: "string" },
console.log("key", key); required: false,
const keyValidation = validationObj[key] || { };
fieldType: { type: "string" }, const fieldType = keyValidation.fieldType?.type || "string";
required: false, if (fieldType === "string" && apiValidation[key]) {
}; return (
const fieldType = keyValidation.fieldType?.type || "string"; <div className="mb-4" key={`${key}-header`}>
if (fieldType === "string" && validationHeaders[key]) { <label className="mb-2.5 block font-medium text-black dark:text-white">
return ( {apiHeaders[key]}
<> </label>
<div className="mb-4"> <div className="relative" key={key}>
<label className="mb-2.5 block font-medium text-black dark:text-white"> <FormField
{validationHeaders[key] || "Unknown"} control={form.control}
</label> name={key as keyof z.infer<typeof zodValidation>}
<div className="relative"> render={({ field }) => (
<FormField <FormItem>
control={form.control} <FormControl>
name={key as keyof typeof validatedData} <input
render={({ field }) => ( type="text"
<FormItem> 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"
<FormControl> {...field}
<input defaultValue={validatedData[key] || ""}
type="text" value={field.value}
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} </FormControl>
value={field.value || value} <FormMessage />
defaultValue={value || ""} </FormItem>
/> )}
</FormControl> />
<FormMessage /> <span className="absolute right-4 top-4">
</FormItem> <svg
)} xmlns="http://www.w3.org/2000/svg"
/> width="24"
<span className="absolute right-4 top-4"> height="24"
<svg viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" fill="none"
width="24" stroke="currentColor"
height="24" strokeWidth="2"
viewBox="0 0 24 24" strokeLinecap="round"
fill="none" strokeLinejoin="round"
stroke="currentColor" className="lucide lucide-pencil"
strokeWidth="2" >
strokeLinecap="round" <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" />
strokeLinejoin="round" <path d="m15 5 4 4" />
className="lucide lucide-pencil" </svg>
> </span>
<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" /> </div>
<path d="m15 5 4 4" /> </div>
</svg> );
</span> } else if (fieldType === "integer" && apiValidation[key]) {
</div> return (
</div> <div className="mb-4" key={`${key}-header`}>
</> <label className="mb-2.5 block font-medium text-black dark:text-white">
); {apiHeaders[key]}
} else if ( </label>
fieldType === "integer" && <div className="relative" key={key}>
validationHeaders[key] <FormField
) { control={form.control}
return ( name={key as keyof z.infer<typeof zodValidation>}
<> render={({ field }) => (
<div className="mb-4"> <FormItem>
<label className="mb-2.5 block font-medium text-black dark:text-white"> <FormControl>
{validationHeaders[key] || "Unknown"} <input
</label> type="text"
<div className="relative"> 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"
<FormField {...field}
control={form.control} defaultValue={validatedData[key] || ""}
name={key as keyof typeof validatedData} value={field.value}
render={({ field }) => ( />
<FormItem> </FormControl>
<FormControl> <FormMessage />
<input </FormItem>
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} <span className="absolute right-4 top-4">
value={field.value || value} <svg
/> xmlns="http://www.w3.org/2000/svg"
</FormControl> width="24"
<FormMessage /> height="24"
</FormItem> viewBox="0 0 24 24"
)} fill="none"
/> stroke="currentColor"
<span className="absolute right-4 top-4"> strokeWidth="2"
<svg strokeLinecap="round"
xmlns="http://www.w3.org/2000/svg" strokeLinejoin="round"
width="24" className="lucide lucide-pencil"
height="24" >
viewBox="0 0 24 24" <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" />
fill="none" <path d="m15 5 4 4" />
stroke="currentColor" </svg>
strokeWidth="2" </span>
strokeLinecap="round" </div>
strokeLinejoin="round" </div>
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" /> </form>
</svg> </Form>
</span>
</div>
</div>
</>
);
}
}
)}
</form>
</Form>
)}
</div> </div>
</> </>
); );

27
src/components/ContextComponents/Commons/PageisNotAllowed.tsx
View File

@ -1,20 +1,25 @@
import React from "react"; import React from "react";
const IsNotAllowed: React.FC = () => { interface IsNotAllowedProps {
buttonKey?: string;
}
const IsNotAllowed: React.FC<IsNotAllowedProps> = ({ buttonKey }) => {
return ( return (
<> <div
<div className="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> key={buttonKey}
<div className="max-w-full max-h-full overflow-x-auto"> className="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"
<div className="w-full h-full "> >
<div className="text-center my-10"> <div className="max-w-full max-h-full overflow-x-auto">
<span className="text-5xl font-serif font-bold text-black dark:text-white"> <div className="w-full h-full ">
Kullanıcı bu etkinliğe erişim iznine sahip değil. <div className="text-center my-10">
</span> <span className="text-5xl font-serif font-bold text-black dark:text-white">
</div> Kullanıcı bu etkinliğe erişim iznine sahip değil.
</span>
</div> </div>
</div> </div>
</div> </div>
</> </div>
); );
}; };

11
src/components/ContextComponents/Commons/SearchBar.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
const SearchBar: React.FC = () => {
return (
<div>
{/* SearchBar component */}
</div>
);
};
export default SearchBar;

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

@ -12,12 +12,16 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { retrieveHeadersByEndpoint } from "../functions/retrieveEndpointAndValidations";
interface TableProps { interface TableProps {
createTable: any; createEndpoint: string;
headers: any; updateEndpoint: string;
tableSelectedRow: any; tableFunction: any;
setTableSelectedRow: React.Dispatch<React.SetStateAction<{}>>; UpdatePage: any;
setFormPage: any;
updatePageInfo: any;
returnToPage: any;
} }
const formSchema = z.object({ const formSchema = z.object({
@ -25,227 +29,206 @@ const formSchema = z.object({
}); });
const Table: React.FC<TableProps> = ({ const Table: React.FC<TableProps> = ({
createTable, createEndpoint,
tableSelectedRow, updateEndpoint,
setTableSelectedRow, tableFunction,
headers, UpdatePage,
setFormPage,
updatePageInfo,
returnToPage,
}) => { }) => {
const [initalData, setInitalData] = React.useState([]); const [apiHeaders, setApiHeaders] = React.useState<string[]>([]);
const [tabledata, settabledata] = React.useState([]); const [tabledata, settabledata] = React.useState([]);
const [headersList, setHeadersList] = React.useState([]); const [searchDropDown, setSearchDropDown] = React.useState("");
const incomingHeaders = Array.from(Object.values(headers)) || [];
const headersObject = headers || {};
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
}); });
React.useEffect(() => { function retrieveData(query: null | any = null) {
if (incomingHeaders.length !== 0) { return tableFunction(query)
let headersNew: any = []; .then((res: any) => {
createTable({}) settabledata(res?.data || []);
.then((res: any) => { return res?.data || [];
const resData: any = res?.data || []; })
if (resData?.length > 0) { .catch((err: any) => {});
settabledata(resData || []);
setInitalData(resData || []);
for (const key in resData[0]) {
if (Object.keys(headersObject).includes(key)) {
headersNew.push(headers[key]);
} else {
console.log("key", key);
}
}
if (headersNew.length > 0) {
setHeadersList(headersNew);
}
}
})
.catch((err: any) => {});
}
}, [headers]);
function cleanSearch() {
form.setValue("searchText", "");
settabledata(Array.from(initalData));
} }
function search(values: z.infer<typeof formSchema>) { React.useEffect(() => {
const searchText = values.searchText; retrieveHeadersByEndpoint(createEndpoint).then((validations: any) => {
if (validations?.headers.length !== 0) {
tableFunction({
page: 1,
limit: 10,
order_field: "uu_id",
order_type: "desc",
})
.then((response: any) => {
settabledata(response?.data || []);
for (const key in response?.data[0]) {
if (Object.keys(validations?.headers).includes(key)) {
setApiHeaders((prev: string[]) => [
...prev,
validations?.headers[key],
]);
}
}
})
.catch((err: any) => {});
}
retrieveData();
});
}, []);
function cleanSearch() {
retrieveData();
}
function searchByForm() {
const searchText = form.getValues("searchText");
if (searchText === "") { if (searchText === "") {
settabledata(Array.from(initalData)); cleanSearch();
} else { } else {
const filteredList = Array.from(tabledata).filter((item) => { if (searchText.length > 3) {
return Object.values(item).some((row: any) => { setQuery({ searchDropDown: searchText });
console.log(row); retrieveData();
return row.toLowerCase().includes(searchText.toLowerCase()); }
});
});
console.log("filteredList", filteredList);
settabledata(filteredList);
} }
} }
function updateSelectedRow({ selectedComponent }: any) {
setFormPage(
<UpdatePage
endpoint={updateEndpoint}
pageInfo={updatePageInfo}
selectedRow={selectedComponent}
returnToPage={returnToPage}
saveFunction={() => console.log("saveFunction")}
/>
);
}
return ( return (
<> <>
<div className="w-full md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div className="text-lg rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="md:w-full mx-5 md:flex md:my-auto justify-start text-lg align-middle"> <div className="my-5 max-w-full justify-start text-lg align-middle">
<div className="my-5 md:flex md:w-1/4 md:my-auto justify-center text-lg align-middle md:mr-5"> <Form {...form}>
<div <form onSubmit={searchByForm}>
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" <div className="relative">
onClick={() => setTableSelectedRow({})} <FormField
> control={form.control}
<span> name="searchText"
<svg render={({ field }) => (
className="fill-current" <FormItem>
width="20" <FormControl>
height="20" <input
viewBox="0 0 18 18" type="text"
fill="none" placeholder="Aramak istediğiniz metini yazınız"
xmlns="http://www.w3.org/2000/svg" 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>
)}
/>
<button
type="submit"
className="absolute right-5 top-1/2 -translate-y-1/2"
> >
<path <svg
d="M13.7535 2.47502H11.5879V1.9969C11.5879 1.15315 10.9129 0.478149 10.0691 0.478149H7.90352C7.05977 0.478149 6.38477 1.15315 6.38477 1.9969V2.47502H4.21914C3.40352 2.47502 2.72852 3.15002 2.72852 3.96565V4.8094C2.72852 5.42815 3.09414 5.9344 3.62852 6.1594L4.07852 15.4688C4.13477 16.6219 5.09102 17.5219 6.24414 17.5219H11.7004C12.8535 17.5219 13.8098 16.6219 13.866 15.4688L14.3441 6.13127C14.8785 5.90627 15.2441 5.3719 15.2441 4.78127V3.93752C15.2441 3.15002 14.5691 2.47502 13.7535 2.47502ZM7.67852 1.9969C7.67852 1.85627 7.79102 1.74377 7.93164 1.74377H10.0973C10.2379 1.74377 10.3504 1.85627 10.3504 1.9969V2.47502H7.70664V1.9969H7.67852ZM4.02227 3.96565C4.02227 3.85315 4.10664 3.74065 4.24727 3.74065H13.7535C13.866 3.74065 13.9785 3.82502 13.9785 3.96565V4.8094C13.9785 4.9219 13.8941 5.0344 13.7535 5.0344H4.24727C4.13477 5.0344 4.02227 4.95002 4.02227 4.8094V3.96565ZM11.7285 16.2563H6.27227C5.79414 16.2563 5.40039 15.8906 5.37227 15.3844L4.95039 6.2719H13.0785L12.6566 15.3844C12.6004 15.8625 12.2066 16.2563 11.7285 16.2563Z" xmlns="http://www.w3.org/2000/svg"
fill="" width="32"
/> height="32"
<path viewBox="0 0 24 24"
d="M9.00039 9.11255C8.66289 9.11255 8.35352 9.3938 8.35352 9.75942V13.3313C8.35352 13.6688 8.63477 13.9782 9.00039 13.9782C9.33789 13.9782 9.64727 13.6969 9.64727 13.3313V9.75942C9.64727 9.3938 9.33789 9.11255 9.00039 9.11255Z" fill="none"
fill="" stroke="currentColor"
/> strokeWidth="2"
<path strokeLinecap="round"
d="M11.2502 9.67504C10.8846 9.64692 10.6033 9.90004 10.5752 10.2657L10.4064 12.7407C10.3783 13.0782 10.6314 13.3875 10.9971 13.4157C11.0252 13.4157 11.0252 13.4157 11.0533 13.4157C11.3908 13.4157 11.6721 13.1625 11.6721 12.825L11.8408 10.35C11.8408 9.98442 11.5877 9.70317 11.2502 9.67504Z" strokeLinejoin="round"
fill="" className="lucide lucide-search"
/> >
<path <circle cx="11" cy="11" r="8" />
d="M6.72245 9.67504C6.38495 9.70317 6.1037 10.0125 6.13182 10.35L6.3287 12.825C6.35683 13.1625 6.63808 13.4157 6.94745 13.4157C6.97558 13.4157 6.97558 13.4157 7.0037 13.4157C7.3412 13.3875 7.62245 13.0782 7.59433 12.7407L7.39745 10.2657C7.39745 9.90004 7.08808 9.64692 6.72245 9.67504Z" <path d="m21 21-4.3-4.3" />
fill="" </svg>
/> </button>
<button
onClick={() => cleanSearch()}
className="absolute right-20 top-1/2 -translate-y-1/2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-x"
>
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
</button>
</div>
</form>
</Form>
</div>
<div className="max-w-full mt-5 mb-10 overflow-x-auto">
{tabledata.map((row: any) => {
return (
<span
key={`${row.uu_id}-update`}
className="absolute left-20 bottom-30 mt-9"
>
<svg
onClick={() => updateSelectedRow({ selectedComponent: row })}
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
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> </svg>
</span> </span>
Seçimleri Temizle );
</div> })}
</div>
<div className="my-5 md:flex md:w-3/4 md:my-auto justify-center text-lg align-middle">
<Form {...form}>
<form
className="min-w-max md:min-w-full"
onSubmit={form.handleSubmit(search)}
>
<div className="relative">
<FormField
control={form.control}
name="searchText"
render={({ field }) => (
<FormItem>
<FormControl>
<input
type="text"
placeholder="Aramak istediğiniz metini yazınız"
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>
)}
/>
<button
type="submit"
className="absolute right-5 top-1/2 -translate-y-1/2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-search"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
</button>
<button
onClick={() => cleanSearch()}
className="absolute right-20 top-1/2 -translate-y-1/2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-x"
>
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
</button>
</div>
</form>
</Form>
</div>
</div>
</div>
<div className="text-lg rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="max-w-full mt-5 mb-10 overflow-x-auto">
<table className="w-full table-auto"> <table className="w-full table-auto">
<thead> <thead>
<tr className="bg-gray-2 dark:bg-meta-4 border-b border-[#eee] py-5 dark:border-strokedark xl:pl-11"> <tr className="bg-gray-2 dark:bg-meta-4 border-b border-[#eee] py-5 dark:border-strokedark xl:pl-11">
{headersList.map((header, key) => ( {apiHeaders &&
<th apiHeaders?.map((header, key) => (
key={key} <th
className="min-w-auto px-4 py-4 font-medium text-black dark:text-white" key={key}
> className="min-w-auto px-4 py-4 font-medium text-black dark:text-white"
{header} >
</th> {header}
))} </th>
))}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{tabledata.map((packageItem: any) => ( {tabledata.map((row: any) => (
<tr <tr key={row.uu_id}>
className={`${ {Object.entries(row).map(
tableSelectedRow?.uu_id === packageItem?.uu_id
? "bg-blue-900"
: ""
}`}
key={packageItem.uu_id}
onClick={() =>
setTableSelectedRow(
tableSelectedRow.uu_id == packageItem.uu_id
? {}
: packageItem
)
}
>
{Object.entries(packageItem).map(
([key, value]: [key: string, value: any]) => { ([key, value]: [key: string, value: any]) => {
return ( return (
<td <td
key={key} key={key}
className="border-b border-[#eee] py-5 pl-9 dark:border-strokedark xl:pl-11" className="border-b border-[#eee] py-5 pl-9 dark:border-strokedark xl:pl-11"
> >
<h5 <h5>{value || ""}</h5>
className={`font-medium ${
tableSelectedRow?.uu_id === packageItem.uu_id
? "bg-blue-900 text-white"
: "text-black"
}`}
>
{value || ""}
</h5>
</td> </td>
); );
} }

7
src/components/ContextComponents/Commons/isNotAllowedButton.tsx
View File

@ -3,13 +3,18 @@ import React from "react";
import EventButton from "@/components/ContextComponents/Commons/ButtonEvent"; import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
interface IsNotAllowedButtonProps { interface IsNotAllowedButtonProps {
buttonKey: string;
label: string; label: string;
} }
const IsNotAllowedButton: React.FC<IsNotAllowedButtonProps> = ({ label }) => { const IsNotAllowedButton: React.FC<IsNotAllowedButtonProps> = ({
label,
buttonKey,
}) => {
return ( return (
<> <>
<EventButton <EventButton
key={buttonKey}
label={label} label={label}
bgColor="bg-slate-400" bgColor="bg-slate-400"
ishover={false} ishover={false}

65
src/components/ContextComponents/functions/retrieveEndpointAndValidations.ts Normal file
View File

@ -0,0 +1,65 @@
"use client";
import { z } from "zod";
import {
retrieveHeadersAndValidationByEndpoint,
retrieveHeadersEndpoint,
} from "@/(apicalls)/validations/validations";
async function retrieveValidationsByEndpoint(endpoint: string) {
let apiValidation: any = {};
let zodValidation: any = {};
await retrieveHeadersAndValidationByEndpoint({
endpoint: endpoint,
})
.then((validator) => {
if (JSON.stringify(validator?.validated) !== "{}") {
apiValidation = validator;
Object.keys(validator?.validated).map((key: string) => {
zodValidation[key] = null;
const keyValidation = validator?.validated[key] || {
fieldType: { type: "string" },
required: false,
};
const fieldType: String = keyValidation.fieldType?.type || "string";
const required = keyValidation.required || false;
if (fieldType === "string") {
zodValidation[key] = required ? z.string() : z.string().optional();
} else if (fieldType === "integer") {
zodValidation[key] = required ? z.number() : z.number().optional();
}
});
return {
zodValidation: zodValidation,
apiValidation: apiValidation,
};
}
})
.catch(() => {});
return {
zodValidation: zodValidation,
apiValidation: apiValidation,
};
}
async function retrieveHeadersByEndpoint(endpoint: string) {
let headers: any = {};
await retrieveHeadersEndpoint({
endpoint: endpoint,
})
.then((validator) => {
if (JSON.stringify(validator?.headers) !== "{}") {
headers = validator?.headers;
return {
headers: headers,
};
}
})
.catch(() => {});
return {
headers: headers,
};
}
export { retrieveValidationsByEndpoint, retrieveHeadersByEndpoint };

6
src/components/Dashboards/DashboardPage.tsx
View File

@ -13,8 +13,12 @@ const DashboardPage: React.FC<DashboardPageProps> = ({
}) => { }) => {
const [activePage, setActivePage] = React.useState(<Landing />); const [activePage, setActivePage] = React.useState(<Landing />);
const [activeMenu, setActiveMenu] = React.useState(leftSideMenuContent); const [activeMenu, setActiveMenu] = React.useState(leftSideMenuContent);
const [activeValidationList, setActiveValidationList] = React.useState([]);
const [activeValidation, setActiveValidation] = React.useState({});
React.useEffect(() => {}, [activeMenu]); React.useEffect((
) => {}, [activeMenu]);
return ( return (
<DefaultLayout <DefaultLayout
leftSideMenuContent={activeMenu} leftSideMenuContent={activeMenu}