@agendize/vue-settings
Version:
Vue agendize's settings component
796 lines (795 loc) • 25 kB
JavaScript
var J = Object.defineProperty;
var K = (e, a, t) => a in e ? J(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
var z = (e, a, t) => (K(e, typeof a != "symbol" ? a + "" : a, t), t);
import { defineComponent as D, ref as L, resolveComponent as B, openBlock as f, createElementBlock as P, createVNode as I, withCtx as _, createBlock as F, resolveDynamicComponent as j, unref as d, onMounted as X, watch as Y, withDirectives as Z, Fragment as H, renderList as Q, createElementVNode as l, toDisplayString as w, createCommentVNode as R, vShow as U, reactive as M, inject as O, h as G, computed as N } from "vue";
import { c as S } from "./vendor.26bbd9f1.js";
import { messages as T } from "@agendize/az-i18n";
import { useAccountStore as E } from "@agendize/vue-tools";
import { ModalDialogBox as ee, Table as te, Avatar as ae, ToasterLabel as ne, PageWithTabsAndPanel as se } from "@agendize/design-system";
import { Action as oe } from "@agendize/js-calendar-api";
import { createRouter as ie, createWebHistory as le } from "vue-router";
import { useAcl as x } from "@agendize/vue-acl";
const V = (e) => S({
legacy: !1,
locale: e,
fallbackLocale: "fr",
globalInjection: !0,
messages: T
});
class re {
constructor(a, t) {
z(this, "api");
z(this, "organisation");
z(this, "accountStore", E());
this.api = a, this.organisation = t;
}
async fetchCompanies(a) {
const t = await this.api.getAllCompanies(this.organisation.email), n = t != null && t.results ? t.results : [];
return await this._filterCompanyAcl(n);
}
async _filterCompanyAcl(a) {
const t = Array.from(a);
return Promise.all(t.map((n, o) => n.id && this.accountStore.hasAbility("readCompany", n.id))).then((n) => t.filter((o, r) => n[r]));
}
}
class ce {
constructor(a, t, n) {
z(this, "api");
z(this, "acl");
z(this, "organisation");
this.api = a, this.acl = t, this.organisation = n;
}
async fetchRights() {
const a = await this.api.getSchedulingRights(this.organisation.email);
return await this._filterRightsAcl(a);
}
async _filterRightsAcl(a) {
return a;
}
}
const pe = {
id: "az-module-settings",
class: "az-flex az-flex-col az-flex-1 az-min-h-0"
}, Te = /* @__PURE__ */ D({
__name: "View",
props: {
acl: {},
api: {},
toaster: {},
organisation: {},
locale: {},
createConfirmDialog: {},
logger: {},
router: {},
route: {}
},
setup(e, { expose: a }) {
const t = e;
V(t.locale);
const n = L(void 0), o = L(), r = L(), u = new re(t.api, t.organisation), C = new ce(t.api, t.acl, t.organisation);
function v(p) {
o.value = p;
}
function h(p) {
o.value || t.api.getCompanyById(p, t.organisation.email).then((k) => {
!k.result || (o.value = k.result);
});
}
function g(p) {
n.value = p;
}
function m() {
var p, k;
r.value && ((p = r.value) == null ? void 0 : p.focus) && ((k = r.value) == null || k.focus());
}
return a({ focus: m }), (p, k) => {
const q = B("router-view");
return f(), P("div", pe, [
I(q, null, {
default: _(({ Component: i }) => [
(f(), F(j(i), {
key: p.$route.path,
acl: t.acl,
api: t.api,
company: o.value,
router: p.router,
route: p.route,
organisation: t.organisation,
toaster: t.toaster,
locale: t.locale,
logger: t.logger,
fetchAllCompaniesUseCase: d(u),
fetchAllRightsUseCase: d(C),
createConfirmDialog: t.createConfirmDialog,
onCompaniesLoaded: g,
onCompanyUpdated: v,
onCompanyLoading: h
}, null, 40, ["acl", "api", "company", "router", "route", "organisation", "toaster", "locale", "logger", "fetchAllCompaniesUseCase", "fetchAllRightsUseCase", "createConfirmDialog"]))
]),
_: 1
})
]);
};
}
});
const de = {
id: "az-module-settings",
class: "az-flex az-flex-col az-flex-1 az-min-h-0 az"
}, Ee = /* @__PURE__ */ D({
__name: "Conferences",
props: {
organisation: {},
router: {},
route: {},
widgetBaseUrl: {}
},
setup(e) {
const a = e;
return (t, n) => {
const o = B("router-view");
return f(), P("div", de, [
I(o, null, {
default: _(({ Component: r }) => [
(f(), F(j(r), {
key: t.$route.path,
organisation: a.organisation,
router: a.router,
widgetBaseUrl: t.widgetBaseUrl
}, null, 8, ["organisation", "router", "widgetBaseUrl"]))
]),
_: 1
})
]);
};
}
});
class ue {
constructor(a, t, n) {
z(this, "api");
z(this, "acl");
z(this, "organisation");
this.api = a, this.acl = t, this.organisation = n;
}
async fetchPlannings() {
const a = await this.api.getPlannings(this.organisation.email), t = a != null && a.results ? a.results : [];
return await this._filterPlanningAcl(t);
}
async _filterPlanningAcl(a) {
return a;
}
}
const me = {
id: "az-module-settings",
class: "az-flex az-flex-col az-flex-1 az-min-h-0"
}, et = /* @__PURE__ */ D({
__name: "WorkingPlanning",
props: {
api: {},
acl: {},
account: {},
organisation: {},
router: {},
route: {},
logger: {},
locale: {}
},
setup(e, { expose: a }) {
const t = e;
V(t.locale);
const n = L(), o = new ue(t.api, t.acl, t.organisation);
function r() {
var u, C;
n.value && ((u = n.value) == null ? void 0 : u.focus) && ((C = n.value) == null || C.focus());
}
return a({ focus: r }), (u, C) => {
const v = B("router-view");
return f(), P("div", me, [
I(v, null, {
default: _(({ Component: h }) => [
(f(), F(j(h), {
key: u.$route.path,
api: t.api,
organisation: t.organisation,
router: t.router,
locale: t.locale,
acl: t.acl,
fetchAllPlanningsUseCase: d(o)
}, null, 8, ["api", "organisation", "router", "locale", "acl", "fetchAllPlanningsUseCase"]))
]),
_: 1
})
]);
};
}
}), ge = { id: "az-modal-changelog" }, fe = /* @__PURE__ */ l("div", { class: "az-menu-item az-animate-pulse" }, [
/* @__PURE__ */ l("div", {
class: "az-animate-pulse",
style: { height: "16px", width: "100%", "margin-bottom": "8px", "border-radius": "3px", "background-color": "var(--az-grey-300)" }
})
], -1), he = [
fe
], ye = {
key: 1,
class: "az-w-full az-text-left az-custom-table az-flex az-flex-col az-h-full"
}, be = { class: "az-flex az-w-full" }, ve = { class: "az-flex az-w-full az-gap-4" }, ze = { class: "az-custom-table-cell az-table-header az-flex-1" }, we = { class: "az-custom-table-cell az-table-header az-flex-1" }, _e = { class: "az-custom-table-cell az-table-header az-flex-1" }, Ce = { class: "az-flex az-flex-col az-items-center az-w-full" }, xe = { class: "az-flex az-w-full az-cell-focusable az-gap-4" }, Pe = { class: "az-custom-table-cell az-self-center az-overflow-hidden az-text-ellipsis exclude-weglot az-flex-1" }, Le = { class: "az-custom-table-cell az-self-center az-overflow-unset az-text-ellipsis exclude-weglot az-flex-1" }, ke = ["data-tooltip", "aria-label"], Ie = { class: "az-body-2 az-overflow-hidden az-text-ellipsis exclude-weglot" }, $e = { class: "az-custom-table-cell az-self-center az-overflow-unset az-text-ellipsis exclude-weglot az-flex-1" }, De = ["data-tooltip", "aria-label"], Ae = { class: "az-body-2 az-overflow-hidden az-text-ellipsis exclude-weglot" }, Ve = /* @__PURE__ */ D({
__name: "ChangeLogModal",
props: {
locale: {},
api: {},
display: { type: Boolean },
changeLogId: {},
organisation: {}
},
emits: ["close"],
setup(e, { emit: a }) {
const t = e, n = V(t.locale), o = a, r = L([]), u = L(!0);
function C() {
o("close");
}
function v() {
u.value = !0, t.api.getChangeLog(t.organisation, t.changeLogId).then((h) => {
var g;
r.value = ((g = h.result) == null ? void 0 : g.changes) || [], u.value = !1;
}).catch(() => {
r.value = [], u.value = !1;
});
}
return X(() => {
v();
}), Y(() => t.changeLogId, (h, g) => {
h !== g && v();
}), (h, g) => Z((f(), P("div", ge, [
I(d(ee), {
id: "changeLogModal",
onClose: g[0] || (g[0] = (m) => C()),
locale: t.locale,
title: d(n).global.t("settings.administration.audit.changeLog.title"),
size: 700,
fixedHeight: !0,
"neutral-label": d(n).global.t("common.action.close"),
"primary-action": () => {
}
}, {
content: _(() => [
u.value ? (f(), P(H, { key: 0 }, Q(5, (m) => l("div", { key: m }, he)), 64)) : r.value.length > 0 ? (f(), P("table", ye, [
l("thead", be, [
l("tr", ve, [
l("th", ze, w(d(n).global.t("settings.administration.audit.changeLog.table.field")), 1),
l("th", we, w(d(n).global.t("settings.administration.audit.changeLog.table.old")), 1),
l("th", _e, w(d(n).global.t("settings.administration.audit.changeLog.table.new")), 1)
])
]),
l("tbody", Ce, [
(f(!0), P(H, null, Q(r.value, (m) => (f(), P("tr", xe, [
l("td", Pe, w(m.fieldName), 1),
l("td", Le, [
l("span", {
id: "az-audit-action-tooltip-change-old",
tabindex: "0",
class: "az-tooltip az-relative az-grid az-break-all",
"data-tooltip": m.oldValue,
"aria-label": m.oldValue,
"data-position": "bottom",
role: "tooltip"
}, [
l("span", Ie, w(m.oldValue), 1)
], 8, ke)
]),
l("td", $e, [
l("span", {
id: "az-audit-action-tooltip-change-old",
tabindex: "0",
class: "az-tooltip az-relative az-grid az-break-all",
"data-tooltip": m.newValue,
"aria-label": m.newValue,
"data-position": "left",
role: "tooltip"
}, [
l("span", Ae, w(m.newValue), 1)
], 8, De)
])
]))), 256))
])
])) : R("", !0)
]),
_: 1
}, 8, ["locale", "title", "neutral-label"])
], 512)), [
[U, h.display]
]);
}
}), Fe = { class: "exclude-weglot" }, qe = ["data-tooltip", "aria-label"], Be = { class: "az-body-2 az-overflow-hidden az-text-ellipsis exclude-weglot" }, je = { class: "az-m-2 az-text-grey-700" }, We = /* @__PURE__ */ D({
__name: "AuditLogTable",
props: {
locale: {},
api: {},
organisationEmail: {}
},
setup(e) {
const a = e, t = V(a.locale), n = t.global.t("settings.administration.audit.search.placeholder"), o = M({
columns: [
{
label: t.global.t("settings.administration.audit.columns.date"),
field: "date",
width: "flex-1",
sortable: !0
},
{
label: t.global.t("settings.administration.audit.columns.user"),
field: "user",
width: "flex-3",
sortable: !0
},
{
label: t.global.t("settings.administration.audit.columns.action_type"),
field: "actionType",
width: "flex-1",
sortable: !0,
translatable: !1
},
{
label: t.global.t("settings.administration.audit.columns.action"),
field: "action",
width: "flex-2",
sortable: !1,
translatable: !1,
columnClasses: "az-overflow-unset"
}
],
sortable: {
order: "date",
sort: "desc"
}
}), r = L(), u = O("toaster"), C = new Intl.DateTimeFormat(a.locale, {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit"
}), v = L(!1), h = L("");
let g;
function m(i, y, c) {
return g || y === 0 ? a.api.searchLogWithPages(a.organisationEmail, i, c, y > 0 ? g : void 0).then((b) => {
g = b.nextPageToken;
const $ = b.items ? b.items : [];
return Promise.resolve($);
}).catch((b) => {
console.error("fetchLogs", b);
const $ = G(ne, {
label: t.global.t("system.error.api.message", { message: b.message, code: b.code }),
action: {
label: t.global.t("common.error.retry"),
function: () => {
var A;
(A = r.value) == null || A.fetchMoreResults();
}
}
});
throw u == null || u.error($), b;
}) : Promise.resolve([]);
}
function p(i) {
var c, b, $, A, W;
const y = {};
return i.company && (y.companyId = (c = i.company) == null ? void 0 : c.id, y.companyName = (b = i.company) == null ? void 0 : b.name), i.simpleObject && (y.objectId = ($ = i.simpleObject) == null ? void 0 : $.id, y.objectName = (A = i.simpleObject) == null ? void 0 : A.name, (W = i.simpleObject) != null && W.misc1 && (y.misc1 = " - " + i.simpleObject.misc1)), t.global.t(`settings.administration.audit.action.${i.actionType}.${i.action}`, y);
}
function k(i) {
i.action === oe.EDIT && i.changeLogId !== void 0 && (h.value = i.changeLogId, v.value = !0);
}
function q() {
v.value = !1;
}
return (i, y) => (f(), P("div", null, [
I(d(te), {
ref_key: "logsTable",
ref: r,
id: "az_audit_logs",
searchable: !0,
searchLabel: d(n),
canRetryFetchOnError: !0,
columns: o.columns,
sortable: o.sortable,
fetchOnSearch: !0,
fetchOnSort: !0,
fetchAndFilterMoreData: m,
paginated: !0,
hover: !1,
onSelectRow: k
}, {
"col(date)": _(({ row: c }) => [
l("span", Fe, w(d(C).format(c.date)), 1)
]),
"col(user)": _(({ row: c }) => [
I(d(ae), {
firstName: c.user.firstName,
lastName: c.user.lastName,
email: c.user.email,
withLabel: !0,
shape: "circle"
}, null, 8, ["firstName", "lastName", "email"])
]),
"col(actionType)": _(({ row: c }) => [
l("span", null, w(d(t).global.t(`settings.administration.audit.action_type.${c.actionType}`)), 1)
]),
"col(action)": _(({ row: c, rowIndex: b }) => [
l("span", {
id: "az-audit-action-tooltip",
tabindex: "0",
class: "az-tooltip az-relative az-grid",
"data-tooltip": p(c),
"aria-label": p(c),
"data-position": "left",
role: "tooltip"
}, [
l("span", Be, w(p(c)), 1)
], 8, qe)
]),
noData: _(() => [
l("div", je, w(d(t).global.t("settings.administration.audit.no_data")), 1)
]),
_: 1
}, 8, ["searchLabel", "columns", "sortable"]),
I(Ve, {
onClose: y[0] || (y[0] = (c) => q()),
locale: a.locale,
api: i.api,
display: v.value,
changeLogId: h.value,
organisation: i.organisationEmail
}, null, 8, ["locale", "api", "display", "changeLogId", "organisation"])
]));
}
}), tt = /* @__PURE__ */ D({
__name: "View",
props: {
locale: {},
api: {},
organisationEmail: {}
},
setup(e) {
const a = e, t = V(a.locale), n = N(() => ({
tabs: [{
id: "administrationAudit",
title: t.global.t("settings.administration.tabs.audit")
}, {
id: "otherTab",
title: "A remplacer, Tab non visible mais defini pour permettre dafficher le premier onglet",
visible: !1
}],
title: t.global.t("settings.administration.title"),
subTitle: t.global.t("settings.administration.subtitle")
}));
return (o, r) => (f(), F(d(se), {
id: "settings-administration",
options: n.value,
locale: a.locale,
loading: !1
}, {
administrationAudit: _(() => [
I(We, {
api: o.api,
locale: o.locale,
organisationEmail: o.organisationEmail
}, null, 8, ["api", "locale", "organisationEmail"])
]),
_: 1
}, 8, ["options", "locale"]));
}
});
var He = /* @__PURE__ */ ((e) => (e.Calendar = "settings-calendar", e.Companies = "settings-companies", e.CompanyHome = "settings-company-home", e.CompanyDetails = "settings-company-details", e.Conferences = "settings-conferences", e.ConferencesList = "settings-conferences-list", e.ConferencesDetails = "settings-conference-details", e.Administration = "settings-administration", e.WorkingPlanning = "settings-working-planning", e.planningModel = "settings-working-planning-model", e.PlanningModelDetails = "settings-working-planning-details", e.Services = "settings-services", e.ServiceDetails = "settings-service-details", e.ServicesGroups = "settings-services-groups", e.ServicesGroupDetails = "settings-services-group-details", e.Staffs = "settings-staffs", e.StaffDetails = "settings-staff-details", e.StaffsGroups = "settings-staffs-groups", e.StaffsGroupDetails = "settings-staffs-group-details", e.Profile = "settings-profile", e.Rights = "settings-rights", e.RightsDetails = "settings-rights-details", e))(He || {}), Qe = /* @__PURE__ */ ((e) => (e.Companies = "companies", e))(Qe || {});
function s(e) {
return { ...e.query, ...e.params };
}
const Je = [
{
path: "profile",
name: "settings-profile",
components: {
default: () => import("./View.a708996c.js")
},
props: { default: s },
meta: {}
},
{
path: "calendar",
name: "settings-calendar",
alias: "/calendar/settings",
components: { default: () => import("./View.36445abc.js") },
props: { default: s },
meta: {
menu: "agendize-calendar"
}
},
{
path: "companies",
name: "settings-companies",
components: {
default: () => import("./View.58e4c0c3.js")
},
props: { default: s },
meta: {
can: "readCompany"
}
},
{
path: "companies/:companyId/home",
name: "settings-company-home",
components: {
default: () => import("./View.50f8f037.js")
},
props: { default: s },
meta: {
can: "readCompany"
}
},
{
path: "companies/:companyId",
name: "settings-company-details",
components: {
default: () => import("./View.ea2a6517.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return e.query.new === !0 || e.query.new === "true" ? a("createCompany") : a("updateCompany", e.params.companyId);
}
}
},
{
path: "rights",
name: "settings-rights",
components: {
default: () => import("./View.364e4814.js")
},
props: { default: s },
meta: {
newPageFormat: !0,
roleAny: ["owner", "accountAdmin", "schedulingAccountAdmin"]
}
},
{
path: "rights/:userId",
name: "settings-rights-details",
components: {
default: () => import("./View.95de5d62.js")
},
props: { default: s },
meta: {
newPageFormat: !0,
roleAny: ["owner", "accountAdmin", "schedulingAccountAdmin"]
}
},
{
path: "companies/:companyId/services",
name: "settings-services",
components: {
default: () => import("./View.1e65f9f5.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return a("readService", e.params.companyId);
}
}
},
{
path: "companies/:companyId/services/:serviceId",
name: "settings-service-details",
components: {
default: () => import("./View.311672df.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return e.query.new === !0 || e.query.new === "true" ? a("createService", e.params.companyId) : a("readService", e.params.companyId);
}
}
},
{
path: "companies/:companyId/services-groups",
name: "settings-services-groups",
components: {
default: () => import("./View.494c5fcb.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return a("readService", e.params.companyId);
}
}
},
{
path: "companies/:companyId/services-groups/:serviceGroupId",
name: "settings-services-group-details",
components: {
default: () => import("./View.ccf53223.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return e.query.new === !0 || e.query.new === "true" ? a("createService", e.params.companyId) : a("readService", e.params.companyId);
}
}
},
{
path: "companies/:companyId/staffs",
name: "settings-staffs",
components: {
default: () => import("./View.3ef06f9a.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return a("readStaff", e.params.companyId);
}
}
},
{
path: "companies/:companyId/staffs/:staffId",
name: "settings-staff-details",
components: {
default: () => import("./View.07a97ce3.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return e.query.new === !0 || e.query.new === "true" ? a("createStaff", e.params.companyId) : a("readStaff", e.params.companyId);
}
}
},
{
path: "companies/:companyId/staffs-groups",
name: "settings-staffs-groups",
components: {
default: () => import("./View.b192c6dc.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return a("readStaff", e.params.companyId);
}
}
},
{
path: "companies/:companyId/staffs-groups/:staffGroupId",
name: "settings-staffs-group-details",
components: {
default: () => import("./View.39134ebc.js")
},
props: { default: s },
meta: {
can: (e) => {
const a = x().can;
return e.query.new === !0 || e.query.new === "true" ? a("createStaff", e.params.companyId) : a("readStaff", e.params.companyId);
}
}
},
{
path: ":pathMatch(.*)*",
redirect: { name: "settings-companies" }
}
], at = [
{
path: "/administration",
name: "settings-administration",
components: {
default: () => import("./View.c9185636.js")
},
props: { default: s }
}
], Ke = [
{
path: "",
name: "settings-conferences-list",
components: {
default: () => import("./View.9c663676.js")
},
props: { default: s }
},
{
path: ":conferenceId/details",
name: "settings-conference-details",
components: {
default: () => import("./View.905e917a.js").then((e) => e.V)
},
props: { default: s }
}
], nt = [
{
path: "",
name: "settings-working-planning",
children: [],
components: {
default: () => import("./View.180ee7b0.js")
},
props: { default: s }
},
{
path: "models",
name: "settings-working-planning-model",
components: {
default: () => import("./View.784778a8.js")
},
props: { default: s },
meta: {
newPageFormat: !0
}
},
{
path: "models/:planningId",
name: "settings-working-planning-details",
components: {
default: () => import("./View.809c4733.js")
},
props: { default: s },
meta: {
newPageFormat: !0,
can: "readPlanning"
}
}
], Xe = [
{
path: "/settings",
name: "vue-settings",
redirect: { name: "settings-companies" },
children: Je,
props: !0
},
{
path: "/working-planning",
name: "settings-working-planning",
children: [],
components: {
default: () => import("./View.180ee7b0.js")
},
props: { default: s }
},
{
path: "/administration",
name: "settings-administration",
components: {
default: () => import("./View.c9185636.js")
},
props: { default: s }
},
{
path: "/conferences",
name: "settings-conferences",
children: Ke,
props: { default: s }
},
{
path: "/settings/companies/:pathMatch(.*)*",
redirect: { name: "vue-settings" }
}
];
ie({
history: le(),
routes: Xe,
scrollBehavior(e, a, t) {
return t || new Promise((n) => {
setTimeout(() => n({ top: 0 }), 300);
});
}
});
export {
He as S,
tt as _,
Te as a,
et as b,
Ee as c,
at as d,
Ke as e,
Qe as f,
V as i,
Je as r,
nt as w
};