@devgateway/dvz-wp-commons 1.2.0 → 1.3.0

package/build/Blocks.cjs

@@ -0,0 +1,672 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.SizeConfig = exports.ComponentWithSettings = exports.BlockEditWithFilters = exports.BlockEditWithAPIMetadata = void 0;
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _Util = require("./Util.cjs");
+var _APIutils = require("./APIutils.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SizeConfig = ({
+  height,
+  setAttributes,
+  panelStatus,
+  initialOpen
+}) => {
+  return /* @__PURE__ */React.createElement(_components.PanelBody, {
+    initialOpen: panelStatus ? panelStatus["SIZE"] : initialOpen,
+    onToggle: e => (0, _Util.togglePanel)("SIZE", panelStatus, setAttributes),
+    title: (0, _i18n.__)("Size")
+  }, /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.TextControl, {
+    size: 10,
+    label: "Height",
+    value: height,
+    onChange: height2 => setAttributes({
+      height: height2 ? parseInt(height2) : 0
+    })
+  })));
+};
+exports.SizeConfig = SizeConfig;
+class ComponentWithSettings extends _element.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      react_ui_url: ""
+    };
+    window.addEventListener("message", event => {
+      if (event.data.type === "componentReady" && event.data.value === true) {
+        if (this.iframe.current) {
+          console.log("-----------Sending message -----------");
+          this.iframe.current.contentWindow.postMessage({
+            messageType: "component-attributes",
+            ...this.props.attributes
+          }, "*");
+        }
+      }
+    }, false);
+    this.iframe = React.createRef();
+    this.unsubscribe = wp.data.subscribe(() => {
+      const newPreviewMode = wp.data.select("core/editor").getDeviceType();
+      if (newPreviewMode !== this.state.previewMode) {
+        this.setState({
+          previewMode: newPreviewMode
+        });
+      }
+    });
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.iframe.current?.contentWindow) {
+      this.iframe.current.contentWindow.postMessage({
+        messageType: "component-attributes",
+        ...this.props.attributes
+      }, "*");
+    }
+  }
+  componentDidMount() {
+    (0, _apiFetch.default)({
+      path: "/dg/v1/settings"
+    }).then(data => {
+      this.setState({
+        react_ui_url: data["react_ui_url"] + "/" + window._page_locale,
+        react_api_url: data["react_api_url"],
+        apache_superset_url: data["apache_superset_url"],
+        site_language: data["site_language"],
+        current_language: new URLSearchParams(document.location.search).get("edit_lang")
+      });
+    });
+  }
+  componentWillUnmount() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
+}
+exports.ComponentWithSettings = ComponentWithSettings;
+class BlockEditWithFilters extends ComponentWithSettings {
+  constructor(props) {
+    super(props);
+    this.state = {
+      taxonomyValues: [],
+      sortingTaxonomyValues: [],
+      types: null,
+      taxonomies: null,
+      loading: false,
+      defaultValues: [],
+      defaultValuesSearchTerm: ""
+    };
+    this.onTypeChanged = this.onTypeChanged.bind(this);
+    this.onTaxonomyChanged = this.onTaxonomyChanged.bind(this);
+    this.onSortingTaxonomyChanged = this.onSortingTaxonomyChanged.bind(this);
+    this.getTaxonomyValues = this.getTaxonomyValues.bind(this);
+    this.onCategoryChanged = this.onCategoryChanged.bind(this);
+    this.getSortingTaxonomyValues = this.getSortingTaxonomyValues.bind(this);
+    this.onDefaultCategoryChanged = this.onDefaultCategoryChanged.bind(this);
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const {
+      setAttributes,
+      attributes: {
+        type,
+        taxonomy,
+        count,
+        sortingTaxonomy
+      }
+    } = this.props;
+    super.componentDidUpdate(prevProps, prevState, snapshot);
+    if (prevProps.attributes) {
+      if (type !== prevProps.attributes.type) {}
+      if (taxonomy !== prevProps.attributes.taxonomy) {
+        this.getTaxonomyValues();
+      }
+      if (sortingTaxonomy !== prevProps.attributes.sortingTaxonomy) {
+        this.getSortingTaxonomyValues();
+      }
+    }
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    this.getTypes();
+    this.getTaxonomies();
+    const {
+      setAttributes,
+      attributes: {
+        type,
+        taxonomy,
+        count,
+        sortingTaxonomy
+      }
+    } = this.props;
+    if (taxonomy !== "none" || taxonomy !== null) {
+      this.getTaxonomyValues();
+    }
+    if (sortingTaxonomy !== "none" || sortingTaxonomy !== null) {
+      this.getSortingTaxonomyValues();
+    }
+  }
+  onTypeChanged(value) {
+    const {
+      setAttributes
+    } = this.props;
+    setAttributes({
+      categories: []
+    });
+    setAttributes({
+      taxonomy: "none"
+    });
+    setAttributes({
+      type: value
+    });
+  }
+  onTaxonomyChanged(value) {
+    const {
+      setAttributes
+    } = this.props;
+    setAttributes({
+      categories: []
+    });
+    setAttributes({
+      taxonomy: value
+    });
+  }
+  onSortingTaxonomyChanged(value) {
+    const {
+      setAttributes
+    } = this.props;
+    setAttributes({
+      sortFirstBy: "none"
+    });
+    setAttributes({
+      sortingTaxonomy: value
+    });
+  }
+  onDefaultValuesChanged(value, filterType = "multi-select") {
+    const {
+      setAttributes
+    } = this.props;
+    if (filterType === "multi-select") {
+      setAttributes({
+        defaultValues: value
+      });
+    } else {
+      setAttributes({
+        defaultValues: [value]
+      });
+    }
+  }
+  onCategoryChanged(checked, value) {
+    const {
+      setAttributes,
+      attributes: {
+        categories
+      }
+    } = this.props;
+    if (!checked) {
+      setAttributes({
+        categories: categories.filter(i => i != value)
+      });
+    } else {
+      let newCate = [...categories];
+      newCate.push(value);
+      setAttributes({
+        categories: newCate
+      });
+    }
+  }
+  onDefaultCategoryChanged(value, filterType = "multi-select", checked) {
+    const {
+      setAttributes,
+      attributes: {
+        defaultValues
+      }
+    } = this.props;
+    if (filterType === "multi-select") {
+      if (!checked) {
+        setAttributes({
+          defaultValues: defaultValues.filter(i => i !== value)
+        });
+      } else {
+        setAttributes({
+          defaultValues: [...defaultValues, value]
+        });
+      }
+    } else {
+      setAttributes({
+        defaultValues: [value]
+      });
+    }
+  }
+  getTaxonomyValues() {
+    const {
+      setAttributes,
+      attributes: {
+        taxonomy
+      }
+    } = this.props;
+    this.setState({
+      loading: true
+    });
+    wp.apiFetch({
+      path: "/wp/v2/" + taxonomy + "?per_page=100"
+    }).then(data => {
+      this.setState({
+        loading: false
+      });
+      this.setState({
+        taxonomyValues: data
+      });
+    });
+  }
+  getSortingTaxonomyValues() {
+    const {
+      setAttributes,
+      attributes: {
+        sortingTaxonomy
+      }
+    } = this.props;
+    wp.apiFetch({
+      path: "/wp/v2/" + sortingTaxonomy + "?per_page=100"
+    }).then(data => {
+      this.setState({
+        sortingTaxonomyValues: data
+      });
+    });
+  }
+  getTaxonomies() {
+    wp.apiFetch({
+      path: "/wp/v2/taxonomies?per_page=100"
+    }).then(data => {
+      this.setState({
+        taxonomies: data
+      });
+    });
+  }
+  getTypes() {
+    wp.apiFetch({
+      path: "/wp/v2/types?per_page=100"
+    }).then(data => {
+      const types = data;
+      this.setState({
+        types: data,
+        loading: false
+      });
+    });
+  }
+  typeOptions() {
+    const {
+      setAttributes,
+      attributes: {
+        count,
+        type,
+        taxonomy,
+        category
+      }
+    } = this.props;
+    const {
+      types,
+      taxonomies,
+      taxonomyValues
+    } = this.state;
+    const typeOptions = types ? Object.keys(types).filter(k => ["page", "attachment", "wp_block"].indexOf(k) === -1).map(k => ({
+      slug: types[k].slug,
+      label: types[k].name,
+      value: types[k].rest_base
+    })) : [];
+    return typeOptions;
+  }
+  taxonomyOptions() {
+    const {
+      attributes: {
+        type
+      }
+    } = this.props;
+    const {
+      types,
+      taxonomies,
+      taxonomyValues
+    } = this.state;
+    let slug;
+    if (types) {
+      slug = this.typeOptions().filter(t => t.value == type)[0]?.slug;
+      const taxonomyOptions = types && taxonomies ? Object.keys(taxonomies).filter(i => taxonomies[i].types.indexOf(slug) > -1).map(k => ({
+        label: types[slug].name + " -> " + taxonomies[k].name,
+        value: taxonomies[k].rest_base
+      })) : [];
+      return [{
+        label: "None",
+        value: "none"
+      }, ...taxonomyOptions];
+    } else {
+      return [];
+    }
+  }
+  categoriesOptions() {
+    const {
+      types,
+      taxonomies,
+      taxonomyValues
+    } = this.state;
+    const taxonomyValuesOptions = taxonomyValues && taxonomyValues.map(t => ({
+      label: t.name,
+      value: t.id
+    }));
+    return taxonomyValuesOptions;
+  }
+  sortingCategoriesOptions() {
+    const {
+      sortingTaxonomyValues
+    } = this.state;
+    const taxonomyValuesOptions = sortingTaxonomyValues && sortingTaxonomyValues.map(t => ({
+      label: t.name,
+      value: t.id
+    }));
+    return taxonomyValuesOptions;
+  }
+  renderFilters(title) {
+    const {
+      setAttributes,
+      attributes: {
+        type,
+        taxonomy,
+        categories,
+        isCountryFilter
+      }
+    } = this.props;
+    return /* @__PURE__ */React.createElement(_components.PanelBody, {
+      title: (0, _i18n.__)(title || "Filter")
+    }, /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.SelectControl, {
+      label: (0, _i18n.__)("Post Type"),
+      options: this.typeOptions(),
+      value: type,
+      onChange: this.onTypeChanged
+    })), /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.SelectControl, {
+      label: isCountryFilter ? (0, _i18n.__)("Select Taxonomy with Countries") : (0, _i18n.__)("Use a taxonomy filter "),
+      options: this.taxonomyOptions(),
+      value: taxonomy,
+      help: isCountryFilter ? (0, _i18n.__)("Select a taxonomy that contains countries") : null,
+      onChange: this.onTaxonomyChanged
+    })), this.state.loading && taxonomy && taxonomy !== "none" ? /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.Spinner, null)) : taxonomy && taxonomy !== "none" && this.categoriesOptions().map(o => {
+      return /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.CheckboxControl, {
+        label: o.label,
+        onChange: checked => this.onCategoryChanged(checked, o.value),
+        checked: categories.indexOf(o.value) > -1
+      }));
+    }));
+  }
+  renderSorting(showTaxonomy = true) {
+    const {
+      setAttributes,
+      attributes: {
+        sortingTaxonomy,
+        sortFirstBy
+      }
+    } = this.props;
+    return /* @__PURE__ */React.createElement(_components.PanelBody, {
+      title: (0, _i18n.__)("Sorting Configuration")
+    }, showTaxonomy && /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.SelectControl, {
+      label: (0, _i18n.__)("Select Taxonomy with the sorting"),
+      options: this.taxonomyOptions(),
+      value: sortingTaxonomy,
+      help: (0, _i18n.__)("Select a taxonomy that contains the sorting"),
+      onChange: this.onSortingTaxonomyChanged
+    })), /* @__PURE__ */React.createElement(_components.PanelRow, null, (sortingTaxonomy !== "none" || sortingTaxonomy !== null) && /* @__PURE__ */React.createElement(_components.SelectControl, {
+      label: (0, _i18n.__)("Sort First By"),
+      options: [{
+        label: "None",
+        value: "none"
+      }, ...this.sortingCategoriesOptions()],
+      value: sortFirstBy,
+      onChange: value => {
+        setAttributes({
+          sortFirstBy: value
+        });
+      }
+    })));
+  }
+  renderSelectDefaultValues(filterType = "multi-select") {
+    const {
+      setAttributes,
+      attributes: {
+        defaultValues,
+        taxonomy
+      }
+    } = this.props;
+    return /* @__PURE__ */React.createElement(React.Fragment, null, filterType === "multi-select" ? /* @__PURE__ */React.createElement(_components.PanelBody, {
+      title: (0, _i18n.__)("Default Values")
+    }, /* @__PURE__ */React.createElement(_components.__experimentalText, {
+      style: {
+        marginBottom: 20
+      }
+    }, (0, _i18n.__)("Select the default values for the filter")), /* @__PURE__ */React.createElement(_components.SearchControl, {
+      __nextHasNoMarginBottom: true,
+      style: {
+        marginTop: 20
+      },
+      label: (0, _i18n.__)("Search categories"),
+      value: this.state.defaultValuesSearchTerm,
+      onChange: searchTerm => this.setState({
+        defaultValuesSearchTerm: searchTerm
+      }),
+      placeholder: (0, _i18n.__)("Search...")
+    }), /* @__PURE__ */React.createElement(_components.__experimentalScrollable, {
+      style: {
+        maxHeight: 200,
+        width: "100%",
+        marginTop: 10
+      }
+    }, taxonomy && taxonomy !== "none" && this.categoriesOptions().filter(o => o.label.toLowerCase().includes(this.state.defaultValuesSearchTerm.toLowerCase())).map(o => {
+      return /* @__PURE__ */React.createElement(_components.PanelRow, {
+        key: o.value
+      }, /* @__PURE__ */React.createElement(_components.CheckboxControl, {
+        label: o.label,
+        onChange: checked => this.onDefaultCategoryChanged(o.value, filterType, checked),
+        checked: defaultValues.indexOf(o.value) > -1
+      }));
+    }))) : /* @__PURE__ */React.createElement(_components.PanelBody, {
+      title: (0, _i18n.__)("Default Value")
+    }, /* @__PURE__ */React.createElement(_components.__experimentalText, {
+      style: {
+        marginBottom: 20
+      }
+    }, (0, _i18n.__)("Select the default value for the filter")), /* @__PURE__ */React.createElement(_components.SelectControl, {
+      options: [{
+        label: "None",
+        value: "none"
+      }, ...this.categoriesOptions()],
+      value: defaultValues[0],
+      onChange: value => {
+        this.onDefaultCategoryChanged(value, filterType);
+      }
+    })));
+  }
+}
+exports.BlockEditWithFilters = BlockEditWithFilters;
+class BlockEditWithAPIMetadata extends ComponentWithSettings {
+  constructor(props) {
+    super(props);
+  }
+  componentDidMount() {
+    (0, _apiFetch.default)({
+      path: "/dg/v1/settings"
+    }).then(settingsData => {
+      fetch(`/api/registry/eureka/apps`, {
+        headers: {
+          "Accept": "application/json"
+        }
+      }).then(response => response.json()).then(data => {
+        const apps = data.applications ? [...data.applications.application.filter(a => a.instance[0].metadata.type === "data").map(a => ({
+          label: a.name,
+          value: a.instance[0].vipAddress,
+          settings: a.instance[0]
+        })), {
+          label: "CSV",
+          value: "csv"
+        }] : [{
+          label: "CSV",
+          value: "csv"
+        }];
+        this.setState({
+          react_ui_url: settingsData["react_ui_url"] + "/" + window._page_locale,
+          react_api_url: settingsData["react_api_url"],
+          apache_superset_url: settingsData["apache_superset_url"],
+          site_language: settingsData["site_language"],
+          current_language: new URLSearchParams(document.location.search).get("edit_lang"),
+          apps
+        }, () => {
+          const {
+            app,
+            dvzProxyDatasetId
+          } = this.props.attributes;
+          if ((0, _APIutils.isSupersetAPI)(app, this.state.apps)) {
+            this.loadDatasets(app);
+          }
+          if (app && app != "none") {
+            this.loadMetadata(app, dvzProxyDatasetId);
+          }
+        });
+      }).catch(() => {
+        console.log("Error when loading apps");
+      });
+    });
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    const {
+      attributes: {
+        app,
+        dvzProxyDatasetId
+      }
+    } = this.props;
+    const {
+      attributes: {
+        dvzProxyDatasetId: prevDvzProxyDatasetId,
+        app: prevAPP
+      }
+    } = prevProps;
+    if (app != prevAPP) {
+      if ((0, _APIutils.isSupersetAPI)(app, this.state.apps)) {
+        this.loadDatasets(app);
+        if (dvzProxyDatasetId) {
+          this.loadMetadata(app, dvzProxyDatasetId);
+        }
+      } else {
+        this.loadMetadata(app);
+      }
+    } else {
+      if (dvzProxyDatasetId != prevDvzProxyDatasetId) {
+        this.loadMetadata(app, dvzProxyDatasetId);
+      }
+    }
+  }
+  evictSuperSetCache() {
+    const {
+      app,
+      dvzProxyDatasetId
+    } = this.props.attributes;
+    fetch(`/api/${app}/cacheEvict?dvzProxyDatasetId=${dvzProxyDatasetId}`).then(() => {
+      this.loadMetadata(app, dvzProxyDatasetId);
+    });
+  }
+  loadDatasets(app) {
+    fetch(`/api/${app}/datasets`).then(response => {
+      if (!response.ok) {
+        throw new Error("HTTP status " + response.status);
+      }
+      return response.json();
+    }).then(data => {
+      this.setState({
+        datasets: data
+      });
+    }).catch(() => {
+      console.log("Error when loading datasets");
+    });
+  }
+  loadMetadata(app, dvzProxyDatasetId) {
+    if (app == "csv") {
+      return;
+    }
+    const dimensionsUrl = `/api/${app}/dimensions${dvzProxyDatasetId ? `?dvzProxyDatasetId=${dvzProxyDatasetId}` : ""}`;
+    const measuresUrl = `/api/${app}/measures${dvzProxyDatasetId ? `?dvzProxyDatasetId=${dvzProxyDatasetId}` : ""}`;
+    const filtersUrl = `/api/${app}/filters${dvzProxyDatasetId ? `?dvzProxyDatasetId=${dvzProxyDatasetId}` : ""}`;
+    const categoriesUrl = `/api/${app}/categories${dvzProxyDatasetId ? `?dvzProxyDatasetId=${dvzProxyDatasetId}` : ""}`;
+    if (app != "csv") {
+      fetch(dimensionsUrl).then(response => {
+        if (!response.ok) {
+          throw new Error("HTTP status " + response.status);
+        } else {
+          return response.json();
+        }
+      }).then(data => {
+        this.setState({
+          dimensions: [{
+            "label": (0, _i18n.__)("None"),
+            "value": "none"
+          }, ...(0, _APIutils.getTranslatedOptions)(data)]
+        });
+      }).catch(function (response) {
+        console.log("Error when loading dimensions");
+      });
+      fetch(filtersUrl).then(response => {
+        if (!response.ok) {
+          throw new Error("HTTP status " + response.status);
+        }
+        return response.json();
+      }).then(data => {
+        const options = data.map(f => ({
+          ...f,
+          value: f.param
+        }));
+        this.setState({
+          filters: options
+        });
+      }).catch(function (response) {
+        console.log("Error when loading filters", response);
+      });
+      fetch(measuresUrl).then(response => {
+        if (!response.ok) {
+          throw new Error("HTTP status " + response.status);
+        }
+        return response.json();
+      }).then(data => {
+        sessionStorage.setItem(`measures_${app}`, JSON.stringify((0, _APIutils.getTranslatedOptions)(data)));
+        this.setState({
+          measures: (0, _APIutils.getTranslatedOptions)(data)
+        });
+      }).catch(function (response) {
+        console.log("Error when loading measures");
+      });
+      fetch(categoriesUrl).then(response => {
+        if (!response.ok) {
+          throw new Error("HTTP status " + response.status);
+        }
+        return response.json();
+      }).then(data => {
+        sessionStorage.setItem(`categories_${app}`, JSON.stringify(data));
+        this.setState({
+          categories: (0, _APIutils.getTranslatedOptions)(data)
+        });
+      }).catch(function (response) {
+        console.log("Error when getting categories", response);
+      });
+    }
+  }
+  fetchData(url, stateKey, transformData) {
+    fetch(url).then(response => {
+      if (!response.ok) {
+        throw new Error("HTTP status " + response.status);
+      }
+      return response.json();
+    }).then(data => {
+      this.setState({
+        [stateKey]: transformData(data)
+      });
+    }).catch(() => {
+      console.log(`Error when loading ${stateKey}`);
+    });
+  }
+}
+exports.BlockEditWithAPIMetadata = BlockEditWithAPIMetadata;
+module.exports = SizeConfig;

