@ozdao/prometheus-framework 0.1.19 → 0.1.21

package/dist/BackofficeGallery-3bb55ea2.mjs

@@ -0,0 +1,357 @@
+import ee, { reactive as te, ref as h, watchEffect as le, openBlock as u, createElementBlock as m, createVNode as b, unref as $, withCtx as P, Fragment as Q, renderList as W, createElementVNode as s, computed as ae, onMounted as oe, createCommentVNode as j, Transition as J, createTextVNode as Y, toDisplayString as D, withDirectives as ne, vShow as se, pushScopeId as ie, popScopeId as re } from "vue";
+import { a as Z } from "./index-a661083c.mjs";
+import { V as ce } from "./vue-draggable-next.esm-bundler-ff6e3f52.mjs";
+import { _ as de } from "./UploadImageMultiple-cb6c7188.mjs";
+import { useRoute as ue } from "vue-router";
+import { _ as me } from "./_plugin-vue_export-helper-dad06003.mjs";
+var F = {};
+(function(o) {
+  Object.defineProperties(o, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: "Module" } });
+  var e = ee;
+  const c = { class: "flex-nowrap flex-v-center flex pd-medium bg-white" }, i = { key: 0, class: "t-left mn-r-small w-33" }, r = { class: "w-100" }, V = ["value", "placeholder"], w = e.defineComponent({ __name: "Field", props: { label: { default: "Label" }, placeholder: { default: "Enter something here" }, field: { default: null }, validation: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(t, { emit: a }) {
+    const l = t, d = e.ref(l.field);
+    return (p, y) => (e.openBlock(), e.createElementBlock("div", c, [t.label ? (e.openBlock(), e.createElementBlock("div", i, [e.createElementVNode("label", null, e.toDisplayString(t.label), 1)])) : e.createCommentVNode("", !0), e.createElementVNode("div", r, [e.createElementVNode("input", { onInput: y[0] || (y[0] = (z) => {
+      var g;
+      return d.value = a("update:modelValue", (g = z.target) == null ? void 0 : g.value);
+    }), type: "text", class: "w-100", value: t.field, placeholder: t.placeholder }, null, 40, V)])]));
+  } }), v = { class: "input-wrapper" }, C = { class: "t-transp p-small" }, x = { key: 0, class: "flex-nojustify flex-v-center flex-nowrap flex w-100" }, S = { key: 1, class: "w-100" }, N = ["onClick"], n = { __name: "Select", props: ["obj", "label", "prop", "value", "options", "content", "textarea", "placeholder", "size"], setup(t) {
+    const a = t, l = e.ref(null), d = e.ref(!1);
+    e.ref("Please select an item");
+    let p = e.computed(() => {
+      if (a.prop[a.content]) {
+        var g = a.options.indexOf(a.prop[a.content]), k = a.options.map((f) => f);
+        return g != -1 && k.splice(g, 1), k;
+      } else
+        return a.options;
+    });
+    a.prop[a.content] && (l.value = a.prop[a.content]);
+    function y() {
+      d.value = !d.value;
+    }
+    function z(g, k, f) {
+      var H = f;
+      l.value = H, d.value = !d.value, g[k] = H;
+    }
+    return (g, k) => (e.openBlock(), e.createElementBlock("div", v, [e.createElementVNode("span", C, e.toDisplayString(t.label), 1), e.createElementVNode("li", { onClick: k[0] || (k[0] = e.withModifiers((f) => y(), ["stop"])), class: e.normalizeClass([{ "input-small": t.size === "small" }, "pd-small flex-center flex-nowrap flex bg-grey input-select input"]) }, [l.value ? (e.openBlock(), e.createElementBlock("span", x, [e.createElementVNode("span", null, e.toDisplayString(l.value.name ? l.value.name : l.value), 1)])) : (e.openBlock(), e.createElementBlock("span", S, e.toDisplayString(t.placeholder ? t.placeholder : "Please select"), 1))], 2), d.value ? (e.openBlock(), e.createElementBlock("ul", { key: 0, class: e.normalizeClass([{ "dropdown-small": t.size === "small" }, "bg-grey dropdown-menu"]) }, [(e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(e.unref(p), (f) => (e.openBlock(), e.createElementBlock("li", { class: e.normalizeClass([{ "input-small": t.size === "small" }, "pd-small bg-grey input-select input"]) }, [f ? (e.openBlock(), e.createElementBlock("span", { key: 0, onClick: (H) => z(t.prop, t.content, f), class: "flex-nojustify flex-v-center flex-nowrap flex w-100" }, [e.createElementVNode("span", null, e.toDisplayString(f.name ? f.name : f), 1)], 8, N)) : e.createCommentVNode("", !0)], 2))), 256))], 2)) : e.createCommentVNode("", !0)]));
+  } }, B = ["disabled"], I = { key: 0 }, R = { key: 0, class: "loading" }, E = e.createElementVNode("span", null, [e.createElementVNode("svg", { class: "i-default", width: "135", height: "140", viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "#fff" }, [e.createElementVNode("rect", { y: "10", width: "15", height: "120", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0.5s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0.5s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })]), e.createElementVNode("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0.25s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0.25s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })]), e.createElementVNode("rect", { x: "60", width: "15", height: "140", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })]), e.createElementVNode("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0.25s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0.25s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })]), e.createElementVNode("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0.5s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0.5s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })])])], -1), T = [E], A = { key: 0, class: "h4 loading" }, O = e.createElementVNode("span", { class: "t-white" }, "✔", -1), q = [O], X = { key: 0, class: "error" }, L = e.defineComponent({ __name: "Button", props: { submit: { type: Function, default: async () => {
+    console.log("Button click.");
+  } }, callback: { type: Function, default: async () => {
+    console.log("Button callback.");
+  } }, validation: { type: Boolean, default: !1 } }, setup(t) {
+    const a = t, l = e.ref(null), d = e.ref(null), p = e.ref(!1), y = e.ref(!1);
+    async function z() {
+      l.value.style["pointer-events"] = "none", d.value = null, p.value = !0;
+      try {
+        await a.submit(), l.value.classList.add("bg-light-blue"), l.value.classList.remove("bg-blue"), p.value = !1, y.value = !0, setTimeout(() => a.callback(), 750);
+      } catch {
+        l.value.classList.add("bg-light-red"), l.value.classList.remove("bg-blue"), d.value = "❌", setTimeout(() => {
+          l.value.classList.add("bg-blue"), l.value.classList.remove("bg-light-red"), l.value.style.pointerEvents = "auto", p.value = !1, y.value = !1, d.value = null;
+        }, 1e3);
+      }
+    }
+    return (g, k) => (e.openBlock(), e.createElementBlock("button", { onClick: z, disabled: t.validation, ref_key: "button", ref: l, class: "w-100 t-white bg-blue button" }, [e.createVNode(e.Transition, { mode: "out-in", name: "fadeIn" }, { default: e.withCtx(() => [!p.value && !d.value && !y.value ? (e.openBlock(), e.createElementBlock("span", I, [e.renderSlot(g.$slots, "default")])) : e.createCommentVNode("", !0)]), _: 3 }), e.createVNode(e.Transition, { mode: "out-in", name: "fadeIn" }, { default: e.withCtx(() => [p.value && !d.value ? (e.openBlock(), e.createElementBlock("div", R, T)) : e.createCommentVNode("", !0)]), _: 1 }), e.createVNode(e.Transition, { mode: "out-in", name: "fadeIn" }, { default: e.withCtx(() => [y.value ? (e.openBlock(), e.createElementBlock("div", A, q)) : e.createCommentVNode("", !0)]), _: 1 }), e.createVNode(e.Transition, { mode: "out-in", name: "fadeIn" }, { default: e.withCtx(() => [d.value ? (e.openBlock(), e.createElementBlock("div", X, [e.createElementVNode("span", null, e.toDisplayString(d.value), 1)])) : e.createCommentVNode("", !0)]), _: 1 })], 8, B));
+  } });
+  var U = { install: (t) => {
+    t.component("Field", w), t.component("Button", L), t.component("Select", n);
+  } };
+  o.Button = L, o.Field = w, o.Select = n, o.default = U;
+})(F);
+const pe = process.env.API_URL, K = Z.create({ baseURL: pe, withCredentials: !0 }), _ = te({
+  gallery: []
+}), M = {
+  async fetchGallery(o, e) {
+    const c = [];
+    o && c.push(`page=${o}`), e && c.push(`limit=${e}`);
+    const i = `/api/gallery${c.length ? `?${c.join("&")}` : ""}`;
+    try {
+      const r = await K.get(i);
+      if (console.log(r), r && r.data)
+        return _.gallery = [..._.gallery, ...r.data], r.data;
+    } catch (r) {
+      throw console.error("Error fetching gallery:", r), r;
+    }
+  },
+  async createPhoto(o) {
+    try {
+      const e = await K.post("/api/gallery/create", o);
+      console.log(e.data), _.gallery = [...e.data, ..._.gallery];
+    } catch (e) {
+      console.error(e);
+    }
+  },
+  async updatePhoto(o) {
+    try {
+      const e = {
+        ...o,
+        categories: typeof o.categories == "string" ? o.categories.split(",").map((r) => r.trim()) : o.categories
+      }, c = await Z.post("/api/gallery/update", e), i = _.gallery.findIndex((r) => r._id === o._id);
+      i !== -1 && (_.gallery[i] = c.data);
+    } catch (e) {
+      console.error(e);
+    }
+  },
+  async deletePhoto(o) {
+    try {
+      const e = await K.post(`/api/gallery/delete/${o}`), c = _.gallery.findIndex((i) => i._id === o);
+      c !== -1 && _.gallery.splice(c, 1);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+};
+const ve = { class: "pos-relative" }, ge = ["src"], fe = ["onClick"], he = {
+  __name: "EditImages",
+  props: {
+    images: Array
+  },
+  emits: ["update"],
+  setup(o, { emit: e }) {
+    const c = o, i = h([...c.images]);
+    le(() => {
+      i.value = [...c.images];
+    });
+    const r = () => {
+      e("update:images", i.value);
+    }, V = (v) => {
+      i.value = [...i.value, ...v], r();
+    }, w = (v) => {
+      i.value.splice(v, 1), r();
+    };
+    return (v, C) => (u(), m("div", null, [
+      b(de, {
+        "onUpdate:images": V,
+        uploadPath: "photos",
+        class: "mn-semi pd-small w-100 button bg-black t-white"
+      }),
+      b($(ce), {
+        class: "gap-small flex dragArea list-group w-full",
+        modelValue: i.value,
+        "onUpdate:modelValue": C[0] || (C[0] = (x) => i.value = x),
+        onChange: r
+      }, {
+        default: P(() => [
+          (u(!0), m(Q, null, W(i.value, (x, S) => (u(), m("div", ve, [
+            s("img", {
+              class: "i-extra radius-small o-hidden mn-thin",
+              src: (v.FILE_SERVER_URL || "") + x
+            }, null, 8, ge),
+            s("a", {
+              onClick: (N) => w(S),
+              class: "pos-absolute t-center radius-extra i-medium bg-red pos-t-0 pos-r-0"
+            }, "X", 8, fe)
+          ]))), 256))
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]));
+  }
+};
+const G = (o) => (ie("data-v-f1c3938d"), o = o(), re(), o), _e = { class: "pos-relative w-100" }, ye = { class: "w-100 o-hidden" }, be = { class: "pd-medium flex-nowrap flex pd-t-thin pd-b-thin o-scroll" }, ke = ["data-id"], we = ["src", "onClick"], xe = {
+  key: 1,
+  class: "pd-small radius-small bg-white"
+}, Ne = ["src", "onClick"], Ee = { class: "t-black p-small mn-small" }, Ve = /* @__PURE__ */ G(() => /* @__PURE__ */ s("span", { class: "uppercase t-transp" }, "Size", -1)), Ce = /* @__PURE__ */ G(() => /* @__PURE__ */ s("br", null, null, -1)), Be = { class: "pd-2px radius-big d-inline-block bg-grey" }, Se = { class: "t-black p-small mn-small uppe" }, Ie = /* @__PURE__ */ G(() => /* @__PURE__ */ s("span", { class: "uppercase t-transp" }, "Categories", -1)), ze = /* @__PURE__ */ G(() => /* @__PURE__ */ s("br", null, null, -1)), Me = { class: "pd-2px radius-big d-inline-block bg-grey t-semi" }, $e = { class: "flex-nowrap flex" }, Pe = ["onClick"], Te = { class: "modal pd-thin" }, Le = { class: "modal-content radius-big" }, Ue = { class: "" }, je = ["src"], De = {
+  key: 0,
+  class: "flex-v-center flex m modal pd-big"
+}, Fe = { class: "modal-content radius-small pd-medium bg-white" }, Ge = ["src"], Re = ["src"], Ae = {
+  __name: "BackofficeGallery",
+  setup(o) {
+    ue();
+    const e = h(!0), c = h(null);
+    let i = 1;
+    const r = 10;
+    let V = h(null), w = h(!1);
+    const v = h([]), C = (t) => {
+      v.value = t;
+    }, x = ae(() => U.value === "all" ? _.gallery : _.gallery.filter((t) => t.categories.includes(U.value))), S = async () => {
+      w.value = !0, await M.fetchGallery(i, r), w.value = !1;
+    }, N = h(null), n = h({
+      categories: "",
+      size: "",
+      image: !1
+    }), B = h(null), I = (t) => {
+      console.log(e.value), e.value ? R(t) : (N.value = "modal", n.value.image = t, T());
+    }, R = (t) => {
+      N.value = "edit-modal", n.value = t || {
+        categories: "",
+        size: "",
+        image: null
+      }, T();
+    }, E = () => {
+      n.value = {
+        categories: "",
+        size: "",
+        image: !1
+      }, B.value = null, A();
+    }, T = () => {
+      document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden";
+    }, A = () => {
+      document.body.style.overflow = "", document.documentElement.style.overflow = "";
+    }, O = [
+      { name: "Small", value: "" },
+      { name: "Regular", value: "grid-item--width1 grid-item--height1" },
+      { name: "Medium", value: "grid-item--width2 grid-item--height2" },
+      { name: "Big", value: "grid-item--width3 grid-item--height3" }
+    ], q = async (t) => {
+      await M.deletePhoto(t);
+    }, X = async () => {
+      await M.updatePhoto(n.value), E();
+    }, L = async (t) => {
+      if (v.length < 1 || !n.value.categories || !n.value.size) {
+        console.error("All fields are required.");
+        return;
+      }
+      await M.createPhoto({
+        images: v.value,
+        size: n.value.size,
+        categories: typeof n.value.categories == "string" ? n.value.categories.split(",").map((a) => a.trim()) : n.value.categories
+      }), E();
+    };
+    let U = h("all");
+    return oe(async () => {
+      await M.fetchGallery(i, r), typeof window < "u" && new IntersectionObserver((a) => {
+        a.some((l) => l.isIntersecting) && (i += 1, S());
+      }).observe(V.value);
+    }), (t, a) => (u(), m("div", _e, [
+      s("div", ye, [
+        s("div", be, [
+          e.value ? (u(), m("button", {
+            key: 0,
+            onClick: a[0] || (a[0] = (l) => I(null)),
+            class: "mn-r-small t-white t-black bg-second button-small button"
+          }, "Add photos +")) : j("", !0)
+        ])
+      ]),
+      s("div", {
+        ref_key: "grid",
+        ref: c,
+        class: "pd-medium cols-4 gap-thin"
+      }, [
+        (u(!0), m(Q, null, W($(x), (l, d) => (u(), m("div", {
+          key: l.id,
+          "data-id": l.id
+        }, [
+          b(J, {
+            name: "scaleIn",
+            mode: "in-out"
+          }, {
+            default: P(() => [
+              !e.value && c.value ? (u(), m("img", {
+                key: 0,
+                src: "https://thecommunephuket.com/photos/" + l.cover,
+                class: "w-100 h-100 o-hidden radius-medium object-fit-cover",
+                onClick: (p) => I(l.image)
+              }, null, 8, we)) : (u(), m("div", xe, [
+                Y(D(l._id) + " ", 1),
+                s("img", {
+                  src: "https://thecommunephuket.com/photos/" + l.cover,
+                  class: "w-100 radius-small mn-small h-10r object-fit-cover",
+                  onClick: (p) => I(l)
+                }, null, 8, Ne),
+                s("p", Ee, [
+                  Ve,
+                  Ce,
+                  s("span", Be, D(l.size.name), 1)
+                ]),
+                s("p", Se, [
+                  Ie,
+                  ze,
+                  (u(!0), m(Q, null, W(l.categories, (p) => (u(), m("span", Me, D(p), 1))), 256))
+                ]),
+                s("div", $e, [
+                  s("button", {
+                    class: "button-small w-100 button",
+                    onClick: (p) => q(l._id)
+                  }, "Delete", 8, Pe)
+                ])
+              ]))
+            ]),
+            _: 2
+          }, 1024)
+        ], 8, ke))), 128)),
+        s("div", {
+          ref_key: "sentinel",
+          ref: V,
+          class: "sentinel"
+        }, null, 512),
+        b(J, { name: "modal" }, {
+          default: P(() => [
+            ne(s("div", Te, [
+              s("div", Le, [
+                s("div", Ue, [
+                  s("span", {
+                    class: "close",
+                    onClick: E
+                  }, "×"),
+                  s("img", {
+                    src: "https://thecommunephuket.com/photos/" + n.value.image
+                  }, null, 8, je)
+                ])
+              ])
+            ], 512), [
+              [se, n.value.image !== !1 && N.value === "modal"]
+            ])
+          ]),
+          _: 1
+        }),
+        b(J, { name: "modal" }, {
+          default: P(() => [
+            n.value.image !== !1 && N.value === "edit-modal" ? (u(), m("div", De, [
+              s("div", Fe, [
+                s("span", {
+                  class: "close",
+                  onClick: E
+                }, "×"),
+                typeof B.value == "string" ? (u(), m("img", {
+                  key: 0,
+                  src: B.value,
+                  class: "radius-small w-100 mn-small h-20r object-fit-cover"
+                }, null, 8, Ge)) : j("", !0),
+                typeof B.value == "object" && n.value.image !== null ? (u(), m("img", {
+                  key: 1,
+                  class: "radius-small w-100 mn-small h-20r object-fit-cover",
+                  src: "/photos/" + n.value.cover
+                }, null, 8, Re)) : j("", !0),
+                b($(F.Select), {
+                  options: O,
+                  label: "Size",
+                  select: n.value.size,
+                  "onUpdate:select": a[1] || (a[1] = (l) => n.value.size = l),
+                  placeholder: "Select Size",
+                  class: "bg-grey pd-thin radius-small mn-thin t-black"
+                }, null, 8, ["select"]),
+                b($(F.Field), {
+                  field: n.value.categories,
+                  "onUpdate:field": a[2] || (a[2] = (l) => n.value.categories = l),
+                  type: "text",
+                  label: "Categories",
+                  placeholder: "Enter categories for image (comma separated)",
+                  class: "bg-grey pd-thin radius-small mn-medium t-black"
+                }, null, 8, ["field"]),
+                b(he, {
+                  images: v.value,
+                  "onUpdate:images": C,
+                  uploadPath: "photos",
+                  class: "mn-semi"
+                }, null, 8, ["images"]),
+                b($(F.Button), {
+                  submit: n.value._id ? X : L,
+                  callback: E,
+                  class: "mn-thin"
+                }, {
+                  default: P(() => [
+                    Y(D(n.value._id ? "Update" : "Create"), 1)
+                  ]),
+                  _: 1
+                }, 8, ["submit"])
+              ])
+            ])) : j("", !0)
+          ]),
+          _: 1
+        })
+      ], 512)
+    ]));
+  }
+}, Qe = /* @__PURE__ */ me(Ae, [["__scopeId", "data-v-f1c3938d"]]);
+export {
+  Qe as default
+};

package/dist/BackofficeGallery-7ae8fbba.mjs

@@ -0,0 +1,307 @@
+import { reactive as X, ref as p, watchEffect as H, openBlock as r, createElementBlock as c, createVNode as _, unref as A, withCtx as b, Fragment as G, renderList as R, createElementVNode as e, computed as J, onMounted as K, createCommentVNode as $, Transition as U, createTextVNode as M, toDisplayString as S, withDirectives as Q, vShow as W, pushScopeId as Y, popScopeId as Z } from "vue";
+import { a as L, F as ee, _ as te } from "./index-9128ade5.mjs";
+import { S as ae } from "./Select-90d4b7c8.mjs";
+import { V as se } from "./vue-draggable-next.esm-bundler-ff6e3f52.mjs";
+import { _ as le } from "./UploadImageMultiple-ebcc51e6.mjs";
+import { useRoute as oe } from "vue-router";
+import { _ as ie } from "./_plugin-vue_export-helper-dad06003.mjs";
+import "./Select.vue_vue_type_style_index_0_scoped_a78dbba1_lang-4ed993c7.mjs";
+const ne = process.env.API_URL, V = L.create({ baseURL: ne, withCredentials: !0 }), g = X({
+  gallery: []
+}), y = {
+  async fetchGallery(s, t) {
+    const n = [];
+    s && n.push(`page=${s}`), t && n.push(`limit=${t}`);
+    const l = `/api/gallery${n.length ? `?${n.join("&")}` : ""}`;
+    try {
+      const o = await V.get(l);
+      if (console.log(o), o && o.data)
+        return g.gallery = [...g.gallery, ...o.data], o.data;
+    } catch (o) {
+      throw console.error("Error fetching gallery:", o), o;
+    }
+  },
+  async createPhoto(s) {
+    try {
+      const t = await V.post("/api/gallery/create", s);
+      console.log(t.data), g.gallery = [...t.data, ...g.gallery];
+    } catch (t) {
+      console.error(t);
+    }
+  },
+  async updatePhoto(s) {
+    try {
+      const t = {
+        ...s,
+        categories: typeof s.categories == "string" ? s.categories.split(",").map((o) => o.trim()) : s.categories
+      }, n = await L.post("/api/gallery/update", t), l = g.gallery.findIndex((o) => o._id === s._id);
+      l !== -1 && (g.gallery[l] = n.data);
+    } catch (t) {
+      console.error(t);
+    }
+  },
+  async deletePhoto(s) {
+    try {
+      const t = await V.post(`/api/gallery/delete/${s}`), n = g.gallery.findIndex((l) => l._id === s);
+      n !== -1 && g.gallery.splice(n, 1);
+    } catch (t) {
+      console.error(t);
+    }
+  }
+};
+const re = { class: "pos-relative" }, ce = ["src"], de = ["onClick"], ue = {
+  __name: "EditImages",
+  props: {
+    images: Array
+  },
+  emits: ["update"],
+  setup(s, { emit: t }) {
+    const n = s, l = p([...n.images]);
+    H(() => {
+      l.value = [...n.images];
+    });
+    const o = () => {
+      t("update:images", l.value);
+    }, w = (u) => {
+      l.value = [...l.value, ...u], o();
+    }, k = (u) => {
+      l.value.splice(u, 1), o();
+    };
+    return (u, x) => (r(), c("div", null, [
+      _(le, {
+        "onUpdate:images": w,
+        uploadPath: "photos",
+        class: "mn-semi pd-small w-100 button bg-black t-white"
+      }),
+      _(A(se), {
+        class: "gap-small flex dragArea list-group w-full",
+        modelValue: l.value,
+        "onUpdate:modelValue": x[0] || (x[0] = (v) => l.value = v),
+        onChange: o
+      }, {
+        default: b(() => [
+          (r(!0), c(G, null, R(l.value, (v, P) => (r(), c("div", re, [
+            e("img", {
+              class: "i-extra radius-small o-hidden mn-thin",
+              src: (u.FILE_SERVER_URL || "") + v
+            }, null, 8, ce),
+            e("a", {
+              onClick: (h) => k(P),
+              class: "pos-absolute t-center radius-extra i-medium bg-red pos-t-0 pos-r-0"
+            }, "X", 8, de)
+          ]))), 256))
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]));
+  }
+};
+const E = (s) => (Y("data-v-e82aa4af"), s = s(), Z(), s), me = { class: "pos-relative w-100" }, pe = { class: "w-100 o-hidden" }, ge = { class: "pd-medium flex-nowrap flex pd-t-thin pd-b-thin o-scroll" }, _e = ["data-id"], ve = ["src", "onClick"], he = {
+  key: 1,
+  class: "pd-small radius-small bg-white"
+}, fe = ["src", "onClick"], ye = { class: "t-black p-small mn-small" }, be = /* @__PURE__ */ E(() => /* @__PURE__ */ e("span", { class: "uppercase t-transp" }, "Size", -1)), we = /* @__PURE__ */ E(() => /* @__PURE__ */ e("br", null, null, -1)), ke = { class: "pd-2px radius-big d-inline-block bg-grey" }, xe = { class: "t-black p-small mn-small uppe" }, Ce = /* @__PURE__ */ E(() => /* @__PURE__ */ e("span", { class: "uppercase t-transp" }, "Categories", -1)), Ie = /* @__PURE__ */ E(() => /* @__PURE__ */ e("br", null, null, -1)), $e = { class: "pd-2px radius-big d-inline-block bg-grey t-semi" }, Se = { class: "flex-nowrap flex" }, Ee = ["onClick"], Pe = { class: "modal pd-thin" }, ze = { class: "modal-content radius-big" }, Ue = { class: "" }, Ve = ["src"], Ge = {
+  key: 0,
+  class: "flex-v-center flex m modal pd-big"
+}, Re = { class: "modal-content radius-small pd-medium bg-white" }, je = ["src"], Be = ["src"], Me = {
+  __name: "BackofficeGallery",
+  setup(s) {
+    oe();
+    const t = p(!0), n = p(null);
+    let l = 1;
+    const o = 10;
+    let w = p(null), k = p(!1);
+    const u = p([]), x = (d) => {
+      u.value = d;
+    }, v = J(() => B.value === "all" ? g.gallery : g.gallery.filter((d) => d.categories.includes(B.value))), P = async () => {
+      k.value = !0, await y.fetchGallery(l, o), k.value = !1;
+    }, h = p(null), a = p({
+      categories: "",
+      size: "",
+      image: !1
+    }), C = p(null), z = (d) => {
+      console.log(t.value), t.value ? N(d) : (h.value = "modal", a.value.image = d, j());
+    }, N = (d) => {
+      h.value = "edit-modal", a.value = d || {
+        categories: "",
+        size: "",
+        image: null
+      }, j();
+    }, f = () => {
+      a.value = {
+        categories: "",
+        size: "",
+        image: !1
+      }, C.value = null, D();
+    }, j = () => {
+      document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden";
+    }, D = () => {
+      document.body.style.overflow = "", document.documentElement.style.overflow = "";
+    }, F = [
+      { name: "Small", value: "" },
+      { name: "Regular", value: "grid-item--width1 grid-item--height1" },
+      { name: "Medium", value: "grid-item--width2 grid-item--height2" },
+      { name: "Big", value: "grid-item--width3 grid-item--height3" }
+    ], O = async (d) => {
+      await y.deletePhoto(d);
+    }, T = async () => {
+      await y.updatePhoto(a.value), f();
+    }, q = async (d) => {
+      if (u.length < 1 || !a.value.categories || !a.value.size) {
+        console.error("All fields are required.");
+        return;
+      }
+      await y.createPhoto({
+        images: u.value,
+        size: a.value.size,
+        categories: typeof a.value.categories == "string" ? a.value.categories.split(",").map((m) => m.trim()) : a.value.categories
+      }), f();
+    };
+    let B = p("all");
+    return K(async () => {
+      await y.fetchGallery(l, o), typeof window < "u" && new IntersectionObserver((m) => {
+        m.some((i) => i.isIntersecting) && (l += 1, P());
+      }).observe(w.value);
+    }), (d, m) => (r(), c("div", me, [
+      e("div", pe, [
+        e("div", ge, [
+          t.value ? (r(), c("button", {
+            key: 0,
+            onClick: m[0] || (m[0] = (i) => z(null)),
+            class: "mn-r-small t-white t-black bg-second button-small button"
+          }, "Add photos +")) : $("", !0)
+        ])
+      ]),
+      e("div", {
+        ref_key: "grid",
+        ref: n,
+        class: "pd-medium cols-4 gap-thin"
+      }, [
+        (r(!0), c(G, null, R(A(v), (i, Ae) => (r(), c("div", {
+          key: i.id,
+          "data-id": i.id
+        }, [
+          _(U, {
+            name: "scaleIn",
+            mode: "in-out"
+          }, {
+            default: b(() => [
+              !t.value && n.value ? (r(), c("img", {
+                key: 0,
+                src: "https://thecommunephuket.com/photos/" + i.cover,
+                class: "w-100 h-100 o-hidden radius-medium object-fit-cover",
+                onClick: (I) => z(i.image)
+              }, null, 8, ve)) : (r(), c("div", he, [
+                M(S(i._id) + " ", 1),
+                e("img", {
+                  src: "https://thecommunephuket.com/photos/" + i.cover,
+                  class: "w-100 radius-small mn-small h-10r object-fit-cover",
+                  onClick: (I) => z(i)
+                }, null, 8, fe),
+                e("p", ye, [
+                  be,
+                  we,
+                  e("span", ke, S(i.size.name), 1)
+                ]),
+                e("p", xe, [
+                  Ce,
+                  Ie,
+                  (r(!0), c(G, null, R(i.categories, (I) => (r(), c("span", $e, S(I), 1))), 256))
+                ]),
+                e("div", Se, [
+                  e("button", {
+                    class: "button-small w-100 button",
+                    onClick: (I) => O(i._id)
+                  }, "Delete", 8, Ee)
+                ])
+              ]))
+            ]),
+            _: 2
+          }, 1024)
+        ], 8, _e))), 128)),
+        e("div", {
+          ref_key: "sentinel",
+          ref: w,
+          class: "sentinel"
+        }, null, 512),
+        _(U, { name: "modal" }, {
+          default: b(() => [
+            Q(e("div", Pe, [
+              e("div", ze, [
+                e("div", Ue, [
+                  e("span", {
+                    class: "close",
+                    onClick: f
+                  }, "×"),
+                  e("img", {
+                    src: "https://thecommunephuket.com/photos/" + a.value.image
+                  }, null, 8, Ve)
+                ])
+              ])
+            ], 512), [
+              [W, a.value.image !== !1 && h.value === "modal"]
+            ])
+          ]),
+          _: 1
+        }),
+        _(U, { name: "modal" }, {
+          default: b(() => [
+            a.value.image !== !1 && h.value === "edit-modal" ? (r(), c("div", Ge, [
+              e("div", Re, [
+                e("span", {
+                  class: "close",
+                  onClick: f
+                }, "×"),
+                typeof C.value == "string" ? (r(), c("img", {
+                  key: 0,
+                  src: C.value,
+                  class: "radius-small w-100 mn-small h-20r object-fit-cover"
+                }, null, 8, je)) : $("", !0),
+                typeof C.value == "object" && a.value.image !== null ? (r(), c("img", {
+                  key: 1,
+                  class: "radius-small w-100 mn-small h-20r object-fit-cover",
+                  src: "/photos/" + a.value.cover
+                }, null, 8, Be)) : $("", !0),
+                _(ae, {
+                  options: F,
+                  label: "Size",
+                  select: a.value.size,
+                  "onUpdate:select": m[1] || (m[1] = (i) => a.value.size = i),
+                  placeholder: "Select Size",
+                  class: "bg-grey pd-thin radius-small mn-thin t-black"
+                }, null, 8, ["select"]),
+                _(ee, {
+                  field: a.value.categories,
+                  "onUpdate:field": m[2] || (m[2] = (i) => a.value.categories = i),
+                  type: "text",
+                  label: "Categories",
+                  placeholder: "Enter categories for image (comma separated)",
+                  class: "bg-grey pd-thin radius-small mn-medium t-black"
+                }, null, 8, ["field"]),
+                _(ue, {
+                  images: u.value,
+                  "onUpdate:images": x,
+                  uploadPath: "photos",
+                  class: "mn-semi"
+                }, null, 8, ["images"]),
+                _(te, {
+                  submit: a.value._id ? T : q,
+                  callback: f,
+                  class: "mn-thin"
+                }, {
+                  default: b(() => [
+                    M(S(a.value._id ? "Update" : "Create"), 1)
+                  ]),
+                  _: 1
+                }, 8, ["submit"])
+              ])
+            ])) : $("", !0)
+          ]),
+          _: 1
+        })
+      ], 512)
+    ]));
+  }
+}, He = /* @__PURE__ */ ie(Me, [["__scopeId", "data-v-e82aa4af"]]);
+export {
+  He as default
+};