@feedmepos/mf-menu 0.32.70 → 0.32.72-dev.1

package/dist/ProductInternalTools-D8j9hMuA.js

@@ -0,0 +1,439 @@
+import { defineComponent as q, ref as v, computed as z, resolveComponent as G, createElementBlock as c, openBlock as i, createElementVNode as s, createVNode as k, unref as h, createCommentVNode as B, normalizeClass as R, toDisplayString as $, createStaticVNode as A, Fragment as T, renderList as O, createBlock as re, withCtx as D } from "vue";
+import { J as V, F as ie } from "./jszip.min-DdiexxWX.js";
+import { l as Z } from "./discardConfirm-DhbS0wLN.js";
+import { useI18n as ce } from "@feedmepos/mf-common";
+import { FmButtonVariant as P, useSnackbar as W, useDialog as de, FmButtonColorThemeVariant as M } from "@feedmepos/ui-library";
+import { b as me, u as ue, p as pe, x as ge, y as fe } from "./index.vue_vue_type_script_setup_true_lang-DILo07iQ.js";
+import { _ as he } from "./PageLayout.vue_vue_type_script_setup_true_lang-BVmHMvKD.js";
+import { u as be, a as ye } from "./menu-kYSa55lO.js";
+import { a as ve } from "./Product.vue_vue_type_script_setup_true_lang-CPgECJwS.js";
+import { af as _e, ag as we, ah as xe, ai as Ie, aj as ke } from "./item-CN-mYmn-.js";
+const Ce = { class: "h-full flex flex-col" }, Ue = { class: "flex items-center justify-between p-16 border-b border-gray-200" }, je = { class: "flex gap-8" }, $e = { class: "border-b border-gray-200" }, Fe = { class: "flex" }, Se = { class: "flex-1 overflow-hidden" }, Me = {
+  key: 0,
+  class: "h-full flex flex-col"
+}, ze = {
+  key: 0,
+  class: "flex-1 flex items-center justify-center"
+}, Pe = {
+  key: 1,
+  class: "flex-1 overflow-y-auto p-16"
+}, Le = { class: "space-y-12" }, Te = { class: "fm-typo-en-body-sm font-medium" }, Ne = { class: "flex" }, Ee = { class: "w-64 h-64 bg-gray-100 rounded-md overflow-hidden flex items-center justify-center" }, Be = ["src", "alt"], Re = {
+  key: 1,
+  class: "text-gray-400 text-xs"
+}, Ae = { class: "flex" }, Oe = { class: "w-64 h-64 bg-gray-100 rounded-md overflow-hidden" }, De = ["src", "alt"], Ve = {
+  key: 1,
+  class: "h-full flex flex-col"
+}, Ze = {
+  key: 0,
+  class: "flex-1 flex items-center justify-center"
+}, We = {
+  key: 1,
+  class: "flex-1 overflow-y-auto p-16"
+}, qe = { class: "space-y-12" }, Ge = { class: "fm-typo-en-body-sm font-medium break-all" }, Je = { class: "flex" }, He = { class: "w-64 h-64 bg-gray-100 rounded-md overflow-hidden" }, Xe = ["src", "alt"], Ke = /* @__PURE__ */ q({
+  __name: "ImageUpdatePreview",
+  props: {
+    matchedImages: {},
+    unmatchedImages: {}
+  },
+  emits: ["cancel", "update"],
+  setup(N, { emit: _ }) {
+    const p = N, C = _, b = v("matched"), y = z(() => p.matchedImages.length), U = z(() => p.unmatchedImages.length);
+    function w() {
+      C("cancel");
+    }
+    function F() {
+      C("update", p.matchedImages);
+    }
+    return (x, r) => {
+      const I = G("fm-button");
+      return i(), c("div", Ce, [
+        s("div", Ue, [
+          r[2] || (r[2] = s("h2", { class: "fm-typo-en-headline-sm font-semibold" }, "Update Product Images", -1)),
+          s("div", je, [
+            k(I, {
+              variant: h(P).Secondary,
+              label: "Cancel",
+              onClick: w
+            }, null, 8, ["variant"]),
+            k(I, {
+              variant: h(P).Primary,
+              label: "Update",
+              disabled: y.value === 0,
+              onClick: F
+            }, null, 8, ["variant", "disabled"])
+          ])
+        ]),
+        s("div", $e, [
+          s("div", Fe, [
+            s("button", {
+              class: R([
+                "px-16 py-12 font-medium text-sm border-b-2 transition-colors",
+                b.value === "matched" ? "border-blue-500 text-blue-600 bg-blue-50" : "border-transparent text-gray-500 hover:text-gray-700"
+              ]),
+              onClick: r[0] || (r[0] = (m) => b.value = "matched")
+            }, " Matched Images (" + $(y.value) + ") ", 3),
+            U.value > 0 ? (i(), c("button", {
+              key: 0,
+              class: R([
+                "px-16 py-12 font-medium text-sm border-b-2 transition-colors",
+                b.value === "unmatched" ? "border-blue-500 text-blue-600 bg-blue-50" : "border-transparent text-gray-500 hover:text-gray-700"
+              ]),
+              onClick: r[1] || (r[1] = (m) => b.value = "unmatched")
+            }, " Unmatched Images (" + $(U.value) + ") ", 3)) : B("", !0)
+          ])
+        ]),
+        s("div", Se, [
+          b.value === "matched" ? (i(), c("div", Me, [
+            y.value === 0 ? (i(), c("div", ze, r[3] || (r[3] = [
+              A('<div class="text-center text-gray-500"><svg class="mx-auto h-48 w-48 text-gray-400 mb-16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><p class="fm-typo-en-body-lg text-gray-500">No matched images found</p><p class="fm-typo-en-body-sm text-gray-400 mt-4"> Make sure your image filenames match product names </p></div>', 1)
+            ]))) : (i(), c("div", Pe, [
+              r[4] || (r[4] = s("div", { class: "grid grid-cols-3 gap-16 pb-12 border-b border-gray-200 mb-16" }, [
+                s("div", { class: "fm-typo-en-body-sm-600 font-semibold text-gray-700" }, "Product Name"),
+                s("div", { class: "fm-typo-en-body-sm-600 font-semibold text-gray-700" }, "Current Image"),
+                s("div", { class: "fm-typo-en-body-sm-600 font-semibold text-gray-700" }, "New Image")
+              ], -1)),
+              s("div", Le, [
+                (i(!0), c(T, null, O(p.matchedImages, (m, j) => (i(), c("div", {
+                  key: j,
+                  class: "grid grid-cols-3 gap-16 py-12 border-b border-gray-100 items-center"
+                }, [
+                  s("div", Te, $(m.productName), 1),
+                  s("div", Ne, [
+                    s("div", Ee, [
+                      m.originalThumbnail ? (i(), c("img", {
+                        key: 0,
+                        src: m.originalThumbnail,
+                        alt: m.productName,
+                        class: "w-full h-full object-cover"
+                      }, null, 8, Be)) : (i(), c("span", Re, "No image"))
+                    ])
+                  ]),
+                  s("div", Ae, [
+                    s("div", Oe, [
+                      s("img", {
+                        src: m.newImageUrl,
+                        alt: m.newImage.name,
+                        class: "w-full h-full object-cover"
+                      }, null, 8, De)
+                    ])
+                  ])
+                ]))), 128))
+              ])
+            ]))
+          ])) : b.value === "unmatched" ? (i(), c("div", Ve, [
+            U.value === 0 ? (i(), c("div", Ze, r[5] || (r[5] = [
+              A('<div class="text-center text-gray-500"><svg class="mx-auto h-48 w-48 text-gray-400 mb-16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><p class="fm-typo-en-body-lg text-gray-500">All images matched!</p><p class="fm-typo-en-body-sm text-gray-400 mt-4">No unmatched images found</p></div>', 1)
+            ]))) : (i(), c("div", We, [
+              r[6] || (r[6] = s("div", { class: "grid grid-cols-2 gap-16 pb-12 border-b border-gray-200 mb-16" }, [
+                s("div", { class: "fm-typo-en-body-sm-600 font-semibold text-gray-700" }, "Filename"),
+                s("div", { class: "fm-typo-en-body-sm-600 font-semibold text-gray-700" }, "Image")
+              ], -1)),
+              s("div", qe, [
+                (i(!0), c(T, null, O(p.unmatchedImages, (m, j) => (i(), c("div", {
+                  key: j,
+                  class: "grid grid-cols-2 gap-16 py-12 border-b border-gray-100 items-center"
+                }, [
+                  s("div", Ge, $(m.filename), 1),
+                  s("div", Je, [
+                    s("div", He, [
+                      s("img", {
+                        src: m.imageUrl,
+                        alt: m.filename,
+                        class: "w-full h-full object-cover"
+                      }, null, 8, Xe)
+                    ])
+                  ])
+                ]))), 128))
+              ])
+            ]))
+          ])) : B("", !0)
+        ])
+      ]);
+    };
+  }
+});
+var Qe = { firebase: { storageBucket: "image.feedmedev.cc" } };
+const Ye = {
+  key: 0,
+  class: "h-screen"
+}, et = { class: "flex-1 flex justify-between gap-8 pl-8" }, tt = { class: "flex items-center" }, at = { class: "bg-fm-color-neutral-gray-100 rounded-md px-8 py-4" }, st = { class: "fm-typo-en-body-md-600 font-semibold" }, ot = { class: "flex gap-8" }, ft = /* @__PURE__ */ q({
+  __name: "ProductInternalTools",
+  setup(N) {
+    const { t: _ } = ce(), p = me(W()), C = W(), b = de(), y = ue(), { selectedCategories: U } = be(), w = v(!1), F = v(), x = v([]), r = v([]), I = z(() => {
+      const e = Z.flatten(U.value.map((t) => t.items));
+      return Z.uniqBy(e, (t) => t._id);
+    }), m = z(() => I.value.length);
+    async function j(e, t) {
+      return await xe(e, {
+        withTimestamp: !0,
+        filename: t
+      });
+    }
+    async function J(e, t = "images.zip") {
+      const n = new V();
+      e.forEach(({ blob: d, filename: l }) => {
+        d && n.file(l, d);
+      });
+      const g = await n.generateAsync({ type: "blob" });
+      ie.saveAs(g, t);
+    }
+    async function H() {
+      const e = I.value.filter((t) => t.thumbnail);
+      if (e.length === 0) {
+        C.open({ type: "error", title: "No downloadable images found" });
+        return;
+      }
+      b.open({
+        title: "Download Images",
+        message: `Found ${e.length} images, download as ZIP file?`,
+        primaryActions: {
+          text: "Download",
+          close: !0
+        },
+        secondaryActions: {
+          text: _("common.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        const t = v("Preparing download...");
+        await p.minor(
+          async () => {
+            const n = e.filter((l) => l.thumbnail).map((l, f) => {
+              let o = l.name || `image_${Date.now()}_${f}`;
+              return o += ".jpg", {
+                url: l.thumbnail,
+                filename: o,
+                index: f + 1
+              };
+            });
+            t.value = `Starting download of ${n.length} images...`;
+            const d = (await _e(n, j, {
+              batchSize: 5,
+              // Download 5 images at a time
+              batchDelay: 200,
+              // 200ms delay between batches
+              progressMessage: t
+            })).filter((l) => l !== null);
+            if (t.value = "Creating ZIP file...", d.length > 0) {
+              const l = `images_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.zip`;
+              await J(d, l);
+            } else
+              throw new Error("Failed to fetch any images");
+          },
+          {
+            message: t,
+            successMessage: `Successfully downloaded ${e.length} images`,
+            customId: "download-images"
+          }
+        );
+      });
+    }
+    async function X(e) {
+      const n = await new V().loadAsync(e), g = [];
+      for (const [d, l] of Object.entries(n.files)) {
+        if (l.dir || d.includes("__MACOSX/") || !E(d))
+          continue;
+        const f = await l.async("blob"), o = d.split("/").pop() || d, a = new File([f], o, { type: K(o) });
+        g.push(a);
+      }
+      return g;
+    }
+    function E(e) {
+      const t = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp"], n = e.toLowerCase().substring(e.lastIndexOf("."));
+      return t.includes(n);
+    }
+    function K(e) {
+      const t = e.toLowerCase().substring(e.lastIndexOf("."));
+      return {
+        ".jpg": "image/jpeg",
+        ".jpeg": "image/jpeg",
+        ".png": "image/png",
+        ".gif": "image/gif",
+        ".webp": "image/webp",
+        ".bmp": "image/bmp"
+      }[t] || "image/jpeg";
+    }
+    function Q(e) {
+      return (e.substring(0, e.lastIndexOf(".")) || e).toLowerCase().trim().replace(/[_\-\s]+/g, " ");
+    }
+    function Y(e) {
+      return e.toLowerCase().trim().replace(/[_\-\s]+/g, " ");
+    }
+    async function ee(e) {
+      const t = [];
+      for (const a of e)
+        if (a.type === "application/zip" || a.name.toLowerCase().endsWith(".zip")) {
+          const u = await X(a);
+          t.push(...u);
+        } else E(a.name) && t.push(a);
+      const n = /* @__PURE__ */ new Map();
+      t.forEach((a) => {
+        const u = a.name.toLowerCase();
+        n.has(u) || n.set(u, a);
+      });
+      const g = Array.from(n.values()), d = [], l = [], f = /* @__PURE__ */ new Map();
+      I.value.forEach((a) => {
+        const u = Y(a.name);
+        f.set(u, a);
+      });
+      const o = [];
+      for (const a of g) {
+        const u = Q(a.name), S = f.get(u);
+        if (!S) {
+          l.push({
+            filename: a.name,
+            file: a,
+            imageUrl: URL.createObjectURL(a)
+          });
+          continue;
+        }
+        let L;
+        try {
+          L = await ge(a);
+        } catch (le) {
+          console.error(`Unable to compress ${a.name}`, le), o.push(a.name);
+          continue;
+        }
+        d.push({
+          productId: S._id,
+          productName: S.name,
+          originalThumbnail: S.thumbnail,
+          newImage: L,
+          newImageUrl: URL.createObjectURL(L)
+        });
+      }
+      if (o.length) {
+        const a = o.slice(0, 5).join(", ");
+        C.open({
+          type: "error",
+          title: _("menu.productInternalTools.unreadable_images.title"),
+          message: _("menu.productInternalTools.unreadable_images.message", {
+            count: o.length,
+            names: `${a}${o.length > 5 ? ", ..." : ""}`
+          })
+        });
+      }
+      return { matched: d, unmatched: l };
+    }
+    async function te(e) {
+      await p.minor(
+        async () => {
+          const { matched: t, unmatched: n } = await ee(e);
+          x.value = t, r.value = n, w.value = !0;
+        },
+        {
+          message: "Processing uploaded images...",
+          customId: "process-images"
+        }
+      );
+    }
+    async function ae(e) {
+      const t = v("Preparing image updates...");
+      await p.minor(
+        async () => {
+          const n = async (o) => {
+            const a = Ie(o.productId);
+            let u = "";
+            return o.newImage && (await ke.update(a, o.newImage, Qe.firebase.storageBucket), u = fe(a)), { productId: o.productId, newImageUrl: u };
+          };
+          t.value = `Starting upload of ${e.length} product images...`;
+          const g = await we({
+            items: e,
+            processor: n,
+            batchSize: 5,
+            // Upload 5 images at a time
+            batchDelay: 200,
+            // 200ms delay between batches
+            onProgress: ({ batchStart: o, batchEnd: a, total: u }) => {
+              t.value = `Uploading images ${o}-${a}/${u}...`;
+            }
+          });
+          t.value = "Updating product data...";
+          const d = y.state.menu, l = pe(d), f = new Map(g.map((o) => [o == null ? void 0 : o.productId, o]));
+          l.modules.item = l.modules.item.map((o) => {
+            const a = f.get(o._id);
+            return a && a.newImageUrl ? { ...o, thumbnail: a.newImageUrl } : o;
+          }), await y.updateMenuSetting(l), await y.importMenu(l);
+        },
+        {
+          message: t,
+          successMessage: `Successfully updated ${e.length} product images`,
+          customId: "update-product-images"
+        }
+      ), w.value = !1, x.value = [], r.value = [];
+    }
+    function se() {
+      x.value.forEach((e) => URL.revokeObjectURL(e.newImageUrl)), r.value.forEach((e) => URL.revokeObjectURL(e.imageUrl)), w.value = !1, x.value = [], r.value = [];
+    }
+    function oe() {
+      var e;
+      (e = F.value) == null || e.click();
+    }
+    function ne(e) {
+      const t = e.target;
+      if (t.files && t.files.length > 0) {
+        const n = Array.from(t.files);
+        te(n);
+      }
+      t.value = "";
+    }
+    return ye().resetOnMount(), (e, t) => {
+      const n = G("fm-button");
+      return i(), c(T, null, [
+        w.value ? (i(), c("div", Ye, [
+          k(Ke, {
+            "matched-images": x.value,
+            "unmatched-images": r.value,
+            onCancel: se,
+            onUpdate: ae
+          }, null, 8, ["matched-images", "unmatched-images"])
+        ])) : (i(), re(he, {
+          key: 1,
+          heading: h(_)("menu.productInternalTools.title")
+        }, {
+          default: D(() => [
+            k(ve)
+          ]),
+          "append-heading": D(() => [
+            s("div", et, [
+              s("div", tt, [
+                s("div", at, [
+                  s("p", st, $(m.value), 1)
+                ])
+              ]),
+              s("div", ot, [
+                k(n, {
+                  "bg-color": h(M).NeutralGray100,
+                  "text-color": h(M).TypoSecondary,
+                  variant: h(P).Primary,
+                  label: "Download Images",
+                  onClick: H
+                }, null, 8, ["bg-color", "text-color", "variant"]),
+                k(n, {
+                  "bg-color": h(M).NeutralGray100,
+                  "text-color": h(M).TypoSecondary,
+                  variant: h(P).Primary,
+                  label: "Update Images",
+                  onClick: oe
+                }, null, 8, ["bg-color", "text-color", "variant"])
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["heading"])),
+        s("input", {
+          ref_key: "fileInput",
+          ref: F,
+          type: "file",
+          multiple: "",
+          accept: "image/*,.zip",
+          style: { display: "none" },
+          onChange: ne
+        }, null, 544)
+      ], 64);
+    };
+  }
+});
+export {
+  ft as default
+};