@feedmepos/mf-report 5.3.15-rc.9 → 5.4.0-beta.0

package/dist/ReportEditor-0l6N2bUP.js

@@ -0,0 +1,524 @@
+import { defineComponent as h, mergeModels as w, useModel as R, ref as D, computed as N, resolveComponent as m, openBlock as r, createBlock as y, withCtx as u, createTextVNode as pe, createVNode as t, normalizeClass as U, unref as l, createElementVNode as _, createElementBlock as F, Fragment as B, renderSlot as A, createCommentVNode as O, watch as ce, resolveDynamicComponent as G, isRef as Y, toDisplayString as L, renderList as z, onMounted as fe, normalizeStyle as ve } from "vue";
+import { W as ge, i as _e, S as ye, D as Ce, T as be, _ as Ve } from "./TransitionFade-ryomNLIZ.js";
+import { u as j, b as K, v as Q, c as ke } from "./app-eKZV2PPB.js";
+import { _ as Fe } from "./HeaderTab.vue_vue_type_script_setup_true_lang-pwHzeuLE.js";
+import { storeToRefs as X } from "pinia";
+import { useRouter as Z, useRoute as ee } from "vue-router";
+import { useBreakpoints as I, FmButtonColorThemeVariant as q, useSnackbar as xe } from "@feedmepos/ui-library";
+import { _ as oe } from "./DynamicWidget.vue_vue_type_script_setup_true_lang-WNX1hHIm.js";
+import { _ as te } from "./NoData.vue_vue_type_script_setup_true_lang-FeKqFs4A.js";
+const we = /* @__PURE__ */ h({
+  __name: "WidgetDialog",
+  props: /* @__PURE__ */ w({
+    isOpen: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ w(["isOpen"], ["update:modelValue"]),
+  setup(c, { emit: n }) {
+    const { breakpoints: o } = I(), a = R(c, "modelValue"), s = c, C = n;
+    function e() {
+      C("isOpen", !1);
+    }
+    function f() {
+      v.value && (a.value = v.value, v.value = void 0, C("isOpen", !1));
+    }
+    const v = D(), i = N(() => !v.value);
+    return (k, b) => {
+      const $ = m("FmButton"), M = m("FmDialog");
+      return r(), y(M, {
+        "model-value": s.isOpen
+      }, {
+        "dialog-header": u(() => b[1] || (b[1] = [
+          pe("Widget Type")
+        ])),
+        default: u(() => [
+          t(ge, {
+            modelValue: v.value,
+            "onUpdate:modelValue": b[0] || (b[0] = (S) => v.value = S),
+            class: U(`grid ${l(o).lg || l(o).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(() => [
+          b[2] || (b[2] = _("div", { class: "grow" }, null, -1)),
+          t($, {
+            label: "Cancel",
+            variant: "tertiary",
+            onClick: e
+          }),
+          t($, {
+            label: "Confirm",
+            disabled: i.value,
+            onClick: f
+          }, null, 8, ["disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), P = /* @__PURE__ */ h({
+  __name: "ReportEditorTabHeader",
+  props: /* @__PURE__ */ w({
+    icon: {
+      type: String,
+      required: !0
+    }
+  }, {
+    modelValue: { type: Boolean, required: !0, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(c) {
+    const n = R(c, "modelValue"), o = c;
+    return (a, s) => {
+      const C = m("FmIcon");
+      return r(), F("div", {
+        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
+        onClick: s[0] || (s[0] = (e) => n.value = !n.value)
+      }, [
+        s[1] || (s[1] = _("p", { class: "fm-typo-en-body-lg-600" }, "Customize report", -1)),
+        s[2] || (s[2] = _("div", { class: "grow" }, null, -1)),
+        t(C, {
+          name: o.icon
+        }, null, 8, ["name"])
+      ]);
+    };
+  }
+}), $e = /* @__PURE__ */ h({
+  __name: "ReportEditorTabDesktop",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(c) {
+    const n = R(c, "modelValue");
+    return (o, a) => (r(), F(B, null, [
+      t(P, {
+        modelValue: n.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (s) => n.value = s),
+        icon: "keyboard_double_arrow_left"
+      }, null, 8, ["modelValue"]),
+      A(o.$slots, "default")
+    ], 64));
+  }
+}), he = /* @__PURE__ */ h({
+  __name: "ReportEditorTabMobile",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(c) {
+    const n = R(c, "modelValue");
+    return (o, a) => {
+      const s = m("FmTopSheet"), C = m("FmCard");
+      return r(), y(C, { class: "fixed bottom-0 w-full" }, {
+        default: u(() => [
+          t(P, {
+            modelValue: n.value,
+            "onUpdate:modelValue": a[0] || (a[0] = (e) => n.value = e),
+            icon: "keyboard_double_arrow_up"
+          }, null, 8, ["modelValue"]),
+          t(s, {
+            modelValue: n.value,
+            "onUpdate:modelValue": a[2] || (a[2] = (e) => n.value = e),
+            "fullscreen-size": "sm"
+          }, {
+            default: u(() => [
+              t(P, {
+                modelValue: n.value,
+                "onUpdate:modelValue": a[1] || (a[1] = (e) => n.value = e),
+                icon: "keyboard_double_arrow_down"
+              }, null, 8, ["modelValue"]),
+              n.value ? A(o.$slots, "default", { key: 0 }) : O("", !0)
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), Se = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Re = { class: "flex flex-col gap-24" }, Te = { class: "line-clamp-2 overflow-hidden" }, le = /* @__PURE__ */ h({
+  __name: "ReportEditorTab",
+  props: /* @__PURE__ */ w({
+    hideConfiguration: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ w(["hideConfiguration"], ["update:modelValue"]),
+  setup(c, { emit: n }) {
+    const o = R(c, "modelValue"), { breakpoints: a } = I(), s = c, C = n, e = Z(), f = ee(), v = D(), { currentSelectWidgetType: i, categories: k, editingTile: b, editingIndex: $ } = X(j()), { promptMessage: M } = K(), S = D(!1);
+    ce(
+      () => i.value,
+      () => {
+        i.value !== void 0 && (o.value.tiles.push(_e(i.value)), $.value = o.value.tiles.length - 1, b.value = o.value.tiles[o.value.tiles.length - 1], e.push({
+          name: "tileEditor",
+          query: f.query
+        }));
+      },
+      { immediate: !0 }
+    );
+    const V = [
+      {
+        label: "Edit",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (d) => {
+          $.value = d, b.value = JSON.parse(JSON.stringify(o.value.tiles[d])), e.push({
+            name: "tileEditor",
+            query: f.query
+          });
+        }
+      },
+      {
+        label: "Duplicate",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (d) => {
+          o.value.tiles.push(JSON.parse(JSON.stringify(o.value.tiles[d])));
+        }
+      },
+      {
+        label: "Remove",
+        selected: !1,
+        variant: "destructive",
+        onClick: async (d) => {
+          await M({
+            title: "Delete widget",
+            message: `Are You sure you want to delete ${o.value.tiles[d].widget.title}?`
+          }) && (o.value.tiles = o.value.tiles.filter((T, E) => E !== d));
+        }
+      }
+    ], x = N(() => k.value.map((d) => ({ label: d.name, value: d.id })));
+    return (d, p) => {
+      const T = m("FmTextField"), E = m("FmSelect"), H = m("FmButton"), ne = m("FmIcon"), ae = m("FmTooltip"), re = m("FmMenuItem"), ie = m("FmMenu"), ue = m("FmListItem"), se = m("FmList"), de = m("FmForm");
+      return r(), y(G(l(a).lg || l(a).md ? $e : he), {
+        "model-value": s.hideConfiguration,
+        "onUpdate:modelValue": p[5] || (p[5] = (g) => C("hideConfiguration", g))
+      }, {
+        default: u(() => [
+          t(we, {
+            modelValue: l(i),
+            "onUpdate:modelValue": p[0] || (p[0] = (g) => Y(i) ? i.value = g : null),
+            "is-open": S.value,
+            onIsOpen: p[1] || (p[1] = (g) => S.value = g)
+          }, null, 8, ["modelValue", "is-open"]),
+          t(de, {
+            ref_key: "form",
+            ref: v,
+            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
+          }, {
+            default: u(() => [
+              t(ye, { class: "border-solid" }, {
+                header: u(() => p[6] || (p[6] = [
+                  _("p", null, "Report infomation", -1),
+                  _("div", { class: "grow" }, null, -1)
+                ])),
+                content: u(() => [
+                  _("div", Se, [
+                    t(T, {
+                      modelValue: o.value.name,
+                      "onUpdate:modelValue": p[2] || (p[2] = (g) => o.value.name = g),
+                      label: "Report title",
+                      placeholder: "placeholder"
+                    }, null, 8, ["modelValue"]),
+                    t(E, {
+                      modelValue: o.value.category,
+                      "onUpdate:modelValue": p[3] || (p[3] = (g) => o.value.category = g),
+                      label: "Category",
+                      items: x.value
+                    }, null, 8, ["modelValue", "items"])
+                  ])
+                ]),
+                _: 1
+              }),
+              _("div", Re, [
+                t(H, {
+                  label: "Add widget",
+                  variant: "secondary",
+                  icon: "add",
+                  "icon-position": "prepend",
+                  "border-color": l(q).ColorPrimary,
+                  "text-color": l(q).ColorPrimary,
+                  onClick: p[4] || (p[4] = (g) => S.value = !0)
+                }, null, 8, ["border-color", "text-color"]),
+                t(se, null, {
+                  default: u(() => [
+                    t(l(Ce), {
+                      list: o.value.tiles,
+                      "item-key": "id",
+                      class: "flex flex-col gap-2 cursor-grab"
+                    }, {
+                      item: u(({ element: g, index: W }) => [
+                        t(ue, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                          default: u(() => [
+                            t(ne, { name: "drag_handle" }),
+                            t(ae, {
+                              content: g.widget.title.length <= 0 ? `Widget ${W}` : g.widget.title
+                            }, {
+                              default: u(() => [
+                                _("p", Te, L(g.widget.title.length <= 0 ? `Widget ${W}` : g.widget.title), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["content"]),
+                            p[7] || (p[7] = _("div", { class: "grow" }, null, -1)),
+                            t(ie, {
+                              trigger: "click",
+                              shift: !0,
+                              "stop-click-propagation": !0
+                            }, {
+                              "menu-button": u(() => [
+                                t(H, {
+                                  "append-icon": "more_vert",
+                                  variant: "tertiary"
+                                })
+                              ]),
+                              default: u(() => [
+                                (r(), F(B, null, z(V, (J, me) => t(re, {
+                                  key: me,
+                                  onClick: (Ee) => J.onClick(W)
+                                }, {
+                                  label: u(() => [
+                                    _("p", {
+                                      class: U(
+                                        J.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                      )
+                                    }, L(J.label), 3)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["onClick"])), 64))
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 1
+                    }, 8, ["list"])
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), Be = { class: "flex flex-col bg-fm-color-neutral-white w-[400px]" }, Me = { class: "flex bg-fm-color-neutral-white w-[88px]" }, Oe = { class: "w-full overflow-y-auto" }, qe = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24",
+  style: { backgroundColor: "#F6F8FC" }
+}, De = /* @__PURE__ */ h({
+  __name: "ReportEditorDesktop",
+  props: /* @__PURE__ */ w({
+    hideConfiguration: { type: Boolean, required: !0, default: !1 }
+  }, {
+    modelValue: { required: !0, default: () => {
+    } },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ w(["hideConfiguration"], ["update:modelValue"]),
+  setup(c, { emit: n }) {
+    const o = R(c, "modelValue"), a = c, s = n;
+    return (C, e) => {
+      const f = m("FmCircularProgress"), v = m("FmButton");
+      return r(), F("div", null, [
+        o.value ? (r(), F(B, { key: 1 }, [
+          t(be, {
+            "model-value": !a.hideConfiguration
+          }, {
+            right: u(() => [
+              _("div", Be, [
+                o.value ? (r(), y(le, {
+                  key: 0,
+                  modelValue: o.value,
+                  "onUpdate:modelValue": e[0] || (e[0] = (i) => o.value = i),
+                  "hide-configuration": a.hideConfiguration,
+                  onHideConfiguration: e[1] || (e[1] = (i) => {
+                    s("hideConfiguration", i);
+                  })
+                }, null, 8, ["modelValue", "hide-configuration"])) : O("", !0)
+              ])
+            ]),
+            left: u(() => [
+              _("div", Me, [
+                t(v, {
+                  variant: "secondary",
+                  icon: "keyboard_double_arrow_right",
+                  "border-color": l(q).ColorPrimary,
+                  "text-color": l(q).ColorPrimary,
+                  class: "m-24 my-16",
+                  size: "md",
+                  onClick: e[2] || (e[2] = (i) => s("hideConfiguration", !a.hideConfiguration))
+                }, null, 8, ["border-color", "text-color"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value"]),
+          _("div", Oe, [
+            o.value.tiles.length > 0 ? (r(), F("div", qe, [
+              (r(!0), F(B, null, z(o.value.tiles, (i, k) => (r(), y(oe, {
+                key: `${l(Q)()}_${k}`,
+                "model-value": i,
+                index: k,
+                "hide-export": !0
+              }, null, 8, ["model-value", "index"]))), 128))
+            ])) : (r(), y(te, { key: 1 }))
+          ])
+        ], 64)) : (r(), y(f, { key: 0 }))
+      ]);
+    };
+  }
+}), Ne = {
+  key: 0,
+  class: "grid grid-cols-12 gap-[16px]"
+}, Ue = /* @__PURE__ */ h({
+  __name: "ReportEditorMobile",
+  props: /* @__PURE__ */ w({
+    hideConfiguration: { type: Boolean, required: !0, default: !1 }
+  }, {
+    modelValue: { required: !0, default: () => {
+    } },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ w(["hideConfiguration"], ["update:modelValue"]),
+  setup(c, { emit: n }) {
+    const o = R(c, "modelValue"), a = c, s = n;
+    return (C, e) => {
+      const f = m("FmCircularProgress"), v = m("FmCard");
+      return r(), F("div", null, [
+        o.value ? (r(), F(B, { key: 1 }, [
+          t(v, { class: "px-5 pb-28" }, {
+            default: u(() => [
+              o.value.tiles.length > 0 ? (r(), F("div", Ne, [
+                (r(!0), F(B, null, z(o.value.tiles, (i, k) => (r(), y(oe, {
+                  key: `${l(Q)()}_${k}`,
+                  "model-value": i,
+                  index: k,
+                  "hide-export": !0
+                }, null, 8, ["model-value", "index"]))), 128))
+              ])) : (r(), y(te, { key: 1 }))
+            ]),
+            _: 1
+          }),
+          o.value ? (r(), y(le, {
+            key: 0,
+            modelValue: o.value,
+            "onUpdate:modelValue": e[0] || (e[0] = (i) => o.value = i),
+            "hide-configuration": a.hideConfiguration,
+            onHideConfiguration: e[1] || (e[1] = (i) => {
+              s("hideConfiguration", i);
+            })
+          }, null, 8, ["modelValue", "hide-configuration"])) : O("", !0)
+        ], 64)) : (r(), y(f, { key: 0 }))
+      ]);
+    };
+  }
+}), Ye = /* @__PURE__ */ h({
+  __name: "ReportEditor",
+  setup(c) {
+    const n = Z(), o = ee(), a = j(), { promptLoader: s } = ke(), { currentReport: C, editingReport: e } = X(a), { breakpoints: f } = I(), v = N(() => {
+      var V;
+      return !((V = e.value) != null && V.editable);
+    }), i = N(() => {
+      var V;
+      return ((V = e.value) == null ? void 0 : V.name) ?? "New Report";
+    }), k = xe(), { promptMessage: b } = K(), $ = D(!1);
+    async function M() {
+      if (!e.value || e.value.tiles.length === 0) {
+        k.open({ message: "No Widget", type: "error" });
+        return;
+      }
+      const V = v.value ? "clone" : "save";
+      if (await b({
+        title: "Save report",
+        message: `Do you really want to ${V} ${i.value} ?`
+      }))
+        try {
+          await s(async () => {
+            if (v.value) {
+              const d = JSON.parse(JSON.stringify(e.value));
+              d.editable = !0, d.id = "", d.name = `${d.name} duplicate`, await a.createOrUpdateReport(d);
+            } else
+              e.value && await a.createOrUpdateReport(e.value);
+            n.push({
+              name: "reportView",
+              query: o.query
+            });
+          });
+        } catch (d) {
+          console.log(d), k.open({ message: `Failed to ${V} report`, type: "error" });
+        }
+    }
+    async function S() {
+      var x;
+      if (!e.value)
+        return;
+      await b({
+        title: "Report",
+        message: `Report ${(x = e.value) == null ? void 0 : x.name} is not saved, are you sure you want to quit?`
+      }) && (e.value = JSON.parse(JSON.stringify(C.value)), n.back());
+    }
+    return fe(() => {
+      e.value || n.push({ name: "reports" });
+    }), (V, x) => {
+      const d = m("FmChip"), p = m("FmButton");
+      return r(), y(Ve, null, {
+        default: u(() => [
+          t(Fe, null, {
+            title: u(() => [
+              _("p", {
+                class: U(`${l(f).sm || l(f).xs ? "hidden" : ""}`)
+              }, L(i.value), 3),
+              !l(e) || l(e).tiles.length <= 0 ? (r(), y(d, {
+                key: 0,
+                label: "Draft",
+                icon: "hexagon",
+                selectable: !1
+              })) : O("", !0)
+            ]),
+            button: u(() => [
+              t(p, {
+                label: "Cancel",
+                variant: "tertiary",
+                "text-color": l(q).TypoSecondary,
+                onClick: S
+              }, null, 8, ["text-color"]),
+              t(p, {
+                label: `${l(C) ? "Save" : "Add"} report`,
+                "prepend-icon": "download",
+                onClick: M
+              }, null, 8, ["label"])
+            ]),
+            _: 1
+          }),
+          l(e) ? (r(), y(G(l(f).lg || l(f).md ? De : Ue), {
+            key: 0,
+            modelValue: l(e),
+            "onUpdate:modelValue": x[0] || (x[0] = (T) => Y(e) ? e.value = T : null),
+            class: U(`${l(f).lg || l(f).md ? "flex" : ""} w-full`),
+            style: ve({ height: `calc( 100% - ${l(f).lg || l(f).md ? 72 : 64}px)` }),
+            "hide-configuration": $.value,
+            onHideConfiguration: x[1] || (x[1] = (T) => $.value = T)
+          }, null, 40, ["modelValue", "class", "style", "hide-configuration"])) : O("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  Ye as default
+};