@wisemen/wise-crm-web 2.0.0-alpha.4 → 2.0.0-alpha.40

package/README.md

@@ -0,0 +1,90 @@
+# @wisemen/wise-crm-web
+
+Vue 3 CRM package: business, individual and deal overviews, detail views, dialogs and widgets.
+
+## Extending the detail views
+
+The business and individual detail views can be extended with content from the host app in two places.
+
+### Custom tabs
+
+Tabs next to the detail sidebar are routes, registered through `useWiseCrmRoutes`. At least one tab is required for businesses and individuals. The tab component reads the entity uuid from the route params (`businessUuid` / `individualUuid` / `dealUuid`).
+
+```ts
+useWiseCrmRoutes({
+  businessTabRoutes: [
+    {
+      label: computed<string>(() => t('crm.business.tabs.information')),
+      route: {
+        name: 'crm-business-information',
+        path: 'information',
+        component: (): Component => import('./CrmBusinessInformationTabView.vue'),
+      },
+    },
+  ],
+  dealTabRoutes: [...],
+  individualTabRoutes: [...],
+})
+```
+
+### Custom sidebar sections
+
+Accordion sections rendered at the end of the sidebar's Overview tab, after the built-in sections. They show in both the detail view and the quick-view dialog. Register them through the `business` / `individual` options of `useWiseCrmConfig().init()`:
+
+```ts
+import type { WiseCrmSidebarSection } from '@wisemen/wise-crm-web'
+
+useWiseCrmConfig().init({
+  // ...
+  options: {
+    business: {
+      sidebarSections: [
+        {
+          icon: ShoppingCart01Icon,
+          key: 'orders',
+          label: computed<string>(() => t('crm.business.sidebar.orders')),
+          component: defineAsyncComponent(() => import('./BusinessOrdersSidebarSection.vue')),
+        },
+      ],
+    },
+    individual: {
+      sidebarSections: [...],
+    },
+    // ...
+  },
+})
+```
+
+| Field          | Description                                                                                                                       |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `key`          | Unique per entity; used as the accordion item value.                                                                              |
+| `label`        | Section header, a `ComputedRef<string>` so it follows the locale.                                                                 |
+| `icon`         | Section header icon.                                                                                                              |
+| `component`    | Section body.                                                                                                                     |
+| `useIsVisible` | Optional. Receives the component's props as a `ComputedRef` and returns a `ComputedRef<boolean>`; the section is hidden while it is `false`. |
+
+The component receives only the entity uuid. It fetches its own data and renders its own loading and empty state. Sections are open by default.
+
+```vue
+<script setup lang="ts">
+import type { WiseCrmBusinessUuid } from '@wisemen/wise-crm-web'
+
+const props = defineProps<{
+  businessUuid: WiseCrmBusinessUuid
+}>()
+</script>
+```
+
+Individual sections receive `individualUuid: WiseCrmIndividualUuid` instead. A component with the wrong props is a type error.
+
+`useIsVisible` is called once in the sidebar's setup, so it can use composables such as queries. Use it to hide a section that has nothing to show for this entity, rather than rendering an empty body under its header:
+
+```ts
+{
+  key: 'parent',
+  // ...
+  useIsVisible: (props) => useBusinessHasParent(computed(() => props.value.businessUuid)),
+}
+```
+
+A section that becomes visible after the sidebar has mounted still opens by default.

package/dist/{BusinessDetailView-DfdH3xGZ.js → BusinessDetailView-CzYmbWDI.js}

@@ -1,8 +1,8 @@
 import { defineComponent as n, openBlock as o, createBlock as r, unref as s, withCtx as a, createVNode as u } from "vue";
 import { useRouteParams as m } from "@vueuse/router";
