@deviceinsight/ng-ui-scale-lib 9.14.0

package/dist/TemplateEditPage-f163ea2f.js

@@ -0,0 +1,505 @@
+import { at as e, ag as r, d6 as v, bJ as B, dd as $, ah as R, de as M, bi as S, df as z, b4 as q, b9 as U, bc as H, bf as J, bs as Q, bN as X, ad as Y } from "./ContextBarContext-f745a63a.js";
+import Z, { useState as C, useRef as D, useContext as O, useEffect as w } from "react";
+import { useParams as ee, useHistory as te, useLocation as ae } from "react-router-dom";
+import { fetchEmailTemplateById as ne, fetchEmailTemplates as se, createEmailTemplate as ie, updateEmailTemplate as oe, deleteEmailTemplate as le } from "@deviceinsight/ng-ui-api-client";
+import { Modal as _, Button as k, useConfirm as re, Accordion as ce, AccordionItem as de, Icon as A, ButtonRow as ue, SpinnerContainer as me } from "@deviceinsight/ng-ui-basic-components";
+import { ReactableWithClientSidePagination as W, nanoid10 as fe, messageBoxError as K, ContentHeader as pe } from "@deviceinsight/ng-ui-components";
+import { P as he } from "./react-router-f15627c1.js";
+import { A as xe } from "./AccessEditModal-a5347dbd.js";
+import "react-dom";
+import "./extends-0a3e0827.js";
+const je = (t) => [
+  {
+    name: "locale",
+    label: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.localePicker.localeCode", children: "Locale code" }),
+    sortable: !0,
+    render: ({ locale: a }) => /* @__PURE__ */ e.jsx("div", { onClick: () => t(a), className: "clickable", children: a })
+  }
+], be = ({ locales: t, onSelect: a, onCancel: n }) => {
+  const c = t.map((s) => ({
+    locale: s
+  }));
+  return /* @__PURE__ */ e.jsx(
+    _,
+    {
+      className: "di notification-template-modal",
+      header: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.localePicker.title", children: "Select locale" }),
+      content: /* @__PURE__ */ e.jsx(
+        W,
+        {
+          columnDefs: je(a),
+          uniqueItemKey: (s) => `${s.locale}`,
+          items: c,
+          paginationSettings: {
+            page: 0,
+            size: c.length,
+            sort: {
+              property: "locale",
+              direction: "ASC"
+            }
+          },
+          isLoading: !1
+        }
+      ),
+      footer: /* @__PURE__ */ e.jsx(k, { onClick: n, children: /* @__PURE__ */ e.jsx(r, { i18nKey: v.cancel.id, children: v.cancel.defaultValue }) }),
+      width: 600
+    }
+  );
+}, Te = (t, a) => [
+  "asset.name",
+  ...t.map(({ key: n }) => `asset.properties.${n}`),
+  ...a.map(({ key: n }) => `assetGroup.${n}`),
+  "event.key",
+  "event.ruleId",
+  "event.timestamp?datetime"
+], ye = (t) => [
+  {
+    name: "variable",
+    label: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.variablePicker.variable", children: "Variable" }),
+    render: (a) => /* @__PURE__ */ e.jsx("div", { onClick: () => t(a), className: "clickable", children: a })
+  }
+], ge = () => {
+  const { assetProperties: t, assetGroupProperties: a } = B();
+  return {
+    assetProperties: t.filter((n) => !n.key.startsWith("_") && n.deletable),
+    assetGroupProperties: a.filter(
+      (n) => !n.key.startsWith("_") && n.deletable
+    )
+  };
+}, Pe = ({ onSelect: t, onCancel: a }) => {
+  const { assetProperties: n, assetGroupProperties: c } = ge(), s = Te(n, c);
+  return /* @__PURE__ */ e.jsx(
+    _,
+    {
+      className: "di notification-template-modal",
+      header: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.variablePicker.title", children: "Select variable" }),
+      content: /* @__PURE__ */ e.jsx(
+        W,
+        {
+          columnDefs: ye(t),
+          uniqueItemKey: (m) => m,
+          items: s,
+          paginationSettings: {
+            page: 0,
+            size: 10,
+            sort: {
+              property: "locale",
+              direction: "ASC"
+            }
+          },
+          isLoading: !1
+        }
+      ),
+      footer: /* @__PURE__ */ e.jsx(k, { onClick: a, children: /* @__PURE__ */ e.jsx(r, { i18nKey: v.cancel.id, children: v.cancel.defaultValue }) }),
+      width: 600
+    }
+  );
+}, G = Z.lazy(() => import("./TemplateTextInput-1ba4e19b.js")), ve = (t, a) => t.locale === "default" ? -1 : a.locale === "default" ? 1 : t.locale.localeCompare(a.locale);
+function Ce() {
+  const t = re(), [a, n] = C(!1), [c, s] = C("message"), {
+    watch: m,
+    control: h,
+    setValue: f,
+    formState: { errors: b }
+  } = $(), { t: g } = R(), P = D(null), d = D(null), o = m("locales");
+  async function l(x) {
+    await t({
+      title: g("notificationTemplate.form.confirmDeleteTitle", { defaultValue: "Delete translation" }),
+      message: g("notificationTemplate.form.confirmDeleteMessage", {
+        defaultValue: "Do you really want to delete this translation?"
+      })
+    }) && f(
+      "locales",
+      o.filter((y) => y.locale !== x),
+      { shouldDirty: !0 }
+    );
+  }
+  function T() {
+    n(!0);
+  }
+  function j(x) {
+    const u = c === "subject" ? P.current : d.current;
+    if (u) {
+      const y = u.state.update({
+        changes: {
+          from: u.state.selection.main.head,
+          insert: `\${${x}}`
+        }
+      });
+      u.dispatch(y), n(!1);
+    } else
+      throw new Error("Codemirror field not found");
+  }
+  return /* @__PURE__ */ e.jsxs("div", { className: "notification-content", children: [
+    /* @__PURE__ */ e.jsx("h2", { children: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplates.form.languages", children: "Languages" }) }),
+    /* @__PURE__ */ e.jsx(ce, { children: [...o].sort(ve).map((x) => {
+      var N;
+      const { locale: u } = x, y = /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.form.message", children: "Message" }), i = o.indexOf(x), p = !!((N = b.locales) != null && N[i]);
+      return /* @__PURE__ */ e.jsx(
+        de,
+        {
+          title: /* @__PURE__ */ e.jsxs("span", { className: "notification-locale-header", children: [
+            u,
+            p && /* @__PURE__ */ e.jsx("img", { src: M, alt: "" })
+          ] }),
+          tools: [
+            /* @__PURE__ */ e.jsx(
+              k,
+              {
+                naked: !0,
+                disabled: u === "default",
+                onClick: () => l(u),
+                "data-testid": "delete-locale-button",
+                children: /* @__PURE__ */ e.jsx(A, { del: !0, large: !0 })
+              }
+            )
+          ],
+          children: /* @__PURE__ */ e.jsxs("div", { className: "notification-content-fields", children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "notification-content-fields-wrapper", children: [
+              /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
+                S,
+                {
+                  name: `locales.${i}.subject`,
+                  control: h,
+                  rules: {
+                    required: !0
+                  },
+                  render: ({ field: { value: V, onChange: L }, fieldState: { error: E } }) => /* @__PURE__ */ e.jsx(
+                    G,
+                    {
+                      onFocus: () => s("subject"),
+                      value: V,
+                      onChange: L,
+                      error: E ? g("notificationTemplates.form.subjectRequired", {
+                        defaultValue: "Please input subject"
+                      }) : void 0,
+                      label: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.form.subject", children: "Subject" }),
+                      required: !0,
+                      refField: (I) => P.current = I
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ e.jsx(
+                "div",
+                {
+                  style: {
+                    marginTop: 10
+                  },
+                  children: /* @__PURE__ */ e.jsx(
+                    S,
+                    {
+                      name: `locales.${o.indexOf(x)}.text`,
+                      control: h,
+                      rules: {
+                        required: !0
+                      },
+                      render: ({ field: { value: V, onChange: L }, fieldState: { error: E } }) => /* @__PURE__ */ e.jsx(
+                        G,
+                        {
+                          onFocus: () => s("text"),
+                          value: V,
+                          onChange: L,
+                          error: E ? g("notificationTemplates.form.messageRequired", {
+                            defaultValue: "Please input message"
+                          }) : void 0,
+                          label: y,
+                          refField: (I) => d.current = I,
+                          renderAs: "textarea",
+                          required: !0
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e.jsx("div", { className: "notification-content-variables-wrapper", children: /* @__PURE__ */ e.jsxs(k, { naked: !0, onClick: T, "data-testid": "add-button", children: [
+              /* @__PURE__ */ e.jsx(A, { add: !0 }),
+              /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.form.addVariables", children: "Add variables..." }) })
+            ] }) })
+          ] })
+        },
+        u
+      );
+    }) }),
+    a && /* @__PURE__ */ e.jsx(Pe, { onSelect: j, onCancel: () => n(!1) })
+  ] });
+}
+function ke() {
+  const { t } = R(), { control: a } = $();
+  return /* @__PURE__ */ e.jsxs(z, { children: [
+    /* @__PURE__ */ e.jsx(
+      S,
+      {
+        control: a,
+        name: "displayName",
+        rules: {
+          required: !0
+        },
+        render: ({ field: n, fieldState: { error: c } }) => /* @__PURE__ */ e.jsx(
+          q,
+          {
+            ...n,
+            error: c ? t("notificationTemplates.form.nameRequired", {
+              defaultValue: "Please enter a name"
+            }) : void 0,
+            required: !0,
+            label: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.form.name", children: "Name" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      S,
+      {
+        control: a,
+        name: "name",
+        render: ({ field: n }) => /* @__PURE__ */ e.jsx(
+          q,
+          {
+            ...n,
+            label: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.form.technicalName", children: "Technical Name" }),
+            disabled: !0
+          }
+        )
+      }
+    )
+  ] });
+}
+function Ne({ onCancel: t, onSubmit: a, disabled: n }) {
+  return /* @__PURE__ */ e.jsxs(ue, { dividing: !0, children: [
+    /* @__PURE__ */ e.jsx(k, { primary: !0, onClick: a, disabled: n, children: /* @__PURE__ */ e.jsx(r, { i18nKey: v.save.id, children: v.save.defaultValue }) }),
+    /* @__PURE__ */ e.jsx(k, { onClick: t, children: /* @__PURE__ */ e.jsx(r, { i18nKey: v.cancel.id, children: v.cancel.defaultValue }) })
+  ] });
+}
+function we() {
+  return {
+    name: `__${fe()}`,
+    locales: [
+      {
+        locale: "default",
+        subject: "",
+        text: "",
+        id: 0
+      }
+    ],
+    displayName: ""
+  };
+}
+function Se({ onCancel: t, onSubmit: a, editedTemplateData: n }) {
+  const { locales: c } = O(U), s = H({
+    defaultValues: n ?? we()
+  }), {
+    handleSubmit: m,
+    setValue: h,
+    watch: f,
+    formState: { isSubmitting: b, isDirty: g }
+  } = s, [P, d] = C(!1), [o, l] = C(!1), T = f("locales");
+  function j() {
+    return m(a, (i) => {
+      console.warn("Validation error", i);
+    })();
+  }
+  async function x(i) {
+    d(!1), h("accountGroupsWithAccess", i), await j();
+  }
+  function u(i) {
+    l(!1), h("locales", [...T, { locale: i, id: 0, text: "", subject: "" }], { shouldDirty: !0 });
+  }
+  function y() {
+    return c.filter((i) => !T.some((p) => p.locale === i));
+  }
+  return /* @__PURE__ */ e.jsx(J, { ...s, children: /* @__PURE__ */ e.jsxs("div", { className: "template-form", children: [
+    /* @__PURE__ */ e.jsx(ke, {}),
+    /* @__PURE__ */ e.jsx(Ce, {}),
+    /* @__PURE__ */ e.jsx("div", { className: "di button-row add-locale", children: /* @__PURE__ */ e.jsxs(
+      k,
+      {
+        onClick: () => l(!0),
+        "data-testid": "add-locale-button",
+        disabled: !y().length,
+        naked: !0,
+        children: [
+          /* @__PURE__ */ e.jsx(A, { add: !0 }),
+          /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplate.form.addLocale", children: "Add locale..." }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(
+      Ne,
+      {
+        onCancel: t,
+        onSubmit: n ? j : () => d(!0),
+        disabled: b
+      }
+    ),
+    o && /* @__PURE__ */ e.jsx(
+      be,
+      {
+        locales: y(),
+        onSelect: u,
+        onCancel: () => l(!1)
+      }
+    ),
+    P && /* @__PURE__ */ e.jsx(
+      xe,
+      {
+        onSave: x,
+        onCancel: () => d(!1),
+        loading: b
+      }
+    ),
+    /* @__PURE__ */ e.jsx(he, { message: "", when: g && !b })
+  ] }) });
+}
+function Ve() {
+  const { templateId: t } = ee(), [a, n] = C(void 0), [c, s] = C(void 0), [m, h] = C(!0);
+  return w(() => {
+    if (!t || t === "create") {
+      h(!1);
+      return;
+    }
+    (async () => {
+      try {
+        const f = await ne(parseInt(t)), P = (await se({
+          name: f.name,
+          page: 0,
+          size: 2e3
+        })).filter((d) => d.name === f.name).map((d) => ({
+          id: d.id,
+          locale: d.locale ?? "default",
+          text: d.text,
+          subject: d.subject ?? ""
+        }));
+        n({
+          accountGroupsWithAccess: void 0,
+          name: f.name,
+          displayName: f.displayName,
+          locales: P
+        });
+      } catch (f) {
+        s(f);
+      } finally {
+        h(!1);
+      }
+    })();
+  }, [t]), {
+    loading: m,
+    error: c,
+    initialFormData: a
+  };
+}
+function Le(t) {
+  return t.map((a) => ie(a));
+}
+function Ee(t) {
+  return t.map((a) => oe(a));
+}
+function Ie(t) {
+  return t.map((a) => le(a));
+}
+function F(t, a) {
+  const { name: n, displayName: c, accountGroupsWithAccess: s } = a, m = a.locales.find((b) => b.locale === t);
+  if (!m)
+    throw new Error(`Locale ${t} not found`);
+  const { subject: h, text: f } = m;
+  return {
+    accountGroupsWithAccess: s,
+    name: n,
+    displayName: c,
+    tenant: Y.getTenant(),
+    locale: t === "default" ? null : t,
+    subject: h,
+    text: f,
+    scope: "CONDITION_MONITORING"
+  };
+}
+function Ke(t, a, n) {
+  return {
+    id: t,
+    ...F(a, n)
+  };
+}
+const Ae = (t, a) => t.subject !== a.subject || t.text !== a.text;
+function Me() {
+  const { t } = R(), { setContextInfo: a } = O(Q), n = te(), { pathname: c } = ae(), { initialFormData: s, error: m, loading: h } = Ve();
+  async function f(o, l, T) {
+    const j = Le(o), x = Ee(l), u = Ie(T);
+    await Promise.all([...j, ...x, ...u]);
+  }
+  function b(o) {
+    const { locales: l } = o;
+    return f(
+      l.map(({ locale: T }) => F(T, o)),
+      [],
+      []
+    );
+  }
+  function g(o) {
+    const { locales: l } = o, T = s == null ? void 0 : s.displayName, j = (s == null ? void 0 : s.locales) ?? [], x = j.filter(
+      ({ locale: i }) => !l.some((p) => p.locale === i)
+    ), u = l.filter(
+      ({ locale: i }) => !j.some((p) => p.locale === i)
+    ), y = T === o.displayName ? l.filter((i) => {
+      const p = j.find(
+        (N) => N.locale === i.locale
+      );
+      return p && Ae(p, i);
+    }) : l.filter(
+      (i) => j.some((p) => p.locale === i.locale)
+    );
+    return f(
+      u.map(({ locale: i }) => F(i, o)),
+      y.map(({ locale: i, id: p }) => Ke(p, i, o)),
+      x.map(({ id: i }) => i)
+    );
+  }
+  async function P(o) {
+    try {
+      s ? await g(o) : await b(o), d();
+    } catch (l) {
+      console.error("An error occured while trying to submit the template(s): ", l), l.response && l.response.status === 400 ? K(
+        /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplates.form.nameOccupied", children: "Template with this name already exists" })
+      ) : K(/* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplates.form.unknownError", children: "Unknown error occured" }));
+    }
+  }
+  function d() {
+    n.push("/portaladmin/templates");
+  }
+  return w(() => {
+    a({
+      type: "string",
+      value: (s == null ? void 0 : s.displayName) || (s == null ? void 0 : s.name) || "",
+      pathname: c
+    });
+  }, [s, c, a]), w(() => () => a(), [a]), w(() => {
+    m && (console.error(m), K(
+      /* @__PURE__ */ e.jsx(r, { i18nKey: "notificationTemplates.form.fetchFailed", children: "An error occurred while trying to fetch the template(s)" })
+    ));
+  }, [m, t]), m ? /* @__PURE__ */ e.jsx(X, {}) : /* @__PURE__ */ e.jsxs(me, { show: h, children: [
+    /* @__PURE__ */ e.jsx(
+      pe,
+      {
+        parentPageLink: !0,
+        subPagePathPrefixArray: ["/email", "/sms"],
+        title: s ? t("notificationTemplate.form.editTemplate", {
+          defaultValue: "Edit Template"
+        }) : t("notificationTemplate.form.createTemplate", {
+          defaultValue: "Create Template"
+        })
+      }
+    ),
+    !h && /* @__PURE__ */ e.jsx(
+      Se,
+      {
+        onCancel: d,
+        onSubmit: P,
+        editedTemplateData: s
+      }
+    )
+  ] });
+}
+export {
+  Me as default
+};

package/dist/TemplateTextInput-1ba4e19b.js

@@ -0,0 +1,47 @@
+import { at as l, cz as x, aK as n } from "./ContextBarContext-f745a63a.js";
+import j from "react";
+import { C as d, j as b } from "./index-4f55daa8.js";
+import "react-router-dom";
+import "@deviceinsight/ng-ui-basic-components";
+import "@deviceinsight/ng-ui-components";
+import "@deviceinsight/ng-ui-api-client";
+import "react-dom";
+import "./extends-0a3e0827.js";
+const G = j.forwardRef(
+  ({ onFocus: r, onChange: i, refField: c, renderAs: a, ...o }, s) => {
+    function p() {
+      r();
+    }
+    const m = (t, e) => {
+      !a || a === "input" ? i == null || i(t.replace(/\n/g, ""), e) : i == null || i(t, e);
+    }, { label: f, ...u } = o;
+    return /* @__PURE__ */ l.jsx(x, { ...u, label: f, children: /* @__PURE__ */ l.jsx(
+      "div",
+      {
+        className: n("di notification-template-field", {
+          textarea: a === "textarea"
+        }),
+        children: /* @__PURE__ */ l.jsx(
+          d,
+          {
+            ...o,
+            basicSetup: {
+              lineNumbers: !1,
+              highlightActiveLine: !1,
+              foldGutter: !1
+            },
+            onChange: (t, e) => m(t, e),
+            onCreateEditor: (t) => {
+              c(t), s && (typeof s == "function" ? s(t) : s.current = t);
+            },
+            onFocus: p,
+            extensions: [b()]
+          }
+        )
+      }
+    ) });
+  }
+);
+export {
+  G as default
+};