@eeacms/volto-tableau 3.0.8 → 4.1.0

package/src/Widgets/schema.js

@@ -1,90 +1,36 @@
-const generalSchema = {
-  title: 'General',
-
-  fieldsets: [
-    {
-      id: 'general',
-      title: 'General',
-      fields: ['url'],
-    },
-  ],
-
-  properties: {
-    url: {
-      title: 'Url',
-      type: 'textarea',
-    },
-  },
-  required: ['url'],
-};
-
-const optionsSchema = {
-  title: 'Options',
+import {
+  getSheetnamesChoices,
+  canChangeVizData,
+} from '@eeacms/volto-tableau/Tableau/helpers';
 
+const urlParametersSchema = {
+  title: 'Parameter',
   fieldsets: [
-    {
-      id: 'options',
-      title: 'Options',
-      fields: [
-        'sheetname',
-        'hideTabs',
-        'hideToolbar',
-        'autoScale',
-        'toolbarPosition',
-      ],
-    },
+    { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
   ],
-
   properties: {
-    sheetname: {
-      title: 'Sheetname',
+    field: {
+      title: 'Tableau fieldname',
       type: 'text',
     },
-    hideTabs: {
-      title: 'Hide tabs',
-      type: 'boolean',
-      default: false,
-    },
-    hideToolbar: {
-      title: 'Hide toolbar',
-      type: 'boolean',
-      default: false,
-    },
-    autoScale: {
-      title: 'Auto scale',
-      type: 'boolean',
-      default: false,
-      description: 'Scale down tableau according to width',
-    },
-    toolbarPosition: {
-      title: 'Toolbar position',
-      type: 'array',
-      choices: [
-        ['Top', 'Top'],
-        ['Bottom', 'Bottom'],
-      ],
-      default: 'Top',
+    urlParam: {
+      title: 'URL param',
+      type: 'text',
     },
   },
   required: [],
 };
 
-const urlParametersSchema = {
+const staticParameters = {
   title: 'Parameter',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['field', 'urlParam'],
-    },
-  ],
+  fieldsets: [{ id: 'default', title: 'Default', fields: ['field', 'value'] }],
   properties: {
     field: {
       title: 'Tableau fieldname',
       type: 'text',
     },
-    urlParam: {
-      title: 'URL param',
+    value: {
+      title: 'Value',
       type: 'text',
     },
   },
@@ -100,7 +46,6 @@ const breakpointUrlSchema = (config) => {
     properties: {
       device: {
         title: 'Device',
-        type: 'array',
         choices: Object.keys(breakpoints).map((breakpoint) => [
           breakpoint,
           breakpoint,
@@ -115,70 +60,98 @@ const breakpointUrlSchema = (config) => {
   };
 };
 
-const extraOptionsSchema = (config) => {
-  return {
-    title: 'Extra Options',
+export default (config, viz, vizState) => {
+  const isDisabled = !canChangeVizData(viz, vizState);
 
+  return {
+    title: 'Tableau',
     fieldsets: [
       {
         id: 'default',
-        title: 'Extra Options Data',
-        fields: ['urlParameters', 'availableFields', 'breakpointUrls'],
+        title: 'Default',
+        fields: ['url'],
+      },
+      {
+        id: 'options',
+        title: 'Options',
+        fields: [
+          'sheetname',
+          'hideTabs',
+          'hideToolbar',
+          'autoScale',
+          'toolbarPosition',
+        ],
+      },
+      {
+        id: 'extra_options',
+        title: 'Extra options',
+        fields: ['urlParameters', 'staticParameters', 'breakpointUrls'],
       },
     ],
-
     properties: {
+      url: {
+        title: 'Url',
+        widget: 'textarea',
+        isDisabled,
+      },
+      sheetname: {
+        title: 'Sheetname',
+        choices: getSheetnamesChoices(viz),
+        isDisabled,
+      },
+      hideTabs: {
+        title: 'Hide tabs',
+        type: 'boolean',
+        isDisabled,
+      },
+      hideToolbar: {
+        title: 'Hide toolbar',
+        type: 'boolean',
+        isDisabled,
+      },
+      autoScale: {
+        title: 'Auto scale',
+        type: 'boolean',
+        description: 'Scale down tableau according to width',
+        isDisabled,
+      },
+      toolbarPosition: {
+        title: 'Toolbar position',
+        choices: [
+          ['Top', 'Top'],
+          ['Bottom', 'Bottom'],
+        ],
+        default: 'Top',
+        isDisabled,
+      },
       urlParameters: {
         title: 'URL parameters',
         widget: 'object_list',
         schema: urlParametersSchema,
         description: 'Set a list of url parameters to filter the tableau',
+        isDisabled,
       },
-      availableFields: {
-        title: 'Available Fields:',
-        widget: 'url_params_widget',
+      staticParameters: {
+        title: 'Static parameters',
+        widget: 'object_list',
+        schema: staticParameters,
+        description: (
+          <>
+            Set a list of static parameters.
+            <br />
+            <b>NOTE: You need to trigger a refresh for this to take effect</b>
+          </>
+        ),
+        isDisabled,
       },
       breakpointUrls: {
         title: 'Breakpoint urls',
         widget: 'object_list',
         schema: breakpointUrlSchema(config),
         description: 'Set different vizualization for specific breakpoint',
+        isDisabled,
       },
     },
-    required: [],
-  };
-};
-
-export default (config) => {
-  return {
-    title: 'Tableau Editor',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Tableau Editor Sections',
-        fields: ['tableau_data'],
-      },
-    ],
-    properties: {
-      tableau_data: {
-        title: 'Panels',
-        widget: 'object_types_widget',
-        schemas: [
-          {
-            id: 'general',
-            schema: generalSchema,
-          },
-          {
-            id: 'options',
-            schema: optionsSchema,
-          },
-          {
-            id: 'extraOptions',
-            schema: extraOptionsSchema(config),
-          },
-        ],
-      },
-    },
-    required: [],
+    required: ['url'],
   };
 };

package/src/helpers.js

@@ -1,47 +1,28 @@
-const loadTableauScript = (callback, version) => {
-  const existingScript = __CLIENT__ && document.getElementById(`tableauJS`);
-  //replace script loaded on each version change
-  if (existingScript) {
-    existingScript.setAttribute(
-      'src',
-      `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`,
-    );
+export const loadTableauScript = (callback, version) => {
+  if (!__CLIENT__) return;
+  const source = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
+  const existingScript = document.getElementById(`tableauJS-${version}`);
+  const existingScriptSource =
+    existingScript && existingScript.getAttribute('src');
+  // Replace script loaded on each version change
+  if (existingScript && existingScriptSource !== source) {
+    existingScript.setAttribute('src', source);
   }
-  if (!existingScript && __CLIENT__) {
+  if (!existingScript) {
     const script = document.createElement('script');
-    script.src = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
-    script.id = `tableauJS`;
+    script.src = source;
+    script.id = `tableauJS-${version}`;
     document.body.appendChild(script);
     script.onload = () => {
+      window[`tableau_${version}`] = window.tableau;
       if (callback) callback();
     };
   }
-  //callback, if needed
+  // Trigger callback
   if (existingScript && callback) callback();
-
-  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
-  return tableau;
 };
 
-const isMyScriptLoaded = (version) => {
-  //check for loaded Tableau script in dom scripts
-  var scripts = __CLIENT__ && document.getElementsByTagName('script');
-  if (scripts) {
-    for (var i = scripts.length; i--; ) {
-      // eslint-disable-next-line eqeqeq
-      if (
-        scripts[i].src ===
-        `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`
-      )
-        return true;
-    }
-  }
-  return false;
-};
-
-export { loadTableauScript, isMyScriptLoaded };
-
-//script url for each version. In case you might need to add them in the load balancer
+// Script url for each version. In case you might need to add them in the load balancer
 // https://public.tableau.com/javascripts/api/tableau-2.8.0.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.7.0.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.6.0.min.js

package/src/hooks.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { loadTableauScript } from './helpers';
+
+export const useTableau = (version) => {
+  const [tableau, setTableau] = useState();
+
+  useEffect(() => {
+    loadTableauScript(() => {
+      if (window[`tableau_${version}`]) {
+        setTableau(window[`tableau_${version}`]);
+      } else {
+        setTableau(undefined);
+      }
+    }, version);
+  }, [version]);
+
+  return tableau;
+};

package/src/icons/download.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19ZM14 9H19L12 16L5 9H10V3H14V9Z">
+  </path>
+</svg>

package/src/index.js

@@ -1,81 +1,19 @@
-import sliderSVG from '@plone/volto/icons/slider.svg';
-import TableauEdit from './TableauBlock/Edit';
-import TableauView from './TableauBlock/View';
-import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View';
-import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit';
+import installBlocks from './Blocks';
 import { VisualizationView } from './Views';
 import { VisualizationWidget } from './Widgets';
-import UrlParamsWidget from './CustomWidgets/UrlParamsWidget';
-
-import tableauStore from './store';
-
-import tableauMiddleware from './middleware';
 
 const applyConfig = (config) => {
-  config.addonReducers = {
-    ...config.addonReducers,
-    tableau: tableauStore,
-  };
-
   config.settings.allowed_cors_destinations = [
     ...(config.settings.allowed_cors_destinations || []),
     'public.tableau.com',
   ];
 
-  config.settings.storeExtenders = [
-    ...(config.settings.storeExtenders || []),
-    tableauMiddleware,
-  ];
-
-  config.blocks.blocksConfig.tableau_block = {
-    id: 'tableau_block',
-    title: 'Tableau',
-    icon: sliderSVG,
-    group: 'common',
-    edit: TableauEdit,
-    view: TableauView,
-    restricted: false,
-    mostUsed: false,
-    sidebarTab: 1,
-    blocks: {},
-    security: {
-      addPermission: [],
-      view: [],
-    },
-    breakpoints: {
-      desktop: [Infinity, 982],
-      tablet: [981, 768],
-      mobile: [767, 0],
-    },
-  };
-
-  config.blocks.blocksConfig.embed_eea_tableau_block = {
-    id: 'embed_eea_tableau_block',
-    title: 'Embed EEA Tableau',
-    icon: sliderSVG,
-    group: 'common',
-    edit: EmbedTableauEdit,
-    view: EmbedTableauView,
-    restricted: false,
-    mostUsed: false,
-    sidebarTab: 1,
-    blocks: {},
-    security: {
-      addPermission: [],
-      view: [],
-    },
-    breakpoints: {
-      desktop: [Infinity, 982],
-      tablet: [981, 768],
-      mobile: [767, 0],
-    },
-  };
+  config.settings.storeExtenders = [...(config.settings.storeExtenders || [])];
 
   config.views.contentTypesViews.tableau_visualization = VisualizationView;
-  config.widgets.id.tableau_visualization_data = VisualizationWidget;
-  config.widgets.widget.url_params_widget = UrlParamsWidget;
+  config.widgets.id.tableau_visualization = VisualizationWidget;
 
-  return config;
+  return [installBlocks].reduce((acc, apply) => apply(acc), config);
 };
 
 export default applyConfig;