@feedmepos/mf-inventory-portal 0.0.5

package/dist/UnitView-C3XVSbJY.js

@@ -0,0 +1,626 @@
+import { defineComponent as q, computed as x, openBlock as m, createElementBlock as w, Fragment as z, renderList as j, createElementVNode as s, toDisplayString as _, createCommentVNode as G, ref as R, resolveComponent as A, createBlock as T, withCtx as I, createVNode as c, unref as d, isRef as W, normalizeStyle as se, Teleport as ae, normalizeProps as ne, guardReactiveProps as re } from "vue";
+import { u as H, S as ie, c as te, a as X, b as de } from "./app-BzDhmCVx.js";
+import { useDialog as ue, useSnackbar as oe, useProxiedModel as Z, useBreakpoints as me } from "@feedmepos/ui-library";
+import { i as ce, _ as pe } from "./is-linked-ingredient-error-C6AghEwR.js";
+import { F as U, D as ee, R as N } from "./row-action.enum-BwQbURNh.js";
+import { c as fe, _ as ve, F as be, u as ye } from "./layout-BvUjg6JS.js";
+import { _ as ge } from "./SingleColumnLayout.vue_vue_type_script_setup_true_lang-CFjO4TPG.js";
+import { R as L, A as _e, M as xe } from "./rules-DHfAMDW3.js";
+import { a as O, t as he } from "./date2-C7HiAWQG.js";
+import { F as Ve } from "./decimal-D3a0BwVj.js";
+import { _ as Ue } from "./NumberPrecisionInput.vue_vue_type_script_setup_true_lang-DBK7mpQS.js";
+const we = { class: "flex flex-col gap-8" }, Ce = /* @__PURE__ */ s("div", { class: "fm-typo-en-body-md-400" }, "Sorry, this unit is used in the following modules:", -1), Se = {
+  key: 0,
+  class: "flex flex-col"
+}, Fe = /* @__PURE__ */ s("div", { class: "flex flex-row fm-typo-en-body-md-600 bg-fm-color-neutral-gray-100 text-fm-color-typo-secondary h-48 items-center" }, [
+  /* @__PURE__ */ s("div", { class: "flex-1 py-8 px-16" }, "Ingredient"),
+  /* @__PURE__ */ s("div", {
+    class: "flex-0 py-8 px-16",
+    style: { "flex-basis": "240px" }
+  }, "Used in")
+], -1), ke = { class: "flex-1 py-8 px-16" }, $e = {
+  class: "flex-0 py-8 px-16",
+  style: { "flex-basis": "240px" }
+}, Ae = {
+  key: 1,
+  class: "flex flex-col"
+}, Ee = /* @__PURE__ */ s("div", { class: "flex flex-row fm-typo-en-body-md-600 bg-fm-color-neutral-gray-100 text-fm-color-typo-secondary h-48 items-center" }, [
+  /* @__PURE__ */ s("div", { class: "flex-1 py-8 px-16" }, "Recipe"),
+  /* @__PURE__ */ s("div", {
+    class: "flex-0 py-8 px-16",
+    style: { "flex-basis": "240px" }
+  }, "Used in")
+], -1), Ie = { class: "flex-1 py-8 px-16" }, De = {
+  class: "flex-0 py-8 px-16",
+  style: { "flex-basis": "240px" }
+}, Re = {
+  key: 2,
+  class: "flex flex-col"
+}, Pe = /* @__PURE__ */ s("div", { class: "flex flex-row fm-typo-en-body-md-600 bg-fm-color-neutral-gray-100 text-fm-color-typo-secondary h-48 items-center" }, [
+  /* @__PURE__ */ s("div", { class: "flex-1 py-8 px-16" }, "Menu"),
+  /* @__PURE__ */ s("div", {
+    class: "flex-0 py-8 px-16",
+    style: { "flex-basis": "240px" }
+  }, "Used in")
+], -1), Te = { class: "flex-1 py-8 px-16" }, Me = {
+  class: "flex-0 py-8 px-16",
+  style: { "flex-basis": "240px" }
+}, Be = /* @__PURE__ */ q({
+  __name: "UnitUsedBy",
+  props: {
+    unit: {}
+  },
+  setup(h) {
+    const u = h, y = H(), a = x(() => y.validateUnitUsage(u.unit)), l = x(() => a.value.filter((f) => f.from === "INGREDIENT")), r = x(() => a.value.filter((f) => f.from === "RECIPE")), p = x(() => a.value.filter((f) => f.from === "MENU"));
+    return (f, V) => (m(), w("div", we, [
+      Ce,
+      l.value.length ? (m(), w("div", Se, [
+        Fe,
+        (m(!0), w(z, null, j(l.value, (t) => {
+          var n;
+          return m(), w("div", {
+            key: t.code,
+            class: "flex flex-row fm-typo-en-body-md-400 h-48 items-center border-b border-b-fm-color-neutral-gray-100"
+          }, [
+            s("div", ke, _(t.code) + " " + _(t.name), 1),
+            s("div", $e, _((n = t.bindedIngredient) != null && n.length ? "Convert binding" : "Item unit"), 1)
+          ]);
+        }), 128))
+      ])) : G("", !0),
+      r.value.length ? (m(), w("div", Ae, [
+        Ee,
+        (m(!0), w(z, null, j(r.value, (t) => {
+          var n, v, b;
+          return m(), w("div", {
+            key: t.code,
+            class: "flex flex-row fm-typo-en-body-md-400 h-48 items-center border-b border-b-fm-color-neutral-gray-100"
+          }, [
+            s("div", Ie, _(t.code) + " " + _(t.name), 1),
+            s("div", De, _((n = t.bindedIngredient) == null ? void 0 : n.slice(0, 3).map((e) => e.code).join(", ")) + " " + _(t.bindedIngredient && ((v = t.bindedIngredient) == null ? void 0 : v.length) > 3 ? `and ${((b = t.bindedIngredient) == null ? void 0 : b.length) - 3} more` : ""), 1)
+          ]);
+        }), 128))
+      ])) : G("", !0),
+      p.value.length ? (m(), w("div", Re, [
+        Pe,
+        (m(!0), w(z, null, j(p.value, (t) => {
+          var n, v, b;
+          return m(), w("div", {
+            key: t.code,
+            class: "flex flex-row fm-typo-en-body-md-400 h-48 items-center border-b border-b-fm-color-neutral-gray-100"
+          }, [
+            s("div", Te, _(t.code) + " " + _(t.name), 1),
+            s("div", Me, _((n = t.bindedIngredient) == null ? void 0 : n.slice(0, 3).map((e) => e.code).join(", ")) + " " + _(t.bindedIngredient && ((v = t.bindedIngredient) == null ? void 0 : v.length) > 3 ? `and ${((b = t.bindedIngredient) == null ? void 0 : b.length) - 3} more` : ""), 1)
+          ]);
+        }), 128))
+      ])) : G("", !0)
+    ]));
+  }
+});
+function Ne() {
+  const h = ue(), u = oe(), y = H(), a = R(!1), l = R();
+  function r() {
+    const t = {
+      unit: {},
+      mode: U.CREATE,
+      show: !0,
+      "onUpdate:show"(n) {
+        l.value.show = n;
+      }
+    };
+    l.value = t;
+  }
+  async function p(t) {
+    const n = {
+      unit: t,
+      mode: U.UPDATE,
+      show: !0,
+      "onUpdate:show"(v) {
+        l.value.show = v;
+      }
+    };
+    l.value = n;
+  }
+  async function f(t) {
+    a.value = !0;
+    try {
+      await y.deleteUnit(t), u.open({
+        title: "Success",
+        message: `Deleted ${t.name}`,
+        type: "success"
+      });
+    } catch (n) {
+      n instanceof ie && ce(n) ? h.open({
+        title: "Cannot delete unit",
+        contentComponent: pe,
+        contentComponentProps: {
+          subject: (t == null ? void 0 : t.name) ?? "",
+          items: n.errorResponse.message
+        },
+        secondaryActions: {
+          text: "Close",
+          close: !0
+        }
+      }) : console.log("unable to delete unit", n), u.open({
+        title: `Cannot delete ${t.name}`,
+        message: "Please try again.",
+        type: "error"
+      }), console.error("failed to delete unit", n);
+    } finally {
+      a.value = !1;
+    }
+  }
+  function V(t) {
+    if (y.validateUnitUsage(t).length) {
+      h.open({
+        title: `Cannot delete ${(t == null ? void 0 : t.name) ?? "unit"}`,
+        overlay: !0,
+        dismissAway: !0,
+        closeButton: !0,
+        contentComponent: Be,
+        contentComponentProps: {
+          unit: t
+        },
+        primaryActions: {
+          text: "Confirm",
+          close: !0
+        }
+      });
+      return;
+    }
+    h.open({
+      title: `Delete ${(t == null ? void 0 : t.name) ?? "unit"}?`,
+      closeButton: !1,
+      message: "You may not be able to delete this unit if it is linked in any of the inventory modules.",
+      primaryActions: {
+        text: "Delete",
+        close: !0,
+        variant: "destructive"
+      },
+      secondaryActions: {
+        text: "Cancel",
+        close: !0
+      }
+    }).onPrimary(() => f(t));
+  }
+  return {
+    createUnit: r,
+    updateUnit: p,
+    deleteUnit: V,
+    unitDialogProps: l,
+    unitViewLoading: a
+  };
+}
+function Le({
+  updateUnit: h,
+  deleteUnit: u
+}) {
+  async function y(l, r) {
+    const p = te(r);
+    if (l === N.Edit) {
+      await h(p);
+      return;
+    }
+    if (l === N.Delete) {
+      await u(p);
+      return;
+    }
+  }
+  return { columnDefs: [
+    {
+      accessorKey: "name",
+      header: "Name",
+      enableSorting: !0,
+      size: 300
+    },
+    {
+      accessorKey: "abbrev",
+      header: "Symbol",
+      enableSorting: !1,
+      size: "auto"
+    },
+    {
+      id: "action",
+      header: "",
+      cell(l) {
+        return fe(
+          [ee[N.Edit], ee[N.Delete]],
+          (r) => {
+            y(r, l.row.original);
+          }
+        );
+      },
+      enableSorting: !1,
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    }
+  ] };
+}
+const ze = { class: "grid grid-cols-3 gap-24" }, je = { class: "flex" }, qe = { class: "flex items-center" }, He = { class: "fm-typo-en-body-lg-600 flex-grow" }, Ke = { class: "grid grid-cols-3 gap-24" }, Ge = /* @__PURE__ */ q({
+  __name: "UnitForm",
+  props: {
+    mode: {},
+    modelValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "click:submit"],
+  setup(h, { expose: u, emit: y }) {
+    const a = h, l = y;
+    function r() {
+      l("click:submit");
+    }
+    const p = x({
+      get() {
+        var e;
+        return ((e = a.modelValue) == null ? void 0 : e.name) ?? "";
+      },
+      set(e) {
+        const o = a.modelValue ?? {};
+        o.name = e, l("update:modelValue", o);
+      }
+    }), f = x({
+      get() {
+        var e;
+        return ((e = a.modelValue) == null ? void 0 : e.abbrev) ?? "";
+      },
+      set(e) {
+        const o = a.modelValue ?? {};
+        o.abbrev = e, l("update:modelValue", o);
+      }
+    }), V = x({
+      get() {
+        var e;
+        return ((e = a.modelValue) == null ? void 0 : e.precision) ?? 0;
+      },
+      set(e) {
+        const o = a.modelValue ?? {};
+        o.precision = e, l("update:modelValue", o);
+      }
+    }), t = x({
+      get() {
+        var e;
+        return ((e = a.modelValue) == null ? void 0 : e.measurements) ?? [];
+      },
+      set(e) {
+        const o = a.modelValue ?? {};
+        o.measurements = e, l("update:modelValue", o);
+      }
+    });
+    function n() {
+      const e = a.modelValue ?? {}, o = e.measurements ?? [];
+      e.measurements = [
+        ...o,
+        {
+          id: `measurement_${(/* @__PURE__ */ new Date()).toISOString()}_${Math.random().toString(16).slice(2, 8)}`,
+          name: "",
+          abbrev: "",
+          conversion: {
+            amount: 1,
+            precision: 0
+          }
+        }
+      ], l("update:modelValue", e);
+    }
+    function v(e) {
+      const o = a.modelValue ?? {}, i = o.measurements ?? [];
+      i.splice(e, 1), o.measurements = i, l("update:modelValue", o);
+    }
+    const b = R();
+    return u({
+      validateInputs: () => {
+        var e, o;
+        (o = (e = b.value) == null ? void 0 : e.validateInputs) == null || o.call(e);
+      },
+      resetInputsValidation: () => {
+        var e, o;
+        (o = (e = b.value) == null ? void 0 : e.resetInputsValidation) == null || o.call(e);
+      },
+      resetInputs: () => {
+        var e, o;
+        (o = (e = b.value) == null ? void 0 : e.resetInputs) == null || o.call(e);
+      }
+    }), (e, o) => {
+      const i = A("FmTextField"), E = A("FmStepperField"), S = A("FmButton"), F = A("FmCard"), K = A("FmForm");
+      return m(), T(K, {
+        ref_key: "formRef",
+        ref: b,
+        class: "flex flex-col gap-40",
+        onValidationSuccess: r
+      }, {
+        default: I(() => {
+          var k;
+          return [
+            s("div", ze, [
+              c(i, {
+                disabled: e.disabled,
+                class: "col-span-2",
+                label: "Name",
+                modelValue: p.value,
+                "onUpdate:modelValue": o[0] || (o[0] = (C) => p.value = C),
+                rules: [d(L)()],
+                "label-mark": "required"
+              }, null, 8, ["disabled", "modelValue", "rules"]),
+              c(i, {
+                disabled: e.disabled,
+                label: "Symbol",
+                modelValue: f.value,
+                "onUpdate:modelValue": o[1] || (o[1] = (C) => f.value = C),
+                rules: [d(L)()],
+                "label-mark": "required"
+              }, null, 8, ["disabled", "modelValue", "rules"]),
+              c(E, {
+                disabled: e.disabled,
+                class: "col-span-3",
+                label: "Precision",
+                modelValue: V.value,
+                "onUpdate:modelValue": o[2] || (o[2] = (C) => V.value = C),
+                rules: [d(_e)(0)]
+              }, null, 8, ["disabled", "modelValue", "rules"])
+            ]),
+            s("div", je, [
+              c(S, {
+                disabled: e.disabled,
+                type: "button",
+                "prepend-icon": "add",
+                label: "Add measurement",
+                variant: "plain",
+                onClick: n
+              }, null, 8, ["disabled"])
+            ]),
+            (m(!0), w(z, null, j((k = e.modelValue) == null ? void 0 : k.measurements, (C, g) => (m(), T(F, {
+              class: "flex flex-col gap-16 p-16",
+              variant: "outlined",
+              key: C.id
+            }, {
+              default: I(() => [
+                s("div", qe, [
+                  s("div", He, "Measurement " + _(g + 1), 1),
+                  c(S, {
+                    disabled: e.disabled,
+                    variant: "tertiary",
+                    "prepend-icon": "delete",
+                    onClick: ($) => v(g)
+                  }, null, 8, ["disabled", "onClick"])
+                ]),
+                s("div", Ke, [
+                  c(i, {
+                    disabled: e.disabled,
+                    class: "col-span-2",
+                    label: "Name",
+                    modelValue: e.modelValue.measurements[g].name,
+                    "onUpdate:modelValue": ($) => e.modelValue.measurements[g].name = $,
+                    rules: [d(L)()],
+                    "label-mark": "required"
+                  }, null, 8, ["disabled", "modelValue", "onUpdate:modelValue", "rules"]),
+                  c(i, {
+                    disabled: e.disabled,
+                    label: "Symbol",
+                    modelValue: e.modelValue.measurements[g].abbrev,
+                    "onUpdate:modelValue": ($) => e.modelValue.measurements[g].abbrev = $,
+                    rules: [d(L)()],
+                    "label-mark": "required"
+                  }, null, 8, ["disabled", "modelValue", "onUpdate:modelValue", "rules"]),
+                  c(Ue, {
+                    disabled: e.disabled,
+                    class: "col-span-3",
+                    label: "Conversion",
+                    "model-value": +d(O)(e.modelValue.measurements[g].conversion),
+                    "onUpdate:modelValue": ($) => t.value = t.value.map(
+                      (P, D) => D === g ? {
+                        ...P,
+                        conversion: d(Ve).toPrecision(
+                          d(he)($),
+                          V.value
+                        )
+                      } : P
+                    ),
+                    rules: [d(xe)(0)],
+                    step: +d(O)({ amount: 1, precision: V.value }),
+                    "helper-text": `1 ${e.modelValue.measurements[g].name || "measurement unit"} equal to ${+d(O)(e.modelValue.measurements[g].conversion)} ${p.value || "base unit"}`
+                  }, null, 8, ["disabled", "model-value", "onUpdate:modelValue", "rules", "step", "helper-text"])
+                ])
+              ]),
+              _: 2
+            }, 1024))), 128))
+          ];
+        }),
+        _: 1
+      }, 512);
+    };
+  }
+}), Oe = { class: "flex gap-4" }, Ye = /* @__PURE__ */ q({
+  __name: "UnitDialog",
+  props: {
+    show: { type: Boolean },
+    unit: {},
+    mode: { default: U.READ }
+  },
+  emits: ["update:show"],
+  setup(h) {
+    const u = h, y = H(), a = oe(), l = Z(u, "show"), r = Z(u, "unit"), p = x(() => {
+      switch (u.mode) {
+        case U.READ:
+          return "View Unit";
+        case U.UPDATE:
+          return "Edit Unit";
+        case U.CREATE:
+          return "Add Unit";
+      }
+      return "";
+    }), f = x(() => {
+      switch (u.mode) {
+        case U.READ:
+          return "";
+        case U.UPDATE:
+          return "Save";
+        case U.CREATE:
+          return "Add";
+      }
+      return "";
+    }), V = R(), t = R(!1);
+    async function n() {
+      t.value = !0;
+      try {
+        const o = te(r.value);
+        o.precision ?? (o.precision = 0), o.measurements ?? (o.measurements = []), await y.createUnit(o), l.value = !1, a.open({
+          title: "Success",
+          message: "Created " + r.value.name,
+          type: "success"
+        });
+      } catch (o) {
+        o instanceof X || a.open({
+          title: "Failed to create unit",
+          message: "Please try again",
+          type: "error"
+        });
+      } finally {
+        t.value = !1;
+      }
+    }
+    async function v() {
+      t.value = !0;
+      try {
+        await y.updateUnit(r.value), l.value = !1, a.open({
+          title: "Success",
+          message: "Updated " + r.value.name,
+          type: "success"
+        });
+      } catch (o) {
+        o instanceof X || a.open({
+          title: "Failed to update unit",
+          message: "Please try again",
+          type: "error"
+        });
+      } finally {
+        t.value = !1;
+      }
+    }
+    function b() {
+      var o, i;
+      (i = (o = V.value) == null ? void 0 : o.validateInputs) == null || i.call(o);
+    }
+    function e() {
+      switch (u.mode) {
+        case U.READ:
+          return;
+        case U.UPDATE:
+          return v();
+        case U.CREATE:
+          return n();
+      }
+    }
+    return (o, i) => {
+      const E = A("FmButton"), S = A("FmSideSheet");
+      return m(), T(S, {
+        "model-value": d(l),
+        "onUpdate:modelValue": i[3] || (i[3] = (F) => W(l) ? l.value = F : null),
+        header: p.value,
+        "close-button": "",
+        "dismiss-away": "",
+        "max-width": 500
+      }, {
+        "side-sheet-footer": I(() => [
+          s("div", Oe, [
+            c(E, {
+              loading: t.value,
+              label: f.value,
+              onClick: b
+            }, null, 8, ["loading", "label"]),
+            c(E, {
+              disabled: t.value,
+              label: "Close",
+              variant: "tertiary",
+              onClick: i[2] || (i[2] = (F) => l.value = !1)
+            }, null, 8, ["disabled"])
+          ])
+        ]),
+        default: I(() => [
+          c(Ge, {
+            class: "w-full",
+            ref_key: "hasValidationExpose",
+            ref: V,
+            modelValue: d(r),
+            "onUpdate:modelValue": i[0] || (i[0] = (F) => W(r) ? r.value = F : null),
+            mode: o.mode,
+            disabled: t.value,
+            "onClick:submit": i[1] || (i[1] = (F) => e())
+          }, null, 8, ["modelValue", "mode", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value", "header"]);
+    };
+  }
+}), Je = { class: "px-24 xs:p-0 sm:p-0 flex flex-col gap-8 max-h-full" }, Qe = { class: "px-8 flex items-center xs:gap-0 xs:flex-col-reverse sm:gap-0 sm:flex-col-reverse" }, We = { class: "flex-1 w-full" }, Xe = { class: "flex flex-col py-8" }, Ze = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, et = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, ct = /* @__PURE__ */ q({
+  __name: "UnitView",
+  setup(h) {
+    const u = H(), y = de(), a = x(() => u.units), { createUnit: l, updateUnit: r, deleteUnit: p, unitDialogProps: f, unitViewLoading: V } = Ne(), { columnDefs: t } = Le({ updateUnit: r, deleteUnit: p });
+    function n(E) {
+      E === "add" && l();
+    }
+    const v = R(""), b = x(() => V.value), { breakpoints: e } = me(), o = x(() => e.value.xs || e.value.sm ? 10 : 20), i = ye();
+    return (E, S) => {
+      const F = A("FmTableToolbar"), K = A("FmTable");
+      return m(), T(ge, {
+        title: "Unit",
+        actions: [{ label: "Add unit", value: "add", isPrimary: !0, prependIcon: "add" }],
+        "onClick:action": n
+      }, {
+        default: I(() => [
+          s("div", Je, [
+            s("div", Qe, [
+              s("div", We, [
+                c(F, {
+                  searchable: "",
+                  "search-model": v.value,
+                  "onUpdate:searchModel": S[0] || (S[0] = (k) => v.value = k)
+                }, null, 8, ["search-model"])
+              ])
+            ]),
+            c(K, {
+              style: se(d(i).tableHeight),
+              "column-defs": d(t),
+              "row-data": a.value,
+              "search-value": v.value,
+              loading: !d(y)._currentLocation || b.value,
+              onRowClick: S[1] || (S[1] = (k) => d(r)(k.original)),
+              "page-size": o.value
+            }, {
+              "list-row": I((k) => [
+                c(ve, {
+                  row: k,
+                  onRowClick: d(r)
+                }, {
+                  default: I((C) => {
+                    var g, $, P, D, Y, M, J, B, Q;
+                    return [
+                      s("div", Xe, [
+                        s("div", Ze, [
+                          c(d(be), {
+                            render: (P = ($ = (g = C.name) == null ? void 0 : g.column) == null ? void 0 : $.columnDef) == null ? void 0 : P.cell,
+                            props: (Y = (D = C.name) == null ? void 0 : D.getContext) == null ? void 0 : Y.call(D)
+                          }, null, 8, ["render", "props"])
+                        ]),
+                        s("div", et, _((Q = (B = (J = (M = k.original.measurements) == null ? void 0 : M.map) == null ? void 0 : J.call(M, (le) => le.name)) == null ? void 0 : B.join) == null ? void 0 : Q.call(B, ", ")), 1)
+                      ])
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["row", "onRowClick"])
+              ]),
+              _: 1
+            }, 8, ["style", "column-defs", "row-data", "search-value", "loading", "page-size"])
+          ]),
+          (m(), T(ae, { to: "body" }, [
+            c(Ye, ne(re(d(f))), null, 16)
+          ]))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  ct as default
+};