@devgateway/dvz-ui-react/dist/esm/embeddable/filter/index.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

import { jsx as e, jsxs as F, Fragment as z } from "react/jsx-runtime";
import { useState as $, useEffect as Z, useRef as ee } from "react";
import { Container as b, Dropdown as I, Segment as M, Label as P, Radio as H, Input as te, Icon as re, Divider as ne, Checkbox as le } from "semantic-ui-react";
import K from "../data/CategoriesConsumer.js";
import ae from "../data/CategoriesProvider.js";
import { connect as Y } from "react-redux";
import { setFilter as ie, setInitialFilters as oe } from "../reducers/data.js";
import { injectIntl as se } from "react-intl";
import { SettingProvider as ce, SettingsConsumer as ue } from "@devgateway/wp-react-lib";
const Q = "multi-select", O = "single-select", de = "NO_DATA", fe = "DEFAULT_VALUE_INPUT", he = "LOWEST_VALUE", me = "HIGHEST_VALUE", v = (t) => t instanceof Boolean ? t : t == "true", ge = (t, s) => t ? t.sort((n, i) => n.position - i.position).map((n) => {
  const i = s && n.labels && n.labels[s.toUpperCase()] ? n.labels[s.toUpperCase()] : n.value;
  return {
    key: n.id,
    value: n.id,
    text: i,
    icon: n.value.toLocaleLowerCase(),
    position: n.position ? n.position : n.value
  };
}) : [], pe = (t) => decodeURIComponent(t), X = (t) => {
  if (!t || t == "")
    return null;
  try {
    return JSON.parse(pe(t));
  } catch (s) {
    throw new Error("error parsing value:" + s);
  }
}, j = (t, s) => {
  const { app: n, group: i, param: o } = s;
  return {
    current: t.getIn(["data", "filters", n, i, o])
  };
}, W = {
  onInit: oe,
  onChange: ie
}, q = (t) => {
  const { isRange: s, options: n, alphabeticalSort: i, ascOrder: o } = t;
  v(i) ? n.sort(function(d, u) {
    const l = d.text ? d.text.toLowerCase() : "", m = u.text ? u.text.toLowerCase() : "";
    return v(o) ? l < m ? -1 : l > m ? 1 : 0 : l < m ? 1 : l > m ? -1 : 0;
  }) : n.sort(function(d, u) {
    return v(o) ? d.position - u.position : u.position - d.position;
  });
  const f = { ...t, options: n };
  return s ? /* @__PURE__ */ e(xe, { ...f }) : /* @__PURE__ */ e(Ce, { ...f });
}, Ce = Y(
  j,
  W
)((t) => {
  const {
    allLabel: s,
    noneLabel: n,
    placeholder: i,
    options: o,
    app: f,
    group: d,
    param: u,
    current: l,
    onChange: m,
    onInit: c,
    useSingleColumn: L,
    enableTextSearch: g,
    filterType: E,
    defaultValues: _,
    showNoDataOption: N,
    defaultValueCriteria: h,
    allNoneSameBehaviour: p,
    closeOnSelect: S,
    hiddenFilters: w,
    autoApply: A
  } = t, [R, B] = $(""), D = (r) => {
    let a = [];
    E != O && !S && l && l.indexOf(r) > -1 ? a = l.filter((x) => x !== r) : E != O && l && !S ? a = [...l, r] : a = [r], m({ app: f, group: d, param: u, value: a, autoApply: A }), S && T.current && T.current.close();
  }, G = (r) => {
    const a = o.filter((x) => g && C && C.trim().length > 0 && x.text ? x.text.toLowerCase().includes(C.toLowerCase()) : !0);
    m({
      app: f,
      group: d,
      param: u,
      value: a.map((x) => x.value),
      autoApply: A
    }), S && T.current && T.current.close();
  }, y = () => {
    const r = o.filter((a) => g && C && C.trim().length > 0 && a.text ? a.text.toLowerCase().includes(C.toLowerCase()) : !0);
    m({
      app: f,
      group: d,
      param: u,
      value: p ? r.map((a) => a.value) : [],
      autoApply: A
    }), S && T.current && T.current.close();
  }, k = (r) => {
    U(r);
  };
  Z(() => {
    if (!l) {
      const r = o.map((a) => a.value);
      if (E == Q || E == "")
        c({ app: f, group: d, param: u, value: r });
      else if (f == "csv") {
        let a = [];
        h === fe ? a = _ ? _.split(",") : [] : h == he ? a = r.length > 0 ? [r[0]] : [] : h == me && (a = r.length > 0 ? [r[r.length - 1]] : []), c({ app: f, group: d, param: u, value: a });
      } else
        c({ app: f, group: d, param: u, value: [r[0]] });
    }
  }, []);
  const J = () => {
    if (E == O) {
      const r = l && l[0] ? o.filter((a) => a.value == l[0])[0] : null;
      return `${i} ${r ? r.text : ""}`;
    } else
      return `${i} (${l ? l.filter((r) => r == Number.MIN_SAFE_INTEGER ? !1 : w && w.length > 0 ? w.indexOf(r) == -1 : !0).length : 0}/${o.filter((r) => w && w.length > 0 ? w.indexOf(r.id) == -1 : !0).length}) `;
  }, T = ee(null), [C, U] = $("");
  return (
    // @ts-ignore
    /* @__PURE__ */ e(
      I,
      {
        ref: T,
        fluid: !0,
        text: J(),
        scrolling: !1,
        button: !0,
        icon: "angle down ignore",
        multiple: !0,
        search: !0,
        floating: !1,
        className: `${l && l.length > 0 ? "applied " : ""}`,
        children: /* @__PURE__ */ F(I.Menu, { children: [
          E != O && /* @__PURE__ */ F(z, { children: [
            /* @__PURE__ */ e(M, { children: /* @__PURE__ */ F(I.Item, { children: [
              /* @__PURE__ */ e(P, { basic: !0, onClick: G, children: s }),
              " ",
              "|",
              " ",
              /* @__PURE__ */ e(P, { basic: !0, onClick: y, children: n })
            ] }) }),
            g && /* @__PURE__ */ F(z, { children: [
              /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(I.Item, { children: /* @__PURE__ */ e("div", { className: "ui action input", children: /* @__PURE__ */ F(te, { placeholder: "Search...", children: [
                /* @__PURE__ */ e(
                  "input",
                  {
                    className: "filter-search",
                    value: C,
                    onChange: (r) => {
                      k(r.target.value);
                    }
                  }
                ),
                /* @__PURE__ */ e(
                  re,
                  {
                    name: "remove",
                    link: !0,
                    className: "clear-icon ignore",
                    onClick: (r) => {
                      k("");
                    }
                  }
                )
              ] }) }) }) }),
              /* @__PURE__ */ e(ne, {})
            ] })
          ] }),
          /* @__PURE__ */ e("br", {}),
          /* @__PURE__ */ e(b, { className: L ? "dropdown-single-column" : "", children: o.filter((r) => g && C && C.trim().length > 0 && r.text ? r.text.toLowerCase().includes(C.toLowerCase()) : !0).map(({ value: r, text: a }, x) => /* @__PURE__ */ F(
            I.Item,
            {
              className: L ? "dropdown-item-single-column" : "",
              children: [
                E == O && /* @__PURE__ */ e(
                  H,
                  {
                    checked: !!(l && l.indexOf(r) > -1),
                    onChange: (V) => D(r),
                    label: a
                  }
                ),
                E == Q && /* @__PURE__ */ e(
                  le,
                  {
                    checked: !!(l && l.indexOf(r) > -1 && !(o.length == l.length && p)),
                    onChange: (V) => D(r),
                    label: a
                  }
                )
              ]
            },
            x
          )) })
        ] })
      }
    )
  );
}), xe = Y(
  j,
  W
)(
  ({
    placeholder: t,
    startLabel: s,
    endLabel: n,
    options: i,
    onChange: o,
    app: f,
    group: d,
    param: u,
    current: l,
    autoApply: m
  }) => {
    const [c, L] = $(i[0].position), [g, E] = $(i[i.length - 1].position);
    Z(() => {
      const N = i.filter(
        (h) => (h.position > c || h.position === c) && (h.position < g || h.position === g)
      ).map((h) => h.value);
      o({ app: f, group: d, param: u, value: N, autoApply: m });
    }, [c, g]);
    const _ = ee(null);
    return /* @__PURE__ */ e(
      I,
      {
        ref: _,
        fluid: !0,
        text: `${t} (${l ? l.filter((N) => N != Number.MIN_SAFE_INTEGER).length : 0}/${i.length})`,
        scrolling: !1,
        button: !0,
        multiple: !0,
        search: !0,
        floating: !1,
        icon: "angle down ignore",
        className: `${l && l.length > 0 ? "applied " : ""} range`,
        children: /* @__PURE__ */ F(I.Menu, { children: [
          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ F(I.Item, { children: [
            " ",
            /* @__PURE__ */ e(P, { basic: !0, children: s })
          ] }) }),
          /* @__PURE__ */ e(b, { children: i.map(({ value: N, text: h, position: p }) => /* @__PURE__ */ e(I.Item, { children: /* @__PURE__ */ e(
            H,
            {
              disabled: p > g,
              checked: c === p,
              onChange: (S) => L(p),
              label: h
            }
          ) })) }),
          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ F(I.Item, { children: [
            " ",
            /* @__PURE__ */ e(P, { basic: !0, children: n })
          ] }) }),
          /* @__PURE__ */ e(b, { children: i.map(({ value: N, text: h, position: p }) => /* @__PURE__ */ e(I.Item, { children: /* @__PURE__ */ e(
            H,
            {
              disabled: p < c,
              checked: g === p,
              onChange: (S) => E(p),
              label: h
            }
          ) })) })
        ] })
      }
    );
  }
), Ee = (t) => {
  const { data: s, type: n, showNoDataOption: i } = t, o = s.filter((c) => c.type === n)[0], f = o ? o.items.filter((c) => !i && c.code == de ? !1 : t.hiddenFilters && t.hiddenFilters.length > 0 ? t.hiddenFilters.indexOf(c.id) == -1 : !0) : [], d = f ? ge(f, t.locale) : [], u = s.find((c) => c.type = "FilterDefinition"), l = u ? u.items.find((c) => c.fieldType == n) : null, m = l ? l.value : "Filter";
  return /* @__PURE__ */ e(b, { fluid: !0, className: "filter", children: /* @__PURE__ */ e(
    q,
    {
      ...t,
      options: d,
      placeholder: t.placeholder ? t.placeholder : m
    }
  ) });
}, Se = Y(
  j,
  W
)((t) => {
  let s = 0;
  const n = [
    {
      key: "Yes",
      value: !0,
      text: "Yes",
      position: s++
    },
    {
      key: "No",
      value: !1,
      text: "No",
      position: s++
    }
  ];
  return /* @__PURE__ */ e(b, { fluid: !0, className: "filter", children: /* @__PURE__ */ e(q, { options: n, ...t }) });
}), Te = (t) => {
  const { csvValue: s } = t;
  let n = 0;
  const i = s.split(",").map((o) => ({
    key: o,
    value: o,
    text: o,
    icon: o.toLocaleLowerCase(),
    position: n++
  }));
  return /* @__PURE__ */ e(b, { fluid: !0, className: "filter", children: /* @__PURE__ */ e(q, { options: i, ...t, children: " " }) });
}, Ie = (t) => /* @__PURE__ */ e(ce, { locale: t.intl.locale, changeUUID: t.unique, children: /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ e(ve, { ...t }) }) }), ve = ({
  unique: t,
  "data-group": s,
  "data-app": n,
  "data-dvz-proxy-dataset-id": i,
  "data-param": o,
  "data-icon": f,
  "data-type": d,
  "data-place-holder": u,
  "data-is-range": l = "false",
  "data-all-label": m,
  "data-none-label": c,
  "data-start-label": L,
  "data-end-label": g,
  "data-csv-value": E,
  "data-filters": _ = "[]",
  "data-use-single-column": N = "false",
  "data-enable-text-search": h = "false",
  "data-filter-type": p,
  "data-default-values": S,
  "data-show-no-data-option": w = "true",
  "data-default-value-criteria": A = "DEFAULT_VALUE_INPUT",
  "data-hidden-filters": R = "[]",
  "data-all-none-same-behaviour": B = "false",
  "data-close-on-select": D = "false",
  "data-alphabetical-sort": G = "true",
  "data-asc-order": y = "true",
  "data-auto-apply": k = "true",
  settings: J,
  intl: T
}) => {
  const C = {}, U = _ ? X(_) : {};
  U && U.forEach && U.forEach((x) => {
    x.value != null && x.value.filter((V) => V != null && V.toString().trim() != "").length > 0 && (C[x.param] = x.value);
  }), i && (C.dvzProxyDatasetId = i);
  const r = R ? X(R) : [];
  let a;
  return p == null || p == "" ? a = l === "true" ? "range" : "multi-select" : a = p, n === "csv" ? /* @__PURE__ */ e(
    Te,
    {
      allLabel: m,
      noneLabel: c,
      isRange: l === "true",
      csvValue: E,
      app: n,
      group: s,
      icon: f,
      placeholder: u,
      startLabel: L,
      endLabel: g,
      param: o,
      ascOrder: y,
      useSingleColumn: N === "true",
      enableTextSearch: h === "true",
      filterType: a,
      defaultValues: S,
      defaultValueCriteria: A,
      allNoneSameBehaviour: B === "true",
      closeOnSelect: D === "true",
      locale: T.locale
    }
  ) : n ? /* @__PURE__ */ e(
    ae,
    {
      dvzProxyDatasetId: i,
      params: C,
      app: n,
      uniqueStorage: U.length > 0 ? t : null,
      hiddenFilters: r || [],
      children: /* @__PURE__ */ e(K, { children: /* @__PURE__ */ F(b, { fluid: !0, children: [
        d === "Boolean" && /* @__PURE__ */ e(
          Se,
          {
            startLabel: L,
            endLabel: g,
            allLabel: m,
            noneLabel: c,
            isRange: v(l),
            app: n,
            group: s,
            icon: f,
            placeholder: u,
            param: o,
            filterType: a,
            defaultValues: S,
            locale: T.locale
          }
        ),
        d !== "Boolean" && /* @__PURE__ */ e(K, { type: d, children: /* @__PURE__ */ e(
          Ee,
          {
            startLabel: L,
            endLabel: g,
            allLabel: m,
            noneLabel: c,
            isRange: v(l),
            app: n,
            group: s,
            icon: f,
            placeholder: u,
            param: o,
            alphabeticalSort: G,
            ascOrder: y,
            useSingleColumn: v(N),
            enableTextSearch: v(h),
            showNoDataOption: v(w),
            filterType: a,
            defaultValues: S,
            defaultValueCriteria: A,
            hiddenFilters: r || [],
            allNoneSameBehaviour: B == "true",
            autoApply: v(k),
            closeOnSelect: v(D),
            locale: T.locale
          }
        ) })
      ] }) })
    }
  ) : null;
}, Oe = se(Ie);
export {
  Oe as default
};