table updated
This commit is contained in:
parent
00acc8c320
commit
4bf79cff55
|
|
@ -0,0 +1,65 @@
|
||||||
|
"use server";
|
||||||
|
import NextCrypto from "next-crypto";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
|
const nextCrypto = new NextCrypto(
|
||||||
|
"2f3c097b29fc4a70084403ad7b2f9def1ba0bf6e96c892457b0bebd15d3f48fd7396120708cb7efdf7f4b09003701710c0904addaaf991d412403b47d9762aa9"
|
||||||
|
);
|
||||||
|
|
||||||
|
export async function defaultPagination() {
|
||||||
|
const paginate = await encryptQuery({
|
||||||
|
size: 10,
|
||||||
|
page: 1,
|
||||||
|
orderBy: "uu_id",
|
||||||
|
orderType: "desc",
|
||||||
|
query: {},
|
||||||
|
});
|
||||||
|
return paginate.replaceAll(" ", "+");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function decryptQuery(query: string) {
|
||||||
|
if (!query) return {};
|
||||||
|
const decryptURL = await nextCrypto.decrypt(String(query.replace(/ /g, "+")));
|
||||||
|
try {
|
||||||
|
const cleanedString = String(decryptURL).replace(/\\/g, "");
|
||||||
|
const decodedString = decodeURI(cleanedString || "{}");
|
||||||
|
const parsedObject = JSON.parse(decodedString);
|
||||||
|
if (typeof parsedObject !== "object") {
|
||||||
|
return JSON.parse(parsedObject);
|
||||||
|
}
|
||||||
|
return parsedObject;
|
||||||
|
} catch (error) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function encryptQuery(queryObject: any) {
|
||||||
|
const encodedURL = encodeURI(JSON.stringify(queryObject));
|
||||||
|
return (await nextCrypto.encrypt(encodedURL)).replaceAll(";", "%3B");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function handleFormSubmission(formData: FormData): Promise<void> {
|
||||||
|
let inputs: any = {};
|
||||||
|
formData.forEach((value, key) => {
|
||||||
|
if (key.includes("page")) {
|
||||||
|
inputs.page = value;
|
||||||
|
} else if (key.includes("size")) {
|
||||||
|
inputs.size = value;
|
||||||
|
} else if (key.includes("orderBy")) {
|
||||||
|
inputs.orderBy = value;
|
||||||
|
} else if (key.includes("orderType")) {
|
||||||
|
inputs.orderType = value;
|
||||||
|
} else if (key.includes("section")) {
|
||||||
|
} else if (key.includes("ACTION_ID")) {
|
||||||
|
} else {
|
||||||
|
inputs.query = {
|
||||||
|
...inputs.query,
|
||||||
|
[key]: value,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const queryEncrypt = await encryptQuery(inputs);
|
||||||
|
redirect(
|
||||||
|
`/${formData.get("section")}?q=${queryEncrypt.replaceAll(" ", "+")}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
"use server";
|
||||||
|
import React from "react";
|
||||||
|
import { RefreshCcw } from "lucide-react";
|
||||||
|
import Pagination from "./pagination";
|
||||||
|
import TableComponent from "./table";
|
||||||
|
import {
|
||||||
|
decryptQuery,
|
||||||
|
defaultPagination,
|
||||||
|
handleFormSubmission,
|
||||||
|
} from "@/apicalls/test";
|
||||||
|
import MainBodyWithHeader from "@/components/defaultLayout/MainBodyWithHeader";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
|
const DashboardPage = async ({ searchParams }: { searchParams: any }) => {
|
||||||
|
const searchParamsKeys = await searchParams;
|
||||||
|
if (!searchParamsKeys?.q) {
|
||||||
|
const defaultURL = await defaultPagination();
|
||||||
|
console.log(defaultURL);
|
||||||
|
redirect(`/accounts?q=${defaultURL}`);
|
||||||
|
}
|
||||||
|
const queryEncrypt = await decryptQuery(
|
||||||
|
searchParamsKeys?.q.replace(/ /g, "+")
|
||||||
|
);
|
||||||
|
const accountPage = (
|
||||||
|
<div className="p-4 overflow-hidden">
|
||||||
|
<h1 className="text-2xl font-bold mb-4 ">Dashboard</h1>
|
||||||
|
<form
|
||||||
|
action={handleFormSubmission}
|
||||||
|
className="bg-white p-4 rounded-lg shadow"
|
||||||
|
>
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<p>Welcome to your dashboard</p>
|
||||||
|
<h1>{JSON.stringify(queryEncrypt)}</h1>
|
||||||
|
<input type="hidden" name="section" value="accounts" readOnly />
|
||||||
|
<TableComponent inputHeaders={queryEncrypt?.query || {}} />
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||||
|
>
|
||||||
|
<RefreshCcw size={16} />
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
<Pagination
|
||||||
|
size={parseInt(queryEncrypt?.size || "10")}
|
||||||
|
page={parseInt(queryEncrypt?.page || "1")}
|
||||||
|
orderBy={queryEncrypt?.orderBy || "id"}
|
||||||
|
orderType={queryEncrypt?.orderType || "asc"}
|
||||||
|
totalPage={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
return <MainBodyWithHeader children={accountPage} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardPage;
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
const Pagination = ({
|
||||||
|
page,
|
||||||
|
totalPage,
|
||||||
|
size,
|
||||||
|
orderBy,
|
||||||
|
orderType,
|
||||||
|
}: {
|
||||||
|
page: number;
|
||||||
|
size: number;
|
||||||
|
totalPage: number;
|
||||||
|
orderBy: string;
|
||||||
|
orderType: string;
|
||||||
|
}) => {
|
||||||
|
const [pageInfo, setPageInfo] = React.useState(page);
|
||||||
|
|
||||||
|
function increasePageInfo(event: any) {
|
||||||
|
if (pageInfo < totalPage) {
|
||||||
|
setPageInfo(pageInfo + 1);
|
||||||
|
} else {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function decreasePageInfo(event: any) {
|
||||||
|
if (pageInfo > 1) {
|
||||||
|
setPageInfo(pageInfo - 1);
|
||||||
|
} else {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between mt-4">
|
||||||
|
<button
|
||||||
|
className="bg-gray-200 w-[150px] text-gray-700 p-2 rounded hover:bg-gray-300"
|
||||||
|
onClick={(event) => decreasePageInfo(event)}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-gray-600">Page</span>
|
||||||
|
<input
|
||||||
|
readOnly
|
||||||
|
name="page"
|
||||||
|
value={pageInfo}
|
||||||
|
className="w-16 border p-1 rounded text-center"
|
||||||
|
/>
|
||||||
|
<span className="text-gray-600">of</span>
|
||||||
|
<span className="font-bold">{totalPage}</span>
|
||||||
|
Size:{" "}
|
||||||
|
<input
|
||||||
|
name="size"
|
||||||
|
defaultValue={size}
|
||||||
|
className="w-16 border p-1 rounded text-center"
|
||||||
|
/>
|
||||||
|
orderBy:
|
||||||
|
<input
|
||||||
|
name="orderBy"
|
||||||
|
defaultValue={orderBy}
|
||||||
|
className="w-16 border p-1 rounded text-center"
|
||||||
|
/>
|
||||||
|
orderType:
|
||||||
|
<input
|
||||||
|
name="orderType"
|
||||||
|
defaultValue={orderType}
|
||||||
|
className="w-16 border p-1 rounded text-center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={(event) => increasePageInfo(event)}
|
||||||
|
className="bg-gray-200 w-[150px] text-gray-700 p-2 rounded hover:bg-gray-300"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Pagination;
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
interface TableComponentInterFace {
|
||||||
|
inputHeaders: any;
|
||||||
|
}
|
||||||
|
const TableComponent: React.FC<TableComponentInterFace> = ({
|
||||||
|
inputHeaders,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||||
|
{Object.entries(inputHeaders).map(([key, value]) => (
|
||||||
|
<div key={key}>
|
||||||
|
<h1>{key} : </h1>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="border p-2 rounded"
|
||||||
|
placeholder={`${key}`}
|
||||||
|
name={key}
|
||||||
|
defaultValue={String(value) || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TableComponent;
|
||||||
|
|
@ -1,15 +1,10 @@
|
||||||
"use server";
|
"use server";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import MainBodyWithHeader from "@/components/defaultLayout/MainBodyWithHeader";
|
||||||
|
import BuildChildComponent from "@/pages/Build/Build";
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
return (
|
return <MainBodyWithHeader children={<BuildChildComponent />} />;
|
||||||
<div className="container mx-auto px-4 py-8">
|
|
||||||
<h1 className="text-2xl font-bold mb-4">Building Management</h1>
|
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
|
||||||
<p>Building page content goes here</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Page;
|
export default Page;
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
"use server";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
const DashboardPage = () => {
|
|
||||||
return (
|
|
||||||
<div className="p-4">
|
|
||||||
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
|
|
||||||
<div className="grid gap-4">
|
|
||||||
<div className="bg-white p-4 rounded-lg shadow">
|
|
||||||
<p>Welcome to your dashboard</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DashboardPage;
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
interface TableComponentInterFace {
|
||||||
|
inputHeaders: any;
|
||||||
|
}
|
||||||
|
const TableComponent: React.FC<TableComponentInterFace> = ({
|
||||||
|
inputHeaders,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||||
|
{Object.entries(inputHeaders).map(([key, value]) => (
|
||||||
|
<div key={key}>
|
||||||
|
<h1>{key} : </h1>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="border p-2 rounded"
|
||||||
|
placeholder={`${key}`}
|
||||||
|
name={key}
|
||||||
|
defaultValue={String(value) || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TableComponent;
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
"use server";
|
||||||
|
import React, { FC, ReactNode } from "react";
|
||||||
|
|
||||||
|
interface MainBodyWithHeaderProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MainBodyWithHeader: FC<MainBodyWithHeaderProps> = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-row min-h-screen">
|
||||||
|
<div className="basis-1/6 flex flex-col min-h-screen bg-slate-200">
|
||||||
|
<div className="basis-1/4 p-4 border-2 border-black">01</div>
|
||||||
|
<div className="basis-3/4 p-4 border-2 border-black">02</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col basis-5/6 min-h-screen bg-slate-300">
|
||||||
|
<div className="sticky top-0 bg-slate-500 text-white p-4 z-10 border-2 border-black">
|
||||||
|
<h1>Sticky Header</h1>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 border-2 border-black p-6 overflow-y-auto">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainBodyWithHeader;
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
"use server";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const BuildChildComponent = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1>Building Management</h1>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-4">
|
||||||
|
<p>Building page content goes here</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-4">
|
||||||
|
<p>More content goes here</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-4">
|
||||||
|
<p>Building page content goes here</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-4">
|
||||||
|
<p>More content goes here</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-4">
|
||||||
|
<p>Building page content goes here</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-4">
|
||||||
|
<p>More content goes here</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-4">
|
||||||
|
<p>Even more content goes here</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BuildChildComponent;
|
||||||
Loading…
Reference in New Issue