@feedmepos/mf-media 2.0.1 → 2.0.2-dev.1

package/dist/AssetLibrary-4168fa7a.js

@@ -0,0 +1,350 @@
+import { defineComponent as Ce, computed as f, ref as s, watch as O, onMounted as Se, resolveComponent as S, openBlock as m, createElementBlock as P, createElementVNode as c, toDisplayString as T, unref as t, createBlock as A, createCommentVNode as _, createVNode as r, withCtx as K } from "vue";
+import { baseClientInstance as Te, useCoreStore as Ae, useI18n as Re } from "@feedmepos/mf-common";
+import { useDialog as De } from "@feedmepos/ui-library";
+import { r as Fe, F as ze, y as Oe, b as Pe, h as Q, a as Ue, o as Ne, f as Ee, $ as Me, v as $e, m as Le, u as je, E as Ge, c as re, g as qe } from "./media-picker-fdef87dc.js";
+async function He(W, w = 20) {
+  const { data: l } = await Te("").get("/my/businesses-pagination", {
+    params: { skip: 0, limit: w, search: W || void 0 }
+  });
+  return l.resources.map((v) => ({ id: v._id, name: v.name }));
+}
+const Je = { class: "flex items-center justify-between mb-8" }, Ke = { class: "fm-typo-en-title-md-600 fm-step-title line-clamp-2" }, Qe = { class: "flex gap-8" }, We = { class: "flex flex-col gap-12 mb-16" }, Xe = { class: "flex gap-12" }, Ye = { class: "flex items-center gap-12" }, Ze = { class: "flex-1 text-xs text-fm-color-typo-secondary" }, ea = {
+  key: 0,
+  class: "text-fm-color-typo-primary font-semibold"
+}, aa = { key: 1 }, la = {
+  key: 0,
+  class: "fixed bottom-24 left-1/2 -translate-x-1/2 flex items-center gap-12 bg-white border rounded-lg shadow-lg px-16 py-8 z-30"
+}, ta = { class: "text-sm font-semibold" }, sa = { class: "flex justify-end gap-8 w-full" }, na = "all", da = /* @__PURE__ */ Ce({
+  __name: "AssetLibrary",
+  setup(W) {
+    const w = Ae(), { t: l } = Re(), v = f(() => {
+      var e;
+      return ((e = w.currentBusiness.value) == null ? void 0 : e.id) ?? "";
+    }), de = f(() => {
+      var e;
+      return (e = w.currentRestaurant.value) == null ? void 0 : e._id;
+    }), R = De(), U = f(() => {
+      var e;
+      return ((e = w.sessionUser.value) == null ? void 0 : e.role.isAdmin) ?? !1;
+    }), h = s(!1), k = s(void 0), N = s([]);
+    async function X(e) {
+      try {
+        N.value = (await He(e)).map((a) => ({ label: a.name, value: a.id }));
+      } catch {
+      }
+    }
+    function ce() {
+      h.value = !h.value, k.value = void 0, y.value = void 0, h.value && N.value.length === 0 && X("");
+    }
+    const B = f(
+      () => U.value && h.value ? k.value || na : v.value
+    ), D = s(""), I = s([]), y = s(void 0), Y = f(
+      () => (w.restaurants.value ?? []).map((e) => ({ label: e.profile.name, value: e._id }))
+    );
+    O(k, () => {
+      y.value = void 0;
+    });
+    const F = s(void 0), Z = s([]), ee = f(() => Z.value.map((e) => ({ label: e, value: e }))), x = s([]), V = s([]), E = s(!1), p = s(1), M = s(0), $ = s(0), L = s(!1), ae = s(null), le = s("recent"), ve = {
+      recent: { sortBy: "createdAt", descending: !0 },
+      name: { sortBy: "fileName", descending: !1 },
+      size: { sortBy: "fileSizeBytes", descending: !0 }
+    }, te = [{ icon: "grid_view" }, { icon: "view_list" }], j = s(te[0]), me = f(() => j.value.icon === "grid_view" ? "grid" : "list"), G = Fe(() => v.value);
+    async function b() {
+      if (B.value) {
+        x.value.length === 0 && (E.value = !0), L.value = !0;
+        try {
+          const [e, a, o] = await Promise.all([
+            Ee({
+              businessId: B.value,
+              restaurantId: y.value,
+              refType: F.value,
+              search: D.value || void 0,
+              tags: I.value.length ? I.value : void 0,
+              // AI-composed images are assets from the moment their bytes land — they have to be, or
+              // their URL could not render — so the library hides them until "save to the asset
+              // centre" removes this tag.
+              excludeTags: [Me],
+              skip: $e(p.value, Q),
+              limit: Q,
+              ...ve[le.value]
+            }),
+            Le(B.value),
+            // Caught rather than left to reject the whole Promise.all: this endpoint is new, and
+            // a backend that hasn't deployed it yet must not be able to take the asset list down
+            // with it — the refType dropdown just stays empty (see the v-if on refTypeOptions)
+            // until the backend catches up.
+            je(B.value, y.value).catch(() => [])
+          ]);
+          x.value = e.resources, M.value = e.meta.totalResources, $.value = e.meta.totalPages, V.value = a, Z.value = o, await G.load(
+            e.resources.filter((u) => !Ge(u)).filter((u) => !!u.refId && !!u.refType).filter((u) => u.businessId === v.value).map((u) => ({ refType: u.refType, refId: u.refId }))
+          );
+        } finally {
+          E.value = !1, L.value = !1;
+        }
+      }
+    }
+    async function q() {
+      p.value = 1, z(), await b();
+    }
+    async function H() {
+      await b();
+      const e = qe(p.value, $.value);
+      e !== p.value && (p.value = e, await b());
+    }
+    async function pe(e) {
+      var a;
+      e !== p.value && (p.value = e, z(), (a = ae.value) == null || a.scrollIntoView({ block: "start" }), await b());
+    }
+    Se(b), O(B, q), O([I, le, y, F], q);
+    let se;
+    O(D, () => {
+      clearTimeout(se), se = setTimeout(q, 250);
+    });
+    const i = s(/* @__PURE__ */ new Set());
+    function fe(e) {
+      const a = new Set(i.value);
+      a.has(e.id) ? a.delete(e.id) : a.add(e.id), i.value = a;
+    }
+    function z() {
+      i.value = /* @__PURE__ */ new Set();
+    }
+    function ye() {
+      i.value = new Set(x.value.map((e) => e.id));
+    }
+    function be() {
+      const e = i.value.size;
+      R.open({
+        title: l("media.library.deleteBulkTitle"),
+        message: l("media.library.deleteBulkMessage", { count: e, disclaimer: l("media.library.deleteDisclaimer") }),
+        primaryActions: { text: l("media.library.deleteConfirmButton"), close: !1, variant: "destructive" },
+        secondaryActions: { text: l("media.library.cancelButton"), close: !0 }
+      }).onPrimary(async () => {
+        await Promise.all(
+          [...i.value].map((a) => {
+            const o = x.value.find((u) => u.id === a);
+            return o ? re(o.businessId, o) : Promise.resolve();
+          })
+        ), z(), await H(), R.close();
+      });
+    }
+    function ge(e) {
+      R.open({
+        title: l("media.library.deleteOneTitle"),
+        message: l("media.library.deleteOneMessage", { fileName: e.fileName, disclaimer: l("media.library.deleteDisclaimer") }),
+        primaryActions: { text: l("media.library.deleteConfirmButton"), close: !1, variant: "destructive" },
+        secondaryActions: { text: l("media.library.cancelButton"), close: !0 }
+      }).onPrimary(async () => {
+        await re(e.businessId, e);
+        const a = new Set(i.value);
+        a.delete(e.id), i.value = a, await H(), R.close();
+      });
+    }
+    const d = s(null), we = f(
+      () => {
+        var e;
+        return (e = d.value) != null && e.refId ? G.byRefId.value.get(d.value.refId) ?? null : null;
+      }
+    );
+    function he(e) {
+      d.value = e;
+    }
+    async function ne() {
+      await b(), d.value && (d.value = x.value.find((e) => {
+        var a;
+        return e.id === ((a = d.value) == null ? void 0 : a.id);
+      }) ?? null);
+    }
+    async function Be() {
+      d.value = null, await H();
+    }
+    const C = s(!1), g = s(null);
+    function xe() {
+      var e;
+      (e = g.value) == null || e.reset(), C.value = !0;
+    }
+    async function _e() {
+      var e;
+      (e = g.value) != null && e.stagedCount || (C.value = !1), await b();
+    }
+    return (e, a) => {
+      var ie;
+      const o = S("FmButton"), u = S("FmSearch"), J = S("FmSelect"), ke = S("FmButtonGroup"), Ie = S("FmDialog");
+      return m(), P("div", {
+        ref_key: "libraryRoot",
+        ref: ae,
+        class: "p-24 relative min-h-full"
+      }, [
+        c("div", Je, [
+          c("h1", Ke, T(t(l)("media.title")), 1),
+          c("div", Qe, [
+            U.value ? (m(), A(o, {
+              key: 0,
+              label: h.value ? t(l)("media.library.backToMyBusinessButton") : t(l)("media.library.viewAllBusinessesButton"),
+              "prepend-icon": "apps",
+              variant: "secondary",
+              onClick: ce
+            }, null, 8, ["label"])) : _("", !0),
+            r(o, {
+              label: t(l)("media.library.uploadButton"),
+              "prepend-icon": "add",
+              variant: "primary",
+              onClick: xe
+            }, null, 8, ["label"])
+          ])
+        ]),
+        c("div", We, [
+          c("div", Xe, [
+            r(u, {
+              modelValue: D.value,
+              "onUpdate:modelValue": a[0] || (a[0] = (n) => D.value = n),
+              placeholder: t(l)("media.library.searchPlaceholder"),
+              class: "max-w-[280px]"
+            }, null, 8, ["modelValue", "placeholder"]),
+            U.value && h.value ? (m(), A(J, {
+              key: 0,
+              modelValue: k.value,
+              "onUpdate:modelValue": a[1] || (a[1] = (n) => k.value = n),
+              items: N.value,
+              placeholder: t(l)("media.library.allBusinessesOption"),
+              searchable: "",
+              clearable: "",
+              "on-search": X,
+              class: "max-w-[240px]"
+            }, null, 8, ["modelValue", "items", "placeholder"])) : _("", !0),
+            Y.value.length && B.value === v.value ? (m(), A(J, {
+              key: 1,
+              modelValue: y.value,
+              "onUpdate:modelValue": a[2] || (a[2] = (n) => y.value = n),
+              items: Y.value,
+              placeholder: t(l)("media.library.allRestaurantsOption"),
+              searchable: "",
+              clearable: "",
+              class: "max-w-[240px]"
+            }, null, 8, ["modelValue", "items", "placeholder"])) : _("", !0),
+            ee.value.length ? (m(), A(J, {
+              key: 2,
+              modelValue: F.value,
+              "onUpdate:modelValue": a[3] || (a[3] = (n) => F.value = n),
+              items: ee.value,
+              placeholder: t(l)("media.library.allRefTypesOption"),
+              searchable: "",
+              clearable: "",
+              class: "max-w-[240px]"
+            }, null, 8, ["modelValue", "items", "placeholder"])) : _("", !0)
+          ]),
+          V.value.length ? (m(), A(t(ze), {
+            key: 0,
+            modelValue: I.value,
+            "onUpdate:modelValue": a[4] || (a[4] = (n) => I.value = n),
+            tags: V.value
+          }, null, 8, ["modelValue", "tags"])) : _("", !0),
+          c("div", Ye, [
+            c("div", Ze, [
+              i.value.size > 0 ? (m(), P("span", ea, T(t(l)("media.library.selectedCount", { count: i.value.size })), 1)) : (m(), P("span", aa, T(t(l)("media.library.totalSummary", { count: M.value })), 1))
+            ]),
+            r(o, {
+              label: t(l)("media.library.selectAllButton"),
+              variant: "tertiary",
+              size: "md",
+              onClick: ye
+            }, null, 8, ["label"]),
+            r(ke, {
+              modelValue: j.value,
+              "onUpdate:modelValue": a[5] || (a[5] = (n) => j.value = n),
+              items: te
+            }, null, 8, ["modelValue"])
+          ])
+        ]),
+        r(t(Oe), {
+          assets: x.value,
+          loading: E.value,
+          view: me.value,
+          selectable: "",
+          "selected-ids": i.value,
+          "variants-by-ref-id": t(G).byRefId.value,
+          onOpen: he,
+          onToggle: fe,
+          onDelete: ge
+        }, null, 8, ["assets", "loading", "view", "selected-ids", "variants-by-ref-id"]),
+        r(t(Pe), {
+          page: p.value,
+          "page-size": t(Q),
+          "total-resources": M.value,
+          "total-pages": $.value,
+          disabled: L.value,
+          "onUpdate:page": pe
+        }, null, 8, ["page", "page-size", "total-resources", "total-pages", "disabled"]),
+        i.value.size > 0 ? (m(), P("div", la, [
+          c("span", ta, T(t(l)("media.library.selectedCount", { count: i.value.size })), 1),
+          r(o, {
+            label: t(l)("media.library.cancelButton"),
+            variant: "tertiary",
+            size: "md",
+            onClick: z
+          }, null, 8, ["label"]),
+          r(o, {
+            label: t(l)("media.library.deleteSelectedButton"),
+            variant: "destructive",
+            size: "md",
+            "prepend-icon": "delete",
+            onClick: be
+          }, null, 8, ["label"])
+        ])) : _("", !0),
+        r(t(Ue), {
+          asset: d.value,
+          image: we.value,
+          "business-id": ((ie = d.value) == null ? void 0 : ie.businessId) ?? v.value,
+          onClose: a[6] || (a[6] = (n) => d.value = null),
+          onRenamed: ne,
+          onDeleted: Be,
+          onChanged: ne
+        }, null, 8, ["asset", "image", "business-id"]),
+        r(Ie, {
+          modelValue: C.value,
+          "onUpdate:modelValue": a[10] || (a[10] = (n) => C.value = n),
+          "max-width": 480
+        }, {
+          "dialog-header": K(() => [
+            c("div", null, T(t(l)("media.library.uploadDialogTitle")), 1)
+          ]),
+          "dialog-footer": K(() => {
+            var n, oe;
+            return [
+              c("div", sa, [
+                r(o, {
+                  label: t(l)("media.library.cancelButton"),
+                  variant: "tertiary",
+                  onClick: a[8] || (a[8] = (Ve) => C.value = !1)
+                }, null, 8, ["label"]),
+                r(o, {
+                  label: t(l)("media.library.uploadSubmitButton", { count: ((n = g.value) == null ? void 0 : n.stagedCount) ?? 0 }),
+                  variant: "primary",
+                  disabled: !((oe = g.value) != null && oe.stagedCount) || g.value.uploading,
+                  onClick: a[9] || (a[9] = (Ve) => {
+                    var ue;
+                    return (ue = g.value) == null ? void 0 : ue.upload();
+                  })
+                }, null, 8, ["label", "disabled"])
+              ])
+            ];
+          }),
+          default: K(() => [
+            r(t(Ne), {
+              ref_key: "uploadPanelRef",
+              ref: g,
+              "business-id": v.value,
+              "restaurant-id": de.value,
+              "available-tags": V.value,
+              onTagCreated: a[7] || (a[7] = (n) => V.value.push(n)),
+              onUploaded: _e
+            }, null, 8, ["business-id", "restaurant-id", "available-tags"])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ], 512);
+    };
+  }
+});
+export {
+  da as default
+};