@feedmepos/mf-menu-portal 1.0.4-dev.3 → 1.0.4-dev.4

package/dist/Ingredient-DpjGIuH9.js

@@ -0,0 +1,505 @@
+import { defineComponent as ue, computed as f, ref as E, shallowRef as ne, h as $e, withModifiers as le, onUnmounted as Ae, resolveComponent as m, openBlock as i, createBlock as C, unref as e, withCtx as y, createElementBlock as r, toDisplayString as _, Fragment as I, createElementVNode as v, createVNode as d, renderList as T, createCommentVNode as M, mergeProps as ae, createTextVNode as Ne } from "vue";
+import { useRouter as De } from "vue-router";
+import { useI18n as Le } from "@feedmepos/mf-common";
+import { useDialog as ze, useBreakpoints as Ee, components as oe, FmButtonVariant as Te } from "@feedmepos/ui-library";
+import { _ as se } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { _ as Re } from "./BindingLinkDialog.vue_vue_type_script_setup_true_lang-BZVQRyRI.js";
+import { _ as ie } from "./BindingTable.vue_vue_type_script_setup_true_lang-D3CmOOPY.js";
+import { _ as qe } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
+import { u as Pe } from "./useActionFeedback-Dm2HDa_2.js";
+import { u as Ke } from "./useEditorValidation-Ctef5Bxt.js";
+import { b as Oe, u as Qe, a as je } from "./provide-CDmXzkhz.js";
+const Ge = {
+  key: 0,
+  class: "flex-1 flex justify-between gap-8 pl-8"
+}, He = { class: "flex items-center" }, Je = { class: "bg-fm-color-neutral-gray-100 rounded-md px-8 py-4" }, We = { class: "fm-typo-en-body-md-600" }, Xe = {
+  key: 0,
+  role: "alert",
+  class: "text-fm-color-typo-secondary"
+}, Ye = {
+  key: 1,
+  class: "text-fm-color-typo-secondary"
+}, Ze = { class: "flex justify-end items-center" }, et = { class: "w-[320px] xs:w-full xs:px-16 xs:mt-8" }, tt = {
+  key: 1,
+  class: "flex-1 min-h-0 overflow-scroll divide-y divide-fm-color-neutral-gray-100 pb-64"
+}, nt = ["onClick"], lt = { class: "min-w-0 flex-1" }, at = { class: "fm-typo-en-body-lg-600 mb-4 break-words" }, ot = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary break-words" }, st = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary break-words" }, it = {
+  key: 2,
+  class: "fixed right-16 bottom-[72px] z-[100]"
+}, ut = { class: "fm-typo-en-title-md-600" }, dt = {
+  key: 0,
+  class: "pt-8 flex flex-col gap-8"
+}, mt = {
+  key: 1,
+  class: "pt-8 space-y-40"
+}, rt = { class: "flex flex-row gap-16" }, ct = { class: "overflow-x-hidden overflow-y-auto max-h-[300px]" }, vt = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-system-error-500",
+  role: "alert"
+}, pt = { class: "flex gap-8 items-center justify-start" }, bt = /* @__PURE__ */ ue({
+  __name: "IngredientList",
+  props: {
+    sdk: {}
+  },
+  setup(R) {
+    const F = R, { t } = Le(), w = Oe(), q = ze(), de = De(), { run: P } = Pe(), x = Qe(F.sdk.sku.list), c = f(
+      () => x.value.status === "ready" ? x.value.value : null
+    ), me = f(() => {
+      var n;
+      return ((n = c.value) == null ? void 0 : n.query) ?? "";
+    }), { breakpoints: re } = Ee(), A = f(() => re.value.xs), ce = f(() => {
+      var n;
+      return [...((n = c.value) == null ? void 0 : n.rows) ?? []];
+    }), g = E(!1), N = E(!1), V = E("recipe"), s = ne(F.sdk.sku.editor()), S = ne(
+      s.value.get()
+    );
+    let D = s.value.subscribe(
+      (n) => {
+        S.value = n;
+      }
+    );
+    const a = f(
+      () => S.value.status === "ready" ? S.value.value : null
+    ), p = Ke(() => s.value), K = f(
+      () => a.value ? p.issue(a.value.fieldIssues, "name") ?? a.value.nameIssue : null
+    ), O = f(
+      () => a.value ? p.issue(a.value.fieldIssues, "code") ?? a.value.codeIssue : null
+    ), Q = f(
+      () => a.value ? p.issue(a.value.fieldIssues, "convert") ?? a.value.formIssue : null
+    );
+    function j(n) {
+      var k;
+      const l = ((k = a.value) == null ? void 0 : k.fieldIssues) ?? {};
+      return (n ?? []).map((U) => ({
+        ...U,
+        amountIssue: p.issue(l, `amount:${U.id}`) ?? U.amountIssue
+      }));
+    }
+    function G(n, l) {
+      p.field(
+        `amount:${n}`,
+        (k) => s.value.setBindingAmount(n, k)
+      )["onUpdate:modelValue"](l);
+    }
+    function H(n) {
+      D(), s.value.dispose(), s.value = F.sdk.sku.editor(n), S.value = s.value.get(), D = s.value.subscribe(
+        (l) => {
+          S.value = l;
+        }
+      );
+    }
+    function L() {
+      var n;
+      ((n = c.value) == null ? void 0 : n.create.state) === "allowed" && (H(), g.value = !0);
+    }
+    function J(n) {
+      H(n.id), g.value = !0;
+    }
+    async function ve() {
+      (await P(
+        () => p.submit(() => s.value.submit()),
+        {
+          // A locally-decided rejection issues no request and legacy showed no
+          // spinner for it — the frozen `sku/create/validation-required` and
+          // `sku/create/duplicate-code` groups record an inline message and no
+          // snackbar at all.
+          showLoading: () => {
+            var l;
+            return ((l = a.value) == null ? void 0 : l.status) === "submitting";
+          },
+          successMessage: (l) => t("menu.sku.form.saved", { name: l.name })
+        }
+      )).kind === "success" && (g.value = !1);
+    }
+    function pe() {
+      var n;
+      if (!((n = a.value) != null && n.dirty)) {
+        g.value = !1;
+        return;
+      }
+      q.open({
+        title: t("menu.common.dialog.dismiss.title"),
+        message: t("menu.common.dialog.dismiss.message"),
+        primaryActions: {
+          text: t("menu.common.dialog.dismiss.discard"),
+          close: !0
+        },
+        secondaryActions: {
+          text: t("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(() => {
+        g.value = !1;
+      });
+    }
+    function W(n) {
+      n.remove.state === "allowed" && q.open({
+        title: t("menu.common.dialog.remove.ingredient.title"),
+        message: t("menu.common.dialog.remove.ingredient.message", {
+          name: n.name
+        }),
+        primaryActions: {
+          text: t("menu.common.actions.remove"),
+          close: !0,
+          variant: Te.Destructive
+        },
+        secondaryActions: {
+          text: t("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await P(() => F.sdk.sku.remove(n.id), {
+          successMessage: t("menu.sku.form.removed", { name: n.name })
+        });
+      });
+    }
+    const be = f(() => [
+      {
+        accessorKey: "code",
+        header: () => t("menu.ingredient.table.columns.code"),
+        enableSorting: !1
+      },
+      {
+        accessorKey: "name",
+        header: () => t("menu.ingredient.table.columns.name"),
+        enableSorting: !1
+      },
+      {
+        accessorKey: "unitName",
+        header: () => t("menu.ingredient.table.columns.unit"),
+        enableSorting: !1,
+        // The parenthesised pair is assembled by the i18n layer, never by a
+        // template expression (ADR-0003 §3).
+        cell: (n) => t("menu.sku.unit_option", {
+          name: n.row.original.unitName,
+          symbol: n.row.original.unitSymbol
+        })
+      },
+      {
+        id: "actions",
+        size: 52,
+        meta: { cellClass: "pl-16", headerContentClass: "-mx-16" },
+        header: "",
+        cell: (n) => $e(oe.FmButton, {
+          icon: "delete",
+          variant: "tertiary",
+          textColor: "neutral-gray-400",
+          disabled: n.row.original.remove.state !== "allowed",
+          "aria-label": t("menu.common.actions.delete"),
+          onClick: le(
+            () => W(n.row.original),
+            ["stop", "prevent"]
+          )
+        })
+      }
+    ]), X = f(() => {
+      var n;
+      return ((n = a.value) == null ? void 0 : n.submit.state) !== "allowed";
+    }), fe = f(
+      () => {
+        var n, l;
+        return V.value === "recipe" ? ((n = a.value) == null ? void 0 : n.recipeCandidates) ?? [] : ((l = a.value) == null ? void 0 : l.ingredientCandidates) ?? [];
+      }
+    ), ye = f(
+      () => t("menu.inventory.binding.link.title", {
+        type: V.value === "recipe" ? t("menu.inventory.binding.link.recipe") : t("menu.inventory.binding.link.ingredient")
+      })
+    );
+    function ke() {
+      g.value = !1, de.push("/unit");
+    }
+    function Y(n) {
+      V.value = n, s.value.setBindingCandidateQuery(""), N.value = !0;
+    }
+    return Ae(() => {
+      D(), s.value.dispose();
+    }), (n, l) => {
+      const k = m("FmButton"), U = m("FmCircularProgress"), ge = m("FmSearch"), _e = m("FmTable"), Z = m("FmTextField"), xe = m("FmLabel"), Fe = m("FmField"), he = m("FmMenuHeader"), Ce = m("FmMenuDivider"), we = m("FmMenuItem"), Ie = m("FmMenu"), Me = m("FmFormGroup"), Se = m("FmSwitch"), Ue = m("FmSelect"), Be = m("FmCard"), Ve = m("FmSideSheet");
+      return i(), C(qe, {
+        "data-visual-root": "sku",
+        heading: e(t)("menu.ingredient.title")
+      }, {
+        "append-heading": y(() => [
+          e(x).status === "ready" && c.value ? (i(), r("div", Ge, [
+            v("div", He, [
+              v("div", Je, [
+                v("p", We, _(c.value.totalCount), 1)
+              ])
+            ]),
+            c.value.totalCount > 0 && !A.value ? (i(), C(k, {
+              key: 0,
+              disabled: c.value.create.state !== "allowed",
+              label: e(t)("menu.ingredient.actions.add"),
+              "prepend-icon": "add",
+              onClick: L
+            }, null, 8, ["disabled", "label"])) : M("", !0)
+          ])) : M("", !0)
+        ]),
+        default: y(() => {
+          var ee;
+          return [
+            e(x).status === "error" ? (i(), r("p", Xe, _(e(w)(e(x).error.message)), 1)) : e(x).status === "unavailable" ? (i(), r("p", Ye, _(e(w)(e(x).reason)), 1)) : e(x).status === "loading" ? (i(), C(U, { key: 2 })) : c.value && c.value.totalCount === 0 ? (i(), C(e(se), {
+              key: 3,
+              action: {
+                text: e(t)("menu.ingredient.empty.action"),
+                callback: L
+              },
+              title: e(t)("menu.ingredient.empty.title"),
+              subtitle: e(t)("menu.ingredient.empty.subtitle")
+            }, null, 8, ["action", "title", "subtitle"])) : c.value ? (i(), r(I, { key: 4 }, [
+              v("div", Ze, [
+                v("div", et, [
+                  d(ge, {
+                    autofocus: "",
+                    class: "mb-8",
+                    "model-value": me.value,
+                    placeholder: e(t)("menu.ingredient.table.search.placeholder"),
+                    "onUpdate:modelValue": F.sdk.sku.search
+                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
+                ])
+              ]),
+              A.value ? (i(), r("div", tt, [
+                (i(!0), r(I, null, T(c.value.rows, (o) => (i(), r("div", {
+                  key: o.id,
+                  class: "py-12 px-16 flex space-x-8 items-center",
+                  onClick: (h) => J(o)
+                }, [
+                  v("div", lt, [
+                    v("p", at, _(o.name), 1),
+                    v("p", ot, _(e(t)("menu.ingredient.table.mobile.code", { code: o.code })), 1),
+                    v("p", st, _(e(t)("menu.ingredient.table.mobile.unit", {
+                      unit: e(t)("menu.sku.unit_option", {
+                        name: o.unitName,
+                        symbol: o.unitSymbol
+                      })
+                    })), 1)
+                  ]),
+                  d(k, {
+                    class: "shrink-0",
+                    "aria-label": e(t)("menu.common.actions.delete"),
+                    disabled: o.remove.state !== "allowed",
+                    "prepend-icon": "delete",
+                    "text-color": "neutral-gray-400",
+                    variant: "tertiary",
+                    onClick: le((h) => W(o), ["stop"])
+                  }, null, 8, ["aria-label", "disabled", "onClick"])
+                ], 8, nt))), 128))
+              ])) : (i(), C(_e, {
+                key: 0,
+                "column-defs": be.value,
+                "hide-footer": "",
+                "page-size": Math.max(c.value.rows.length, 1),
+                "pin-header-row": "",
+                "row-data": ce.value,
+                "shrink-at": !1,
+                onRowClick: l[0] || (l[0] = (o) => J(o.original))
+              }, null, 8, ["column-defs", "page-size", "row-data"])),
+              c.value.totalCount > 0 && A.value ? (i(), r("div", it, [
+                d(k, {
+                  disabled: c.value.create.state !== "allowed",
+                  label: e(t)("menu.ingredient.actions.add"),
+                  "prepend-icon": "add",
+                  variant: "fab",
+                  onClick: L
+                }, null, 8, ["disabled", "label"])
+              ])) : M("", !0)
+            ], 64)) : M("", !0),
+            d(Ve, {
+              modelValue: g.value,
+              "onUpdate:modelValue": l[10] || (l[10] = (o) => g.value = o),
+              "is-container": e(oe).FmForm,
+              "is-container-props": { onValidationSuccess: ve },
+              "max-width": 560,
+              "onOn:clickedAway": pe
+            }, {
+              "side-sheet-header": y(() => {
+                var o;
+                return [
+                  v("p", ut, _(((o = a.value) == null ? void 0 : o.mode) === "update" ? e(t)("menu.sku.update") : e(t)("menu.sku.add")), 1)
+                ];
+              }),
+              "side-sheet-footer": y(() => {
+                var o, h;
+                return [
+                  v("div", pt, [
+                    d(k, {
+                      disabled: ((o = a.value) == null ? void 0 : o.submit.state) !== "allowed",
+                      label: ((h = a.value) == null ? void 0 : h.mode) === "update" ? e(t)("menu.common.actions.update") : e(t)("menu.common.actions.add"),
+                      size: "lg",
+                      type: "submit",
+                      variant: "primary"
+                    }, null, 8, ["disabled", "label"]),
+                    d(k, {
+                      label: e(t)("menu.common.actions.cancel"),
+                      size: "lg",
+                      variant: "tertiary",
+                      onClick: l[9] || (l[9] = (z) => g.value = !1)
+                    }, null, 8, ["label"])
+                  ])
+                ];
+              }),
+              default: y(() => {
+                var o, h, z, te;
+                return [
+                  (o = a.value) != null && o.noUnits ? (i(), r("div", dt, [
+                    d(e(se), {
+                      action: { text: e(t)("menu.unit.add"), callback: ke },
+                      title: e(t)("menu.sku.empty.no_unit"),
+                      subtitle: e(t)("menu.sku.empty.subtitle")
+                    }, null, 8, ["action", "title", "subtitle"])
+                  ])) : (i(), r("div", mt, [
+                    v("div", rt, [
+                      d(Z, ae({
+                        class: "flex-2",
+                        "error-messages": O.value ? [e(w)(O.value)] : [],
+                        label: e(t)("menu.sku.columns.code"),
+                        "model-value": ((h = a.value) == null ? void 0 : h.code) ?? ""
+                      }, e(p).field("code", s.value.setCode)), null, 16, ["error-messages", "label", "model-value"]),
+                      d(Z, ae({
+                        class: "flex-1",
+                        "error-messages": K.value ? [e(w)(K.value)] : [],
+                        label: e(t)("menu.sku.columns.name"),
+                        "model-value": ((z = a.value) == null ? void 0 : z.name) ?? ""
+                      }, e(p).field("name", s.value.setName)), null, 16, ["error-messages", "label", "model-value"])
+                    ]),
+                    d(Me, {
+                      class: "col-span-2",
+                      "label-mark": "required",
+                      "model-value": ((te = a.value) == null ? void 0 : te.selectedUnitName) ?? ""
+                    }, {
+                      label: y(() => [
+                        d(xe, {
+                          label: e(t)("menu.sku.columns.unit")
+                        }, null, 8, ["label"])
+                      ]),
+                      default: y(({ invalid: $ }) => [
+                        d(Ie, { "z-index": 101 }, {
+                          "menu-button": y(() => [
+                            d(Fe, {
+                              class: "fm-typo-en-body-lg-400 text-fm-color-typo-primary",
+                              invalid: $,
+                              "append-icon": "expand_more"
+                            }, {
+                              default: y(() => [
+                                Ne(_(a.value ? e(t)("menu.sku.unit_option", {
+                                  name: a.value.selectedUnitName,
+                                  symbol: a.value.selectedUnitSymbol
+                                }) : ""), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["invalid"])
+                          ]),
+                          default: y(() => {
+                            var B;
+                            return [
+                              v("div", ct, [
+                                (i(!0), r(I, null, T(((B = a.value) == null ? void 0 : B.unitGroups) ?? [], (u) => (i(), r(I, {
+                                  key: u.unitId
+                                }, [
+                                  d(he, {
+                                    label: u.name
+                                  }, null, 8, ["label"]),
+                                  d(Ce),
+                                  (i(!0), r(I, null, T(u.options, (b) => (i(), C(we, {
+                                    key: `${b.unitId}:${b.measurementId ?? "base"}`,
+                                    label: e(t)("menu.sku.unit_option", {
+                                      name: b.name,
+                                      symbol: b.symbol
+                                    }),
+                                    "model-value": b.selected,
+                                    "x-should-scroll-into": `${b.selected}`,
+                                    onClick: (ft) => s.value.selectUnit(
+                                      b.unitId,
+                                      b.measurementId
+                                    )
+                                  }, null, 8, ["label", "model-value", "x-should-scroll-into", "onClick"]))), 128))
+                                ], 64))), 128))
+                              ])
+                            ];
+                          }),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 1
+                    }, 8, ["model-value"]),
+                    d(Be, {
+                      variant: "outlined",
+                      class: "p-16 flex flex-col gap-16"
+                    }, {
+                      default: y(() => {
+                        var $, B;
+                        return [
+                          d(Se, {
+                            value: "",
+                            label: e(t)("menu.sku.convertible.label"),
+                            "model-value": (($ = a.value) == null ? void 0 : $.convertible) ?? !1,
+                            sublabel: e(t)("menu.sku.convertible.sublabel"),
+                            "label-placement": "right",
+                            "onUpdate:modelValue": l[1] || (l[1] = (u) => (e(p).touch("convert"), s.value.setConvertible(u)))
+                          }, null, 8, ["label", "model-value", "sublabel"]),
+                          (B = a.value) != null && B.convertible ? (i(), r(I, { key: 0 }, [
+                            d(Ue, {
+                              items: a.value.convertOptions.map((u) => ({
+                                label: e(t)("menu.sku.convert_option", {
+                                  name: u.name,
+                                  symbol: u.symbol
+                                }),
+                                value: u.measurementId
+                              })),
+                              label: e(t)("menu.sku.convertible.convert_to"),
+                              "model-value": a.value.convertMeasurementId,
+                              "onUpdate:modelValue": l[2] || (l[2] = (u) => s.value.selectConvertMeasurement(u))
+                            }, null, 8, ["items", "label", "model-value"]),
+                            d(ie, {
+                              kind: "recipe",
+                              disabled: X.value,
+                              rows: j(a.value.recipeBindings),
+                              onLink: l[3] || (l[3] = (u) => Y("recipe")),
+                              onRemove: l[4] || (l[4] = (u) => (e(p).touch("convert"), s.value.removeBinding(u))),
+                              onUpdateAmount: G,
+                              onUpdateMeasurement: l[5] || (l[5] = (u, b) => s.value.setBindingMeasurement(u, b))
+                            }, null, 8, ["disabled", "rows"]),
+                            d(ie, {
+                              kind: "ingredient",
+                              disabled: X.value,
+                              rows: j(a.value.ingredientBindings),
+                              onLink: l[6] || (l[6] = (u) => Y("ingredient")),
+                              onRemove: l[7] || (l[7] = (u) => (e(p).touch("convert"), s.value.removeBinding(u))),
+                              onUpdateAmount: G,
+                              onUpdateMeasurement: l[8] || (l[8] = (u, b) => s.value.setBindingMeasurement(u, b))
+                            }, null, 8, ["disabled", "rows"]),
+                            Q.value ? (i(), r("p", vt, _(e(w)(Q.value)), 1)) : M("", !0)
+                          ], 64)) : M("", !0)
+                        ];
+                      }),
+                      _: 1
+                    })
+                  ]))
+                ];
+              }),
+              _: 1
+            }, 8, ["modelValue", "is-container", "is-container-props"]),
+            d(Re, {
+              modelValue: N.value,
+              "onUpdate:modelValue": l[11] || (l[11] = (o) => N.value = o),
+              candidates: fe.value,
+              query: ((ee = a.value) == null ? void 0 : ee.bindingCandidateQuery) ?? "",
+              title: ye.value,
+              "onUpdate:query": l[12] || (l[12] = (o) => s.value.setBindingCandidateQuery(o)),
+              onSubmit: l[13] || (l[13] = (o) => (e(p).touch("convert"), s.value.linkBindings(V.value, o)))
+            }, null, 8, ["modelValue", "candidates", "query", "title"])
+          ];
+        }),
+        _: 1
+      }, 8, ["heading"]);
+    };
+  }
+}), St = /* @__PURE__ */ ue({
+  __name: "Ingredient",
+  setup(R) {
+    const F = je();
+    return (t, w) => (i(), C(bt, { sdk: e(F) }, null, 8, ["sdk"]));
+  }
+});
+export {
+  St as default
+};