@feedmepos/mf-menu 0.0.2 → 0.0.54

package/dist/Category-B1_5y7Mc.js

@@ -0,0 +1,392 @@
+import { defineComponent as P, ref as w, computed as B, watch as re, resolveComponent as y, createElementBlock as T, openBlock as h, Fragment as Z, renderSlot as ie, createVNode as d, unref as e, withCtx as v, createElementVNode as a, toDisplayString as L, h as D, withModifiers as A, getCurrentInstance as ce, renderList as ue, createBlock as O, createCommentVNode as de } from "vue";
+import { useI18n as j } from "@feedmepos/mf-common";
+import { useSnackbar as Y, components as I, useDialog as ee, FmButtonVariant as X, useBreakpoints as me, FmButtonColorThemeVariant as pe } from "@feedmepos/ui-library";
+import { _ as fe } from "./ResponsiveFabButton.vue_vue_type_script_setup_true_lang-Cn-3MRBO.js";
+import { D as q, u as ge, H as K, X as G, J as te } from "./menu-NS-_m-8z.js";
+import { _ as _e } from "./PageLayout.vue_vue_type_script_setup_true_lang-2f0QfweQ.js";
+import { _ as ye } from "./app-B1I12pXb.js";
+import { c as ve } from "./createForm-BoUQeZTd.js";
+import { _ as Q } from "./FormSection.vue_vue_type_script_setup_true_lang-CO4YGYLB.js";
+import { u as he } from "./discardConfirm-Br8AbO7y.js";
+import { c as W } from "./object-VfpKsK3I.js";
+import { u as H, a as be } from "./menu-BqPh15La.js";
+import { c as xe } from "./check-C9mY6LiX.js";
+import { u as Ce, v as oe } from "./item-DIYt3BTF.js";
+import { _ as ke } from "./index.vue_vue_type_script_setup_true_lang-BgqsTzLI.js";
+function we(p, f = "This field can't be empty.") {
+  return p == null || Array.isArray(p) && p.length === 0 || typeof p == "string" && p.trim() === "" ? f : !0;
+}
+const Fe = {
+  class: "fm-typo-en-title-md-600"
+}, Ve = {
+  class: "flex flex-col gap-32 h-full min-h-0 py-16"
+}, $e = {
+  class: "flex gap-24 items-center"
+}, Se = {
+  class: "text-fm-color-typo-secondary"
+}, Me = {
+  class: "flex-1"
+}, Ee = {
+  class: "flex-1 overflow-hidden min-h-[300px]"
+}, Te = {
+  class: "flex gap-8 items-center justify-start"
+}, Be = /* @__PURE__ */ P({
+  __name: "Form",
+  props: {
+    initialValue: {}
+  },
+  setup(p, {
+    expose: f,
+    emit: F
+  }) {
+    const x = p, k = Y(), V = q(k), g = G(V), s = ge(), b = Ce(), {
+      categories: i
+    } = H(), {
+      t: c
+    } = j(), $ = w(!1), m = w(!1), S = (t) => {
+      xe.isBoolean(t) ? m.value = t : m.value = !m.value;
+    }, u = w(W(x.initialValue)), M = w(""), E = B(() => {
+      var t;
+      return ((t = i.value.find((o) => o.id === u.value.id)) == null ? void 0 : t.items) || [];
+    }), n = [{
+      accessorKey: "name",
+      header: () => c("menu.category.products.columns.name"),
+      enableSorting: !1
+    }, {
+      accessorKey: "code",
+      header: () => c("menu.category.products.columns.code"),
+      enableSorting: !1
+    }, {
+      id: "actions",
+      size: 52,
+      meta: {
+        cellClass: "pl-16",
+        headerContentClass: "-mx-16"
+      },
+      header: "",
+      cell: (t) => {
+        const o = t.row.original;
+        return D("div", {
+          class: "flex justify-end"
+        }, [D(I.FmButton, {
+          icon: "edit",
+          outline: !0,
+          variant: "tertiary",
+          textColor: "neutral-gray-400",
+          onClick: A(async () => {
+            await _(o);
+          }, ["stop", "prevent"])
+        })]);
+      }
+    }];
+    async function l() {
+      await b.create(u.value.id);
+    }
+    async function _(t) {
+      await b.update(t._id);
+    }
+    const N = B(() => s.version === K.F_MENU_VERSION.enum.v4);
+    async function U(t) {
+      await b.rearrange(t.map((o) => o._id));
+    }
+    const r = he(() => u.value.name !== x.initialValue.name, () => {
+      m.value = !1;
+    });
+    async function z() {
+      const t = s.categories.find((R) => R._id === u.value.id), {
+        updateMenu: o
+      } = g;
+      await o({
+        module: K.F_MENU_MODULE_V4_KEY.enum.category,
+        operation: te.F_OPERATION_TYPE.update,
+        data: {
+          ...t,
+          name: u.value.name ?? (t == null ? void 0 : t.name)
+        }
+      }, u.value.name), S(!1);
+    }
+    return re(() => m.value, () => {
+      m.value && (u.value = W(x.initialValue));
+    }), f({
+      trigger: S,
+      show: m
+    }), (t, o) => {
+      const R = y("FmTextField"), ae = y("FmButton"), ne = y("FmSearch"), le = y("FmTable"), J = y("fm-button"), se = y("fm-side-sheet");
+      return h(), T(Z, null, [ie(t.$slots, "default", {
+        trigger: S
+      }), d(se, {
+        id: "group-form",
+        modelValue: m.value,
+        "onUpdate:modelValue": o[4] || (o[4] = (C) => m.value = C),
+        "is-container": e(I).FmForm,
+        "is-container-props": {
+          onValidationSuccess: z,
+          blameFormChildOnValidationFailed: !0
+        },
+        "max-width": 560,
+        "onOn:clickedAway": e(r)
+      }, {
+        "side-sheet-header": v(() => [a("p", Fe, L(e(c)("menu.category.title")), 1)]),
+        "side-sheet-footer": v(() => [a("div", Te, [d(J, {
+          label: e(c)("menu.common.actions.update"),
+          loading: $.value,
+          size: "lg",
+          type: "submit",
+          variant: "primary",
+          disabled: !u.value.id
+        }, null, 8, ["label", "loading", "disabled"]), d(J, {
+          label: e(c)("menu.common.actions.cancel"),
+          size: "lg",
+          variant: "tertiary",
+          onClick: o[3] || (o[3] = () => m.value = !1)
+        }, null, 8, ["label"])])]),
+        default: v(() => [a("div", Ve, [d(Q, {
+          title: e(c)("menu.category.detail")
+        }, {
+          default: v(() => [d(R, {
+            label: e(c)("menu.category.name"),
+            modelValue: u.value.name,
+            "onUpdate:modelValue": o[0] || (o[0] = (C) => u.value.name = C),
+            disabled: !u.value.id,
+            rules: [e(we)]
+          }, null, 8, ["label", "modelValue", "disabled", "rules"])]),
+          _: 1
+        }, 8, ["title"]), d(Q, {
+          title: e(c)("menu.category.products.title"),
+          class: "flex-1 min-h-0",
+          shrinkable: !0
+        }, {
+          "append-title": v(() => [d(ae, {
+            label: e(c)("menu.category.products.add"),
+            variant: "secondary",
+            "prepend-icon": "add",
+            "text-color": "primary",
+            "border-color": "primary",
+            onClick: l
+          }, null, 8, ["label"])]),
+          default: v(() => [a("div", $e, [a("div", Se, L(e(c)("menu.category.products.linked_count", {
+            count: E.value.length
+          })), 1), a("div", Me, [d(ne, {
+            placeholder: e(c)("menu.common.actions.search"),
+            modelValue: M.value,
+            "onUpdate:modelValue": o[1] || (o[1] = (C) => M.value = C)
+          }, null, 8, ["placeholder", "modelValue"])])]), a("div", Ee, [d(le, {
+            "column-defs": n,
+            draggable: N.value,
+            "page-size": E.value.length,
+            "row-data": E.value,
+            "search-value": M.value,
+            "shrink-at": !1,
+            "hide-footer": "",
+            "pin-header-row": "",
+            onDndChanged: U,
+            onRowClick: o[2] || (o[2] = (C) => _(C.original))
+          }, null, 8, ["draggable", "page-size", "row-data", "search-value"])])]),
+          _: 1
+        }, 8, ["title"])])]),
+        _: 1
+      }, 8, ["modelValue", "is-container", "is-container-props", "onOn:clickedAway"])], 64);
+    };
+  }
+}), Le = Be, Oe = {
+  key: 0
+}, De = {
+  class: "flex justify-end items-center"
+}, Ne = {
+  class: "w-[320px]"
+}, Ue = {
+  key: 1,
+  class: "flex-1 flex flex-col min-h-0"
+}, ze = {
+  class: "p-8"
+}, Re = {
+  class: "flex flex-1 flex-col min-h-0 overflow-scroll divide-y divide-fm-color-neutral-gray-100 pb-64"
+}, Ae = ["onClick"], Ie = {
+  class: "flex-1 space-y-4"
+}, Ke = {
+  class: "fm-typo-en-body-lg-600"
+}, Pe = {
+  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, je = /* @__PURE__ */ P({
+  __name: "CategoryTable",
+  setup(p) {
+    const f = ee(), F = Y(), x = q(F), k = G(x), V = oe({
+      dialog: f,
+      menuLoader: k
+    }), {
+      categories: g
+    } = H(), s = w(""), b = B(() => g.value.filter((n) => n.name.toLowerCase().includes(s.value.toLowerCase()))), {
+      t: i
+    } = j(), c = w([{
+      accessorKey: "name",
+      header: () => i("menu.category.columns.title"),
+      enableSorting: !1,
+      meta: {
+        width: "auto"
+      }
+    }, {
+      accessorKey: "items",
+      header: () => i("menu.category.columns.products"),
+      enableSorting: !1,
+      size: 200,
+      cell: (n) => {
+        const l = n.row.original;
+        return i(l.items.length > 1 ? "menu.common.labels.product_linked_plural" : "menu.common.labels.product_linked_singular", {
+          count: l.items.length
+        });
+      }
+    }, {
+      id: "actions",
+      size: 52,
+      meta: {
+        cellClass: "pl-16",
+        headerContentClass: "-mx-16"
+      },
+      header: "",
+      cell: (n) => {
+        const l = n.row.original;
+        return D("div", {
+          class: "flex justify-end"
+        }, [D(I.FmButton, {
+          icon: "delete",
+          disabled: !l.id,
+          variant: "tertiary",
+          textColor: "neutral-gray-400",
+          onClick: A(async () => {
+            await $(l);
+          }, ["stop", "prevent"])
+        })]);
+      }
+    }]);
+    async function $(n) {
+      if (!n.id) {
+        F.open({
+          message: i("menu.category.dialog.remove.error"),
+          type: "warning"
+        });
+        return;
+      }
+      f.open({
+        title: i("menu.category.dialog.remove.title"),
+        message: i("menu.common.dialog.remove_confirmation", {
+          name: n.name
+        }),
+        primaryActions: {
+          text: "Remove",
+          close: !0,
+          variant: X.Destructive
+        },
+        secondaryActions: {
+          text: "Cancel",
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await k.updateMenu({
+          module: K.F_MENU_MODULE_V4_KEY.enum.category,
+          operation: te.F_OPERATION_TYPE.delete,
+          data: n.id
+        }, n.name, !0);
+      });
+    }
+    async function m(n) {
+      const l = n.map((_) => _.id).filter((_) => !!_);
+      await V.rearrange(l);
+    }
+    const S = ce();
+    async function u(n) {
+      ve(S, Le, {
+        initialValue: n
+      });
+    }
+    const M = me(), E = B(() => M.breakpoints.value.xs);
+    return (n, l) => {
+      const _ = y("FmSearch"), N = y("FmTable"), U = y("FmButton");
+      return E.value ? (h(), T("div", Ue, [a("div", ze, [d(_, {
+        autofocus: "",
+        modelValue: s.value,
+        "onUpdate:modelValue": l[2] || (l[2] = (r) => s.value = r),
+        class: "w-full",
+        placeholder: e(i)("menu.common.labels.search_placeholder", {
+          type: "categories"
+        })
+      }, null, 8, ["modelValue", "placeholder"])]), a("div", Re, [(h(!0), T(Z, null, ue(b.value, (r) => (h(), T("div", {
+        key: r.id || "",
+        class: "flex flex-row py-12 px-16",
+        onClick: (z) => u(r)
+      }, [a("div", Ie, [a("p", Ke, L(r.name), 1), a("p", Pe, L(e(i)(r.items.length > 1 ? "menu.common.labels.product_linked_plural" : "menu.common.labels.product_linked_singular", {
+        count: r.items.length
+      })), 1)]), d(U, {
+        "text-color": e(pe).NeutralGray400,
+        variant: e(X).Tertiary,
+        "prepend-icon": "delete",
+        disabled: !r.id,
+        onClick: A((z) => $(r), ["stop"])
+      }, null, 8, ["text-color", "variant", "disabled", "onClick"])], 8, Ae))), 128))])])) : (h(), T("div", Oe, [a("div", De, [a("div", Ne, [d(_, {
+        modelValue: s.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (r) => s.value = r),
+        autofocus: "",
+        class: "mb-8",
+        placeholder: e(i)("menu.common.labels.search_placeholder", {
+          type: e(i)("menu.category.title")
+        })
+      }, null, 8, ["modelValue", "placeholder"])])]), d(ye, null, {
+        default: v(() => [d(N, {
+          "column-defs": c.value,
+          draggable: !0,
+          "page-size": e(g).length,
+          "row-data": e(g),
+          "search-value": s.value,
+          "shrink-at": !1,
+          "hide-footer": "",
+          "pin-header-row": "",
+          onDndChanged: m,
+          onRowClick: l[1] || (l[1] = (r) => u(r.original))
+        }, null, 8, ["column-defs", "page-size", "row-data", "search-value"])]),
+        _: 1
+      })]));
+    };
+  }
+}), Ye = { 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" }, He = { class: "fm-typo-en-body-md-600 font-semibold" }, ut = /* @__PURE__ */ P({
+  __name: "Category",
+  setup(p) {
+    const f = ee(), F = Y(), x = q(F), k = G(x), V = oe({ dialog: f, menuLoader: k }), { categories: g } = H(), { t: s } = j();
+    function b() {
+      V.create();
+    }
+    const i = B(() => g.value.length);
+    return be().resetOnMount(), (c, $) => (h(), O(_e, {
+      heading: e(s)("menu.category.title")
+    }, {
+      default: v(() => [
+        e(g).length > 0 ? (h(), O(je, { key: 0 })) : (h(), O(e(ke), {
+          key: 1,
+          action: {
+            text: e(s)("menu.category.add"),
+            callback: b
+          },
+          subtitle: e(s)("menu.category.empty.subtitle"),
+          title: e(s)("menu.category.empty.title")
+        }, null, 8, ["action", "subtitle", "title"]))
+      ]),
+      "append-heading": v(() => [
+        a("div", Ye, [
+          a("div", qe, [
+            a("div", Ge, [
+              a("p", He, L(i.value), 1)
+            ])
+          ]),
+          e(g).length > 0 ? (h(), O(fe, {
+            key: 0,
+            label: e(s)("menu.category.add"),
+            "prepend-icon": "add",
+            onClick: b
+          }, null, 8, ["label"])) : de("", !0)
+        ])
+      ]),
+      _: 1
+    }, 8, ["heading"]));
+  }
+});
+export {
+  ut as default
+};