@agendize/vue-settings
Version:
Vue agendize's settings component
549 lines (548 loc) • 23.3 kB
JavaScript
import { ref as s, computed as E, onMounted as be, defineComponent as me, watch as ue, openBlock as V, createBlock as A, unref as e, withCtx as m, createVNode as M, createTextVNode as pe, toDisplayString as ye, createCommentVNode as x, createElementBlock as ke, Fragment as Ve, createElementVNode as de } from "vue";
import { StructuredLayout as Se, StructuredSection as fe, StructuredFormLayout as we, FieldInput as Ie, Mandatory as Y, FieldTinyMce as Me, FieldFile as Ae, FieldDuration as Be, FieldNumber as Fe, FieldSelect as Le, Button as Q, StructuredListItem as Ue, AzAvatar as Pe, StructuredPage as De, UnsavedChangesDialog as ze } from "@agendize/design-system";
import { u as ee } from "./vendor.26bbd9f1.js";
import { onBeforeRouteLeave as Ne } from "vue-router";
import { useApi as he, useAccountStore as _e, useLogger as xe, defineAsyncComponentWithLoading as W, readBlobFromUrl as $e, toBase64 as He } from "@agendize/vue-tools";
import { S as Ee } from "./index.d2d0aba2.js";
import { useToast as Oe } from "vue-toastification";
import { ImageEntity as Ge } from "@agendize/js-calendar-api";
function je(d, S, o, u, i, X, O, G, f) {
const w = s("general"), $ = s(), p = s();
s([]);
const L = s(), g = s(!1);
function P() {
g.value = !0;
}
const r = he(), U = _e(), C = E(() => {
var l, _;
return (_ = (l = U.account.profileSettings) == null ? void 0 : l.timeZone) != null ? _ : "Europe/Paris";
}), y = s(!1), v = Oe(), { t: T } = ee(), k = xe(), a = s(!1), h = s(!0);
function H(l) {
h.value = l;
}
async function Z(l) {
l ? (L.value = void 0, a.value = !1) : a.value ? (a.value = !1, w.value = $.value, g.value = !1, h.value = !1, u.value.changeTab()) : (g.value = !1, await (f == null ? void 0 : f.push({ name: L.value.name })));
}
function D() {
f == null || f.back();
}
function z(l) {
g.value ? (a.value = !0, $.value = l) : (w.value = l, g.value = !1, h.value = !1, u.value.changeTab());
}
function B(l = !1) {
h.value ? (w.value === "general" && F(l), w.value === "form" && j(l), w.value === "advanced" && N(l)) : v == null || v.error(T("settings.conferences.details.save-field-error"));
}
function b(l, _, q, K) {
y.value = !0, l().then(() => {
v == null || v.success(T(q)), g.value = !1, _ && !a.value ? f == null || f.push({ name: L.value.name }) : a.value && (a.value = !1, w.value = $.value, g.value = !1, h.value = !1, u.value.changeTab());
}).catch(() => {
v == null || v.error(T(K));
}).finally(() => {
y.value = !1;
});
}
function N(l) {
p.value = G.value.getConferenceBeforeSave(), b(
() => r.updateConference(d, S, p.value, C.value),
l,
"settings.conferences.details.save-success",
"settings.conferences.details.save-error"
);
}
function j(l) {
var q, K;
const _ = O == null ? void 0 : O.value.getConferenceFormBeforeSave();
if (!_ || !p.value) {
y.value = !1, (q = o.value) != null && q.inProgress && ((K = o.value) == null || K.inProgress(!1));
return;
}
p.value.form = _, b(
() => r.updateConference(d, S, p.value, C.value),
l,
"settings.conferences.details.save-success",
"settings.conferences.details.save-error"
);
}
function F(l) {
p.value = i.value.getConferenceBeforeSave(), b(
() => r.updateConference(d, S, p.value, C.value),
l,
"settings.conferences.details.save-success",
"settings.conferences.details.save-error"
);
}
function J() {
r.getConferenceById(d, S, C.value).then((l) => {
l && l.result && (p.value = l.result);
}).catch((l) => {
k == null || k.error("vue-settings", "[Conference Details] get conference error", l), f == null || f.push({ name: Ee.ConferencesList });
});
}
return be(() => {
J();
}), {
conference: p,
back: D,
save: B,
saveInProgress: y,
formValid: h,
hasChange: g,
nextPage: L,
exit: Z,
currentTabId: w,
changeTab: z,
isChangeTab: a,
changedField: P,
validate: H
};
}
function qe(d, S) {
if (!d.address || !d.address.street || !d.address.city)
return d.name;
let o = d.address.street;
return d.address.zipCode && (o += ` ${d.address.zipCode}`), o += ` ${d.address.city}`, d.address.country && (o += `, ${S.of(d.address.country)}`), `${d.name} (${o})`;
}
const ve = 1440, ge = 100, Ke = /* @__PURE__ */ me({
__name: "GeneralInformations",
props: {
conference: {},
organisation: {}
},
emits: ["hasChange", "valid"],
setup(d, { expose: S, emit: o }) {
const u = d, { t: i, locale: X } = ee(), O = he(), G = "VITE_TINYMCE_KEY", f = o, w = { maxSize: 5, extensions: [".jpg", ".png", ".gif", ".svg"] }, $ = W(() => import("./ConferenceLocationModal.5eb08f88.js")), p = [{
label: i("settings.conferences.details.general.fields.visibility.values.private.label"),
value: "private"
}, {
label: i("settings.conferences.details.general.fields.visibility.values.public.label"),
value: "public"
}], L = s([]), g = s(""), P = s(""), r = s(), U = s(), C = s(), y = s(1), v = s("hours"), T = s(1), k = s([]), a = s(), h = s(!1);
L.value.push(g, P, r, U, y, v, T, k), s(!1);
const H = s(), Z = E(() => H.value ? qe(H.value, new Intl.DisplayNames([X.value], { type: "region" })) : ""), D = E(() => {
var n, t;
return ((n = g.value) != null ? n : "").trim().length > 0 && (y.value || 0) > 0 && v.value && N() <= ve && (T.value || 0) > 0 && (T.value || 0) <= ge && (((t = k.value) == null ? void 0 : t.length) || 0 > 0);
});
function z() {
var n, t;
u.conference.picture && (r.value = (n = u.conference.picture) == null ? void 0 : n.url, U.value = void 0, $e((t = u.conference.picture) == null ? void 0 : t.url, (c) => {
var I;
r.value = ((I = u.conference.picture) == null ? void 0 : I.url) || "", C.value = c;
}));
}
function B(n) {
r.value = void 0, U.value = n, C.value = void 0, n && He(n).then((t) => {
!t || typeof t == "string" && (C.value = t);
});
}
function b(n) {
y.value = n.duration, v.value = n.durationUnit;
}
function N() {
let n;
return v.value === "minutes" ? n = y.value : n = y.value * 60, n;
}
function j() {
let n = u.conference;
return n.name = g.value, n.description = P.value, n.picture = Ge.fromFileData(r.value === void 0 && U.value === void 0, C.value), n.duration = N(), n.capacity = T.value, n.availability = k.value[0], n.location = a.value, n;
}
const F = E(() => {
var n, t, c;
return a.value && ((n = a.value) == null ? void 0 : n.type) && ((c = (t = a.value) == null ? void 0 : t.type) == null ? void 0 : c.length) > 0;
}), J = E(() => {
var n;
if (F)
switch ((n = a.value) == null ? void 0 : n.type) {
case "address":
return { label: i("settings.conferences.details.general.location.address.title"), needTranslation: !0 };
case "link":
return { label: i("settings.conferences.details.general.location.link.title"), needTranslation: !0 };
case "custom":
return { label: i("settings.conferences.details.general.location.custom.title"), needTranslation: !0 };
case "schedulingCompanyAddress":
return { label: i("settings.conferences.details.general.location.address.company.title"), needTranslation: !0 };
}
}), l = E(() => {
var n, t, c, I, R, ae, te, le, se, oe, ie, re, ce;
if (F)
switch ((n = a.value) == null ? void 0 : n.type) {
case "address":
const Te = new Intl.DisplayNames([X.value], { type: "region" });
return {
label: ((t = a.value) == null ? void 0 : t.street) + ((c = a.value) != null && c.additionalStreet ? " " + ((I = a.value) == null ? void 0 : I.additionalStreet) : "") + ", " + ((R = a.value) == null ? void 0 : R.zipCode) + " " + ((ae = a.value) == null ? void 0 : ae.city) + " " + ((se = Te.of((le = (te = a.value) == null ? void 0 : te.country) != null ? le : "")) == null ? void 0 : se.toUpperCase()),
needTranslation: !1
};
case "link":
return { label: (ie = (oe = a.value) == null ? void 0 : oe.link) != null ? ie : "", needTranslation: !1 };
case "custom":
return { label: (ce = (re = a.value) == null ? void 0 : re.text) != null ? ce : "", needTranslation: !1 };
case "schedulingCompanyAddress":
return { label: Z.value, needTranslation: !1 };
}
}), _ = E(() => {
var n;
if (F)
switch ((n = a.value) == null ? void 0 : n.type) {
case "address":
case "schedulingCompanyAddress":
return "fa-location-dot";
case "link":
return "fa-video";
case "custom":
return "fa-i-cursor";
}
});
function q() {
a.value = void 0, H.value = void 0, f("hasChange");
}
function K(n) {
h.value = !1, a.value = n, ne(), f("hasChange");
}
function Ce() {
h.value = !1;
}
function ne() {
var n, t, c;
((n = a.value) == null ? void 0 : n.type) === "schedulingCompanyAddress" && ((t = a.value) == null ? void 0 : t.companyId) && O.getCompanyById((c = a.value) == null ? void 0 : c.companyId, u.organisation.email).then((I) => {
var R;
I.result && I.result.id === ((R = a.value) == null ? void 0 : R.companyId) && (H.value = I.result);
});
}
return be(async () => {
g.value = u.conference.name, P.value = u.conference.description || "", y.value = u.conference.duration, v.value = "minutes", u.conference.duration % 60 === 0 && (y.value = u.conference.duration / 60, v.value = "hours"), T.value = u.conference.capacity, k.value = [u.conference.availability || "public"], a.value = u.conference.location, z(), L.value.forEach((n) => {
ue(n, () => {
f("hasChange");
}, { deep: !0 });
}), ne();
}), ue(D, (n) => {
f("valid", n);
}), S({ getConferenceBeforeSave: j }), (n, t) => (V(), A(e(Se), null, {
column1: m(() => [
M(e(fe), null, {
content: m(() => [
M(e(we), null, {
default: m(() => [
M(e(Ie), {
id: "conference-name",
label: e(i)("settings.conferences.details.general.fields.name.label"),
placeholder: e(i)("settings.conferences.details.general.fields.name.placeholder"),
mandatory: e(Y).mandatory,
modelValue: g.value,
"onUpdate:modelValue": t[0] || (t[0] = (c) => g.value = c)
}, null, 8, ["label", "placeholder", "mandatory", "modelValue"]),
M(e(Me), {
id: "conference-description",
label: e(i)("settings.conferences.details.general.fields.description.label"),
placeholder: e(i)("settings.conferences.details.general.fields.description.placeholder"),
mandatory: e(Y).ignore,
modelValue: P.value,
"onUpdate:modelValue": t[1] || (t[1] = (c) => P.value = c),
tinyMceKey: e(G),
height: 250,
plugins: "link lists",
toolbar: "forecolor bold italic strikethrough underline | bullist numlist | link",
menubar: !1,
statusbar: !1
}, null, 8, ["label", "placeholder", "mandatory", "modelValue", "tinyMceKey"]),
M(e(Ae), {
id: "conference-illustration",
label: e(i)("settings.conferences.details.general.fields.illustration.label"),
mandatory: e(Y).ignore,
helperMessage: e(i)("settings.conferences.details.general.fields.illustration.helper"),
fileInfo: w,
modelValue: U.value,
"onUpdate:modelValue": [
t[2] || (t[2] = (c) => U.value = c),
B
],
defaultFilename: r.value ? e(i)("settings.conferences.details.general.fields.illustration.default-name") : void 0
}, null, 8, ["label", "mandatory", "helperMessage", "modelValue", "defaultFilename"]),
M(e(Be), {
id: "conference-duration",
label: e(i)("settings.conferences.details.general.fields.duration.label"),
mandatory: e(Y).mandatory,
duration: y.value,
durationUnit: v.value,
minMinutes: 1,
maxMinutes: ve,
authorizedUnits: ["minutes", "hours"],
onOnChange: b
}, null, 8, ["label", "mandatory", "duration", "durationUnit"]),
M(e(Fe), {
id: "conference-capacity",
label: e(i)("settings.conferences.details.general.fields.capacity.label"),
helperMessage: e(i)("settings.conferences.details.general.fields.capacity.helper"),
mandatory: e(Y).mandatory,
minlength: 1,
maxlength: ge,
modelValue: T.value,
"onUpdate:modelValue": t[3] || (t[3] = (c) => T.value = c)
}, null, 8, ["label", "helperMessage", "mandatory", "modelValue"]),
M(e(Le), {
id: "conference-visibility",
label: e(i)("settings.conferences.details.general.fields.visibility.label"),
mandatory: e(Y).mandatory,
values: p,
modelValue: k.value,
"onUpdate:modelValue": t[4] || (t[4] = (c) => k.value = c)
}, null, 8, ["label", "mandatory", "modelValue"])
]),
_: 1
})
]),
_: 1
}),
M(e(fe), {
title: { label: e(i)("settings.conferences.details.general.section.locations.title") },
subTitle: { label: e(i)("settings.conferences.details.general.section.locations.subTitle") }
}, {
content: m(() => {
var c, I;
return [
F.value ? (V(), A(e(Ue), {
key: 1,
id: "conference-location",
ariaLabel: (I = (c = J.value) == null ? void 0 : c.label) != null ? I : e(i)("settings.conferences.details.general.section.locations.title"),
title: J.value,
subTitle: l.value,
hasBorder: !0,
hasPadding: !0
}, {
startSlot: m(() => [
M(e(Pe), {
color: "neutral",
size: "44",
icon: "far fa-lg " + _.value,
shape: "circle"
}, null, 8, ["icon"])
]),
endSlot: m(() => [
M(e(Q), {
"aria-label": e(i)("system.buttons.delete"),
color: "transparent",
"icon-alone": "fa-solid fa-xmark",
onClick: q
}, null, 8, ["aria-label"])
]),
_: 1
}, 8, ["ariaLabel", "title", "subTitle"])) : (V(), A(e(Q), {
key: 0,
stretch: "",
color: "neutral",
onClick: t[5] || (t[5] = (R) => h.value = !0)
}, {
default: m(() => [
pe(ye(e(i)("settings.conferences.details.general.section.locations.addLocation")), 1)
]),
_: 1
}))
];
}),
_: 1
}, 8, ["title", "subTitle"]),
h.value ? (V(), A(e($), {
key: 0,
conference: u.conference,
organisation: n.organisation,
onValidate: K,
onClose: Ce
}, null, 8, ["conference", "organisation"])) : x("", !0)
]),
_: 1
}));
}
}), Re = /* @__PURE__ */ de("div", { class: "az-flex az-flex-row az-w-full az-h-full az-justify-center az-items-center" }, [
/* @__PURE__ */ de("img", { src: "https://media2.giphy.com/media/z6EG2su1f5jOTourNL/giphy.gif?cid=6c09b952me3kaal4q6l04f6qrbiobhvh1v38agc8bumg4k26&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=g" })
], -1), Ye = /* @__PURE__ */ me({
__name: "View",
props: {
organisation: {},
conferenceId: {},
router: {},
widgetBaseUrl: {}
},
setup(d) {
const S = d, { t: o } = ee(), u = W(() => import("./ConferenceAttendee.24867310.js")), i = W(() => import("./ConferenceForm.e2ad497f.js")), X = W(() => import("./ConferenceAdvancedParameter.d4e416d8.js")), O = W(() => import("./ConferenceSession.d0b5e36f.js")), G = s(), f = s(), w = s(), $ = s(), p = s(), L = s(), g = E(() => ["general", "form", "advanced"].indexOf(h.value) >= 0), P = [
{
id: "general",
title: { label: o("settings.conferences.details.tabs.general.title") },
subTitle: { label: o("settings.conferences.details.tabs.general.subTitle") },
icon: "far fa-list-ul",
visible: !0
},
{
id: "speaker",
title: { label: o("settings.conferences.details.tabs.speaker.title") },
subTitle: { label: o("settings.conferences.details.tabs.speaker.subTitle") },
icon: "far fa-microphone",
visible: !0
},
{
id: "session",
title: { label: o("settings.conferences.details.tabs.session.title") },
subTitle: { label: o("settings.conferences.details.tabs.session.subTitle") },
icon: "far fa-calendar",
visible: !0
},
{
id: "form",
title: { label: o("settings.conferences.details.tabs.form.title") },
subTitle: { label: o("settings.conferences.details.tabs.form.subTitle") },
icon: "far fa-toggle-on",
visible: !0
},
{
id: "workflow",
title: { label: o("settings.conferences.details.tabs.workflow.title") },
subTitle: { label: o("settings.conferences.details.tabs.workflow.subTitle") },
icon: "far fa-bolt",
visible: !1
},
{
id: "advanced",
title: { label: o("settings.conferences.details.tabs.advanced.title") },
subTitle: { label: o("settings.conferences.details.tabs.advanced.subTitle") },
icon: "far fa-gear",
visible: !0
}
];
Ne((B, b, N) => {
if (T.value) {
k.value = B;
return;
}
N();
});
const {
conference: r,
back: U,
save: C,
saveInProgress: y,
formValid: v,
hasChange: T,
nextPage: k,
exit: a,
currentTabId: h,
changeTab: H,
isChangeTab: Z,
changedField: D,
validate: z
} = je(S.organisation.email, S.conferenceId, L, G, f, w, $, p, S.router);
return (B, b) => {
var N, j;
return V(), ke(Ve, null, [
M(e(De), {
ref_key: "structuredPage",
ref: G,
id: "az-conference-details-page",
title: { label: (j = (N = e(r)) == null ? void 0 : N.name) != null ? j : e(o)("settings.conferences.details.title"), needTranslation: !1 },
"sub-title": { label: e(o)("settings.conferences.details.subTitle") },
tabs: P,
hasPrevious: !0,
initTabId: e(h),
changeTabManually: !0,
onGoBack: e(U),
onChangeCurrentTab: e(H)
}, {
actions: m(() => [
g.value ? (V(), A(e(Q), {
key: 0,
id: "conference-save",
color: "primary",
"aria-label": e(o)("settings.conferences.details.save-button"),
onClick: b[0] || (b[0] = (F) => e(C)(!1))
}, {
default: m(() => [
pe(ye(e(o)("settings.conferences.details.save-button")), 1)
]),
_: 1
}, 8, ["aria-label"])) : x("", !0)
]),
"mobile-actions": m(() => [
g.value ? (V(), A(e(Q), {
key: 0,
id: "conference-save",
color: "transparent",
"aria-label": e(o)("settings.conferences.details.save-button"),
iconAlone: "fa fa-check",
onClick: b[1] || (b[1] = (F) => e(C)(!1))
}, null, 8, ["aria-label"])) : x("", !0)
]),
general: m(() => [
e(r) ? (V(), A(Ke, {
key: 0,
ref_key: "generalTab",
ref: f,
conference: e(r),
organisation: B.organisation,
onHasChange: e(D),
onValid: e(z)
}, null, 8, ["conference", "organisation", "onHasChange", "onValid"])) : x("", !0)
]),
speaker: m(() => [
e(r) ? (V(), A(e(u), {
key: 0,
ref_key: "attendeeTab",
ref: w,
organisation: B.organisation,
conference: e(r),
onHasChange: e(D),
onValid: e(z)
}, null, 8, ["organisation", "conference", "onHasChange", "onValid"])) : x("", !0)
]),
session: m(() => [
e(r) ? (V(), A(e(O), {
key: 0,
ref: "sessionTab",
organisation: B.organisation,
conference: e(r),
widgetBaseUrl: B.widgetBaseUrl,
onHasChange: e(D),
onValid: e(z)
}, null, 8, ["organisation", "conference", "widgetBaseUrl", "onHasChange", "onValid"])) : x("", !0)
]),
form: m(() => [
e(r) ? (V(), A(e(i), {
key: 0,
ref_key: "formTab",
ref: $,
organisation: B.organisation,
conference: e(r),
onHasChange: e(D),
onValid: e(z)
}, null, 8, ["organisation", "conference", "onHasChange", "onValid"])) : x("", !0)
]),
workflow: m(() => [
Re
]),
advanced: m(() => [
e(r) ? (V(), A(e(X), {
key: 0,
ref_key: "advancedTab",
ref: p,
conference: e(r),
onHasChange: e(D),
onValid: e(z)
}, null, 8, ["conference", "onHasChange", "onValid"])) : x("", !0)
]),
_: 1
}, 8, ["title", "sub-title", "initTabId", "onGoBack", "onChangeCurrentTab"]),
e(k) || e(Z) ? (V(), A(e(ze), {
key: 0,
ref_key: "unsavedChangesDialogRef",
ref: L,
mode: e(v) ? "save-or-quit" : "cancel-or-quit",
onSaveAndExit: b[2] || (b[2] = (F) => e(C)(!0)),
onCloseDialog: b[3] || (b[3] = (F) => e(a)(!0)),
onExit: b[4] || (b[4] = (F) => e(a)(!1))
}, null, 8, ["mode"])) : x("", !0)
], 64);
};
}
}), tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Ye
}, Symbol.toStringTag, { value: "Module" }));
export {
tn as V,
qe as g
};