@feedmepos/mf-inventory-portal 1.2.30-dev.1 → 1.2.31-dev.1

package/dist/FmInventoryTableToolbar.vue_vue_type_script_setup_true_lang-Csesow4V.js

@@ -0,0 +1,279 @@
+import { defineComponent as I, computed as g, ref as z, resolveComponent as h, openBlock as n, createElementBlock as y, createVNode as _, withCtx as L, createElementVNode as f, toDisplayString as Y, unref as u, createBlock as p, createCommentVNode as w, Fragment as $, renderList as R, watch as E, mergeModels as O, useModel as C, renderSlot as H, normalizeClass as S } from "vue";
+import { useCoreStore as W, useI18n as P } from "@feedmepos/mf-common";
+import { u as q } from "./app-DYsP0gKj.js";
+import { d as U } from "./date2-BO7HiZTk.js";
+import { useBreakpoints as G } from "@feedmepos/ui-library";
+import { u as J, F as K } from "./SingleColumnLayout.vue_vue_type_script_setup_true_lang-CWZkVCAj.js";
+import { b as A } from "./app-rgirz_52.js";
+const X = { class: "inline-flex" }, Z = { class: "inline-flex rounded-md items-center gap-4 justify-center h-[30px] px-8 py-4 bg-fm-color-neutral-gray-100 cursor-pointer text-fm-color-neutral-gray-400" }, ee = { class: "fm-typo-en-body-md-600 select-none text-ellipsis overflow-hidden whitespace-nowrap" }, te = { class: "relative" }, oe = { class: "sticky top-0 py-8 bg-white translate-y-[-12px]" }, ne = /* @__PURE__ */ I({
+  __name: "ChangeLocationComponent",
+  props: {
+    showBusiness: { type: Boolean }
+  },
+  setup(i) {
+    const o = q(), m = W(), c = g(() => {
+      var e;
+      return (e = m.currentBusiness.value) == null ? void 0 : e.name;
+    }), { t: v } = P(), d = z(""), a = g({
+      get() {
+        return o.businessLevel;
+      },
+      set(e) {
+        o.businessLevel = e;
+      }
+    }), b = g(
+      () => o.locations.map((e) => ({ label: e.name, value: e.dbName, type: e.type })).filter(
+        (e) => d.value ? e.label.toLocaleLowerCase().includes(d.value.toLocaleLowerCase()) : !0
+      )
+    ), l = g(
+      () => b.value.filter((e) => e.type === "restaurant")
+    ), s = g(
+      () => b.value.filter((e) => e.type === "warehouse")
+    );
+    function B({ value: e }) {
+      a.value = !1, o.selectLocation(o.locations.find((t) => t.dbName === e));
+    }
+    return (e, t) => {
+      const M = h("FmIcon"), Q = h("FmSearch"), D = h("FmMenuItem"), j = h("FmMenu");
+      return n(), y("div", X, [
+        _(j, { "close-on-click": !0 }, {
+          "menu-button": L(() => {
+            var r;
+            return [
+              f("div", Z, [
+                _(M, {
+                  name: e.showBusiness && a.value ? "store" : "storefront",
+                  size: "sm"
+                }, null, 8, ["name"]),
+                f("div", ee, Y(e.showBusiness && a.value ? c.value : ((r = u(o)._currentLocation) == null ? void 0 : r.name) ?? u(v)("inventory.common.noLocationSelected")), 1),
+                _(M, {
+                  name: "expand_more",
+                  size: "sm"
+                })
+              ])
+            ];
+          }),
+          default: L(() => [
+            f("div", te, [
+              f("div", oe, [
+                _(Q, {
+                  "model-value": d.value,
+                  "onUpdate:modelValue": t[0] || (t[0] = (r) => d.value = r),
+                  placeholder: u(v)("inventory.common.table.toolbar.filterItems")
+                }, null, 8, ["model-value", "placeholder"])
+              ]),
+              f("div", null, [
+                e.showBusiness ? (n(), p(D, {
+                  key: 0,
+                  "model-value": a.value,
+                  label: c.value,
+                  sublabel: "Business",
+                  onClick: t[1] || (t[1] = (r) => a.value = !0)
+                }, null, 8, ["model-value", "label"])) : w("", !0),
+                (n(!0), y($, null, R(l.value, (r) => {
+                  var V;
+                  return n(), p(D, {
+                    key: r.value,
+                    "model-value": !a.value && ((V = u(o)._currentLocation) == null ? void 0 : V.dbName) === r.value,
+                    label: r.label,
+                    sublabel: "Restaurant",
+                    onClick: (k) => B(r),
+                    onVnodeMounted: (k) => {
+                      var F, x, N;
+                      return !a.value && ((F = u(o)._currentLocation) == null ? void 0 : F.dbName) === r.value && ((x = k.el) == null || x.scrollIntoView({ behavior: "instant", block: "end" }), (N = k.el) == null || N.scrollIntoView({ behavior: "smooth", block: "center" })), void 0;
+                    }
+                  }, null, 8, ["model-value", "label", "onClick", "onVnodeMounted"]);
+                }), 128)),
+                (n(!0), y($, null, R(s.value, (r) => {
+                  var V;
+                  return n(), p(D, {
+                    key: r.value,
+                    "model-value": !a.value && ((V = u(o)._currentLocation) == null ? void 0 : V.dbName) === r.value,
+                    label: r.label,
+                    sublabel: "Warehouse",
+                    onClick: (k) => B(r),
+                    onVnodeMounted: (k) => {
+                      var F, x;
+                      return !a.value && ((F = u(o)._currentLocation) == null ? void 0 : F.dbName) === r.value && ((x = k.el) == null || x.scrollIntoView({ behavior: "smooth", block: "center" })), void 0;
+                    }
+                  }, null, 8, ["model-value", "label", "onClick", "onVnodeMounted"]);
+                }), 128)),
+                !e.showBusiness && !l.value.length && !s.value.length ? (n(), p(D, {
+                  key: 1,
+                  disabled: "",
+                  label: u(v)("inventory.common.noResultFound")
+                }, null, 8, ["label"])) : w("", !0)
+              ])
+            ])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+function he() {
+  const i = /* @__PURE__ */ new Date();
+  return i.setDate(i.getDate() - 15), {
+    start: i,
+    end: /* @__PURE__ */ new Date()
+  };
+}
+function T(i = 15) {
+  const o = /* @__PURE__ */ new Date();
+  o.setDate(o.getDate() - i);
+  const m = o, c = /* @__PURE__ */ new Date();
+  return {
+    startDate: `${U(m)}`,
+    endDate: `${U(c)}`
+  };
+}
+const le = { class: "inline-flex rounded-md items-center gap-4 justify-center h-[30px] px-8 py-4 bg-fm-color-neutral-gray-100 cursor-pointer text-fm-color-neutral-gray-400" }, ae = { class: "fm-typo-en-body-md-600 select-none text-ellipsis overflow-hidden whitespace-nowrap" }, se = /* @__PURE__ */ I({
+  __name: "FmDateRangePickerChip",
+  props: {
+    modelValue: { default: (i) => i.modelValue ?? T() }
+  },
+  emits: ["update:modelValue"],
+  setup(i, { emit: o }) {
+    const m = o, c = z(T());
+    E(c, (d) => {
+      m("update:modelValue", d);
+    });
+    const v = g(() => {
+      const { startDate: d, endDate: a } = c.value;
+      return !d && !a ? "" : `${d} - ${a}`;
+    });
+    return (d, a) => {
+      const b = h("FmIcon"), l = h("FmDateRangePicker");
+      return n(), p(l, {
+        "show-predefined-range": "",
+        modelValue: c.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (s) => c.value = s),
+        "start-label": "",
+        "end-label": ""
+      }, {
+        "trigger-button": L(() => [
+          f("div", le, [
+            _(b, {
+              name: "calendar_month",
+              size: "sm"
+            }),
+            f("div", ae, Y(v.value), 1)
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), re = { class: "flex-1 w-full flex items-center gap-4 xs:flex-col-reverse sm:flex-col-reverse" }, ue = {
+  key: 0,
+  class: "flex-1 xs:w-full sm:w-full"
+}, ie = {
+  key: 1,
+  class: "flex-1"
+}, de = { class: "w-full max-w-[343px] xs:max-w-[unset] sm:max-w-[unset]" }, ge = /* @__PURE__ */ I({
+  __name: "FmInventoryTableToolbar",
+  props: /* @__PURE__ */ O({
+    dateRangeQuery: { type: Boolean },
+    changeLocation: { type: Boolean },
+    searchable: { type: Boolean },
+    hideFilterOptions: { type: Boolean },
+    filterable: { type: Boolean },
+    filterAttributes: {},
+    actions: {},
+    usingBusinessHelperText: {},
+    showBusiness: { type: Boolean }
+  }, {
+    search: {},
+    searchModifiers: {},
+    filter: {},
+    filterModifiers: {},
+    dateRange: {},
+    dateRangeModifiers: {}
+  }),
+  emits: ["update:search", "update:filter", "update:dateRange"],
+  setup(i) {
+    const { breakpoints: o } = G(), m = g(() => o.value.xs || o.value.sm), c = C(i, "search"), v = C(i, "filter"), d = C(i, "dateRange"), { t: a } = P(), b = J();
+    return (l, s) => {
+      const B = h("FmTextField"), e = h("FmButton");
+      return n(), y("div", {
+        class: "flex flex-col gap-8",
+        onVnodeMounted: s[4] || (s[4] = //@ts-ignore
+        (...t) => u(b).onMounted && u(b).onMounted(...t)),
+        onVnodeUnmounted: s[5] || (s[5] = //@ts-ignore
+        (...t) => u(b).onUnmounted && u(b).onUnmounted(...t))
+      }, [
+        H(l.$slots, "default"),
+        f("div", {
+          class: S([
+            "flex gap-8 items-center",
+            {
+              "px-8 flex-col-reverse h-[unset]": m.value,
+              "h-48": !m.value
+            }
+          ])
+        }, [
+          l.changeLocation || l.dateRangeQuery ? (n(), y("div", {
+            key: 0,
+            class: S([
+              "flex gap-8 items-center",
+              {
+                "w-full overflow-x-auto": m.value
+              }
+            ])
+          }, [
+            l.changeLocation ? (n(), p(ne, {
+              key: 0,
+              "show-business": l.showBusiness
+            }, null, 8, ["show-business"])) : w("", !0),
+            l.dateRangeQuery ? (n(), p(se, {
+              key: 1,
+              "model-value": d.value,
+              "onUpdate:modelValue": s[0] || (s[0] = (t) => d.value = t)
+            }, null, 8, ["model-value"])) : w("", !0)
+          ], 2)) : w("", !0),
+          f("div", re, [
+            l.filterable && l.filterAttributes ? (n(), y("div", ue, [
+              l.hideFilterOptions ? (n(), p(K, { key: 1 }, {
+                default: L(() => [
+                  _(u(A), {
+                    modelValue: v.value,
+                    "onUpdate:modelValue": s[2] || (s[2] = (t) => v.value = t),
+                    attributes: l.filterAttributes
+                  }, null, 8, ["modelValue", "attributes"])
+                ]),
+                _: 1
+              })) : (n(), p(u(A), {
+                key: 0,
+                modelValue: v.value,
+                "onUpdate:modelValue": s[1] || (s[1] = (t) => v.value = t),
+                attributes: l.filterAttributes
+              }, null, 8, ["modelValue", "attributes"]))
+            ])) : m.value ? w("", !0) : (n(), y("div", ie)),
+            f("div", de, [
+              l.searchable ? (n(), p(B, {
+                key: 0,
+                "model-value": c.value,
+                "onUpdate:modelValue": s[3] || (s[3] = (t) => c.value = t),
+                "prepend-icon": "search",
+                placeholder: u(a)("inventory.common.table.toolbar.filterItems"),
+                class: "w-full"
+              }, null, 8, ["model-value", "placeholder"])) : w("", !0)
+            ]),
+            (n(!0), y($, null, R(l.actions, (t, M) => (n(), p(e, {
+              key: M,
+              variant: "tertiary",
+              "prepend-icon": t.icon,
+              onClick: t.onClick
+            }, null, 8, ["prepend-icon", "onClick"]))), 128))
+          ])
+        ], 2)
+      ], 512);
+    };
+  }
+});
+export {
+  ge as _,
+  he as a,
+  T as i
+};