@feedmepos/mf-report 5.19.20 → 5.19.21-beta.1

package/dist/ReportEditor-0cP29pgc.js

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