v-dashkit
Version:
This template should help get you started developing with Vue 3 in Vite.
424 lines (423 loc) • 14.4 kB
JavaScript
import { defineStore as A } from "pinia";
import { ref as f, computed as H, defineComponent as x, inject as y, resolveComponent as E, openBlock as v, createElementBlock as w, createElementVNode as s, toDisplayString as z, unref as r, createVNode as o, Fragment as q, renderList as B, createBlock as I, resolveDynamicComponent as M, normalizeStyle as T, Suspense as P, withCtx as F, h as j } from "vue";
import { u as V, _ as N } from "./AppForm.vue_vue_type_style_index_0_lang-0ee8a63a.js";
import { useI18n as O } from "vue-i18n";
import { _ as K } from "./TableLoading.vue_vue_type_style_index_0_lang-ab8481ef.js";
import { s as i } from "./skeleton.esm-d22776ea.js";
const C = A("table", () => {
const c = f(!1), u = f(), e = f([]), l = f(), _ = f(), a = f([]), d = f([]);
let n, p = "";
const m = f(), R = H(() => c.value ? d.value : a.value), $ = H(() => e.value.map((t) => t[p])), D = H(() => e.value.length == 0 ? !1 : c.value ? e.value === d.value : e.value.length === a.value.length), S = (t, b, h) => {
a.value[t][b] = h;
}, g = H(() => c.value ? { icon: "reload", label: "restore", empty: "empty_records_deleted" } : { icon: "trash", label: "delete", empty: "empty_records" }), L = () => {
p = "", c.value = !1, e.value = [], a.value = [], d.value = void 0, n = void 0;
}, k = async (t) => {
if (!t)
return [];
const b = [];
return t.forEach((h) => {
h.createdAt && (h.createdAt = new Date(h.createdAt)), h.deletedAt && (h.deletedAt = new Date(h.deletedAt)), b.push(h);
}), b;
};
return {
initTable: (t) => {
L(), t.initiallySelectedItems && (e.value = t.initiallySelectedItems), a.value = t.records, d.value = t.deletedRecords, l.value = t.deleteRestoreHandler, _.value = t.deleteHandler, m.value = t.tableFiltersRef, c.value = t.deletedFilter, n = t.fetchFn, p = t.dataKey, console.log("init", t.initiallySelectedItems);
},
data: R,
appendRow: (t) => {
a.value.push(t);
},
prependRow: (t) => {
a.value.unshift(t);
},
records: a,
deletedRecords: d,
selectedIds: $,
deleteSelectedRows: () => {
d.value && (c.value ? (a.value = a.value.concat(e.value), d.value = d.value.filter((t) => !e.value.includes(t))) : (d.value = d.value.concat(e.value), a.value = a.value.filter((t) => !e.value.includes(t))), e.value = []);
},
hardDeleteSelectedRows: () => {
d.value && (d.value = d.value.filter((t) => !e.value.includes(t)), e.value = []);
},
refetchData: async () => {
if (!n)
return;
const t = await n({}), b = await k(t.records), h = await k(t.records);
a.value = b, d.value = h;
},
isAllRecordsSelected: D,
modelSelectionRef: e,
dataListElementRef: u,
updateCellValue: S,
deleteRestoreHandler: l,
deleteHandler: _,
fetchFn: n,
tableFiltersRef: m,
deleteRestoreVaraints: g,
showDeletedRef: c
};
}), U = { class: "delete-restore-dialog" }, G = /* @__PURE__ */ s("i", { class: "pi pi-trash" }, null, -1), J = { class: "actions" }, Q = /* @__PURE__ */ x({
__name: "DeleteRestoreDialog",
setup(c) {
const u = y("dialogRef"), e = y("apiClient"), l = C(), _ = V(), a = (n) => {
u.value.close(n);
}, d = () => {
if (!l.deleteRestoreHandler || l.selectedIds.length == 0) {
_.showError("deleted_error_summary", "cant_reach_delete_restore_handler"), u.value.close();
return;
}
const n = typeof l.deleteRestoreHandler.endpoint == "string" ? e[l.deleteRestoreHandler.endpoint] : l.deleteRestoreHandler.endpoint, p = {};
p[l.deleteRestoreHandler.requestProperty] = l.selectedIds, n(p).then((m) => {
l.deleteSelectedRows(), u.value.close(), _.showSuccess("deleted_summary", "deleted_detail");
}).catch((m) => {
console.log("eerrror", m.rawMessage), u.value.close(), _.showError("deleted_error_summary", "cannot_delete");
});
};
return (n, p) => {
const m = E("app-btn");
return v(), w("div", U, [
G,
s("h2", null, z(n.$t("delete_restore_dialog_title")), 1),
s("p", null, z(n.$t(`${r(l).deleteRestoreVaraints.label}_dialog_breif`)), 1),
s("div", J, [
o(m, {
icon: r(l).deleteRestoreVaraints.icon,
onClick: d,
label: n.$t("confirm"),
class: "success"
}, null, 8, ["icon", "label"]),
o(m, {
icon: "close",
onClick: a,
label: n.$t("canel"),
class: "danger"
}, null, 8, ["label"])
])
]);
};
}
});
const W = { class: "delete-restore-dialog" }, X = /* @__PURE__ */ s("i", { class: "pi pi-trash" }, null, -1), Y = { class: "actions" }, Z = /* @__PURE__ */ x({
__name: "DeleteDialog",
setup(c) {
const u = y("dialogRef"), e = y("apiClient"), l = C(), _ = V(), a = (n) => {
u.value.close(n);
}, d = () => {
if (!l.deleteHandler || l.selectedIds.length == 0) {
_.showError("deleted_error_summary", "cant_reach_delete_handler"), u.value.close();
return;
}
const n = typeof l.deleteHandler.endpoint == "string" ? e[l.deleteHandler.endpoint] : l.deleteHandler.endpoint, p = {};
p[l.deleteHandler.requestProperty] = l.selectedIds, n(p).then((m) => {
l.hardDeleteSelectedRows(), u.value.close(), _.showSuccess("deleted_summary", "deleted_detail");
}).catch((m) => {
console.log("eerrror", m), _.showError("deleted_error_summary", m);
});
};
return (n, p) => {
const m = E("app-btn");
return v(), w("div", W, [
X,
s("h2", null, z(n.$t("delete_restore_dialog_title")), 1),
s("p", null, z(n.$t("delete_dialog_breif")), 1),
s("div", Y, [
o(m, {
icon: "check",
onClick: d,
label: n.$t("confirm"),
class: "success"
}, null, 8, ["label"]),
o(m, {
icon: "times",
onClick: a,
label: n.$t("canel"),
class: "danger"
}, null, 8, ["label"])
])
]);
};
}
});
const ee = { class: "bg-card p-4" }, te = { class: "mb-1 flex justify-content-between border-1 border-solid p-4 border-round" }, se = { class: "mb-5 flex justify-content-between align-items-center p-4 border-round" }, le = { class: "flex align-items-center" }, oe = {
class: "bg-card",
style: { "border-radius": "1px" }
}, re = { class: "flex grid justify-content-center" }, ne = { class: "m-2 col-12 sm:col-6 md:col-3 flex border-round bg-card my-3" }, ce = { class: "flex-grow-1 w-9 flex align-items-center justify-content-center" }, ae = { class: "absolute top-0 right-0 p-2 flex" }, ie = { class: "app-card m-2 col-12 sm:col-6 md:col-3 flex border-round bg-card my-3" }, de = { class: "flex-grow-1 w-9 flex align-items-center justify-content-center" }, ue = { class: "absolute top-0 right-0 p-2 flex" }, me = { class: "app-card m-2 col-12 sm:col-6 md:col-3 flex border-round bg-card my-3" }, _e = { class: "flex-grow-1 w-9 flex align-items-center justify-content-center" }, pe = { class: "absolute top-0 right-0 p-2 flex" }, he = /* @__PURE__ */ x({
__name: "CardLoading",
setup(c) {
return (u, e) => (v(), w("div", ee, [
s("div", te, [
o(r(i), {
height: "3rem",
width: "7rem",
class: ""
}),
o(r(i), {
height: "3rem",
width: "7rem",
class: ""
})
]),
s("div", se, [
o(r(i), {
width: "10rem",
height: "1.5rem",
class: "mb-2"
}),
s("div", le, [
o(r(i), {
height: "2rem",
width: "3.5rem",
class: "mx-5",
style: { "border-radius": "12px" }
}),
s("div", oe, [
o(r(i), {
height: "3rem",
width: "3rem",
style: { "border-radius": "1px" }
})
]),
o(r(i), {
height: "3rem",
width: "10rem",
style: { "border-radius": "1px" },
class: ""
})
])
]),
s("div", re, [
s("div", ne, [
o(r(i), { size: "10rem" }),
s("div", ce, [
s("div", ae, [
o(r(i), {
shape: "circle",
size: "2rem",
class: "mr-2"
}),
o(r(i), {
shape: "circle",
size: "2rem",
class: "mr-2"
})
])
])
]),
s("div", ie, [
o(r(i), { size: "10rem" }),
s("div", de, [
s("div", ue, [
o(r(i), {
shape: "circle",
size: "2rem",
class: "mr-2"
}),
o(r(i), {
shape: "circle",
size: "2rem",
class: "mr-2"
})
])
])
]),
s("div", me, [
o(r(i), { size: "10rem" }),
s("div", _e, [
s("div", pe, [
o(r(i), {
shape: "circle",
size: "2rem",
class: "mr-2"
}),
o(r(i), {
shape: "circle",
size: "2rem",
class: "mr-2"
})
])
])
])
])
]));
}
}), fe = { class: "bg-card p-4 border-round" }, ve = {
style: { "border-bottom": "1px solid" },
class: "mb-4 py-2 flex justify-content-between align-items-center"
}, ge = { class: "flex align-items-center" }, be = { class: "flex flex-column justify-content-center" }, ye = { class: "bg-card w-full" }, we = { class: "flex align-items-center p-2 mx-0 md:mx-2 col-4" }, xe = {
class: "bg-card",
style: { "border-radius": "1px" }
}, Re = { class: "flex align-items-center p-2 mx-0 md:mx-2 col-7" }, $e = {
class: "bg-card",
style: { "border-radius": "1px" }
}, De = /* @__PURE__ */ x({
__name: "FormLoading",
setup(c) {
return (u, e) => (v(), w("div", fe, [
s("div", ve, [
o(r(i), {
height: "1.5rem",
width: "15rem",
class: "m-3"
}),
s("div", ge, [
o(r(i), {
height: "2.7rem",
width: "8rem",
class: "mx-2"
}),
o(r(i), {
height: "1.5rem",
width: "3.5rem",
style: { "border-radius": "12px" },
class: "mx-1"
})
])
]),
s("div", be, [
s("div", ye, [
(v(), w(q, null, B(3, (l) => s("div", {
class: "flex grid justify-content-center w-full",
key: l
}, [
s("div", we, [
s("div", xe, [
o(r(i), {
height: "3rem",
class: "w-2rem md:w-3rem",
style: { "border-radius": "1px" }
})
]),
o(r(i), {
height: "3rem",
style: { "border-radius": "1px" },
class: "w-full"
})
]),
s("div", Re, [
s("div", $e, [
o(r(i), {
height: "3rem",
class: "w-2rem md:w-3rem",
style: { "border-radius": "1px" }
})
]),
o(r(i), {
height: "3rem",
style: { "border-radius": "1px" },
class: "my-3 w-full"
})
])
])), 64))
]),
o(r(i), {
height: "2.5rem",
class: "m-3 w-full"
})
])
]));
}
}), Se = /* @__PURE__ */ x({
__name: "AppLoading",
props: {
type: {}
},
setup(c) {
const u = c, e = {
table: K,
card: he,
form: De
}, l = u.type && typeof u.type == "string" && Object.keys(e).includes(u.type) ? e[u.type] : e.table;
return (_, a) => (v(), I(M(r(l))));
}
}), He = /* @__PURE__ */ x({
__name: "AppFormDialog",
props: {
sections: {},
handler: {},
findForUpdateHandler: {},
recordId: {},
size: {}
},
setup(c) {
const { t: u } = O(), e = c, l = y("apiClient"), _ = C(), a = { width: "800px", minHeight: "auto" }, d = typeof e.size > "u" ? a : typeof e.size == "number" ? { width: `${e.size}px`, minHeight: `${e.size}px` } : { width: `${e.size.width}px`, minHeight: `${e.size.height}px` }, n = y("dialogRef"), p = (R) => new Promise(($, D) => {
const S = l[e.handler.endpoint];
typeof S == "function" ? S(R).then((g) => {
n.value.close(), _.refetchData(), $(g);
}).catch((g) => {
D(g);
}) : D({ globalErrors: ["no api function with this endpoint"], fieldErrors: {} });
}), m = {
context: {
title: u(e.handler.title),
options: {
isBulkCreateHidden: !0,
isHeaderSubmitHidden: !0,
isFormTransparent: !0
},
submitHandler: {
endpoint: p,
redirectRoute: e.handler.redirectRoute,
redirectRouteParam: e.handler.redirectRouteParam
},
findHandler: e.findForUpdateHandler,
sections: e.sections
}
};
return (R, $) => (v(), w("div", {
class: "form-dialog",
style: T(r(d))
}, [
(v(), I(P, { timeout: "0" }, {
default: F(() => [
o(N, {
context: m.context
}, null, 8, ["context"])
]),
fallback: F(() => [
o(Se, { type: "form" })
]),
_: 1
}))
], 4));
}
});
const Be = A("dialog", () => {
const c = f();
return { dialog: c, openDelete: () => {
c.value && c.value.open(Z, {
props: {
dismissableMask: !0,
closable: !1,
modal: !0
}
});
}, openDeleteRestore: () => {
c.value && c.value.open(Q, {
props: {
dismissableMask: !0,
closable: !1,
modal: !0
}
});
}, openForm: (a) => {
if (!c.value)
return;
const d = j(P, null, {
default: () => j(He, a)
});
c.value.open(d, {
props: {
dismissableMask: !0,
closable: !1,
modal: !0
}
});
}, init: (a) => {
c.value = a;
} };
});
export {
Se as _,
Be as a,
C as u
};