@webx-ui/module-inbox 0.7.0 → 0.8.0

package/dist/SubmissionPage-DVNKYpWH.js

@@ -0,0 +1,640 @@
+import { defineComponent as qe, ref as C, computed as p, watch as Se, openBlock as n, createElementBlock as m, createVNode as i, unref as a, withCtx as s, createBlock as c, createElementVNode as f, Fragment as z, renderList as W, toDisplayString as o, createTextVNode as d, createCommentVNode as y } from "vue";
+import { useRoute as Te, useRouter as Ce } from "vue-router";
+import { useAdmin as Ne, useTranslate as J, useErrorText as $e, WxScreenHead as Ve, WxNotes as Ae, WxDate as Q } from "@webx-ui/module-admin";
+import { useLocales as Be, localizedValue as Ie, toast as h, confirm as De, WxAction as X, WxSkeleton as Ee, WxCard as N, WxEmpty as Re, WxDescriptions as Y, WxDescriptionsItem as $, WxFileCard as Ue, WxAlert as Z, WxTabs as je, WxTab as V, WxTimeline as Fe, WxTimelineItem as Le, WxText as v, WxBadge as R, WxButton as ee, WxSelect as ae } from "@webx-ui/core";
+import { c as Me, u as Oe, d as Pe, _ as He } from "./index-BQj2UlUS.js";
+const Ke = { class: "wx-submission" }, Ge = {
+  key: 1,
+  class: "wx-submission__panes"
+}, Je = { class: "wx-submission__main" }, Qe = { class: "wx-submission__value" }, Xe = { class: "wx-submission__files" }, Ye = { class: "wx-submission__by" }, Ze = { class: "wx-submission__fields" }, ea = ["href"], aa = {
+  key: 1,
+  class: "wx-submission__detail"
+}, ta = { class: "wx-submission__detail" }, la = {
+  key: 5,
+  class: "wx-submission__recipients"
+}, sa = { key: 6 }, na = { class: "wx-submission__fields" }, ia = {
+  key: 1,
+  class: "wx-submission__recipients"
+}, ua = { class: "wx-submission__channel-text" }, oa = { key: 2 }, ra = { class: "wx-submission__aside" }, da = { class: "wx-submission__fields" }, ca = { class: "wx-submission__field" }, pa = { class: "wx-submission__field" }, ma = /* @__PURE__ */ qe({
+  __name: "SubmissionPage",
+  props: {
+    base: { default: "/inbox" }
+  },
+  setup(te) {
+    const U = te, j = Ne(), g = Me(j), _ = Te(), S = Ce(), le = Be();
+    Oe();
+    const t = J("webx-inbox"), se = J("webx-admin"), w = $e(), u = C(null), A = C([]), F = C([]), B = C(!0), x = p(() => j.can("inbox.update")), k = p(() => Number(_.params.id)), ne = p(() => ({
+      view: typeof _.query.view == "string" ? _.query.view : void 0,
+      search: typeof _.query.search == "string" ? _.query.search : void 0,
+      assignee: typeof _.query.assignee == "string" ? _.query.assignee : void 0
+    })), T = p(() => ({ path: U.base, query: { ..._.query } })), ie = p(
+      () => A.value.map((e) => ({ value: e.id, label: L(e) }))
+    ), ue = p(
+      () => F.value.map((e) => ({ value: e.id, label: e.name }))
+    ), L = Pe(), I = p(() => t("panel.submission", { id: String(k.value) })), M = p(() => {
+      const e = u.value?.form;
+      return e === void 0 ? "" : Ie(e.title ?? {}, le.active.value, e.slug ?? "");
+    }), O = p(() => (u.value?.values ?? []).find((l) => l.type === "email" && (l.value ?? "") !== "")?.value ?? null), P = p(() => {
+      if (O.value === null) return null;
+      const e = encodeURIComponent(`${M.value} — ${I.value}`);
+      return `mailto:${O.value}?subject=${e}`;
+    });
+    async function D() {
+      B.value = !0;
+      try {
+        u.value = await g.submission(k.value, ne.value);
+      } catch (e) {
+        h.danger(w(e)), S.replace(T.value);
+      } finally {
+        B.value = !1;
+      }
+    }
+    async function oe() {
+      try {
+        A.value = await g.statuses(), x.value && (F.value = await g.recipients());
+      } catch (e) {
+        h.danger(w(e));
+      }
+    }
+    Se(k, () => {
+      D();
+    }, { immediate: !0 }), oe();
+    async function H(e) {
+      try {
+        u.value = await g.saveSubmission(k.value, e), h.success(t("panel.saved"));
+      } catch (r) {
+        h.danger(w(r)), await D();
+      }
+    }
+    function re(e) {
+      typeof e == "number" && H({ status_id: e });
+    }
+    function de(e) {
+      H({ assignee_id: typeof e == "number" ? e : null });
+    }
+    const ce = p(() => {
+      const e = [];
+      return P.value && e.push({
+        key: "reply",
+        label: t("panel.reply"),
+        icon: "mail",
+        primary: !0,
+        href: P.value,
+        target: "_self"
+      }), x.value && u.value !== null && e.push(
+        {
+          key: "unread",
+          icon: "eye-off",
+          label: t("panel.mark-unread"),
+          menu: !0,
+          run: () => {
+            _e();
+          }
+        },
+        {
+          key: "notify",
+          icon: "mail",
+          label: t("panel.notify-again"),
+          menu: !0,
+          run: () => {
+            E();
+          }
+        },
+        {
+          key: "delete",
+          icon: "trash",
+          label: t("panel.delete"),
+          danger: !0,
+          run: () => {
+            be();
+          }
+        }
+      ), e;
+    });
+    async function E() {
+      try {
+        u.value = await g.notifySubmission(k.value), h.success(t("panel.notify-sent-again"));
+      } catch (e) {
+        h.danger(w(e));
+      }
+    }
+    const b = p(() => u.value?.notification ?? null);
+    function pe(e) {
+      return t(`panel.notify-recipient-${e}`);
+    }
+    const q = p(() => u.value?.channels ?? null), me = p(() => (q.value ?? []).some((e) => e.status === "failed")), ve = p(() => (q.value ?? []).some((e) => e.retryable));
+    function fe(e) {
+      return e.status === "failed" ? "danger" : e.status === "sent" ? "success" : e.status === "skipped" ? "warning" : "default";
+    }
+    async function _e() {
+      try {
+        await g.massSubmissions({ ids: [k.value], action: "unread" }), S.push(T.value);
+      } catch (e) {
+        h.danger(w(e));
+      }
+    }
+    async function be() {
+      if (await De({
+        title: t("panel.delete-submission-title"),
+        message: t("panel.delete-submission-text"),
+        confirmText: t("panel.delete"),
+        cancelText: t("panel.cancel"),
+        tone: "danger"
+      }))
+        try {
+          await g.removeSubmission(k.value), h.success(t("panel.deleted")), S.push(T.value);
+        } catch (r) {
+          h.danger(w(r));
+        }
+    }
+    function K(e) {
+      e !== null && S.push({ path: `${U.base}/submissions/${e}`, query: { ..._.query } });
+    }
+    function ye(e) {
+      const r = A.value.find((l) => l.key === e);
+      return r === void 0 ? e : L(r);
+    }
+    const he = p(
+      () => u.value?.events?.some((e) => e.type === "no_recipients") ?? !1
+    );
+    function ge(e) {
+      switch (e.type) {
+        case "created":
+          return t("panel.event-created");
+        case "status":
+          return t("panel.event-status", { to: ye(e.to ?? "") });
+        case "assignee":
+          return e.to === null || e.to === "" ? t("panel.event-unassigned") : t("panel.event-assignee", { to: e.to });
+        case "note":
+          return t("panel.event-note");
+        case "notified":
+          return t("panel.event-notified");
+        // A handler of `webx-inbox.handlers`: `from` is its class, shown by its own short name.
+        case "handled":
+          return t("panel.event-handled", { name: G(e.from) });
+        case "handler_error":
+          return t("panel.event-handler-error", {
+            name: G(e.from),
+            error: e.to ?? ""
+          });
+        case "no_recipients":
+          return t("panel.event-no-recipients");
+        case "notify_queued":
+          return t("panel.event-notify-queued");
+        case "notify_failed":
+          return t("panel.event-notify-failed", { to: e.to ?? "" });
+        // An answer corrected by hand: named by the label it was asked under, when it still has one.
+        case "value":
+          return t("panel.event-value", {
+            field: xe(e.field ?? ""),
+            from: e.from ?? "",
+            to: e.to ?? ""
+          });
+        default:
+          return e.type;
+      }
+    }
+    function xe(e) {
+      return u.value?.values.find((l) => l.name === e)?.label || e;
+    }
+    function G(e) {
+      return (e ?? "").split("\\").pop() ?? "";
+    }
+    function ke(e) {
+      return `${Math.max(1, Math.round(e / 1024))} KB`;
+    }
+    const we = p(() => {
+      const e = u.value?.meta ?? {}, r = [];
+      typeof e.page == "string" && e.page !== "" && r.push({ label: t("panel.meta-page"), value: e.page, link: !0 });
+      const l = u.value?.placement;
+      typeof l == "string" && l !== "" && r.push({ label: t("panel.meta-placement"), value: l }), typeof e.referrer == "string" && e.referrer !== "" && r.push({ label: t("panel.meta-referrer"), value: e.referrer, link: !0 });
+      for (const [ze, We] of Object.entries(e.utm ?? {}))
+        r.push({ label: ze, value: String(We) });
+      return typeof e.locale == "string" && e.locale !== "" && r.push({ label: t("panel.meta-locale"), value: e.locale }), typeof e.ip == "string" && e.ip !== "" && r.push({ label: t("panel.meta-ip"), value: e.ip }), typeof e.user_agent == "string" && e.user_agent !== "" && r.push({ label: t("panel.meta-agent"), value: e.user_agent }), r;
+    });
+    return (e, r) => (n(), m("div", Ke, [
+      i(a(Ve), {
+        title: I.value,
+        subtitle: M.value,
+        back: T.value,
+        actions: ce.value
+      }, {
+        extra: s(() => [
+          i(a(X), {
+            icon: "chevron-left",
+            size: "lg",
+            title: a(t)("panel.previous"),
+            disabled: !u.value?.previous_id,
+            onClick: r[0] || (r[0] = (l) => K(u.value?.previous_id ?? null))
+          }, null, 8, ["title", "disabled"]),
+          i(a(X), {
+            icon: "chevron-right",
+            size: "lg",
+            title: a(t)("panel.next"),
+            disabled: !u.value?.next_id,
+            onClick: r[1] || (r[1] = (l) => K(u.value?.next_id ?? null))
+          }, null, 8, ["title", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["title", "subtitle", "back", "actions"]),
+      B.value ? (n(), c(a(Ee), {
+        key: 0,
+        rows: 6
+      })) : u.value ? (n(), m("div", Ge, [
+        f("div", Je, [
+          i(a(N), {
+            title: a(t)("panel.answers")
+          }, {
+            default: s(() => [
+              u.value.values.length === 0 ? (n(), c(a(Re), {
+                key: 0,
+                size: "sm",
+                description: a(t)("panel.no-answers")
+              }, null, 8, ["description"])) : (n(), c(a(Y), {
+                key: 1,
+                columns: 1,
+                layout: "vertical"
+              }, {
+                default: s(() => [
+                  (n(!0), m(z, null, W(u.value.values, (l) => (n(), c(a($), {
+                    key: l.id,
+                    label: l.label ?? l.name
+                  }, {
+                    default: s(() => [
+                      f("p", Qe, o(l.value || "—"), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["label"]))), 128))
+                ]),
+                _: 1
+              }))
+            ]),
+            _: 1
+          }, 8, ["title"]),
+          u.value.files.length > 0 ? (n(), c(a(N), {
+            key: 0,
+            title: a(t)("panel.attachments")
+          }, {
+            default: s(() => [
+              f("div", Xe, [
+                (n(!0), m(z, null, W(u.value.files, (l) => (n(), c(a(Ue), {
+                  key: l.id,
+                  name: l.name,
+                  type: l.mime ?? void 0,
+                  "download-url": l.url,
+                  "download-label": a(t)("panel.download"),
+                  size: "sm"
+                }, {
+                  meta: s(() => [
+                    d(o(ke(l.size)), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["name", "type", "download-url", "download-label"]))), 128))
+              ])
+            ]),
+            _: 1
+          }, 8, ["title"])) : y("", !0),
+          me.value ? (n(), c(a(Z), {
+            key: 1,
+            type: "warning",
+            closable: !1,
+            title: a(t)("panel.channels-failed")
+          }, null, 8, ["title"])) : y("", !0),
+          i(a(N), { class: "wx-submission__more" }, {
+            default: s(() => [
+              i(a(je), {
+                variant: "pill",
+                "aria-label": I.value
+              }, {
+                default: s(() => [
+                  i(a(V), {
+                    value: "notes",
+                    label: a(se)("notes.title")
+                  }, {
+                    default: s(() => [
+                      i(a(Ae), {
+                        id: u.value.id,
+                        type: "inbox_submission",
+                        title: "",
+                        can: x.value,
+                        onChange: D
+                      }, null, 8, ["id", "can"])
+                    ]),
+                    _: 1
+                  }, 8, ["label"]),
+                  i(a(V), {
+                    value: "log",
+                    label: a(t)("panel.log")
+                  }, {
+                    default: s(() => [
+                      i(a(Fe), { size: "sm" }, {
+                        default: s(() => [
+                          (n(!0), m(z, null, W(u.value.events, (l) => (n(), c(a(Le), {
+                            key: l.id
+                          }, {
+                            default: s(() => [
+                              i(a(v), {
+                                size: "sm",
+                                as: "p",
+                                class: "wx-submission__event"
+                              }, {
+                                default: s(() => [
+                                  d(o(ge(l)), 1)
+                                ]),
+                                _: 2
+                              }, 1024),
+                              f("p", Ye, [
+                                i(a(v), {
+                                  size: "sm",
+                                  tone: "muted"
+                                }, {
+                                  default: s(() => [
+                                    d(o(l.author?.name ?? a(t)("panel.system")), 1)
+                                  ]),
+                                  _: 2
+                                }, 1024),
+                                i(a(Q), {
+                                  value: l.created_at
+                                }, null, 8, ["value"])
+                              ])
+                            ]),
+                            _: 2
+                          }, 1024))), 128))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["label"]),
+                  i(a(V), {
+                    value: "details",
+                    label: a(t)("panel.details")
+                  }, {
+                    default: s(() => [
+                      f("div", Ze, [
+                        i(a(Y), {
+                          columns: 1,
+                          layout: "vertical",
+                          size: "sm"
+                        }, {
+                          default: s(() => [
+                            i(a($), {
+                              label: a(t)("panel.received")
+                            }, {
+                              default: s(() => [
+                                i(a(Q), {
+                                  value: u.value.created_at,
+                                  tone: "default"
+                                }, null, 8, ["value"])
+                              ]),
+                              _: 1
+                            }, 8, ["label"]),
+                            i(a($), {
+                              label: a(t)("panel.meta-source")
+                            }, {
+                              default: s(() => [
+                                i(a(R), {
+                                  type: u.value.source === "panel" ? "info" : "default"
+                                }, {
+                                  default: s(() => [
+                                    d(o(u.value.source === "panel" ? a(t)("panel.source-panel") : a(t)("panel.source-web")), 1)
+                                  ]),
+                                  _: 1
+                                }, 8, ["type"])
+                              ]),
+                              _: 1
+                            }, 8, ["label"]),
+                            (n(!0), m(z, null, W(we.value, (l) => (n(), c(a($), {
+                              key: l.label,
+                              label: l.label
+                            }, {
+                              default: s(() => [
+                                l.link ? (n(), m("a", {
+                                  key: 0,
+                                  href: l.value,
+                                  target: "_blank",
+                                  rel: "noreferrer"
+                                }, o(l.value), 9, ea)) : (n(), m("span", aa, o(l.value), 1))
+                              ]),
+                              _: 2
+                            }, 1032, ["label"]))), 128))
+                          ]),
+                          _: 1
+                        }),
+                        b.value?.state === "failed" ? (n(), c(a(Z), {
+                          key: 0,
+                          type: "warning",
+                          closable: !1,
+                          title: a(t)("panel.notify-failed")
+                        }, {
+                          default: s(() => [
+                            f("span", ta, o(b.value.error), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["title"])) : b.value?.state === "queued" ? (n(), c(a(v), {
+                          key: 1,
+                          size: "sm",
+                          tone: "muted"
+                        }, {
+                          default: s(() => [
+                            d(o(a(t)("panel.notify-queued")), 1)
+                          ]),
+                          _: 1
+                        })) : b.value?.state === "delivered" ? (n(), c(a(v), {
+                          key: 2,
+                          size: "sm",
+                          tone: "muted"
+                        }, {
+                          default: s(() => [
+                            d(o(a(t)("panel.notified")), 1)
+                          ]),
+                          _: 1
+                        })) : he.value ? (n(), c(a(v), {
+                          key: 3,
+                          size: "sm",
+                          tone: "muted"
+                        }, {
+                          default: s(() => [
+                            d(o(a(t)("panel.notified-nobody")), 1)
+                          ]),
+                          _: 1
+                        })) : (n(), c(a(v), {
+                          key: 4,
+                          size: "sm",
+                          tone: "muted"
+                        }, {
+                          default: s(() => [
+                            d(o(a(t)("panel.not-notified")), 1)
+                          ]),
+                          _: 1
+                        })),
+                        b.value && b.value.recipients.length > 0 ? (n(), m("ul", la, [
+                          (n(!0), m(z, null, W(b.value.recipients, (l) => (n(), m("li", {
+                            key: l.address
+                          }, [
+                            i(a(v), { size: "sm" }, {
+                              default: s(() => [
+                                d(o(l.address), 1)
+                              ]),
+                              _: 2
+                            }, 1024),
+                            i(a(R), {
+                              type: l.state === "failed" ? "danger" : l.state === "delivered" ? "success" : "default"
+                            }, {
+                              default: s(() => [
+                                d(o(pe(l.state)), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["type"])
+                          ]))), 128))
+                        ])) : y("", !0),
+                        x.value && (b.value?.state === "failed" || b.value?.state === "queued") ? (n(), m("div", sa, [
+                          i(a(ee), {
+                            size: "sm",
+                            onClick: E
+                          }, {
+                            default: s(() => [
+                              d(o(a(t)("panel.notify-again")), 1)
+                            ]),
+                            _: 1
+                          })
+                        ])) : y("", !0)
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["label"]),
+                  q.value ? (n(), c(a(V), {
+                    key: 0,
+                    value: "channels",
+                    label: a(t)("panel.channels")
+                  }, {
+                    default: s(() => [
+                      f("div", na, [
+                        q.value.length === 0 ? (n(), c(a(v), {
+                          key: 0,
+                          size: "sm",
+                          tone: "muted"
+                        }, {
+                          default: s(() => [
+                            d(o(a(t)("panel.channels-none")), 1)
+                          ]),
+                          _: 1
+                        })) : (n(), m("ul", ia, [
+                          (n(!0), m(z, null, W(q.value, (l) => (n(), m("li", {
+                            key: l.id,
+                            class: "wx-submission__channel"
+                          }, [
+                            f("div", ua, [
+                              i(a(v), { size: "sm" }, {
+                                default: s(() => [
+                                  d(o(l.channel), 1)
+                                ]),
+                                _: 2
+                              }, 1024),
+                              l.recipient !== "" ? (n(), c(a(v), {
+                                key: 0,
+                                size: "sm",
+                                tone: "muted"
+                              }, {
+                                default: s(() => [
+                                  d(o(l.recipient_label ?? l.recipient), 1)
+                                ]),
+                                _: 2
+                              }, 1024)) : y("", !0),
+                              l.error ?? l.reason_label ? (n(), c(a(v), {
+                                key: 1,
+                                size: "sm",
+                                tone: "muted",
+                                class: "wx-submission__detail"
+                              }, {
+                                default: s(() => [
+                                  d(o(l.error ?? l.reason_label), 1)
+                                ]),
+                                _: 2
+                              }, 1024)) : y("", !0)
+                            ]),
+                            i(a(R), {
+                              type: fe(l)
+                            }, {
+                              default: s(() => [
+                                d(o(l.status_label), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["type"])
+                          ]))), 128))
+                        ])),
+                        x.value && ve.value ? (n(), m("div", oa, [
+                          i(a(ee), {
+                            size: "sm",
+                            onClick: E
+                          }, {
+                            default: s(() => [
+                              d(o(a(t)("panel.notify-again")), 1)
+                            ]),
+                            _: 1
+                          })
+                        ])) : y("", !0)
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["label"])) : y("", !0)
+                ]),
+                _: 1
+              }, 8, ["aria-label"])
+            ]),
+            _: 1
+          })
+        ]),
+        f("aside", ra, [
+          i(a(N), null, {
+            default: s(() => [
+              f("div", da, [
+                f("label", ca, [
+                  i(a(v), {
+                    size: "sm",
+                    tone: "muted"
+                  }, {
+                    default: s(() => [
+                      d(o(a(t)("panel.status")), 1)
+                    ]),
+                    _: 1
+                  }),
+                  i(a(ae), {
+                    "model-value": u.value.status?.id ?? null,
+                    options: ie.value,
+                    disabled: !x.value,
+                    "onUpdate:modelValue": re
+                  }, null, 8, ["model-value", "options", "disabled"])
+                ]),
+                f("label", pa, [
+                  i(a(v), {
+                    size: "sm",
+                    tone: "muted"
+                  }, {
+                    default: s(() => [
+                      d(o(a(t)("panel.assignee")), 1)
+                    ]),
+                    _: 1
+                  }),
+                  i(a(ae), {
+                    "model-value": u.value.assignee?.id ?? null,
+                    options: ue.value,
+                    disabled: !x.value,
+                    clearable: "",
+                    placeholder: a(t)("panel.unassigned"),
+                    "onUpdate:modelValue": de
+                  }, null, 8, ["model-value", "options", "disabled", "placeholder"])
+                ])
+              ])
+            ]),
+            _: 1
+          })
+        ])
+      ])) : y("", !0)
+    ]));
+  }
+}), ha = /* @__PURE__ */ He(ma, [["__scopeId", "data-v-89eacc36"]]);
+export {
+  ha as default
+};
+//# sourceMappingURL=SubmissionPage-DVNKYpWH.js.map