@agendize/vue-settings
Version:
Vue agendize's settings component
342 lines (341 loc) • 13.5 kB
JavaScript
import { defineComponent as J, ref as g, onMounted as G, openBlock as A, createBlock as $, unref as t, withCtx as f, createVNode as p, computed as K, createTextVNode as P, toDisplayString as B, createElementVNode as U, normalizeClass as W, createCommentVNode as X } from "vue";
import { ModalDialogBox as Y, StructuredFormLayout as ee, FieldInput as te, Mandatory as N, FieldDuration as ae, FieldNumber as ne, StructuredPage as ie, Button as H, StructuredSection as se, StructuredList as le, AzAvatar as oe, StructuredLayout as re, Tag as ce } from "@agendize/design-system";
import { u as O } from "./vendor.26bbd9f1.js";
import { useApi as j, useLogger as ue, useAccountStore as fe, isStringIncludeIn as de } from "@agendize/vue-tools";
import { ConferenceEntity as Q } from "@agendize/js-calendar-api";
import { useToast as me } from "vue-toastification";
import { S as Z } from "./index.d2d0aba2.js";
import { useRouter as pe } from "vue-router";
import { D as z } from "./datetime.911b67ae.js";
import "@agendize/az-i18n";
import "@agendize/vue-acl";
const M = "az-conference-quick", be = /* @__PURE__ */ J({
__name: "View",
props: {
organisationEmail: {}
},
emits: ["close"],
setup(T, { emit: y }) {
const i = y, k = T, { t: l } = O(), x = j(), b = me(), d = g(!1), S = g(""), C = g(10), _ = g(), o = g(), v = g(), L = g(), q = pe();
function F(c) {
_.value = c.minutesDuration;
}
function r(c) {
c && (C.value = c);
}
async function I() {
if (d.value)
return;
d.value = !0;
let c = !1;
if (o.value && o.value.checkField && v.value && v.value.checkField && L.value && L.value.checkField && (c = o.value.checkField().isValid && v.value.checkField().isValid && L.value.checkField().isValid), c) {
const u = new Q();
u.name = S.value, u.duration = _.value, u.capacity = C.value, u.availability = "public";
try {
const h = await x.createConference(k.organisationEmail, u);
b == null || b.success(l("settings.conferences.creation.save-success")), q == null || q.push({ name: Z.ConferencesDetails, params: { conferenceId: h.id } });
} catch {
b == null || b.error(l("settings.conferences.creation.save-error"));
}
}
d.value = !1;
}
function V() {
i("close");
}
return G(() => {
o.value && o.value.focus();
}), (c, u) => (A(), $(t(Y), {
id: M,
title: t(l)("settings.conferences.creation.quick.title"),
subTitle: t(l)("settings.conferences.creation.quick.description"),
closeOnBlurClick: !0,
primaryLabel: t(l)("settings.conferences.creation.quick.validate"),
primaryAction: I,
hasNeutral: !1,
primaryDisabled: d.value,
modalAutofocus: !1,
onClose: V
}, {
content: f(() => [
p(t(ee), null, {
default: f(() => [
p(t(te), {
ref_key: "quickNameRef",
ref: o,
id: `${M}-name`,
label: t(l)("settings.conferences.creation.field.name.label"),
mandatory: t(N).mandatory,
placeholder: t(l)("settings.conferences.creation.field.name.placeholder"),
modelValue: S.value,
"onUpdate:modelValue": u[0] || (u[0] = (h) => S.value = h),
disabled: d.value
}, null, 8, ["id", "label", "mandatory", "placeholder", "modelValue", "disabled"]),
p(t(ae), {
ref_key: "quickDurationRef",
ref: v,
id: `${M}-duration`,
label: t(l)("settings.conferences.creation.field.duration.label"),
mandatory: t(N).mandatory,
helperMessage: t(l)("settings.conferences.creation.field.duration.helper", { duration: 24, unit: "heures" }),
duration: 1,
durationUnit: "hours",
minMinutes: 1,
maxMinutes: 1440,
authorizedUnits: ["minutes", "hours"],
disabled: d.value,
onOnChange: F
}, null, 8, ["id", "label", "mandatory", "helperMessage", "disabled"]),
p(t(ne), {
ref_key: "quickCapacityRef",
ref: L,
id: `${M}-capacity`,
modelValue: C.value,
"onUpdate:modelValue": [
u[1] || (u[1] = (h) => C.value = h),
r
],
label: t(l)("settings.conferences.creation.field.capacity.label"),
helperMessage: t(l)("settings.conferences.creation.field.capacity.helper"),
mandatory: t(N).mandatory,
minlength: 1,
maxlength: 100,
disabled: d.value
}, null, 8, ["id", "modelValue", "label", "helperMessage", "mandatory", "disabled"])
]),
_: 1
})
]),
_: 1
}, 8, ["title", "subTitle", "primaryLabel", "primaryDisabled"]));
}
});
function ge(T, y) {
const { t: i, locale: k } = O(), l = j();
ue();
const x = fe(), b = K(() => {
var e, n;
return (n = (e = x.account.profileSettings) == null ? void 0 : e.timeZone) != null ? n : "Europe/Paris";
}), d = {
basicSearch: {
filter: q,
placeholder: i("settings.conferences.list.search.basic.placeholder"),
ariaLabel: i("settings.conferences.list.search.basic.ariaLabel")
},
quickFilters: {
exclusive: !0,
defaultAllFilter: !0,
filters: [
{
id: "future",
title: { label: i("settings.conferences.list.search.quickFilter.future.label") },
ariaLabel: i("settings.conferences.list.search.quickFilter.future.ariaLabel"),
default: !0,
filter: v
},
{
id: "past",
title: { label: i("settings.conferences.list.search.quickFilter.past.label") },
ariaLabel: i("settings.conferences.list.search.quickFilter.past.ariaLabel"),
filter: L
},
{
id: "public",
title: { label: i("settings.conferences.list.search.quickFilter.public.label") },
ariaLabel: i("settings.conferences.list.search.quickFilter.public.ariaLabel"),
filter: C
},
{
id: "private",
title: { label: i("settings.conferences.list.search.quickFilter.private.label") },
ariaLabel: i("settings.conferences.list.search.quickFilter.private.ariaLabel"),
filter: _
}
]
}
};
function S(e) {
y == null || y.push({ name: Z.ConferencesDetails, params: { conferenceId: e.id } });
}
function C(e, n) {
const a = e.object;
return (a == null ? void 0 : a.availability) === "public";
}
function _(e, n) {
var s;
const a = e.object;
return ((s = a == null ? void 0 : a.availability) != null ? s : "private") === "private";
}
const o = (e, n) => z.fromJSDate(e).diff(z.fromJSDate(n)).valueOf();
function v(e, n) {
var m;
const a = e.object, s = (m = a == null ? void 0 : a.sessions) != null ? m : [];
return s.length === 0 || !!s.find((D) => o(D.start, new Date()) >= 0);
}
function L(e, n) {
var D, w;
const a = e.object, s = ((D = a == null ? void 0 : a.sessions) != null ? D : []).find((E) => o(E.start, new Date()) <= 0), m = ((w = a == null ? void 0 : a.sessions) != null ? w : []).find((E) => o(E.start, new Date()) > 0);
return !!s && !m;
}
function q(e, n) {
var a;
return de((a = e.title) == null ? void 0 : a.label, n == null ? void 0 : n.basic);
}
const F = g([]), r = g(!1);
async function I(e) {
var n;
if (!r.value) {
const a = await l.getAllConferences(T, b.value);
F.value = ((n = a.results) != null ? n : []).map(V).sort((s, m) => {
var D, w, E, R;
return ((w = (D = s.title) == null ? void 0 : D.label) != null ? w : "").localeCompare((R = (E = m.title) == null ? void 0 : E.label) != null ? R : "");
});
}
return r.value = !0, F.value;
}
function V(e) {
return {
id: e.id,
title: { label: e.name, needTranslation: !1 },
subTitle: { label: u(e) },
ariaLabel: i("settings.conferences.list.item.ariaLabel", { name: e.name }),
object: e,
locationIcon: c(e)
};
}
function c(e) {
var a, s, m;
const n = e instanceof Q ? (a = e.location) == null ? void 0 : a.type : (m = (s = e.object) == null ? void 0 : s.location) == null ? void 0 : m.type;
return n === "address" ? "fa fa-location-dot" : n === "link" ? "fa fa-globe-pointer" : n === "custom" ? "fa fa-i-cursor" : "fa fa-location-dot";
}
function u(e) {
if (!e.sessions || e.sessions.length === 0)
return i("settings.conferences.list.item.sessions.none");
const n = e.sessions.sort((s, m) => o(s.start, m.start)), a = n.filter((s) => o(s.start, new Date()) >= 0);
return a.length === 0 ? i("settings.conferences.list.item.sessions.last", { last: h(n[n.length - 1].start, e.duration) }) : i("settings.conferences.list.item.sessions.next", { next: h(a[0].start, e.duration) });
}
function h(e, n = 60) {
const a = z.fromJSDate(e).toFormat("EEEE dd LLLL yyyy - HH:mm", { locale: k.value }), s = z.fromJSDate(e).plus(n * 60 * 1e3).toFormat("HH:mm", { locale: k.value });
return `${a} - ${s}`;
}
return {
getConferences: I,
searchOptions: d,
itemClick: S,
getItemLocationIcon: c
};
}
const ve = { id: "az-conferences" }, Ve = /* @__PURE__ */ J({
__name: "View",
props: {
router: {},
organisation: {}
},
setup(T) {
var o, v;
const y = T, { t: i } = O(), k = g(!1);
function l() {
k.value = !0;
}
function x() {
k.value = !1;
}
const b = [{ id: "list", title: { label: "list" }, subTitle: { label: "" }, icon: "fa fa-gear" }], { getConferences: d, itemClick: S, searchOptions: C, getItemLocationIcon: _ } = ge((v = (o = y.organisation) == null ? void 0 : o.email) != null ? v : "", y.router);
return (L, q) => (A(), $(t(ie), {
id: "az-conference-list-page",
title: { label: t(i)("settings.conferences.list.title") },
"sub-title": { label: t(i)("settings.conferences.list.subTitle") },
tabs: b
}, {
actions: f(() => [
p(t(H), {
id: "az-conference-add",
"aria-label": t(i)("settings.conferences.list.add.ariaLabel"),
onClick: l
}, {
default: f(() => [
P(B(t(i)("settings.conferences.list.add.title")), 1)
]),
_: 1
}, 8, ["aria-label"])
]),
"mobile-actions": f(() => [
p(t(H), {
id: "az-conference-mobile-add",
color: "transparent",
"aria-label": t(i)("settings.conferences.list.add.ariaLabel"),
iconAlone: "fa fa-plus",
onClick: l
}, null, 8, ["aria-label"])
]),
list: f(() => {
var F;
return [
U("div", ve, [
p(t(se), null, {
content: f(() => [
p(t(le), {
id: "az-conference-list-container",
"item-bordered": !0,
"item-clickable": !0,
fetchItems: t(d),
searchOption: t(C),
onItemClicked: t(S)
}, {
startItemSlot: f(({ item: r }) => [
p(t(oe), {
id: `az-conference-list-item-icon-${r.id}`,
initials: "icon",
color: "neutral"
}, {
default: f(() => [
U("i", {
class: W(t(_)(r)),
"aria-hidden": "true"
}, null, 2)
]),
_: 2
}, 1032, ["id"])
]),
endItemSlot: f(({ item: r }) => [
p(t(re), { variant: "1-column" }, {
column1: f(() => {
var I;
return [
p(t(ce), {
id: `az-conference-list-item-location-${r.id}`,
color: ((I = r == null ? void 0 : r.object) == null ? void 0 : I.availability) === "public" ? "lightprimary" : "neutral"
}, {
default: f(() => {
var V, c;
return [
P(B(t(i)(`settings.conferences.list.location.${(c = (V = r == null ? void 0 : r.object) == null ? void 0 : V.availability) != null ? c : "private"}.label`)), 1)
];
}),
_: 2
}, 1032, ["id", "color"])
];
}),
_: 2
}, 1024)
]),
_: 1
}, 8, ["fetchItems", "searchOption", "onItemClicked"])
]),
_: 1
}),
k.value ? (A(), $(be, {
key: 0,
organisationEmail: (F = L.organisation.email) != null ? F : "",
onClose: x
}, null, 8, ["organisationEmail"])) : X("", !0)
])
];
}),
_: 1
}, 8, ["title", "sub-title"]));
}
});
export {
Ve as default
};