@feedmepos/mf-menu-portal 0.0.0-stage → 1.0.1-dev.1

package/dist/Recipe-C1W8_15H.js

@@ -0,0 +1,350 @@
+import { defineComponent as W, computed as d, ref as U, shallowRef as G, h as ge, withModifiers as be, onUnmounted as fe, resolveComponent as g, openBlock as m, createBlock as F, unref as a, withCtx as f, createElementBlock as B, toDisplayString as $, Fragment as ye, createElementVNode as y, withDirectives as ke, createVNode as r, createCommentVNode as I, mergeProps as _e } from "vue";
+import { useI18n as we } from "@feedmepos/mf-common";
+import { useDialog as he, components as H, FmButtonVariant as Fe } from "@feedmepos/ui-library";
+import { _ as xe } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { _ as Ce } from "./BindingLinkDialog.vue_vue_type_script_setup_true_lang-BZVQRyRI.js";
+import { _ as J } from "./BindingTable.vue_vue_type_script_setup_true_lang-DBzjWI_6.js";
+import { _ as Be } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
+import { _ as Se } from "./ListCountTag.vue_vue_type_script_setup_true_lang-0bjk8Aly.js";
+import { u as Ve } from "./useActionFeedback-DoFeBFpl.js";
+import { u as Ae } from "./useEditorValidation-Ctef5Bxt.js";
+import { b as Ue, u as $e, a as Ie } from "./provide-Tmjfji09.js";
+const Me = {
+  key: 0,
+  class: "flex-1 flex justify-between gap-8 pl-8"
+}, De = {
+  key: 0,
+  role: "alert",
+  class: "text-fm-color-typo-secondary"
+}, Ee = {
+  key: 1,
+  class: "text-fm-color-typo-secondary"
+}, Te = { class: "flex justify-end items-center" }, qe = { class: "w-[320px]" }, Ne = { class: "fm-typo-en-title-md-600" }, Re = { class: "pt-8 space-y-40" }, ze = { class: "flex flex-row gap-16" }, Le = { class: "flex gap-8 items-center justify-start" }, je = /* @__PURE__ */ W({
+  __name: "RecipeList",
+  props: {
+    sdk: {}
+  },
+  setup(M) {
+    const v = M, D = {
+      mounted: (e, t) => {
+        var o;
+        return (o = e.querySelector("input")) == null ? void 0 : o.setAttribute("aria-label", t.value);
+      },
+      updated: (e, t) => {
+        var o;
+        return (o = e.querySelector("input")) == null ? void 0 : o.setAttribute("aria-label", t.value);
+      }
+    }, { t: n } = we(), x = Ue(), X = he(), { run: E } = Ve(), c = $e(v.sdk.recipe.list), u = d(
+      () => c.value.status === "ready" ? c.value.value : null
+    ), Y = d(() => {
+      var e;
+      return ((e = u.value) == null ? void 0 : e.query) ?? "";
+    }), Z = d(() => {
+      var e;
+      return [...((e = u.value) == null ? void 0 : e.rows) ?? []];
+    }), b = U(!1), S = U(!1), C = U("recipe"), l = G(
+      v.sdk.recipe.editor()
+    ), k = G(
+      l.value.get()
+    );
+    let V = l.value.subscribe(
+      (e) => {
+        k.value = e;
+      }
+    );
+    const i = d(
+      () => k.value.status === "ready" ? k.value.value : null
+    ), p = Ae(() => l.value), T = d(
+      () => i.value ? p.issue(i.value.fieldIssues, "name") ?? i.value.nameIssue : null
+    ), q = d(
+      () => i.value ? p.issue(i.value.fieldIssues, "contains") ?? i.value.containsIssue : null
+    );
+    function N(e) {
+      var o;
+      const t = ((o = i.value) == null ? void 0 : o.fieldIssues) ?? {};
+      return (e ?? []).map((_) => ({
+        ..._,
+        amountIssue: p.issue(t, `amount:${_.id}`) ?? _.amountIssue
+      }));
+    }
+    function R(e, t) {
+      p.field(
+        `amount:${e}`,
+        (o) => l.value.setBindingAmount(e, o)
+      )["onUpdate:modelValue"](t);
+    }
+    function z(e) {
+      V(), l.value.dispose(), l.value = v.sdk.recipe.editor(e), k.value = l.value.get(), V = l.value.subscribe(
+        (t) => {
+          k.value = t;
+        }
+      );
+    }
+    function L() {
+      var e;
+      ((e = u.value) == null ? void 0 : e.create.state) === "allowed" && (z(), b.value = !0);
+    }
+    function ee(e) {
+      z(e.id), b.value = !0;
+    }
+    async function te() {
+      (await E(
+        () => p.submit(() => l.value.submit()),
+        {
+          showLoading: () => {
+            var t;
+            return ((t = i.value) == null ? void 0 : t.status) === "submitting";
+          },
+          successMessage: (t) => n("menu.recipe.form.saved", { name: t.name })
+        }
+      )).kind === "success" && (b.value = !1);
+    }
+    function ne() {
+    }
+    function ae(e) {
+      e.remove.state === "allowed" && X.open({
+        title: n("menu.common.dialog.remove.recipe.title"),
+        message: n("menu.common.dialog.remove.recipe.message", {
+          name: e.name
+        }),
+        primaryActions: {
+          text: n("menu.common.actions.remove"),
+          close: !0,
+          variant: Fe.Destructive
+        },
+        secondaryActions: {
+          text: n("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await E(() => v.sdk.recipe.remove(e.id), {
+          successMessage: n("menu.recipe.form.removed", { name: e.name })
+        });
+      });
+    }
+    function ie(e) {
+      const t = e.targetName ?? n("menu.recipe.table.ingredient.missing");
+      return e.kind === "recipe" ? n("menu.recipe.table.ingredient.recipe", {
+        name: t,
+        amount: e.amount
+      }) : n("menu.recipe.table.ingredient.sku", {
+        name: t,
+        amount: e.amount,
+        unit: e.unitSymbol ?? n("menu.recipe.table.ingredient.missing")
+      });
+    }
+    function se(e) {
+      return e.map(ie).join(n("menu.recipe.table.ingredient.separator"));
+    }
+    const le = d(() => [
+      {
+        accessorKey: "name",
+        header: () => n("menu.recipe.table.columns.name"),
+        enableSorting: !1
+      },
+      {
+        accessorKey: "ingredients",
+        header: () => n("menu.recipe.table.columns.ingredients"),
+        enableSorting: !1,
+        cell: (e) => se(e.row.original.ingredients)
+      },
+      {
+        id: "actions",
+        size: 52,
+        meta: { cellClass: "pl-16", headerContentClass: "-mx-16" },
+        header: "",
+        cell: (e) => ge(H.FmButton, {
+          icon: "delete",
+          variant: "tertiary",
+          textColor: "neutral-gray-400",
+          disabled: e.row.original.remove.state !== "allowed",
+          "aria-label": n("menu.recipe.table.delete.accessibility_label", {
+            name: e.row.original.name
+          }),
+          onClick: be(
+            () => ae(e.row.original),
+            ["stop", "prevent"]
+          )
+        })
+      }
+    ]), j = d(
+      () => {
+        var e;
+        return ((e = i.value) == null ? void 0 : e.submit.state) !== "allowed";
+      }
+    ), oe = d(
+      () => {
+        var e, t;
+        return C.value === "recipe" ? ((e = i.value) == null ? void 0 : e.recipeCandidates) ?? [] : ((t = i.value) == null ? void 0 : t.ingredientCandidates) ?? [];
+      }
+    ), ue = d(
+      () => n("menu.inventory.binding.link.title", {
+        type: C.value === "recipe" ? n("menu.inventory.binding.link.recipe") : n("menu.inventory.binding.link.ingredient")
+      })
+    );
+    function P(e) {
+      C.value = e, l.value.setBindingCandidateQuery(""), S.value = !0;
+    }
+    return fe(() => {
+      V(), l.value.dispose();
+    }), (e, t) => {
+      const o = g("FmButton"), _ = g("FmCircularProgress"), re = g("FmSearch"), de = g("FmTable"), me = g("FmTextField"), ce = g("FmFormGroup"), pe = g("FmSideSheet");
+      return m(), F(Be, {
+        "data-visual-root": "recipe",
+        heading: a(n)("menu.recipe.title")
+      }, {
+        "append-heading": f(() => [
+          a(c).status === "ready" && u.value ? (m(), B("div", Me, [
+            r(Se, {
+              value: u.value.totalCount
+            }, null, 8, ["value"]),
+            u.value.totalCount > 0 ? (m(), F(o, {
+              key: 0,
+              disabled: u.value.create.state !== "allowed",
+              label: a(n)("menu.recipe.actions.add"),
+              "prepend-icon": "add",
+              onClick: L
+            }, null, 8, ["disabled", "label"])) : I("", !0)
+          ])) : I("", !0)
+        ]),
+        default: f(() => {
+          var Q;
+          return [
+            a(c).status === "error" ? (m(), B("p", De, $(a(x)(a(c).error.message)), 1)) : a(c).status === "unavailable" ? (m(), B("p", Ee, $(a(x)(a(c).reason)), 1)) : a(c).status === "loading" ? (m(), F(_, { key: 2 })) : u.value && u.value.totalCount === 0 ? (m(), F(a(xe), {
+              key: 3,
+              action: { text: a(n)("menu.recipe.empty.action"), callback: L },
+              title: a(n)("menu.recipe.empty.title"),
+              subtitle: a(n)("menu.recipe.empty.subtitle")
+            }, null, 8, ["action", "title", "subtitle"])) : u.value ? (m(), B(ye, { key: 4 }, [
+              y("div", Te, [
+                y("div", qe, [
+                  ke(r(re, {
+                    autofocus: "",
+                    "aria-label": a(n)("menu.recipe.table.search.accessibility_label"),
+                    class: "mb-8",
+                    "model-value": Y.value,
+                    placeholder: a(n)("menu.recipe.table.search.placeholder"),
+                    "onUpdate:modelValue": v.sdk.recipe.search
+                  }, null, 8, ["aria-label", "model-value", "placeholder", "onUpdate:modelValue"]), [
+                    [D, a(n)("menu.recipe.table.search.accessibility_label")]
+                  ])
+                ])
+              ]),
+              r(de, {
+                "column-defs": le.value,
+                "hide-footer": "",
+                "page-size": Math.max(u.value.rows.length, 1),
+                "pin-header-row": "",
+                "row-data": Z.value,
+                "shrink-at": !1,
+                onRowClick: t[0] || (t[0] = (s) => ee(s.original))
+              }, null, 8, ["column-defs", "page-size", "row-data"])
+            ], 64)) : I("", !0),
+            r(pe, {
+              modelValue: b.value,
+              "onUpdate:modelValue": t[6] || (t[6] = (s) => b.value = s),
+              "is-container": a(H).FmForm,
+              "is-container-props": { onValidationSuccess: te },
+              "max-width": 560,
+              "onOn:clickedAway": ne
+            }, {
+              "side-sheet-header": f(() => {
+                var s;
+                return [
+                  y("p", Ne, $(((s = i.value) == null ? void 0 : s.mode) === "update" ? a(n)("menu.recipe.update") : a(n)("menu.recipe.add")), 1)
+                ];
+              }),
+              "side-sheet-footer": f(() => {
+                var s, w;
+                return [
+                  y("div", Le, [
+                    r(o, {
+                      disabled: ((s = i.value) == null ? void 0 : s.submit.state) !== "allowed",
+                      label: ((w = i.value) == null ? void 0 : w.mode) === "update" ? a(n)("menu.common.actions.update") : a(n)("menu.common.actions.add"),
+                      size: "lg",
+                      type: "submit",
+                      variant: "primary"
+                    }, null, 8, ["disabled", "label"]),
+                    r(o, {
+                      label: a(n)("menu.common.actions.cancel"),
+                      size: "lg",
+                      variant: "tertiary",
+                      onClick: t[5] || (t[5] = (A) => b.value = !1)
+                    }, null, 8, ["label"])
+                  ])
+                ];
+              }),
+              default: f(() => {
+                var s, w, A;
+                return [
+                  y("div", Re, [
+                    y("div", ze, [
+                      r(me, _e({
+                        autofocus: "",
+                        class: "flex-2",
+                        "error-messages": T.value ? [a(x)(T.value)] : [],
+                        label: a(n)("menu.recipe.columns.name"),
+                        "model-value": ((s = i.value) == null ? void 0 : s.name) ?? ""
+                      }, a(p).field("name", l.value.setName)), null, 16, ["error-messages", "label", "model-value"])
+                    ]),
+                    r(ce, {
+                      "model-value": [
+                        ...((w = i.value) == null ? void 0 : w.recipeBindings) ?? [],
+                        ...((A = i.value) == null ? void 0 : A.ingredientBindings) ?? []
+                      ],
+                      "error-messages": q.value ? [a(x)(q.value)] : []
+                    }, {
+                      default: f(() => {
+                        var K, O;
+                        return [
+                          r(J, {
+                            kind: "recipe",
+                            disabled: j.value,
+                            rows: N((K = i.value) == null ? void 0 : K.recipeBindings),
+                            onLink: t[1] || (t[1] = (h) => P("recipe")),
+                            onUpdateAmount: R
+                          }, null, 8, ["disabled", "rows"]),
+                          r(J, {
+                            kind: "ingredient",
+                            disabled: j.value,
+                            rows: N((O = i.value) == null ? void 0 : O.ingredientBindings),
+                            "show-inert-deduct": "",
+                            onLink: t[2] || (t[2] = (h) => P("ingredient")),
+                            onRemove: t[3] || (t[3] = (h) => (a(p).touch("contains"), l.value.removeIngredientBinding(h))),
+                            onUpdateAmount: R,
+                            onUpdateMeasurement: t[4] || (t[4] = (h, ve) => l.value.setBindingMeasurement(h, ve))
+                          }, null, 8, ["disabled", "rows"])
+                        ];
+                      }),
+                      _: 1
+                    }, 8, ["model-value", "error-messages"])
+                  ])
+                ];
+              }),
+              _: 1
+            }, 8, ["modelValue", "is-container", "is-container-props"]),
+            r(Ce, {
+              modelValue: S.value,
+              "onUpdate:modelValue": t[7] || (t[7] = (s) => S.value = s),
+              candidates: oe.value,
+              query: ((Q = i.value) == null ? void 0 : Q.bindingCandidateQuery) ?? "",
+              title: ue.value,
+              "onUpdate:query": t[8] || (t[8] = (s) => l.value.setBindingCandidateQuery(s)),
+              onSubmit: t[9] || (t[9] = (s) => (a(p).touch("contains"), l.value.linkBindings(C.value, s)))
+            }, null, 8, ["modelValue", "candidates", "query", "title"])
+          ];
+        }),
+        _: 1
+      }, 8, ["heading"]);
+    };
+  }
+}), et = /* @__PURE__ */ W({
+  __name: "Recipe",
+  setup(M) {
+    const v = Ie();
+    return (D, n) => (m(), F(je, { sdk: a(v) }, null, 8, ["sdk"]));
+  }
+});
+export {
+  et as default
+};