@feedmepos/mf-media 0.0.8 → 0.0.10-dev.1

package/dist/AssetLibrary-7609684b.js

@@ -0,0 +1,269 @@
+import { defineComponent as de, computed as C, ref as s, onMounted as ce, watch as M, resolveComponent as k, openBlock as w, createElementBlock as S, createElementVNode as c, toDisplayString as _, unref as t, createVNode as u, createBlock as ve, createCommentVNode as J, withCtx as U } from "vue";
+import { useCoreStore as me, useI18n as fe } from "@feedmepos/mf-common";
+import { useDialog as pe } from "@feedmepos/ui-library";
+import { _ as ge, a as ye, M as be, C as we, T as N, A as _e, x as xe, q as he, v as Be, L as Ce, H as ke, e as K, E as Se } from "./media-picker-cf281640.js";
+const Ve = { class: "p-24 relative min-h-full" }, De = { class: "flex items-center justify-between mb-8" }, Ae = { class: "fm-typo-en-title-md-600 fm-step-title line-clamp-2" }, Ie = { class: "flex gap-8" }, Te = { class: "flex flex-col gap-12 mb-16" }, ze = { class: "flex items-center gap-12" }, Pe = { class: "flex-1 text-xs text-fm-color-typo-secondary" }, Fe = {
+  key: 0,
+  class: "text-fm-color-typo-primary font-semibold"
+}, Re = { key: 1 }, Me = {
+  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"
+}, Ue = { class: "text-sm font-semibold" }, Ne = { class: "flex justify-end gap-8 w-full" }, qe = /* @__PURE__ */ de({
+  __name: "AssetLibrary",
+  setup(Oe) {
+    const O = me(), { t: l } = fe(), r = C(() => {
+      var e;
+      return ((e = O.currentBusiness.value) == null ? void 0 : e.id) ?? "";
+    }), E = C(() => {
+      var e;
+      return (e = O.currentRestaurant.value) == null ? void 0 : e._id;
+    }), x = pe(), h = s(""), g = s([]), p = s([]), y = s([]), V = s(!1), v = s(1), D = s(0), A = s(0), I = s(!1), L = s("recent"), Q = {
+      recent: { sortBy: "createdAt", descending: !0 },
+      name: { sortBy: "fileName", descending: !1 },
+      size: { sortBy: "fileSizeBytes", descending: !0 }
+    }, $ = [{ icon: "grid_view" }, { icon: "view_list" }], T = s($[0]), W = C(() => T.value.icon === "grid_view" ? "grid" : "list"), z = ge(() => r.value);
+    async function m() {
+      if (r.value) {
+        p.value.length === 0 && (V.value = !0), I.value = !0;
+        try {
+          const [e, a] = await Promise.all([
+            he({
+              businessId: r.value,
+              restaurantId: E.value,
+              search: h.value || void 0,
+              tags: g.value.length ? g.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: [Be],
+              skip: Ce(v.value, N),
+              limit: N,
+              ...Q[L.value]
+            }),
+            ke(r.value)
+          ]);
+          p.value = e.resources, D.value = e.meta.totalResources, A.value = e.meta.totalPages, y.value = a, await z.load(e.resources.map((i) => i.refId).filter((i) => !!i));
+        } finally {
+          V.value = !1, I.value = !1;
+        }
+      }
+    }
+    async function P() {
+      v.value = 1, B(), await m();
+    }
+    async function F() {
+      await m();
+      const e = Se(v.value, A.value);
+      e !== v.value && (v.value = e, await m());
+    }
+    async function X(e) {
+      e !== v.value && (v.value = e, B(), await m());
+    }
+    ce(m), M(r, P), M([g, L], P);
+    let j;
+    M(h, () => {
+      clearTimeout(j), j = setTimeout(P, 250);
+    });
+    const n = s(/* @__PURE__ */ new Set());
+    function Y(e) {
+      const a = new Set(n.value);
+      a.has(e.id) ? a.delete(e.id) : a.add(e.id), n.value = a;
+    }
+    function B() {
+      n.value = /* @__PURE__ */ new Set();
+    }
+    function Z() {
+      n.value = new Set(p.value.map((e) => e.id));
+    }
+    function ee() {
+      const e = n.value.size;
+      x.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(
+          [...n.value].map((a) => {
+            const i = p.value.find((R) => R.id === a);
+            return i ? K(r.value, i) : Promise.resolve();
+          })
+        ), B(), await F(), x.close();
+      });
+    }
+    function ae(e) {
+      x.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 K(r.value, e);
+        const a = new Set(n.value);
+        a.delete(e.id), n.value = a, await F(), x.close();
+      });
+    }
+    const d = s(null), le = C(
+      () => {
+        var e;
+        return (e = d.value) != null && e.refId ? z.byRefId.value.get(d.value.refId) ?? null : null;
+      }
+    );
+    function te(e) {
+      d.value = e;
+    }
+    async function q() {
+      await m(), d.value && (d.value = p.value.find((e) => {
+        var a;
+        return e.id === ((a = d.value) == null ? void 0 : a.id);
+      }) ?? null);
+    }
+    async function se() {
+      d.value = null, await F();
+    }
+    const b = s(!1), f = s(null);
+    function ne() {
+      var e;
+      (e = f.value) == null || e.reset(), b.value = !0;
+    }
+    async function ie() {
+      var e;
+      (e = f.value) != null && e.stagedCount || (b.value = !1), await m();
+    }
+    return (e, a) => {
+      const i = k("FmButton"), R = k("FmSearch"), oe = k("FmButtonGroup"), ue = k("FmDialog");
+      return w(), S("div", Ve, [
+        c("div", De, [
+          c("h1", Ae, _(t(l)("media.title")), 1),
+          c("div", Ie, [
+            u(i, {
+              label: t(l)("media.library.uploadButton"),
+              "prepend-icon": "add",
+              variant: "primary",
+              onClick: ne
+            }, null, 8, ["label"])
+          ])
+        ]),
+        c("div", Te, [
+          u(R, {
+            modelValue: h.value,
+            "onUpdate:modelValue": a[0] || (a[0] = (o) => h.value = o),
+            placeholder: t(l)("media.library.searchPlaceholder"),
+            class: "max-w-[280px]"
+          }, null, 8, ["modelValue", "placeholder"]),
+          y.value.length ? (w(), ve(t(ye), {
+            key: 0,
+            modelValue: g.value,
+            "onUpdate:modelValue": a[1] || (a[1] = (o) => g.value = o),
+            tags: y.value
+          }, null, 8, ["modelValue", "tags"])) : J("", !0),
+          c("div", ze, [
+            c("div", Pe, [
+              n.value.size > 0 ? (w(), S("span", Fe, _(t(l)("media.library.selectedCount", { count: n.value.size })), 1)) : (w(), S("span", Re, _(t(l)("media.library.totalSummary", { count: D.value })), 1))
+            ]),
+            u(i, {
+              label: t(l)("media.library.selectAllButton"),
+              variant: "tertiary",
+              size: "md",
+              onClick: Z
+            }, null, 8, ["label"]),
+            u(oe, {
+              modelValue: T.value,
+              "onUpdate:modelValue": a[2] || (a[2] = (o) => T.value = o),
+              items: $
+            }, null, 8, ["modelValue"])
+          ])
+        ]),
+        u(t(be), {
+          assets: p.value,
+          loading: V.value,
+          view: W.value,
+          selectable: "",
+          "selected-ids": n.value,
+          "variants-by-ref-id": t(z).byRefId.value,
+          onOpen: te,
+          onToggle: Y,
+          onDelete: ae
+        }, null, 8, ["assets", "loading", "view", "selected-ids", "variants-by-ref-id"]),
+        u(t(we), {
+          page: v.value,
+          "page-size": t(N),
+          "total-resources": D.value,
+          "total-pages": A.value,
+          disabled: I.value,
+          "onUpdate:page": X
+        }, null, 8, ["page", "page-size", "total-resources", "total-pages", "disabled"]),
+        n.value.size > 0 ? (w(), S("div", Me, [
+          c("span", Ue, _(t(l)("media.library.selectedCount", { count: n.value.size })), 1),
+          u(i, {
+            label: t(l)("media.library.cancelButton"),
+            variant: "tertiary",
+            size: "md",
+            onClick: B
+          }, null, 8, ["label"]),
+          u(i, {
+            label: t(l)("media.library.deleteSelectedButton"),
+            variant: "destructive",
+            size: "md",
+            "prepend-icon": "delete",
+            onClick: ee
+          }, null, 8, ["label"])
+        ])) : J("", !0),
+        u(t(_e), {
+          asset: d.value,
+          image: le.value,
+          "business-id": r.value,
+          onClose: a[3] || (a[3] = (o) => d.value = null),
+          onRenamed: q,
+          onDeleted: se,
+          onChanged: q
+        }, null, 8, ["asset", "image", "business-id"]),
+        u(ue, {
+          modelValue: b.value,
+          "onUpdate:modelValue": a[7] || (a[7] = (o) => b.value = o),
+          "max-width": 480
+        }, {
+          "dialog-header": U(() => [
+            c("div", null, _(t(l)("media.library.uploadDialogTitle")), 1)
+          ]),
+          "dialog-footer": U(() => {
+            var o, G;
+            return [
+              c("div", Ne, [
+                u(i, {
+                  label: t(l)("media.library.cancelButton"),
+                  variant: "tertiary",
+                  onClick: a[5] || (a[5] = (re) => b.value = !1)
+                }, null, 8, ["label"]),
+                u(i, {
+                  label: t(l)("media.library.uploadSubmitButton", { count: ((o = f.value) == null ? void 0 : o.stagedCount) ?? 0 }),
+                  variant: "primary",
+                  disabled: !((G = f.value) != null && G.stagedCount) || f.value.uploading,
+                  onClick: a[6] || (a[6] = (re) => {
+                    var H;
+                    return (H = f.value) == null ? void 0 : H.upload();
+                  })
+                }, null, 8, ["label", "disabled"])
+              ])
+            ];
+          }),
+          default: U(() => [
+            u(t(xe), {
+              ref_key: "uploadPanelRef",
+              ref: f,
+              "business-id": r.value,
+              "restaurant-id": E.value,
+              "available-tags": y.value,
+              onTagCreated: a[4] || (a[4] = (o) => y.value.push(o)),
+              onUploaded: ie
+            }, null, 8, ["business-id", "restaurant-id", "available-tags"])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+export {
+  qe as default
+};