@feedmepos/mf-report 5.4.15-beta.1 → 5.4.15-beta.3

package/dist/ReportEditor-DkzFUgbO.js

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