@devkitvue/dataview
Version:
Devkit Base Components is a Vue plugin offering a collection of reusable, headless components designed to streamline your Vue.js development workflow. Built for flexibility and maintainability, this library gives you complete control over styling and beha
339 lines (338 loc) • 11.7 kB
JavaScript
import { defineComponent as re, useSlots as se, ref as ne, inject as de, computed as h, resolveComponent as ie, createElementBlock as D, renderSlot as o, createCommentVNode as p, unref as a, openBlock as i, createElementVNode as y, createVNode as K, mergeProps as ue, withCtx as l, createBlock as b, resolveDynamicComponent as R, toDisplayString as L, normalizeProps as ce, guardReactiveProps as pe, h as S } from "vue";
import { useQuery as ve } from "@tanstack/vue-query";
import { resolveApiEndpoint as me, ObjectEntries as fe } from "@devkitvue/apiclient";
import { useActions as ye, DataCard as be, DataList as ge, DataField as he } from "@devkitvue/datalist";
import { AppBtn as k, DateStringDigitToDate as De } from "@devkitvue/base-components";
import { useRoute as Ae, useRouter as $e } from "vue-router";
import { useToast as Ce } from "primevue";
import { useI18n as we } from "vue-i18n";
const Ke = {
key: 0,
class: "loading"
}, Re = {
key: 0,
class: "text-3xl z-30 font-bold p-4 dataview-title"
}, Se = { class: "mt-6 flex gap-4" }, ke = { class: "mt-24 p-8" }, Fe = { class: "flex flex-wrap gap-4 items-center" }, Ne = { class: "flex flex-col space-y-2" }, Ie = {
key: 0,
class: "text-4xl font-bold mb-4"
}, Ee = {
key: 0,
class: "w-full glass rounded-lg p-4 mt-8"
}, Oe = /* @__PURE__ */ re({
__name: "DataView",
props: {
context: {}
},
emits: ["update:submited", "update:submit", "deleteRestore:submited", "deleteRestore:submit", "delete:submited", "delete:submit", "error"],
setup(r, { emit: A }) {
const g = A, c = se(), $ = ne(!1), H = Ae(), F = Ce(), j = de("apiClient"), {
title: N,
requestValue: G,
viewKey: I,
routerParamName: z = "id",
endFields: B,
cardConfig: v,
record: C,
pt: E,
startFields: Q,
requestKey: W = "recordId",
datalistKey: _,
requestMapper: V
} = r.context, T = (e) => {
if (e instanceof Error) {
F.add({
severity: "error",
summary: "failed",
detail: e.message,
life: 3e3
});
return;
}
F.add({
severity: "error",
summary: "failed",
detail: e,
life: 3e3
});
}, q = h(() => {
if (G) return r.context.requestValue;
try {
const e = H.params[z];
return /^\d+$/.test(e) ? Number(e) : e;
} catch (e) {
return T(e), 0;
}
}), J = async () => {
if (typeof C == "object")
return { record: C, options: r.context.options };
try {
let e = {};
e[W] = q.value;
const d = e;
V && V(d);
const s = await me(C, j, d);
return s.record ? ($.value = s.record.deletedAt != "", s) : {};
} catch (e) {
throw T(e), e;
}
}, u = ve({
queryKey: [I, q],
queryFn: () => J().then(async (e) => e),
enabled: !0
}), X = h(
() => {
var e;
return ((e = u.data.value) == null ? void 0 : e.options) || r.context.options || { title: r.context.viewKey };
}
), t = h(() => {
var e;
return ((e = u.data.value) == null ? void 0 : e.record) || void 0;
}), {
permittedActions: P,
createUpdateRecord: Y,
deleteRestoreOpenDialog: w,
deleteRestoreVariants: U,
// deleteRestoreMutationFn,
// deleteMutation,
viewRecord: Z
} = ye({
title: "hamada",
isDeletedRef: $,
dataKeys: [_ || ""],
options: X,
formSections: r.context.formSections,
rowIdentifier: r.context.rowIdentifier
}), ee = () => P.value.filter((e) => ["delete", "deleteRestore", "update"].includes(e.actionKey)).map((e) => {
const s = `actions.${e.actionKey}`, m = (f) => g("update:submited", f), n = c[s];
return n ? n({ record: t.value }) : S(k, {
variant: "outlined",
action: () => e.actionFn(m, t.value),
...e,
key: e.actionKey + e.label
});
});
console.log(
c,
P,
Y,
w,
// deleteRestoreMutationFn,
// deleteMutation,
Z
);
const { push: te } = $e(), ae = h(() => (console.log("Crrent data is", t), {
key: U.value.label,
action: () => w({ record: t.value }),
...U.value
})), x = (e) => {
const d = e == "start" ? Q : B, s = "flex items-center gap-8 flex-wrap", m = e == "start" ? E.startFieldsWrapper || s : E.endFieldsWrapper || s;
if (!(!d || !t.value))
return S(
"div",
{ class: m },
fe(d).flatMap(([n, f]) => {
if (console.log("Asdasdasd", f), !f || !t.value) return [];
const M = `${e}Field.${String(n)}`;
if (typeof c[M] == "function") {
const le = c[M];
return le({
data: t.value,
value: t.value[n]
});
}
return S(
he,
{
key: n,
...f.props || {},
data: t.value,
// assuming you have `data: TRecord`
field: String(n)
},
f.slots
);
})
);
}, { t: oe } = we();
return (e, d) => {
const s = ie("AppImage");
return a(u).isLoading.value || a(u).isFetching.value ? (i(), D("div", Ke, d[0] || (d[0] = [
y("h2", null, "loading", -1)
]))) : t.value ? o(e.$slots, "card", {
key: 1,
data: t.value
}, () => [
K(a(be), ue({ data: t.value }, a(v)), {
"header-start": l(() => [
o(e.$slots, "cardHeaderStart", { data: t.value }, () => [
a(N) ? (i(), D("h2", Re, L(a(oe)(a(N))), 1)) : p("", !0)
])
]),
"header-end": l(() => [
y("div", Se, [
(i(), b(R(ee))),
K(a(k), ce(pe(ae.value)), null, 16),
$.value ? (i(), b(a(k), {
key: 0,
action: () => a(w)({
record: t.value,
callback: () => a(te)(e.context.listRoute || "/"),
isHardDelete: !0
}),
variant: "outlined",
icon: "delete-bin-2-line",
label: "hard_delete",
severity: "danger"
}, null, 8, ["action"])) : p("", !0)
])
]),
header: l(() => [
o(e.$slots, "cardHeader", { data: t.value })
]),
start: l(() => [
o(e.$slots, "cardStart", { data: t.value }, () => {
var m, n;
return [
y("div", ke, [
y("div", Fe, [
(m = a(v)) != null && m.imageKey && t.value[a(v).imageKey] ? (i(), b(s, {
key: 0,
class: "w-[8rem] h-[8rem] rounded-full overflow-hidden my-4",
src: t.value[a(v).imageKey]
}, null, 8, ["src"])) : p("", !0),
y("div", Ne, [
(n = a(v)) != null && n.titleKey ? (i(), D("h3", Ie, L(t.value[a(v).titleKey]), 1)) : p("", !0),
(i(), b(R(x("start"))))
])
])
])
];
})
]),
end: l(() => [
o(e.$slots, "cardEnd", { data: t.value }, () => [
(i(), b(R(x("end"))))
])
]),
"start-content": l(() => [
o(e.$slots, "cardStartContent", { data: t.value })
]),
"card-image": l(() => [
o(e.$slots, "cardImage", { data: t.value })
]),
"card-info": l(() => [
o(e.$slots, "cardInfo", { data: t.value })
]),
subtitle: l(() => [
o(e.$slots, "cardSubtitle", { data: t.value })
]),
footer: l(() => [
o(e.$slots, "cardFooter", { data: t.value })
]),
"footer-start": l(() => [
o(e.$slots, "cardFooterStart", { data: t.value })
]),
"footer-end": l(() => [
o(e.$slots, "cardFooterEnd", { data: t.value })
]),
"footer-middle": l(() => [
o(e.$slots, "cardFooterMiddle", { data: t.value })
]),
badgeContent: l(() => [
o(e.$slots, "cardBadgeContent", { data: t.value })
]),
createdAt: l(() => [
o(e.$slots, "cardCreatedAt", { data: t.value })
]),
deletedAt: l(() => [
o(e.$slots, "cardDeletedAt", { data: t.value })
]),
_: 3
}, 16, ["data"]),
a(u).data.value ? o(e.$slots, "footer", {
key: 0,
data: t.value,
response: a(u).data.value,
refetch: a(u).refetch
}) : p("", !0),
o(e.$slots, "logs", {
data: t.value,
response: a(u).data.value
}, () => [
t.value.logs ? (i(), D("div", Ee, [
K(a(ge), {
class: "w-full",
context: {
datalistKey: `${a(I)}_logs`,
records: t.value.logs,
filters: [
{
matchMode: "in",
isGlobal: !0,
input: {
$formkit: "devkitDropdown",
name: "actionType",
label: "Action Type",
outerClass: "col-span-2",
fluid: !0,
optionLabel: "label",
placeholder: "Select action types",
multiple: !0,
options: [
{ label: "Create", value: "create" },
{ label: "Update", value: "update" },
{ label: "Delete", value: "delete" },
{ label: "Delete Restore", value: "restore" }
]
}
},
{
matchMode: "in",
isGlobal: !0,
input: {
$formkit: "devkitDropdown",
fluid: !0,
outerClass: "col-span-2",
name: "statusCode",
label: "Status Code",
placeholder: "Select status codes",
multiple: !0,
options: [
{ label: "OK", value: "ok" },
{ label: "NOT_FOUND", value: "not_found" },
{ label: "INVALID_ARGUMENT", value: "invalid_argument" },
{ label: "INTERNAL", value: "internal" },
{ label: "UNAUTHENTICATED", value: "unauthenticated" },
{ label: "PERMISSION_DENIED", value: "permission_denied" }
]
}
}
],
displayType: "table",
cardConfig: {
createdAtKey: "creaddAt",
dateAdapter: a(De)
},
options: {
title: "Logs",
description: "User activity logs"
}
}
}, null, 8, ["context"])
])) : p("", !0)
])
]) : p("", !0);
};
}
}), O = Symbol("apiClient"), He = {
install(r, { apiClient: A }) {
var c;
const g = (c = r._context) == null ? void 0 : c.provides;
(!g || !(O in g)) && r.provide(O, A);
}
};
export {
O as ApiClientKey,
Oe as DataView,
He as default
};