UNPKG

@agendize/vue-settings

Version:
1,061 lines 53.6 kB
import { ref as z, computed as X, onMounted as oa, watch as G, defineComponent as Q, openBlock as r, createBlock as I, unref as a, withKeys as ya, withCtx as R, createElementVNode as e, toDisplayString as b, createVNode as J, createElementBlock as y, Fragment as A, createCommentVNode as E, renderList as F, normalizeStyle as va, inject as ea, createTextVNode as da, withDirectives as ba, isRef as ka, vModelSelect as wa } from "vue"; import { i as K, S as ha } from "./index.d2d0aba2.js"; import { refLocal as _a, ModalDialogBox as xa, Avatar as ca, HoursErrors as ga, Panel as ua, BusinessHours as Pa, FieldSelect as aa, Mandatory as L, FieldDateTime as na, ConfirmDialog as ta, HoursItem as $a, FieldToggle as Ca, PageWithTabsAndPanel as Da, FabButton as Wa } from "@agendize/design-system"; import { StorageKeys as Va, WorkingPlanningDayEntity as Sa, StaffWorkingPlanningEntity as pa } from "@agendize/js-calendar-api"; import { D as Z } from "./datetime.911b67ae.js"; import { useAccountStore as fa } from "@agendize/vue-tools"; import { CompanySearch as Na } from "@agendize/vue-search"; import { m as ia } from "./common.6fc78cfb.js"; import "./vendor.26bbd9f1.js"; import "@agendize/az-i18n"; import "vue-router"; import "@agendize/vue-acl"; function Ea(C, x, n, $) { const s = z(Z.now()), u = z(s.value.startOf("week")), t = z(q.OPENING); x === "en" && (u.value = u.value.minus({ day: 1 })); const k = K(x), o = _a(Va.WORKING_PLANNING_COMPANY, void 0), d = z(!1), l = z(!1), c = z(!1), f = X(() => !o.value), w = z([]), P = z(), N = z(), D = z(!1), V = z(!1), h = z([]), T = z(!1), U = z({ title: k.global.t("settings.working-plannings.title"), subTitle: k.global.t("settings.working-plannings.subtitle"), titleTranslatable: !0, subTitleTranslatable: !0, tabs: [ { id: "planning", title: "planning" } ], mobileBack: !1 }); async function B(O) { !O || (sa(!1), o.value = O, d.value = !1, await Y()); } async function M() { await ($ == null ? void 0 : $.push({ name: ha.planningModel })); } async function Y() { h.value = [], o.value && (p(o.value.id), V.value = await ma(), h.value.push({ id: "newPlanning", icon: "fak fa-sharp-regular-clock-seven-circle-plus", title: k.global.t("settings.working-plannings.fab.manual.title"), description: k.global.t("settings.working-plannings.fab.manual.description"), class: "az-btn az-btn-color-lightprimary az-btn-shape-circle az-btn-fab az-animation az-animation-appear", action: () => { W(); } }), V.value && h.value.push({ id: "newPlanningFromModel", icon: "fak fa-regular-calendar-days-circle-plus", title: k.global.t("settings.working-plannings.fab.from-model.title"), description: k.global.t("settings.working-plannings.fab.from-model.description"), class: "az-btn az-btn-color-lightprimary az-btn-shape-circle az-btn-fab az-animation az-animation-appear", action: () => { j(); } }), h.value.push({ id: "managePlanningModel", icon: "fak fa-regular-calendar-days-gear", title: k.global.t("settings.working-plannings.fab.manageModel.title"), description: k.global.t("settings.working-plannings.fab.manageModel.description"), class: "az-btn az-btn-color-lightprimary az-btn-shape-circle az-btn-fab az-animation az-animation-appear", action: async () => { await M(); } })); } function p(O) { c.value = !0, C.getAllCompanyWorkingPlannings(n.email, O, u.value.toJSDate(), u.value.plus({ day: 6 }).toJSDate(), t.value === q.OCCUPANCY).then((H) => { H && (w.value = H, c.value = !1); }); } function m() { d.value = !0; } function S() { d.value = !1; } async function i() { s.value.weekNumber !== u.value.weekNumber && (u.value = s.value.startOf("week"), x === "en" && (u.value = u.value.minus({ day: 1 })), o.value && p(o.value.id)); } function g() { u.value = u.value.plus({ day: 7 }), o.value && p(o.value.id); } function _() { u.value = u.value.minus({ day: 7 }), o.value && p(o.value.id); } const v = z(void 0); function W() { v.value = "new", D.value = !1; } function j() { v.value = "new", D.value = !0; } function la(O, H, ra) { P.value = { userId: H.id, staffId: ra, firstName: H.firstName, lastName: H.lastName, email: H.email }, N.value = O, H && ra && O && !O.isOnVacation && (v.value = "edit"); } function sa(O) { O && p(o.value.id), v.value = void 0; } async function ma() { var O, H; return ((H = (O = await C.getPlannings(n.email)) == null ? void 0 : O.results) == null ? void 0 : H.length) > 0 && await fa().hasAbility("readPlanning"); } async function za() { let O = await C.getAllCompanies(n.email); O != null && O.results && (T.value = O.results.length > 1, O.results.length === 1 && (o.value = O.results[0])), d.value = !o.value; } return oa(async () => { await za(), l.value = !0, await Y(); }), G(() => t.value, () => { o.value && p(o.value.id); }), { pageOptions: U, displaySelectCompanyModal: d, changeCompany: m, selectCompanyValidate: B, selectCompanyClose: S, companySelected: o, modalCloseDisabled: f, initialisationEnded: l, currentWeek: u, goToToday: i, nextWeek: g, prevWeek: _, workingPlannings: w, loading: c, closeEditPanel: sa, rightPanelOpened: v, selectWorkingDay: la, selectedStaff: P, selectedWorkingPlanningDay: N, fromPlanning: D, fabActions: h, canSelectCompany: T, viewType: t }; } var q = /* @__PURE__ */ ((C) => (C.OPENING = "openingHours", C.OCCUPANCY = "occupancyRate", C))(q || {}); const Oa = { class: "az-flex az-flex-col az-gap-4 az-h-full" }, Ma = { class: "az-modal-subtitle" }, Ia = { key: 1 }, Ta = /* @__PURE__ */ Q({ __name: "View", props: { api: {}, locale: {}, organisation: {}, closeDisabled: { type: Boolean, default: !1 }, companiesFilter: {} }, emits: ["close", "select"], setup(C, { emit: x }) { const n = C, $ = K(n.locale), s = x; function u(k) { s("select", k); } function t() { s("close"); } return (k, o) => (r(), I(a(xa), { id: "modal-company-selection", title: a($).global.t("settings.working-plannings.company.modal.title"), locale: n.locale, closeDisabled: n.closeDisabled, closeOnBlurClick: !n.closeDisabled, size: 700, fixedHeight: !0, resize: !1, onClose: t, onKeydown: ya(t, ["esc"]) }, { content: R(() => { var d; return [ e("div", Oa, [ e("div", null, [ e("div", Ma, b(a($).global.t("settings.working-plannings.company.modal.subtitle")), 1) ]), J(a(Na), { ref: "companySearch", api: n.api, locale: n.locale, "organisation-email": (d = n.organisation.email) != null ? d : "", filter: n.companiesFilter, onSelect: u }, null, 8, ["api", "locale", "organisation-email", "filter"]) ]) ]; }), footer: R(() => [ n.closeDisabled ? (r(), y("div", Ia)) : (r(), y("button", { key: 0, id: "modal-company-select-cancel", class: "az-btn az-btn-color-neutral az-btn-stretch", onClick: t }, b(a($).global.t("system.buttons.cancel")), 1)) ]), _: 1 }, 8, ["title", "locale", "closeDisabled", "closeOnBlurClick"])); } }); function Ua(C, x, n, $) { const s = z(C); function u(l) { var f; const c = (f = t(l)) == null ? void 0 : f.hours; return c ? c.length > 0 : !1; } function t(l) { return x === "en" && (l = ia(l - 2, 7) + 1), s.value.days.find((c) => l === Z.fromJSDate(c.date).weekday); } function k(l) { let c = "", f = t(l); if (f) { let w = Math.trunc(f.durationInMinutes / 60), P = f.durationInMinutes % 60; w > 0 && (c += w + " " + n.global.t("common.duration.hours", w), P > 0 && (c += " ")), P > 0 && (c += P + " " + n.global.t("common.duration.minutes")); } return c; } function o(l) { return x === "en" ? Z.fromFormat(l, "hh:mm").toFormat("hh:mm a") : l; } function d(l, c) { const f = t(l); $("selectWorkingDay", f, C.user, c); } return { workingPlanningRef: s, hasWorkingHours: u, getDayWorkingHour: t, getDuration: k, getHourLabel: o, selectWorkingDay: d }; } const Aa = { key: 0, id: "az-working-planing-user-line", class: "az-bg-white az-border-t az-border-grey-50 az-sticky-left az-bg-white az-px-4 az-py-2 az-flex az-items-center az-flex-2" }, Ba = { class: "az-flex az-flex-row az-gap-3 az-items-center az-overflow-hidden" }, Ra = { class: "az-flex az-flex-col az-overflow-hidden" }, Ha = { class: "az-font-medium az-text-black az-overflow-hidden az-text-ellipsis az-whitespace-nowrap exclude-weglot" }, La = { class: "az-text-grey-500 az-text-body3 az-overflow-hidden az-text-ellipsis exclude-weglot" }, ja = ["onClick"], Fa = { key: 0, class: "az-plage" }, Ga = { class: "az-font-medium" }, Ja = { class: "az-text-primary-500" }, Ya = { key: 1, class: "az-plage az-plage-vacation" }, Ka = { class: "az-font-medium az-h-max" }, qa = { key: 2, class: "az-plage az-plage-empty" }, Qa = /* @__PURE__ */ Q({ __name: "View", props: { workingPlanning: {}, firstDay: {}, api: {}, locale: {}, logger: {}, organisation: {} }, emits: ["selectWorkingDay"], setup(C, { emit: x }) { const n = C, $ = K(n.locale), s = x, { workingPlanningRef: u, hasWorkingHours: t, getDayWorkingHour: k, getDuration: o, getHourLabel: d, selectWorkingDay: l } = Ua(n.workingPlanning, n.locale, $, s); return G(() => n.workingPlanning, (c) => u.value = c), (c, f) => { var w, P, N, D, V; return r(), y(A, null, [ c.workingPlanning ? (r(), y("div", Aa, [ e("div", Ba, [ J(a(ca), { color: "primary", size: 40, shape: "circle", initials: ("" + ((w = a(u).user) == null ? void 0 : w.firstName.substring(0, 1)) + ((P = a(u).user) == null ? void 0 : P.lastName.substring(0, 1))).toUpperCase() }, null, 8, ["initials"]), e("div", Ra, [ e("span", Ha, b(((N = a(u).user) == null ? void 0 : N.firstName) + " " + ((D = a(u).user) == null ? void 0 : D.lastName)), 1), e("span", La, b((V = a(u).user) == null ? void 0 : V.email), 1) ]) ]) ])) : E("", !0), (r(), y(A, null, F(7, (h) => { var T, U; return e("div", { class: "az-bg-white az-border-t az-p-2 az-text-center az-border-l az-border-grey-50", onClick: (B) => { var M; return a(l)(h, (M = a(u)) == null ? void 0 : M.staffId); } }, [ a(t)(h) && !((T = a(k)(h)) != null && T.isOnVacation) ? (r(), y("div", Fa, [ (r(!0), y(A, null, F(a(k)(h).hours, (B) => (r(), y("span", Ga, b(a(d)(B.start)) + " \u2192 " + b(a(d)(B.end)), 1))), 256)), e("span", Ja, b(a(o)(h)), 1) ])) : (U = a(k)(h)) != null && U.isOnVacation ? (r(), y("div", Ya, [ e("span", Ka, b(a($).global.t("settings.working-plannings.planning.slot.unavailable")), 1) ])) : (r(), y("div", qa)) ], 8, ja); }), 64)) ], 64); }; } }); function Xa(C, x, n, $) { const s = z(C), u = X(() => { let o = []; for (let d = 1; d < 8; d++) o.push(t(d)); return o; }); function t(o) { x === "en" && (o = ia(o - 2, 7) + 1); let d = s.value.days.find((l) => o === Z.fromJSDate(l.date).weekday); return d || (d = new Sa(), d.hours = []), d; } function k(o, d) { d.isOnVacation || $("selectWorkingDay", d, C.user, C.staffId); } return { workingPlanningRef: s, occupancyRateDay: u, selectOccupancyDay: k }; } const Za = { key: 0, id: "az-occupancy-planing-user-line", class: "az-bg-white az-border-t az-border-grey-50 az-sticky-left az-bg-white az-px-4 az-py-2 az-flex az-items-center az-flex-2" }, ae = { class: "az-flex az-flex-row az-gap-3 az-items-center az-overflow-hidden" }, ee = { class: "az-avatar az-avatar-shape-circle az-avatar-size-40 exclude-weglot" }, ne = { class: "az-flex az-flex-col az-overflow-hidden" }, le = { class: "az-font-medium az-text-black az-overflow-hidden az-text-ellipsis az-whitespace-nowrap exclude-weglot" }, te = { class: "az-text-grey-500 az-text-body3 az-overflow-hidden az-text-ellipsis exclude-weglot" }, oe = ["id", "onClick"], ie = ["id"], se = { class: "az-font-medium az-h-max" }, re = ["id"], de = { class: "az-font-medium az-h-max" }, ce = ["id"], ge = /* @__PURE__ */ Q({ __name: "View", props: { workingPlanning: {}, firstDay: {}, api: {}, locale: {}, logger: {}, organisation: {} }, emits: ["selectWorkingDay"], setup(C, { emit: x }) { const n = C, $ = K(n.locale), s = x, { workingPlanningRef: u, occupancyRateDay: t, selectOccupancyDay: k } = Xa(n.workingPlanning, n.locale, $, s); function o(l) { return l < 80 ? "var(--az-black)" : "var(--az-white)"; } function d(l) { let c, f; return l < 50 ? (c = "var(--az-success-500)", f = "var(--az-success-50)") : l < 80 ? (c = "var(--az-secondary-500)", f = "var(--az-secondary-50)") : (c = "var(--az-error-500)", f = "var(--az-error-50)"), `linear-gradient( to top, ${c} 0%, ${c} ${l}%, ${f} ${l}%, ${f} 100% )`; } return G(() => n.workingPlanning, (l) => u.value = l), (l, c) => { var f, w, P, N, D; return r(), y(A, null, [ l.workingPlanning ? (r(), y("div", Za, [ e("div", ae, [ e("div", ee, b(("" + ((f = a(u).user) == null ? void 0 : f.firstName.substring(0, 1)) + ((w = a(u).user) == null ? void 0 : w.lastName.substring(0, 1))).toUpperCase()), 1), e("div", ne, [ e("span", le, b(((P = a(u).user) == null ? void 0 : P.firstName) + " " + ((N = a(u).user) == null ? void 0 : N.lastName)), 1), e("span", te, b((D = a(u).user) == null ? void 0 : D.email), 1) ]) ]) ])) : E("", !0), (r(!0), y(A, null, F(a(t), (V, h) => (r(), y("div", { id: "az-occupancy-" + l.workingPlanning.staffId + "-" + h, class: "az-bg-white az-border-t az-p-2 az-text-center az-border-l az-border-grey-50", onClick: (T) => a(k)(h, V) }, [ V.occupancyRate && !V.isOnVacation ? (r(), y("div", { key: 0, id: "az-rate-" + l.workingPlanning.staffId + "-" + h, class: "az-plage az-occupancy az-justify-center az-items-center", style: va({ background: d(V.occupancyRate.total), color: o(V.occupancyRate.total) }) }, [ e("span", se, b(V.occupancyRate.total) + "%", 1) ], 12, ie)) : V.isOnVacation ? (r(), y("div", { key: 1, id: "az-vacation-" + l.workingPlanning.staffId + "-" + h, class: "az-plage az-plage-vacation az-occupancy az-justify-center az-items-center" }, [ e("span", de, b(a($).global.t("settings.working-plannings.planning.slot.unavailable")), 1) ], 8, re)) : (r(), y("div", { key: 2, id: "az-empty-" + l.workingPlanning.staffId + "-" + h, class: "az-plage az-plage-empty" }, null, 8, ce)) ], 8, oe))), 256)) ], 64); }; } }), ue = { class: "az-activities-plan-section az-z-200 az-bg-grey-25 az-text-grey-500 az-text-body3 az-font-medium az-px-4 az-py-2 az-flex az-items-center az-justify-center az-border-t az-border-b az-border-grey-50" }, pe = { class: "az-tag az-tag-color-neutral az-text-body3 az-flex az-flex-row az-gap-1 az-w-full" }, fe = { class: "az-overflow-hidden az-text-ellipsis" }, me = /* @__PURE__ */ Q({ __name: "View", props: { workingPlannings: {}, firstDay: {}, api: {}, locale: {}, logger: {}, organisation: {}, viewType: {} }, emits: ["selectWorkingDay"], setup(C, { emit: x }) { const n = C, $ = K(n.locale), s = x, u = z(n.workingPlannings); G(() => n.workingPlannings, (o) => { u.value = o; }); const t = X(() => { let o = []; for (let d = 1; d <= 7; d++) o.push({ day: d, number: 0 }); for (let d of u.value) d.days.forEach((l) => { let c = o.find((f) => f.day === Z.fromJSDate(l.date).weekday); c && l.hours.length > 0 && !l.isOnVacation && c.number++; }); return o; }), k = X(() => u.value.sort((o, d) => { var f, w; const l = o, c = d; return !l.user || !c.user ? 0 : ((f = l.user.lastName) != null ? f : "") === ((w = c.user.lastName) != null ? w : "") ? l.user.firstName.localeCompare(c.user.firstName) : l.user.lastName.localeCompare(c.user.lastName); })); return (o, d) => (r(), y(A, null, [ (r(), y(A, null, F(7, (l) => { var c; return e("div", ue, [ e("div", pe, [ e("span", null, b((c = t.value.find((f) => f.day === (o.locale === "en" ? a(ia)(l - 2, 7) + 1 : l))) == null ? void 0 : c.number), 1), e("span", fe, b(a($).global.t("settings.working-plannings.user")), 1) ]) ]); }), 64)), (r(!0), y(A, null, F(k.value, (l) => (r(), y(A, null, [ o.viewType === a(q).OPENING ? (r(), I(Qa, { key: 0, "working-planning": l, organisation: o.organisation, locale: o.locale, logger: o.logger, api: o.api, firstDay: o.firstDay, onSelectWorkingDay: d[0] || (d[0] = (c, f, w) => s("selectWorkingDay", c, f, w)) }, null, 8, ["working-planning", "organisation", "locale", "logger", "api", "firstDay"])) : o.viewType === a(q).OCCUPANCY ? (r(), I(ge, { key: 1, workingPlanning: l, organisation: o.organisation, locale: o.locale, logger: o.logger, api: o.api, firstDay: o.firstDay, onSelectWorkingDay: d[1] || (d[1] = (c, f, w) => s("selectWorkingDay", c, f, w)) }, null, 8, ["workingPlanning", "organisation", "locale", "logger", "api", "firstDay"])) : E("", !0) ], 64))), 256)) ], 64)); } }), ze = /* @__PURE__ */ e("i", { class: "fa fa-xmark", "aria-hidden": "true" }, null, -1), ye = [ ze ], ve = { class: "az-flex az-flex-1 az-flex-col az-gap-4" }, be = { class: "az-text-grey-500" }, ke = { class: "az-flex az-flex-col az-gap-5" }, we = { key: 1, class: "az-flex az-flex-col az-gap-4" }, he = /* @__PURE__ */ e("div", { class: "az-divider" }, null, -1), _e = { class: "az-flex az-flex-col az-gap-4" }, xe = { class: "az-flex az-gap-2 az-flex-col" }, Pe = { key: 0, class: "az-error-label" }, $e = { class: "az-flex az-gap-2" }, Ce = ["disabled"], De = { key: 0, class: "fas fa-circle-notch fa-spin az-w-auto", "aria-hidden": "true" }, We = /* @__PURE__ */ Q({ __name: "WorkingPlanningEdit", props: { id: { default: Math.random().toString(32) }, locale: { default: "en" }, newWeek: {}, api: {}, organisationEmail: {}, companyId: {}, fromPlanning: { type: Boolean } }, emits: ["close"], setup(C, { emit: x }) { const n = C, $ = x, s = K(n.locale), u = ea("createConfirmDialog"), t = ea("toaster"), k = z(/* @__PURE__ */ new Map()), o = z(new ga()), d = z(!0), l = z(n.newWeek === void 0 || n.newWeek.diffNow("days").days < 0 ? Z.now() : n.newWeek), c = z(l.value.startOf("week").toJSDate()), f = z(l.value.endOf("week").toJSDate()), w = z(!1), P = z([]), N = z([]), D = z([]), V = z([]), h = z(void 0), T = z([]), U = z([]), B = z([]), M = z([]), Y = X(() => { let i = P.value.length > 0 && D.value.length > 0 && o.value && o.value.errors.length == 0 && !w.value; return n.fromPlanning && (i = i && h.value.length > 0 && M.value.length > 0), i; }); async function p() { var i, g, _; n.newWeek && ["monday", "tuesday", "wednesday", "thursday", "friday"].forEach((v) => k.value.set(v, [{ start: "09:00", end: "18:00" }])), N.value = (g = (i = (await n.api.getAllCompanies(n.organisationEmail)).results) == null ? void 0 : i.map((v) => ({ label: v.name, value: v.id || "" })).sort((v, W) => v.label.toUpperCase().localeCompare(W.label.toUpperCase()))) != null ? g : [], ((_ = N.value) == null ? void 0 : _.length) === 1 ? P.value = [N.value[0].value] : n.companyId && (P.value = [n.companyId]), d.value = !1; } async function m() { T.value = (await n.api.getPlannings(n.organisationEmail)).results, U.value = T.value.map((i) => ({ label: i.name, value: i.name })), U.value.length === 1 ? h.value = [U.value[0].value] : h.value = []; } async function S() { var g; d.value = !0; let i = new pa(); i.staffId = D.value[0], i.company = { id: P.value[0], name: "" }, i.start = c.value, i.end = f.value; try { if (n.fromPlanning && h.value) { let _ = (g = T.value.find((W) => h.value[0] === W.name)) == null ? void 0 : g.id, v = +M.value[0]; _ != null && v != null && (i.planningId = _, i.planningStartWeek = v); } else i.days = k.value; await n.api.createWorkingPlanning(n.organisationEmail, i), t == null || t.success(s.global.t("settings.working-plannings-add.save-success")), $("close", !0); } catch (_) { if (_.code === 409) { if (u) { const { reveal: v, onConfirm: W, onCancel: j } = u(ta, { locale: n.locale, closeOnBlurClick: !0, confirmation: s.global.t("settings.working-plannings-add.errors.conflict.merge"), cancel: s.global.t("settings.working-plannings-add.errors.conflict.replace"), description: s.global.t("settings.working-plannings-add.errors.conflict.description"), title: s.global.t("settings.working-plannings-add.errors.conflict.title"), icon: "fa fa-exclamation-triangle az-mr-2 az-error-label" }); v(), W(async () => { i.saveMode = "merge", await n.api.createWorkingPlanning(n.organisationEmail, i), t == null || t.success(s.global.t("settings.working-plannings-add.save-success")), $("close", !0); }), j(async (la) => { la || (i.saveMode = "replace", await n.api.createWorkingPlanning(n.organisationEmail, i), t == null || t.success(s.global.t("settings.working-plannings-add.save-success")), $("close", !0)); }); } } else t == null || t.error(s.global.t("settings.working-plannings-add.errors.save-error")); } finally { d.value = !1; } } return G(P, async (i) => { var g, _, v; d.value = !0, D.value = [], V.value = [], P.value[0] && (V.value = (_ = (g = (await n.api.getAllStaffs(P.value[0], n.organisationEmail)).results) == null ? void 0 : g.map((W) => { var j; return { label: W.firstName + " " + W.lastName, value: (j = W.id) != null ? j : "" }; }).sort((W, j) => W.label.toUpperCase().localeCompare(j.label.toUpperCase()))) != null ? _ : [], ((v = V.value) == null ? void 0 : v.length) === 1 && (D.value = [V.value[0].value])), d.value = !1; }), G([c, f], () => { w.value = c.value > f.value; }), G(h, (i) => { let g = T.value.find((_) => _.name === (i ? i[0] : "")); g && g.weeks && (B.value = g.weeks.map((_) => ({ label: s.global.t("agenda.title.week-number", { week: _.index + 1 }), value: _.index + "" })), M.value = [], B.value.length === 1 && (M.value = [B.value[0].value])); }, { deep: !0 }), oa(() => { p(), n.fromPlanning && m(); }), (i, g) => (r(), I(a(ua), { id: `${i.id}`, class: "details-panel", title: a(s).global.t(i.fromPlanning ? "settings.working-plannings-add.from-model.title" : "settings.working-plannings-add.title"), locale: i.locale }, { "header-right": R(() => [ e("button", { ref: "closeButton", class: "az-icon az-btn az-btn-icon-alone az-btn-color-transparent az-icon-cross", onClick: g[0] || (g[0] = (_) => $("close", !1)) }, ye, 512) ]), content: R(() => { var _; return [ e("div", ve, [ e("span", be, b(a(s).global.t(i.fromPlanning ? "settings.working-plannings-add.from-model.subtitle" : "settings.working-plannings-add.subtitle")), 1), e("div", ke, [ i.fromPlanning ? (r(), y("div", we, [ h.value !== void 0 ? (r(), I(a(aa), { key: 0, modelValue: h.value, "onUpdate:modelValue": g[2] || (g[2] = (v) => h.value = v), id: `${i.id}_planning_model`, label: a(s).global.t("settings.working-plannings-add.from-model.field.model.title"), placeholder: a(s).global.t("settings.working-plannings-add.from-model.field.model.placeholder"), locale: i.locale, mandatory: a(L).mandatory, values: U.value, translatable: !1 }, null, 8, ["modelValue", "id", "label", "placeholder", "locale", "mandatory", "values"])) : E("", !0), h.value && h.value.length > 0 ? (r(), I(a(aa), { key: 1, id: `${i.id}_planning_model_week`, label: a(s).global.t("settings.working-plannings-add.from-model.field.week.title"), placeholder: a(s).global.t("settings.working-plannings-add.from-model.field.week.placeholder"), helperMessage: a(s).global.t("settings.working-plannings-add.from-model.field.week.helper"), locale: i.locale, mandatory: a(L).mandatory, values: B.value, modelValue: M.value, "onUpdate:modelValue": g[3] || (g[3] = (v) => M.value = v) }, null, 8, ["id", "label", "placeholder", "helperMessage", "locale", "mandatory", "values", "modelValue"])) : E("", !0) ])) : (r(), I(a(Pa), { key: 0, locale: i.locale, modelValue: k.value, "onUpdate:modelValue": g[1] || (g[1] = (v) => k.value = v), errors: o.value, showClosed: !0, defaultWorkingHours: [] }, null, 8, ["locale", "modelValue", "errors"])), he, e("div", _e, [ e("div", xe, [ w.value ? (r(), y("span", Pe, b(a(s).global.t("common.error.startAfterEnd")), 1)) : E("", !0), e("div", $e, [ J(a(na), { class: "az-flex-1", id: `${i.id}_planning_start`, label: a(s).global.t("settings.working-plannings-add.period.start"), locale: i.locale, mode: "date", mandatory: a(L).mandatory, modelValue: c.value, "onUpdate:modelValue": g[4] || (g[4] = (v) => c.value = v) }, null, 8, ["id", "label", "locale", "mandatory", "modelValue"]), J(a(na), { class: "az-flex-1", id: `${i.id}_planning_end`, label: a(s).global.t("settings.working-plannings-add.period.end"), locale: i.locale, mode: "date", mandatory: a(L).mandatory, modelValue: f.value, "onUpdate:modelValue": g[5] || (g[5] = (v) => f.value = v) }, null, 8, ["id", "label", "locale", "mandatory", "modelValue"]) ]) ]) ]), J(a(aa), { id: `${i.id}_planning_companies`, label: a(s).global.t("settings.working-plannings-add.company"), locale: i.locale, mandatory: a(L).mandatory, translatable: !1, values: N.value, modelValue: P.value, "onUpdate:modelValue": g[6] || (g[6] = (v) => P.value = v) }, null, 8, ["id", "label", "locale", "mandatory", "values", "modelValue"]), ((_ = P.value) == null ? void 0 : _.length) > 0 ? (r(), I(a(aa), { key: 2, id: `${i.id}_planning_staffs`, label: a(s).global.t("settings.working-plannings-add.staff"), locale: i.locale, mandatory: a(L).mandatory, translatable: !1, values: V.value, modelValue: D.value, "onUpdate:modelValue": g[7] || (g[7] = (v) => D.value = v) }, null, 8, ["id", "label", "locale", "mandatory", "values", "modelValue"])) : E("", !0) ]) ]) ]; }), footer: R(() => [ e("button", { class: "az-btn az-btn-color-primary az-min-w-full", onClick: S, disabled: d.value || !Y.value }, [ d.value ? (r(), y("i", De)) : E("", !0), da(b(a(s).global.t("common.action.validate")), 1) ], 8, Ce) ]), _: 1 }, 8, ["id", "title", "locale"])); } }), Ve = /* @__PURE__ */ e("i", { class: "far fa-trash", "aria-hidden": "true" }, null, -1), Se = [ Ve ], Ne = /* @__PURE__ */ e("i", { class: "fa fa-xmark", "aria-hidden": "true" }, null, -1), Ee = [ Ne ], Oe = { class: "az-flex az-flex-1 az-flex-col az-gap-4" }, Me = { class: "az-flex az-flex-col az-gap-4 az-p-4 az-rounded-200 az-bg-grey-25" }, Ie = { class: "az-flex az-flex-row az-justify-between" }, Te = { class: "az-font-medium" }, Ue = { class: "az-flex az-flex-col" }, Ae = { class: "az-flex az-flex-row az-justify-between" }, Be = { class: "az-text-grey-600" }, Re = { class: "az-capitalize exclude-weglot" }, He = { class: "az-flex az-flex-row az-justify-between az-gap-4" }, Le = { class: "az-text-grey-600" }, je = { class: "az-text-ellipsis exclude-weglot az-text-right" }, Fe = { class: "az-flex az-flex-row az-justify-between az-gap-4" }, Ge = { class: "az-text-grey-600" }, Je = { class: "az-text-ellipsis exclude-weglot az-text-right" }, Ye = /* @__PURE__ */ e("div", { class: "az-divider" }, null, -1), Ke = { class: "az-flex az-flex-col az-gap-5" }, qe = { key: 0, class: "az-error-label" }, Qe = { key: 2 }, Xe = { class: "az-flex az-flex-col az-gap-2" }, Ze = { class: "az-p-4 az-rounded-200 az-border-grey-50 az-border az-border-dashed az-text-center az-text-grey-500" }, an = { key: 4, class: "az-flex az-flex-col az-gap-2 az-border az-border-grey-50 az-rounded-200 az-p-4" }, en = { class: "az-flex az-gap-2 az-flex-col" }, nn = { key: 0, class: "az-error-label" }, ln = { class: "az-flex az-gap-2" }, tn = { key: 0, class: "az-text-grey-500" }, on = { key: 1, class: "az-text-grey-500" }, sn = { key: 2, class: "az-text-grey-500" }, rn = ["disabled"], dn = { key: 0, class: "fas fa-circle-notch fa-spin az-w-auto", "aria-hidden": "true" }, cn = /* @__PURE__ */ Q({ __name: "WorkingPlanningDayEdit", props: { id: { default: Math.random().toString(32) }, locale: {}, api: {}, organisationEmail: {}, selectedStaff: {}, selectedWorkingPlanningDay: {}, company: {} }, emits: ["close"], setup(C, { emit: x }) { const n = C, $ = ea("createConfirmDialog"), s = ea("toaster"), u = x, t = K(n.locale), k = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"], o = z(new ga()), d = z(!1), l = z(n.selectedWorkingPlanningDay.hours.map((p) => ({ ...p }))), c = z(!1), f = z(!1), w = z(n.selectedWorkingPlanningDay.date), P = z(n.selectedWorkingPlanningDay.date), N = z([]), D = z(["all-dayname"]), V = X(() => o.value && o.value.errors.length === 0 ? c.value ? !f.value : !0 : !1); function h(p) { return p.errors.map((m) => m.label).filter((m, S, i) => i.indexOf(m) === S).join(" ; "); } function T() { l.value = [{ start: "09:00", end: "18:00" }]; } function U() { N.value = [], N.value.push({ value: "all-dayname", label: t.global.t("common.days.all-dayname", { dayname: t.global.t("common.days." + k[n.selectedWorkingPlanningDay.date.getDay()], 2).toLowerCase() }) }), N.value.push({ value: "all-weekdays", label: t.global.t("common.days.all-weekdays") }), N.value.push({ value: "all-days", label: t.global.t("common.days.all-days") }); } async function B() { d.value = !0; let p; if (c.value) { p = M(), p.start = w.value, p.end = P.value; const m = p.days; switch (D.value[0]) { case "all-dayname": m.set(k[n.selectedWorkingPlanningDay.date.getDay()], l.value); break; case "all-weekdays": k.forEach((S) => { S !== "sunday" && S !== "saturday" && m.set(S, l.value); }); break; case "all-days": k.forEach((S) => { m.set(S, l.value); }); break; } } else p = M(!0); try { await n.api.createWorkingPlanning(n.organisationEmail, p), s == null || s.success(t.global.t("settings.working-plannings-day-edit.save-success")), u("close", !0); } catch (m) { if (m.code === 409) { if ($) { const { reveal: S, onConfirm: i, onCancel: g } = $(ta, { locale: n.locale, closeOnBlurClick: !0, confirmation: t.global.t("settings.working-plannings-add.errors.conflict.merge"), cancel: t.global.t("settings.working-plannings-add.errors.conflict.replace"), description: t.global.t("settings.working-plannings-add.errors.conflict.description"), title: t.global.t("settings.working-plannings-add.errors.conflict.title"), icon: "fa fa-exclamation-triangle az-mr-2 az-error-label" }); S(), i(async () => { p.saveMode = "merge", await n.api.createWorkingPlanning(n.organisationEmail, p), s == null || s.success(t.global.t("settings.working-plannings-day-edit.save-success")), u("close", !0); }), g(async (_) => { _ || (p.saveMode = "replace", await n.api.createWorkingPlanning(n.organisationEmail, p), s == null || s.success(t.global.t("settings.working-plannings-day-edit.save-success")), u("close", !0)); }); } } else s == null || s.error(t.global.t("settings.working-plannings-day-edit.errors.save-error")); } finally { d.value = !1; } } function M(p = !1) { let m = new pa(); return m.staffId = n.selectedStaff.staffId, m.company = { id: n.company.id, name: "" }, m.days = /* @__PURE__ */ new Map(), p && (m.start = n.selectedWorkingPlanningDay.date, m.end = n.selectedWorkingPlanningDay.date, m.days.set(k[n.selectedWorkingPlanningDay.date.getDay()], l.value)), m; } async function Y() { if (d.value = !0, $) { const { reveal: p, onConfirm: m, onCancel: S } = $(ta, { locale: n.locale, closeOnBlurClick: !1, confirmation: t.global.t("settings.working-plannings-day-edit.delete.confirm-dialog.confirm"), cancel: t.global.t("settings.working-plannings-day-edit.delete.confirm-dialog.cancel"), description: t.global.t("settings.working-plannings-day-edit.delete.confirm-dialog.description"), title: t.global.t("settings.working-plannings-day-edit.delete.confirm-dialog.title"), icon: "far fa-triangle-exclamation az-mr-2 az-error-label" }); p(), m(async () => { l.value = []; let i = M(!0); i.saveMode = "replace", await n.api.createWorkingPlanning(n.organisationEmail, i), s == null || s.success(t.global.t("settings.working-plannings-day-edit.delete.delete-success")), u("close", !0); }), S(async () => { d.value = !1; }); } } return G(() => n.selectedWorkingPlanningDay, (p) => { var m; l.value = (m = p.hours) == null ? void 0 : m.map((S) => ({ ...S })), U(); }), G([w, P], () => { f.value = w.value > P.value; }), oa(() => { U(); }), (p, m) => (r(), I(a(ua), { id: p.id, class: "details-panel", title: a(t).global.t("settings.working-plannings-day-edit.title"), locale: p.locale }, { "header-right": R(() => [ l.value && l.value.length > 0 ? (r(), y("button", { key: 0, ref: "deleteButton", class: "az-icon az-btn az-btn-icon-alone az-btn-color-transparent", onClick: Y }, Se, 512)) : E("", !0), e("button", { ref: "closeButton", class: "az-icon az-btn az-btn-icon-alone az-btn-color-transparent az-icon-cross", onClick: m[0] || (m[0] = (S) => u("close", !1)) }, Ee, 512) ]), content: R(() => { var S, i; return [ e("div", Oe, [ e("div", Me, [ e("div", Ie, [ e("span", Te, b(a(t).global.t("settings.working-plannings-day-edit.recap.title")), 1) ]), e("div", Ue, [ e("div", Ae, [ e("span", Be, b(a(t).global.t("settings.working-plannings-day-edit.recap.date")), 1), e("span", Re, b(new Intl.DateTimeFormat(p.locale, { dateStyle: "full" }).format(p.selectedWorkingPlanningDay.date)), 1) ]), e("div", He, [ e("span", Le, b(a(t).global.t("settings.working-plannings-day-edit.recap.company")), 1), e("span", je, b(p.company.name), 1) ]), e("div", Fe, [ e("span", Ge, b(a(t).global.t("settings.working-plannings-day-edit.recap.staff")), 1), e("span", Je, b((S = p.selectedStaff) == null ? void 0 : S.firstName) + " " + b((i = p.selectedStaff) == null ? void 0 : i.lastName.toUpperCase()), 1) ]) ]) ]), Ye, e("div", Ke, [ h(o.value) ? (r(), y("span", qe, b(h(o.value)), 1)) : E("", !0), l.value !== void 0 && l.value.length > 0 ? (r(), I(a($a), { key: 1, locale: p.locale, day: "0", hours: l.value, errors: o.value, "is-pop-in": !0, "can-delete-first": !0, modelValue: l.value, "onUpdate:modelValue": m[1] || (m[1] = (g) => l.value = g) }, null, 8, ["locale", "hours", "errors", "modelValue"])) : (r(), y("div", Qe, [ e("div", Xe, [ e("div", Ze, b(a(t).global.t("settings.working-plannings-day-edit.closed")), 1), e("button", { class: "az-btn az-min-w-full az-btn-color-neutral", onClick: T }, b(a(t).global.t("settings.working-plannings-day-edit.add")), 1) ]) ])), l.value !== void 0 && l.value.length > 0 ? (r(), I(a(Ca), { key: 3, id: `${p.id}_planning_day_edit_period`, label: a(t).global.t("settings.working-plannings-day-edit.modify-period"), locale: p.locale, mandatory: a(L).optional, modelValue: c.value, "onUpdate:modelValue": m[2] || (m[2] = (g) => c.value = g) }, null, 8, ["id", "label", "locale", "mandatory", "modelValue"])) : E("", !0), c.value ? (r(), y("div", an, [ e("div", en, [ f.value ? (r(), y("span", nn, b(a(t).global.t("common.error.startAfterEnd")), 1)) : E("", !0), e("div", ln, [ J(a(na), { id: `${p.id}_planning_day_edit_period_start`, label: a(t).global.t("settings.working-plannings-add.period.start"), locale: p.locale, mode: "date", mandatory: a(L).mandatory, modelValue: w.value, "onUpdate:modelValue": m[3] || (m[3] = (g) => w.value = g) }, null, 8, ["id", "label", "locale", "mandatory", "modelValue"]), J(a(na), { id: `${p.id}_planning_day_edit_period_end`, label: a(t).global.t("settings.working-plannings-add.period.end"), locale: p.locale, mode: "date", mandatory: a(L).mandatory, modelValue: P.value, "onUpdate:modelValue": m[4] || (m[4] = (g) => P.value = g) }, null, 8, ["id", "label", "locale", "mandatory", "modelValue"]) ]) ]), J(a(aa), { id: `${p.id}_planning_day_edit_period_recurrence`, label: "", locale: p.locale, mandatory: a(L).mandatory, values: N.value, modelValue: D.value, "onUpdate:modelValue": m[5] || (m[5] = (g) => D.value = g) }, null, 8, ["id", "locale", "mandatory", "values", "modelValue"]), D.value[0] === "all-dayname" ? (r(), y("span", tn, b(a(t).global.t("settings.working-plannings-day-edit.day-warning", { dayname: a(t).global.t("common.days." + k[n.selectedWorkingPlanningDay.date.getDay()], 2).toLowerCase() })), 1)) : D.value[0] === "all-days" ? (r(), y("span", on, b(a(t).global.t("settings.working-plannings-day-edit.allday-warning")), 1)) : D.value[0] === "all-weekdays" ? (r(), y("span", sn, b(a(t).global.t("settings.working-plannings-day-edit.allweekday-warning")), 1)) : E("", !0) ])) : E("", !0) ]) ]) ]; }), footer: R(() => [ e("button", { class: "az-btn az-btn-color-primary az-min-w-full", onClick: B, disabled: d.value || !V.value }, [ d.value ? (r(), y("i", dn)) : E("", !0), da(b(a(t).global.t("common.action.validate")), 1) ], 8, rn) ]), _: 1 }, 8, ["id", "title", "locale"])); } }), gn = { class: "az-select-container" }, un = ["disabled", "aria-Label"], pn = ["value"], fn = ["value"], mn = { class: "az-activities-plan az-flex az-flex-col az-gap-4 az-h-full az-flex-1" }, zn = { class: "az-flex az-flex-row az-gap-4" }, yn = { class: "az-flex az-flex-row az-gap-2" }, vn = ["aria-label"], bn = /* @__PURE__ */ e("i", { class: "fa fa-angle-left", "aria-hidden": "true" }, null, -1), kn = [ bn ], wn = ["aria-Label"], hn = /* @__PURE__ */ e("i", { class: "fa fa-calendar-day", "aria-hidden": "true" }, null, -1), _n = [ hn ], xn = { class: "az-flex az-flex-row az-gap-3 az-items-center" }, Pn = { class: "az-text-body1 az-font-medium az-capitalize" }, $n = { class: "az-tag az-tag-color-neutral az-tag-size-small" }, Cn = ["aria-label"], Dn = /* @__PURE__ */ e("i", { class: "fa fa-angle-right", "aria-hidden": "true" }, null, -1), Wn = [ Dn ], Vn = { class: "az-flex az-min-h-0 az-h-full az-flex-1 az-relative" }, Sn = { class: "az-absolute az-top-0 az-left-0 az-w-full az-flex az-flex-col az-min-h-0 az-h-full az-flex-1" }, Nn = { class: "az-bg-white az-rounded-200 az-border az-border-grey-50 az-flex az-flex-col az-overflow-auto az-activities-plan-grid" }, En = { class: "az-sticky-left az-activities-plan-header az-uppercase az-z-400 az-text-body3 az-font-medium az-px-4 az-py-2" }, On = { class: "az-activities-plan-header az-z-200 az-flex az-flex-row az-gap-1 az-text-body3 az-font-medium az-px-4 az-py-2 az-justify-center" }, Mn = { key: 0 }, In = { class: "az-overflow-hidden az-text-ellipsis" }, Tn = { class: "" }, Un = { key: 1 }, An = /* @__PURE__ */ e("span", { class: "az-overflow-hidden az-text-ellipsis az-animate-pulse" }, null, -1), Bn = [ An ], Rn = { class: "az-sticky-left az-activities-plan-section az-z-400 az-border-l-4 az-border-l-primary-500 az-bg-grey-25 az-text-body3 az-font-medium az-px-4 az-py-1 az-text-primary-500 az-flex az-flex-row az-gap-3 az-items-center az-flex-2 az-border-t az-border-b az-border-grey-50 az-justify-between" }, Hn = { class: "az-flex az-flex-row az-gap-3 az-items-center" }, Ln = /* @__PURE__ */ e("i", { class: "far fa-store az-text-black az-text-title2", "aria-hidden": "true" }, null, -1), jn = { class: "az-text-body2 az-text-black exclude-weglot" }, Fn = /* @__PURE__ */ e("i", { class: "fa fa-pen-to-square", "aria-hidden": "true" }, null, -1), Gn = [ Fn ], Jn = { class: "az-activities-plan-section az-z-200 az-bg-grey-25 az-text-grey-500 az-text-body3 az-font-medium az-px-4 az-py-2 az-flex az-items-center az-justify-center az-border-t az-border-b az-border-grey-50" }, Yn = /* @__PURE__ */ e("div", { class: "az-tag az-bg-grey-50 az-text-body3 az-flex az-flex-row az-gap-1 az-w-full az-animate-pulse az-h-5" }, null, -1), Kn = [ Yn ], qn = { class: "az-bg-white az-border-t az-border-grey-50 az-sticky-left az-bg-white az-px-4 az-py-2 az-flex az-items-center az-flex-2" }, Qn = { class: "az-flex az-flex-row az-gap-3 az-items-center az-overflow-hidden az-w-full" }, Xn = { class: "az-bg-white az-border-t az-p-2 az-text-center az-border-l az-border-grey-50" }, Zn = /* @__PURE__ */ e("div", { class: "az-bg-grey-50 az-h-full az-rounded-200 az-w-full az-animate-pulse" }, null, -1), al = [ Zn ], pl = /* @__PURE__ */ Q({ __name: "View", props: { api: {}, locale: {}, logger: {}, organisation: {}, router: {} }, setup(C) { const x = C, n = K(x.locale), $ = fa(); async function s(g) { return g.filter((_) => $.hasAbility("readWorkingPlanning", _.id)); } const { pageOptions: u, displaySelectCompanyModal: t, changeCompany: k, selectCompanyValidate: o, selectCompanyClose: d, companySelected: l, modalCloseDisabled: c, initialisationEnded: f, currentWeek: w, goToToday: P, nextWeek: N, prevWeek: D, workingPlannings: V, loading: h, closeEditPanel: T, rightPanelOpened: U, selectWorkingDay: B, selectedStaff: M, selectedWorkingPlanningDay: Y, fromPlanning: p, fabActions: m, canSelectCompany: S, viewType: i } = Ea(x.api, x.locale, x.organisation, x.router); return (g, _) => a(u) && a(u).tabs ? (r(), I(a(Da), { key: 0, id: "settings-working-planning", options: a(u), locale: x.locale, isPanelOpen: a(U) !== void 0 }, { actions: R(() => [ e("div", gn, [ ba(e("select", { id: "settings-working-planning-view-selection", "onUpdate:modelValue": _[0] || (_[0] = (v) => ka(i) ? i.value = v : null), disabled: a(h), "aria-Label": a(n).global.t("settings.working-plannings.view-selector-aria-label"), class: "az-select" }, [ e("option", { value: a(q).OPENING, selected: "" }, b(a(n).global.t("settings.working-plannings.selectType.openingHours")), 9, pn), e("option", { value: a(q).OCCUPANCY }, b(a(n).global.t("settings.working-plannings.selectType.occupancyRate")), 9, fn) ], 8, un), [ [wa, a(i)] ]) ]) ]), mobileActions: R(() => []), planning: R(() => { var v; return [ e("div", mn, [ e("div", zn, [ e("div", yn, [ e("button", { id: "agenda-button-prev", class: "az-btn az-btn-icon-alone az-btn-color-neutral az-icon-arrow-left", "aria-label": a(n).global.t("agenda.nav.previous-aria-label"), onClick: _[1] || (_[1] = (...W) => a(D) && a(D)(...W)) }, kn, 8, vn), e("button", { id: "agenda-button-today", "aria-Label": a(n).global.t("agenda.title.today"), class: "az-btn az-btn-color-neutral az-btn-icon-alone", onClick: _[2] || (_[2] = (...W) => a(P) && a(P)(...W)) }, _n, 8, wn) ]), e("div", xn, [ e("h2", Pn, b(a(w).monthLong + " " + a(w).year), 1), e("span", $n, b(a(n).global.t("agenda.title.week-number", { week: a(w).weekNumber })), 1) ]), e("button", { id: "agenda-button-next", "aria-label": a(n).global.t("agenda.nav.next-aria-label"), class: "az-icon az-btn az-btn-icon-alone az-btn-color-neutral az-icon-arrow-right", onClick: _[3] || (_[3] = (...W) => a(N) && a(N)(...W)) }, Wn, 8, Cn) ]), e("div", Vn, [ e("div", Sn, [ e("div", Nn, [ e("div", En, b(a(n).global.t("settings.working-plannings.company.name")), 1), (r(), y(A, null, F(7, (W) => e("div", On, [ a(h) ? (r(), y("div", Un, Bn)) : (r(), y("div", Mn, [ e("span", In, b(a(w).plus({ day: W - 1 }).weekdayLong + " "), 1), e("span", Tn, b(a(w).plus({ day: W - 1 }).day), 1) ])) ])), 64)), a(f) ? (r(), y(A, { key: 0 }, [ e("div", Rn, [