sccoreui
Version:
ui-sccore
448 lines (447 loc) • 15.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
const type_1 = require("../../components/types/type");
const constants_1 = require("../../components/ag-grid/constants");
const Template_1 = tslib_1.__importDefault(require("./Template"));
const dynamicText = {
filterModelText: {
header: "Filter",
subHeader: "Streamline Your Search With Filters",
resetFilterAction: "Reset Filter",
createViewInputPlaceHolder: "Enter",
createViewAction: "Create View",
applyAction: "Apply",
elementOnePlaceHolder: "Select",
elementTwoPlaceHolder: "Select",
elementThreePlaceHolder_Input: "Enter Text",
elementThreePlaceHolder_Input_Number: "Enter Number",
elementThreePlaceHolder_DropDown: "Select",
elementThreePlaceHolder_MultiSelect: "Select",
elementThreePlaceHolder_Calender: "Select Date",
onSelectedFilter: "Selected",
},
sortModelText: {
header: "Column Sorting",
clearAction: "Clear",
applyAction: "Apply",
onSelectedSort: "Selected",
},
recordDetailModelText: {
totalRecordHeader: "Total Records",
},
sidePanelText: {
header: "Configure Columns",
disacrd_button: "Discard",
update_button: "Update",
apply_to_all_views: "Apply to all views",
apply_subHeading: "Apply the chosen column selection to all available views",
search_placeHolder: "Search by column name",
selected_attributes: "Selected Attributes",
unselected_attributes: " Attributes",
},
};
const DataTableClientSide = () => {
const [activeColumns, setActiveColumns] = (0, react_1.useState)([]);
console.log(activeColumns);
const [gridKey] = (0, react_1.useState)(1);
const noRowsTemplateRef = (0, react_1.useRef)();
const [isCheckboxEmpty,] = (0, react_1.useState)(false);
const [clearFilters,] = (0, react_1.useState)([]);
const getColumns = (columns) => {
return [
...columns.map((column, index) => {
var _a;
const { type } = column, rest = tslib_1.__rest(column, ["type"]);
let currentColumn = Object.assign(Object.assign({}, rest), { cellRenderer: (column === null || column === void 0 ? void 0 : column.body) || (column === null || column === void 0 ? void 0 : column.cellRenderer), minWidth: (column === null || column === void 0 ? void 0 : column.minWidth) ? column.minWidth : 110, id: (column === null || column === void 0 ? void 0 : column.id) ? column.id : new Date().getTime().toString(), suppressMovable: true, suppressMenu: true, suppressFillHandle: true, headerName: (column === null || column === void 0 ? void 0 : column.headerName)
? column === null || column === void 0 ? void 0 : column.headerName
: (column === null || column === void 0 ? void 0 : column.name)
? column.name
.toLowerCase()
.split(" ")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")
: (_a = column.field) === null || _a === void 0 ? void 0 : _a.toUpperCase(), field: column === null || column === void 0 ? void 0 : column.field, isFilterable: true, isSortable: true, dataType: 1, headerTooltip: (column === null || column === void 0 ? void 0 : column.name)
? column.name
.toLowerCase()
.split(" ")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")
: "", columnType: type ? type : "", seq: (column === null || column === void 0 ? void 0 : column.seq) ? column === null || column === void 0 ? void 0 : column.seq : index + 1 });
delete currentColumn.body;
return currentColumn;
}),
// actionsTemplate,
];
};
const columns = [
{
id: "1",
field: "name",
headerName: "Hello",
enableHeaderCheckbox: true,
enableChildCheckbox: true,
body: () => {
console.log("called");
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: ["Hello", (0, jsx_runtime_1.jsx)("img", { height: 40, width: 40, src: "https://nobero.com/cdn/shop/files/white_855177b5-5621-4a4b-a0d1-9060b89a6a69.jpg?v=1711979035&width=1066", alt: "lll" })] })));
}
}
];
(0, react_1.useEffect)(() => {
setActiveColumns(getColumns(columns));
}, []);
const BulkAction = (0, react_1.useCallback)(() => {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
}, []);
const setSelectedColumnsFun = () => {
// setBulkSelection(data);
};
const getGridRef = (0, react_1.useRef)(null);
const conditionsToDisplay = {
displayFilter: type_1.VisibilityState.ENABLE,
displaySort: type_1.VisibilityState.ENABLE,
displaySearch: type_1.VisibilityState.ENABLE,
displayBulkAction: type_1.VisibilityState.ENABLE,
displayRecords: type_1.VisibilityState.ENABLE,
displayRefresh: type_1.VisibilityState.ENABLE,
displaySidePanel: type_1.VisibilityState.HIDE,
displayRemoveItems: type_1.VisibilityState.ENABLE,
displayBulkEdit: type_1.VisibilityState.HIDE,
displayRowGroupingElement: type_1.VisibilityState.HIDE,
enableViewCreate: false,
enableFillHandle: false,
displayFeaturesHeader: true,
isGridAutoHeight: false,
displayGridViewListView: type_1.VisibilityState.ENABLE
};
const style = {
height: "700px"
};
const rowModelType = constants_1.ROWMODELTYPE.CLIENT_SIDE;
const updateColumnsForGrid = () => "";
function generateUniqueId() {
const timestamp = Date.now().toString().slice(-4); // Last 4 digits of timestamp
const randomPart = Math.floor(100000 + Math.random() * 900000).toString(); // 6 random digits
return timestamp + randomPart; // 10-digit unique ID
}
const rowData = [
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
}, {
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
{
id: generateUniqueId(),
name: "fasdfasdf",
image: "",
},
];
(0, react_1.useEffect)(() => {
// if (getGridRef.current) {
// getGridRef?.current?.api?.showLoadingOverlay()
// }
}, [getGridRef.current]);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("section", Object.assign({ style: { height: "calc(100vh - 64px)" }, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { getCheckedRows: setSelectedColumnsFun, bulkActionComponent: BulkAction, gridKey: gridKey, columnData: columns, clearFilters: clearFilters, dynamicText: dynamicText, placeholder: "Search by code or name", defaultFilters: [], enableManageColumnsCallback: false, conditionsToDisplay: conditionsToDisplay, rowModelType: rowModelType, style: {
height: style.height,
width: "100%",
}, updateColumnsForGrid: updateColumnsForGrid, shouldRefetch: true, noRowsOverlayComponent: noRowsTemplateRef.current, getGridRef: getGridRef, emptyCheckboxStatus: isCheckboxEmpty, quickSearch: true, template: Template_1.default, rowData: rowData }) })) }));
};
exports.default = DataTableClientSide;