@agendize/vue-settings
Version:
Vue agendize's settings component
357 lines (356 loc) • 15.3 kB
JavaScript
import { ref as u, inject as me, watch as ge, computed as be, onMounted as fe, defineComponent as Ge, resolveComponent as he, openBlock as O, createBlock as R, unref as e, withCtx as h, createVNode as w, createElementVNode as _, toDisplayString as Y, withKeys as ye, isRef as E, createCommentVNode as K } from "vue";
import { PageWithTabsAndPanel as Ve, Section as $, FieldInput as Z, Mandatory as A, FieldFile as _e, FieldSelect as ee } from "@agendize/design-system";
import { i as le, S as W } from "./index.d2d0aba2.js";
import { ImageEntity as xe, ServiceGroupEntity as ke } from "@agendize/js-calendar-api";
import { p as ze } from "./common.6fc78cfb.js";
import { toBase64 as we, readBlobFromUrl as Se } from "@agendize/vue-tools";
import { ServiceSearch as Fe } from "@agendize/vue-search";
import "./vendor.26bbd9f1.js";
import "@agendize/az-i18n";
import "vue-router";
import "@agendize/vue-acl";
function Ue(S, I, j, s, t, x, L, p, v) {
const T = u(), y = u([]), a = u(), m = u(!0), D = u(""), k = u(), V = u(void 0), F = u(), g = u(["green"]), z = u(), b = u([]), B = u([]), U = u(), c = le(j), C = u([]), N = u([]), f = me("toaster"), r = u(!1), M = u(!1), n = u({
title: c.global.t("settings.serviceGroup-details.title"),
subTitle: c.global.t("settings.serviceGroup-details.subTitle"),
mobileBack: !0,
tabs: [
{ id: "general", title: c.global.t("settings.serviceGroup-details.tabs.general") },
{ id: "services", title: c.global.t("settings.serviceGroup-details.tabs.services") },
{ id: "advanced", title: c.global.t("settings.serviceGroup-details.tabs.advanced") }
]
});
ge(() => M.value, (l) => {
n.value.tabs.forEach((o) => {
o.id === "services" && (o.visible = !l);
});
});
function q() {
var o, i, d;
if (g.value = [], !((o = a.value) != null && o.color))
return;
const l = "" + ((i = a.value) == null ? void 0 : i.color);
((d = a.value) == null ? void 0 : d.color) && C.value.filter((G) => G.value === l).length === 0 && C.value.push({ label: l, value: l }), g.value.push(l);
}
async function H() {
ze(C.value, c), q();
let l = !1, o = [];
y.value.forEach((i) => {
var d, G, P;
if (!L && (l || ((d = i.parent) == null ? void 0 : d.id) === ((G = a.value) == null ? void 0 : G.id))) {
l = !0;
return;
}
((P = i.members) == null ? void 0 : P.length) === 0 && i.id !== t && o.push({ value: i.id, label: i.name });
}), M.value = l, l ? N.value = [] : N.value = o;
}
function ae(l) {
k.value = void 0, V.value = l, F.value = void 0, l && we(l).then((o) => {
!o || typeof o == "string" && (F.value = o);
});
}
function te(l) {
l && (f == null || f.success(c.global.t("settings.serviceGroup-details.save-success")), a.value = l, (L || p) && (v == null || v.push({
name: W.ServicesGroupDetails,
params: { companyId: s, serviceGroupId: a.value.id }
})), J(), m.value = !1);
}
function oe() {
m.value = !0, a.value && (se(), ie().then((l) => {
te(l);
}).catch((l) => {
x == null || x.debug("vue-settings", "[Service group Details] Error", l), f == null || f.error(c.global.t("settings.serviceGroup-details.save-error")), m.value = !1;
}));
}
async function ie() {
if (!!a.value)
return L || p ? await S.createServiceGroup(s, a.value) : await S.updateServiceGroup(s, t, a.value);
}
function se() {
!a.value || !D.value || (a.value.name = D.value, a.value.picture = xe.fromFileData(k.value === void 0 && V.value === void 0, F.value), g.value.length > 0 && (a.value.color = g.value[0]), b.value.length > 0 ? a.value.parent = { id: b.value[0] } : a.value.parent = {}, a.value.externalId = U.value, a.value.members = B.value.map((l) => ({ id: l.id, name: l.name })));
}
function J() {
var l, o, i, d;
(l = a.value) != null && l.picture && (k.value = (o = a.value) == null ? void 0 : o.picture.url, V.value = void 0, p && Se((d = (i = a.value) == null ? void 0 : i.picture) == null ? void 0 : d.url, (G) => {
var P, X;
k.value = ((X = (P = a.value) == null ? void 0 : P.picture) == null ? void 0 : X.url) || "", F.value = G;
}));
}
async function re() {
var l, o, i, d, G;
!a.value || (D.value = (o = (l = a.value) == null ? void 0 : l.name) != null ? o : "", Q("name", ((d = (i = a.value) == null ? void 0 : i.name) == null ? void 0 : d.length) > 0), J(), b.value = [], a.value.parent && b.value.push(a.value.parent.id), U.value = (G = a.value) == null ? void 0 : G.externalId, await ce(), ne());
}
function ne() {
z.value = void 0, t && (z.value = I.userDomain + "/web/widget/?c=" + s + "&serviceGroup=" + t);
}
function ue(l) {
var o;
!l.results || (o = a.value) != null && o.members && (B.value = l.results.filter(
(i) => i !== void 0 && a.value.members.find(
(d) => d.id === i.id
) !== void 0
));
}
async function ce() {
var l;
!((l = a.value) != null && l.members) || await S.getAllServices(s, I.email).then((o) => {
ue(o);
});
}
async function de() {
var l, o;
try {
const i = await S.getAllServiceGroups(s, I.email);
i != null && i.results && (y.value = i == null ? void 0 : i.results);
} catch (i) {
x == null || x.error("vue-settings", "loadApiData error", i), v == null || v.push({ name: W.ServicesGroups, params: { companyId: s } });
}
L ? a.value = new ke() : t && (a.value = void 0, a.value = y.value.find(
(i) => i.id === t
), n.value.titleTranslatable = !1, n.value.title = (o = (l = a.value) == null ? void 0 : l.name) != null ? o : "", p && a.value && (a.value.id = "")), await re();
}
function Q(l, o) {
const i = typeof o == "boolean" ? o : o.isValid;
switch (l) {
case "name":
r.value = i;
break;
}
}
const ve = be(() => r.value);
fe(async () => {
await de(), await H(), m.value = !1;
});
function pe() {
v == null || v.push({ name: W.ServicesGroups });
}
return {
company: T,
allServiceGroup: y,
serviceGroup: a,
loading: m,
validatedField: Q,
submitReady: ve,
serviceGroupName: D,
serviceGroupLogo: k,
serviceGroupLogoFile: V,
serviceGroupLogoFileData: F,
onServiceGroupLogoUpdated: ae,
serviceGroupColor: g,
serviceGroupWidgetUrl: z,
serviceGroupParent: b,
services: B,
serviceGroupExternalId: U,
colors: C,
parents: N,
onSave: oe,
back: pe,
pageOptions: n
};
}
const Ce = ["aria-label", "onClick"], Ee = ["aria-label", "disabled"], Le = ["disabled"], De = /* @__PURE__ */ _("i", {
class: "fa fa-check",
"aria-hidden": "true"
}, null, -1), Be = [
De
], Ne = { class: "az-flex az-flex-col az-gap-4" }, Pe = { class: "az-flex az-flex-col az-gap-4 az-h-full" }, Ae = { class: "az-min-h-250-to-full" }, Ie = { class: "az-flex az-flex-col az-gap-4" }, Qe = /* @__PURE__ */ Ge({
__name: "View",
props: {
api: {},
organisation: {},
locale: {},
companyId: {},
serviceGroupId: {},
logger: {},
new: { type: Boolean },
clone: { type: Boolean },
router: {}
},
emits: ["menuClick"],
setup(S, { emit: I }) {
function j(f) {
var r;
(r = s.logger) == null || r.debug("vue-settings", "field error", f);
}
const s = S, t = le(s.locale), {
company: x,
serviceGroup: L,
loading: p,
validatedField: v,
submitReady: T,
serviceGroupName: y,
serviceGroupLogo: a,
serviceGroupLogoFile: m,
serviceGroupLogoFileData: D,
onServiceGroupLogoUpdated: k,
serviceGroupColor: V,
serviceGroupWidgetUrl: F,
serviceGroupParent: g,
services: z,
serviceGroupExternalId: b,
colors: B,
parents: U,
onSave: c,
back: C,
pageOptions: N
} = Ue(s.api, s.organisation, s.locale, s.companyId, s.serviceGroupId, s.logger, s.new, s.clone, s.router);
return (f, r) => {
const M = he("router-link");
return O(), R(e(Ve), {
id: "settings-services-group-details",
options: e(N),
locale: s.locale,
onMobileBack: e(C)
}, {
actions: h(() => [
w(M, {
to: { name: e(W).ServicesGroups, params: { companyId: s.companyId } },
custom: ""
}, {
default: h(({ navigate: n, href: q, route: H }) => [
_("button", {
ref: "cancelButton",
"aria-label": e(t).global.t("settings.serviceGroup-details.action.back"),
class: "az-btn az-btn-color-neutral az-whitespace-nowrap",
onClick: n
}, Y(e(t).global.t("settings.serviceGroup-details.action.back")), 9, Ce)
]),
_: 1
}, 8, ["to"]),
_("button", {
"aria-label": e(t).global.t("settings.action.save"),
disabled: !e(T) || e(p),
class: "az-btn az-btn-color-primary",
onClick: r[0] || (r[0] = (...n) => e(c) && e(c)(...n))
}, Y(e(t).global.t("settings.action.save")), 9, Ee)
]),
mobileActions: h(() => [
_("button", {
class: "az-btn az-btn-color-transparent az-btn-icon-alone",
disabled: !e(T) || e(p),
onClick: r[1] || (r[1] = (...n) => e(c) && e(c)(...n)),
onKeypress: r[2] || (r[2] = ye(
(...n) => e(c) && e(c)(...n),
["enter"]
))
}, Be, 40, Le)
]),
general: h(() => [
w(e($), { id: "services-group-details-general" }, {
content: h(() => [
_("div", Ne, [
w(e(Z), {
id: "serviceGroupName",
modelValue: e(y),
"onUpdate:modelValue": r[3] || (r[3] = (n) => E(y) ? y.value = n : null),
label: e(t).global.t("settings.serviceGroup-details.name.label"),
locale: s.locale,
mandatory: e(A).mandatory,
placeholder: e(t).global.t("settings.serviceGroup-details.name.placeholder"),
onError: j,
onValidated: r[4] || (r[4] = (n) => {
e(v)("name", n);
})
}, null, 8, ["modelValue", "label", "locale", "mandatory", "placeholder", "onError"]),
e(p) ? K("", !0) : (O(), R(e(_e), {
key: 0,
id: "serviceGroupLogo",
modelValue: e(m),
"onUpdate:modelValue": [
r[5] || (r[5] = (n) => E(m) ? m.value = n : null),
e(k)
],
buttonLabel: e(t).global.t("settings.serviceGroup-details.illustration.button"),
defaultFilename: e(a) ? e(t).global.t("settings.serviceGroup-details.illustration.default-name") : void 0,
fileInfo: { maxSize: 5, extensions: [".png", ".gif", ".jpeg", ".jpg"] },
"helper-message": e(t).global.t("settings.serviceGroup-details.illustration.helper"),
label: e(t).global.t("settings.serviceGroup-details.illustration.label"),
locale: s.locale,
mandatory: e(A).optional,
placeholder: e(t).global.t("settings.serviceGroup-details.illustration.placeholder")
}, null, 8, ["modelValue", "buttonLabel", "defaultFilename", "fileInfo", "helper-message", "label", "locale", "mandatory", "placeholder", "onUpdate:modelValue"])),
e(U).length > 0 ? (O(), R(e(ee), {
key: 1,
id: "serviceGroupParent",
modelValue: e(g),
"onUpdate:modelValue": r[6] || (r[6] = (n) => E(g) ? g.value = n : null),
"helper-message": e(t).global.t("settings.serviceGroup-details.parent.helper"),
label: e(t).global.t("settings.serviceGroup-details.parent.label"),
locale: s.locale,
mandatory: e(A).optional,
placeholder: e(t).global.t("settings.serviceGroup-details.parent.none"),
values: e(U),
translatable: !1
}, null, 8, ["modelValue", "helper-message", "label", "locale", "mandatory", "placeholder", "values"])) : K("", !0),
w(e(ee), {
id: "serviceGroupColor",
modelValue: e(V),
"onUpdate:modelValue": r[7] || (r[7] = (n) => E(V) ? V.value = n : null),
"helper-message": e(t).global.t("settings.serviceGroup-details.color.helper"),
label: e(t).global.t("settings.serviceGroup-details.color.label"),
locale: s.locale,
mandatory: e(A).optional,
placeholder: e(t).global.t("settings.serviceGroup-details.color.placeholder"),
values: e(B)
}, null, 8, ["modelValue", "helper-message", "label", "locale", "mandatory", "placeholder", "values"])
])
]),
_: 1
})
]),
services: h(() => [
w(e($), {
id: "services-group-details-services",
title: e(t).global.t("settings.serviceGroup-details.service.title"),
"sub-title": e(t).global.t("settings.serviceGroup-details.service.description"),
class: "az-h-full"
}, {
content: h(() => [
_("div", Pe, [
_("div", Ae, [
e(p) ? K("", !0) : (O(), R(e(Fe), {
key: 0,
modelValue: e(z),
"onUpdate:modelValue": r[8] || (r[8] = (n) => E(z) ? z.value = n : null),
api: s.api,
"company-id": s.companyId,
locale: s.locale,
multiple: !0,
"show-title": !1
}, null, 8, ["modelValue", "api", "company-id", "locale"]))
])
])
]),
_: 1
}, 8, ["title", "sub-title"])
]),
advanced: h(() => [
w(e($), {
id: "services-group-details-external-ref",
title: e(t).global.t("settings.serviceGroup-details.external-ref.title")
}, {
content: h(() => [
_("div", Ie, [
w(e(Z), {
id: "serviceGroupExternalId",
modelValue: e(b),
"onUpdate:modelValue": r[9] || (r[9] = (n) => E(b) ? b.value = n : null),
"helper-message": e(t).global.t("settings.serviceGroup-details.external-id.helper"),
label: e(t).global.t("settings.serviceGroup-details.external-id.label"),
locale: s.locale,
mandatory: e(A).optional,
placeholder: e(t).global.t("settings.serviceGroup-details.external-id.placeholder")
}, null, 8, ["modelValue", "helper-message", "label", "locale", "mandatory", "placeholder"])
])
]),
_: 1
}, 8, ["title"])
]),
_: 1
}, 8, ["options", "locale", "onMobileBack"]);
};
}
});
export {
Qe as default
};