Files
at-mintel/packages/customer-manager/index.js

852 lines
36 KiB
JavaScript

import { useApi as e, defineModule as a } from "@directus/extensions-sdk";
import {
defineComponent as t,
ref as l,
onMounted as n,
resolveComponent as i,
resolveDirective as s,
openBlock as d,
createBlock as r,
withCtx as u,
createVNode as o,
createElementBlock as m,
Fragment as c,
renderList as v,
createTextVNode as p,
toDisplayString as f,
createCommentVNode as g,
createElementVNode as y,
withDirectives as b,
nextTick as _,
} from "vue";
const h = { class: "content-wrapper" },
x = { key: 0, class: "empty-state" },
w = { class: "header" },
k = { class: "header-left" },
V = { class: "title" },
C = { class: "subtitle" },
M = { class: "header-right" },
F = { class: "user-cell" },
N = { class: "user-name" },
z = { key: 0, class: "status-date" },
E = { key: 0, class: "drawer-content" },
U = { class: "form-section" },
S = { class: "field" },
A = { class: "drawer-actions" },
T = { key: 0, class: "drawer-content" },
Z = { class: "form-section" },
j = { class: "field" },
$ = { class: "field" },
D = { class: "field" },
O = { key: 1, class: "field" },
W = { class: "drawer-actions" };
var q = t({
__name: "module",
setup(a) {
const t = e(),
q = l([]),
B = l(null),
K = l([]),
L = l(!1),
P = l(!1),
G = l(null),
I = l(null),
H = l(!1),
J = l(!1),
Q = l({ id: "", name: "" }),
R = l(!1),
X = l(!1),
Y = l({
id: "",
first_name: "",
last_name: "",
email: "",
temporary_password: "",
}),
ee = [
{ text: "Name", value: "name", sortable: !0 },
{ text: "E-Mail", value: "email", sortable: !0 },
{ text: "Zuletzt eingeladen", value: "last_invited", sortable: !0 },
];
async function ae() {
const e = await t.get("/items/companies", {
params: { fields: ["id", "name"], sort: "name" },
});
q.value = e.data.data;
}
async function te(e) {
((B.value = e), (L.value = !0));
try {
const a = await t.get("/items/client_users", {
params: {
filter: { company: { _eq: e.id } },
fields: ["*"],
sort: "first_name",
},
});
K.value = a.data.data;
} finally {
L.value = !1;
}
}
function le() {
((J.value = !1), (Q.value = { id: "", name: "" }), (H.value = !0));
}
async function ne() {
B.value &&
((Q.value = { id: B.value.id, name: B.value.name }),
(J.value = !0),
await _(),
(H.value = !0));
}
async function ie() {
var e;
if (Q.value.name) {
P.value = !0;
try {
(J.value
? (await t.patch(`/items/companies/${Q.value.id}`, {
name: Q.value.name,
}),
(I.value = { type: "success", message: "Firma aktualisiert!" }))
: (await t.post("/items/companies", { name: Q.value.name }),
(I.value = { type: "success", message: "Firma angelegt!" })),
(H.value = !1),
await ae(),
(null == (e = B.value) ? void 0 : e.id) === Q.value.id &&
(B.value.name = Q.value.name));
} catch (e) {
I.value = { type: "danger", message: e.message };
} finally {
P.value = !1;
}
}
}
function se() {
((X.value = !1),
(Y.value = {
id: "",
first_name: "",
last_name: "",
email: "",
temporary_password: "",
}),
(R.value = !0));
}
async function de() {
if (Y.value.email && B.value) {
P.value = !0;
try {
(X.value
? (await t.patch(`/items/client_users/${Y.value.id}`, {
first_name: Y.value.first_name,
last_name: Y.value.last_name,
email: Y.value.email,
}),
(I.value = {
type: "success",
message: "Mitarbeiter aktualisiert!",
}))
: (await t.post("/items/client_users", {
first_name: Y.value.first_name,
last_name: Y.value.last_name,
email: Y.value.email,
company: B.value.id,
}),
(I.value = {
type: "success",
message: "Mitarbeiter angelegt!",
})),
(R.value = !1),
await te(B.value));
} catch (e) {
I.value = { type: "danger", message: e.message };
} finally {
P.value = !1;
}
}
}
function re(e) {
const a = (null == e ? void 0 : e.item) || e;
a &&
a.id &&
(async function (e) {
((Y.value = {
id: e.id || "",
first_name: e.first_name || "",
last_name: e.last_name || "",
email: e.email || "",
temporary_password: e.temporary_password || "",
}),
(X.value = !0),
await _(),
(R.value = !0));
})(a);
}
return (
n(() => {
ae();
}),
(e, a) => {
const l = i("v-icon"),
n = i("v-list-item-icon"),
_ = i("v-text-overflow"),
ae = i("v-list-item-content"),
ue = i("v-list-item"),
oe = i("v-divider"),
me = i("v-list"),
ce = i("v-notice"),
ve = i("v-button"),
pe = i("v-info"),
fe = i("v-avatar"),
ge = i("v-chip"),
ye = i("v-table"),
be = i("v-input"),
_e = i("v-drawer"),
he = i("private-view"),
xe = s("tooltip");
return (
d(),
r(
he,
{ title: "Customer Manager" },
{
navigation: u(() => [
o(
me,
{ nav: "" },
{
default: u(() => [
o(
ue,
{ onClick: le, clickable: "" },
{
default: u(() => [
o(n, null, {
default: u(() => [
o(l, {
name: "add",
color: "var(--theme--primary)",
}),
]),
_: 1,
}),
o(ae, null, {
default: u(() => [
o(_, { text: "Neue Firma anlegen" }),
]),
_: 1,
}),
]),
_: 1,
},
),
o(oe),
(d(!0),
m(
c,
null,
v(q.value, (e) => {
var a;
return (
d(),
r(
ue,
{
key: e.id,
active:
(null == (a = B.value) ? void 0 : a.id) ===
e.id,
class: "company-item",
clickable: "",
onClick: (a) => te(e),
},
{
default: u(() => [
o(n, null, {
default: u(() => [
o(l, { name: "business" }),
]),
_: 1,
}),
o(
ae,
null,
{
default: u(() => [
o(_, { text: e.name }, null, 8, [
"text",
]),
]),
_: 2,
},
1024,
),
]),
_: 2,
},
1032,
["active", "onClick"],
)
);
}),
128,
)),
]),
_: 1,
},
),
]),
"title-outer:after": u(() => [
I.value
? (d(),
r(
ce,
{
key: 0,
type: I.value.type,
onClose: a[0] || (a[0] = (e) => (I.value = null)),
dismissible: "",
},
{ default: u(() => [p(f(I.value.message), 1)]), _: 1 },
8,
["type"],
))
: g("v-if", !0),
]),
default: u(() => [
y("div", h, [
B.value
? (d(),
m(
c,
{ key: 1 },
[
y("header", w, [
y("div", k, [
y("h1", V, f(B.value.name), 1),
y(
"p",
C,
f(K.value.length) + " Kunden-Mitarbeiter",
1,
),
]),
y("div", M, [
b(
(d(),
r(
ve,
{
secondary: "",
rounded: "",
icon: "",
onClick: ne,
},
{
default: u(() => [
o(l, { name: "edit" }),
]),
_: 1,
},
)),
[
[
xe,
"Firma bearbeiten",
void 0,
{ bottom: !0 },
],
],
),
o(
ve,
{ primary: "", onClick: se },
{
default: u(() => [
...(a[14] ||
(a[14] = [
p(" Mitarbeiter hinzufügen ", -1),
])),
]),
_: 1,
},
),
]),
]),
o(
ye,
{
headers: ee,
items: K.value,
loading: L.value,
class: "clickable-table",
"fixed-header": "",
"onClick:row": re,
},
{
"item.name": u(({ item: e }) => [
y("div", F, [
o(
fe,
{ name: e.first_name, "x-small": "" },
null,
8,
["name"],
),
y(
"span",
N,
f(e.first_name) + " " + f(e.last_name),
1,
),
]),
]),
"item.last_invited": u(({ item: e }) => {
return [
e.last_invited
? (d(),
m(
"span",
z,
f(
((t = e.last_invited),
new Date(t).toLocaleString(
"de-DE",
{
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
},
)),
),
1,
))
: (d(),
r(
ge,
{ key: 1, "x-small": "" },
{
default: u(() => [
...(a[15] ||
(a[15] = [p("Noch nie", -1)])),
]),
_: 1,
},
)),
];
var t;
}),
_: 2,
},
1032,
["items", "loading"],
),
],
64,
))
: (d(),
m("div", x, [
o(
pe,
{
title: "Firmen auswählen",
icon: "business",
center: "",
},
{
default: u(() => [
a[12] ||
(a[12] = p(
" Wähle eine Firma in der Navigation aus oder ",
-1,
)),
o(
ve,
{ "x-small": "", onClick: le },
{
default: u(() => [
...(a[11] ||
(a[11] = [
p("erstelle eine neue Firma", -1),
])),
]),
_: 1,
},
),
a[13] || (a[13] = p(". ", -1)),
]),
_: 1,
},
),
])),
]),
o(
_e,
{
modelValue: H.value,
"onUpdate:modelValue":
a[2] || (a[2] = (e) => (H.value = e)),
title: J.value
? "Firma bearbeiten"
: "Neue Firma anlegen",
icon: "business",
onCancel: a[3] || (a[3] = (e) => (H.value = !1)),
},
{
default: u(() => [
H.value
? (d(),
m("div", E, [
y("div", U, [
y("div", S, [
a[16] ||
(a[16] = y(
"span",
{ class: "label" },
"Firmenname",
-1,
)),
o(
be,
{
modelValue: Q.value.name,
"onUpdate:modelValue":
a[1] ||
(a[1] = (e) => (Q.value.name = e)),
placeholder: "z.B. KLZ Cables",
autofocus: "",
},
null,
8,
["modelValue"],
),
]),
]),
y("div", A, [
o(
ve,
{
primary: "",
block: "",
loading: P.value,
onClick: ie,
},
{
default: u(() => [
...(a[17] ||
(a[17] = [p("Speichern", -1)])),
]),
_: 1,
},
8,
["loading"],
),
]),
]))
: g("v-if", !0),
]),
_: 1,
},
8,
["modelValue", "title"],
),
o(
_e,
{
modelValue: R.value,
"onUpdate:modelValue":
a[9] || (a[9] = (e) => (R.value = e)),
title: X.value
? "Mitarbeiter bearbeiten"
: "Neuen Mitarbeiter anlegen",
icon: "person",
onCancel: a[10] || (a[10] = (e) => (R.value = !1)),
},
{
default: u(() => [
R.value
? (d(),
m("div", T, [
y("div", Z, [
y("div", j, [
a[18] ||
(a[18] = y(
"span",
{ class: "label" },
"Vorname",
-1,
)),
o(
be,
{
modelValue: Y.value.first_name,
"onUpdate:modelValue":
a[4] ||
(a[4] = (e) =>
(Y.value.first_name = e)),
placeholder: "Vorname",
autofocus: "",
},
null,
8,
["modelValue"],
),
]),
y("div", $, [
a[19] ||
(a[19] = y(
"span",
{ class: "label" },
"Nachname",
-1,
)),
o(
be,
{
modelValue: Y.value.last_name,
"onUpdate:modelValue":
a[5] ||
(a[5] = (e) => (Y.value.last_name = e)),
placeholder: "Nachname",
},
null,
8,
["modelValue"],
),
]),
y("div", D, [
a[20] ||
(a[20] = y(
"span",
{ class: "label" },
"E-Mail",
-1,
)),
o(
be,
{
modelValue: Y.value.email,
"onUpdate:modelValue":
a[6] ||
(a[6] = (e) => (Y.value.email = e)),
placeholder: "E-Mail Adresse",
type: "email",
},
null,
8,
["modelValue"],
),
]),
X.value
? (d(), r(oe, { key: 0 }))
: g("v-if", !0),
X.value
? (d(),
m("div", O, [
a[21] ||
(a[21] = y(
"span",
{ class: "label" },
"Temporäres Passwort",
-1,
)),
o(
be,
{
modelValue:
Y.value.temporary_password,
"onUpdate:modelValue":
a[7] ||
(a[7] = (e) =>
(Y.value.temporary_password = e)),
readonly: "",
class: "password-input",
},
null,
8,
["modelValue"],
),
a[22] ||
(a[22] = y(
"p",
{ class: "field-note" },
"Wird beim Senden der Zugangsdaten automatisch generiert.",
-1,
)),
]))
: g("v-if", !0),
]),
y("div", W, [
o(
ve,
{
primary: "",
block: "",
loading: P.value,
onClick: de,
},
{
default: u(() => [
...(a[23] ||
(a[23] = [p("Daten speichern", -1)])),
]),
_: 1,
},
8,
["loading"],
),
X.value
? (d(),
m(
c,
{ key: 0 },
[
o(oe),
b(
(d(),
r(
ve,
{
secondary: "",
block: "",
loading: G.value === Y.value.id,
onClick:
a[8] ||
(a[8] = (e) =>
(async function (e) {
G.value = e.id;
try {
if (
(await t.post(
"/flows/trigger/33443f6b-cec7-4668-9607-f33ea674d501",
[e.id],
),
(I.value = {
type: "success",
message: `Zugangsdaten für ${e.first_name} versendet. 📧`,
}),
await te(B.value),
R.value &&
Y.value.id === e.id)
) {
const a = K.value.find(
(a) => a.id === e.id,
);
a &&
(Y.value.temporary_password =
a.temporary_password);
}
} catch (e) {
I.value = {
type: "danger",
message: `Fehler: ${e.message}`,
};
} finally {
G.value = null;
}
})(Y.value)),
},
{
default: u(() => [
o(l, {
name: "send",
left: "",
}),
a[24] ||
(a[24] = p(
" Zugangsdaten senden ",
-1,
)),
]),
_: 1,
},
8,
["loading"],
)),
[
[
xe,
"Generiert PW, speichert es und sendet E-Mail",
void 0,
{ bottom: !0 },
],
],
),
],
64,
))
: g("v-if", !0),
]),
]))
: g("v-if", !0),
]),
_: 1,
},
8,
["modelValue", "title"],
),
]),
_: 1,
},
)
);
}
);
},
}),
B = [],
K = [];
!(function (e, a) {
if (e && "undefined" != typeof document) {
var t,
l = !0 === a.prepend ? "prepend" : "append",
n = !0 === a.singleTag,
i =
"string" == typeof a.container
? document.querySelector(a.container)
: document.getElementsByTagName("head")[0];
if (n) {
var s = B.indexOf(i);
(-1 === s && ((s = B.push(i) - 1), (K[s] = {})),
(t = K[s] && K[s][l] ? K[s][l] : (K[s][l] = d())));
} else t = d();
(65279 === e.charCodeAt(0) && (e = e.substring(1)),
t.styleSheet
? (t.styleSheet.cssText += e)
: t.appendChild(document.createTextNode(e)));
}
function d() {
var e = document.createElement("style");
if ((e.setAttribute("type", "text/css"), a.attributes))
for (var t = Object.keys(a.attributes), n = 0; n < t.length; n++)
e.setAttribute(t[n], a.attributes[t[n]]);
var s = "prepend" === l ? "afterbegin" : "beforeend";
return (i.insertAdjacentElement(s, e), e);
}
})(
"\n.content-wrapper[data-v-3fd11e72] { padding: 32px; height: 100%; display: flex; flex-direction: column;\n}\n.company-item[data-v-3fd11e72] { cursor: pointer;\n}\n.header[data-v-3fd11e72] { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end;\n}\n.header-right[data-v-3fd11e72] { display: flex; gap: 12px;\n}\n.title[data-v-3fd11e72] { font-size: 24px; font-weight: 800; margin-bottom: 4px;\n}\n.subtitle[data-v-3fd11e72] { color: var(--theme--foreground-subdued); font-size: 14px;\n}\n.empty-state[data-v-3fd11e72] { height: 100%; display: flex; align-items: center; justify-content: center;\n}\n.user-cell[data-v-3fd11e72] { display: flex; align-items: center; gap: 12px;\n}\n.user-name[data-v-3fd11e72] { font-weight: 600;\n}\n.status-date[data-v-3fd11e72] { font-size: 12px; color: var(--theme--foreground-subdued);\n}\n.drawer-content[data-v-3fd11e72] { padding: 24px; display: flex; flex-direction: column; gap: 32px;\n}\n.form-section[data-v-3fd11e72] { display: flex; flex-direction: column; gap: 20px;\n}\n.field[data-v-3fd11e72] { display: flex; flex-direction: column; gap: 8px;\n}\n.label[data-v-3fd11e72] { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--theme--foreground-subdued); letter-spacing: 0.5px;\n}\n.field-note[data-v-3fd11e72] { font-size: 11px; color: var(--theme--foreground-subdued); margin-top: 4px;\n}\n.drawer-actions[data-v-3fd11e72] { margin-top: 24px; display: flex; flex-direction: column; gap: 12px;\n}\n.password-input[data-v-3fd11e72] textarea {\n\tfont-family: var(--family-monospace);\n\tfont-weight: 800;\n\tcolor: var(--theme--primary) !important;\n\tbackground: var(--theme--background-subdued) !important;\n}\n.clickable-table[data-v-3fd11e72] tbody tr { cursor: pointer; transition: background-color 0.2s ease;\n}\n.clickable-table[data-v-3fd11e72] tbody tr:hover { background-color: var(--theme--background-subdued) !important;\n}\n[data-v-3fd11e72] .v-list-item { cursor: pointer !important;\n}\n",
{},
);
var L = a({
id: "customer-manager",
name: "Customer Manager",
icon: "supervisor_account",
routes: [
{
path: "",
component: ((e, a) => {
const t = e.__vccOpts || e;
for (const [e, l] of a) t[e] = l;
return t;
})(q, [
["__scopeId", "data-v-3fd11e72"],
["__file", "module.vue"],
]),
},
],
});
export { L as default };