@agendize/vue-settings
Version:
Vue agendize's settings component
462 lines (461 loc) • 18.6 kB
JavaScript
import { defineComponent as de, ref as s, computed as ee, watch as ue, openBlock as R, createBlock as le, unref as e, withCtx as S, createVNode as p, createElementBlock as ae, toDisplayString as K, createCommentVNode as L, inject as re, toRaw as fe, createElementVNode as T, withKeys as Q, createTextVNode as ge, isRef as x } from "vue";
import { i as te } from "./index.d2d0aba2.js";
import { ModalDialogBox as me, FieldPassword as H, Mandatory as V, ConfirmDialog as be, PageWithTabsAndPanel as ve, Section as Z, FieldFile as we, FieldInput as ie, FieldEmail as ye, FieldSelect as X } from "@agendize/design-system";
import { useAccountStore as ce, onPictureUpdated as Pe, languages as Ve } from "@agendize/vue-tools";
import { _ as _e } from "./index.f5b6d925.js";
import "./vendor.26bbd9f1.js";
import "@agendize/az-i18n";
import "@agendize/js-calendar-api";
import "vue-router";
import "@agendize/vue-acl";
import "./__commonjsHelpers__.389925fa.js";
const ze = {
key: 0,
class: "az-error-label"
}, Ce = {
key: 1,
class: "az-error-label"
}, ke = /* @__PURE__ */ de({
__name: "View",
props: {
locale: {},
display: { type: Boolean },
errorMessage: {}
},
emits: ["close", "updatePassword"],
setup(I, { expose: r, emit: a }) {
const g = I, n = te(g.locale), f = a, c = s(), M = s(), _ = s(), D = s(), w = s(""), m = s(""), z = s(""), C = s(!1), N = s(void 0);
function U() {
k && (C.value = !1, m.value === z.value ? f("updatePassword", w.value, m.value) : (N.value = void 0, C.value = !0));
}
function A() {
y(), f("close");
}
function y() {
var i, u, b;
(i = M.value) == null || i.clear(), (u = _.value) == null || u.clear(), (b = D.value) == null || b.clear();
}
function E(i) {
var u;
(u = c.value) == null || u.actionInProgress(i);
}
const k = ee(() => w.value.length > 0 && m.value.length > 0 && z.value.length > 0);
return ue(() => g.errorMessage, (i) => {
N.value = i;
}), r({
updatePasswordInProgress: E,
clearFields: y
}), (i, u) => g.display ? (R(), le(e(me), {
key: 0,
id: "updatePasswordModal",
ref_key: "updatePasswordModal",
ref: c,
onClose: A,
primaryAction: U,
primaryLabel: e(n).global.t("settings.profile.password.change"),
primaryDisabled: !k.value,
title: e(n).global.t("settings.profile.password.title"),
locale: g.locale
}, {
content: S(() => [
p(e(H), {
id: "setting-profile-password-current",
ref_key: "currentPasswordElt",
ref: M,
label: e(n).global.t("settings.profile.password.current"),
locale: g.locale,
mandatory: e(V).mandatory,
class: "az-w-full",
modelValue: w.value,
"onUpdate:modelValue": u[0] || (u[0] = (b) => w.value = b)
}, null, 8, ["label", "locale", "mandatory", "modelValue"]),
p(e(H), {
id: "setting-profile-password-new",
ref_key: "newPasswordElt",
ref: _,
label: e(n).global.t("settings.profile.password.new"),
locale: g.locale,
mandatory: e(V).mandatory,
class: "az-w-full",
modelValue: m.value,
"onUpdate:modelValue": u[1] || (u[1] = (b) => m.value = b)
}, null, 8, ["label", "locale", "mandatory", "modelValue"]),
p(e(H), {
id: "setting-profile-password-confirm",
ref_key: "confirmPasswordElt",
ref: D,
label: e(n).global.t("settings.profile.password.confirm"),
locale: g.locale,
mandatory: e(V).mandatory,
class: "az-w-full",
modelValue: z.value,
"onUpdate:modelValue": u[2] || (u[2] = (b) => z.value = b)
}, null, 8, ["label", "locale", "mandatory", "modelValue"]),
C.value ? (R(), ae("label", ze, K(e(n).global.t("settings.profile.password.notmatch")), 1)) : L("", !0),
N.value ? (R(), ae("label", Ce, K(N.value), 1)) : L("", !0)
]),
_: 1
}, 8, ["primaryLabel", "primaryDisabled", "title", "locale"])) : L("", !0);
}
});
function he(I, r, a) {
var l, t, O, oe, se;
const g = re("createConfirmDialog"), n = re("toaster"), f = te(I), c = ce(), M = s(!1), _ = s((l = c.account.picture) == null ? void 0 : l.url), D = s(), w = s(), m = s(!1), z = s(c.account.firstName || ""), C = s(c.account.lastName || ""), N = s(c.account.email), U = s(), A = s(!1), y = s(), E = s(((t = c.account.acls) == null ? void 0 : t.map((o) => ({ label: o.organisationName || o.organisation, value: o.organisation }))) || []), k = s([((O = c.account.profileSettings) == null ? void 0 : O.defaultAccount) || ""]), i = s([((oe = c.account.profileSettings) == null ? void 0 : oe.locale) || ""]), u = s([((se = c.account.profileSettings) == null ? void 0 : se.timeZone) || ""]), b = ee(() => {
if (!(a != null && a.query.tab))
return "personalData";
const o = a == null ? void 0 : a.query.tab;
return Array.isArray(o) ? o.length == 0 || o[0] == null ? "" : o[0].toString() : o;
}), h = s(b.value), j = ee(() => {
var o, d, P, v;
if (h.value === "personalData") {
if (((o = C.value) == null ? void 0 : o.length) > 0)
return !0;
} else if (h.value === "preferences" && ((d = k.value) == null ? void 0 : d.length) > 0 && ((P = i.value) == null ? void 0 : P.length) > 0 && ((v = u.value) == null ? void 0 : v.length) > 0)
return !0;
return !1;
});
function W() {
r == null || r.back();
}
function B() {
if (j.value) {
M.value = !0;
const o = c.account;
if (h.value === "personalData")
w.value !== void 0 ? o.picture = { url: "", mimeType: "", data: w.value } : _.value !== void 0 && (o.picture = void 0), o.firstName = z.value, o.lastName = C.value;
else if (h.value === "preferences") {
const d = structuredClone(fe(o.profileSettings));
d.defaultAccount = k.value[0], d.locale = i.value[0], d.timeZone = u.value[0], o.profileSettings = d, o.picture = void 0;
}
c.updateAccount(o).then((d) => {
m.value = !1, n == null || n.success(f.global.t("settings.profile.change-success"));
}).catch((d) => {
n == null || n.error(f.global.t("settings.profile.change-error"));
}).finally(() => {
M.value = !1;
});
}
}
function Y(o, d) {
var P;
(P = U.value) == null || P.updatePasswordInProgress(!0), y.value = void 0, c.updatePassword(o, d).then((v) => {
var $;
A.value = !1, n == null || n.success(f.global.t("settings.profile.password.change-success")), ($ = U.value) == null || $.clearFields();
}).catch((v) => {
v.errorCode == "USER_ACCOUNT_LOCKED" ? y.value = f.global.t("settings.profile.error.101") : v.errorCode == "CREDENTIAL_ERROR" ? y.value = f.global.t("settings.profile.error.100") : v.errorCode == "PASSWORD_POLICY_ERROR" ? y.value = f.global.t("settings.profile.error.102") : n == null || n.error(f.global.t("settings.profile.password.change-error"));
}).finally(() => {
var v;
(v = U.value) == null || v.updatePasswordInProgress(!1);
});
}
function q(o) {
A.value = o;
}
function G(o) {
m.value = !0, Pe(o, {
urlPicture: _,
pictureAsData: w,
filePicture: D
});
}
function J(o) {
h.value = o.id;
}
async function F(o) {
var v, $, ne;
let d = !1;
const P = c.account;
if (o.id === "personalData" ? (k.value[0] !== ((v = P.profileSettings) == null ? void 0 : v.defaultAccount) || i.value[0] !== (($ = P.profileSettings) == null ? void 0 : $.locale) || u.value[0] !== ((ne = P.profileSettings) == null ? void 0 : ne.timeZone)) && (d = !0) : (m.value || z.value !== P.firstName || C.value !== P.lastName) && (d = !0), d && g) {
const { reveal: pe } = g(be, {
locale: I,
closeOnBlurClick: !0,
confirmation: f.global.t("common.action.confirm"),
description: f.global.t("common.dialog.changeTab.description"),
title: f.global.t("common.dialog.changeTab.title")
});
d = (await pe()).isCanceled;
}
return !d;
}
return {
currentTab: h,
defaultTab: b,
actionInProgress: M,
profilePhoto: _,
profilePhotoFile: D,
firstName: z,
lastName: C,
email: N,
updatePasswordModal: U,
updatePasswordDialogShown: A,
passwordErrorMessage: y,
accounts: E,
defaultAccount: k,
language: i,
timeZone: u,
formValid: j,
saveProfile: B,
updateProfilePhoto: G,
changeTab: J,
showUpdatePasswordDialog: q,
acceptTabChanged: F,
updatePassword: Y,
back: W
};
}
const Se = ["aria-label"], Te = ["disabled"], De = {
key: 0,
class: "az-animate-spin fa-solid fa-spinner-third",
"aria-hidden": "true"
}, Ue = ["disabled"], Ae = /* @__PURE__ */ T("i", {
class: "fa fa-check",
"aria-hidden": "true"
}, null, -1), Me = [
Ae
], Ne = { class: "az-flex az-flex-row az-w-full az-gap-2 sm:az-flex-col" }, Ee = /* @__PURE__ */ T("div", { class: "az-divider" }, null, -1), Fe = /* @__PURE__ */ T("div", { class: "az-divider" }, null, -1), xe = { class: "az-flex az-w-full az-gap-2 az-place-items-end" }, Ie = /* @__PURE__ */ T("div", { class: "az-divider" }, null, -1), Ye = /* @__PURE__ */ de({
__name: "View",
props: {
locale: {},
router: {},
route: {},
tab: {}
},
setup(I) {
const r = I, a = te(r.locale), g = s();
ue(() => r.tab, (F) => {
var t, O;
const l = F;
!l || (Array.isArray(l) ? n.value = l[0] : n.value = l, (t = g.value) != null && t.onTabHeaderClick && ((O = g.value) == null || O.onTabHeaderClick({ id: n.value })));
});
const {
currentTab: n,
defaultTab: f,
actionInProgress: c,
profilePhoto: M,
profilePhotoFile: _,
firstName: D,
lastName: w,
email: m,
updatePasswordModal: z,
updatePasswordDialogShown: C,
passwordErrorMessage: N,
accounts: U,
defaultAccount: A,
language: y,
timeZone: E,
formValid: k,
saveProfile: i,
updateProfilePhoto: u,
changeTab: b,
showUpdatePasswordDialog: h,
acceptTabChanged: j,
updatePassword: W,
back: B
} = he(r.locale, r.router, r.route);
ce();
const Y = { maxSize: 5, extensions: [".jpg", ".png", ".gif", ".svg"] }, q = s("Password23!"), G = _e.map((F) => ({ label: F.tzCode, value: F.tzCode })), J = {
title: a.global.t("settings.profile.title"),
tabs: [
{ id: "personalData", title: a.global.t("settings.profile.personal_data") },
{ id: "preferences", title: a.global.t("settings.profile.preferences") }
],
mobileBack: !0,
initialTabId: f.value
};
return (F, l) => (R(), le(e(ve), {
ref_key: "profileSettingsPage",
ref: g,
style: "padding:0",
options: J,
locale: r.locale,
acceptTabChanged: e(j),
onTabClick: e(b),
onMobileBack: e(B)
}, {
actions: S(() => [
T("button", {
ref: "cancelButton",
onClick: l[0] || (l[0] = (...t) => e(B) && e(B)(...t)),
class: "az-btn az-btn-color-neutral az-whitespace-nowrap",
"aria-label": e(a).global.t("settings.action.cancel")
}, K(e(a).global.t("settings.action.back")), 9, Se),
T("button", {
disabled: !e(k) || e(c),
class: "az-btn",
onClick: l[1] || (l[1] = (...t) => e(i) && e(i)(...t)),
onKeypress: l[2] || (l[2] = Q(
(...t) => e(i) && e(i)(...t),
["enter"]
))
}, [
e(c) ? (R(), ae("i", De)) : L("", !0),
ge(K(e(a).global.t("settings.profile.save")), 1)
], 40, Te)
]),
mobileActions: S(() => [
T("button", {
disabled: !e(k),
class: "az-btn az-btn-color-transparent az-btn-icon-alone",
onClick: l[3] || (l[3] = (...t) => e(i) && e(i)(...t)),
onKeypress: l[4] || (l[4] = Q(
(...t) => e(i) && e(i)(...t),
["enter"]
))
}, Me, 40, Ue)
]),
personalData: S(() => [
p(e(Z), {
id: "setting-profile-personal_data-identity-section",
title: e(a).global.t("settings.profile.personal_data"),
subTitle: ""
}, {
content: S(() => [
p(e(we), {
id: "setting-profile-personal_data_photo",
label: e(a).global.t("settings.profile.photo.label"),
locale: r.locale,
mandatory: e(V).optional,
fileInfo: Y,
"onUpdate:modelValue": [
e(u),
l[5] || (l[5] = (t) => x(_) ? _.value = t : null)
],
modelValue: e(_),
defaultFilename: e(M) ? e(a).global.t("settings.profile.photo.default-name") : void 0
}, null, 8, ["label", "locale", "mandatory", "onUpdate:modelValue", "modelValue", "defaultFilename"]),
T("div", Ne, [
p(e(ie), {
id: "setting-profile-personal_data_firstname",
label: e(a).global.t("settings.profile.firstname"),
locale: r.locale,
class: "az-w-full",
mandatory: e(V).optional,
modelValue: e(D),
"onUpdate:modelValue": l[6] || (l[6] = (t) => x(D) ? D.value = t : null)
}, null, 8, ["label", "locale", "mandatory", "modelValue"]),
p(e(ie), {
id: "setting-profile-personal_data_lastname",
label: e(a).global.t("settings.profile.lastname"),
locale: r.locale,
class: "az-w-full",
mandatory: e(V).mandatory,
modelValue: e(w),
"onUpdate:modelValue": l[7] || (l[7] = (t) => x(w) ? w.value = t : null)
}, null, 8, ["label", "locale", "mandatory", "modelValue"])
])
]),
_: 1
}, 8, ["title"]),
Ee,
p(e(Z), {
id: "setting-profile-personal_data-email-section",
title: e(a).global.t("settings.profile.contact.title"),
"sub-title": e(a).global.t("settings.profile.contact.description")
}, {
content: S(() => [
p(e(ye), {
id: "setting-profile-personal_data_email",
label: e(a).global.t("settings.profile.email"),
locale: r.locale,
mandatory: e(V).mandatory,
modelValue: e(m),
"onUpdate:modelValue": l[8] || (l[8] = (t) => x(m) ? m.value = t : null),
disabled: !0
}, null, 8, ["label", "locale", "mandatory", "modelValue"])
]),
_: 1
}, 8, ["title", "sub-title"]),
Fe,
p(e(Z), {
id: "setting-profile-personal_data-password-section",
title: e(a).global.t("settings.profile.security.title"),
"sub-title": e(a).global.t("settings.profile.security.description")
}, {
content: S(() => [
T("div", xe, [
p(ke, {
ref_key: "updatePasswordModal",
ref: z,
display: e(C),
locale: r.locale,
errorMessage: e(N),
onUpdatePassword: e(W),
onClose: l[9] || (l[9] = (t) => e(h)(!1))
}, null, 8, ["display", "locale", "errorMessage", "onUpdatePassword"]),
p(e(H), {
id: "setting-profile-personal_data_password",
label: e(a).global.t("settings.profile.password.label"),
locale: r.locale,
mandatory: e(V).mandatory,
class: "az-w-full",
disabled: !0,
modelValue: q.value,
"onUpdate:modelValue": l[10] || (l[10] = (t) => q.value = t)
}, null, 8, ["label", "locale", "mandatory", "modelValue"]),
T("button", {
class: "az-btn az-btn-color-secondary",
onClick: l[11] || (l[11] = () => e(h)(!0)),
onKeypress: l[12] || (l[12] = Q(() => e(h)(!0), ["enter"]))
}, K(e(a).global.t("settings.profile.password.reset")), 33)
])
]),
_: 1
}, 8, ["title", "sub-title"])
]),
preferences: S(() => [
p(e(Z), { id: "setting-profile-preferences_account-section" }, {
content: S(() => [
e(U) ? (R(), le(e(X), {
key: 0,
id: "setting-profile-preferences_account",
label: e(a).global.t("settings.profile.default_account"),
locale: r.locale,
mandatory: e(V).mandatory,
disabled: !1,
values: e(U),
modelValue: e(A),
"onUpdate:modelValue": l[13] || (l[13] = (t) => x(A) ? A.value = t : null),
translatable: !1
}, null, 8, ["label", "locale", "mandatory", "values", "modelValue"])) : L("", !0)
]),
_: 1
}),
Ie,
p(e(Z), {
id: "setting-profile-preferences_language-section",
title: e(a).global.t("settings.profile.language.title"),
"sub-title": e(a).global.t("settings.profile.language.description")
}, {
content: S(() => [
p(e(X), {
id: "setting-profile-preferences_language",
label: e(a).global.t("settings.profile.language.label"),
locale: r.locale,
mandatory: e(V).mandatory,
translatable: !1,
disabled: !1,
values: e(Ve),
modelValue: e(y),
"onUpdate:modelValue": l[14] || (l[14] = (t) => x(y) ? y.value = t : null)
}, null, 8, ["label", "locale", "mandatory", "values", "modelValue"]),
p(e(X), {
id: "setting-profile-preferences_timezone",
label: e(a).global.t("settings.profile.timezone"),
locale: r.locale,
mandatory: e(V).mandatory,
disabled: !1,
values: e(G),
modelValue: e(E),
"onUpdate:modelValue": l[15] || (l[15] = (t) => x(E) ? E.value = t : null)
}, null, 8, ["label", "locale", "mandatory", "values", "modelValue"])
]),
_: 1
}, 8, ["title", "sub-title"])
]),
_: 1
}, 8, ["locale", "acceptTabChanged", "onTabClick", "onMobileBack"]));
}
});
export {
Ye as default
};