@agendize/vue-settings
Version:
Vue agendize's settings component
252 lines (251 loc) • 9.18 kB
JavaScript
import { ref as h, inject as M, computed as x, onMounted as B, defineComponent as I, openBlock as f, createElementBlock as y, createElementVNode as p, toDisplayString as m, unref as e, createCommentVNode as C, createVNode as H, Fragment as E, renderList as N, createBlock as V, withCtx as w, withKeys as D } from "vue";
import { i as T } from "./index.d2d0aba2.js";
import { PlanningWeekEntity as j, PlanningEntity as A } from "@agendize/js-calendar-api";
import { HoursErrors as F, HoursItem as O, PageWithTabsAndPanel as S, Section as L, FieldInput as U, Mandatory as q } from "@agendize/design-system";
import { g as G } from "./common.6fc78cfb.js";
import "./vendor.26bbd9f1.js";
import "@agendize/az-i18n";
import "@agendize/vue-tools";
import "vue-router";
import "@agendize/vue-acl";
const J = new j();
J.workingHours = [];
function Q(b, i, n, r, d) {
const a = T(i), o = h(new A()), c = M("toaster"), s = h(new F()), u = h(!1), g = x(() => {
var k;
return r !== "0" ? (k = o.value) == null ? void 0 : k.name : a.global.t("settings.planning-details.new");
}), v = h({
title: g.value,
titleTranslatable: !1,
subTitle: a.global.t("settings.planning-details.subTitle"),
tabs: [{ id: "detail", title: "settings.planning-details.tab.detail.title" }]
});
B(async () => {
u.value = !0, r && r !== "0" ? await b.getPlanning(r, n).then((k) => {
k && k.result ? o.value = k.result : z();
}) : z(), u.value = !1;
});
function z() {
o.value.author = n, o.value.weeks = [{ index: 0, workingHours: [] }];
}
async function W() {
await (d == null ? void 0 : d.back());
}
async function l() {
u.value = !0, !r || r === "0" ? await b.createPlanning(o.value, n) : await b.updatePlanning(r, o.value, n), c == null || c.success(a.global.t("settings.planning-details.save-success")), u.value = !1, await W();
}
function t() {
o.value.weeks.push({ index: o.value.weeks.length, workingHours: [] });
}
async function $(k) {
o.value.weeks.splice(k, 1), s.value.errors.forEach((P, _, K) => {
P.id.startsWith("week" + k) && K.splice(_, 1);
}), o.value.weeks.forEach((P, _, K) => {
P.index = _;
});
}
return {
pageOptions: v,
backToList: W,
savePlanning: l,
planning: o,
addWeek: t,
deleteWeek: $,
errors: s,
loading: u
};
}
const R = { class: "az-flex az-flex-col az-gap-1 az-mb-2" }, X = { class: "az-flex az-flex-row az-gap-2" }, Y = { class: "az-field-label az-mb-0" }, Z = {
key: 0,
class: "az-error-label exclude-weglot"
}, ee = /* @__PURE__ */ I({
__name: "DayDetailsItem",
props: {
locale: {},
planningDay: {},
day: {},
errors: {},
weekId: {}
},
setup(b) {
const i = b, n = T(i.locale), r = i.weekId + i.day, d = x(() => i.errors.errors.filter((a) => {
if (a.id.startsWith(r))
return !0;
}).map((a) => a.label).join(" ; "));
return (a, o) => (f(), y("div", R, [
p("div", X, [
p("span", Y, m(e(n).global.t("settings.common.day." + a.day)) + " *", 1),
d.value ? (f(), y("span", Z, m(d.value), 1)) : C("", !0)
]),
H(e(O), {
hours: a.planningDay.hours,
locale: a.locale,
day: r,
errors: a.errors
}, null, 8, ["hours", "locale", "errors"])
]));
}
}), ne = { class: "az-flex az-flex-col az-gap-4" }, te = { class: "az-section-header-subtitle az-week-name" }, le = { class: "az-flex az-flex-col az-gap-1" }, ae = { class: "az-w-full" }, oe = /* @__PURE__ */ I({
__name: "WeekDetailsItem",
props: {
locale: {},
week: {},
index: {},
errors: {}
},
emits: ["deleteWeek"],
setup(b, { emit: i }) {
const n = b, r = T(n.locale), d = G(n.locale);
B(() => {
o();
});
const a = i;
function o() {
n.week.workingHours || (n.week.workingHours = []);
for (let s in d)
n.week.workingHours.find((u) => u.day === d[s]) || n.week.workingHours.push({ day: d[s], hours: [] });
}
function c(s) {
var u, g;
return (g = (u = n.week.workingHours) == null ? void 0 : u.find((v) => v.day === s)) != null ? g : { day: s, hours: [] };
}
return (s, u) => (f(), y("div", ne, [
p("span", te, m(s.week.name ? s.week.name : e(r).global.t("agenda.title.week-number", { week: s.index + 1 })), 1),
p("div", le, [
s.errors ? (f(!0), y(E, { key: 0 }, N(e(d), (g) => (f(), V(ee, {
locale: s.locale,
day: g,
planningDay: c(g),
weekId: "week" + s.index,
errors: s.errors
}, null, 8, ["locale", "day", "planningDay", "weekId", "errors"]))), 256)) : C("", !0)
]),
p("div", ae, [
s.index > 0 ? (f(), y("button", {
key: 0,
class: "az-float-right az-btn az-btn-color-error az-mt-3",
onClick: u[0] || (u[0] = (g) => a("deleteWeek"))
}, m(e(r).global.t("settings.planning-details.deleteWeek")), 1)) : C("", !0)
])
]));
}
});
const se = ["disabled"], ie = /* @__PURE__ */ p("div", { class: "az-divider" }, null, -1), we = /* @__PURE__ */ I({
__name: "View",
props: {
api: {},
locale: {},
planningId: {},
organisation: {},
logger: {},
router: {}
},
setup(b) {
var z;
const i = b, n = T(i.locale), r = x(() => c.value && c.value.name && g.value.errors.length === 0), {
pageOptions: d,
backToList: a,
savePlanning: o,
planning: c,
addWeek: s,
deleteWeek: u,
errors: g,
loading: v
} = Q(i.api, i.locale, (z = i.organisation.email) != null ? z : "", i.planningId, i.router);
return (W, l) => (f(), V(e(S), {
id: "settings-planning-details",
options: e(d),
locale: i.locale
}, {
actions: w(() => [
p("button", {
class: "az-btn az-btn-color-neutral",
onClick: l[0] || (l[0] = (...t) => e(a) && e(a)(...t)),
onKeypress: l[1] || (l[1] = D(
(...t) => e(a) && e(a)(...t),
["enter"]
))
}, m(e(n).global.t("settings.planning-details.back")), 33),
p("button", {
class: "az-btn az-btn-color-primary az-whitespace-nowrap",
disabled: e(v) || !r.value,
onClick: l[2] || (l[2] = (...t) => e(o) && e(o)(...t)),
onKeypress: l[3] || (l[3] = D(
(...t) => e(o) && e(o)(...t),
["enter"]
))
}, m(e(n).global.t("common.action.save")), 41, se)
]),
mobileActions: w(() => [
p("button", {
class: "az-btn az-btn-color-neutral",
onClick: l[4] || (l[4] = (...t) => e(a) && e(a)(...t)),
onKeypress: l[5] || (l[5] = D(
(...t) => e(a) && e(a)(...t),
["enter"]
))
}, m(e(n).global.t("settings.action.cancel")), 33),
p("button", {
class: "az-btn az-btn-color-primary",
onClick: l[6] || (l[6] = (...t) => e(o) && e(o)(...t)),
onKeypress: l[7] || (l[7] = D(
(...t) => e(o) && e(o)(...t),
["enter"]
))
}, m(e(n).global.t("common.action.save")), 33)
]),
detail: w(() => [
H(e(L), {
title: e(n).global.t("settings.planning-details.section.general.title"),
subTitle: e(n).global.t("settings.planning-details.section.general.subTitle")
}, {
content: w(() => [
H(e(U), {
ref: "inputName",
id: "planning-details-name",
label: e(n).global.t("settings.planning-details.name.label"),
placeholder: e(n).global.t("settings.planning-details.name.placeholder"),
locale: W.locale,
mandatory: e(q).mandatory,
modelValue: e(c).name,
"onUpdate:modelValue": l[8] || (l[8] = (t) => e(c).name = t)
}, null, 8, ["label", "placeholder", "locale", "mandatory", "modelValue"])
]),
_: 1
}, 8, ["title", "subTitle"]),
ie,
H(e(L), {
ref: "workingHour",
title: e(n).global.t("settings.planning-details.section.workingHours.title"),
subTitle: e(n).global.t("settings.planning-details.section.workingHours.subTitle")
}, {
actions: w(() => [
p("button", {
class: "az-btn az-btn-color-neutral",
onClick: l[9] || (l[9] = (...t) => e(s) && e(s)(...t)),
onKeypress: l[10] || (l[10] = D(
(...t) => e(s) && e(s)(...t),
["enter"]
))
}, m(e(n).global.t("settings.planning-details.addWeek")), 33)
]),
content: w(() => [
(f(!0), y(E, null, N(e(c).weeks, (t, $) => (f(), V(oe, {
locale: W.locale,
week: t,
index: $,
errors: e(g),
onDeleteWeek: (k) => e(u)($)
}, null, 8, ["locale", "week", "index", "errors", "onDeleteWeek"]))), 256))
]),
footer: w(() => []),
_: 1
}, 8, ["title", "subTitle"])
]),
_: 1
}, 8, ["options", "locale"]));
}
});
export {
we as default
};