add list and show to the Person entity
This commit is contained in:
@@ -1,20 +1,18 @@
|
||||
import { Card, CardContent } from "@mui/material";
|
||||
import { Title, useDataProvider } from "react-admin";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Card, CardContent, Typography } from "@mui/material";
|
||||
import { Title } from "react-admin";
|
||||
|
||||
export const AdminDashboard = () => {
|
||||
const dataProvider = useDataProvider();
|
||||
const { data } = useQuery({
|
||||
queryKey: ["dashboard"],
|
||||
queryFn: () => dataProvider.person(),
|
||||
});
|
||||
|
||||
console.log(data);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card sx={{ mt: 5 }}>
|
||||
<Title title="Welcome to the administration" />
|
||||
<CardContent>Lorem ipsum sic dolor amet...</CardContent>
|
||||
<CardContent>
|
||||
<Typography>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
|
||||
impedit, temporibus? Amet dolor fuga hic libero molestiae nemo
|
||||
perferendis quas quis repellendus voluptas? Aliquid doloremque, est
|
||||
labore odit optio similique.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,5 +3,6 @@ import { Menu } from "react-admin";
|
||||
export const AdminMenu = () => (
|
||||
<Menu>
|
||||
<Menu.DashboardItem />
|
||||
<Menu.ResourceItem name="person" />
|
||||
</Menu>
|
||||
);
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export { AdminMenu } from './admin-menu';
|
||||
export { AdminDashboard } from './admin-dashboard';
|
||||
export * from './resources';
|
||||
|
||||
1
src/admin-components/resources/index.ts
Normal file
1
src/admin-components/resources/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './person';
|
||||
@@ -0,0 +1,31 @@
|
||||
import React, { FC } from 'react';
|
||||
import { isObject } from "lodash";
|
||||
import { useRecordContext } from 'react-admin';
|
||||
import { Chip, Stack } from '@mui/material';
|
||||
|
||||
interface FieldProps {
|
||||
source: string;
|
||||
}
|
||||
|
||||
export const ArrayField: FC<FieldProps> = ({ source }) => {
|
||||
const record = useRecordContext();
|
||||
const objects = record?.[source];
|
||||
|
||||
if (!objects) return "";
|
||||
|
||||
return (
|
||||
<Stack direction="row" gap={1}>
|
||||
{objects.map((currentObject: string, key: number) => {
|
||||
if (isObject(currentObject)) {
|
||||
return (
|
||||
<Chip key={`${key}-people`} size="small" label={currentObject.name} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Chip key={`${key}-people`} size="small" label={currentObject} />
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { ArrayField } from "./array-field.tsx";
|
||||
3
src/admin-components/resources/person/index.ts
Normal file
3
src/admin-components/resources/person/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { PersonList } from './list.tsx';
|
||||
export { PersonShow } from './show.tsx';
|
||||
export * from './components';
|
||||
103
src/admin-components/resources/person/list.tsx
Normal file
103
src/admin-components/resources/person/list.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import React, { Fragment, useEffect, useState } from "react";
|
||||
import {
|
||||
BooleanField,
|
||||
Datagrid,
|
||||
isEmpty,
|
||||
ListContextProvider,
|
||||
ListToolbar,
|
||||
Pagination,
|
||||
TextField,
|
||||
Title,
|
||||
TopToolbar,
|
||||
useDataProvider,
|
||||
WrapperField,
|
||||
} from "react-admin";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ArrayField } from "./components";
|
||||
import { TextField as MuiTextField } from "@mui/material";
|
||||
|
||||
export const PersonList = () => {
|
||||
const [page, setPage] = useState(1);
|
||||
const [perPage, setPerPage] = useState(25);
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const dataProvider = useDataProvider();
|
||||
const { data, isPending, refetch } = useQuery({
|
||||
queryKey: ["personList", page, perPage, firstName],
|
||||
queryFn: () => {
|
||||
const httpParams = new URLSearchParams({
|
||||
page: `${page - 1}`,
|
||||
size: `${perPage}`,
|
||||
...(isEmpty(firstName)
|
||||
? {}
|
||||
: { filters: `firstName::like_ignore_case::${firstName}` }),
|
||||
});
|
||||
|
||||
return dataProvider.personList(httpParams);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
await refetch();
|
||||
})();
|
||||
}, [page, perPage]);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Title title="Users" />
|
||||
<ListToolbar
|
||||
actions={
|
||||
<TopToolbar>
|
||||
<FilterName setFirstName={setFirstName} />
|
||||
</TopToolbar>
|
||||
}
|
||||
/>
|
||||
<Datagrid
|
||||
resource="person"
|
||||
data={data?.content}
|
||||
total={data?.totalElements}
|
||||
isPending={isPending}
|
||||
sort={undefined}
|
||||
bulkActionButtons={false}
|
||||
>
|
||||
<TextField source="firstName" />
|
||||
<TextField source="lastName" />
|
||||
<TextField source="email" label="Email User ID" />
|
||||
<TextField source="id" label="User ID" />
|
||||
<TextField source="status" />
|
||||
<BooleanField source="userAccess" label="Access to the Platform" />
|
||||
<WrapperField label="Company">
|
||||
<ArrayField source="parties" />
|
||||
</WrapperField>
|
||||
<WrapperField label="Programs assigned">
|
||||
<ArrayField source="assignedPrograms" />
|
||||
</WrapperField>
|
||||
<WrapperField label="Functions assigned">
|
||||
<ArrayField source="assignedFunctions" />
|
||||
</WrapperField>
|
||||
</Datagrid>
|
||||
<ListContextProvider
|
||||
value={{
|
||||
page,
|
||||
perPage,
|
||||
total: data?.totalElements ?? 0,
|
||||
setPage,
|
||||
setPerPage,
|
||||
}}
|
||||
>
|
||||
<Pagination />
|
||||
</ListContextProvider>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const FilterName = ({ setFirstName }) => {
|
||||
return (
|
||||
<MuiTextField
|
||||
label="First name"
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFirstName(event.target.value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
114
src/admin-components/resources/person/show.tsx
Normal file
114
src/admin-components/resources/person/show.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import React from "react";
|
||||
import {
|
||||
BooleanField,
|
||||
DateField,
|
||||
Labeled,
|
||||
Show,
|
||||
SimpleShowLayout,
|
||||
TextField,
|
||||
} from "react-admin";
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Stack,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { ArrayField } from "@admin";
|
||||
|
||||
export const PersonShow = () => {
|
||||
return (
|
||||
<Show>
|
||||
<SimpleShowLayout>
|
||||
<Card sx={{ border: 1 }}>
|
||||
<CardHeader title="General info" />
|
||||
<CardContent>
|
||||
<Stack
|
||||
sx={{
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
}}
|
||||
direction="row"
|
||||
columnGap={5}
|
||||
rowGap={2}
|
||||
>
|
||||
<Labeled label="Name">
|
||||
<Stack direction="row" gap={1}>
|
||||
<TextField sx={{ textTransform: "" }} source="title" />
|
||||
<TextField source="firstName" />
|
||||
<TextField source="lastName" />
|
||||
</Stack>
|
||||
</Labeled>
|
||||
<Labeled label="E-mail address">
|
||||
<TextField source="email" />
|
||||
</Labeled>
|
||||
<Labeled label="User ID">
|
||||
<TextField source="id" />
|
||||
</Labeled>
|
||||
<Labeled label="Access to the Platform">
|
||||
<BooleanField source="userAccess" />
|
||||
</Labeled>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{ color: "rgba(255, 255, 255, 0.7)" }}
|
||||
variant="caption"
|
||||
>
|
||||
Company
|
||||
</Typography>
|
||||
<ArrayField source="parties" />
|
||||
</Box>
|
||||
<Box sx={{ flexBasis: "100%" }} />
|
||||
<Labeled label="Access to the Platform">
|
||||
<BooleanField source="userAccess" />
|
||||
</Labeled>
|
||||
<Labeled label="Position">
|
||||
<TextField source="jobPosition" emptyText={"\u2014"} />
|
||||
</Labeled>
|
||||
<Labeled label="Phone number">
|
||||
<TextField source="phoneNumber" emptyText={"\u2014"} />
|
||||
</Labeled>
|
||||
<Labeled label="Mobile number">
|
||||
<TextField source="mobileNumber" emptyText={"\u2014"} />
|
||||
</Labeled>
|
||||
<Box />
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card sx={{ border: 1 }}>
|
||||
<CardHeader title="Platform info" />
|
||||
<CardContent>
|
||||
<Stack
|
||||
sx={{ justifyContent: "flex-start", alignItems: "center" }}
|
||||
direction="row"
|
||||
gap={5}
|
||||
>
|
||||
<Labeled label="Last changes date">
|
||||
<DateField
|
||||
source="updateDate"
|
||||
locales="fr-CA"
|
||||
emptyText={"\u2014"}
|
||||
/>
|
||||
</Labeled>
|
||||
<Labeled label="User Access Active From">
|
||||
<DateField
|
||||
source="userAccessFrom"
|
||||
locales="fr-CA"
|
||||
emptyText={"\u2014"}
|
||||
/>
|
||||
</Labeled>
|
||||
<Labeled label="User Access Active To">
|
||||
<DateField
|
||||
source="userAccessTo"
|
||||
locales="fr-CA"
|
||||
emptyText={"\u2014"}
|
||||
/>
|
||||
</Labeled>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</SimpleShowLayout>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user