Ajouter des pages Show à React-admin

apps/admin/src/App.js

@@ -46,6 +46,7 @@ const App = () => (
                 }
                 icon={Organization.icon}
                 option={Organization.option}
+                show={Organization.show}
             />,
             <Resource
                 key="job-posting"
@@ -57,6 +58,7 @@ const App = () => (
                 }
                 icon={JobPosting.icon}
                 option={JobPosting.option}
+                show={Organization.show}
             />,
         ]}
     </Admin>

apps/admin/src/job-posting/List.js

@@ -70,7 +70,7 @@ export const JobPostingList = ({ permissions, ...props }) => {
             bulkActionButtons={false}
             title="Liste des Offres d'Emploi"
         >
-            <Datagrid>
+            <Datagrid rowClik="show">
                 <TextField source="title" label="Titre de l'offre" />
                 <TextField source="employmentType" label="Type de contrat" />
                 <ReferenceField

apps/admin/src/job-posting/Show.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Show, SimpleShowLayout, TextField, DateField } from 'react-admin';
+
+export const JobPostingShow = (props) => {
+    return (
+        <Show title="Vue de l'offre d'emploi" {...props}>
+            <SimpleShowLayout>
+                <TextField source="title" label="Filtre par titre" />
+                <TextField source="employmentType" label="Type de contrat" />
+                <TextField
+                    source="hiringOrganizationName"
+                    label="Nom d'entreprise"
+                />
+                <TextField
+                    source="hiringOrganizationAddressLocality"
+                    label="Ville de l'entreprise"
+                />
+                <DateField
+                    source="hiringOrganizationPostalCode"
+                    label="Code postal de l'entreprise"
+                />
+
+                <DateField source="jobStartDate" label="Commence avant" />
+                <DateField source="validThrough" label="Valide jusqu'au" />
+            </SimpleShowLayout>
+        </Show>
+    );
+};

apps/admin/src/job-posting/index.js

@@ -1,5 +1,5 @@
 import JobPostingIcon from '@material-ui/icons/EventSeat';
-
+import { JobPostingShow } from './Show';
 import { JobPostingList } from './List';
 import { JobPostingEdit } from './Edit';
 import { JobPostingCreate } from './Create';
@@ -16,5 +16,6 @@ export default {
     edit: JobPostingEdit,
     icon: JobPostingIcon,
     list: JobPostingList,
+    show: JobPostingShow,
     options: { label: "Offres d'emploi" },
 };

apps/admin/src/organization/List.js

@@ -61,7 +61,7 @@ export const OrganizationList = ({ permissions, ...props }) => {
             bulkActionButtons={false}
             title="Liste des Entreprises"
         >
-            <Datagrid>
+            <Datagrid rowClik="show">
                 <OrganizationLogo label="Logo" />
                 <TextField source="name" label="Nom de l'entreprise" />
                 <OrganizationAddress label="Adresse" />

apps/admin/src/organization/Show.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Show, SimpleShowLayout, TextField } from 'react-admin';
+import { PropTypes } from 'prop-types';
+
+// Todo :
+const OrganizationName = ({ record }) => {
+    return <span>{record ? `"${record.name}"` : ''}</span>;
+};
+OrganizationName.propTypes = {
+    record: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+    }),
+};
+
+const DisplayAddress = ({ record }) => {
+    return record && record.address ? (
+        <p>
+            {record.address.streetAddress} <br />
+            {record.address.postalCode} {record.address.addressLocality}{' '}
+            {record.address.addressCountry}
+        </p>
+    ) : (
+        `Pas d'addresse pour "${record.name}"`
+    );
+};
+DisplayAddress.propTypes = {
+    record: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        address: PropTypes.shape({
+            addressCountry: PropTypes.string,
+            addressLocality: PropTypes.string,
+            postalCode: PropTypes.string,
+            streetAddress: PropTypes.string,
+        }),
+    }),
+};
+
+const OrganizationLogo = ({ record }) => {
+    return record && record.image ? (
+        <img src={record.image} height="50" alt={record.name} />
+    ) : (
+        `Pas d'image pour "${record.name}"`
+    );
+};
+OrganizationLogo.propTypes = {
+    record: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        image: PropTypes.string,
+    }),
+};
+
+export const OrganizationShow = (props) => {
+    return (
+        // to add :
+        <Show title={<OrganizationName />} {...props}>
+            <SimpleShowLayout>
+                <OrganizationLogo label="logo" />
+                <TextField label="Nom de l'entreprise" source="name" />
+                <TextField label="Email principal" source="email" />
+                <TextField label="Url du site web" source="url" />
+                <TextField label="Présentation" source="description" />
+                {<DisplayAddress />}
+
+                <TextField
+                    label="Nom du contact des offres d'emploi"
+                    source="contact_name"
+                />
+                <TextField
+                    label="Email du contact des offres d'emploi"
+                    source="contact_email"
+                />
+                <TextField
+                    label="Téléphone du contact des offres d'emploi"
+                    source="contact_phone"
+                />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+OrganizationShow.propTypes = {
+    address: PropTypes.object,
+};

apps/admin/src/organization/index.js

@@ -3,11 +3,13 @@ import OrganizationIcon from '@material-ui/icons/People';
 import { OrganizationList } from './List';
 import { OrganizationEdit } from './Edit';
 import { OrganizationCreate } from './Create';
+import { OrganizationShow } from './Show';
 
 export default {
     create: OrganizationCreate,
     edit: OrganizationEdit,
     icon: OrganizationIcon,
     list: OrganizationList,
+    show: OrganizationShow,
     options: { label: 'Entreprises' },
 };