@hortiview/shared-components 0.0.7515 → 0.0.7544

package/dist/components/Filter/Filter.js

@@ -1,8 +1,8 @@
-import { jsx as t, jsxs as y, Fragment as I } from "react/jsx-runtime";
-import { Group as v, Modal as W, Button as u, Select as j, IconButton as z, NotificationBadge as N } from "@element/react-components";
-import { useState as g } from "react";
-import { s as a } from "../../genericTable.module-Dk3yy2S3.js";
-import { u as k } from "../../useBreakpoints-BNeVhjjZ.js";
+import { jsx as t, jsxs as B, Fragment as I } from "react/jsx-runtime";
+import { Group as y, Modal as T, Button as h, Select as W, Switch as j, IconButton as z, NotificationBadge as b } from "@element/react-components";
+import { useState as v } from "react";
+import { s as c } from "../../genericTable.module-Dk3yy2S3.js";
+import { u as A } from "../../useBreakpoints-BNeVhjjZ.js";
 import "../../alertBanner.module-HneYdVzN.js";
 import { I as H } from "../../Iconify-CY9lZjFd.js";
 import "../../react-tooltip.min-BzHiZW8k.js";
@@ -11,7 +11,7 @@ import "../../isArray-Ca4KR8TK.js";
 import "../../_baseToString-BNXOi2Mf.js";
 import "../../_equalByTag-DJhSpgVG.js";
 import "../../iconify.module-C89oaw5b.js";
-import "../../searchBar.module-9gKyrZRT.js";
+import { SearchBar as K } from "../SearchBar/SearchBar.js";
 import "../../listArea.module-CGpHPOji.js";
 import "../../verticalDivider.module-C3_GL-fH.js";
 import "../../baseView.module-ve87u_d0.js";
@@ -31,123 +31,139 @@ import "react-hook-form";
 import "../../formDatePicker.module-BV3ma_7y.js";
 import "../../formSelect.module-C18N-SsT.js";
 import "../../formText.module-C0by6_DK.js";
