diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index c11cae25..3c63c105 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -580,7 +580,11 @@ "title": "Embed title", "title-help": "", "src": "Address", - "src-help": "Embed address (iframe)" + "src-help": "Embed address (iframe)", + "preview": "Preview", + "fullscreen": "Fullscreen", + "width": "Width (px)", + "height": "Height (px)" } } }, diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index c8168181..841d7c44 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -632,7 +632,11 @@ "title": "Titre de l'inclusion", "title-help": "", "src": "Adresse", - "src-help": "Adresse de la page à inclure (iframe)" + "src-help": "Adresse de la page à inclure (iframe)", + "preview": "Prévisualiser", + "fullscreen": "Plein écran", + "width": "Largeur (px)", + "height": "Hauteur (px)" } } }, diff --git a/src/components/BPIcon.js b/src/components/BPIcon.js new file mode 100644 index 00000000..c1085f48 --- /dev/null +++ b/src/components/BPIcon.js @@ -0,0 +1,71 @@ +import React from 'react'; +import { Icon } from '@blueprintjs/core'; + +export const graphIcons = [ + 'chart', + 'curved-range-chart', + 'database', + 'diagram-tree', + 'doughnut-chart', + 'flow-branch', + 'flow-end', + 'flow-linear', + 'flow-review', + 'flow-review-branch', + 'flows', + 'form', + 'full-stacked-chart', + 'gantt-chart', + 'graph', + 'grid', + 'grouped-bar-chart', + 'heat-grid', + 'heatmap', + 'horizontal-bar-chart', + 'horizontal-bar-chart-asc', + 'horizontal-bar-chart-desc', + 'layout', + 'layout-auto', + 'layout-balloon', + 'layout-circle', + 'layout-grid', + 'layout-group-by', + 'layout-hierarchy', + 'layout-linear', + 'layout-skew-grid', + 'layout-sorted-clusters', + 'many-to-many', + 'many-to-one', + 'one-to-many', + 'one-to-one', + 'pie-chart', + 'polygon-filter', + 'regression-chart', + 'scatter-plot', + 'series-add', + 'series-configuration', + 'series-derived', + 'series-filtered', + 'series-search', + 'stacked-chart', + 'step-chart', + 'timeline-area-chart', + 'timeline-bar-chart', + 'timeline-line-chart', + 'trending-down', + 'trending-up', + 'vertical-bar-chart-asc', + 'vertical-bar-chart-desc', + 'waterfall-chart', +].sort(); + +const BPIcon = ({ icon, displayIconName, style = {}, ...rest }) => + (displayIconName ? ( + <> + {icon} + + ) : ( + + )); + +export default BPIcon; diff --git a/src/modules/RA/DataLayer/components/tabs/EmbedTab/EmbedConfigField.js b/src/modules/RA/DataLayer/components/tabs/EmbedTab/EmbedConfigField.js index 92f7ff09..39725468 100644 --- a/src/modules/RA/DataLayer/components/tabs/EmbedTab/EmbedConfigField.js +++ b/src/modules/RA/DataLayer/components/tabs/EmbedTab/EmbedConfigField.js @@ -17,17 +17,27 @@ const EmbedConfigField = ({ label, ...rest }) => { return ( <> - {translate(label)} + + {translate(label)} + - {error && error.length > 0 && error.flatMap(err => - err && Object.entries(err).map(([key, value]) => ( - {key}: {translate(value)})))} - - - - - - + {error?.length > 0 && + error.flatMap( + err => + err && + Object.entries(err).map(([key, value]) => ( + + {key}: {translate(value)} + + )), + )} +
+ + + + + +
); }; diff --git a/src/modules/RA/DataLayer/components/tabs/EmbedTab/EmbedItemInput.js b/src/modules/RA/DataLayer/components/tabs/EmbedTab/EmbedItemInput.js index 8c5ee41d..288d8c93 100644 --- a/src/modules/RA/DataLayer/components/tabs/EmbedTab/EmbedItemInput.js +++ b/src/modules/RA/DataLayer/components/tabs/EmbedTab/EmbedItemInput.js @@ -1,99 +1,109 @@ -import React from 'react'; -import { SelectInput, TextInput } from 'react-admin'; +import React, { useEffect } from 'react'; +import { BooleanInput, NumberInput, SelectInput, TextInput, useTranslate } from 'react-admin'; -import { Icon } from '@blueprintjs/core'; - -const bpIcons = [ - 'chart', - 'curved-range-chart', - 'database', - 'diagram-tree', - 'doughnut-chart', - 'flow-branch', - 'flow-end', - 'flow-linear', - 'flow-review', - 'flow-review-branch', - 'flows', - 'form', - 'full-stacked-chart', - 'gantt-chart', - 'graph', - 'grid', - 'grouped-bar-chart', - 'heat-grid', - 'heatmap', - 'horizontal-bar-chart', - 'horizontal-bar-chart-asc', - 'horizontal-bar-chart-desc', - 'layout', - 'layout-auto', - 'layout-balloon', - 'layout-circle', - 'layout-grid', - 'layout-group-by', - 'layout-hierarchy', - 'layout-linear', - 'layout-skew-grid', - 'layout-sorted-clusters', - 'many-to-many', - 'many-to-one', - 'one-to-many', - 'one-to-one', - 'pie-chart', - 'polygon-filter', - 'regression-chart', - 'scatter-plot', - 'series-add', - 'series-configuration', - 'series-derived', - 'series-filtered', - 'series-search', - 'stacked-chart', - 'step-chart', - 'timeline-area-chart', - 'timeline-bar-chart', - 'timeline-line-chart', - 'trending-down', - 'trending-up', - 'vertical-bar-chart-asc', - 'vertical-bar-chart-desc', - 'waterfall-chart', -].sort(); +import { + Accordion, + AccordionDetails, + AccordionSummary, + Typography, +} from '@material-ui/core'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { useField } from 'react-final-form'; +import Condition from '../../../../../../components/react-admin/Condition'; +import BPIcon, { graphIcons } from '../../../../../../components/BPIcon'; const EmbedItemInput = ({ source }) => { + const [previewExpanded, setPreviewExpanded] = React.useState(false); + const translate = useTranslate(); + const iconChoices = React.useMemo( - () => bpIcons.map(bpIcon => ({ - id: bpIcon, - name: <> {bpIcon}, - })), + () => + graphIcons.map(bpIcon => ({ + id: bpIcon, + name: , + })), [], ); - return ( -
- + const { + input: { value: url }, + } = useField(`${source}.src`); - + useEffect(() => { + setPreviewExpanded(false); + }, [url]); + + return ( +
+
+ , + }} + style={{ width: '5em', minWidth: '5em' }} + /> + +
+ val.match(/(^(https?:)?\/\/.)/)} + > + setPreviewExpanded(val)} + style={{ width: '40em', marginBottom: '2em' }} + > + }> + {translate('datalayer.form.embed.preview')} + + + {previewExpanded && ( +