@feedmepos/mf-report 5.19.19-beta.0 → 5.19.20-beta.0

package/dist/ReportEditor-C47BEkUJ.js

@@ -0,0 +1,1013 @@
+import { defineComponent as G, mergeModels as L, useModel as j, ref as q, computed as U, resolveComponent as f, createBlock as $, openBlock as i, withCtx as s, createElementVNode as w, createVNode as t, unref as l, normalizeClass as oe, createTextVNode as ce, toDisplayString as P, createElementBlock as S, Fragment as J, renderSlot as Ce, createCommentVNode as Q, watch as pe, renderList as X, resolveDynamicComponent as Ue, isRef as ke, normalizeStyle as ve, onMounted as Be } from "vue";
+import { W as De, _ as We, i as Ie, S as ye, d as _e, T as Re, a as qe } from "./TransitionFade-B-VvNjOR.js";
+import { c as Pe, D as le, C as we, a as Ve, b as Ee, v as te } from "./BaseDialog.vue_vue_type_script_setup_true_lang-DZvH0Y-3.js";
+import { storeToRefs as fe } from "pinia";
+import { useRouter as Se, useRoute as $e } from "vue-router";
+import { useBreakpoints as ie, useSnackbar as Oe, FmButtonColorThemeVariant as Z } from "@feedmepos/ui-library";
+import { u as Te } from "./message-dialog-UoMWOnil.js";
+import { u as ae, i as ue, f as ze } from "./vue-i18n-DsnU36hZ.js";
+import { _ as de } from "./DynamicWidget.vue_vue_type_script_setup_true_lang-BQh_qEEI.js";
+import { _ as me } from "./NoData.vue_vue_type_script_setup_true_lang-DX1We5Q0.js";
+import { r as re } from "./i18n-Cif1I9J2.js";
+import { _ as Fe } from "./SelectComponent.vue_vue_type_script_setup_true_lang-DYOjRnAy.js";
+const He = /* @__PURE__ */ G({
+  __name: "WidgetDialog",
+  props: /* @__PURE__ */ L({
+    isOpen: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ L(["update:isOpen"], ["update:modelValue"]),
+  setup(k, { emit: u }) {
+    const { t: n } = ae(), { breakpoints: r } = ie(), y = j(k, "modelValue"), c = k, x = u;
+    function v() {
+      x("update:isOpen", !1);
+    }
+    function V() {
+      d.value && (y.value = d.value, d.value = void 0, x("update:isOpen", !1));
+    }
+    const d = q(), B = U(() => !d.value);
+    return (D, W) => {
+      const I = f("FmButton"), _ = f("FmDialog");
+      return i(), $(_, {
+        "model-value": c.isOpen
+      }, {
+        "dialog-header": s(() => [
+          ce(P(l(n)("report.widget.type")), 1)
+        ]),
+        default: s(() => [
+          t(De, {
+            modelValue: d.value,
+            "onUpdate:modelValue": W[0] || (W[0] = (N) => d.value = N),
+            class: oe(`grid ${l(r).lg || l(r).md ? "grid-cols-3 gap-3" : "grid-cols-2 gap-3"}`),
+            "child-class": "p-[8px] flex flex-col"
+          }, null, 8, ["modelValue", "class"])
+        ]),
+        "dialog-footer": s(() => [
+          W[1] || (W[1] = w("div", { class: "grow" }, null, -1)),
+          t(I, {
+            label: l(n)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: v
+          }, null, 8, ["label"]),
+          t(I, {
+            label: l(n)("report.common.confirm"),
+            disabled: B.value,
+            onClick: V
+          }, null, 8, ["label", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), Je = { class: "fm-typo-en-body-lg-600" }, ge = /* @__PURE__ */ G({
+  __name: "ReportEditorTabHeader",
+  props: /* @__PURE__ */ L({
+    icon: {
+      type: String,
+      required: !0
+    }
+  }, {
+    modelValue: { type: Boolean, required: !0, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(k) {
+    const { t: u } = ae(), n = j(k, "modelValue"), r = k;
+    return (y, c) => {
+      const x = f("FmIcon");
+      return i(), S("div", {
+        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
+        onClick: c[0] || (c[0] = (v) => n.value = !n.value)
+      }, [
+        w("p", Je, P(l(u)("report.editor.customizeReport")), 1),
+        c[1] || (c[1] = w("div", { class: "grow" }, null, -1)),
+        t(x, {
+          name: r.icon
+        }, null, 8, ["name"])
+      ]);
+    };
+  }
+}), Le = /* @__PURE__ */ G({
+  __name: "ReportEditorTabDesktop",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(k) {
+    const u = j(k, "modelValue");
+    return (n, r) => (i(), S(J, null, [
+      t(ge, {
+        modelValue: u.value,
+        "onUpdate:modelValue": r[0] || (r[0] = (y) => u.value = y),
+        icon: "keyboard_double_arrow_left"
+      }, null, 8, ["modelValue"]),
+      Ce(n.$slots, "default")
+    ], 64));
+  }
+}), je = /* @__PURE__ */ G({
+  __name: "ReportEditorTabMobile",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(k) {
+    const u = j(k, "modelValue");
+    return (n, r) => {
+      const y = f("FmTopSheet"), c = f("FmCard");
+      return i(), $(c, { class: "fixed bottom-0 w-full" }, {
+        default: s(() => [
+          t(ge, {
+            modelValue: u.value,
+            "onUpdate:modelValue": r[0] || (r[0] = (x) => u.value = x),
+            icon: "keyboard_double_arrow_up"
+          }, null, 8, ["modelValue"]),
+          t(y, {
+            modelValue: u.value,
+            "onUpdate:modelValue": r[2] || (r[2] = (x) => u.value = x),
+            "fullscreen-size": "sm"
+          }, {
+            default: s(() => [
+              t(ge, {
+                modelValue: u.value,
+                "onUpdate:modelValue": r[1] || (r[1] = (x) => u.value = x),
+                icon: "keyboard_double_arrow_down"
+              }, null, 8, ["modelValue"]),
+              u.value ? Ce(n.$slots, "default", { key: 0 }) : Q("", !0)
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), Ge = {
+  key: 0,
+  class: "flex flex-col gap-2"
+}, Ae = /* @__PURE__ */ G({
+  __name: "GlobalFilterDialog",
+  props: /* @__PURE__ */ L({
+    schemas: {
+      type: Array,
+      default: () => []
+    },
+    tiles: {
+      type: Array,
+      required: !0
+    }
+  }, {
+    globalFilter: {
+      default: () => null
+    },
+    globalFilterModifiers: {},
+    isOpen: { type: Boolean, default: () => !1, required: !0 },
+    isOpenModifiers: {}
+  }),
+  emits: ["update:globalFilter", "update:isOpen"],
+  setup(k) {
+    const { t: u, te: n } = ae(), r = j(k, "globalFilter"), y = j(k, "isOpen"), c = Oe(), x = k, v = q(), V = q(), d = q(), B = q([]), D = q([]);
+    pe(y, (p) => {
+      var o, g, a, e;
+      p && (v.value = ((o = r.value) == null ? void 0 : o.label) || "", V.value = x.schemas.find(
+        (C) => {
+          var h;
+          return C.name === ((h = r.value) == null ? void 0 : h.schemaName);
+        }
+      ), d.value = (g = I.value.find(
+        (C) => {
+          var h;
+          return C.value.name === ((h = r.value) == null ? void 0 : h.name);
+        }
+      )) == null ? void 0 : g.value, B.value = ((a = r.value) == null ? void 0 : a.tileIds) || [], D.value = ((e = r.value) == null ? void 0 : e.filters) || []);
+    });
+    const W = U(
+      () => x.schemas.map((p) => ({
+        label: p.label || p.name,
+        value: p
+      }))
+    ), I = U(() => {
+      var p;
+      return (((p = V.value) == null ? void 0 : p.fields) || []).map((o) => ({
+        label: o.label,
+        value: o
+      }));
+    }), _ = U(() => x.tiles.reduce((p, o, g) => {
+      var C, h;
+      const a = o.widget.config.schemaNames ?? [], e = (o.widget.config.joinDatasources ?? []).flatMap(
+        (m) => m.schemaNames ?? []
+      );
+      return [...a, ...e].includes(((C = V.value) == null ? void 0 : C.name) || "") && p.push({
+        label: (h = o == null ? void 0 : o.widget.title) != null && h.trim() ? o.widget.title : `Widget ${g + 1}`,
+        value: o.id
+      }), p;
+    }, [])), N = U(
+      () => x.schemas.flatMap(
+        (p) => (p.fields ?? []).map((o) => ({
+          ...o,
+          labels: [
+            re(u, n, p.label, "schema"),
+            re(u, n, o.label || o.name, "other")
+          ]
+        }))
+      )
+    );
+    function A(p) {
+      var o;
+      p.name !== ((o = V.value) == null ? void 0 : o.name) && (V.value = p, d.value = void 0);
+    }
+    function O(p) {
+      d.value = p;
+    }
+    function E(p) {
+      switch (p) {
+        case le.Timestamp:
+          return we.Between;
+        case le.Bool:
+        case le.String:
+        case le.Numeric:
+          return we.Equal;
+        default:
+          throw new Error(`Unsupported data type: ${p}`);
+      }
+    }
+    function b() {
+      if (!V.value) {
+        c.open({ message: "Invalid schema", type: "error" });
+        return;
+      }
+      d.value || c.open({ message: "Invalid dimension", type: "error" }), r.value = {
+        schemaName: V.value.name,
+        name: d.value.name,
+        label: v.value || name,
+        operator: E(d.value.type),
+        option: d.value.type === le.Timestamp ? Pe.DateTime : null,
+        tileIds: [...B.value],
+        filters: JSON.parse(JSON.stringify(D.value))
+      }, y.value = !1;
+    }
+    function z() {
+      y.value = !1;
+    }
+    const K = U(() => {
+      var p;
+      return [
+        (p = V.value) == null ? void 0 : p.name,
+        ...D.value.map((o) => o.schemaName)
+      ];
+    });
+    function Y(p) {
+      var C, h, m, M;
+      const o = x.tiles.find((R) => R.id === p.value), g = ((h = (C = o == null ? void 0 : o.widget) == null ? void 0 : C.config) == null ? void 0 : h.schemaNames) ?? [], a = (((M = (m = o == null ? void 0 : o.widget) == null ? void 0 : m.config) == null ? void 0 : M.joinDatasources) ?? []).flatMap(
+        (R) => R.schemaNames ?? []
+      ), e = [...g, ...a];
+      return K.value.filter((R) => !!R).some((R) => !e.includes(R));
+    }
+    return (p, o) => {
+      const g = f("FmTextField"), a = f("FmLabel"), e = f("FmCheckbox"), C = f("FmIcon"), h = f("FmTooltip"), m = f("FmForm"), M = f("FmButton"), R = f("FmDialog");
+      return i(), $(R, {
+        modelValue: y.value,
+        "onUpdate:modelValue": o[5] || (o[5] = (T) => y.value = T),
+        overlay: !0,
+        "z-index": 10
+      }, {
+        "dialog-header": s(() => [
+          ce(P(l(u)("report.section.filter.globalFilter")), 1)
+        ]),
+        default: s(() => [
+          t(m, {
+            ref: "form",
+            class: "flex flex-col gap-2 w-[490px]"
+          }, {
+            default: s(() => [
+              t(g, {
+                modelValue: v.value,
+                "onUpdate:modelValue": o[0] || (o[0] = (T) => v.value = T),
+                placeholder: l(u)("report.section.filter.displayName"),
+                label: l(u)("report.section.filter.displayName"),
+                class: "mb-2"
+              }, null, 8, ["modelValue", "placeholder", "label"]),
+              t(Fe, {
+                "model-value": V.value,
+                items: W.value,
+                placeholder: l(u)("report.section.schema.title"),
+                label: l(u)("report.section.schema.title"),
+                "onUpdate:modelValue": o[1] || (o[1] = (T) => A(T))
+              }, null, 8, ["model-value", "items", "placeholder", "label"]),
+              t(Fe, {
+                "model-value": d.value,
+                items: I.value,
+                placeholder: l(u)("report.section.dimension.Dimension"),
+                label: l(u)("report.section.dimension.Dimension"),
+                "onUpdate:modelValue": o[2] || (o[2] = (T) => O(T))
+              }, null, 8, ["model-value", "items", "placeholder", "label"]),
+              t(We, {
+                modelValue: D.value,
+                "onUpdate:modelValue": o[3] || (o[3] = (T) => D.value = T),
+                options: N.value
+              }, null, 8, ["modelValue", "options"]),
+              t(a, { class: "mt-2 fm-typo-en-body-lg-600" }, {
+                default: s(() => [
+                  ce(P(l(u)("report.section.filter.applyWidget")), 1)
+                ]),
+                _: 1
+              }),
+              k.tiles.length > 0 ? (i(), S("div", Ge, [
+                (i(!0), S(J, null, X(_.value, (T) => (i(), S("div", {
+                  key: T.value,
+                  class: "flex items-center"
+                }, [
+                  t(e, {
+                    modelValue: B.value,
+                    "onUpdate:modelValue": o[4] || (o[4] = (ne) => B.value = ne),
+                    label: T.label,
+                    value: T.value
+                  }, null, 8, ["modelValue", "label", "value"]),
+                  Y(T) ? (i(), $(h, {
+                    key: 0,
+                    content: l(u)("report.section.filter.missingFilterSchema"),
+                    "z-index": 99,
+                    class: "ml-2"
+                  }, {
+                    default: s(() => [
+                      t(C, {
+                        name: "warning",
+                        class: "text-fm-color-system-error-300"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["content"])) : Q("", !0)
+                ]))), 128))
+              ])) : (i(), $(a, {
+                key: 1,
+                class: "fm-typo-en-body-lg-400",
+                label: l(u)("report.section.filter.noWidget")
+              }, null, 8, ["label"]))
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        "dialog-footer": s(() => [
+          o[6] || (o[6] = w("div", { class: "grow" }, null, -1)),
+          t(M, {
+            label: l(u)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: z
+          }, null, 8, ["label"]),
+          t(M, {
+            label: l(u)("report.common.confirm"),
+            onClick: b
+          }, null, 8, ["label"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), Ke = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Qe = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Xe = { class: "flex items-center gap-1 max-w-[195px] w-[195px]" }, Ye = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, Ze = { class: "flex flex-col gap-24" }, el = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, xe = /* @__PURE__ */ G({
+  __name: "ReportEditorTab",
+  props: /* @__PURE__ */ L({
+    hideConfiguration: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ L(["hideConfiguration"], ["update:modelValue"]),
+  setup(k, { emit: u }) {
+    const n = j(k, "modelValue"), { breakpoints: r } = ie(), y = k, c = u, x = Se(), v = $e(), V = q(), {
+      currentSelectWidgetType: d,
+      categories: B,
+      editingTile: D,
+      editingTileIndex: W,
+      editingGlobalFilter: I,
+      editingGlobalFilterIndex: _
+    } = fe(Ve()), { schemas: N } = fe(Ee()), { promptMessage: A } = Te(), O = q(!1), E = q(!1), { t: b, te: z } = ae(), K = q(void 0), Y = U(() => {
+      const a = n.value.tiles.flatMap((e) => {
+        var m;
+        const C = e.widget.config.schemaNames ?? [], h = ((m = e.widget.config.joinDatasources) == null ? void 0 : m.flatMap((M) => M.schemaNames ?? [])) ?? [];
+        return [...C, ...h];
+      });
+      return [...new Set(a)].reduce((e, C) => {
+        const h = N.value.find((m) => m.name === C);
+        return h && e.push(h), e;
+      }, []);
+    });
+    pe(
+      () => d.value,
+      () => {
+        d.value !== void 0 && (K.value = Ie(d.value), D.value = K.value, W.value = -1, x.push({
+          name: "tileEditor",
+          query: v.query
+        }));
+      },
+      { immediate: !0 }
+    ), pe(
+      () => n.value.tiles,
+      (a) => {
+        a.forEach((e) => {
+          e.id || (e.id = te());
+        });
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const p = [
+      {
+        label: b("report.common.edit"),
+        selected: !1,
+        variant: "tertiary",
+        onClick: (a) => {
+          W.value = a, D.value = JSON.parse(JSON.stringify(n.value.tiles[a])), x.push({
+            name: "tileEditor",
+            query: v.query
+          });
+        }
+      },
+      {
+        label: b("report.common.duplicate"),
+        selected: !1,
+        variant: "tertiary",
+        onClick: (a) => {
+          const e = {
+            ...JSON.parse(JSON.stringify(n.value.tiles[a])),
+            id: te()
+          };
+          n.value.tiles.push(e);
+        }
+      },
+      {
+        label: b("report.common.remove"),
+        selected: !1,
+        variant: "destructive",
+        onClick: async (a) => {
+          if (await A({
+            title: b("report.editor.deleteWidget"),
+            message: b("report.editor.deleteWidgetConfirm", {
+              title: n.value.tiles[a].widget.title
+            })
+          })) {
+            const C = n.value.tiles[a].id;
+            n.value.tiles.splice(a, 1), n.value.globalFilters && n.value.globalFilters.forEach((h) => {
+              var m;
+              h.tileIds = (m = h.tileIds) == null ? void 0 : m.filter((M) => M !== C);
+            });
+          }
+        }
+      }
+    ], o = [
+      {
+        label: b("report.common.edit"),
+        selected: !1,
+        variant: "tertiary",
+        onClick: (a) => {
+          var e;
+          _.value = a, I.value = JSON.parse(JSON.stringify((e = n.value.globalFilters) == null ? void 0 : e[a])), O.value = !0;
+        }
+      },
+      {
+        label: b("report.common.remove"),
+        selected: !1,
+        variant: "destructive",
+        onClick: async (a) => {
+          var h, m;
+          const e = (h = n.value.globalFilters) == null ? void 0 : h[a];
+          if (!e) return;
+          await A({
+            title: b("report.editor.deleteWidget"),
+            message: b("report.editor.deleteWidgetConfirm", {
+              title: ue(e)
+            })
+          }) && ((m = n.value.globalFilters) == null || m.splice(a, 1));
+        }
+      }
+    ], g = U(() => B.value.map((a) => ({
+      label: b(`report.category.${a.name}`),
+      value: a.id
+    })));
+    return (a, e) => {
+      const C = f("FmTextField"), h = f("FmSelect"), m = f("FmButton"), M = f("FmIcon"), R = f("FmTooltip"), T = f("FmMenuItem"), ne = f("FmMenu"), be = f("FmListItem"), he = f("FmList"), Ne = f("FmForm");
+      return i(), $(Ue(l(r).lg || l(r).md ? Le : je), {
+        "model-value": y.hideConfiguration,
+        "onUpdate:modelValue": e[8] || (e[8] = (F) => c("hideConfiguration", F))
+      }, {
+        default: s(() => [
+          t(Ae, {
+            "is-open": O.value,
+            "onUpdate:isOpen": e[0] || (e[0] = (F) => O.value = F),
+            "global-filter": l(I),
+            tiles: n.value.tiles,
+            schemas: Y.value,
+            "onUpdate:globalFilter": e[1] || (e[1] = (F) => {
+              F && (n.value.globalFilters || (n.value.globalFilters = []), typeof l(_) == "number" && l(_) >= 0 ? n.value.globalFilters[l(_)] = F : n.value.globalFilters.push(F));
+            })
+          }, null, 8, ["is-open", "global-filter", "tiles", "schemas"]),
+          t(He, {
+            modelValue: l(d),
+            "onUpdate:modelValue": e[2] || (e[2] = (F) => ke(d) ? d.value = F : null),
+            "is-open": E.value,
+            "onUpdate:isOpen": e[3] || (e[3] = (F) => E.value = F)
+          }, null, 8, ["modelValue", "is-open"]),
+          t(Ne, {
+            ref_key: "form",
+            ref: V,
+            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
+          }, {
+            default: s(() => [
+              t(ye, { class: "border-solid" }, {
+                header: s(() => [
+                  w("p", null, P(l(b)("report.editor.reportInfo")), 1),
+                  e[9] || (e[9] = w("div", { class: "grow" }, null, -1))
+                ]),
+                content: s(() => [
+                  w("div", Ke, [
+                    t(C, {
+                      modelValue: n.value.name,
+                      "onUpdate:modelValue": e[4] || (e[4] = (F) => n.value.name = F),
+                      label: l(b)("report.editor.reportTitle"),
+                      placeholder: l(b)("report.editor.placeholder")
+                    }, null, 8, ["modelValue", "label", "placeholder"]),
+                    t(h, {
+                      modelValue: n.value.category,
+                      "onUpdate:modelValue": e[5] || (e[5] = (F) => n.value.category = F),
+                      label: l(b)("report.common.category"),
+                      items: g.value
+                    }, null, 8, ["modelValue", "label", "items"])
+                  ])
+                ]),
+                _: 1
+              }),
+              t(ye, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: s(() => [
+                  w("p", null, P(l(b)("report.section.filter.globalFilter")), 1),
+                  e[10] || (e[10] = w("div", { class: "grow" }, null, -1))
+                ]),
+                content: s(() => [
+                  w("div", Qe, [
+                    t(m, {
+                      label: l(b)("report.section.filter.addGlobalFilter"),
+                      variant: "secondary",
+                      icon: "add",
+                      "icon-position": "prepend",
+                      "border-color": l(Z).ColorPrimary,
+                      "text-color": l(Z).ColorPrimary,
+                      onClick: e[6] || (e[6] = () => {
+                        _.value = null, I.value = null, O.value = !0;
+                      })
+                    }, null, 8, ["label", "border-color", "text-color"]),
+                    t(he, null, {
+                      default: s(() => [
+                        t(l(_e), {
+                          list: n.value.globalFilters,
+                          "item-key": "`${element.schemaName}-${element.name}`",
+                          class: "flex flex-col gap-2 cursor-grab",
+                          handle: ".handle"
+                        }, {
+                          item: s(({ element: F, index: ee }) => [
+                            t(be, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                              default: s(() => [
+                                t(M, {
+                                  name: "drag_handle",
+                                  class: "handle"
+                                }),
+                                w("div", Xe, [
+                                  t(R, {
+                                    "z-index": 99,
+                                    content: l(ue)(F),
+                                    class: "handle"
+                                  }, {
+                                    default: s(() => [
+                                      w("p", Ye, P(l(ue)(F)), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["content"]),
+                                  Y.value.find(
+                                    (H) => H.name === F.schemaName
+                                  ) ? Q("", !0) : (i(), $(R, {
+                                    key: 0,
+                                    content: l(b)("report.section.filter.missingSchema"),
+                                    "z-index": 99
+                                  }, {
+                                    default: s(() => [
+                                      t(M, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-error-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"]))
+                                ]),
+                                e[11] || (e[11] = w("div", { class: "grow" }, null, -1)),
+                                t(ne, {
+                                  trigger: "click",
+                                  shift: !0,
+                                  "stop-click-propagation": !0
+                                }, {
+                                  "menu-button": s(() => [
+                                    t(m, {
+                                      "append-icon": "more_vert",
+                                      variant: "tertiary"
+                                    })
+                                  ]),
+                                  default: s(() => [
+                                    (i(), S(J, null, X(o, (H, se) => t(T, {
+                                      key: se,
+                                      onClick: (Me) => H.onClick(ee)
+                                    }, {
+                                      label: s(() => [
+                                        w("p", {
+                                          class: oe(
+                                            H.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                          )
+                                        }, P(H.label), 3)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["onClick"])), 64))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 1
+                        }, 8, ["list"])
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }),
+              w("div", Ze, [
+                t(m, {
+                  label: l(b)("report.editor.addWidget"),
+                  variant: "secondary",
+                  icon: "add",
+                  "icon-position": "prepend",
+                  "border-color": l(Z).ColorPrimary,
+                  "text-color": l(Z).ColorPrimary,
+                  onClick: e[7] || (e[7] = (F) => E.value = !0)
+                }, null, 8, ["label", "border-color", "text-color"]),
+                t(he, null, {
+                  default: s(() => [
+                    t(l(_e), {
+                      list: n.value.tiles,
+                      "item-key": "id",
+                      class: "flex flex-col gap-2 cursor-grab",
+                      handle: ".handle"
+                    }, {
+                      item: s(({ element: F, index: ee }) => [
+                        t(be, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                          default: s(() => [
+                            t(M, {
+                              name: "drag_handle",
+                              class: "handle"
+                            }),
+                            t(R, {
+                              content: F.widget.title ? l(re)(l(b), l(z), F.widget.title, "other") : l(b)("report.editor.widget", { index: ee + 1 }),
+                              class: "handle"
+                            }, {
+                              default: s(() => [
+                                w("p", el, P(F.widget.title ? l(re)(l(b), l(z), F.widget.title, "other") : l(b)("report.editor.widget", { index: ee + 1 })), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["content"]),
+                            e[12] || (e[12] = w("div", { class: "grow" }, null, -1)),
+                            t(ne, {
+                              trigger: "click",
+                              shift: !0,
+                              "stop-click-propagation": !0
+                            }, {
+                              "menu-button": s(() => [
+                                t(m, {
+                                  "append-icon": "more_vert",
+                                  variant: "tertiary"
+                                })
+                              ]),
+                              default: s(() => [
+                                (i(), S(J, null, X(p, (H, se) => t(T, {
+                                  key: se,
+                                  onClick: (Me) => H.onClick(ee)
+                                }, {
+                                  label: s(() => [
+                                    w("p", {
+                                      class: oe(
+                                        H.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                      )
+                                    }, P(H.label), 3)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["onClick"])), 64))
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 1
+                    }, 8, ["list"])
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), ll = { class: "h-full w-full overflow-x-hidden" }, tl = { class: "flex flex-col bg-fm-color-neutral-white w-[400px]" }, ol = { class: "flex bg-fm-color-neutral-white w-[88px]" }, al = {
+  key: 1,
+  class: "w-full overflow-y-auto"
+}, nl = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, rl = { key: 2 }, il = {
+  key: 0,
+  class: "grid grid-cols-12 gap-[16px]"
+}, sl = {
+  key: 3,
+  class: "h-full w-full flex items-start justify-center bg-fm-color-neutral-white py-24",
+  style: { backgroundColor: "#F6F8FC" }
+}, ul = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, dl = /* @__PURE__ */ G({
+  __name: "ReportEditorViewport",
+  props: /* @__PURE__ */ L({
+    hideConfiguration: { type: Boolean, required: !1, default: !1 },
+    previewWidth: { type: Number, required: !0 },
+    previewHeight: { type: Number, required: !0 },
+    previewScale: { type: Number, required: !0 }
+  }, {
+    modelValue: { required: !0, default: () => {
+    } },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ L(["hideConfiguration"], ["update:modelValue"]),
+  setup(k, { emit: u }) {
+    const { breakpoints: n } = ie(), r = j(k, "modelValue"), y = k, c = U(() => y.previewWidth > 0 && y.previewHeight > 0), x = U(() => n.value.sm || n.value.xs), v = u;
+    return (V, d) => {
+      const B = f("FmCircularProgress"), D = f("FmButton"), W = f("FmMenuDivider"), I = f("FmCard");
+      return i(), S("div", ll, [
+        r.value ? (i(), S(J, { key: 1 }, [
+          c.value ? Q("", !0) : (i(), $(Re, {
+            key: 0,
+            "model-value": !y.hideConfiguration
+          }, {
+            right: s(() => [
+              w("div", tl, [
+                r.value ? (i(), $(xe, {
+                  key: 0,
+                  modelValue: r.value,
+                  "onUpdate:modelValue": d[0] || (d[0] = (_) => r.value = _),
+                  "hide-configuration": y.hideConfiguration,
+                  onHideConfiguration: d[1] || (d[1] = (_) => v("hideConfiguration", _))
+                }, null, 8, ["modelValue", "hide-configuration"])) : Q("", !0)
+              ])
+            ]),
+            left: s(() => [
+              w("div", ol, [
+                t(D, {
+                  variant: "secondary",
+                  icon: "keyboard_double_arrow_right",
+                  "border-color": l(Z).ColorPrimary,
+                  "text-color": l(Z).ColorPrimary,
+                  class: "m-24 my-16",
+                  size: "md",
+                  onClick: d[2] || (d[2] = (_) => v("hideConfiguration", !y.hideConfiguration))
+                }, null, 8, ["border-color", "text-color"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value"])),
+          t(W, {
+            vertical: "",
+            style: { margin: "0px" }
+          }),
+          !x.value && !c.value ? (i(), S("div", al, [
+            r.value.tiles.length > 0 ? (i(), S("div", nl, [
+              (i(!0), S(J, null, X(r.value.tiles, (_, N) => (i(), $(de, {
+                key: `${l(te)()}_${N}`,
+                "model-value": _,
+                index: N,
+                "hide-export": !0
+              }, null, 8, ["model-value", "index"]))), 128))
+            ])) : (i(), $(me, { key: 1 }))
+          ])) : x.value && !c.value ? (i(), S("div", rl, [
+            t(I, { class: "px-5 pb-28" }, {
+              default: s(() => [
+                r.value.tiles.length > 0 ? (i(), S("div", il, [
+                  (i(!0), S(J, null, X(r.value.tiles, (_, N) => (i(), $(de, {
+                    key: `${l(te)()}_${N}`,
+                    "model-value": _,
+                    index: N,
+                    "hide-export": !0
+                  }, null, 8, ["model-value", "index"]))), 128))
+                ])) : (i(), $(me, { key: 1 }))
+              ]),
+              _: 1
+            }),
+            r.value ? (i(), $(xe, {
+              key: 0,
+              modelValue: r.value,
+              "onUpdate:modelValue": d[3] || (d[3] = (_) => r.value = _),
+              "hide-configuration": y.hideConfiguration,
+              onHideConfiguration: d[4] || (d[4] = (_) => {
+                v("hideConfiguration", _);
+              })
+            }, null, 8, ["modelValue", "hide-configuration"])) : Q("", !0)
+          ])) : (i(), S("div", sl, [
+            w("div", {
+              style: ve({
+                transformOrigin: "top center",
+                transform: `scale(${y.previewScale})`
+              })
+            }, [
+              w("div", {
+                class: "overflow-y-auto bg-white rounded-lg",
+                style: ve({
+                  width: y.previewWidth + "px",
+                  height: y.previewHeight + "px"
+                })
+              }, [
+                r.value.tiles.length > 0 ? (i(), S("div", ul, [
+                  (i(!0), S(J, null, X(r.value.tiles, (_, N) => (i(), $(de, {
+                    key: `${l(te)()}_${N}`,
+                    "model-value": _,
+                    index: N,
+                    "hide-export": !0,
+                    "custom-screen-width": y.previewWidth
+                  }, null, 8, ["model-value", "index", "custom-screen-width"]))), 128))
+                ])) : (i(), $(me, { key: 1 }))
+              ], 4)
+            ], 4)
+          ]))
+        ], 64)) : (i(), $(B, { key: 0 }))
+      ]);
+    };
+  }
+}), ml = { class: "flex items-center gap-4" }, cl = { class: "flex justify-center items-center gap-2 w-full" }, pl = { class: "flex gap-4" }, Vl = /* @__PURE__ */ G({
+  __name: "ReportEditor",
+  setup(k) {
+    const u = Se(), n = $e(), r = Ve(), { promptLoader: y } = ze(), { t: c } = ae(), { currentReport: x, editingReport: v } = fe(r), { breakpoints: V } = ie(), d = U(() => {
+      var g;
+      return !((g = v.value) != null && g.editable);
+    }), B = U(() => {
+      var g;
+      return ((g = v.value) == null ? void 0 : g.name) ?? c("report.editor.newReport");
+    }), D = Oe(), { promptMessage: W } = Te(), I = q(!1);
+    async function _() {
+      if (!v.value || v.value.tiles.length === 0) {
+        D.open({ message: c("report.messages.noWidget"), type: "error" });
+        return;
+      }
+      const g = d.value ? c("report.common.clone") : c("report.common.save");
+      if (await W({
+        title: `${c("report.messages.saveReport")}`,
+        message: c("report.messages.confirmAction", { action: g, name: B.value })
+      }))
+        try {
+          await y(async () => {
+            if (d.value) {
+              const e = JSON.parse(JSON.stringify(v.value));
+              e.editable = !0, e.id = "", e.name = `${e.name} ${c("report.common.duplicate")}`, await r.createOrUpdateReport(e);
+            } else
+              v.value && await r.createOrUpdateReport(v.value);
+            u.push({
+              name: "reportView",
+              query: n.query
+            });
+          });
+        } catch (e) {
+          console.log(e), D.open({
+            message: c("report.messages.failedToAction", { action: g }),
+            type: "error"
+          });
+        }
+    }
+    async function N() {
+      var a;
+      if (!v.value) return;
+      await W({
+        title: c("report.common.report", 1),
+        message: c("report.editor.notSaved", { name: (a = v.value) == null ? void 0 : a.name })
+      }) && (v.value = JSON.parse(JSON.stringify(x.value)), u.back());
+    }
+    Be(() => {
+      v.value || u.push({ name: "reports" });
+    });
+    const A = [
+      {
+        label: c("report.common.default"),
+        width: void 0,
+        height: void 0
+      },
+      {
+        label: c("report.editor.devices.desktop"),
+        width: 1920,
+        height: 1080
+      },
+      {
+        label: c("report.editor.devices.tablet"),
+        width: 820,
+        height: 1180
+      },
+      {
+        label: c("report.editor.devices.phone"),
+        width: 390,
+        height: 859
+      }
+    ], O = q(A[0]), E = q(!1), b = U(() => E.value ? Math.max(O.value.width || 0, O.value.height || 0) : Math.min(O.value.width || 0, O.value.height || 0)), z = U(() => E.value ? Math.min(O.value.width || 0, O.value.height || 0) : Math.max(O.value.width || 0, O.value.height || 0)), K = U(() => window.innerHeight - 72 - 56), Y = U(() => {
+      if (!b.value) return 1;
+      let g = (K.value - 48) / b.value, a = z.value * g;
+      return a > window.innerWidth && (g = window.innerWidth / z.value, a = z.value * g), g > 1 ? 1 : g;
+    });
+    function p(g) {
+      O.value = g;
+    }
+    function o() {
+      E.value = !E.value;
+    }
+    return (g, a) => {
+      const e = f("FmTooltip"), C = f("FmButton"), h = f("FmPageHead");
+      return i(), $(qe, null, {
+        default: s(() => [
+          t(h, {
+            actions: [
+              { label: l(c)("report.common.cancel"), value: "cancel", isPrimary: !1 },
+              { label: "Save Report", value: "save", isPrimary: !0, prependIcon: "download" }
+            ],
+            "onClick:action": a[0] || (a[0] = (m) => {
+              m === "cancel" && N(), m === "save" && _();
+            })
+          }, {
+            title: s(() => [
+              w("div", ml, [
+                t(e, {
+                  content: B.value,
+                  placement: "bottom"
+                }, {
+                  default: s(() => [
+                    w("p", {
+                      class: oe(`${l(V).sm || l(V).xs ? "hidden" : ""} text-ellipsis overflow-hidden text-nowrap fm-typo-en-title-md-600 w-[250px]`)
+                    }, P(B.value), 3)
+                  ]),
+                  _: 1
+                }, 8, ["content"]),
+                w("div", cl, [
+                  w("div", pl, [
+                    (i(), S(J, null, X(A, (m) => {
+                      var M;
+                      return t(C, {
+                        key: m.label,
+                        label: m.label,
+                        variant: ((M = O.value) == null ? void 0 : M.label) === m.label ? "primary" : "secondary",
+                        size: "md",
+                        onClick: (R) => p(m)
+                      }, null, 8, ["label", "variant", "onClick"]);
+                    }), 64))
+                  ]),
+                  t(C, {
+                    icon: "screen_rotation",
+                    variant: "tertiary",
+                    size: "md",
+                    class: "text-fm-color-typo-primary",
+                    onClick: o
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["actions"]),
+          l(v) ? (i(), $(dl, {
+            key: 0,
+            modelValue: l(v),
+            "onUpdate:modelValue": a[1] || (a[1] = (m) => ke(v) ? v.value = m : null),
+            style: ve({ height: K.value + "px" }),
+            class: oe(l(V).lg || l(V).md ? "flex" : ""),
+            "hide-configuration": I.value,
+            "preview-width": z.value,
+            "preview-height": b.value,
+            "preview-scale": Y.value,
+            onHideConfiguration: a[2] || (a[2] = (m) => I.value = m)
+          }, null, 8, ["modelValue", "style", "class", "hide-configuration", "preview-width", "preview-height", "preview-scale"])) : Q("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  Vl as default
+};