['', undefined].includes(value);
+const emptyStringNullOrUndef = value => ['', null, undefined].includes(value);
const isHTML = value => {
const div = document.createElement('div');
@@ -30,7 +30,7 @@ const formattedProp = ({ value, t }) => {
: t('CRUD.details.false');
}
- if (emptyStringOrUndef(value)) {
+ if (emptyStringNullOrUndef(value)) {
return t(NO_FEATURE);
}
@@ -53,59 +53,107 @@ const formattedProp = ({ value, t }) => {
return value;
};
-const Read = ({
- t,
- match: { params: { layer: paramLayer, id: paramId } },
- schema: { title: schemaTitle, properties = {} },
- displayViewFeature,
- view: { templates, uiSchema: { 'ui:order': order } = {} },
- feature: { id },
-}) => {
- if (!displayViewFeature) {
- toast.displayError(t('CRUD.details.noAccess'));
- return (
);
+
+class Read extends React.Component {
+ state = {
+ tabs: [],
+ }
+
+ componentDidMount () {
+ this.generatesTabs();
}
- const { name: { default: title } = {} } = properties;
- const hasProperties = !!Object.keys(properties).length;
+ componentDidUpdate ({
+ feature: { display_properties: prevDisplayProperties },
+ }) {
+ const {
+ feature: { display_properties: displayProperties },
+ } = this.props;
+ if (prevDisplayProperties !== displayProperties) {
+ this.generatesTabs();
+ }
+ }
- const orderedProperties = orderProperties(Object.keys(properties), order);
+ generatesTabs = () => {
+ const {
+ feature: { display_properties: displayProperties },
+ } = this.props;
+ this.setState({
+ tabs: Object.keys(displayProperties)
+ .map(tabs => ({ ...displayProperties[tabs] }))
+ .sort((a, b) => a.order - b.order),
+ });
+ }
- return (
-
-
-
{title || t(NO_FEATURE)}
-
-
- {hasProperties && (
-
- {schemaTitle && (
-
{schemaTitle}
- )}
-
- {orderedProperties.map(prop => (
- -
- {properties[prop].title || prop}
-
- {formattedProp({ value: properties[prop].default, t })}
-
-
- ))}
-
+ renderPanel = properties => {
+ const { t } = this.props;
+ return (
+
+ {Object.keys(properties).map(name => (
+ -
+ {name}
+
+ {formattedProp({ value: properties[name], t })}
+
+
+ ))}
+
+ );
+ }
+
+ render () {
+ const {
+ t,
+ match: { params: { layer: paramLayer, id: paramId } },
+ location: { hash },
+ displayViewFeature,
+ feature: { title: featureTitle, documents },
+ } = this.props;
+
+ if (!displayViewFeature) {
+ toast.displayError(t('CRUD.details.noAccess'));
+ return (
);
+ }
+
+ const { tabs } = this.state;
+ const hasProperties = !!tabs.length;
+
+ return (
+
+
+
{featureTitle || t(NO_FEATURE)}
+
- )}
-
-
- );
-};
+ {hasProperties && (
+
+
+ {tabs.map(({ title, slug = 'other', properties }) => (
+ {title || t('CRUD.details.other')}}
+ panel={this.renderPanel(properties)}
+ />
+ ))}
+
+
+
+ )}
+
+
+ );
+ }
+}
Read.propTypes = {
match: PropTypes.shape({
@@ -114,15 +162,14 @@ Read.propTypes = {
id: PropTypes.string,
}),
}),
- schema: PropTypes.shape({
- properties: PropTypes.shape({}),
+ location: PropTypes.shape({
+ hash: PropTypes.string,
}),
displayViewFeature: PropTypes.bool,
- view: PropTypes.shape({
- templates: PropTypes.array,
- }),
feature: PropTypes.shape({
- id: PropTypes.number,
+ title: PropTypes.string,
+ documents: PropTypes.array,
+ display_properties: PropTypes.shape({}),
}),
t: PropTypes.func,
};
@@ -134,15 +181,14 @@ Read.defaultProps = {
id: undefined,
},
},
- schema: {
- properties: {},
- },
+ location: PropTypes.shape({
+ hash: undefined,
+ }),
displayViewFeature: true,
- view: {
- templates: [],
- },
feature: {
- id: undefined,
+ title: '',
+ documents: [],
+ display_properties: {},
},
t: text => text,
};
diff --git a/src/modules/CRUD/components/Details/Read/Read.test.js b/src/modules/CRUD/components/Details/Read/Read.test.js
index d6e7f9a1b..160c2457b 100644
--- a/src/modules/CRUD/components/Details/Read/Read.test.js
+++ b/src/modules/CRUD/components/Details/Read/Read.test.js
@@ -4,8 +4,20 @@ import renderer from 'react-test-renderer';
import Read from './Read';
+jest.mock('@blueprintjs/core', () => {
+ const Tabs = ({ children }) =>
;
+ const Tab = ({ title, panel }) =>
{title}{panel};
+ Tabs.Expander = () => null;
+
+ return {
+ Tabs,
+ Tab,
+ };
+});
+
jest.mock('react-router-dom', () => ({
Redirect: () =>
Error because Redirect
,
+ Link: ({ children }) =>
{children},
}));
jest.mock('../../../../../utils/toast', () => ({
@@ -25,62 +37,38 @@ jest.mock('../Actions', () => () => (
Actions
));
const props = {
t: text => text,
match: { params: { layer: 'layerFoo', id: 'layerId' } },
- schema: {
- title: 'Foo Title',
- properties: {
- city: {
- type: 'string',
- title: 'Ville',
- default: 'Agen, Lot-et-Garonne, Nouvelle-Aquitaine',
- },
- name: {
- type: 'string',
- title: 'Nom',
- default: 'Cathedrale Saint-Caprais',
- },
- description: {
- type: 'string',
- title: 'Description',
- default: '',
- },
- numero: {
- type: 'integer',
- title: 'Numéro',
- default: 2,
- },
- validation: {
- type: 'boolean',
- title: 'Validation',
- default: true,
- },
- available: {
- type: 'boolean',
- title: 'Validation',
- default: false,
+ displayViewFeature: true,
+ location: {
+ hash: '',
+ },
+ feature: {
+ title: 'Title of the feature',
+ display_properties: {
+ 'Group 1': {
+ title: 'Name of the group',
+ slug: 'slug-group',
+ order: 1,
+ pictogram: null,
+ properties: {
+ Numéro: 2,
+ Validation: true,
+ Available: false,
+ Array: [1, 2, 3],
+ EmptyValue: ' ',
+ },
},
- labels: {
- type: 'array',
- items: {
- enum: [
- 'VPAH',
- 'PM 1979',
- 'PM 1981',
- 'PM 1991',
- 'PM 1992',
- ],
- type: 'string',
+ __default__: {
+ title: '',
+ pictogram: null,
+ order: 9999,
+ properties: {
+ 'key without value': null,
+ 'Hello foo bar': 'Value hello foo bar',
+ Contact: 'Foo contact',
},
- title: 'Labels',
- uniqueItems: true,
- default: ['PM 1979', 'PM 1981'],
},
},
},
- displayViewFeature: true,
- layer: {},
- feature: {
- id: undefined,
- },
};
diff --git a/src/modules/CRUD/components/Details/Read/__snapshots__/Read.test.js.snap b/src/modules/CRUD/components/Details/Read/__snapshots__/Read.test.js.snap
index 1a4162b05..88a4a0089 100644
--- a/src/modules/CRUD/components/Details/Read/__snapshots__/Read.test.js.snap
+++ b/src/modules/CRUD/components/Details/Read/__snapshots__/Read.test.js.snap
@@ -16,7 +16,7 @@ exports[`should render correctly 1`] = `
- Cathedrale Saint-Caprais
+ Title of the feature
DownloadButtons
@@ -25,125 +25,157 @@ exports[`should render correctly 1`] = `
-
- Foo Title
-
-
- -
-
- Ville
-
-
-
-
-
- -
-
- Nom
-
-
-
-
-
- -
-
- Description
-
-
- CRUD.details.noFeature
+
+ -
+
+ Name of the group
-
- -
-
- Numéro
-
-
- 2
-
-
- -
-
- Validation
-
-
- CRUD.details.true
-
+
-
+
+ Numéro
+
+
+ 2
+
+
+ -
+
+ Validation
+
+
+ CRUD.details.true
+
+
+ -
+
+ Available
+
+
+ CRUD.details.false
+
+
+ -
+
+ Array
+
+
+ 1, 2, 3
+
+
+ -
+
+ EmptyValue
+
+
+
+
+
+
- -
-
- Validation
-
-
- CRUD.details.false
+
-
+
+ CRUD.details.other
-
- -
-
- Labels
-
-
- PM 1979, PM 1981
-
+
-
+
+ key without value
+
+
+ CRUD.details.noFeature
+
+
+ -
+
+ Hello foo bar
+
+
+
+
+
+ -
+
+ Contact
+
+
+
+
+
+
diff --git a/src/modules/CRUD/services/features.js b/src/modules/CRUD/services/features.js
index 723eaa5b6..005c18ee6 100644
--- a/src/modules/CRUD/services/features.js
+++ b/src/modules/CRUD/services/features.js
@@ -1,19 +1,19 @@
import Api from '@terralego/core/modules/Api';
export const fetchFeaturesList = layerId =>
- Api.request(`layer/${layerId}/feature/`);
+ Api.request(`crud/layer/${layerId}/features/`);
export const fetchFeature = (layerId, featureId) =>
- Api.request(`layer/${layerId}/feature/${featureId}/`);
+ Api.request(`crud/layer/${layerId}/features/${featureId}/`);
const createFeature = (layerId, body) =>
- Api.request(`layer/${layerId}/feature/`, { method: 'POST', body });
+ Api.request(`crud/layer/${layerId}/features/`, { method: 'POST', body });
const updateFeature = (layerId, featureId, body) =>
- Api.request(`layer/${layerId}/feature/${featureId}/`, { method: 'PUT', body });
+ Api.request(`crud/layer/${layerId}/features/${featureId}/`, { method: 'PUT', body });
export const deleteFeature = (layerId, featureId) =>
- Api.request(`layer/${layerId}/feature/${featureId}/`, { method: 'DELETE' });
+ Api.request(`crud/layer/${layerId}/features/${featureId}/`, { method: 'DELETE' });
export const saveFeature = (layerId, featureId, body) => (
featureId
diff --git a/src/modules/CRUD/services/features.test.js b/src/modules/CRUD/services/features.test.js
index d1ff8c2fa..5df08c336 100644
--- a/src/modules/CRUD/services/features.test.js
+++ b/src/modules/CRUD/services/features.test.js
@@ -8,27 +8,27 @@ jest.mock('@terralego/core/modules/Api', () => ({
it('should fetch list of feature', () => {
fetchFeaturesList('foo');
- expect(Api.request).toHaveBeenCalledWith('layer/foo/feature/');
+ expect(Api.request).toHaveBeenCalledWith('crud/layer/foo/features/');
});
it('should fetch a feature', () => {
fetchFeature('foo', '1337');
- expect(Api.request).toHaveBeenCalledWith('layer/foo/feature/1337/');
+ expect(Api.request).toHaveBeenCalledWith('crud/layer/foo/features/1337/');
});
it('should delete a feature', () => {
deleteFeature('foo', '1337');
- expect(Api.request).toHaveBeenCalledWith('layer/foo/feature/1337/', { method: 'DELETE' });
+ expect(Api.request).toHaveBeenCalledWith('crud/layer/foo/features/1337/', { method: 'DELETE' });
});
it('should create a feature', () => {
saveFeature('foo', false, { bar: 'bar' });
- expect(Api.request).toHaveBeenCalledWith('layer/foo/feature/', { method: 'POST', body: { bar: 'bar' } });
+ expect(Api.request).toHaveBeenCalledWith('crud/layer/foo/features/', { method: 'POST', body: { bar: 'bar' } });
});
it('should update a feature', () => {
saveFeature('foo', '1337', { bar: 'bar' });
- expect(Api.request).toHaveBeenCalledWith('layer/foo/feature/1337/', { method: 'PUT', body: { bar: 'bar' } });
+ expect(Api.request).toHaveBeenCalledWith('crud/layer/foo/features/1337/', { method: 'PUT', body: { bar: 'bar' } });
});
it('should get bounds', () => {