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={JobPosting.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 rowClick="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,53 @@
+import React from 'react';
+import {
+    Show,
+    SimpleShowLayout,
+    TextField,
+    DateField,
+    UrlField,
+} from 'react-admin';
+import { PropTypes } from 'prop-types';
+import DisplayAddress from '../toolbox/DispayAddress';
+
+const JobPostingTitle = ({ record }) => {
+    return <span>{record ? `${record.title}` : ''}</span>;
+};
+JobPostingTitle.propTypes = {
+    record: PropTypes.shape({
+        title: PropTypes.string.isRequired,
+    }),
+};
+
+export const JobPostingShow = (props) => {
+    return (
+        <Show title={<JobPostingTitle />} {...props}>
+            <SimpleShowLayout>
+                <TextField source="title" label="titre" />
+                <UrlField source="url" label="URL de l'offre" />
+                <TextField source="employmentType" label="Type de contrat" />
+                <TextField
+                    source="hiringOrganization.name"
+                    label="Proposé par"
+                />
+                <TextField
+                    source="experienceRequirements"
+                    label="Expérience requise"
+                />
+                <TextField source="skills" label="compétences demandées" />
+
+                <DateField
+                    source="jobStartDate"
+                    label="Date de prise de poste"
+                />
+                <DateField source="validThrough" label="Valide jusqu'au" />
+                <DisplayAddress
+                    label="adresse"
+                    streetAddress="hiringOrganization.address.streetAddress"
+                    postalCode="hiringOrganization.address.postalCode"
+                    addressLocality="hiringOrganization.address.addressLocality"
+                    addressCountry="hiringOrganization.address.addressCountry"
+                />
+            </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 rowClick="show">
                 <OrganizationLogo label="Logo" />
                 <TextField source="name" label="Nom de l'entreprise" />
                 <OrganizationAddress label="Adresse" />

apps/admin/src/organization/Show.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Show, SimpleShowLayout, TextField, UrlField } from 'react-admin';
+import { PropTypes } from 'prop-types';
+import DisplayAddress from '../toolbox/DispayAddress';
+
+// Todo :
+const OrganizationName = ({ record }) => {
+    return <span>{record ? `${record.name}` : ''}</span>;
+};
+OrganizationName.propTypes = {
+    record: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+    }),
+};
+
+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 addlabel="false" source="name" />
+                <TextField label="Email principal" source="email" />
+                <UrlField label="Url du site web" source="url" />
+                <TextField label="Présentation" source="description" />
+
+                <DisplayAddress
+                    label="adresse"
+                    streetAddress="address.streetAddress"
+                    postalCode="address.postalCode"
+                    addressLocality="address.addressLocality"
+                    addressCountry="address.addressCountry"
+                />
+            </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' },
 };

apps/admin/src/toolbox/DispayAddress.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import pure from 'recompose/pure';
+import Typography from '@material-ui/core/Typography';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+
+const AddressField = ({
+    className,
+    record = {},
+    streetAddress,
+    postalCode,
+    addressLocality,
+    addressCountry,
+    ...rest
+}) => {
+    const street = get(record, streetAddress);
+    const postal = get(record, postalCode);
+    const locality = get(record, addressLocality);
+    const country = get(record, addressCountry);
+
+    return (
+        <Typography
+            component="span"
+            variant="body2"
+            className={className}
+            {...rest}
+        >
+            {street} <br />
+            {postal} {locality} {country}
+        </Typography>
+    );
+};
+
+AddressField.propTypes = {
+    className: PropTypes.string,
+    addressCountry: PropTypes.string,
+    addressLocality: PropTypes.string,
+    postalCode: PropTypes.string,
+    streetAddress: PropTypes.string,
+    record: PropTypes.object,
+};
+
+// wat? TypeScript looses the displayName if we don't set it explicitly
+AddressField.displayName = 'AddressField';
+
+const EnhancedAddressField = pure(AddressField);
+
+EnhancedAddressField.defaultProps = {
+    addLabel: true,
+};
+
+EnhancedAddressField.propTypes = {
+    ...Typography.propTypes,
+};
+
+EnhancedAddressField.displayName = 'EnhancedAddressField';
+
+export default EnhancedAddressField;