Skip to content

Commit 4891a5d

Browse files
erwanMarmelaberwanMarmelab
committed
Update demo -> WIP
1 parent b72b1f6 commit 4891a5d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+810
-647
lines changed

‎packages/demo/.env.local-example

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
VITE_SUPABASE_URL=http://localhost:54321
22
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
33
SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
4+
# SKIP_PREFLIGHT_CHECK=true

‎packages/demo/index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<meta name="theme-color" content="#000000" />
1010
<link rel="manifest" href="./manifest.json" />
1111
<link rel="shortcut icon" href="./favicon.ico" />
12-
<title>Posters Galore Administration</title>
12+
<title>Atomic CRM</title>
1313
<style>
1414
body {
1515
margin: 0;
@@ -121,6 +121,5 @@
121121
</div>
122122
</div>
123123
</body>
124-
<script>window.global = window</script>
125124
<script type="module" src="/src/index.tsx"></script>
126125
</html>

‎packages/demo/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "2.1.0",
44
"private": true,
55
"dependencies": {
6+
"@hello-pangea/dnd": "^16.3.0",
67
"@mui/icons-material": "^5.0.1",
78
"@mui/material": "^5.0.2",
89
"@nivo/bar": "^0.80.0",
@@ -13,10 +14,10 @@
1314
"faker": "~5.4.0",
1415
"lodash": "~4.17.5",
1516
"prop-types": "^15.7.2",
16-
"ra-data-fakerest": "^4.0.0",
17+
"ra-data-fakerest": "^4.12.0",
1718
"ra-supabase": "^2.1.0",
1819
"react": "^18.2.0",
19-
"react-admin": "^4.0.0",
20+
"react-admin": "^4.12.0",
2021
"react-beautiful-dnd": "^13.0.0",
2122
"react-dom": "^18.2.0",
2223
"react-error-boundary": "^3.1.4",
@@ -37,7 +38,7 @@
3738
"@types/react-dom": "^18.0.0",
3839
"source-map-explorer": "^2.0.0",
3940
"tsx": "^3.12.2",
40-
"typescript": "^4.4.0",
41+
"typescript": "^5.1.3",
4142
"web-vitals": "^1.0.1"
4243
},
4344
"scripts": {

‎packages/demo/src/Header.tsx

+2-8
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,8 @@ const Header = () => {
6666
/>
6767
</Tabs>
6868
</Box>
69-
<Box display="flex">
70-
<LoadingIndicator
71-
sx={{
72-
'& .RaLoadingIndicator-loader': {
73-
marginTop: 2,
74-
},
75-
}}
76-
/>
69+
<Box display="flex" alignItems="center">
70+
<LoadingIndicator />
7771
<UserMenu>
7872
<Logout />
7973
</UserMenu>

‎packages/demo/src/Layout.tsx

+18-20
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1-
import React, { HtmlHTMLAttributes } from 'react';
1+
import React, { Suspense, HtmlHTMLAttributes } from 'react';
22
import { CssBaseline, Container } from '@mui/material';
3-
import { CoreLayoutProps } from 'react-admin';
3+
import { CoreLayoutProps, CheckForApplicationUpdate } from 'react-admin';
44
import { ErrorBoundary } from 'react-error-boundary';
55

6-
import { Error } from 'react-admin';
6+
import { Error, Loading } from 'react-admin';
77
import Header from './Header';
88

9-
const Layout = (props: LayoutProps) => {
10-
const { children } = props;
11-
return (
12-
<>
13-
<CssBaseline />
14-
<Header />
15-
<Container sx={{ maxWidth: { xl: 1280 } }}>
16-
<main id="main-content">
17-
{/* @ts-ignore */}
18-
<ErrorBoundary FallbackComponent={Error}>
19-
{children}
20-
</ErrorBoundary>
21-
</main>
22-
</Container>
23-
</>
24-
);
25-
};
9+
const Layout = ({ children }: LayoutProps) => (
10+
<>
11+
<CssBaseline />
12+
<Header />
13+
<Container sx={{ maxWidth: { xl: 1280 } }}>
14+
<main id="main-content">
15+
{/* @ts-ignore */}
16+
<ErrorBoundary FallbackComponent={Error}>
17+
<Suspense fallback={<Loading />}>{children}</Suspense>
18+
</ErrorBoundary>
19+
</main>
20+
</Container>
21+
<CheckForApplicationUpdate interval={30 * 1000} />
22+
</>
23+
);
2624

2725
export interface LayoutProps
2826
extends CoreLayoutProps,

‎packages/demo/src/authProvider.ts

+23-14
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,28 @@ import { supabaseAuthProvider } from 'ra-supabase';
22
import { supabase } from './supabase';
33

44
export const authProvider = supabaseAuthProvider(supabase, {
5-
getIdentity: async user => {
6-
const { data, error } = await supabase
7-
.from('sales')
8-
.select('id, first_name, last_name')
9-
.ilike('email', user.email as string)
10-
.single();
5+
// getIdentity: async user => {
6+
// const { data, error } = await supabase
7+
// .from('sales')
8+
// .select('id, first_name, last_name')
9+
// .ilike('email', user.email as string)
10+
// .single();
1111

12-
if (!data || error) {
13-
throw new Error();
14-
}
15-
return {
16-
id: data.id,
17-
fullName: `${data.first_name} ${data.last_name}`,
18-
};
19-
},
12+
// if (!data || error) {
13+
// throw new Error();
14+
// }
15+
// return {
16+
// id: data.id,
17+
// fullName: `${data.first_name} ${data.last_name}`,
18+
// };
19+
// },
20+
getIdentity: async () => Promise.resolve(),
21+
checkAuth: async () => Promise.resolve(),
22+
getPermissions: async () => Promise.resolve(),
23+
handleCallback: async () => Promise.resolve(),
24+
checkError: async () => Promise.resolve(),
25+
logout: async () => Promise.resolve(),
26+
resetPassword: async () => Promise.resolve(),
27+
setPassword: async () => Promise.resolve(),
28+
login: async () => Promise.resolve(),
2029
});

‎packages/demo/src/companies/CompanyEdit.tsx

+17-26
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,20 @@ import { CompanyForm } from './CompanyForm';
77
import { CompanyAside } from './CompanyAside';
88
import { LogoField } from './LogoField';
99

10-
export const CompanyEdit = () => {
11-
return (
12-
<Edit
13-
aside={<CompanyAside link="show" />}
14-
actions={false}
15-
redirect="show"
16-
// Remove the fts (full text search) column as it is a generated one
17-
// see https://www.postgresql.org/docs/current/ddl-generated-columns.html
18-
transform={({ fts, ...record }) => record}
19-
>
20-
<Form>
21-
<CardContent>
22-
<Stack direction="row">
23-
<Avatar sx={{ mt: 1 }}>
24-
<LogoField />
25-
</Avatar>
26-
<Box ml={2} flex="1" maxWidth={796}>
27-
<CompanyForm />
28-
</Box>
29-
</Stack>
30-
</CardContent>
31-
<Toolbar />
32-
</Form>
33-
</Edit>
34-
);
35-
};
10+
export const CompanyEdit = () => (
11+
<Edit aside={<CompanyAside link="show" />} actions={false} redirect="show">
12+
<Form>
13+
<CardContent>
14+
<Stack direction="row">
15+
<Avatar sx={{ mt: 1 }}>
16+
<LogoField />
17+
</Avatar>
18+
<Box ml={2} flex="1" maxWidth={796}>
19+
<CompanyForm />
20+
</Box>
21+
</Stack>
22+
</CardContent>
23+
<Toolbar />
24+
</Form>
25+
</Edit>
26+
);

‎packages/demo/src/companies/CompanyListFilter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import { sectors } from './sectors';
1717
export const CompanyListFilter = () => {
1818
const { identity } = useGetIdentity();
1919
return (
20-
<Box width="13em" minWidth="13em" order={-1} mr={2} mt={7}>
21-
<FilterLiveSearch source="fts@fts" />
20+
<Box width="13em" minWidth="13em" order={-1} mr={2} mt={5}>
21+
<FilterLiveSearch hiddenLabel />
2222

2323
<FilterList label="Size" icon={<BusinessIcon />}>
2424
{sizes.map(size => (

‎packages/demo/src/companies/LogoField.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { useRecordContext } from 'react-admin';
33
import { Box } from '@mui/material';
44

5-
import { Company, Contact } from '../types';
5+
import { Company } from '../types';
66

77
const sizeInPixel = {
88
medium: 42,
@@ -14,7 +14,7 @@ export const LogoField = ({
1414
}: {
1515
size?: 'small' | 'medium';
1616
}) => {
17-
const record = useRecordContext<Company | Contact>();
17+
const record = useRecordContext<Company>();
1818
if (!record) return null;
1919
return (
2020
<Box

‎packages/demo/src/contacts/Avatar.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Contact } from '../types';
77
export const Avatar = (props: { record?: Contact }) => {
88
const record = useRecordContext<Contact>(props);
99
if (!record) return null;
10+
1011
return (
1112
<MuiAvatar src={record.avatar}>
1213
{record.first_name.charAt(0)}

‎packages/demo/src/contacts/ContactAside.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,7 @@ export const ContactAside = ({ link = 'edit' }: { link?: 'edit' | 'show' }) => {
9393
<FunctionField<Sale>
9494
source="last_name"
9595
render={record =>
96-
record
97-
? `${record.first_name} ${record.last_name}`
98-
: ''
96+
`${record.first_name} ${record.last_name}`
9997
}
10098
/>
10199
</ReferenceField>

‎packages/demo/src/contacts/ContactEdit.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import { ContactAside } from './ContactAside';
88
import { Contact } from '../types';
99

1010
export const ContactEdit = () => (
11-
// Remove the fts (full text search) column as it is a generated one
12-
// see https://www.postgresql.org/docs/current/ddl-generated-columns.html
13-
<EditBase redirect="show" transform={({ fts, ...record }) => record}>
11+
<EditBase redirect="show">
1412
<ContactEditContent />
1513
</EditBase>
1614
);

‎packages/demo/src/contacts/ContactInputs.tsx

+30-41
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,39 @@ import {
44
ReferenceInput,
55
AutocompleteInput,
66
BooleanInput,
7-
required,
87
} from 'react-admin';
98
import { Divider, Box } from '@mui/material';
109

11-
export const ContactInputs = () => {
12-
return (
13-
<Box flex="1" mt={-1}>
14-
<Box display="flex" width={430}>
15-
<TextInput
16-
source="first_name"
17-
validate={required()}
18-
fullWidth
19-
/>
20-
<Spacer />
21-
<TextInput source="last_name" validate={required()} fullWidth />
22-
</Box>
23-
<Box display="flex" width={430}>
24-
<TextInput source="title" fullWidth />
25-
<Spacer />
26-
<ReferenceInput source="company_id" reference="companies">
27-
<AutocompleteInput
28-
optionText="name"
29-
fullWidth
30-
validate={required()}
31-
/>
32-
</ReferenceInput>
33-
</Box>
34-
<Divider />
35-
<Box mt={2} width={430}>
36-
<TextInput source="email" fullWidth />
37-
</Box>
38-
<Box display="flex" width={430}>
39-
<TextInput source="phone_number1" fullWidth />
40-
<Spacer />
41-
<TextInput source="phone_number2" fullWidth />
42-
</Box>
43-
<Divider />
44-
<Box mt={2} width={430}>
45-
<TextInput source="background" multiline fullWidth />
46-
<TextInput source="avatar" fullWidth />
47-
<BooleanInput source="has_newsletter" />
48-
</Box>
10+
export const ContactInputs = () => (
11+
<Box flex="1" mt={-1}>
12+
<Box display="flex" width={430}>
13+
<TextInput source="first_name" fullWidth />
14+
<Spacer />
15+
<TextInput source="last_name" fullWidth />
4916
</Box>
50-
);
51-
};
17+
<Box display="flex" width={430}>
18+
<TextInput source="title" fullWidth />
19+
<Spacer />
20+
<ReferenceInput source="company_id" reference="companies">
21+
<AutocompleteInput optionText="name" fullWidth />
22+
</ReferenceInput>
23+
</Box>
24+
<Divider />
25+
<Box mt={2} width={430}>
26+
<TextInput source="email" fullWidth />
27+
</Box>
28+
<Box display="flex" width={430}>
29+
<TextInput source="phone_number1" fullWidth />
30+
<Spacer />
31+
<TextInput source="phone_number2" fullWidth />
32+
</Box>
33+
<Divider />
34+
<Box mt={2} width={430}>
35+
<TextInput source="background" multiline fullWidth />
36+
<TextInput source="avatar" fullWidth />
37+
<BooleanInput source="has_newsletter" />
38+
</Box>
39+
</Box>
40+
);
5241

5342
const Spacer = () => <Box width={20} component="span" />;

‎packages/demo/src/contacts/ContactList.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,6 @@ const ContactListContent = () => {
7777
</ListItemAvatar>
7878
<ListItemText
7979
primary={`${contact.first_name} ${contact.last_name}`}
80-
secondaryTypographyProps={{
81-
component: 'div',
82-
}}
8380
secondary={
8481
<>
8582
{contact.title} at{' '}
@@ -91,7 +88,8 @@ const ContactListContent = () => {
9188
<TextField source="name" />
9289
</ReferenceField>{' '}
9390
{contact.nb_notes &&
94-
`- ${contact.nb_notes} notes `}
91+
`- ${contact.nb_notes} notes`}
92+
&nbsp;&nbsp;
9593
<TagsList />
9694
</>
9795
}

0 commit comments

Comments
 (0)