-const vt = ({
-  clearFilterText: l,
-  closeCallback: o,
-  currentFilter: r,
-  filterButtonAsIcon: e = !1,
-  filterButtonText: i,
-  filterModalTitle: f,
-  filters: m,
-  modalCancelButtonText: c,
-  modalConfirmButtonText: n,
-  useModal: C = !0
+const Bt = ({
+  clearFilterText: m,
+  closeCallback: a,
+  currentFilter: i,
+  filterButtonAsIcon: n = !1,
+  filterButtonText: r,
+  filterModalTitle: p,
+  filters: d,
+  modalCancelButtonText: u,
+  modalConfirmButtonText: s,
+  useModal: e = !0
 }) => {
-  const { isDesktop: b } = k(), [A, h] = g(!1), [s, x] = g(r), [_, B] = g(0), F = () => {
-    h(!1), o(s), B(
-      s.reduce((p, { selectedOptions: d }) => p + d.length, 0)
+  const { isDesktop: N } = A(), [w, g] = v(!1), [f, C] = v(i), [O, x] = v(0), S = () => {
+    g(!1), a(f), x(
+      f.reduce((l, { filterValue: o }) => o === void 0 ? l : typeof o == "boolean" ? o ? l + 1 : l : Array.isArray(o) ? l + o.length : typeof o == "string" && o.length ? l + 1 : l, 0)
     );
-  }, w = () => {
-    x([]), B(0);
-  }, S = (p) => {
-    const d = [
-      ...s.filter((D) => D.id !== p.id),
-      p
+  }, _ = () => {
+    C([]), x(0);
+  }, F = (l) => {
+    const o = [
+      ...f.filter((D) => D.id !== l.id),
+      l
     ];
-    x(d), C || o(d);
+    C(o), e || a(o);
   };
-  return C ? /* @__PURE__ */ y(I, { children: [
+  return e ? /* @__PURE__ */ B(I, { children: [
     /* @__PURE__ */ t(
-      K,
+      G,
       {
-        filterButtonText: i,
-        filterButtonAsIcon: e,
-        count: _,
-        onClick: () => h(!0)
+        filterButtonText: r,
+        filterButtonAsIcon: n,
+        count: O,
+        onClick: () => g(!0)
       }
     ),
     /* @__PURE__ */ t(
-      W,
+      T,
       {
-        open: A,
-        onClose: F,
-        title: f,
-        modalSize: b ? "small" : "fullscreen",
-        headerActions: /* @__PURE__ */ t(u, { variant: "text", onClick: w, children: l }),
-        dismissiveButton: /* @__PURE__ */ t(u, { variant: "outlined", onClick: () => h(!1), children: c }),
-        primaryButton: /* @__PURE__ */ t(u, { variant: "filled", onClick: F, children: n }),
-        children: /* @__PURE__ */ t(v, { direction: "vertical", children: O(m, s, S) })
+        open: w,
+        onClose: S,
+        title: p,
+        modalSize: N ? "small" : "fullscreen",
+        headerActions: /* @__PURE__ */ t(h, { variant: "text", onClick: _, children: m }),
+        dismissiveButton: /* @__PURE__ */ t(h, { variant: "outlined", onClick: () => g(!1), children: u }),
+        primaryButton: /* @__PURE__ */ t(h, { variant: "filled", onClick: S, children: s }),
+        children: /* @__PURE__ */ t(y, { direction: "vertical", children: k(d, f, F) })
       }
     )
-  ] }) : /* @__PURE__ */ t(v, { secondaryAlign: "center", fullWidth: !0, children: O(m, s, S, !1) });
-}, O = (l, o, r, e = !0) => l.map(({ id: i, title: f, availableOptions: m, icon: c }) => /* @__PURE__ */ y(v, { fullWidth: !0, secondaryAlign: "center", children: [
-  c ? /* @__PURE__ */ t(H, { icon: c, iconSize: "medium" }) : null,
-  /* @__PURE__ */ t(
-    j,
+  ] }) : /* @__PURE__ */ t(y, { secondaryAlign: "center", fullWidth: !0, children: k(d, f, F, !1) });
+}, k = (m, a, i, n = !0) => m.map(({ id: r, title: p, availableOptions: d, icon: u, type: s }) => /* @__PURE__ */ B(y, { fullWidth: !0, secondaryAlign: "center", children: [
+  u ? /* @__PURE__ */ t(H, { icon: u, iconSize: "medium" }) : null,
+  s === "select" && /* @__PURE__ */ t(
+    W,
     {
-      className: e ? void 0 : a.dense,
+      className: n ? void 0 : c.dense,
       variant: "outlined",
-      options: m,
-      label: f,
+      options: d,
+      label: p,
       multiSelect: !0,
       textKey: "text",
       valueKey: "id",
-      value: o.find((n) => n.id === i)?.selectedOptions ?? [],
-      onChange: (n) => r({ id: i, selectedOptions: n }),
+      value: a.find((e) => e.id === r)?.filterValue ?? [],
+      onChange: (e) => i({ id: r, type: s, filterValue: e }),
       hoisted: !0,
       menuMaxHeight: "300px",
-      disabled: i === "location",
+      disabled: r === "location",
       showOptionFilter: !1,
-      dense: !e,
-      fixedHeightInput: !e,
-      multiDisplayType: e ? "pills" : "text"
+      dense: !n,
+      fixedHeightInput: !n,
+      multiDisplayType: n ? "pills" : "text"
+    }
+  ),
+  s === "toggle" && /* @__PURE__ */ t(
+    j,
+    {
+      label: p,
+      onChange: (e) => i({ id: r, type: s, filterValue: e }),
+      checked: !!a.find((e) => e.id === r)?.filterValue
+    }
+  ),
+  s === "search" && /* @__PURE__ */ t(
+    K,
+    {
+      placeholder: p,
+      searchTerm: a.find((e) => e.id === r)?.filterValue,
+      setSearchTerm: (e) => i({ id: r, type: s, filterValue: e })
     }
   )
-] }, i)), K = ({
-  filterButtonText: l,
-  filterButtonAsIcon: o,
-  count: r,
-  onClick: e
+] }, r)), G = ({
+  filterButtonText: m,
+  filterButtonAsIcon: a,
+  count: i,
+  onClick: n
 }) => {
-  const { isDesktop: i } = k();
-  return o ? /* @__PURE__ */ t(
+  const { isDesktop: r } = A();
+  return a ? /* @__PURE__ */ t(
     z,
     {
       icon: "filter_list_alt",
-      onClick: e,
-      badge: r !== 0 && /* @__PURE__ */ t(
-        N,
+      onClick: n,
+      badge: i !== 0 && /* @__PURE__ */ t(
+        b,
         {
-          counter: r,
-          className: a.filterBadge,
+          counter: i,
+          className: c.filterBadge,
           themeColor: "secondary",
           "data-testid": "filter-badge"
         }
       )
     }
-  ) : /* @__PURE__ */ y(
+  ) : /* @__PURE__ */ B(
     "div",
     {
-      className: a.relativeParent,
-      style: { height: "100%", width: i ? void 0 : "100%" },
+      className: c.relativeParent,
+      style: { height: "100%", width: r ? void 0 : "100%" },
       children: [
         /* @__PURE__ */ t(
-          u,
+          h,
           {
             variant: "outlined",
             themeColor: "primary",
             leadingIcon: "filter_list_alt",
-            onClick: e,
-            className: a.filterButton,
-            fullWidth: !i,
-            children: l
+            onClick: n,
+            className: c.filterButton,
+            fullWidth: !r,
+            children: m
           }
         ),
-        r !== 0 && /* @__PURE__ */ t(
-          N,
+        i !== 0 && /* @__PURE__ */ t(
+          b,
           {
-            counter: r,
-            className: a.filterBadge,
+            counter: i,
+            className: c.filterBadge,
             themeColor: "secondary",
             "data-testid": "filter-badge"
           }
@@ -157,5 +173,5 @@ const vt = ({
   );
 };
 export {
-  vt as Filter
+  Bt as Filter
 };

package/dist/components/Filter/Filter.test.js

@@ -1,22 +1,23 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as u, t as c, w as x } from "../../react.esm-Dy4VzU4L.js";
-import { a as d } from "../../useBreakpoints-BNeVhjjZ.js";
+import { a, s as t, f as c, t as u, w as d } from "../../react.esm-Dy4VzU4L.js";
+import { a as s } from "../../useBreakpoints-BNeVhjjZ.js";
 import { Filter as T } from "./Filter.js";
-import { v as m, b as s, d as f, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
-const o = m.fn();
-s(() => {
-  m.spyOn(d, "useBreakpoints").mockReturnValue({
+import { v as x, b as f, d as y, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+const o = x.fn();
+f(() => {
+  x.spyOn(s, "useBreakpoints").mockReturnValue({
     isDesktop: !0,
     isMobile: !1,
     isTablet: !1,
     isDesktopNavbar: !1
   });
 });
-f("Filter", () => {
+y("Filter", () => {
   const l = [
     {
       id: "1",
       title: "Filter 1",
+      type: "select",
       icon: "farm",
       availableOptions: [
         { id: "1", text: "Option 1" },
@@ -26,14 +27,25 @@ f("Filter", () => {
     {
       id: "2",
       title: "Filter 2",
+      type: "select",
       availableOptions: [
         { id: "3", text: "Option 3" },
         { id: "4", text: "Option 4" }
       ]
+    },
+    {
+      id: "3",
+      title: "Filter Toggle",
+      type: "toggle"
+    },
+    {
+      id: "4",
+      title: "Filter Search",
+      type: "search"
     }
   ], n = [
-    { id: "1", selectedOptions: [{ id: "1", text: "Option 1" }] },
-    { id: "2", selectedOptions: [{ id: "3", text: "Option 3" }] }
+    { id: "1", filterValue: [{ id: "1", text: "Option 1" }], type: "select" },
+    { id: "2", filterValue: [{ id: "3", text: "Option 3" }], type: "select" }
   ];
   B("should render filter", () => {
     a(
@@ -50,9 +62,11 @@ f("Filter", () => {
           clearFilterText: "clearFilterText"
         }
       )
-    ), e(t.getByText("filterButtonText")).toBeInTheDocument(), e(t.getByText("filterModalTitle")).toBeInTheDocument(), e(t.getByText("modalCancelButtonText")).toBeInTheDocument(), e(t.getByText("modalConfirmButtonText")).toBeInTheDocument(), e(t.getByText("clearFilterText")).toBeInTheDocument(), e(t.getByText("Filter 1")).toBeInTheDocument(), e(t.getByText("Filter 2")).toBeInTheDocument(), e(t.getByText("Option 1")).toBeInTheDocument(), e(t.getByText("Option 3")).toBeInTheDocument(), e(t.getByTestId("farm")).toBeInTheDocument();
-    const i = t.getByRole("button", { name: "modalConfirmButtonText" });
-    u.click(i), c.act(() => {
+    ), e(t.getByText("filterButtonText")).toBeInTheDocument(), e(t.getByText("filterModalTitle")).toBeInTheDocument(), e(t.getByText("modalCancelButtonText")).toBeInTheDocument(), e(t.getByText("modalConfirmButtonText")).toBeInTheDocument(), e(t.getByText("clearFilterText")).toBeInTheDocument(), e(t.getByText("Filter 1")).toBeInTheDocument(), e(t.getByText("Filter 2")).toBeInTheDocument(), e(t.getByText("Option 1")).toBeInTheDocument(), e(t.getByText("Option 3")).toBeInTheDocument(), e(t.getByTestId("farm")).toBeInTheDocument(), e(t.getByText("Filter Toggle")).toBeInTheDocument();
+    const i = t.getByRole("textbox");
+    e(i.getAttribute("placeholder")).toBe("Filter Search");
+    const m = t.getByRole("button", { name: "modalConfirmButtonText" });
+    c.click(m), u.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.getByText("2")).toBeInTheDocument();
     });
   }), B("should clear filter", () => {
@@ -72,7 +86,7 @@ f("Filter", () => {
       )
     );
     const i = t.getByText("clearFilterText");
-    u.click(i), c.act(() => {
+    c.click(i), u.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.queryByTestId("filter-badge")).not.toBeInTheDocument();
     });
   }), B("should close filter", () => {
@@ -92,9 +106,9 @@ f("Filter", () => {
       )
     );
     const i = t.getByRole("button", { name: "modalCancelButtonText" });
-    u.click(i), c.act(() => {
+    c.click(i), u.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.queryByTestId("filter-badge")).not.toBeInTheDocument();
-    }), x(() => {
+    }), d(() => {
       e(t.queryByText("filterModalTitle")).not.toBeInTheDocument(), e(t.queryByText("modalCancelButtonText")).not.toBeInTheDocument(), e(t.queryByText("modalConfirmButtonText")).not.toBeInTheDocument(), e(t.queryByText("clearFilterText")).not.toBeInTheDocument();
     });
   }), B("should render as icon button ", () => {

package/dist/components/FormComponents/FormSelect/FormSelect.d.ts

@@ -4,7 +4,7 @@ import { FieldPath, FieldValues, Path, RegisterOptions } from 'react-hook-form';
 /**
  * a generic FormSelector property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
  */
-type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'className' | 'clearable' | 'disabled' | 'helperText' | 'helperTextPersistent' | 'hidden' | 'hoisted' | 'label' | 'menuMaxHeight' | 'multi' | 'multiSelect' | 'noOptionsMessage' | 'onChange' | 'options' | 'searchable' | 'textKey' | 'valid' | 'value' | 'valueKey' | 'variant'> & {
+type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'className' | 'clearable' | 'disabled' | 'helperText' | 'helperTextPersistent' | 'hidden' | 'hoisted' | 'label' | 'menuMaxHeight' | 'multi' | 'multiSelect' | 'noOptionsMessage' | 'options' | 'searchable' | 'textKey' | 'valid' | 'value' | 'valueKey' | 'variant'> & {
     /** the name of the property in the form */
     propertyName: Path<T>;
     /** the label of the select */

package/dist/components/FormComponents/FormSelect/FormSelect.js

@@ -3,25 +3,25 @@ import { Select as k } from "@element/react-components";
 import { g as h } from "../../../get-UxX31Aph.js";
 import { i as z } from "../../../isArray-Ca4KR8TK.js";
 import { useMemo as S } from "react";
-import { useFormContext as B, Controller as v } from "react-hook-form";
+import { useFormContext as B, Controller as C } from "react-hook-form";
 import { H as G } from "../../../react-tooltip.min-BzHiZW8k.js";
 import { SelectTooltipText as J } from "./SelectTooltipText.js";
-import { s as l } from "../../../formSelect.module-C18N-SsT.js";
+import { s as a } from "../../../formSelect.module-C18N-SsT.js";
 const N = ({
   propertyName: r,
   label: d,
-  options: o,
-  multi: a = !1,
+  options: n,
+  multi: m = !1,
   disabled: F = !1,
   hoisted: I = !1,
   hidden: $ = !1,
   valueKey: i = "value",
   textKey: T = "text",
   clearable: j = !1,
-  searchable: w = !0,
-  noOptionsMessage: A = "",
-  rules: n,
-  ...m
+  searchable: v = !0,
+  noOptionsMessage: w = "",
+  rules: o,
+  ...l
 }) => {
   const {
     control: p,
@@ -29,12 +29,12 @@ const N = ({
   } = B(), c = S(
     () => !H && h(s, r) !== void 0,
     [s, r, H]
-  ), C = S(
-    () => n?.required?.value,
-    [n]
+  ), A = S(
+    () => o?.required?.value,
+    [o]
   ), D = S(
-    () => n?.required?.message,
-    [n]
+    () => o?.required?.message,
+    [o]
   ), E = () => {
     if (s && s[r]) {
       const u = s[r]?.message;
@@ -42,33 +42,33 @@ const N = ({
     }
     return D;
   };
-  return $ ? /* @__PURE__ */ e(v, { name: r, control: p, render: () => /* @__PURE__ */ e(M, {}) }) : /* @__PURE__ */ e("div", { className: l.formSelectContainer, "data-tooltip-id": d, children: /* @__PURE__ */ e(
-    v,
+  return $ ? /* @__PURE__ */ e(C, { name: r, control: p, render: () => /* @__PURE__ */ e(M, {}) }) : /* @__PURE__ */ e("div", { className: a.formSelectContainer, "data-tooltip-id": d, children: /* @__PURE__ */ e(
+    C,
     {
       name: r,
-      rules: n,
+      rules: o,
       control: p,
       render: ({ field: { ref: u, onChange: x, value: q, ...O } }) => {
-        let g = o;
-        z(o) && h(o[0], "options") !== void 0 && (g = o.flatMap((t) => h(t, "options") ?? []));
-        const f = a ? g?.filter(
+        let g = n;
+        z(n) && h(n[0], "options") !== void 0 && (g = n.flatMap((t) => h(t, "options") ?? []));
+        const f = m ? g?.filter(
           (t) => q?.includes(t[i])
-        ) : g?.find((t) => t[i] === q), P = a && m.multiDisplayType === "text" && m.fixedHeightInput;
+        ) : g?.find((t) => t[i] === q), P = m && l.multiDisplayType === "text" && l.fixedHeightInput;
         return /* @__PURE__ */ b(M, { children: [
           /* @__PURE__ */ e(
             k,
             {
               ...O,
-              ...m,
+              ...l,
               value: f ?? [],
               label: d,
               variant: "outlined",
               helperText: E(),
-              helperTextPersistent: C || c,
-              options: o,
+              helperTextPersistent: A || c,
+              options: n,
               valid: !c,
-              multiSelect: a,
-              className: `${l.formSelect} ${c ? l.invalid : ""} ${P ? l.multiText : ""}`,
+              multiSelect: m,
+              className: `${a.formSelect} ${c ? a.invalid : ""} ${P ? a.multiText : ""}`,
               disabled: F,
               valueKey: i,
               textKey: T,
@@ -77,15 +77,15 @@ const N = ({
                   x(t);
                   return;
                 }
-                if (a) {
+                if (m) {
                   x(t.map((V) => V[i]));
                   return;
                 }
-                x(t[i]);
+                x(t[i]), l?.onChange?.(t);
               },
               hoisted: I,
-              noOptionsMessage: A,
-              searchable: w,
+              noOptionsMessage: w,
+              searchable: v,
               clearable: j,
               menuMaxHeight: "15rem"
             }
@@ -97,8 +97,8 @@ const N = ({
               noArrow: !0,
               place: "bottom",
               delayShow: 420,
-              className: l.tooltip,
-              hidden: !f || f.length === 0 || !m.fixedHeightInput,
+              className: a.tooltip,
+              hidden: !f || f.length === 0 || !l.fixedHeightInput,
               children: /* @__PURE__ */ e(J, { value: f, textKey: T, valueKey: i })
             }
           )

package/dist/components/GenericTable/GenericTable.js

@@ -80,7 +80,7 @@ const dr = ({
               {
                 className: e.filterBar,
                 fullWidth: !0,
-                primaryAlign: "center",
+                primaryAlign: "end",
                 secondaryAlign: "center",
                 children: i.map((d, N) => /* @__PURE__ */ r(j, { children: d }, `action_${N}_${d.key}`))
               }

package/dist/types/Filter.d.ts

@@ -1,15 +1,28 @@
+type FilterDataCommon = {
+    id: string;
+    title: string;
+    icon?: string;
+};
+type FilterDataType = {
+    type: 'select';
+    /**
+     * Available options for the filter
+     */
+    availableOptions: FilterOption[];
+} | {
+    type: 'toggle';
+    availableOptions?: never;
+} | {
+    type: 'search';
+    availableOptions?: never;
+};
 /**
  * Filter data type
  * @param id - filter id (unique)
  * @param title - filter title
  * @param availableOptions - available options for the filter
  */
-export type FilterData = {
-    id: string;
-    title: string;
-    icon?: string;
-    availableOptions: FilterOption[];
-};
+export type FilterData = FilterDataCommon & FilterDataType;
 /**
  * Filter option data type
  * @param id - option id (unique)
@@ -21,12 +34,23 @@ export type FilterOption = {
     text: string;
     icon?: string;
 };
+type FilterSelectionCommon = {
+    id: string;
+};
+type FilterSelectionType = {
+    type: 'select';
+    filterValue: FilterOption[];
+} | {
+    type: 'toggle';
+    filterValue: boolean;
+} | {
+    type: 'search';
+    filterValue: string | undefined;
+};
 /**
  * Filter selection data type
  * @param id - filter id (unique)
  * @param selectedOptions - selected options of the filter (multiple)
  */
-export type FilterSelection = {
-    id: string;
-    selectedOptions: FilterOption[];
-};
+export type FilterSelection = FilterSelectionCommon & FilterSelectionType;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.7515",
+  "version": "0.0.7544",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",