phx-react
Version:
PHX REACT
195 lines • 15.4 kB
JavaScript
;
'use client';
exports.__esModule = true;
exports.PHXTableVertical = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var EmptySearchResult_1 = tslib_1.__importDefault(require("./EmptySearchResult"));
var RowTable_1 = require("./RowTable");
var useStickyLeft_1 = require("./useStickyLeft");
var clientQueryV3_1 = tslib_1.__importDefault(require("../Func/clientQueryV3"));
var Skeleton_1 = require("../Skeleton");
var types_1 = require("../types");
var EmptyRecord_1 = require("../EmptyRecord");
function PHXTableVertical(_a) {
var _this = this;
var _b = _a.border, border = _b === void 0 ? false : _b, _c = _a.cellNumberInRow, cellNumberInRow = _c === void 0 ? 0 : _c, _d = _a.filterLoading, filterLoading = _d === void 0 ? false : _d, isBulkAction = _a.isBulkAction, _e = _a.isCellRendering, isCellRendering = _e === void 0 ? false : _e, list = _a.list, setHeaderLoading = _a.setHeaderLoading, setSelectedCheckbox = _a.setSelectedCheckbox, sortFields = _a.sortFields, _f = _a.stickyColumnNumber, stickyColumnNumber = _f === void 0 ? 0 : _f, thBody = _a.thBody, thBodyComponent = _a.thBodyComponent, thHeader = _a.thHeader, thHeaderComponent = _a.thHeaderComponent, thHeaderVertical = _a.thHeaderVertical, _g = _a.typeLoading, typeLoading = _g === void 0 ? { type: 'table' } : _g, groupData = _a.groupData, selectedCheckbox = _a.selectedCheckbox, listVerticalRender = _a.listVerticalRender;
var _h = (0, react_1.useState)(true), isMainLoading = _h[0], setIsMainLoading = _h[1];
var _j = (0, react_1.useState)([]), dataTableQuery = _j[0], setDataTableQuery = _j[1];
var _k = (0, useStickyLeft_1.useStickyLefts)(stickyColumnNumber, dataTableQuery), lefts = _k.lefts, refs = _k.refs;
var headerEmptyLength = thHeader.filter(function (item) { return !item; }).length;
var bindDataToTable = function (dataTable) {
var data = tslib_1.__spreadArray([], dataTable, true);
if (isBulkAction === null || isBulkAction === void 0 ? void 0 : isBulkAction.enable) {
// Thêm item mới vào đầu mảng với id duy nhất và các giá trị rỗng
data = tslib_1.__spreadArray([{ id: 'bulk-action-checkbox', isBulkCheckbox: true }], data, true);
}
setDataTableQuery(data);
};
function getValueByPath(obj, path) {
return path.split('.').reduce(function (acc, part) { return acc === null || acc === void 0 ? void 0 : acc[part]; }, obj);
}
var chunkArray = function (arr, groupDataCell) {
var key = groupDataCell.key, mapping = groupDataCell.mapping;
var grouped = new Map();
for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
var item = arr_1[_i];
var groupKey = item[key];
if (!grouped.has(groupKey)) {
grouped.set(groupKey, []);
}
grouped.get(groupKey).push(item);
}
var result = [];
var data = [];
var stillData = true;
while (stillData) {
var chunk = [];
stillData = false;
for (var _a = 0, mapping_1 = mapping; _a < mapping_1.length; _a++) {
var mapKey = mapping_1[_a];
var items = grouped.get(mapKey) || [];
if (items.length > 0) {
chunk.push(items.shift());
stillData = true;
}
else {
chunk.push(null);
}
}
if (stillData) {
result.push(chunk);
data.push(chunk);
}
}
if (listVerticalRender && result.length > 0) {
var number = 0;
var valueListVertical = listVerticalRender.list.length;
for (var i = 0; i < valueListVertical; ++i) {
var item = data[number];
var value = item && item.length > 0 ? getValueByPath(item[0], listVerticalRender.key) : null;
if (value !== listVerticalRender.list[i].value) {
var emptyItems = new Array(listVerticalRender.list[i].totalRow).fill([]);
result.splice.apply(result, tslib_1.__spreadArray([number, 0], emptyItems, false));
}
else {
number += listVerticalRender.list[i].totalRow;
}
}
}
return result;
};
function sortByFields(array, fields) {
return tslib_1.__spreadArray([], array, true).sort(function (a, b) {
for (var _i = 0, fields_1 = fields; _i < fields_1.length; _i++) {
var _a = fields_1[_i], direction = _a.direction, path = _a.path;
var valueA = getValueByPath(a, path);
var valueB = getValueByPath(b, path);
if (valueA == null && valueB != null)
return 1;
if (valueB == null && valueA != null)
return -1;
if (valueA == null && valueB == null)
continue;
if (valueA < valueB) {
return direction === 'asc' ? -1 : 1;
}
if (valueA > valueB) {
return direction === 'asc' ? 1 : -1;
}
}
return 0;
});
}
var queryData = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var data, dataQuery, dataTable, dataWithSort, chunkedData, e_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
setIsMainLoading(true);
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, (0, clientQueryV3_1["default"])({
query: list.query
})];
case 2:
data = _a.sent();
dataQuery = data === null || data === void 0 ? void 0 : data.data;
if (!dataQuery)
return [2 /*return*/];
dataTable = list.keyResult;
if (isCellRendering && cellNumberInRow) {
dataWithSort = sortFields ? sortByFields(dataQuery[dataTable], sortFields) : dataQuery[dataTable];
chunkedData = chunkArray(dataWithSort, groupData);
bindDataToTable(chunkedData);
}
else {
bindDataToTable(dataQuery[dataTable]);
}
if (setHeaderLoading)
setHeaderLoading();
setIsMainLoading(false);
return [3 /*break*/, 4];
case 3:
e_1 = _a.sent();
console.log(e_1);
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
(0, react_1.useEffect)(function () {
queryData();
}, []);
(0, react_1.useEffect)(function () {
if (filterLoading) {
queryData();
}
}, [list]);
return (react_1["default"].createElement(react_1["default"].Fragment, null, isMainLoading ? (react_1["default"].createElement(Skeleton_1.PHXSkeleton, { filterQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.filterQty, reportQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.reportQty, type: typeLoading.type })) : (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: 'mt-3 rounded-lg bg-white shadow ring-1 ring-black ring-opacity-5' },
react_1["default"].createElement("div", { className: 'flex flex-col' }, dataTableQuery.length > 0 ? (react_1["default"].createElement("div", null, !isMainLoading ? (react_1["default"].createElement("div", { className: 'overflow-x-auto rounded-lg' },
react_1["default"].createElement("div", { className: (0, types_1.classNames)('min-w-full align-middle shadow ring-black ring-opacity-5') },
react_1["default"].createElement("div", { className: (0, types_1.classNames)('relative overflow-auto ') },
react_1["default"].createElement("table", { className: (0, types_1.classNames)(
// @ts-ignore
thHeader.length < 5
? 'min-w-full table-fixed border-separate border-spacing-0 divide-y divide-gray-300'
: 'min-w-full border-separate border-spacing-0 divide-y divide-gray-300') },
thHeaderComponent ? (thHeaderComponent) : (react_1["default"].createElement("thead", null,
react_1["default"].createElement("tr", null, thHeader.map(function (item, index) {
return index === 0 ? (react_1["default"].createElement("th", { key: index,
// @ts-ignore
ref: function (el) { return (refs.current[0] = el); }, className: (0, types_1.classNames)('rounded-tl-lg bg-white px-3 py-2 text-left align-top text-xs font-medium text-gray-800', item ? 'min-w-[160px] ' : 'min-w-12', stickyColumnNumber &&
'sticky left-0 top-0 z-10 sm:drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', stickyColumnNumber === 1 && 'drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]'), scope: 'col', style: stickyColumnNumber ? { left: lefts[0] } : {} }, item)) : (react_1["default"].createElement("th", { key: index,
// @ts-ignore
ref: function (el) { return (refs.current[index] = el); }, className: (0, types_1.classNames)('min-w-[135px] bg-white px-3 py-2 text-left align-top text-xs font-medium text-gray-800', index === thHeader.length - 1 && 'rounded-tr-lg', stickyColumnNumber &&
index < stickyColumnNumber &&
'sticky top-0 z-10 drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', border && item && 'border-l'), scope: 'col', style: stickyColumnNumber && index < stickyColumnNumber ? { left: lefts[index] } : {} }, item));
})))),
react_1["default"].createElement("tbody", { className: 'divide-y divide-gray-200' },
react_1["default"].createElement(react_1["default"].Fragment, null, !thHeaderVertical || !isCellRendering ? (react_1["default"].createElement(react_1["default"].Fragment, null, dataTableQuery.map(function (item, itemIndex) { return (react_1["default"].createElement("tr", { key: item.id }, thBody.map(function (_, bodyIndex) { return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement(RowTable_1.RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, isBulkAction: isBulkAction, itemBody: item, itemIndex: itemIndex, lefts: lefts, refs: refs, setSelectedCheckbox: setSelectedCheckbox, stickyColumnNumber: stickyColumnNumber, thBody: thBody, thBodyComponent: thBodyComponent, thHeaderVertical: thHeaderVertical, selectedCheckbox: selectedCheckbox }))); }))); }))) : (react_1["default"].createElement(react_1["default"].Fragment, null, thHeaderVertical.map(function (item, index) {
var _a, _b, _c, _d;
return (react_1["default"].createElement("tr", { key: index, className: 'hover:cursor-default' },
item.parent_name && (react_1["default"].createElement("td", { className: (0, types_1.classNames)('sticky top-0 z-10 whitespace-nowrap rounded-bl-lg border-r border-t bg-white px-2 text-xs font-semibold text-gray-900', (item === null || item === void 0 ? void 0 : item.className) ? item.className : ''), rowSpan: item.parent_row, style: { left: lefts[0] } }, item.parent_name)),
react_1["default"].createElement("td", { className: (0, types_1.classNames)('sticky top-0 !z-10 h-[83px] whitespace-nowrap border-t bg-white text-xs text-gray-900 drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]', (item === null || item === void 0 ? void 0 : item.className) ? item.className : ''), style: {
left: thHeaderVertical.filter(function (header) { return header.parent_name; })
.length > 0
? lefts[1]
: lefts[0]
} },
react_1["default"].createElement("div", { className: 'flex flex-col justify-center px-2 py-2' }, item.component ? (react_1["default"].createElement(react_1["default"].Fragment, null, item.component)) : (react_1["default"].createElement("p", { className: 'text-xs font-semibold text-gray-900' }, item.name)))),
((_a = dataTableQuery[index]) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (react_1["default"].createElement(react_1["default"].Fragment, null, (_b = dataTableQuery[index]) === null || _b === void 0 ? void 0 :
_b.map(function (itemChunk, indexChunk) {
var isFunctionRender = thBodyComponent
? thBodyComponent[thHeader[indexChunk + headerEmptyLength]]
: undefined;
return (react_1["default"].createElement("td", { key: indexChunk + 1, className: (0, types_1.classNames)('z-10 border-l border-t px-3 py-2 text-xs text-gray-900') }, isFunctionRender ? isFunctionRender(itemChunk, itemChunk) : ''));
}),
((_c = dataTableQuery[index]) === null || _c === void 0 ? void 0 : _c.length) < cellNumberInRow && (react_1["default"].createElement(react_1["default"].Fragment, null, tslib_1.__spreadArray([], Array(cellNumberInRow - ((_d = dataTableQuery[index]) === null || _d === void 0 ? void 0 : _d.length)), true).map(function (_, indexArr) { return (react_1["default"].createElement("td", { key: indexArr + 1, className: (0, types_1.classNames)(' px-3 py-2 text-xs text-[#616161]', border && 'border-r border-t ') }, "Ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u")); }))))) : (tslib_1.__spreadArray([], Array(cellNumberInRow), true).map(function (_, indexArr) { return (react_1["default"].createElement("td", { key: indexArr + 1, className: (0, types_1.classNames)('px-3 py-2 text-xs text-[#616161]', border && 'border-r border-t ') }, "Ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u")); }))));
})))))))))) : (react_1["default"].createElement(EmptySearchResult_1["default"], null)))) : (react_1["default"].createElement(EmptyRecord_1.PHXEmptyRecord, null))))))));
}
exports.PHXTableVertical = PHXTableVertical;
//# sourceMappingURL=TableVertical.js.map