@agendize/vue-settings
Version:
Vue agendize's settings component
333 lines (332 loc) • 11.6 kB
JavaScript
import { ref as v, inject as I, onMounted as K, defineComponent as k, openBlock as g, createElementBlock as m, createTextVNode as V, toDisplayString as h, createElementVNode as u, computed as M, Fragment as w, renderList as P, createBlock as H, unref as t, createVNode as x, watch as W, normalizeClass as j, createCommentVNode as B, resolveDirective as U, withCtx as C, withKeys as T, withDirectives as G } from "vue";
import { i as y, S as F } from "./index.d2d0aba2.js";
import { ConfirmDialog as R, OverflowMenu as q, SearchInput as J, PageWithTabsAndPanel as Q } from "@agendize/design-system";
import { D as $ } from "./datetime.911b67ae.js";
import { g as L } from "./common.6fc78cfb.js";
import "./vendor.26bbd9f1.js";
import "@agendize/az-i18n";
import "@agendize/vue-tools";
import "@agendize/js-calendar-api";
import "vue-router";
import "@agendize/vue-acl";
function X(_, s, n, i, r, e) {
const l = v(void 0), a = y(n), d = I("toaster"), o = I("createConfirmDialog"), p = v(!1), z = v("plannings"), c = v({
title: a.global.t("settings.plannings.title"),
subTitle: a.global.t("settings.plannings.subTitle"),
mobileBack: !0,
tabs: [{ id: "plannings", title: a.global.t("settings.companies-cards.tab.plannings.title") }]
});
async function b() {
await f();
}
async function f() {
await (e == null ? void 0 : e.push({
name: F.PlanningModelDetails,
params: { planningId: "0" }
}));
}
async function A(D) {
if (o) {
const { reveal: N, onConfirm: O } = o(R, {
locale: n,
closeOnBlurClick: !0,
confirmation: a.global.t("settings.plannings.delete.confirm"),
description: a.global.t("settings.plannings.delete.description"),
title: a.global.t("settings.plannings.delete.title")
});
O(async () => {
p.value = !0, await s.deletePlanning(D, r.email), await new Promise((S) => setTimeout(S, 500)), l.value = await i.fetchPlannings(), d == null || d.success(a.global.t("settings.plannings.delete.success")), p.value = !1;
}), await N();
}
}
function E() {
e == null || e.back();
}
return K(() => {
i.fetchPlannings().then((D) => {
l.value = D;
});
}), {
pageOptions: c,
newAction: b,
currentTab: z,
plannings: l,
deletePlanning: A,
back: E
};
}
const Y = { class: "az-font-medium" }, Z = /* @__PURE__ */ u("i", {
"aria-hidden": "true",
class: "fa fa-arrow-right az-text-xs"
}, null, -1), ee = /* @__PURE__ */ k({
__name: "PlanningHourItem",
props: {
hour: {},
locale: {},
logger: {}
},
setup(_) {
const s = _;
y(s.locale);
const n = v($.fromFormat(s.hour.start, "hh:mm")), i = v($.fromFormat(s.hour.end, "hh:mm"));
function r(e) {
return s.locale === "en" ? e.toFormat("hh:mm a") : e.toFormat("HH:mm");
}
return (e, l) => (g(), m("div", Y, [
V(h(r(n.value)) + " ", 1),
Z,
V(" " + h(r(i.value)), 1)
]));
}
}), ne = { class: "az-flex az-flex-col az-items-center" }, te = {
key: 0,
class: "az-flex az-flex-col az-bg-primary-50 az-text-primary-500 az-w-full az-plage"
}, ae = {
key: 1,
class: "az-w-full az-plage az-plage-empty"
}, le = /* @__PURE__ */ k({
__name: "PlanningDayItem",
props: {
day: {},
locale: {},
logger: {}
},
setup(_) {
const s = _, n = y(s.locale);
function i() {
let e = 0;
(r.value || []).forEach((o) => {
let p = $.fromFormat(o.start, "hh:mm"), z = $.fromFormat(o.end, "hh:mm");
e += z.diff(p, "minutes").minutes;
});
let l = Math.floor(e / 60), a = e % 60, d = "";
return l > 0 && (d += n.global.t("common.duration.hours", { hours: l }) + " "), a > 0 && (d += n.global.t("common.duration.minutes", { minutes: a })), d;
}
const r = M(() => {
var e;
return (e = s.day.hours) == null ? void 0 : e.sort((l, a) => l.start.localeCompare(a.start));
});
return (e, l) => (g(), m("div", ne, [
r.value && r.value.length > 0 ? (g(), m("span", te, [
(g(!0), m(w, null, P(r.value, (a) => (g(), H(ee, {
hour: a,
locale: e.locale
}, null, 8, ["hour", "locale"]))), 256)),
u("div", null, h(i()), 1)
])) : (g(), m("span", ae))
]));
}
});
const oe = { class: "az-flex az-flex-row az-gap-4 az-w-full az-items-center" }, se = /* @__PURE__ */ u("div", { class: "az-divider az-flex-1" }, null, -1), ie = { class: "az-font-medium az-uppercase az-text-body3 az-text-grey-500" }, re = /* @__PURE__ */ u("div", { class: "az-divider az-flex-1" }, null, -1), ce = { class: "az-planning az-gap-4 az-horizontal-scroll" }, ue = /* @__PURE__ */ k({
__name: "PlanningWeekItem",
props: {
week: {},
locale: {},
logger: {}
},
setup(_) {
const s = _, n = y(s.locale), i = L(s.locale);
function r(e) {
let l = i[e - 1], a = s.week.workingHours.find((d) => d.day === l);
return a != null ? a : { day: l, hours: [] };
}
return (e, l) => (g(), m(w, null, [
u("div", oe, [
se,
u("span", ie, h(e.week.name ? e.week.name : t(n).global.t("agenda.title.week-number", { week: e.week.index + 1 })), 1),
re
]),
u("div", ce, [
(g(), m(w, null, P(7, (a) => x(le, {
locale: e.locale,
day: r(a)
}, null, 8, ["locale", "day"])), 64))
])
], 64));
}
});
const ge = { class: "az-flex az-flex-col az-gap-4 az-p-4 az-rounded-200 az-border az-border-grey-50 az-bg-white" }, de = { class: "az-flex az-flex-row az-justify-between" }, pe = {
class: "az-flex az-flex-row az-gap-4 az-items-center az-flex-wrap az-gap-y-2 az-truncate",
style: { "max-width": "75%" }
}, me = { class: "az-font-medium az-text-2xl exclude-weglot" }, fe = { class: "az-gap-6 az-horizontal-scroll az-text-center az-days-show" }, _e = { class: "az-text-body3 az-text-grey-500" }, ze = { class: "az-flex az-flex-col az-gap-4" }, he = /* @__PURE__ */ k({
__name: "PlanningItem",
props: {
planning: {},
locale: {},
logger: {},
router: {}
},
emits: ["onDelete"],
setup(_, { emit: s }) {
const n = _, i = y(n.locale), r = L(n.locale), e = s;
async function l() {
var o;
await ((o = n.router) == null ? void 0 : o.push({
name: F.PlanningModelDetails,
params: { planningId: n.planning.id }
}));
}
async function a() {
e("onDelete", n.planning.id);
}
const d = [
{ id: n.planning.id + "-planning-overflow-menu-modify", title: i.global.t("common.action.modify"), action: l },
{ id: n.planning.id + "-planning-overflow-menu-delete", title: i.global.t("common.action.delete"), action: a }
];
return (o, p) => (g(), m("div", ge, [
u("div", de, [
u("div", pe, [
u("span", me, h(o.planning.name), 1)
]),
u("div", null, [
x(t(q), { options: d })
])
]),
u("div", fe, [
(g(), m(w, null, P(7, (z) => u("span", _e, h(t(i).global.t("settings.common.day." + t(r)[z - 1])), 1)), 64))
]),
(g(!0), m(w, null, P(o.planning.weeks, (z) => (g(), m("div", ze, [
x(ue, {
week: z,
locale: o.locale
}, null, 8, ["week", "locale"])
]))), 256))
]));
}
});
const ve = { class: "az-h-full" }, be = { class: "az-custom-table-search az-flex az-flex-row az-w-full az-gap-2" }, ye = { class: "az-flex az-flex-col az-gap-2" }, we = {
key: 0,
class: "az-flex az-justify-center"
}, xe = /* @__PURE__ */ k({
__name: "PlanningList",
props: {
locale: {},
plannings: {},
logger: {},
router: {}
},
emits: ["deletePlanning"],
setup(_, { emit: s }) {
const n = _, i = y(n.locale), r = v(""), e = s, l = v(n.plannings);
function a(o) {
e("deletePlanning", o);
}
W(() => n.plannings, (o) => {
l.value = o;
});
const d = M(() => {
var o;
return ((o = l.value) != null ? o : []).filter((p) => p.name.toLowerCase().includes(r.value.toLowerCase()));
});
return (o, p) => {
var z, c;
return g(), m("div", ve, [
u("div", {
class: j(["az-flex az-flex-col az-gap-4", "az-h-full"])
}, [
u("div", be, [
x(t(J), {
id: "planning-search",
class: "az-flex-6",
modelValue: r.value,
"onUpdate:modelValue": p[0] || (p[0] = (b) => r.value = b),
alt: t(i).global.t("settings.plannings.search.placeholder"),
placeholder: t(i).global.t("settings.plannings.search.placeholder"),
disabled: !1
}, null, 8, ["modelValue", "alt", "placeholder"])
]),
(g(!0), m(w, null, P(d.value, (b) => (g(), m("div", ye, [
x(he, {
planning: b,
locale: o.locale,
onOnDelete: a,
router: n.router,
logger: n.logger
}, null, 8, ["planning", "locale", "router", "logger"])
]))), 256)),
((c = (z = d.value) == null ? void 0 : z.length) != null ? c : 0) === 0 ? (g(), m("div", we, h(t(i).global.t("settings.plannings.empty")), 1)) : B("", !0)
])
]);
};
}
}), ke = /* @__PURE__ */ u("i", {
class: "fa fa-plus",
"aria-hidden": "true"
}, null, -1), Pe = [
ke
], Ae = /* @__PURE__ */ k({
__name: "View",
props: {
api: {},
locale: {},
logger: {},
router: {},
fetchAllPlanningsUseCase: {},
organisation: {}
},
emits: ["menuClick"],
setup(_, { emit: s }) {
const n = _, i = y(n.locale), r = s, {
newAction: e,
pageOptions: l,
currentTab: a,
plannings: d,
deletePlanning: o,
back: p
} = X(r, n.api, n.locale, n.fetchAllPlanningsUseCase, n.organisation, n.router);
return (z, c) => {
const b = U("can");
return t(l) && t(l).tabs ? (g(), H(t(Q), {
key: 0,
id: "settings-companies-cards",
options: t(l),
locale: n.locale,
onMobileBack: c[6] || (c[6] = (f) => t(p)())
}, {
actions: C(() => [
u("button", {
class: "az-btn az-btn-color-neutral az-whitespace-nowrap",
onClick: c[0] || (c[0] = (...f) => t(p) && t(p)(...f)),
onKeypress: c[1] || (c[1] = T(
(...f) => t(p) && t(p)(...f),
["enter"]
))
}, h(t(i).global.t("common.back")), 33),
u("button", {
class: "az-btn az-btn-color-primary az-whitespace-nowrap",
onClick: c[2] || (c[2] = (...f) => t(e) && t(e)(...f)),
onKeypress: c[3] || (c[3] = T(
(...f) => t(e) && t(e)(...f),
["enter"]
))
}, h(t(i).global.t("settings.plannings.create")), 33)
]),
mobileActions: C(() => [
u("button", {
class: "az-btn az-btn-color-transparent az-btn-icon-alone",
onClick: c[4] || (c[4] = (...f) => t(e) && t(e)(...f)),
onKeypress: c[5] || (c[5] = T(
(...f) => t(e) && t(e)(...f),
["enter"]
))
}, Pe, 32)
]),
plannings: C(() => [
G(x(xe, {
locale: z.locale,
plannings: t(d),
onDeletePlanning: t(o),
router: n.router,
logger: n.logger
}, null, 8, ["locale", "plannings", "onDeletePlanning", "router", "logger"]), [
[b, void 0, "readPlanning"]
])
]),
_: 1
}, 8, ["options", "locale"])) : B("", !0);
};
}
});
export {
Ae as default
};