-import { _ as p } from "./index-uh3Ew2Yy.js";
-import { aV as c } from "./uuid.util-B9bkU4IX.js";
-import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-BoCwerkk.js";
+import { _ as p } from "./index-BM5Kw4_U.js";
+import { br as c } from "./uuid.util-SYJY4Bt5.js";
+import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-Cnn_HfDr.js";
 const x = /* @__PURE__ */ n({
   __name: "BusinessDetailView",
   props: {

package/dist/{CrmDetailView.vue_vue_type_script_setup_true_lang-BoCwerkk.js → CrmDetailView.vue_vue_type_script_setup_true_lang-Cnn_HfDr.js}

@@ -1,9 +1,9 @@
-import { defineComponent as v, ref as h, unref as e, openBlock as d, createElementBlock as u, createElementVNode as t, renderSlot as x, createVNode as r, withCtx as f, Fragment as y, renderList as b, createBlock as g, toValue as m, createCommentVNode as w } from "vue";
+import { defineComponent as v, ref as h, unref as e, openBlock as d, createElementBlock as u, createElementVNode as t, renderSlot as x, createVNode as r, withCtx as f, Fragment as y, renderList as g, createBlock as w, toValue as m, createCommentVNode as b } from "vue";
 import { onKeyStroke as C } from "@vueuse/core";
 import { UITabsRouterLink as k, UITabsRouterLinkItem as R, UIIconButton as B } from "@wisemen/vue-core-design-system";
-import { a1 as E, V as I, X as V, ab as T } from "./index-uh3Ew2Yy.js";
-import { useRoute as A, RouterView as H } from "vue-router";
-class U {
+import { h as E, j as I, $ as T, ac as V } from "./index-BM5Kw4_U.js";
+import { useRoute as $, RouterView as j } from "vue-router";
+class A {
   /**
    * Checks if any parent element has `aria-hidden="true"` set. use this to check if a dialog or a popover is open.
    * @param element The element to start checking from.
@@ -19,23 +19,23 @@ class U {
     return !1;
   }
 }
-const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" }, z = { class: "flex h-full min-w-100 flex-col" }, L = { class: "flex size-full flex-1 justify-center overflow-hidden bg-secondary" }, N = { class: "flex w-full flex-col" }, S = { class: "grid w-full grid-cols-3 p-lg" }, X = { class: "flex items-center justify-center" }, D = { class: "flex items-center justify-end" }, F = { class: "size-full overflow-y-auto" }, O = /* @__PURE__ */ v({
+const H = { key: 0 }, U = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" }, z = { class: "flex h-full min-w-100 flex-col" }, L = { class: "flex size-full flex-1 justify-center overflow-hidden bg-secondary" }, N = { class: "flex w-full flex-col" }, S = { class: "grid w-full grid-cols-3 p-lg" }, D = { class: "flex items-center justify-center" }, F = { class: "flex items-center justify-end" }, K = { class: "size-full overflow-y-auto" }, P = /* @__PURE__ */ v({
   __name: "CrmDetailView",
   props: {
     entityType: {},
     tabs: {}
   },
   setup(i) {
-    const a = i, o = h(null), c = E(), _ = I(), p = A();
+    const a = i, o = h(null), c = E(), _ = I(), p = $();
     return C("Escape", () => {
       const l = o.value?.$el;
-      l && U.parentHasAriaHidden(l) || c.goToReturnRoute();
-    }), (l, n) => e(_).isInitialized.value ? (d(), u("div", $, [
-      t("div", j, [
+      l && A.parentHasAriaHidden(l) || c.goToReturnRoute();
+    }), (l, n) => e(_).isInitialized.value ? (d(), u("div", H, [
+      t("div", U, [
         t("div", z, [
           x(l.$slots, "sidebar")
         ]),
-        r(V, {
+        r(T, {
           color: e(c).getEntityConfig(i.entityType)?.color ?? null,
           class: "relative flex flex-1 flex-col overflow-hidden"
         }, {
@@ -44,10 +44,10 @@ const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" },
               t("div", N, [
                 t("div", S, [
                   n[1] || (n[1] = t("div", null, null, -1)),
-                  t("div", X, [
+                  t("div", D, [
                     r(e(k), { variant: "button-border" }, {
                       default: f(() => [
-                        (d(!0), u(y, null, b(a.tabs, (s) => (d(), g(e(R), {
+                        (d(!0), u(y, null, g(a.tabs, (s) => (d(), w(e(R), {
                           key: m(s.label),
                           label: m(s.label),
                           to: {
@@ -59,22 +59,22 @@ const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" },
                       _: 1
                     })
                   ]),
-                  t("div", D, [
+                  t("div", F, [
                     r(e(B), {
                       ref_key: "closeButtonRef",
                       ref: o,
                       "class-config": {
                         root: "rounded-md shadow-lg"
                       },
-                      icon: e(T),
+                      icon: e(V),
                       label: "Close",
                       variant: "secondary",
                       onClick: n[0] || (n[0] = (s) => e(c).goToReturnRoute())
                     }, null, 8, ["icon"])
                   ])
                 ]),
-                t("div", F, [
-                  r(e(H))
+                t("div", K, [
+                  r(e(j))
                 ])
               ])
             ])
@@ -82,9 +82,9 @@ const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" },
           _: 1
         }, 8, ["color"])
       ])
-    ])) : w("", !0);
+    ])) : b("", !0);
   }
 });
 export {
-  O as _
+  P as _
 };

package/dist/DealCommunicationTabView-DJ3O_RbV.js

@@ -0,0 +1,265 @@
+import { defineComponent as y, openBlock as t, createElementBlock as _, createElementVNode as s, createBlock as o, resolveDynamicComponent as x, unref as e, toDisplayString as p, createVNode as r, withCtx as n, createCommentVNode as f, Fragment as b, renderList as w, normalizeClass as k, computed as I } from "vue";
+import { useRouteParams as U } from "@vueuse/router";
+import { useOffsetInfiniteQuery as M } from "@wisemen/vue-core-api-utils";
+import { M as z, u as E, a as L, T as j, b as B, W as F, F as T, c as S, D as h, g as A, d as D, m as N, e as V, A as H } from "./index-BM5Kw4_U.js";
+import { UIIconButton as Q, UIEmptyState as q, UIBadge as P } from "@wisemen/vue-core-design-system";
+import { AnimatePresence as W, Motion as O } from "motion-v";
+import { AccordionRoot as R, AccordionItem as G, AccordionHeader as J, AccordionTrigger as K, AccordionContent as X } from "reka-ui";
+import { useI18n as Y } from "vue-i18n";
+function Z(u) {
+  return M("mailIndex", {
+    params: {
+      queryParams: u.params
+    },
+    queryFn: (a) => z.getAll({
+      filters: u.params.filters.value,
+      pagination: a
+    })
+  });
+}
+const ee = { class: "group flex w-fit items-center justify-between gap-sm rounded-lg bg-secondary px-xs py-xxs text-sm font-medium" }, te = { class: "flex items-center gap-sm" }, se = {
+  key: 1,
+  "aria-hidden": !0,
+  class: "flex size-8 shrink-0 items-center justify-center"
+}, ae = { class: "truncate text-sm text-primary" }, ne = { class: "flex items-center gap-md" }, le = /* @__PURE__ */ y({
+  __name: "DealExternalAttachment",
+  props: {
+    attachment: {}
+  },
+  setup(u) {
+    const a = u, d = E();
+    async function m(c) {
+      if (c.downloadUrl !== null) {
+        T.download(
+          c.downloadUrl,
+          c.name
+        );
+        return;
+      }
+      const l = await S.download(c.uuid);
+      if (l.isErr()) {
+        d.show(l.error);
+        return;
+      }
+      T.downloadBlob(l.value, c.name);
+    }
+    return (c, l) => (t(), _("div", ee, [
+      s("div", te, [
+        a.attachment.downloadUrl !== null && a.attachment.mimeType.startsWith("image/") ? (t(), o(L, {
+          key: 0,
+          "is-zoom-enabled": !0,
+          alt: a.attachment.name,
+          src: a.attachment.downloadUrl,
+          blurhash: a.attachment.blurHash ?? null,
+          class: "size-8 shrink-0 rounded-md",
+          fit: "cover"
+        }, null, 8, ["alt", "src", "blurhash"])) : (t(), _("div", se, [
+          (t(), o(x(e(j)), { class: "size-4.5 text-disabled" }))
+        ])),
+        s("p", ae, p(a.attachment.name), 1)
+      ]),
+      s("div", ne, [
+        r(B, null, {
+          default: n(() => [
+            r(e(Q), {
+              icon: e(F),
+              label: "Download",
+              variant: "tertiary",
+              class: "shrink-0 hover:bg-tertiary!",
+              onClick: l[0] || (l[0] = (C) => m(u.attachment))
+            }, null, 8, ["icon"])
+          ]),
+          _: 1
+        })
+      ])
+    ]));
+  }
+}), oe = { class: "p-xl" }, ie = { class: "overflow-hidden rounded-xl border border-secondary bg-primary shadow-lg" }, re = { class: "text-md font-medium" }, ce = { class: "relative" }, ue = { class: "sr-only" }, de = { class: "flex min-w-0 flex-1 items-center gap-sm" }, me = { class: "truncate" }, _e = { class: "pointer-events-none flex items-center gap-sm" }, pe = { class: "flex flex-col items-end text-sm text-tertiary" }, fe = { class: "flex flex-col" }, he = ["innerHTML"], xe = /* @__PURE__ */ y({
+  __name: "DealCommunicationMailList",
+  props: {
+    mails: {}
+  },
+  setup(u) {
+    const a = u, d = Y();
+    function m(l) {
+      return V().toDateTime(l.createdAt);
+    }
+    function c(l) {
+      return l.to.join(", ");
+    }
+    return (l, C) => (t(), _("div", oe, [
+      s("div", ie, [
+        r(h, null, {
+          default: n(() => [
+            s("p", re, p(e(d).t("wise_crm.deal.communication.mail_list.title")), 1)
+          ]),
+          _: 1
+        }),
+        a.mails.length === 0 ? (t(), o(e(q), {
+          key: 0,
+          icon: e(A),
+          title: e(d).t("wise_crm.deal.communication.mail_list.no_communication_sent"),
+          description: e(d).t("wise_crm.deal.communication.mail_list.create_quote_instruction"),
+          class: "h-120"
+        }, null, 8, ["icon", "title", "description"])) : f("", !0),
+        a.mails.length > 0 ? (t(), o(e(R), {
+          key: 1,
+          collapsible: !0,
+          type: "multiple",
+          class: "flex flex-col gap-0"
+        }, {
+          default: n(() => [
+            (t(!0), _(b, null, w(a.mails, (i, $) => (t(), o(e(G), {
+              key: i.uuid,
+              value: i.uuid
+            }, {
+              default: n(({ open: g }) => [
+                r(e(J), null, {
+                  default: n(() => [
+                    s("div", ce, [
+                      r(e(K), { class: "absolute inset-0 rounded-none ring-brand-500 ring-offset-1 duration-200 outline-none focus-visible:ring-2" }, {
+                        default: n(() => [
+                          s("span", ue, p(i.subject), 1)
+                        ]),
+                        _: 2
+                      }, 1024),
+                      s("div", {
+                        class: k([{
+                          "border-b border-secondary": $ < a.mails.length - 1
+                        }, "px-2xl py-lg"])
+                      }, [
+                        r(D, { justify: "between" }, {
+                          default: n(() => [
+                            s("div", de, [
+                              (t(), o(x(e(A)), { class: "size-4 shrink-0 text-secondary" })),
+                              s("p", me, p(i.subject), 1),
+                              i.mailTemplateDisplayName !== null ? (t(), o(e(P), {
+                                key: 0,
+                                label: i.mailTemplateDisplayName,
+                                "class-config": {
+                                  root: "shrink-0"
+                                },
+                                variant: "translucent",
+                                color: "brand"
+                              }, null, 8, ["label"])) : f("", !0)
+                            ]),
+                            s("div", _e, [
+                              s("div", pe, [
+                                s("span", null, p(c(i)), 1),
+                                s("span", null, p(m(i)), 1)
+                              ]),
+                              (t(), o(x(e(N)), {
+                                class: k([{
+                                  "-rotate-180": g
+                                }, "size-4 shrink-0 text-secondary duration-300"])
+                              }, null, 8, ["class"]))
+                            ])
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ], 2)
+                    ])
+                  ]),
+                  _: 2
+                }, 1024),
+                r(e(W), { initial: !1 }, {
+                  default: n(() => [
+                    g ? (t(), o(e(X), {
+                      key: 0,
+                      class: "overflow-clip"
+                    }, {
+                      default: n(() => [
+                        r(e(O), {
+                          initial: {
+                            opacity: 0,
+                            height: 0,
+                            y: -10
+                          },
+                          animate: {
+                            opacity: 1,
+                            height: "auto",
+                            filter: "blur(0px)",
+                            y: 0
+                          },
+                          exit: {
+                            opacity: 0,
+                            height: 0,
+                            filter: "blur(5px)",
+                            y: -10
+                          },
+                          transition: {
+                            bounce: 0,
+                            duration: 0.4,
+                            type: "spring"
+                          }
+                        }, {
+                          default: n(() => [
+                            s("div", fe, [
+                              i.attachments.length > 0 ? (t(), o(h, { key: 0 }, {
+                                default: n(() => [
+                                  r(D, { class: "flex-wrap" }, {
+                                    default: n(() => [
+                                      (t(!0), _(b, null, w(i.attachments, (v) => (t(), o(le, {
+                                        key: v.uuid,
+                                        attachment: v
+                                      }, null, 8, ["attachment"]))), 128))
+                                    ]),
+                                    _: 2
+                                  }, 1024)
+                                ]),
+                                _: 2
+                              }, 1024)) : f("", !0),
+                              r(h, null, {
+                                default: n(() => [
+                                  s("div", {
+                                    class: "prose prose-sm max-w-full py-3xl pb-xl",
+                                    innerHTML: i.text
+                                  }, null, 8, he)
+                                ]),
+                                _: 2
+                              }, 1024)
+                            ])
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 2
+                    }, 1024)) : f("", !0)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1032, ["value"]))), 128))
+          ]),
+          _: 1
+        })) : f("", !0)
+      ])
+    ]));
+  }
+}), ye = {
+  key: 0,
+  class: "p-xl"
+}, Ce = /* @__PURE__ */ y({
+  __name: "DealCommunicationTabView",
+  setup(u) {
+    const a = U("dealUuid"), d = I(() => ({
+      dealUuid: a.value
+    })), m = Z({
+      params: {
+        filters: d
+      }
+    });
+    return (c, l) => (t(), _("div", null, [
+      e(m).isLoading.value ? (t(), _("div", ye, [
+        r(H, { class: "h-150 w-full" })
+      ])) : e(m).result.value.isOk() ? (t(), o(xe, {
+        key: 1,
+        mails: e(m).result.value.getValue().data
+      }, null, 8, ["mails"])) : f("", !0)
+    ]));
+  }
+});
+export {
+  Ce as default
+};