@octavianlab/olab-ui
Version:
Octavianlab UX/UI components
279 lines (278 loc) • 11.8 kB
JavaScript
import { u as R } from "./odialogexport-b6e3ec97.js";
import { resolveComponent as m, openBlock as l, createElementBlock as c, Fragment as M, createVNode as D, withCtx as d, createTextVNode as x, toDisplayString as y, createCommentVNode as s, createBlock as u, mergeProps as E, createSlots as P, createElementVNode as f, renderSlot as h, normalizeClass as b } from "vue";
import { _ as T } from "./obannerbrowsersupport-8a97766f.js";
const O = {
name: "OTable",
props: {
showLottie: { type: Boolean, default: () => !0 },
useApi: { type: Boolean, default: () => !1 },
storeSession: { type: Boolean, default: () => !1 },
exportMode: { type: String, default: () => "all" },
exportable: { type: Boolean, default: () => !1 },
defaultExportKeys: { type: Array, default: () => [] },
lottieName: { type: String, default: () => null },
name: { type: String, default: () => null },
label: { type: String, default: () => "" },
icon: { type: String, default: () => null },
dynamicColumns: { type: Array, default: () => null },
translator: { type: Boolean, default: () => !0 },
currencyKey: { type: String },
currencyInExport: { type: Boolean, default: () => !0 },
hideSavedExport: { type: Boolean, default: () => !1 },
hideButtonAmountInteger: { type: Boolean, default: () => !1 },
value: { type: Array, required: !0 },
paginator: { type: Boolean, default: () => !0 },
loading: { type: Boolean },
rowsPerPageOptions: { type: Array, default: () => [50, 100, 250, 500] },
responsiveLayout: { type: String, default: () => "stack" },
showHandleResponsiveLayout: { type: Boolean, default: () => !0 },
filtersModel: { type: Object, default: () => null },
selectionMode: { type: [String, Boolean], default: () => !1 },
headerButtonsStyle: { type: String, default: () => "" }
},
data() {
return {
useSettingsStore: R(),
refResponsiveLayout: this.responsiveLayout,
table: { resultsLimit: 20 },
expandedRows: [],
lottie: null,
filters: this.filtersModel ? { ...this.filtersModel } : null,
selectedColumns: [],
valueCopy: null
};
},
computed: {
expander() {
return !!this.$slots["table-expansion"];
},
hasHeader() {
return this.name || this.icon || this.exportable || !!this.$slots["table-header"] || !!this.$slots["header-buttons"] || this.showHandleResponsiveLayout && !this.isDesktop;
}
},
methods: {
onToggle({ value: e }) {
this.selectedColumns = this.dynamicColumns.filter((n) => e.includes(n)), this.$emit("onColumnSelect", { value: this.selectedColumns }), this.useSettingsStore.updateDynamicColumns({
page: this.currentPageName,
value: this.selectedColumns.map((n) => ({ header: n.header }))
});
},
doExport() {
var i, g;
const e = this.currencyKey ? this.currencyKey.split(".") : void 0, n = ((i = this.$refs.dt) == null ? void 0 : i.processedData) || [], t = ((g = this.$refs.dt) == null ? void 0 : g.columns) || [], p = this.defaultExportKeys.length ? this.defaultExportKeys : t.filter((r) => {
var v;
return (v = r == null ? void 0 : r.props) == null ? void 0 : v.field;
}).map((r) => r.props.field);
let a = this.currentPageName;
typeof a == "string" && (a.includes("playersdetail") ? a = "playersdetail" : a.includes("affiliatesdetail") && (a = "affiliatesdetail")), this.$modal.open("ODialogExport", {
processed: n,
defaultExportKeys: p,
key: a,
type: 0,
translatedLabel: this.getTranslatedLabel(t),
amountCurrencyMap: e ? this.getAmountCurrencyMap(e, n) : void 0,
results: this.valueCopy
});
},
getTranslatedLabel(e = []) {
return e.filter((n) => n.props.field).map((n) => ({ key: n.props.field, value: n.props.header }));
},
getAmountCurrencyMap(e, n) {
return n.map((t) => {
let p;
return e.length === 1 && (p = t[e[0]]), e.length === 2 && (p = t[e[0]][e[1]]), p;
});
},
handlerResponsiveLayout(e, n) {
const t = n === "stack" ? "scroll" : "stack";
if (e === "handle")
this.refResponsiveLayout = t, this.useSettingsStore.updateResponsiveTables({
page: this.currentPageName,
value: t
});
else if (e === "icon")
return n === "stack" ? "fa-chart-bar" : "fa-arrows-left-right-to-line";
},
handlerDymanicColumns() {
if (!this.dynamicColumns)
return;
const e = this.useSettingsStore.getDynamicColumns(this.currentPageName);
this.selectedColumns = e ? e.map((n) => this.dynamicColumns.find((t) => t.header === n.header)).filter(Boolean) : this.dynamicColumns.filter((n) => n.selected === !0), this.$emit("onColumnSelect", { value: this.selectedColumns });
}
},
created() {
this.handlerDymanicColumns();
},
mounted() {
if (!this.isDesktop && this.showHandleResponsiveLayout) {
const e = this.useSettingsStore.getResponsiveTables(this.currentPageName);
e && (this.refResponsiveLayout = e);
}
this.valueCopy = [...this.value];
}
}, A = {
key: 0,
class: "flex justify-content-between mb-2"
}, N = {
key: 0,
class: "table-title"
}, K = { key: 1 }, V = { class: "button-container" }, I = { class: "font-bold text-center" }, _ = { class: "grid grid-nogutter text-center" }, H = { class: "col-12 my-2 text-center font-bold" };
function j(e, n, t, p, a, i) {
var C;
const g = m("MultiSelect"), r = m("Button"), v = m("OLottie"), S = m("Column"), w = m("ColumnGroup"), k = m("ODialogExport"), L = m("DataTable");
return l(), c(M, null, [
t.dynamicColumns ? (l(), c("div", A, [
D(g, {
onChange: n[0] || (n[0] = (o) => i.onToggle(o)),
modelValue: a.selectedColumns,
"onUpdate:modelValue": n[1] || (n[1] = (o) => a.selectedColumns = o),
class: "w-100 dx",
display: "chip",
options: t.dynamicColumns,
optionLabel: "header",
placeholder: e.$translate("select.columns.to.show")
}, {
chip: d((o) => [
x(y(e.$translate(o.value.header)), 1)
]),
option: d((o) => [
x(y(e.$translate(o.option.header)), 1)
]),
_: 1
}, 8, ["modelValue", "options", "placeholder"])
])) : s("", !0),
(l(), u(L, E({
id: "o-table",
value: t.value,
expandedRows: a.expandedRows,
"onUpdate:expandedRows": n[4] || (n[4] = (o) => a.expandedRows = o),
filters: a.filters,
"onUpdate:filters": n[5] || (n[5] = (o) => a.filters = o),
"paginator-position": "both",
rows: e.$attrs.rows || 50,
currentPageReportTemplate: e.getDtTemplate("currentPageReport"),
paginatorTemplate: e.getDtTemplate("paginator"),
class: "p-datatable-sm p-datatable-striped dt-text-responsive",
ref: "dt",
stateStorage: t.storeSession ? "session" : void 0,
stateKey: t.storeSession ? `octavianlab-${e.site}:datatable-state` : void 0,
filterDisplay: a.filters ? "row" : null,
showGridlines: "",
removableSort: "",
autoLayout: "",
paginator: t.paginator && ((C = t.value) == null ? void 0 : C.length) > 0,
loading: t.loading || e.$loading.isLoading("search"),
rowsPerPageOptions: e.$attrs.rowsPerPageOptions || t.rowsPerPageOptions,
responsiveLayout: a.refResponsiveLayout,
sortMode: "multiple"
}, e.$attrs, {
dataKey: t.value && t.value.length > 0 && t.value[0].id ? "id" : void 0,
key: a.refResponsiveLayout,
editMode: e.$attrs.editMode
}), P({
loading: d(() => [
f("div", I, y(e.$translate("admin.generic.loading")), 1)
]),
empty: d(() => [
f("div", _, [
t.showLottie ? (l(), u(v, {
key: 0,
name: t.lottieName
}, null, 8, ["name"])) : s("", !0),
f("div", H, y(e.$translate("admin.generic.empty.results")), 1)
])
]),
default: d(() => [
t.selectionMode ? (l(), u(S, {
key: 0,
selectionMode: t.selectionMode === !0 ? "multiple" : t.selectionMode,
headerStyle: "width: 3rem;"
}, null, 8, ["selectionMode"])) : s("", !0),
i.expander ? (l(), u(S, {
key: 1,
expander: i.expander,
class: "w-3 text-center"
}, null, 8, ["expander"])) : s("", !0),
e.$slots["column-group"] ? (l(), u(w, {
key: 2,
type: "header"
}, {
default: d(() => [
h(e.$slots, "column-group")
]),
_: 3
})) : s("", !0),
h(e.$slots, "content"),
e.$modal.isVisible("ODialogExport") && t.exportable ? (l(), u(k, {
key: 3,
results: a.valueCopy,
useApi: t.useApi,
exportFilename: e.$attrs.exportFilename,
exportMode: t.exportMode,
currencyInExport: t.currencyInExport,
hideSavedExport: t.hideSavedExport,
hideButtonAmountInteger: t.hideButtonAmountInteger,
translator: ""
}, null, 8, ["results", "useApi", "exportFilename", "exportMode", "currencyInExport", "hideSavedExport", "hideButtonAmountInteger"])) : s("", !0)
]),
_: 2
}, [
i.hasHeader ? {
name: "header",
fn: d(() => {
var o;
return [
f("div", {
class: b([
"header-container",
t.name || t.icon || e.$slots["table-header"] ? "justify-content-between" : "justify-content-end"
])
}, [
h(e.$slots, "table-header"),
t.name || t.icon ? (l(), c("div", N, [
t.icon ? (l(), c("i", {
key: 0,
class: b(`fad ${t.icon} mr-3 fa-lg`)
}, null, 2)) : s("", !0),
t.name ? (l(), c("span", K, y(e.$translate(`admin.table.title.${t.name.toLowerCase()}`, t.label)), 1)) : s("", !0)
])) : s("", !0),
f("div", V, [
h(e.$slots, "header-buttons"),
t.exportable ? (l(), u(r, {
key: 0,
class: b(["hidden md:inline-flex p-button-outlined ml-2", t.headerButtonsStyle]),
icon: "fad fa-external-link",
label: e.$translate("admin.generic.action.export"),
onClick: n[2] || (n[2] = (B) => i.doExport()),
disabled: !((o = t.value) != null && o.length)
}, null, 8, ["class", "label", "disabled"])) : s("", !0),
!e.isDesktop && t.showHandleResponsiveLayout ? (l(), u(r, {
key: 1,
class: b(["p-button-sm p-button-secondary ml-2", t.headerButtonsStyle]),
label: e.$translate("admin.generic.view"),
icon: `fad ${i.handlerResponsiveLayout("icon", a.refResponsiveLayout)}`,
onClick: n[3] || (n[3] = (B) => i.handlerResponsiveLayout("handle", a.refResponsiveLayout))
}, null, 8, ["class", "label", "icon"])) : s("", !0)
])
], 2)
];
}),
key: "0"
} : void 0,
e.$slots["table-expansion"] ? {
name: "expansion",
fn: d((o) => [
h(e.$slots, "table-expansion", {
data: o.data,
index: o.index
})
]),
key: "1"
} : void 0
]), 1040, ["value", "expandedRows", "filters", "rows", "currentPageReportTemplate", "paginatorTemplate", "stateStorage", "stateKey", "filterDisplay", "paginator", "loading", "rowsPerPageOptions", "responsiveLayout", "dataKey", "editMode"]))
], 64);
}
const q = /* @__PURE__ */ T(O, [["render", j]]);
export {
q as O
};