Skip to content

Commit

Permalink
page create ts in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@indpurvesh
indpurvesh committed Jun 9, 2024
1 parent 0d2b37b commit 2575505
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 86 deletions.
86 changes: 86 additions & 0 deletions react-admin/src/pages/page/PageComponentTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import {useTranslation} from "react-i18next";
import {getFormattedDate} from "../../lib/common";
import IComponentModel from "../../types/component/IComponentModel";

interface ISelectedComponentFunction {
(e: React.MouseEvent, id: string): void
}

interface IPageComponentProps {
components: Array<IComponentModel>;
componentSelected: ISelectedComponentFunction
}

function PageComponentTable(props: IPageComponentProps) {
const [t] = useTranslation("global");
return (
<table className="min-w-full bg-white shadow-md rounded">
<thead>
<tr className="bg-gray-700 text-white">
<th className="py-3 px-4 rounded-l font-semibold text-left">
{t("common.id")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.name")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.identifier")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.created_at")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.updated_at")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.created_by")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.updated_by")}
</th>
<th className="py-3 px-4 rounded-r font-semibol text-left">
{t("common.action")}
</th>
</tr>
</thead>
<tbody className="">
{props.components.map((component) => {
return (
<tr key={component.id} className="border-b">
<td className="py-3 px-4">{component.id}</td>
<td className="py-3 px-4">{component.name}</td>
<td className="py-3 px-4">
{component.identifier}
</td>
<td className="py-3 px-4">
{getFormattedDate(component.created_at)}
</td>
<td className="py-3 px-4">
{getFormattedDate(component.updated_at)}
</td>
<td className="py-3 px-4">
{component.created_by}
</td>
<td className="py-3 px-4">
{component.updated_by}
</td>
<td className="py-3 px-4">
<button
type="button"
className="font-medium text-primary-600 hover:text-primary-800"
onClick={(e) =>
props.componentSelected(e, component.id)
}
>
{t("common.select")}
</button>
</td>
</tr>
);
})}
</tbody>
</table>
)
}

export default PageComponentTable
108 changes: 28 additions & 80 deletions react-admin/src/pages/page/PageCreate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import _ from "lodash";
import {useComponentAll} from "./hooks/useComponentAll";
import {useStorePage} from "./hooks/useStorePage";
import {useTranslation} from "react-i18next";
import {useForm} from "react-hook-form";
import {joiResolver} from "@hookform/resolvers/joi";
import {PageCreateSchema} from "./schemas/page.create.schema"
import PageComponentTable from "./PageComponentTable";

function PageCreate() {
const [isComponentTableModalOpen, setIsComponentTableModalOpen] =
Expand All @@ -15,6 +19,17 @@ function PageCreate() {
const [page, setPage] = useState({});
const [t] = useTranslation("global");

const {
control,
register,
handleSubmit,
formState: {errors},
setValue,
getValues
} = useForm({
resolver: joiResolver(PageCreateSchema, {allowUnknown: true}),
});

const component_all_api_response = useComponentAll();
const components = _.get(component_all_api_response, "data.data", []);

Expand Down Expand Up @@ -164,10 +179,10 @@ function PageCreate() {
);
};

const handleSubmit = async (e) => {
e.preventDefault();

mutate(page);
const submitHandler = async (data) => {
// e.preventDefault();
console.log(data)
// mutate(page);
};

return (
Expand All @@ -180,22 +195,20 @@ function PageCreate() {
</h1>
{/*<p className="text-gray-600 dark:text-gray-300 mb-6">Use a permanent address where you can*/}
{/* receive mail.</p>*/}
<form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit(submitHandler)}>
<div className="mb-4">
<input
type="text"
<InputField
autofocus={true}
placeholder="Name"
value={_.get(page, "name", "")}
onChange={(e) => pageNameOnChange(e.target.value)}
register={register("name")}
className="border p-2 rounded w-full"
/>
</div>
<div className="mb-4">
<input
<InputField
type="text"
placeholder="Identifier"
value={_.get(page, "identifier", "")}
onChange={(e) => pageIdentifierOnChange(e.target.value)}
register={register("identifier")}
className="border p-2 rounded w-full"
/>
</div>
Expand All @@ -214,8 +227,8 @@ function PageCreate() {
>
<PlusIcon className="text-primary-500 h-6 w-6"/>
<span className="text-sm ml-1 text-primary-500">
Add Component
</span>
Add Component
</span>
</button>
</div>

Expand All @@ -224,72 +237,7 @@ function PageCreate() {
modal_header="Select Component"
modal_body={
<div className="text-primary-500">
<table className="min-w-full bg-white shadow-md rounded">
<thead>
<tr className="bg-gray-700 text-white">
<th className="py-3 px-4 rounded-l font-semibold text-left">
{t("common.id")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.name")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.identifier")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.created_at")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.updated_at")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.created_by")}
</th>
<th className="py-3 px-4 font-semibol text-left">
{t("common.updated_by")}
</th>
<th className="py-3 px-4 rounded-r font-semibol text-left">
{t("common.action")}
</th>
</tr>
</thead>
<tbody className="">
{components.map((component) => {
return (
<tr key={component.id} className="border-b">
<td className="py-3 px-4">{component.id}</td>
<td className="py-3 px-4">{component.name}</td>
<td className="py-3 px-4">
{component.identifier}
</td>
<td className="py-3 px-4">
{getFormattedDate(component.created_at)}
</td>
<td className="py-3 px-4">
{getFormattedDate(component.updated_at)}
</td>
<td className="py-3 px-4">
{component.created_by}
</td>
<td className="py-3 px-4">
{component.updated_by}
</td>
<td className="py-3 px-4">
<button
type="button"
className="font-medium text-primary-600 hover:text-primary-800"
onClick={(e) =>
componentSelected(e, component.id)
}
>
{t("common.select")}
</button>
</td>
</tr>
);
})}
</tbody>
</table>
<PageComponentTable components={components} componentSelected={componentSelected} />
</div>
}
isOpen={isComponentTableModalOpen}
Expand Down
10 changes: 10 additions & 0 deletions react-admin/src/pages/page/schemas/page.create.schema.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import Joi from 'joi';

export const PageCreateSchema = Joi.object({
name : Joi.string().required().messages({
'string.empty': 'Name is required.',
}),
identifier : Joi.string().required().messages({
'string.empty': 'Identifier is required.',
})
});
12 changes: 6 additions & 6 deletions react-admin/src/pages/role/schemas/role.create.schema.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Joi from 'joi';

export const RoleCreateSchema = Joi.object({
// name : Joi.string().required().messages({
// 'string.empty': 'Name is required.',
// }),
// identifier : Joi.string().required().messages({
// 'string.empty': 'Identifier is required.',
// })
name : Joi.string().required().messages({
'string.empty': 'Name is required.',
}),
identifier : Joi.string().required().messages({
'string.empty': 'Identifier is required.',
})
});
9 changes: 9 additions & 0 deletions react-admin/src/types/component/IComponentModel.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export default interface IComponentModel {
id: string;
name: string;
identifier: string;
created_at: string;
updated_at: string;
created_by: string;
updated_by: string;
}

0 comments on commit 2575505

Please sign in to comment.