@agendize/vue-settings
Version:
Vue agendize's settings component
412 lines (411 loc) • 17.1 kB
JavaScript
import { ref as c, inject as ma, computed as va, onMounted as ba, defineComponent as ya, resolveComponent as ha, openBlock as F, createBlock as Z, unref as a, withCtx as g, createVNode as m, createElementVNode as d, toDisplayString as V, withKeys as aa, isRef as L, createElementBlock as ta, Fragment as ea, renderList as Ga, createCommentVNode as ka } from "vue";
import { PageWithTabsAndPanel as _a, Section as M, FieldInput as la, Mandatory as P, FieldSelect as wa } from "@agendize/design-system";
import { i as sa, S as R } from "./index.d2d0aba2.js";
import { StaffGroupEntity as za } from "@agendize/js-calendar-api";
import { p as Sa } from "./common.6fc78cfb.js";
import { _ as xa } from "./View.vue_vue_type_script_setup_true_lang.434f3142.js";
import { useAccountStore as Na } from "@agendize/vue-tools";
import { UserObjectSearch as Ca, StaffObjectSearch as Va } from "@agendize/vue-search";
import "./vendor.26bbd9f1.js";
import "@agendize/az-i18n";
import "vue-router";
import "@agendize/vue-acl";
function Wa(z, Y, W, i, e, h, I, B, v) {
const S = c(), l = c(), G = c(!0), k = c(""), b = c(["green"]), D = c(), H = c([]), x = c([]), E = c(), N = c([]), T = c(["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"]), U = c(!1), f = sa(Y), C = c([]), _ = ma("toaster"), y = c(!1), A = c({
title: f.global.t("settings.staffGroup-details.title"),
subTitle: f.global.t("settings.staffGroup-details.subTitle"),
mobileBack: !0,
tabs: [
{ id: "general", title: f.global.t("settings.staffGroup-details.tabs.general") },
{ id: "staffs", title: f.global.t("settings.staffGroup-details.tabs.staffs") },
{ id: "availability", title: f.global.t("settings.staffGroup-details.tabs.availability") },
{ id: "advanced", title: f.global.t("settings.staffGroup-details.tabs.advanced") }
]
});
function j() {
var s, u, p;
if (b.value = [], !((s = l.value) != null && s.color))
return;
const t = "" + ((u = l.value) == null ? void 0 : u.color);
((p = l.value) == null ? void 0 : p.color) && C.value.filter(($) => $.value === t).length === 0 && C.value.push({ label: t, value: t }), b.value.push(t);
}
async function O() {
Sa(C.value, f), j();
}
function r(t) {
t && (_ == null || _.success(f.global.t("settings.staffGroup-details.save-success")), (I || B) && (l.value = t, v == null || v.push({
name: R.StaffsGroupDetails,
params: { companyId: i, staffGroupId: l.value.id }
})), G.value = !1);
}
function n() {
G.value = !0, l.value && (w(), K().then((t) => {
r(t);
}).catch((t) => {
h == null || h.debug("vue-settings", "[Staff group Details] Error", t), _ == null || _.error(f.global.t("settings.staffGroup-details.save-error")), G.value = !1;
}));
}
async function K() {
if (!!l.value)
return I || B ? await z.createStaffGroup(i, l.value) : await z.updateStaffGroup(i, e, l.value);
}
function o(t) {
var u;
const s = (u = N.value) == null ? void 0 : u.find((p) => p.day === t);
return s ? s.hours.map((p) => `${p.start} - ${p.end}`).join(" / ") : f.global.t("settings.common.day.closed");
}
function w() {
!l.value || !k.value || (l.value.name = k.value, b.value.length > 0 && (l.value.color = b.value[0]), l.value.externalId = E.value, l.value.members = H.value.map((t) => ({ id: t.id, firstName: t.firstName || "", lastName: t.lastName || "" })), l.value.managers = x.value.map((t) => {
var s, u;
return { id: t.id, firstName: (s = t.firstName) != null ? s : "", lastName: (u = t.lastName) != null ? u : "" };
}), l.value.workingHours = N.value);
}
async function q() {
var t, s, u, p, $, Q, X;
!l.value || (k.value = (s = (t = l.value) == null ? void 0 : t.name) != null ? s : "", J("name", ((p = (u = l.value) == null ? void 0 : u.name) == null ? void 0 : p.length) > 0), E.value = ($ = l.value) == null ? void 0 : $.externalId, await fa(), await da(), na(), N.value = (X = (Q = l.value) == null ? void 0 : Q.workingHours) != null ? X : []);
}
function oa() {
U.value = !0;
}
function ia(t) {
N.value = t, U.value = !1;
}
function na() {
D.value = void 0, e && (D.value = W.userDomain + "/web/widget/?c=" + i + "&staffGroup=" + e);
}
function ra(t) {
var s;
!t.results || (s = l.value) != null && s.members && (H.value = t.results.filter(
(u) => u !== void 0 && l.value.members.find(
(p) => p.id === u.id
) !== void 0
));
}
function ua(t) {
!t.results || (x.value = t.results.filter(
(s) => {
var u;
return s !== void 0 && ((u = l.value.managers) == null ? void 0 : u.find((p) => p.id === s.id)) !== void 0;
}
));
}
async function da() {
var t;
!((t = l.value) != null && t.managers) || await z.getAllUsers(W.email).then((s) => {
ua(s);
});
}
async function fa() {
var t;
!((t = l.value) != null && t.members) || await z.getAllStaffs(i, W.email).then((s) => {
ra(s);
});
}
async function ca() {
var t;
if (I)
l.value = new za();
else if (e)
try {
const s = await z.getStaffGroupById(i, e, W.email);
s != null && s.result && (l.value = s.result, A.value.titleTranslatable = !1, A.value.title = (t = l.value) == null ? void 0 : t.name, B && (l.value.id = ""));
} catch (s) {
h == null || h.debug("vue-settings", "loadApiData error", s), v == null || v.push({ name: R.StaffsGroups, params: { companyId: i } });
}
await q();
}
function J(t, s) {
const u = typeof s == "boolean" ? s : s.isValid;
switch (t) {
case "name":
y.value = u;
break;
}
}
const pa = va(() => y.value);
ba(async () => {
await ca(), await O(), G.value = !1;
});
function ga() {
v == null || v.push({ name: R.StaffsGroups });
}
return {
company: S,
staffGroup: l,
loading: G,
validatedField: J,
submitReady: pa,
staffGroupName: k,
staffGroupColor: b,
staffGroupWidgetUrl: D,
staffs: H,
staffGroupExternalId: E,
colors: C,
formatWorkingHours: o,
WORKING_DAYS: T,
staffGroupWorkingHours: N,
onWorkingHoursEdit: oa,
showWorkingHoursModal: U,
onWorkingHoursModalSave: ia,
onSave: n,
back: ga,
pageOptions: A,
managers: x
};
}
const Ha = ["aria-label", "onClick"], Ia = ["aria-label", "disabled"], Ea = ["disabled"], Ua = /* @__PURE__ */ d("i", {
class: "fa fa-check",
"aria-hidden": "true"
}, null, -1), Aa = [
Ua
], Ma = { class: "az-flex az-flex-col az-gap-4" }, Ba = { class: "az-flex az-flex-col az-gap-2" }, Da = { class: "az-settings-hours" }, Oa = { class: "" }, $a = { class: "az-body-1 az-font-medium" }, Fa = { class: "az-body-2" }, Ra = { class: "az-flex az-flex-col az-items-end" }, Ta = { class: "az-settings-hours-list" }, ja = { class: "az-font-medium" }, Ka = { class: "az-flex az-w-full az-justify-end" }, La = { class: "az-flex az-flex-col az-gap-4" }, ot = /* @__PURE__ */ ya({
__name: "View",
props: {
api: {},
organisation: {},
locale: {},
companyId: {},
staffGroupId: {},
logger: {},
new: { type: Boolean },
clone: { type: Boolean },
router: {}
},
emits: ["menuClick"],
setup(z, { emit: Y }) {
function W(r) {
var n;
(n = i.logger) == null || n.debug("vue-settings", "field error", r);
}
const i = z, e = sa(i.locale);
Na();
function h(r) {
H.value = r;
}
function I(r) {
O.value = r;
}
const {
company: B,
staffGroup: v,
loading: S,
validatedField: l,
submitReady: G,
staffGroupName: k,
staffGroupColor: b,
staffGroupWidgetUrl: D,
staffs: H,
staffGroupExternalId: x,
colors: E,
staffGroupWorkingHours: N,
formatWorkingHours: T,
WORKING_DAYS: U,
onWorkingHoursEdit: f,
showWorkingHoursModal: C,
onWorkingHoursModalSave: _,
onSave: y,
back: A,
pageOptions: j,
managers: O
} = Wa(i.api, i.locale, i.organisation, i.companyId, i.staffGroupId, i.logger, i.new, i.clone, i.router);
return (r, n) => {
const K = ha("router-link");
return F(), Z(a(_a), {
id: "settings-staffs-group-details",
options: a(j),
locale: i.locale,
onMobileBack: a(A)
}, {
actions: g(() => [
m(K, {
to: { name: a(R).StaffsGroups, params: { companyId: i.companyId } },
custom: ""
}, {
default: g(({ navigate: o, href: w, route: q }) => [
d("button", {
ref: "cancelButton",
"aria-label": a(e).global.t("settings.staffGroup-details.action.back"),
class: "az-btn az-btn-color-neutral az-whitespace-nowrap",
onClick: o
}, V(a(e).global.t("settings.staffGroup-details.action.back")), 9, Ha)
]),
_: 1
}, 8, ["to"]),
d("button", {
"aria-label": a(e).global.t("settings.action.save"),
disabled: !a(G) || a(S),
class: "az-btn az-btn-color-primary",
onClick: n[0] || (n[0] = (...o) => a(y) && a(y)(...o))
}, V(a(e).global.t("settings.action.save")), 9, Ia)
]),
mobileActions: g(() => [
d("button", {
class: "az-btn az-btn-color-transparent az-btn-icon-alone",
disabled: !a(G) || a(S),
onClick: n[1] || (n[1] = (...o) => a(y) && a(y)(...o)),
onKeypress: n[2] || (n[2] = aa(
(...o) => a(y) && a(y)(...o),
["enter"]
))
}, Aa, 40, Ea)
]),
general: g(() => [
m(a(M), { id: "staffs-group-details-general" }, {
content: g(() => [
d("div", Ma, [
m(a(la), {
id: "staffGroupName",
modelValue: a(k),
"onUpdate:modelValue": n[3] || (n[3] = (o) => L(k) ? k.value = o : null),
label: a(e).global.t("settings.staffGroup-details.name.label"),
locale: i.locale,
mandatory: a(P).mandatory,
placeholder: a(e).global.t("settings.staffGroup-details.name.placeholder"),
onError: W,
onValidated: n[4] || (n[4] = (o) => {
a(l)("name", o);
})
}, null, 8, ["modelValue", "label", "locale", "mandatory", "placeholder", "onError"]),
m(a(wa), {
id: "staffGroupColor",
modelValue: a(b),
"onUpdate:modelValue": n[5] || (n[5] = (o) => L(b) ? b.value = o : null),
"helper-message": a(e).global.t("settings.staffGroup-details.color.helper"),
label: a(e).global.t("settings.staffGroup-details.color.label"),
locale: i.locale,
mandatory: a(P).optional,
placeholder: a(e).global.t("settings.staffGroup-details.color.placeholder"),
values: a(E)
}, null, 8, ["modelValue", "helper-message", "label", "locale", "mandatory", "placeholder", "values"])
])
]),
_: 1
})
]),
staffs: g(() => [
m(a(M), {
id: "staffs-group-details-manager",
title: a(e).global.t("settings.staffGroup-details.manager.title"),
"sub-title": a(e).global.t("settings.staffGroup-details.manager.description")
}, {
content: g(() => [
m(a(Ca), {
api: r.api,
locale: r.locale,
users: a(O),
companyId: r.companyId,
loading: a(S),
"search-label": a(e).global.t("settings.staffGroup-details.manager.search.searchLabel"),
"modal-title": a(e).global.t("settings.staffGroup-details.manager.search.add.title"),
"modal-description": a(e).global.t("settings.staffGroup-details.manager.search.add.description"),
"context-type": `link team ${r.clone ? "0" : r.staffGroupId} manager`,
organisation: r.organisation.email,
"text-to-type": (o) => {
var w;
return (w = o.login) != null ? w : "";
},
"text-to-id": (o) => {
var w;
return (w = o.id) != null ? w : "";
},
onChangeUsers: I
}, null, 8, ["api", "locale", "users", "companyId", "loading", "search-label", "modal-title", "modal-description", "context-type", "organisation", "text-to-type", "text-to-id"])
]),
_: 1
}, 8, ["title", "sub-title"]),
m(a(M), {
id: "staffs-group-details-staffs",
title: a(e).global.t("settings.staffGroup-details.staff.title"),
"sub-title": a(e).global.t("settings.staffGroup-details.staff.description")
}, {
content: g(() => [
m(a(Va), {
api: r.api,
locale: r.locale,
staffs: a(H),
companyId: r.companyId,
loading: a(S),
"search-label": a(e).global.t("settings.staffGroup-details.staff.search.searchLabel"),
"modal-title": a(e).global.t("settings.staffGroup-details.staff.search.add.title"),
"modal-description": a(e).global.t("settings.staffGroup-details.staff.search.add.description"),
"context-type": `link team ${r.clone ? "0" : r.staffGroupId} staff`,
onChangeStaffs: h
}, null, 8, ["api", "locale", "staffs", "companyId", "loading", "search-label", "modal-title", "modal-description", "context-type"])
]),
_: 1
}, 8, ["title", "sub-title"])
]),
availability: g(() => [
m(a(M), {
id: "staffs-group-details-availability",
title: a(e).global.t("settings.staffGroup-details.availability.title")
}, {
content: g(() => [
d("div", Ba, [
d("div", Da, [
d("div", Oa, [
d("div", $a, V(a(e).global.t("settings.company-details.hours.open")), 1),
d("div", Fa, V(a(e).global.t("settings.company-details.hours.all-weeks")), 1)
]),
d("div", Ra, [
d("div", Ta, [
(F(!0), ta(ea, null, Ga(a(U), (o) => (F(), ta(ea, null, [
d("div", ja, V(a(e).global.t(`settings.common.day.${o}`)) + " :", 1),
d("div", null, V(a(T)(o)), 1)
], 64))), 256))
]),
a(S) ? ka("", !0) : (F(), Z(xa, {
key: 0,
display: a(C),
locale: i.locale,
workingHours: a(N),
onClose: n[6] || (n[6] = (o) => C.value = !1),
onSave: a(_)
}, null, 8, ["display", "locale", "workingHours", "onSave"]))
]),
d("div", Ka, [
d("button", {
class: "az-btn az-btn-color-neutral az-w-fit",
onClick: n[7] || (n[7] = (...o) => a(f) && a(f)(...o)),
onKeyup: n[8] || (n[8] = aa(
(...o) => a(f) && a(f)(...o),
["enter"]
))
}, V(a(e).global.t("settings.company-details.hours.edit")), 33)
])
])
])
]),
_: 1
}, 8, ["title"])
]),
advanced: g(() => [
m(a(M), {
id: "staffs-group-details-advanced-external-ref",
title: a(e).global.t("settings.staffGroup-details.external-ref.title")
}, {
content: g(() => [
d("div", La, [
m(a(la), {
id: "staffGroupExternalId",
modelValue: a(x),
"onUpdate:modelValue": n[9] || (n[9] = (o) => L(x) ? x.value = o : null),
"helper-message": a(e).global.t("settings.staffGroup-details.external-id.helper"),
label: a(e).global.t("settings.staffGroup-details.external-id.label"),
locale: i.locale,
mandatory: a(P).optional,
placeholder: a(e).global.t("settings.staffGroup-details.external-id.placeholder")
}, null, 8, ["modelValue", "helper-message", "label", "locale", "mandatory", "placeholder"])
])
]),
_: 1
}, 8, ["title"])
]),
_: 1
}, 8, ["options", "locale", "onMobileBack"]);
};
}
});
export {
ot as default
};