EmberInput improvements

Terralego · Nov 13, 2023 · a5730b6 · a5730b6
1 parent 97ba1a8
commit a5730b6
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 92 deletions.
diff --git 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
@@ -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
@@ -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 icon={icon} style={{ marginRight: '1em', ...style }} {...rest} /> {icon}
+    </>
+  ) : (
+    <Icon icon={icon} style={style} {...rest} />
+  ));
+
+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
@@ -17,17 +17,27 @@ const EmbedConfigField = ({ label, ...rest }) => {
 
   return (
     <>
-      <Typography variant="h5" component="h2">{translate(label)}</Typography>
+      <Typography variant="h5" component="h2">
+        {translate(label)}
+      </Typography>
 
-      {error && error.length > 0 && error.flatMap(err =>
-        err && Object.entries(err).map(([key, value]) => (
-          <Typography color="error">{key}: {translate(value)}</Typography>)))}
-
-      <ArrayInput source="settings.embed" label="">
-        <SimpleFormIterator>
-          <EmbedItemInput />
-        </SimpleFormIterator>
-      </ArrayInput>
+      {error?.length > 0 &&
+        error.flatMap(
+          err =>
+            err &&
+            Object.entries(err).map(([key, value]) => (
+              <Typography color="error">
+                {key}: {translate(value)}
+              </Typography>
+            )),
+        )}
+      <div style={{ maxWidth: '60em' }}>
+        <ArrayInput source="settings.embed" label="">
+          <SimpleFormIterator>
+            <EmbedItemInput />
+          </SimpleFormIterator>
+        </ArrayInput>
+      </div>
     </>
   );
 };

diff --git 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: <><Icon icon={bpIcon} style={{ marginRight: '1em' }} /> {bpIcon}</>,
-    })),
+    () =>
+      graphIcons.map(bpIcon => ({
+        id: bpIcon,
+        name: <BPIcon icon={bpIcon} displayIconName />,
+      })),
     [],
   );
 
-  return (
-    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1em' }}>
-      <SelectInput
-        source={`${source}.icon`}
-        label="datalayer.form.embed.icon"
-        choices={iconChoices}
-        translateChoice={false}
-        helperText={false}
-      />
+  const {
+    input: { value: url },
+  } = useField(`${source}.src`);
 
-      <TextInput
-        label="datalayer.form.embed.title"
-        source={`${source}.title`}
-        type="text"
-        helperText="datalayer.form.embed.title-help"
-      />
+  useEffect(() => {
+    setPreviewExpanded(false);
+  }, [url]);
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1em' }}>
+        <SelectInput
+          source={`${source}.icon`}
+          label="datalayer.form.embed.icon"
+          choices={iconChoices}
+          translateChoice={false}
+          helperText={false}
+          SelectProps={{
+            renderValue: value => <BPIcon icon={value} />,
+          }}
+          style={{ width: '5em', minWidth: '5em' }}
+        />
 
+        <TextInput
+          label="datalayer.form.embed.title"
+          source={`${source}.title`}
+          type="text"
+          style={{ width: '34em' }}
+          helperText="datalayer.form.embed.title-help"
+        />
+      </div>
       <TextInput
         label="datalayer.form.embed.src"
         source={`${source}.src`}
         type="url"
+        style={{ width: '40em' }}
         placeholder="https://myiframe.page"
         helperText="datalayer.form.embed.src-help"
       />
+      <Condition
+        when={`${source}.src`}
+        is={val => val.match(/(^(https?:)?\/\/.)/)}
+      >
+        <Accordion
+          expanded={previewExpanded}
+          onChange={(_, val) => setPreviewExpanded(val)}
+          style={{ width: '40em', marginBottom: '2em' }}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>{translate('datalayer.form.embed.preview')}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            {previewExpanded && (
+              <iframe width="100%" height="300px" title="preview" src={url} />
+            )}
+          </AccordionDetails>
+        </Accordion>
+      </Condition>
+      <BooleanInput
+        label="datalayer.form.embed.fullscreen"
+        source={`${source}.fullScreen`}
+        defaultValue
+      />
+      <Condition when={`${source}.fullScreen`} is={false}>
+        <div style={{ display: 'flex', gap: '2em' }}>
+          <NumberInput
+            source={`${source}.size.width`}
+            label="datalayer.form.embed.width"
+            min={0}
+            step={1}
+          />
+          <NumberInput
+            source={`${source}.size.height`}
+            label="datalayer.form.embed.height"
+            min={0}
+            step={1}
+          />
+        </div>
+      </Condition>
     </div>
   );
 };