@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/filtercontainer/index.es.js

@@ -1,67 +1,94 @@
-import { defineComponent as G, ref as N, shallowRef as S, onMounted as I, onBeforeUnmount as K, watch as Q, withDirectives as z, createElementBlock as k, openBlock as v, mergeProps as b, withModifiers as X, unref as w, createElementVNode as Y, Fragment as D, renderList as Z, createBlock as F, renderSlot as ee, createVNode as C, vShow as te } from "vue";
-import { a as ae } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { e as p } from "../event-bus/index.es.js";
-import { u as oe } from "../plugins/WangsVue.es.js";
-import { g as x, s as re } from "../utils/object.util.es.js";
-import { _ as R } from "../button/index.es.js";
-import { _ as ne } from "../calendar/index.es.js";
-import { _ as se } from "../dropdown/index.es.js";
-import { _ as le } from "../inputrangenumber/index.es.js";
-import { _ as ie } from "../multiselect/index.es.js";
-const J = (n) => {
-  if (Array.isArray(n)) {
-    const [c, o] = n;
+import { defineComponent, ref, shallowRef, onMounted, onBeforeUnmount, watch, withDirectives, createElementBlock, openBlock, mergeProps, withModifiers, unref, createElementVNode, Fragment, renderList, createBlock, renderSlot, createVNode, vShow } from "vue";
+import { a as useForm } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { e as eventBus } from "../event-bus/index.es.js";
+import { u as useWangsVueConfig } from "../plugins/WangsVue.es.js";
+import { g as getNestedPropertyValue, s as setNestedPropertyValue } from "../utils/object.util.es.js";
+import { _ as _sfc_main$5 } from "../button/index.es.js";
+import { _ as _sfc_main$4 } from "../calendar/index.es.js";
+import { _ as _sfc_main$3 } from "../dropdown/index.es.js";
+import { _ as _sfc_main$1 } from "../inputrangenumber/index.es.js";
+import { _ as _sfc_main$2 } from "../multiselect/index.es.js";
+const formatDateTimeRange = (e) => {
+  if (Array.isArray(e)) {
+    const [start, end] = e;
     return [
-      new Date(c).setHours(0, 0, 0),
-      new Date(o ?? c).setHours(23, 59, 59)
+      new Date(start).setHours(0, 0, 0),
+      new Date(end ?? start).setHours(23, 59, 59)
     ];
   }
-}, ce = (n, c, o) => {
-  const m = Object.keys(n), s = {};
-  p.emit("multi-select:hide-overlay"), m.forEach((r) => {
-    var f;
-    const l = Array.isArray(n[r]), $ = typeof n[r] == "string", i = l ? (f = n[r]) == null ? void 0 : f.filter((h) => h != null) : n[r];
-    if ((i != null && !l || l && i.length) && !$) {
-      if (Array.isArray(i) && i.every(
-        (d) => typeof d == "number" && d > 9466848e5 && // Greater than 2000-01-01 00:00:00 UTC (milliseconds)
-        !isNaN(new Date(d).getTime())
+};
+const applyFilter = (values, tableName, emit) => {
+  const fields = Object.keys(values);
+  const parsedFilter = {};
+  eventBus.emit("multi-select:hide-overlay");
+  fields.forEach((field) => {
+    var _a;
+    const isArray = Array.isArray(values[field]);
+    const isAlreadyString = typeof values[field] === "string";
+    const filteredValues = isArray ? (_a = values[field]) == null ? void 0 : _a.filter((each) => each != null) : values[field];
+    if ((filteredValues != null && !isArray || isArray && filteredValues.length) && !isAlreadyString) {
+      const isEpochTimeArray = Array.isArray(filteredValues) && filteredValues.every(
+        (num) => typeof num === "number" && num > 9466848e5 && // Greater than 2000-01-01 00:00:00 UTC (milliseconds)
+        !isNaN(new Date(num).getTime())
         // Converts to a valid date
-      )) {
-        s[r] = JSON.stringify(
+      );
+      if (isEpochTimeArray) {
+        parsedFilter[field] = JSON.stringify(
           // Adjust the end range time to 23.59.59 and the start to 00.00.00 to fix filtering issue when user only select a date
-          J(i)
+          formatDateTimeRange(filteredValues)
         );
         return;
       }
-      s[r] = i != null && i.length ? JSON.stringify(n[r]) : JSON.stringify(i);
-    } else
-      s[r] = n[r];
-  }), p.emit("data-table:apply-filter", {
-    tableName: c,
-    filter: s
-  }), p.emit("data-table:clear-selected-data", {
-    tableName: c
-  }), o == null || o("apply", s);
-}, ue = (n, c, o, m) => {
-  const s = {};
-  p.emit("multi-select:hide-overlay"), o.forEach((r) => {
-    if ("field" in r) {
-      const l = x(n, r.field);
-      "value" in l && l.value != null && (s[r.field] = l, "matchMode" in l && l.matchMode == "DATE_BETWEEN" && (s[r.field].value = J(
-        l.value
-      )), Array.isArray(l.value) && !l.value.filter(Boolean).length && delete s[r.field]);
+      parsedFilter[field] = (filteredValues == null ? void 0 : filteredValues.length) ? JSON.stringify(values[field]) : JSON.stringify(filteredValues);
+    } else {
+      parsedFilter[field] = values[field];
     }
-  }), p.emit("data-table:apply-filter", {
-    tableName: c,
-    filter: s
-  }), p.emit("data-table:clear-selected-data", {
-    tableName: c
-  }), m == null || m("apply", s);
-}, pe = {
+  });
+  eventBus.emit("data-table:apply-filter", {
+    tableName,
+    filter: parsedFilter
+  });
+  eventBus.emit("data-table:clear-selected-data", {
+    tableName
+  });
+  emit == null ? void 0 : emit("apply", parsedFilter);
+};
+const applyStaticFilter = (values, tableName, fields, emit) => {
+  const nonEmptyFilterValues = {};
+  eventBus.emit("multi-select:hide-overlay");
+  fields.forEach((field) => {
+    if ("field" in field) {
+      const filterValue = getNestedPropertyValue(values, field.field);
+      if ("value" in filterValue && filterValue.value != null) {
+        nonEmptyFilterValues[field.field] = filterValue;
+        if ("matchMode" in filterValue && filterValue.matchMode == "DATE_BETWEEN") {
+          nonEmptyFilterValues[field.field].value = formatDateTimeRange(
+            filterValue.value
+          );
+        }
+        if (Array.isArray(filterValue.value) && !filterValue.value.filter(Boolean).length) {
+          delete nonEmptyFilterValues[field.field];
+        }
+      }
+    }
+  });
+  eventBus.emit("data-table:apply-filter", {
+    tableName,
+    filter: nonEmptyFilterValues
+  });
+  eventBus.emit("data-table:clear-selected-data", {
+    tableName
+  });
+  emit == null ? void 0 : emit("apply", nonEmptyFilterValues);
+};
+const _hoisted_1 = {
   class: "flex items-end justify-end gap-2",
   "data-wv-section": "filteractionbuttons"
-}, Fe = /* @__PURE__ */ G({
-  inheritAttrs: !1,
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FilterContainer",
   props: {
     tableName: { default: "datatable" },
@@ -70,201 +97,251 @@ const J = (n) => {
     static: { type: Boolean }
   },
   emits: ["apply"],
-  setup(n, { emit: c }) {
-    const o = n, m = c, { locale: s } = oe("FilterContainer"), { resetForm: r, handleSubmit: l, setValues: $ } = ae(), i = N({}), f = N({}), h = S(), d = N(null), M = S(!1), T = S(0);
-    I(() => {
-      B(), p.on("show-filter", O), p.on("data-table:updated", P), U();
-    }), K(() => {
-      p.off("show-filter", O), p.off("data-table:updated", P);
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { locale } = useWangsVueConfig("FilterContainer");
+    const { resetForm, handleSubmit, setValues } = useForm();
+    const loading = ref({});
+    const filterOption = ref({});
+    const tableData = shallowRef();
+    const container = ref(null);
+    const showFilter = shallowRef(false);
+    const fieldsKey = shallowRef(0);
+    onMounted(() => {
+      setGridFieldsLayout();
+      eventBus.on("show-filter", updateShowFilter);
+      eventBus.on("data-table:updated", assignTableData);
+      setStaticMatchModeFields();
+    });
+    onBeforeUnmount(() => {
+      eventBus.off("show-filter", updateShowFilter);
+      eventBus.off("data-table:updated", assignTableData);
     });
-    const A = o.fields.filter(
-      (t) => t.visible !== !1
-    ), O = (t) => {
-      t.tableName === o.tableName && (M.value = t.show);
-    }, P = (t) => {
-      t.tableName === o.tableName && (h.value = t.data);
-    }, V = async (t, a, e = {}) => {
-      if (o.static && !t)
-        f.value[a] = L(a);
-      else
+    const visibleFields = props.fields.filter(
+      (field) => field.visible !== false
+    );
+    const updateShowFilter = (e) => {
+      if (e.tableName === props.tableName) {
+        showFilter.value = e.show;
+      }
+    };
+    const assignTableData = (e) => {
+      if (e.tableName === props.tableName) tableData.value = e.data;
+    };
+    const getOptions = async (fn, field, queryParams = {}) => {
+      if (props.static && !fn) {
+        filterOption.value[field] = getTablePopulatedOptions(field);
+      } else
         try {
-          i.value[a] = !0;
-          const u = { [a]: !0, ...e }, y = await (t == null ? void 0 : t(u));
-          if ("data" in y) {
-            const { data: _ } = y;
-            f.value[a] = _.data[a];
-          } else Array.isArray(y) && (f.value[a] = y);
-        } catch (u) {
-          console.error(u);
+          loading.value[field] = true;
+          const params = { [field]: true, ...queryParams };
+          const optionOrResData = await (fn == null ? void 0 : fn(params));
+          if ("data" in optionOrResData) {
+            const { data } = optionOrResData;
+            filterOption.value[field] = data.data[field];
+          } else if (Array.isArray(optionOrResData))
+            filterOption.value[field] = optionOrResData;
+        } catch (error) {
+          console.error(error);
         } finally {
-          i.value[a] = !1;
+          loading.value[field] = false;
         }
-    }, L = (t) => {
-      const a = /* @__PURE__ */ new Set();
-      if (h.value)
-        for (let e = 0; e < h.value.length; e++) {
-          const u = x(h.value[e], t);
-          a.add(u);
+    };
+    const getTablePopulatedOptions = (field) => {
+      const uniqueValues = /* @__PURE__ */ new Set();
+      if (tableData.value) {
+        for (let i = 0; i < tableData.value.length; i++) {
+          const fieldValue = getNestedPropertyValue(tableData.value[i], field);
+          uniqueValues.add(fieldValue);
         }
-      return Array.from(a).map((e) => ({ label: e, value: e }));
-    }, B = () => {
-      if (d.value) {
-        const { children: t } = d.value, a = d.value.childElementCount, e = a % o.fieldsPerRow;
-        let [u, y] = [1, 1];
-        for (const _ in Array.from({ length: a })) {
-          const q = Number(_) === a - 1;
-          t[_].setAttribute(
+      }
+      return Array.from(uniqueValues).map((v) => ({ label: v, value: v }));
+    };
+    const setGridFieldsLayout = () => {
+      if (container.value) {
+        const { children } = container.value;
+        const childCount = container.value.childElementCount;
+        const isOdd = childCount % props.fieldsPerRow;
+        let [rowPos, colPos] = [1, 1];
+        for (const i in Array.from({ length: childCount })) {
+          const isLast = Number(i) === childCount - 1;
+          children[i].setAttribute(
             "style",
-            `grid-area: ${u}/${q && e ? o.fieldsPerRow : y}`
-          ), ++y > o.fieldsPerRow && (y = 1, u++);
+            `grid-area: ${rowPos}/${isLast && isOdd ? props.fieldsPerRow : colPos}`
+          );
+          if (++colPos > props.fieldsPerRow) {
+            colPos = 1;
+            rowPos++;
+          }
         }
       }
-    }, W = () => {
-      r(), T.value++;
-    }, E = l((t) => {
-      o.static ? ue(t, o.tableName, A, m) : ce(t, o.tableName, m);
-    }), j = (t, a) => {
-      var e;
-      switch (t.type) {
+    };
+    const clear = () => {
+      resetForm();
+      fieldsKey.value++;
+    };
+    const apply = handleSubmit((values) => {
+      if (props.static)
+        applyStaticFilter(values, props.tableName, visibleFields, emit);
+      else applyFilter(values, props.tableName, emit);
+    });
+    const getMatchModeField = (field, index) => {
+      var _a;
+      switch (field.type) {
         case "rangenumber":
-          return t.field ? `${t.field}.matchMode` : `${(e = t.fields) == null ? void 0 : e[a]}.matchMode`;
+          if (field.field) return `${field.field}.matchMode`;
+          return `${(_a = field.fields) == null ? void 0 : _a[index]}.matchMode`;
         case "multiselect":
         case "dropdown":
         case "calendar":
         case "category":
         case "group":
-          return `${t.field}.matchMode`;
-      }
-    }, H = (t) => (() => {
-      switch (t.type) {
-        case "rangenumber":
-          return "BETWEEN";
-        case "multiselect":
-        case "category":
-        case "group":
-          return "IN";
-        case "dropdown":
-          return "EQUALS";
-        case "calendar":
-          return "DATE_BETWEEN";
+          return `${field.field}.matchMode`;
       }
-    })(), U = () => {
-      if (o.static) {
-        const t = {};
-        A.forEach((a) => {
-          re(
-            t,
-            j(a),
-            H(a)
+    };
+    const getMatchModeValue = (field) => {
+      return (() => {
+        switch (field.type) {
+          case "rangenumber":
+            return "BETWEEN";
+          case "multiselect":
+          case "category":
+          case "group":
+            return "IN";
+          case "dropdown":
+            return "EQUALS";
+          case "calendar":
+            return "DATE_BETWEEN";
+        }
+      })();
+    };
+    const setStaticMatchModeFields = () => {
+      if (props.static) {
+        const matchModes = {};
+        visibleFields.forEach((field) => {
+          setNestedPropertyValue(
+            matchModes,
+            getMatchModeField(field),
+            getMatchModeValue(field)
           );
-        }), $(t);
+        });
+        setValues(matchModes);
       }
-    }, g = (t, a) => {
-      switch (t.type) {
+    };
+    const getValueField = (field, index) => {
+      switch (field.type) {
         case "rangenumber":
-          return t.field ? o.static ? `${t.field}.value.${a}` : `${t.field}.${a}` : o.static ? `${t.fields[a]}.value` : t.fields[a];
+          if (field.field)
+            return props.static ? `${field.field}.value.${index}` : `${field.field}.${index}`;
+          return props.static ? `${field.fields[index]}.value` : field.fields[index];
         case "multiselect":
         case "dropdown":
         case "calendar":
         case "category":
         case "group":
-          return o.static ? `${t.field}.value` : `${t.field}`;
+          return props.static ? `${field.field}.value` : `${field.field}`;
       }
     };
-    return Q(() => o.fields, B), (t, a) => z((v(), k("form", b({
-      ref_key: "container",
-      ref: d
-    }, t.$preset.filtercontainer.root, {
-      style: `grid-template-columns: repeat(${t.fieldsPerRow}, 1fr)`,
-      onSubmit: a[0] || (a[0] = X(
-        //@ts-ignore
-        (...e) => w(E) && w(E)(...e),
-        ["prevent"]
-      )),
-      "data-wv-name": "filtercontainer"
-    }), [
-      (v(!0), k(D, null, Z(w(A), (e) => (v(), k(D, {
-        key: JSON.stringify(e) + T.value
-      }, [
-        e.type == "rangenumber" ? (v(), F(le, b({
-          key: 0,
-          ref_for: !0
-        }, e, {
-          mandatory: !1,
-          "max-field-name": g(e, 1),
-          "min-field-name": g(e, 0),
-          "show-optional-text": !1,
-          "use-validator": ""
-        }), null, 16, ["max-field-name", "min-field-name"])) : e.type == "multiselect" ? (v(), F(ie, b({
-          key: 1,
-          ref_for: !0
-        }, e, {
-          "field-name": g(e),
-          loading: i.value[e.optionField ?? e.field],
-          mandatory: !1,
-          options: f.value[e.optionField ?? e.field],
-          "show-optional-text": !1,
-          onShow: (u) => V(
-            e.fetchOptionFn,
-            e.optionField ?? e.field,
-            e.params
-          ),
-          "option-label": "label",
-          "option-value": "value",
-          "use-validator": ""
-        }), null, 16, ["field-name", "loading", "options", "onShow"])) : e.type == "dropdown" ? (v(), F(se, b({
-          key: 2,
-          ref_for: !0
-        }, e, {
-          "field-name": g(e),
-          loading: i.value[e.field],
-          mandatory: !1,
-          options: f.value[e.optionField ?? e.field],
-          "show-optional-text": !1,
-          onShow: (u) => V(
-            e.fetchOptionFn,
-            e.optionField ?? e.field,
-            e.params
-          ),
-          "option-label": "label",
-          "option-value": "value",
-          "use-validator": ""
-        }), null, 16, ["field-name", "loading", "options", "onShow"])) : e.type === "calendar" ? (v(), F(ne, b({
-          key: 3,
-          ref_for: !0
-        }, e, {
-          "field-name": g(e),
-          mandatory: !1,
-          "show-optional-text": !1,
-          "selection-mode": "range",
-          "use-validator": ""
-        }), null, 16, ["field-name"])) : ee(t.$slots, "field", {
-          key: 4,
-          field: e,
-          fieldName: g(e)
-        })
-      ], 64))), 128)),
-      Y("div", pe, [
-        C(R, {
-          label: w(s).clearFieldText,
-          onClick: W,
-          "data-wv-section": "clearbutton",
-          text: ""
-        }, null, 8, ["label"]),
-        C(R, {
-          label: w(s).applyText,
-          onClick: w(E),
-          "data-wv-section": "applybutton",
-          severity: "success"
-        }, null, 8, ["label", "onClick"])
-      ])
-    ], 16)), [
-      [te, M.value]
-    ]);
+    watch(() => props.fields, setGridFieldsLayout);
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("form", mergeProps({
+        ref_key: "container",
+        ref: container
+      }, _ctx.$preset.filtercontainer.root, {
+        style: `grid-template-columns: repeat(${_ctx.fieldsPerRow}, 1fr)`,
+        onSubmit: _cache[0] || (_cache[0] = withModifiers(
+          //@ts-ignore
+          (...args) => unref(apply) && unref(apply)(...args),
+          ["prevent"]
+        )),
+        "data-wv-name": "filtercontainer"
+      }), [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleFields), (field) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: JSON.stringify(field) + fieldsKey.value
+          }, [
+            field.type == "rangenumber" ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: 0,
+              ref_for: true
+            }, field, {
+              mandatory: false,
+              "max-field-name": getValueField(field, 1),
+              "min-field-name": getValueField(field, 0),
+              "show-optional-text": false,
+              "use-validator": ""
+            }), null, 16, ["max-field-name", "min-field-name"])) : field.type == "multiselect" ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+              key: 1,
+              ref_for: true
+            }, field, {
+              "field-name": getValueField(field),
+              loading: loading.value[field.optionField ?? field.field],
+              mandatory: false,
+              options: filterOption.value[field.optionField ?? field.field],
+              "show-optional-text": false,
+              onShow: ($event) => getOptions(
+                field.fetchOptionFn,
+                field.optionField ?? field.field,
+                field.params
+              ),
+              "option-label": "label",
+              "option-value": "value",
+              "use-validator": ""
+            }), null, 16, ["field-name", "loading", "options", "onShow"])) : field.type == "dropdown" ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
+              key: 2,
+              ref_for: true
+            }, field, {
+              "field-name": getValueField(field),
+              loading: loading.value[field.field],
+              mandatory: false,
+              options: filterOption.value[field.optionField ?? field.field],
+              "show-optional-text": false,
+              onShow: ($event) => getOptions(
+                field.fetchOptionFn,
+                field.optionField ?? field.field,
+                field.params
+              ),
+              "option-label": "label",
+              "option-value": "value",
+              "use-validator": ""
+            }), null, 16, ["field-name", "loading", "options", "onShow"])) : field.type === "calendar" ? (openBlock(), createBlock(_sfc_main$4, mergeProps({
+              key: 3,
+              ref_for: true
+            }, field, {
+              "field-name": getValueField(field),
+              mandatory: false,
+              "show-optional-text": false,
+              "selection-mode": "range",
+              "use-validator": ""
+            }), null, 16, ["field-name"])) : renderSlot(_ctx.$slots, "field", {
+              key: 4,
+              field,
+              fieldName: getValueField(field)
+            })
+          ], 64);
+        }), 128)),
+        createElementVNode("div", _hoisted_1, [
+          createVNode(_sfc_main$5, {
+            label: unref(locale).clearFieldText,
+            onClick: clear,
+            "data-wv-section": "clearbutton",
+            text: ""
+          }, null, 8, ["label"]),
+          createVNode(_sfc_main$5, {
+            label: unref(locale).applyText,
+            onClick: unref(apply),
+            "data-wv-section": "applybutton",
+            severity: "success"
+          }, null, 8, ["label", "onClick"])
+        ])
+      ], 16)), [
+        [vShow, showFilter.value]
+      ]);
+    };
   }
 });
 export {
-  Fe as _,
-  ce as a,
-  J as f
+  _sfc_main as _,
+  applyFilter as a,
+  formatDateTimeRange as f
 };