@agendize/vue-settings
Version:
Vue agendize's settings component
211 lines (210 loc) • 7.17 kB
JavaScript
import { inject as B, ref as u, reactive as R, watch as V, onMounted as j, defineComponent as q, openBlock as T, createBlock as A, unref as r, withCtx as S, createElementVNode as y, normalizeStyle as F, toDisplayString as D, createTextVNode as U, createCommentVNode as H } from "vue";
import { _ as J } from "./View.vue_vue_type_style_index_0_lang.18cc377c.js";
import { ConfirmDialog as K, Table as Q } from "@agendize/design-system";
import { i as I, S as L } from "./index.d2d0aba2.js";
import "./viewModel.ceed8ca9.js";
import "./index.b1f405e6.js";
import "@agendize/vue-tools";
import "./vendor.26bbd9f1.js";
import "@agendize/az-i18n";
import "@agendize/js-calendar-api";
import "vue-router";
import "@agendize/vue-acl";
function W(d, w, f, n, z, a, b) {
const o = I(d), h = B("createConfirmDialog"), p = B("toaster"), G = u(!1), C = R({
columns: [
{
label: o.global.t("settings.staffGroups.columns.name"),
field: "name",
width: "flex-2",
sortable: !0
},
{
label: o.global.t("settings.staffGroups.columns.staffsCount"),
field: "members",
width: "flex-1",
sortable: !0,
sortCompareFn: O
}
],
sortable: {
order: "name",
sort: "asc"
}
}), v = u(0), t = u([]), g = u({
label: o.global.t("settings.staffGroups.new"),
show: t.value.length === 0,
hasAcl: !1,
actionLoading: !1,
class: "az-btn-color-primary",
mobileIcon: "fa fa-plus",
mobileClass: "az-btn-color-transparent",
action: N
}), s = u({
label: o.global.t("settings.staffGroups.duplicate"),
show: t.value.length === 1,
hasAcl: !1,
actionLoading: !1,
class: "az-btn-color-primary",
mobileIcon: "fas fa-clone",
mobileClass: "az-btn-color-transparent",
action: x
}), m = u({
label: o.global.t("settings.staffGroups.delete"),
show: t.value.length > 0,
hasAcl: !1,
actionLoading: !1,
class: "az-btn-color-error ",
mobileIcon: "fas fa-trash",
mobileClass: "az-btn-color-error",
action: $
}), i = u([s, m, g]);
function _(e) {
return f.getAllStaffGroups(n, z.email).then((l) => {
const c = l.results ? l.results : [];
return v.value = c.length, c;
});
}
function M(e, l) {
return l && l.length > 0 ? e.filter((c) => c.name.toLowerCase().indexOf(l.toLowerCase()) > -1) : e;
}
function k(e) {
t.value = e;
}
async function x() {
t.value && t.value.length === 1 && (await (a == null ? void 0 : a.push({
name: L.StaffsGroupDetails,
params: { companyId: n, staffGroupId: t.value[0].id },
query: { clone: "true" }
})), t.value = []);
}
async function N() {
await (a == null ? void 0 : a.push({
name: L.StaffsGroupDetails,
params: { companyId: n, staffGroupId: "0" },
query: { new: "true" }
}));
}
async function $() {
if (t.value && t.value.length > 0 && h) {
const { reveal: e, onConfirm: l } = h(K, {
locale: d,
closeOnBlurClick: !0,
confirmation: o.global.t("settings.staffGroups.confirm"),
description: o.global.t("settings.staffGroups.confirmDelete", t.value.length),
title: o.global.t("settings.staffGroups.delete")
});
l(async () => {
G.value = !0, await Promise.all(t.value.map(async (c) => {
if (c.id)
return f.deleteStaffGroup(n, c.id);
})), await new Promise((c) => setTimeout(c, 200)), w.value.reload(), p == null || p.success(o.global.t("settings.staffGroups.deleted", t.value.length)), t.value = [], G.value = !1;
}), await e();
}
}
async function E(e) {
await (a == null ? void 0 : a.push({
name: L.StaffsGroupDetails,
params: { companyId: n, staffGroupId: e.id }
}));
}
function O(e, l) {
return e.members && l.members ? e.members.length > l.members.length ? 1 : e.members.length === l.members.length ? 0 : -1 : e.members ? 1 : -1;
}
async function P() {
g.value.hasAcl = await b.can("createStaff", n), s.value.hasAcl = g.value.hasAcl, m.value.hasAcl = await b.can("deleteStaff", n);
}
return V(() => t.value, (e) => {
g.value.show = e.length === 0, m.value.show = e.length > 0, s.value.show = e.length === 1;
}), j(async () => {
try {
await P();
} catch {
}
}), {
actionButtons: i,
staffGroupsTableInfo: C,
fetchStaffGroups: _,
filterStaffGroups: M,
selectStaffGroups: k,
staffGroupsCount: v,
selectedStaffGroups: t,
displayStaffGroupDetails: E
};
}
const X = { class: "az-grid az-grid-flow-col az-justify-start az-gap-2 az-items-center" }, Y = { class: "az-text-ellipsis az-overflow-hidden" }, Z = { class: "az-m-2 az-text-grey-700" }, me = /* @__PURE__ */ q({
__name: "View",
props: {
api: {},
locale: {},
companyId: {},
router: {},
logger: {},
acl: {},
company: {},
organisation: {}
},
emits: ["companyLoading"],
setup(d, { emit: w }) {
const f = d, n = I(f.locale), z = w, a = u(null), b = n.global.t("settings.staffGroups.search.placeholder"), o = u(!1), {
actionButtons: h,
staffGroupsTableInfo: p,
fetchStaffGroups: G,
filterStaffGroups: C,
selectStaffGroups: v,
selectedStaffGroups: t,
displayStaffGroupDetails: g
} = W(f.locale, a, f.api, f.companyId, f.organisation, f.router, f.acl);
return (s, m) => (T(), A(J, {
acl: s.acl,
api: s.api,
router: s.router,
locale: s.locale,
logger: s.logger,
company: s.company,
onCompanyLoaded: m[0] || (m[0] = (i) => o.value = !0),
onCompanyLoading: m[1] || (m[1] = (i) => z("companyLoading", s.companyId)),
companyId: s.companyId,
tab: "staffGroups",
actionButtons: r(h)
}, {
staffGroups: S(() => [
o.value ? (T(), A(r(Q), {
key: 0,
ref_key: "staffGroupsTable",
ref: a,
selectable: !0,
searchable: !0,
searchLabel: r(b),
columns: r(p).columns,
sortable: r(p).sortable,
fetchMoreData: r(G),
filter: r(C),
onSelect: r(v),
onSelectRow: r(g)
}, {
"col(name)": S(({ row: i }) => [
y("div", X, [
y("div", {
class: "az-rounded-full az-bg-red az-w-[24px] az-h-[24px] az-min-w-[24px] az-min-h-[24px]",
style: F("background-color:" + i.color)
}, null, 4),
y("span", Y, D(i.name), 1)
])
]),
"col(members)": S(({ row: i }) => [
U(D(i.members ? r(n).global.t("settings.staffGroups.membersCount", i.members.length) : "settings.staffGroups.noMember"), 1)
]),
noData: S(() => [
y("div", Z, D(r(n).global.t("settings.staffGroups.no")), 1)
]),
_: 1
}, 8, ["searchLabel", "columns", "sortable", "fetchMoreData", "filter", "onSelect", "onSelectRow"])) : H("", !0)
]),
_: 1
}, 8, ["acl", "api", "router", "locale", "logger", "company", "companyId", "actionButtons"]));
}
});
export {
me as default
};