Match details/read/edit components with new api call

public/locales/fr/translation.json

@@ -202,7 +202,8 @@
       "noAccess": "Vous n'avez pas les droits pour accéder à cette ressource.",
       "geometry": "Géométrie",
       "true": "Oui",
-      "false": "Non"
+      "false": "Non",
+      "other": "Autre"
     }
   },
   "help": {

src/modules/CRUD/components/DataTable/DataTable.js

@@ -31,7 +31,7 @@ class DataTable extends React.Component {
 
   loadData = () => {
     const { getFeaturesList } = this.props;
-    const { layer: { id } } = this.getView();
+    const { layer: { id } = {} } = this.getView();
     if (!id) return;
     getFeaturesList(id);
     this.setState({
@@ -87,7 +87,7 @@ class DataTable extends React.Component {
       onHoverCell = () => null,
     } = this.props;
 
-    const { layer: { name }, name: displayName = name } = this.getView();
+    const { layer: { name } = {}, name: displayName = name } = this.getView();
 
     const { data, columns, loading } = this.state;
 

src/modules/CRUD/components/Details/Details.js

@@ -14,8 +14,12 @@ import './styles.scss';
 
 class Details extends React.Component {
   static propTypes = {
-    view: PropTypes.shape({}).isRequired,
-    feature: PropTypes.shape({}),
+    view: PropTypes.shape({
+      formSchema: PropTypes.shape({}),
+    }),
+    feature: PropTypes.shape({
+      properties: PropTypes.shape({}),
+    }),
     fetchFeature: PropTypes.func.isRequired,
     match: PropTypes.shape({
       params: PropTypes.shape({
@@ -32,7 +36,12 @@ class Details extends React.Component {
   };
 
   static defaultProps = {
-    feature: {},
+    view: {
+      formSchema: {},
+    },
+    feature: {
+      properties: {},
+    },
     match: {
       params: {
         id: undefined,
@@ -85,7 +94,7 @@ class Details extends React.Component {
         },
       },
       feature,
-      feature: { properties } = {},
+      feature: { properties },
       detailsHasLoaded,
     } = this.props;
 
@@ -98,7 +107,7 @@ class Details extends React.Component {
     }
 
     if (
-      properties !== prevProperties
+      (properties !== prevProperties)
       || prevParamId !== paramId
       || prevParamAction !== paramAction
     ) {
@@ -123,29 +132,39 @@ class Details extends React.Component {
     }
   }
 
-  setSchema = () => {
+  buildSchema = (schemaProperties, properties = {}) => {
     const {
       match: { params: { id: paramId } },
-      feature: { properties },
+    } = this.props;
+    return Object.keys(schemaProperties).reduce((list, prop) => ({
+      ...list,
+      [prop]: {
+        ...schemaProperties[prop],
+        ...(schemaProperties[prop].type === 'object')
+          ? { properties: this.buildSchema(schemaProperties[prop].properties, properties[prop]) }
+          : {},
+        ...(paramId !== ACTION_CREATE && properties[prop] && schemaProperties[prop].type !== 'object')
+          ? { default: properties[prop] }
+          : {},
+      },
+    }), {});
+  }
+
+  setSchema = () => {
+    const {
+      feature: { properties = {} },
       view: { formSchema: schema = {} },
     } = this.props;
-    if (Object.keys(schema).length) {
-      this.setState({
-        schema: {
-          type: 'object',
-          ...schema,
-          properties: Object.keys(schema.properties).reduce((list, prop) => ({
-            ...list,
-            [prop]: {
-              ...schema.properties[prop],
-              ...(properties && paramId !== ACTION_CREATE)
-                ? { default: properties[prop] }
-                : {},
-            },
-          }), {}),
-        },
-      });
+    if (!Object.keys(properties).length && !Object.keys(schema).length) {
+      return;
     }
+    this.setState({
+      schema: {
+        type: 'object',
+        ...schema,
+        properties: this.buildSchema(schema.properties, properties),
+      },
+    });
   }
 
   renderContent = () => {
@@ -164,10 +183,11 @@ class Details extends React.Component {
           updateControls={updateControls}
           action={paramAction || paramId}
           view={view}
+          feature={feature}
         />
       );
     }
-    return <Read schema={schema} view={view} feature={feature} />;
+    return <Read feature={feature} />;
   }
 
   onSizeChange = () => {
@@ -189,7 +209,6 @@ class Details extends React.Component {
       toast.displayError(t('CRUD.details.errorNoFeature'));
       return <Redirect to={generateURI('layer', { layer: paramLayer })} />;
     }
-
     const isLoading = !Object.keys(feature).length && paramId !== ACTION_CREATE;
 
     return (

src/modules/CRUD/components/Details/DownloadButtons/DownloadButtons.js

@@ -2,27 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { AnchorButton, ButtonGroup } from '@blueprintjs/core';
 
-const DownloadButtons = ({ files, id, ...rest }) => id && files.length > 0 && (
+const DownloadButtons = ({ documents, ...rest }) => documents.length > 0 && (
   <ButtonGroup {...rest}>
-    {files.map(({ name, url }) => (
-      <AnchorButton key={url} icon="download" href={url.replace('{id}', id)}>{name}</AnchorButton>
+    {documents.map(({ download_url: url, template_file: file, template_name: name }) => (
+      <AnchorButton key={file} icon="download" href={url}>{name}</AnchorButton>
     ))}
   </ButtonGroup>
 );
 
 DownloadButtons.propTypes = {
-  files: PropTypes.arrayOf(
+  documents: PropTypes.arrayOf(
     PropTypes.shape({
-      name: PropTypes.string,
-      url: PropTypes.string,
+      template_name: PropTypes.string,
+      download_url: PropTypes.string,
+      template_file: PropTypes.string,
     }),
   ),
-  id: PropTypes.number,
 };
 
 DownloadButtons.defaultProps = {
-  files: [],
-  id: '',
+  documents: [],
 };
 
 export default DownloadButtons;

src/modules/CRUD/components/Details/DownloadButtons/DownloadButtons.test.js

@@ -10,14 +10,15 @@ jest.mock('@blueprintjs/core', () => ({
 
 
 const props = {
-  files: [{
-    name: 'FileName',
-    url: 'path/to/file/{id}',
+  documents: [{
+    template_name: 'FileName',
+    download_url: 'path/to/file/',
+    template_file: 'file1.pdf',
   }, {
-    name: 'FileName2',
-    url: 'path/to/file2/{id}',
+    template_name: 'FileName2',
+    download_url: 'path/to/file2/',
+    template_file: 'file2.pdf',
   }],
-  id: 3,
 };
 
 

src/modules/CRUD/components/Details/Edit/Edit.js

@@ -34,7 +34,9 @@ function updateSchemaPropertiesValues (properties, formData) {
 class Edit extends React.Component {
   static propTypes = {
     map: PropTypes.shape({}),
-    feature: PropTypes.shape({}),
+    feature: PropTypes.shape({
+      title: PropTypes.string,
+    }),
     saveFeature: PropTypes.func.isRequired,
     view: PropTypes.shape({}).isRequired,
     layerPaint: PropTypes.shape({}).isRequired,
@@ -54,7 +56,9 @@ class Edit extends React.Component {
 
   static defaultProps = {
     map: {},
-    feature: {},
+    feature: {
+      title: undefined,
+    },
     displayAddFeature: true,
     displayChangeFeature: true,
     updateControls () {},
@@ -284,6 +288,7 @@ class Edit extends React.Component {
       paramId,
       displayAddFeature,
       displayChangeFeature,
+      feature: { title },
     } = this.props;
 
     if (
@@ -294,7 +299,6 @@ class Edit extends React.Component {
       return (<Redirect to={generateURI('layer', { layer: paramLayer })} />);
     }
 
-    const { name: { default: title } = {} } = properties || {};
     const mainTitle = action === ACTION_CREATE
       ? t('CRUD.details.create', { layer: displayName })
       : (title || t('CRUD.details.noFeature'));

src/modules/CRUD/components/Details/Edit/Edit.test.js

@@ -55,7 +55,9 @@ beforeEach(() => {
   props = {
     settings: {},
     map: {},
-    feature: {},
+    feature: {
+      title: 'Title of the feature',
+    },
     saveFeature: jest.fn(),
     updateControls: jest.fn(),
     view: {
@@ -76,6 +78,12 @@ beforeEach(() => {
       properties: {
         city: { type: 'boolean', title: 'City' },
         name: { type: 'text', default: 'Title' },
+        group: {
+          type: 'object',
+          properties: {
+            name: { type: 'string', title: 'Group name' },
+          },
+        },
       },
     },
     history: {
@@ -294,6 +302,12 @@ it('should update schema', () => {
         city: { title: 'City', type: 'boolean' },
         geometryFromMap: { default: false, title: 'CRUD.details.geometry', type: 'boolean' },
         name: { default: 'Title', type: 'text' },
+        group: {
+          type: 'object',
+          properties: {
+            name: { type: 'string', title: 'Group name' },
+          },
+        },
       },
     },
   });

src/modules/CRUD/components/Details/Edit/__snapshots__/Edit.test.js.snap

@@ -16,7 +16,7 @@ exports[`Snapshots should render correctly 1`] = `
     <h2
       className="details__title"
     >
-      Title
+      Title of the feature
     </h2>
   </div>
   <div
@@ -41,7 +41,7 @@ exports[`Snapshots should render correctly without schema props 1`] = `
     <h2
       className="details__title"
     >
-      CRUD.details.noFeature
+      Title of the feature
     </h2>
   </div>
   <div