package/build/Blocks.d.ts

@@ -18,14 +18,21 @@ export class ComponentWithSettings extends Component<any, any, any> {
 export class BlockEditWithFilters extends ComponentWithSettings {
     state: {
         taxonomyValues: never[];
+        sortingTaxonomyValues: never[];
         types: null;
         taxonomies: null;
         loading: boolean;
+        defaultValues: never[];
+        defaultValuesSearchTerm: string;
     };
     onTypeChanged(value: any): void;
     onTaxonomyChanged(value: any): void;
+    onSortingTaxonomyChanged(value: any): void;
     getTaxonomyValues(): void;
     onCategoryChanged(checked: any, value: any): void;
+    getSortingTaxonomyValues(): void;
+    onDefaultCategoryChanged(value: any, filterType: string | undefined, checked: any): void;
+    onDefaultValuesChanged(value: any, filterType?: string): void;
     getTaxonomies(): void;
     getTypes(): void;
     typeOptions(): {
@@ -41,7 +48,13 @@ export class BlockEditWithFilters extends ComponentWithSettings {
         label: any;
         value: any;
     }[];
-    renderFilters(): import("react").JSX.Element;
+    sortingCategoriesOptions(): {
+        label: any;
+        value: any;
+    }[];
+    renderFilters(title: any): import("react").JSX.Element;
+    renderSorting(showTaxonomy?: boolean): import("react").JSX.Element;
+    renderSelectDefaultValues(filterType?: string): import("react").JSX.Element;
 }
 export class BlockEditWithAPIMetadata extends ComponentWithSettings {
     componentDidUpdate(prevProps: any): void;