@agendize/vue-settings
Version:
Vue agendize's settings component
332 lines (331 loc) • 14.3 kB
JavaScript
import { ref as i, computed as De, onMounted as we, watch as he, defineComponent as ke, openBlock as Z, createElementBlock as me, Fragment as Ae, createVNode as u, unref as e, withCtx as S, createTextVNode as j, toDisplayString as R, createElementVNode as P, isRef as c, createCommentVNode as ce, createBlock as Ue } from "vue";
import { PageWithTabsAndPanel as Ce, Button as G, Section as ge, FieldSelect as $, Mandatory as T, DaysButton as _e, FieldDateTime as ve, FieldToggle as fe, UnsavedChangesDialog as ze } from "@agendize/design-system";
import { useRouter as Be, onBeforeRouteLeave as Fe } from "vue-router";
import { useAccountStore as Le, useApi as Ne } from "@agendize/vue-tools";
import { u as pe } from "./vendor.26bbd9f1.js";
import { useToast as Me } from "vue-toastification";
function Ie(J, l) {
const { t: s } = pe(), N = i([]), w = Le().account, q = i([
{ label: s("settings.calendar.displaySettings.color.values.staff"), value: "staff" },
{ label: s("settings.calendar.displaySettings.color.values.service"), value: "service" }
]), _ = i([
{ label: s("settings.calendar.displaySettings.name.values.service"), value: "service" },
{ label: s("settings.calendar.displaySettings.name.values.contact"), value: "contact" }
]), z = i([
{ label: s("settings.common.duration", { minutes: 5 }, 5), value: 5 + "" },
{ label: s("settings.common.duration", { minutes: 10 }, 10), value: 10 + "" },
{ label: s("settings.common.duration", { minutes: 15 }, 15), value: 15 + "" },
{ label: s("settings.common.duration", { minutes: 20 }, 20), value: 20 + "" },
{ label: s("settings.common.duration", { minutes: 25 }, 25), value: 25 + "" },
{ label: s("settings.common.duration", { minutes: 30 }, 30), value: 30 + "" },
{ label: s("settings.common.duration", { minutes: 45 }, 45), value: 45 + "" },
{ label: s("settings.common.duration", { minutes: 60 }, 60), value: 60 + "" }
]), H = i([
{ label: s("settings.calendar.displaySettings.defaultView.values.day"), value: "day" },
{ label: s("settings.calendar.displaySettings.defaultView.values.week"), value: "week" },
{ label: s("settings.calendar.displaySettings.defaultView.values.agenda"), value: "agenda" }
]), m = Me(), B = {
title: s("settings.calendar.title"),
subTitle: s("settings.calendar.subTitle"),
mobileBack: !0,
tabs: [
{ id: "settings", title: "" }
]
}, F = "06:00:00", W = "20:00:00", h = "staff", k = "service", X = "15", E = !0, A = "week", M = i(!1), U = i(!1), g = i(), C = i(), v = i(), f = i(), x = i(), D = i(E), p = i(), a = i(), n = i();
N.value.push(v, f, x, a, p);
const I = i(), O = i(!1), K = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
function ye(t) {
t ? I.value = void 0 : (O.value = !1, l == null || l.push({ name: I.value.name }));
}
function be(t) {
var o, r, d, y, b, V, L, ae, le, te, ne, se, ie, oe, de;
g.value = Q((r = (o = t.calendarSettings) == null ? void 0 : o.minTime) != null ? r : F), C.value = Q((y = (d = t.calendarSettings) == null ? void 0 : d.maxTime) != null ? y : W), v.value = [(V = (b = t.calendarSettings) == null ? void 0 : b.eventColor) != null ? V : h], f.value = K.filter(($e, xe) => {
var ue, re;
return ((re = (ue = t.calendarSettings) == null ? void 0 : ue.displayDays) != null ? re : []).indexOf(xe) >= 0;
}), x.value = [(ae = (L = t.calendarSettings) == null ? void 0 : L.eventName) != null ? ae : k], D.value = (te = (le = t.calendarSettings) == null ? void 0 : le.privatizeExternal) != null ? te : E, a.value = (se = (ne = t.calendarSettings) == null ? void 0 : ne.showBuffer) != null ? se : !0, p.value = [((ie = t.calendarSettings) == null ? void 0 : ie.slotDuration) + ""], n.value = [(de = (oe = t.calendarSettings) == null ? void 0 : oe.defaultView) != null ? de : A], M.value = !0;
}
function Q(t) {
return new Date("2023-02-14T" + t);
}
function Y(t) {
if (!t)
return "";
var o = t.getHours(), r = t.getMinutes(), d = t.getSeconds();
return (o < 10 ? "0" + o : o) + ":" + (r < 10 ? "0" + r : r) + ":" + (d < 10 ? "0" + d : d);
}
function Ve() {
l.back();
}
function Se() {
const t = [];
return K.forEach((o, r) => {
var d;
((d = f.value) != null ? d : []).indexOf(o) >= 0 && t.push(r);
}), t;
}
function Te() {
var o, r, d, y, b, V;
const t = w;
return t.calendarSettings = {
minTime: Y(g.value),
maxTime: Y(C.value),
eventColor: ((o = v.value) != null ? o : [h])[0],
displayDays: Se(),
eventName: ((r = x.value) != null ? r : [k])[0],
slotDuration: +((d = p.value) != null ? d : [X])[0],
showBuffer: (y = a.value) != null ? y : !0,
privatizeExternal: (b = D.value) != null ? b : E,
defaultView: ((V = n.value) != null ? V : [A])[0]
}, t;
}
function Ee(t = !1) {
ee && (U.value = !0, J.updateAccount(Te()).then(() => {
m == null || m.success(s("settings.calendar.action.save.success")), O.value = !1, t && (l == null || l.push({ name: I.value.name }));
}).catch((o) => {
m == null || m.error(s("settings.calendar.action.save.error"));
}).finally(() => {
U.value = !1;
}));
}
const ee = De(() => {
var t, o, r, d, y, b, V, L;
return !!(g.value && C.value && ((o = (t = v.value) == null ? void 0 : t.length) != null ? o : 0) > 0 && ((d = (r = f.value) == null ? void 0 : r.length) != null ? d : 0) > 0 && ((b = (y = x.value) == null ? void 0 : y.length) != null ? b : 0) > 0 && ((L = (V = p.value) == null ? void 0 : V.length) != null ? L : 0) > 0);
});
return we(() => {
be(w), N.value.forEach((t) => {
he(t, () => {
O.value = !0;
}, { deep: !0 });
});
}), {
colors: v,
colorValues: q,
days: f,
nameEvent: x,
nameValues: _,
privatizeExternal: D,
slotDuration: p,
slotDurationValues: z,
showBuffer: a,
formValid: ee,
formSaving: U,
loaded: M,
maxTime: C,
minTime: g,
pageOptions: B,
back: Ve,
saveSettings: Ee,
hasChange: O,
nextPage: I,
exit: ye,
defaultViewValues: H,
defaultView: n
};
}
const Oe = {
class: "az-flex az-flex-col",
style: { display: "none" }
}, Re = {
key: 0,
class: "az-settings-calendar-dates"
}, Pe = { class: "az-field-helper" }, Ge = /* @__PURE__ */ ke({
__name: "View",
setup(J) {
const { t: l } = pe(), s = Ne(), N = Be();
Fe((p, a, n) => {
if (C.value) {
v.value = p;
return;
}
n();
});
const {
colors: w,
colorValues: q,
days: _,
nameEvent: z,
nameValues: H,
privatizeExternal: m,
showBuffer: B,
slotDuration: F,
slotDurationValues: W,
formValid: h,
formSaving: k,
loaded: X,
maxTime: E,
minTime: A,
pageOptions: M,
back: U,
saveSettings: g,
hasChange: C,
nextPage: v,
exit: f,
defaultViewValues: x,
defaultView: D
} = Ie(s, N);
return (p, a) => (Z(), me(Ae, null, [
u(e(Ce), {
style: "padding:0",
options: e(M),
onMobileBack: e(U)
}, {
actions: S(() => [
u(e(G), {
id: "settings-calendar-back",
color: "neutral",
"aria-label": e(l)("settings.calendar.back"),
onClick: e(U)
}, {
default: S(() => [
j(R(e(l)("settings.calendar.back")), 1)
]),
_: 1
}, 8, ["aria-label", "onClick"]),
u(e(G), {
id: "settings-calendar-save",
color: "primary",
disabled: !e(h) || e(k),
"aria-label": e(l)("settings.calendar.save"),
"icon-left": e(k) ? "az-animate-spin fa-solid fa-spinner-third" : "",
onClick: a[0] || (a[0] = (n) => e(g)(!1))
}, {
default: S(() => [
j(R(e(l)("settings.calendar.save")), 1)
]),
_: 1
}, 8, ["disabled", "aria-label", "icon-left"])
]),
mobileActions: S(() => [
u(e(G), {
id: "settings-calendar-mobile-save",
color: "transparent",
disabled: !e(h) || e(k),
"aria-label": e(l)("settings.calendar.save"),
"icon-alone": "fa fa-check",
onClick: a[1] || (a[1] = (n) => e(g)(!1))
}, {
default: S(() => [
j(R(e(l)("settings.calendar.save")), 1)
]),
_: 1
}, 8, ["disabled", "aria-label"])
]),
settings: S(() => [
u(e(ge), {
id: "settings-calendar-section-display-options",
title: e(l)("settings.calendar.displaySettings.title"),
subTitle: e(l)("settings.calendar.displaySettings.subTitle")
}, {
content: S(() => [
P("div", null, [
u(e($), {
id: "settings-calendar-default-view",
values: e(x),
label: e(l)("settings.calendar.displaySettings.defaultView.title"),
mandatory: e(T).ignore,
clearable: !1,
modelValue: e(D),
"onUpdate:modelValue": a[2] || (a[2] = (n) => c(D) ? D.value = n : null)
}, null, 8, ["values", "label", "mandatory", "modelValue"])
]),
P("div", null, [
u(e(_e), {
id: "settings-calendar-days",
label: e(l)("settings.calendar.displaySettings.days.label"),
"helper-message": e(l)("settings.calendar.displaySettings.days.helper"),
modelValue: e(_),
"onUpdate:modelValue": a[3] || (a[3] = (n) => c(_) ? _.value = n : null)
}, null, 8, ["label", "helper-message", "modelValue"])
]),
P("div", Oe, [
e(X) ? (Z(), me("div", Re, [
u(e(ve), {
id: "settings-calendar-min-time",
mode: "time",
mandatory: e(T).ignore,
modelValue: e(A),
"onUpdate:modelValue": a[4] || (a[4] = (n) => c(A) ? A.value = n : null),
class: "az-flex-1",
label: e(l)("settings.calendar.displaySettings.limit.min")
}, null, 8, ["mandatory", "modelValue", "label"]),
u(e(ve), {
id: "settings-calendar-max-time",
mode: "time",
mandatory: e(T).ignore,
modelValue: e(E),
"onUpdate:modelValue": a[5] || (a[5] = (n) => c(E) ? E.value = n : null),
class: "az-flex-1",
label: e(l)("settings.calendar.displaySettings.limit.max")
}, null, 8, ["mandatory", "modelValue", "label"])
])) : ce("", !0),
P("span", Pe, R(e(l)("settings.calendar.displaySettings.limit.helper")), 1)
]),
u(e($), {
id: "settings-min-height-event",
values: e(W),
label: e(l)("settings.calendar.displaySettings.minHeight.label"),
mandatory: e(T).ignore,
"helper-message": e(l)("settings.calendar.displaySettings.minHeight.helper"),
modelValue: e(F),
"onUpdate:modelValue": a[6] || (a[6] = (n) => c(F) ? F.value = n : null)
}, null, 8, ["values", "label", "mandatory", "helper-message", "modelValue"]),
u(e(fe), {
label: e(l)("settings.calendar.displaySettings.buffer.label"),
modelValue: e(B),
"onUpdate:modelValue": a[7] || (a[7] = (n) => c(B) ? B.value = n : null),
id: "buffer-check",
mandatory: e(T).ignore
}, null, 8, ["label", "modelValue", "mandatory"]),
u(e($), {
id: "settings-calendar-color",
values: e(q),
label: e(l)("settings.calendar.displaySettings.color.label"),
mandatory: e(T).ignore,
"helper-message": e(l)("settings.calendar.displaySettings.color.helper"),
modelValue: e(w),
"onUpdate:modelValue": a[8] || (a[8] = (n) => c(w) ? w.value = n : null)
}, null, 8, ["values", "label", "mandatory", "helper-message", "modelValue"]),
u(e($), {
id: "settings-calendar-name",
values: e(H),
label: e(l)("settings.calendar.displaySettings.name.label"),
mandatory: e(T).ignore,
"helper-message": e(l)("settings.calendar.displaySettings.name.helper"),
modelValue: e(z),
"onUpdate:modelValue": a[9] || (a[9] = (n) => c(z) ? z.value = n : null)
}, null, 8, ["values", "label", "mandatory", "helper-message", "modelValue"])
]),
_: 1
}, 8, ["title", "subTitle"]),
u(e(ge), {
id: "settings-calendar-section-privacy",
title: e(l)("settings.calendar.privacy.title"),
subTitle: e(l)("settings.calendar.privacy.subTitle")
}, {
content: S(() => [
u(e(fe), {
label: e(l)("settings.calendar.privacy.privatizeExternal.label"),
modelValue: e(m),
"onUpdate:modelValue": a[10] || (a[10] = (n) => c(m) ? m.value = n : null),
id: "privatizeExternal-check",
mandatory: e(T).ignore
}, null, 8, ["label", "modelValue", "mandatory"])
]),
_: 1
}, 8, ["title", "subTitle"])
]),
_: 1
}, 8, ["options", "onMobileBack"]),
e(v) ? (Z(), Ue(e(ze), {
key: 0,
mode: e(h) ? "save-or-quit" : "cancel-or-quit",
onSaveAndExit: a[11] || (a[11] = (n) => e(g)(!0)),
onCloseDialog: a[12] || (a[12] = (n) => e(f)(!0)),
onExit: a[13] || (a[13] = (n) => e(f)(!1))
}, null, 8, ["mode"])) : ce("", !0)
], 64));
}
});
export {
Ge as default
};