andi/Practice-1
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

changed the structure a little bit - & add some margin to comment's list

Browse Source
This commit is contained in:
László Lang
2025-01-28 10:56:05 +01:00
parent 4d43c53035
commit 504332b105
15 changed files with 69 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/AlbumEdit.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { Edit, ReferenceInput, SimpleForm, TextInput } from "react-admin";
export const AlbumEdit = () => (
<Edit>
<SimpleForm>
<ReferenceInput source="userId" reference="users" />
<TextInput source="id" />
<TextInput source="title" />
</SimpleForm>
</Edit>
);

14
src/components/CommentEdit.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Edit, ReferenceInput, SimpleForm, TextInput } from 'react-admin';
export const CommentEdit = () => (
<Edit>
<SimpleForm>
<ReferenceInput source="postId" reference="posts" />
<TextInput source="id" />
<TextInput source="name" />
<TextInput source="email" />
<TextInput source="body" />
</SimpleForm>
</Edit>
);

13
src/components/CommentShow.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { EmailField, ReferenceField, Show, SimpleShowLayout, TextField,} from 'react-admin';
export const CommentShow = () => (
<Show>
<SimpleShowLayout>
<ReferenceField source="postId" reference="posts" />
<TextField source="id" />
<TextField source="name" />
<EmailField source="email" />
<TextField source="body" />
</SimpleShowLayout>
</Show>
);

10
src/components/MyAppBar.tsx Normal file
View File

@@ -0,0 +1,10 @@
import {AppBar} from "react-admin";
import {yellow} from "@mui/material/colors";
export const MyAppBar = () => (
<AppBar
sx = {{
backgroundColor: yellow[500],
}}
/>
);

8
src/components/MyLayout.tsx Normal file
View File

@@ -0,0 +1,8 @@
import {Layout} from 'react-admin';
import {MyAppBar} from "./MyAppBar.tsx";
export const MyLayout = ({ children } ) => (
<Layout appBar={MyAppBar} >
{children}
</Layout>
);

14
src/components/PhotoEdit.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Edit, ReferenceInput, SimpleForm, TextInput } from 'react-admin';
export const PhotoEdit = () => (
<Edit>
<SimpleForm>
<ReferenceInput source="albumId" reference="albums" />
<TextInput source="id" />
<TextInput source="title" />
<TextInput source="url" />
<TextInput source="thumbnailUrl" />
</SimpleForm>
</Edit>
);

13
src/components/PostEdit.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { Edit, ReferenceInput, SimpleForm, TextInput } from 'react-admin';
export const PostEdit = () => (
<Edit>
<SimpleForm>
<ReferenceInput source="userId" reference="users" />
<TextInput source="id" />
<TextInput source="title" />
<TextInput source="body" />
</SimpleForm>
</Edit>
);

12
src/components/PostList.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Datagrid, List, ReferenceField, TextField,} from 'react-admin';
export const PostList = () => (
<List>
<Datagrid>
<ReferenceField source="userId" reference="users" />
<TextField source="id" />
<TextField source="title" />
<TextField source="body" />
</Datagrid>
</List>
);

31
src/components/PostShow.tsx Normal file
View File

@@ -0,0 +1,31 @@
import {
Datagrid,
EmailField,
ReferenceField,
ReferenceManyField,
Show,
SimpleShowLayout,
TextField,
} from 'react-admin';
import { Box } from '@mui/material';
export const PostShow = () => (
<Show>
<SimpleShowLayout>
<ReferenceField source="userId" reference="users" />
<TextField source="id" />
<TextField source="title" />
<TextField source="body" />
<Box sx={{ mt: 5 }}>
<ReferenceManyField target="postId" reference="comments" sort={{ field: 'id', order: 'ASC' }}>
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<EmailField source="email" />
<TextField source="body" />
</Datagrid>
</ReferenceManyField>
</Box>
</SimpleShowLayout>
</Show>
);

16
src/components/users/UserEdit.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { Edit, SimpleForm, TextInput } from 'react-admin';
export const UserEdit = () => (
<Edit>
<SimpleForm>
<TextInput source="id" />
<TextInput source="name" />
<TextInput source="username" />
<TextInput source="email" />
<TextInput source="address.street" />
<TextInput source="phone" />
<TextInput source="website" />
<TextInput source="company.name" />
</SimpleForm>
</Edit>
);

16
src/components/users/UserShow.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { EmailField, Show, SimpleShowLayout, TextField } from 'react-admin';
export const UserShow = () => (
<Show>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="name" />
<TextField source="username" />
<EmailField source="email" />
<TextField source="address.street" />
<TextField source="phone" />
<TextField source="website" />
<TextField source="company.name" />
</SimpleShowLayout>
</Show>
);

29
src/components/users/Users.tsx Normal file
View File

@@ -0,0 +1,29 @@
// in src/Users.tsx
import { useMediaQuery } from "@mui/material";
import { List, SimpleList, Datagrid, TextField, EmailField, } from "react-admin";
export const UserList = () => {
const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
return (
<List>
{isSmall ? (
<SimpleList
primaryText={(record) => record.name}
secondaryText={(record) => record.username}
tertiaryText={(record) => record.email}
/>
) : (
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<TextField source="username" />
<EmailField source="email" />
<TextField source="address.street" />
<TextField source="phone" />
<TextField source="website" />
<TextField source="company.name" />
</Datagrid>
)}
</List>
);
};