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

package/dist/TakeawayList.vue_vue_type_script_setup_true_lang-C7KexF7H.js

@@ -0,0 +1,554 @@
+import { defineComponent as Ve, computed as c, ref as B, shallowRef as te, h as V, withModifiers as A, onUnmounted as Le, resolveComponent as f, openBlock as m, createBlock as w, unref as t, withCtx as p, renderSlot as I, createElementBlock as _, toDisplayString as x, createElementVNode as v, withDirectives as K, createVNode as r, createCommentVNode as L, mergeProps as Te, Fragment as Ue, renderList as Be } from "vue";
+import { useI18n as ze } from "@feedmepos/mf-common";
+import { useDialog as Ee, components as z, FmButtonVariant as Ne } from "@feedmepos/ui-library";
+import { _ as $e } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { _ as De } from "./LinkProductSideSheet.vue_vue_type_script_setup_true_lang-D9jK-Fhn.js";
+import { _ as le } from "./FormSection.vue_vue_type_script_setup_true_lang-pY-_msnM.js";
+import { _ as Ae } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
+import { _ as Ie } from "./TranslationSideSheet.vue_vue_type_script_setup_true_lang-B0j2PNih.js";
+import { u as Ke } from "./useActionFeedback-DoFeBFpl.js";
+import { u as Me } from "./useEditorValidation-Ctef5Bxt.js";
+import { b as Re, u as ne } from "./provide-Tmjfji09.js";
+import { v as Qe } from "./tableSemantics-C9WFO_I_.js";
+const je = {
+  key: 0,
+  class: "flex-1 flex justify-between gap-8 pl-8"
+}, qe = { class: "flex items-center" }, Ge = { class: "bg-fm-color-neutral-gray-100 rounded-md px-8 py-4" }, Oe = { class: "fm-typo-en-body-md-600" }, He = {
+  key: 0,
+  class: "text-fm-color-typo-secondary",
+  role: "alert"
+}, Je = {
+  key: 1,
+  class: "text-fm-color-typo-secondary",
+  "data-menu-state": "unavailable"
+}, We = {
+  key: 4,
+  class: "flex flex-col flex-1 overflow-hidden pt-16 space-y-16"
+}, Xe = { class: "flex items-center justify-end space-x-8" }, Ye = { class: "w-[320px]" }, Ze = { class: "fm-typo-en-title-md-600" }, ea = { class: "flex flex-col gap-32 h-full min-h-0" }, aa = { class: "flex flex-col flex-1 min-h-0 space-y-16" }, ta = { class: "flex items-center space-x-24" }, la = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, na = { class: "flex gap-8 items-center justify-start" }, fa = /* @__PURE__ */ Ve({
+  __name: "TakeawayList",
+  props: {
+    sdk: {},
+    catalogPage: { type: Boolean, default: !1 },
+    heading: { default: "" }
+  },
+  setup(oe) {
+    const b = oe, { t: a, n: M } = ze(), E = Re(), se = Ee(), { run: R } = Ke(), y = ne(b.sdk.takeaway.list), u = c(
+      () => y.value.status === "ready" ? y.value.value : null
+    ), Q = c(() => {
+      var e;
+      return ((e = u.value) == null ? void 0 : e.query) ?? "";
+    }), ie = c(() => {
+      var e;
+      return [...((e = u.value) == null ? void 0 : e.rows) ?? []];
+    }), j = {
+      mounted: (e, l) => {
+        var n;
+        (n = e.querySelector("input")) == null || n.setAttribute("aria-label", String(l.value));
+      },
+      updated: (e, l) => {
+        var n;
+        (n = e.querySelector("input")) == null || n.setAttribute("aria-label", String(l.value));
+      }
+    }, S = B(!1), T = B(!1), g = B(!1), q = ne(
+      b.sdk.linkProduct.catalogue
+    ), ue = c(
+      () => q.value.status === "ready" ? q.value.value : null
+    ), re = c(() => {
+      var e;
+      return ((e = s.value) == null ? void 0 : e.linkedProducts) ?? [];
+    }), de = c(
+      () => {
+        var e;
+        return ((e = s.value) == null ? void 0 : e.linkVariantCombinations.state) === "allowed";
+      }
+    ), G = c(
+      () => {
+        var e;
+        return ((e = s.value) == null ? void 0 : e.linkedGroups) ?? [];
+      }
+    ), ce = c(
+      () => {
+        var e;
+        return ((e = s.value) == null ? void 0 : e.linkedProductQuery) ?? "";
+      }
+    ), me = c(
+      () => {
+        var e;
+        return ((e = s.value) == null ? void 0 : e.linkedProductCount) ?? 0;
+      }
+    );
+    function pe(e) {
+      i.value.setLinkedProducts(e), T.value = !1;
+    }
+    function ve() {
+      var e;
+      ((e = s.value) == null ? void 0 : e.translation.state) === "allowed" && (i.value.beginTranslationEdit(), g.value = !0);
+    }
+    function be() {
+      i.value.saveTranslationEdit(), g.value = !1;
+    }
+    function N() {
+      i.value.discardTranslationEdit(), g.value = !1;
+    }
+    const U = B(/* @__PURE__ */ new Set());
+    function ye(e) {
+      const l = new Set(U.value);
+      l.has(e) ? l.delete(e) : l.add(e), U.value = l;
+    }
+    function fe(e) {
+      const l = [];
+      for (const n of e.products)
+        if (l.push({
+          kind: "product",
+          key: n.id,
+          itemId: n.id,
+          label: n.label,
+          combinationCount: n.combinations.length,
+          unlink: n.unlink
+        }), !!U.value.has(n.id))
+          for (const d of n.combinations)
+            l.push({
+              kind: "combination",
+              key: `${n.id}@${d.combinationKey}`,
+              itemId: n.id,
+              combinationKey: d.combinationKey,
+              label: d.label,
+              unlink: d.unlink
+            });
+      return l;
+    }
+    const ke = c(() => {
+      const e = /* @__PURE__ */ new Map();
+      for (const l of G.value)
+        e.set(l.id ?? "", fe(l));
+      return e;
+    });
+    function O(e) {
+      return ke.value.get(e.id ?? "") ?? [];
+    }
+    function ge(e) {
+      return V(z.FmButton, {
+        icon: "delete",
+        variant: "tertiary",
+        textColor: "neutral-gray-400",
+        disabled: e.unlink.state !== "allowed",
+        "aria-label": e.kind === "product" ? a("menu.apply_product.table.remove_product", {
+          name: e.label
+        }) : a("menu.apply_product.table.remove_combination", {
+          name: e.label
+        }),
+        onClick: A(() => {
+          e.kind === "product" ? i.value.unlinkProduct(e.itemId) : i.value.unlinkCombination(e.itemId, e.combinationKey);
+        }, ["stop", "prevent"])
+      });
+    }
+    function he(e) {
+      return [
+        {
+          accessorKey: "label",
+          enableSorting: !1,
+          header: () => a("menu.apply_product.table.category_count", {
+            name: e.isSynthetic ? a("menu.tree_editor.labels.addon") : e.name,
+            count: e.products.length
+          }),
+          cell: (l) => {
+            const n = l.row.original;
+            if (n.kind === "combination")
+              return V("span", { class: "pl-24" }, n.label);
+            if (n.combinationCount === 0) return n.label;
+            const d = U.value.has(n.itemId);
+            return V("span", { class: "flex gap-8 items-center" }, [
+              n.label,
+              V(z.FmButton, {
+                icon: "keyboard_arrow_up",
+                variant: "tertiary",
+                class: d ? "" : "rotate-180",
+                "aria-expanded": d,
+                "aria-label": a(
+                  d ? "menu.apply_product.table.collapse_combinations" : "menu.apply_product.table.expand_combinations",
+                  { name: n.label }
+                ),
+                onClick: A(
+                  () => ye(n.itemId),
+                  ["stop", "prevent"]
+                )
+              })
+            ]);
+          }
+        },
+        {
+          id: "actions",
+          enableSorting: !1,
+          header: "",
+          cell: (l) => ge(l.row.original)
+        }
+      ];
+    }
+    const i = te(
+      b.sdk.takeaway.editor()
+    ), F = te(
+      i.value.get()
+    );
+    let $ = i.value.subscribe(
+      (e) => F.value = e
+    );
+    const s = c(
+      () => F.value.status === "ready" ? F.value.value : null
+    ), D = Me(() => i.value), H = c(
+      () => s.value ? D.issue(s.value.fieldIssues, "name") : null
+    );
+    function J(e) {
+      g.value = !1, $(), i.value.dispose(), i.value = b.sdk.takeaway.editor(e), F.value = i.value.get(), $ = i.value.subscribe(
+        (l) => F.value = l
+      );
+    }
+    function W() {
+      u.value && u.value.create.state !== "allowed" || (J(), S.value = !0);
+    }
+    function we(e) {
+      J(e.id), S.value = !0;
+    }
+    function X() {
+      g.value && N(), S.value = !1;
+    }
+    async function _e() {
+      var d, C;
+      const e = ((d = s.value) == null ? void 0 : d.name.trim()) ?? "", l = b.catalogPage ? ((C = u.value) == null ? void 0 : C.catalogName) ?? (b.heading || e) : e;
+      (await R(
+        () => D.submit(() => i.value.submit()),
+        {
+          successMessage: a("menu.takeaway.form.saved", { name: l }),
+          showLoading: () => {
+            var P;
+            return ((P = s.value) == null ? void 0 : P.status) === "submitting";
+          }
+        }
+      )).kind === "success" && X();
+    }
+    function xe(e) {
+      e.remove.state === "allowed" && se.open({
+        title: a("menu.common.dialog.remove.takeaway.title"),
+        message: a("menu.common.dialog.remove.takeaway.message", {
+          name: e.name
+        }),
+        primaryActions: {
+          text: a("menu.common.actions.remove"),
+          close: !0,
+          variant: Ne.Destructive
+        },
+        secondaryActions: {
+          text: a("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await R(() => b.sdk.takeaway.remove(e.id), {
+          successMessage: a("menu.takeaway.form.removed", { name: e.name })
+        });
+      });
+    }
+    const Se = c(() => [
+      {
+        accessorKey: "name",
+        header: () => a("menu.takeaway.table.columns.name"),
+        enableSorting: !1,
+        // Legacy fixes the four column widths at 700/200/200/52 rather than
+        // letting them distribute (`portal views/Catalog/Edit/Takeaway.vue:84,
+        // 103, 116, 126`).
+        size: 700
+      },
+      {
+        id: "price",
+        // Legacy's header carries the currency symbol once
+        // (`menu.takeaway.table.columns.price` = "Price ({symbol})"), resolved
+        // from the business country (`Country.getCountry(country).currency`);
+        // the cell itself is a plain formatted number with no symbol
+        // (`formatCurrency(value, false)`), reproduced here rather than
+        // repeating the symbol on every row. `currencySymbol` is the SDK's own
+        // country-derived value, not a row's stored currency code.
+        header: () => {
+          var e;
+          return a("menu.takeaway.table.columns.price", {
+            symbol: ((e = u.value) == null ? void 0 : e.currencySymbol) ?? ""
+          });
+        },
+        enableSorting: !1,
+        size: 200,
+        meta: { textAlign: "right" },
+        cell: (e) => M(e.row.original.price.amount, {
+          minimumFractionDigits: e.row.original.price.precision,
+          maximumFractionDigits: e.row.original.price.precision
+        })
+      },
+      {
+        id: "linkedProducts",
+        header: () => a("menu.takeaway.table.columns.products"),
+        enableSorting: !1,
+        size: 200,
+        cell: (e) => a("menu.takeaway.table.items_linked", {
+          count: e.row.original.linkedProductCount
+        })
+      },
+      ...b.catalogPage ? [] : [
+        {
+          id: "actions",
+          size: 52,
+          meta: { cellClass: "pl-16", headerContentClass: "-mx-16" },
+          header: "",
+          cell: (e) => V(z.FmButton, {
+            icon: "delete",
+            variant: "tertiary",
+            textColor: "neutral-gray-400",
+            disabled: e.row.original.remove.state !== "allowed",
+            "aria-label": a("menu.takeaway.table.remove_takeaway", {
+              name: e.row.original.name
+            }),
+            onClick: A(
+              () => xe(e.row.original),
+              ["stop", "prevent"]
+            )
+          })
+        }
+      ]
+    ]);
+    return Le(() => {
+      b.sdk.takeaway.search(""), $(), i.value.dispose();
+    }), (e, l) => {
+      var Z;
+      const n = f("FmButton"), d = f("FmCircularProgress"), C = f("FmSearch"), P = f("FmTable"), Fe = f("FmTooltip"), Y = f("FmTextField"), Ce = f("FmSpacer"), Pe = f("FmSideSheet");
+      return m(), w(Ae, {
+        heading: e.catalogPage ? ((Z = u.value) == null ? void 0 : Z.catalogName) ?? (e.heading || t(a)("menu.common.labels.main")) : t(a)("menu.takeaway.title")
+      }, {
+        "prepend-heading": p(() => [
+          I(e.$slots, "prepend-heading")
+        ]),
+        "append-heading": p(() => [
+          !e.catalogPage && t(y).status === "ready" && u.value ? (m(), _("div", je, [
+            v("div", qe, [
+              v("div", Ge, [
+                v("p", Oe, x(t(M)(u.value.rows.length)), 1)
+              ])
+            ]),
+            u.value.rows.length > 0 ? (m(), w(n, {
+              key: 0,
+              disabled: u.value.create.state !== "allowed",
+              label: t(a)("menu.takeaway.add"),
+              "prepend-icon": "add",
+              onClick: W
+            }, null, 8, ["disabled", "label"])) : L("", !0)
+          ])) : L("", !0),
+          I(e.$slots, "append-heading")
+        ]),
+        default: p(() => [
+          I(e.$slots, "navigation"),
+          t(y).status === "error" ? (m(), _("p", He, x(t(E)(t(y).error.message)), 1)) : t(y).status === "unavailable" ? (m(), _("p", Je, x(t(E)(t(y).reason)), 1)) : t(y).status === "loading" ? (m(), w(d, { key: 2 })) : u.value && u.value.rows.length === 0 && !Q.value ? (m(), w(t($e), {
+            key: 3,
+            action: u.value.create.state === "allowed" ? { text: t(a)("menu.takeaway.add"), callback: W } : void 0,
+            title: t(a)("menu.takeaway.empty.title"),
+            subtitle: t(a)("menu.takeaway.empty.subtitle")
+          }, null, 8, ["action", "title", "subtitle"])) : u.value ? (m(), _("div", We, [
+            v("div", Xe, [
+              v("div", Ye, [
+                K(r(C, {
+                  autofocus: "",
+                  "model-value": Q.value,
+                  placeholder: t(a)("menu.takeaway.table.search.placeholder"),
+                  "onUpdate:modelValue": b.sdk.takeaway.search
+                }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"]), [
+                  [j, t(a)("menu.takeaway.table.search.label")]
+                ])
+              ])
+            ]),
+            K(r(P, {
+              "column-defs": Se.value,
+              "hide-footer": "",
+              "page-size": u.value.rows.length,
+              "pin-header-row": "",
+              "row-data": ie.value,
+              "shrink-at": !1,
+              onRowClick: l[0] || (l[0] = (o) => we(o.original))
+            }, null, 8, ["column-defs", "page-size", "row-data"]), [
+              [t(Qe), t(a)("menu.takeaway.table.columns.name")]
+            ])
+          ])) : L("", !0),
+          r(Pe, {
+            modelValue: S.value,
+            "onUpdate:modelValue": l[4] || (l[4] = (o) => S.value = o),
+            "is-container": t(z).FmForm,
+            "is-container-props": { onValidationSuccess: _e },
+            "max-width": 560
+          }, {
+            "side-sheet-header": p(() => {
+              var o;
+              return [
+                v("p", Ze, x(((o = s.value) == null ? void 0 : o.mode) === "update" ? t(a)("menu.takeaway.update") : t(a)("menu.takeaway.add")), 1)
+              ];
+            }),
+            "side-sheet-footer": p(() => {
+              var o, h;
+              return [
+                v("div", na, [
+                  r(n, {
+                    disabled: ((o = s.value) == null ? void 0 : o.submit.state) !== "allowed",
+                    label: ((h = s.value) == null ? void 0 : h.mode) === "update" ? t(a)("menu.common.actions.update") : t(a)("menu.common.actions.add"),
+                    size: "lg",
+                    type: "submit",
+                    variant: "primary"
+                  }, null, 8, ["disabled", "label"]),
+                  r(n, {
+                    label: t(a)("menu.common.actions.cancel"),
+                    size: "lg",
+                    variant: "tertiary",
+                    onClick: X
+                  }, null, 8, ["label"])
+                ])
+              ];
+            }),
+            default: p(() => [
+              v("div", ea, [
+                r(le, null, {
+                  default: p(() => {
+                    var o, h, ee, ae;
+                    return [
+                      r(Y, Te({
+                        disabled: ((o = s.value) == null ? void 0 : o.editName.state) !== "allowed",
+                        "error-messages": H.value ? [t(E)(H.value)] : [],
+                        label: t(a)("menu.takeaway.columns.title"),
+                        "model-value": ((h = s.value) == null ? void 0 : h.name) ?? "",
+                        placeholder: t(a)("menu.takeaway.placeholders.title")
+                      }, t(D).field("name", i.value.setName)), {
+                        append: p(() => [
+                          r(Fe, {
+                            placement: "top",
+                            variant: "plain",
+                            "z-index": 999
+                          }, {
+                            default: p(() => {
+                              var k;
+                              return [
+                                r(n, {
+                                  "aria-label": t(a)("menu.common.translation.translation_label"),
+                                  disabled: ((k = s.value) == null ? void 0 : k.translation.state) !== "allowed",
+                                  icon: "g_translate",
+                                  variant: "tertiary",
+                                  onClick: ve
+                                }, null, 8, ["aria-label", "disabled"])
+                              ];
+                            }),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }, 16, ["disabled", "error-messages", "label", "model-value", "placeholder"]),
+                      r(Y, {
+                        disabled: ((ee = s.value) == null ? void 0 : ee.editPrice.state) !== "allowed",
+                        inputmode: "decimal",
+                        label: t(a)("menu.takeaway.columns.price"),
+                        "model-value": ((ae = s.value) == null ? void 0 : ae.price) ?? "",
+                        placeholder: t(a)("menu.takeaway.placeholders.price"),
+                        "onUpdate:modelValue": l[1] || (l[1] = (k) => i.value.setPrice(k))
+                      }, {
+                        prepend: p(() => {
+                          var k;
+                          return [
+                            v("span", null, x(((k = s.value) == null ? void 0 : k.currencySymbol) ?? ""), 1)
+                          ];
+                        }),
+                        _: 1
+                      }, 8, ["disabled", "label", "model-value", "placeholder"])
+                    ];
+                  }),
+                  _: 1
+                }),
+                v("div", aa, [
+                  r(le, {
+                    title: t(a)("menu.common.labels.product")
+                  }, {
+                    "append-title": p(() => {
+                      var o;
+                      return [
+                        r(Ce),
+                        ((o = s.value) == null ? void 0 : o.editLinkedProducts.state) === "allowed" ? (m(), w(n, {
+                          key: 0,
+                          label: t(a)("menu.common.actions.link_product"),
+                          "border-color": "primary",
+                          "prepend-icon": "link",
+                          "text-color": "primary",
+                          variant: "secondary",
+                          onClick: l[2] || (l[2] = (h) => T.value = !0)
+                        }, null, 8, ["label"])) : L("", !0)
+                      ];
+                    }),
+                    default: p(() => [
+                      v("div", ta, [
+                        v("p", la, x(t(a)("menu.common.labels.product_count", {
+                          count: me.value
+                        })), 1),
+                        K(r(C, {
+                          "model-value": ce.value,
+                          class: "flex-1",
+                          placeholder: t(a)("menu.common.labels.search_product"),
+                          "aria-label": t(a)("menu.apply_product.table.search.label"),
+                          "onUpdate:modelValue": l[3] || (l[3] = (o) => i.value.setLinkedProductQuery(String(o ?? "")))
+                        }, null, 8, ["model-value", "placeholder", "aria-label"]), [
+                          [
+                            j,
+                            t(a)("menu.apply_product.table.search.label")
+                          ]
+                        ])
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["title"]),
+                  (m(!0), _(Ue, null, Be(G.value, (o) => (m(), _("div", {
+                    key: o.id ?? ""
+                  }, [
+                    r(P, {
+                      "column-defs": he(o),
+                      "hide-footer": "",
+                      "page-size": O(o).length,
+                      "row-data": O(o),
+                      "shrink-at": !1
+                    }, null, 8, ["column-defs", "page-size", "row-data"])
+                  ]))), 128))
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["modelValue", "is-container", "is-container-props"]),
+          r(De, {
+            modelValue: T.value,
+            "onUpdate:modelValue": l[5] || (l[5] = (o) => T.value = o),
+            catalogue: ue.value,
+            "select-variant": de.value,
+            "selected-products": re.value,
+            title: t(a)("menu.takeaway.form.link_product.title"),
+            onSubmitLinks: pe
+          }, null, 8, ["modelValue", "catalogue", "select-variant", "selected-products", "title"]),
+          s.value ? (m(), w(Ie, {
+            key: 5,
+            dirty: s.value.translationDirty,
+            "model-value": g.value,
+            name: s.value.name,
+            "name-locale": s.value.nameLocale,
+            "name-section-label": t(a)("menu.common.translation.name_section", {
+              entity: t(a)("menu.takeaway.title")
+            }),
+            "supported-locales": s.value.supportedLocales,
+            title: t(a)("menu.common.translation.sheet_title", {
+              entity: t(a)("menu.takeaway.title")
+            }),
+            onDiscard: N,
+            onSave: be,
+            "onUpdate:modelValue": l[6] || (l[6] = (o) => o || N()),
+            "onUpdate:name": i.value.setName,
+            "onUpdate:nameLocale": i.value.setNameLocale
+          }, null, 8, ["dirty", "model-value", "name", "name-locale", "name-section-label", "supported-locales", "title", "onUpdate:name", "onUpdate:nameLocale"])) : L("", !0)
+        ]),
+        _: 3
+      }, 8, ["heading"]);
+    };
+  }
+});
+export {
+  fa as _
+};