@webx-ui/module-notifications 0.1.0 → 0.2.0

package/dist/NotificationsPage-qWdhMayl.js

@@ -0,0 +1,669 @@
+import { defineComponent as le, ref as m, computed as f, openBlock as p, createBlock as k, unref as a, isRef as We, withCtx as n, createVNode as s, createTextVNode as u, toDisplayString as o, watch as H, createElementBlock as J, createCommentVNode as T, createElementVNode as z, withModifiers as K } from "vue";
+import { useRoute as ze, useRouter as Ce } from "vue-router";
+import { useModal as Ne, WxDialog as $e, WxText as v, WxFormItem as A, WxSegmented as Be, WxSelect as E, WxSpace as Se, WxButton as Q, createModal as Te, WxAlert as Ue, WxTable as X, WxSwitch as Y, WxBadge as R, WxIcon as Me, toast as d, confirm as Z } from "@webx-ui/core";
+import { useTranslate as ne, useAdmin as je, useErrorText as qe, rowMenuWidth as ee, WxListScreen as Re, WxRowMenu as ae, WxDate as te } from "@webx-ui/module-admin";
+import { u as ie, c as Ae, _ as De } from "./index-DIeEPPSh.js";
+const Fe = /* @__PURE__ */ le({
+  name: "WxNotificationsNewChannel",
+  __name: "NewChannelDialog",
+  props: {
+    meta: {}
+  },
+  setup(D) {
+    const x = D, { open: w, resolve: b, dismiss: U } = Ne();
+    ie();
+    const y = ne("webx-notifications"), l = m(x.meta.providers[0]?.key ?? ""), c = m(null), V = f(
+      () => x.meta.providers.map((g) => ({ value: g.key, label: g.label, icon: g.icon }))
+    ), M = f(() => [
+      { value: "", label: y("panel.any-event") },
+      ...x.meta.events.map((g) => ({ value: g.key, label: g.label }))
+    ]);
+    function _() {
+      b({ provider: l.value, event: c.value === "" ? null : c.value });
+    }
+    return (g, r) => (p(), k(a($e), {
+      open: a(w),
+      "onUpdate:open": r[3] || (r[3] = (h) => We(w) ? w.value = h : null),
+      title: a(y)("panel.new-title"),
+      width: 460
+    }, {
+      footer: n(() => [
+        s(a(Se), { size: "sm" }, {
+          default: n(() => [
+            s(a(Q), {
+              variant: "outline",
+              onClick: r[2] || (r[2] = (h) => a(U)())
+            }, {
+              default: n(() => [
+                u(o(a(y)("panel.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            s(a(Q), {
+              type: "primary",
+              disabled: l.value === "",
+              onClick: _
+            }, {
+              default: n(() => [
+                u(o(a(y)("panel.new-create")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          _: 1
+        })
+      ]),
+      default: n(() => [
+        s(a(v), {
+          size: "sm",
+          tone: "muted"
+        }, {
+          default: n(() => [
+            u(o(a(y)("panel.new-help")), 1)
+          ]),
+          _: 1
+        }),
+        s(a(A), {
+          label: a(y)("panel.new-provider")
+        }, {
+          default: n(() => [
+            s(a(Be), {
+              modelValue: l.value,
+              "onUpdate:modelValue": r[0] || (r[0] = (h) => l.value = h),
+              options: V.value
+            }, null, 8, ["modelValue", "options"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        s(a(A), {
+          label: a(y)("panel.new-event")
+        }, {
+          default: n(() => [
+            s(a(E), {
+              "model-value": c.value ?? "",
+              options: M.value,
+              "onUpdate:modelValue": r[1] || (r[1] = (h) => c.value = h === "" ? null : String(h))
+            }, null, 8, ["model-value", "options"])
+          ]),
+          _: 1
+        }, 8, ["label"])
+      ]),
+      _: 1
+    }, 8, ["open", "title"]));
+  }
+}), Oe = {
+  key: 0,
+  class: "wx-notifications-list__note"
+}, Pe = { class: "wx-notifications-list__name" }, Ee = { class: "wx-notifications-list__text" }, Ie = {
+  key: 0,
+  class: "wx-notifications-list__last"
+}, Le = { class: "wx-notifications-list__text" }, Ge = { class: "wx-notifications-list__last" }, He = { class: "wx-notifications-list__details" }, Je = /* @__PURE__ */ le({
+  __name: "NotificationsPage",
+  props: {
+    base: { default: "/notifications" }
+  },
+  setup(D) {
+    const x = D, w = je(), b = Ae(w), U = ze(), y = Ce();
+    ie();
+    const l = ne("webx-notifications"), c = qe(), V = f(() => w.can("notifications.manage")), M = f(
+      () => w.state.manifest?.modules.find((e) => e.id === "notifications")?.title ?? l("module.title")
+    ), _ = f({
+      get: () => {
+        const e = U.query.view;
+        return e === "log" || e === "bin" ? e : "";
+      },
+      set: (e) => {
+        y.replace({
+          query: { ...U.query, view: e === "" ? void 0 : e, page: void 0 }
+        });
+      }
+    }), g = m(null), r = m([]), h = m([]), j = m("production"), F = m(!0), se = f(() => [
+      { value: "", label: l("panel.channels"), badge: r.value.length },
+      { value: "log", label: l("panel.log") },
+      { value: "bin", label: l("panel.bin"), badge: h.value.length || void 0 }
+    ]);
+    async function $() {
+      F.value = !0;
+      try {
+        const [e, i] = await Promise.all([b.channels(), b.channels({ trashed: !0 })]);
+        r.value = e.data, h.value = i.data, j.value = e.environment;
+      } catch (e) {
+        d.danger(c(e));
+      } finally {
+        F.value = !1;
+      }
+    }
+    $(), b.meta().then((e) => g.value = e).catch(() => {
+    });
+    const oe = Te(
+      Fe
+    );
+    async function ue() {
+      if (g.value === null) return;
+      const e = await oe({ meta: g.value });
+      e && y.push({
+        path: `${x.base}/channels/new`,
+        query: { provider: e.provider, ...e.event ? { event: e.event } : {} }
+      });
+    }
+    function I(e) {
+      y.push(`${x.base}/channels/${e.id}`);
+    }
+    async function re(e, i) {
+      try {
+        const t = await b.save(e.id, { enabled: i });
+        r.value = r.value.map((W) => W.id === e.id ? t.channel : W), d.success(l(i ? "panel.enabled" : "panel.disabled"));
+      } catch (t) {
+        const W = t.body;
+        d.danger(W?.errors ? Object.values(W.errors).flat().join(" ") : c(t));
+      }
+    }
+    async function de(e) {
+      try {
+        const i = await b.copy(e.id);
+        d.success(l("panel.copied", { name: i.channel.name })), await $();
+      } catch (i) {
+        d.danger(c(i));
+      }
+    }
+    async function ce(e) {
+      if (await Z({
+        title: l("panel.delete-title", { title: e.name }),
+        message: l("panel.delete-text"),
+        confirmText: l("panel.delete"),
+        cancelText: l("panel.cancel"),
+        tone: "danger"
+      }))
+        try {
+          await b.remove(e.id), d.success(l("panel.deleted")), await $();
+        } catch (t) {
+          d.danger(c(t));
+        }
+    }
+    async function pe(e) {
+      try {
+        await b.restore(e.id), d.success(l("panel.restored")), await $();
+      } catch (i) {
+        d.danger(c(i));
+      }
+    }
+    async function ve(e) {
+      if (await Z({
+        title: l("panel.purge-title", { title: e.name }),
+        message: l("panel.purge-text"),
+        confirmText: l("panel.purge"),
+        cancelText: l("panel.cancel"),
+        tone: "danger"
+      }))
+        try {
+          await b.purge(e.id), d.success(l("panel.purged")), await $();
+        } catch (t) {
+          d.danger(c(t));
+        }
+    }
+    function me(e) {
+      return _.value === "bin" ? V.value ? [
+        {
+          key: "restore",
+          label: l("panel.restore"),
+          icon: "refresh",
+          run: () => {
+            pe(e);
+          }
+        },
+        {
+          key: "purge",
+          label: l("panel.purge"),
+          icon: "trash",
+          danger: !0,
+          run: () => {
+            ve(e);
+          }
+        }
+      ] : [] : [
+        { key: "edit", label: l("panel.edit"), icon: "edit", run: () => I(e) },
+        ...V.value ? [
+          {
+            key: "copy",
+            label: l("panel.copy"),
+            icon: "copy",
+            run: () => {
+              de(e);
+            }
+          },
+          {
+            key: "delete",
+            label: l("panel.delete"),
+            icon: "trash",
+            danger: !0,
+            run: () => {
+              ce(e);
+            }
+          }
+        ] : []
+      ];
+    }
+    const fe = f(() => [
+      { key: "name", label: l("module.channel"), minWidth: 160 },
+      { key: "event", label: l("panel.new-event"), width: 200, hideBelow: 720 },
+      { key: "last_delivery", label: l("panel.column-status"), width: 170, hideBelow: 560 },
+      ..._.value === "bin" ? [] : [{ key: "enabled", label: "", width: 64, align: "center" }],
+      { key: "actions", label: "", width: ee, align: "right" }
+    ]), be = f(() => _.value === "bin" ? h.value : r.value);
+    function ye(e) {
+      return e.icon ?? (e.provider === "telegram" ? "send" : "mail");
+    }
+    const O = m(null), P = m(!1), C = m(""), N = m(""), B = m(!0), S = m(void 0);
+    async function q(e) {
+      S.value = e ?? S.value, P.value = !0;
+      try {
+        O.value = await b.deliveries({
+          page: S.value?.page ?? 1,
+          per_page: S.value?.perPage,
+          status: C.value === "" ? null : C.value,
+          channel: N.value === "" ? null : N.value,
+          tests: B.value
+        }), j.value = O.value.environment;
+      } catch (i) {
+        d.danger(c(i));
+      } finally {
+        P.value = !1;
+      }
+    }
+    H(
+      _,
+      (e) => {
+        e === "log" && q();
+      },
+      { immediate: !0 }
+    ), H(
+      [C, N, B],
+      () => {
+        q({ ...S.value ?? {}, page: 1 });
+      }
+    );
+    const ge = f(
+      () => +(C.value !== "") + +(N.value !== "") + +!B.value
+    ), _e = f(() => [
+      { value: "", label: l("panel.all-statuses") },
+      ...["queued", "sent", "failed", "skipped"].map((e) => ({
+        value: e,
+        label: l(`module.statuses.${e}`)
+      }))
+    ]), he = f(() => [
+      { value: "", label: l("panel.all-channels") },
+      ...r.value.map((e) => ({ value: e.id, label: e.name }))
+    ]), ke = f(() => [
+      { key: "created_at", label: l("panel.column-when"), width: 150 },
+      { key: "recipient", label: l("panel.column-recipient"), minWidth: 160 },
+      { key: "channel_name", label: l("panel.column-channel"), width: 180, hideBelow: 760 },
+      { key: "status", label: l("panel.column-status"), width: 140 },
+      { key: "attempts", label: l("panel.column-attempts"), width: 90, align: "right", hideBelow: 900 },
+      { key: "actions", label: "", width: ee, align: "right" }
+    ]), L = {
+      sent: "success",
+      failed: "danger",
+      queued: "warning",
+      skipped: "default"
+    };
+    async function xe(e) {
+      try {
+        await b.retry(e.id), d.success(l("panel.retried")), await q();
+      } catch (i) {
+        d.danger(c(i));
+      }
+    }
+    function we(e) {
+      const i = [];
+      return e.subject_url && i.push({
+        key: "open",
+        label: l("panel.open-subject"),
+        icon: "external-link",
+        href: e.subject_url,
+        target: "_self"
+      }), e.channel_id !== null && i.push({
+        key: "channel",
+        label: l("panel.edit"),
+        icon: "edit",
+        run: () => {
+          y.push(`${x.base}/channels/${e.channel_id}`);
+        }
+      }), e.retryable && V.value && i.push({
+        key: "retry",
+        label: l("panel.retry"),
+        icon: "refresh",
+        run: () => {
+          xe(e);
+        }
+      }), i;
+    }
+    function G(e) {
+      return e.error ? e.error : e.reason ? l(`module.reasons.${e.reason}`) : null;
+    }
+    const Ve = f(
+      () => V.value ? [
+        {
+          key: "new",
+          label: l("panel.new"),
+          icon: "plus",
+          primary: !0,
+          disabled: g.value === null,
+          run: () => {
+            ue();
+          }
+        }
+      ] : []
+    );
+    return (e, i) => (p(), k(a(Re), {
+      view: _.value,
+      "onUpdate:view": i[6] || (i[6] = (t) => _.value = t),
+      title: M.value,
+      views: se.value,
+      actions: Ve.value
+    }, {
+      default: n(() => [
+        j.value !== "production" ? (p(), J("div", Oe, [
+          s(a(Ue), {
+            type: "info",
+            variant: "soft",
+            description: a(l)("panel.environment", { environment: j.value })
+          }, null, 8, ["description"])
+        ])) : T("", !0),
+        _.value !== "log" ? (p(), k(a(X), {
+          key: 1,
+          data: be.value,
+          columns: fe.value,
+          "row-key": "id",
+          hover: "",
+          clickable: "",
+          flush: "",
+          layout: "fixed",
+          loading: F.value,
+          "cards-below": 0,
+          pagination: !1,
+          "empty-text": _.value === "bin" ? a(l)("panel.empty-bin") : a(l)("panel.empty-channels-text"),
+          "aria-label": M.value,
+          onRowClick: i[2] || (i[2] = (t) => _.value !== "bin" && I(t))
+        }, {
+          "cell-name": n(({ row: t }) => [
+            z("span", Pe, [
+              s(a(Me), {
+                name: ye(t),
+                class: "wx-notifications-list__icon"
+              }, null, 8, ["name"]),
+              z("span", Ee, [
+                s(a(v), {
+                  truncate: "",
+                  weight: "medium"
+                }, {
+                  default: n(() => [
+                    u(o(t.name), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                s(a(v), {
+                  size: "sm",
+                  tone: "muted",
+                  truncate: ""
+                }, {
+                  default: n(() => [
+                    u(o(t.provider_label) + " · " + o(a(l)("panel.recipients", { count: String(t.recipients) })), 1)
+                  ]),
+                  _: 2
+                }, 1024)
+              ])
+            ])
+          ]),
+          "cell-event": n(({ row: t }) => [
+            t.event_declared ? (p(), k(a(v), {
+              key: 1,
+              size: "sm",
+              tone: t.event ? "default" : "muted",
+              truncate: ""
+            }, {
+              default: n(() => [
+                u(o(t.event_label ?? a(l)("panel.any-event")), 1)
+              ]),
+              _: 2
+            }, 1032, ["tone"])) : (p(), k(a(R), {
+              key: 0,
+              type: "warning"
+            }, {
+              default: n(() => [
+                u(o(a(l)("panel.event-undeclared")), 1)
+              ]),
+              _: 1
+            }))
+          ]),
+          "cell-last_delivery": n(({ row: t }) => [
+            t.last_delivery ? (p(), J("span", Ie, [
+              s(a(R), {
+                type: L[t.last_delivery.status],
+                dot: ""
+              }, {
+                default: n(() => [
+                  u(o(a(l)(`module.statuses.${t.last_delivery.status}`)), 1)
+                ]),
+                _: 2
+              }, 1032, ["type"]),
+              s(a(te), {
+                value: t.last_delivery.at,
+                class: "wx-notifications-list__when"
+              }, null, 8, ["value"])
+            ])) : (p(), k(a(v), {
+              key: 1,
+              size: "sm",
+              tone: "muted"
+            }, {
+              default: n(() => [
+                u(o(a(l)("panel.never-sent")), 1)
+              ]),
+              _: 1
+            }))
+          ]),
+          "cell-enabled": n(({ row: t }) => [
+            z("span", {
+              onClick: i[0] || (i[0] = K(() => {
+              }, ["stop"]))
+            }, [
+              s(a(Y), {
+                "model-value": t.enabled,
+                disabled: !V.value,
+                "aria-label": a(l)("panel.enable"),
+                size: "sm",
+                "onUpdate:modelValue": (W) => re(t, !!W)
+              }, null, 8, ["model-value", "disabled", "aria-label", "onUpdate:modelValue"])
+            ])
+          ]),
+          "cell-actions": n(({ row: t }) => [
+            z("span", {
+              onClick: i[1] || (i[1] = K(() => {
+              }, ["stop"]))
+            }, [
+              s(a(ae), {
+                actions: me(t),
+                label: t.name
+              }, null, 8, ["actions", "label"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["data", "columns", "loading", "empty-text", "aria-label"])) : (p(), k(a(X), {
+          key: 2,
+          data: O.value,
+          columns: ke.value,
+          "row-key": "id",
+          hover: "",
+          flush: "",
+          layout: "fixed",
+          expandable: "",
+          loading: P.value,
+          "cards-below": 0,
+          "filters-count": ge.value,
+          "filters-label": a(l)("panel.filters"),
+          "empty-text": a(l)("panel.log-empty"),
+          "aria-label": a(l)("panel.log"),
+          onStateChange: q
+        }, {
+          filters: n(() => [
+            s(a(A), {
+              label: a(l)("panel.column-status")
+            }, {
+              default: n(() => [
+                s(a(E), {
+                  modelValue: C.value,
+                  "onUpdate:modelValue": i[3] || (i[3] = (t) => C.value = t),
+                  options: _e.value,
+                  size: "sm"
+                }, null, 8, ["modelValue", "options"])
+              ]),
+              _: 1
+            }, 8, ["label"]),
+            s(a(A), {
+              label: a(l)("panel.column-channel")
+            }, {
+              default: n(() => [
+                s(a(E), {
+                  modelValue: N.value,
+                  "onUpdate:modelValue": i[4] || (i[4] = (t) => N.value = t),
+                  options: he.value,
+                  size: "sm"
+                }, null, 8, ["modelValue", "options"])
+              ]),
+              _: 1
+            }, 8, ["label"]),
+            s(a(Y), {
+              modelValue: B.value,
+              "onUpdate:modelValue": i[5] || (i[5] = (t) => B.value = t),
+              size: "sm"
+            }, {
+              default: n(() => [
+                u(o(a(l)("panel.with-tests")), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          "cell-created_at": n(({ row: t }) => [
+            s(a(te), {
+              value: t.sent_at ?? t.created_at
+            }, null, 8, ["value"])
+          ]),
+          "cell-recipient": n(({ row: t }) => [
+            z("span", Le, [
+              s(a(v), { truncate: "" }, {
+                default: n(() => [
+                  u(o(t.recipient_label ?? t.recipient), 1)
+                ]),
+                _: 2
+              }, 1024),
+              s(a(v), {
+                size: "sm",
+                tone: "muted",
+                truncate: ""
+              }, {
+                default: n(() => [
+                  u(o(t.event_label ?? t.event), 1)
+                ]),
+                _: 2
+              }, 1024)
+            ])
+          ]),
+          "cell-channel_name": n(({ row: t }) => [
+            s(a(v), {
+              size: "sm",
+              truncate: "",
+              tone: t.channel_id === null ? "muted" : "default"
+            }, {
+              default: n(() => [
+                u(o(t.channel_name) + o(t.channel_id === null ? ` (${a(l)("panel.channel-gone")})` : ""), 1)
+              ]),
+              _: 2
+            }, 1032, ["tone"])
+          ]),
+          "cell-status": n(({ row: t }) => [
+            z("span", Ge, [
+              s(a(R), {
+                type: L[t.status],
+                dot: ""
+              }, {
+                default: n(() => [
+                  u(o(a(l)(`module.statuses.${t.status}`)), 1)
+                ]),
+                _: 2
+              }, 1032, ["type"]),
+              t.is_test ? (p(), k(a(R), { key: 0 }, {
+                default: n(() => [
+                  u(o(a(l)("panel.test-mark")), 1)
+                ]),
+                _: 1
+              })) : T("", !0)
+            ])
+          ]),
+          "cell-attempts": n(({ row: t }) => [
+            s(a(v), { size: "sm" }, {
+              default: n(() => [
+                u(o(t.attempts), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ]),
+          "cell-actions": n(({ row: t }) => [
+            s(a(ae), {
+              actions: we(t),
+              label: t.recipient
+            }, null, 8, ["actions", "label"])
+          ]),
+          expanded: n(({ row: t }) => [
+            z("div", He, [
+              G(t) ? (p(), k(a(v), {
+                key: 0,
+                size: "sm",
+                tone: t.status === "failed" ? "danger" : "muted"
+              }, {
+                default: n(() => [
+                  u(o(G(t)), 1)
+                ]),
+                _: 2
+              }, 1032, ["tone"])) : T("", !0),
+              t.unknown_variables.length > 0 ? (p(), k(a(v), {
+                key: 1,
+                size: "sm",
+                tone: "muted"
+              }, {
+                default: n(() => [
+                  u(o(a(l)("panel.unknown-variables", { names: t.unknown_variables.join(", ") })), 1)
+                ]),
+                _: 2
+              }, 1024)) : T("", !0),
+              t.truncated ? (p(), k(a(v), {
+                key: 2,
+                size: "sm",
+                tone: "muted"
+              }, {
+                default: n(() => [
+                  u(o(a(l)("panel.cut-mark")), 1)
+                ]),
+                _: 1
+              })) : T("", !0),
+              s(a(v), {
+                size: "sm",
+                tone: "muted",
+                mono: ""
+              }, {
+                default: n(() => [
+                  u(o(t.recipient), 1)
+                ]),
+                _: 2
+              }, 1024)
+            ])
+          ]),
+          _: 1
+        }, 8, ["data", "columns", "loading", "filters-count", "filters-label", "empty-text", "aria-label"]))
+      ]),
+      _: 1
+    }, 8, ["view", "title", "views", "actions"]));
+  }
+}), ea = /* @__PURE__ */ De(Je, [["__scopeId", "data-v-69806e68"]]);
+export {
+  ea as default
+};
+//# sourceMappingURL=NotificationsPage-qWdhMayl.js.map