mui-spfx-controls
Version:
SPFx component library built with MUI
247 lines • 17.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var icons_material_1 = require("@mui/icons-material");
var material_1 = require("@mui/material");
var x_data_grid_1 = require("@mui/x-data-grid");
var logging_1 = require("@pnp/logging");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var ListService_1 = require("../../services/ListService");
var generateDashboardColumn_1 = require("../../utils/generateDashboardColumn");
var DENSITY_OPTIONS = [
{ label: 'Compact density', value: 'compact' },
{ label: 'Standard density', value: 'standard' },
{ label: 'Comfortable density', value: 'comfortable' },
];
var StyledQuickFilter = (0, material_1.styled)(x_data_grid_1.QuickFilter)({
display: 'grid',
alignItems: 'center',
});
var StyledToolbarButton = (0, material_1.styled)(material_1.Box, {
shouldForwardProp: function (prop) { return prop !== 'ownerState'; },
})(function (_a) {
var theme = _a.theme, ownerState = _a.ownerState;
return ({
gridArea: '1 / 1',
width: 'min-content',
height: 'min-content',
zIndex: 1,
opacity: ownerState.expanded ? 0 : 1,
pointerEvents: ownerState.expanded ? 'none' : 'auto',
transition: theme.transitions.create(['opacity']),
});
});
var StyledTextField = (0, material_1.styled)(material_1.TextField, {
shouldForwardProp: function (prop) { return prop !== 'ownerState'; },
})(function (_a) {
var theme = _a.theme, ownerState = _a.ownerState;
return ({
gridArea: '1 / 1',
overflowX: 'clip',
width: ownerState.expanded ? 260 : 'var(--trigger-width)',
opacity: ownerState.expanded ? 1 : 0,
transition: theme.transitions.create(['width', 'opacity']),
});
});
var CustomGridToolbar = function (_a) {
var loading = _a.loading, columnAction = _a.columnAction, densityAction = _a.densityAction, filterAction = _a.filterAction, exportAction = _a.exportAction, tabAction = _a.tabAction, tabValue = _a.tabValue, currentTabValue = _a.currentTabValue, searchAction = _a.searchAction, updateMessage = _a.updateMessage, density = _a.density, onDensityChange = _a.onDensityChange, onTabChange = _a.onTabChange;
var _b = (0, react_1.useState)(false), exportMenuOpen = _b[0], setExportMenuOpen = _b[1];
var _c = (0, react_1.useState)(false), densityMenuOpen = _c[0], setDensityMenuOpen = _c[1];
var exportMenuTriggerRef = (0, react_1.useRef)(null);
var densityMenuTriggerRef = (0, react_1.useRef)(null);
return (React.createElement(material_1.Box, { display: "flex", flexDirection: "column", rowGap: 1 },
columnAction ||
densityAction ||
filterAction ||
exportAction ||
searchAction ? (React.createElement(x_data_grid_1.Toolbar, { style: { display: 'flex', alignItems: 'center' } },
updateMessage ? (React.createElement(material_1.Box, null,
React.createElement(material_1.Fade, { in: true, timeout: 500 },
React.createElement(material_1.Box, { sx: {
display: 'flex',
gap: 1,
alignItems: 'center',
} },
updateMessage.type === 'success' ? (React.createElement(icons_material_1.Check, { color: "success", fontSize: "small" })) : (React.createElement(icons_material_1.Close, { color: "error", fontSize: "small" })),
React.createElement(material_1.Typography, { fontSize: "small", variant: "button", component: "span", sx: {
color: "".concat(updateMessage.type, ".main"),
} }, updateMessage.text))))) : null,
columnAction ? (React.createElement(material_1.Tooltip, { title: "Columns" },
React.createElement(x_data_grid_1.ColumnsPanelTrigger, { render: React.createElement(x_data_grid_1.ToolbarButton, null) },
React.createElement(icons_material_1.ViewColumn, { fontSize: "small" })))) : null,
densityAction ? (React.createElement(React.Fragment, null,
React.createElement(material_1.Tooltip, { title: "Density" },
React.createElement(x_data_grid_1.ToolbarButton, { ref: densityMenuTriggerRef, id: "density-menu-trigger", "aria-controls": "density-menu", "aria-haspopup": "true", "aria-expanded": densityMenuOpen ? 'true' : undefined, onClick: function () { return setDensityMenuOpen(true); } },
React.createElement(icons_material_1.TableRows, { fontSize: "small" }))),
React.createElement(material_1.Menu, { id: "export-menu", anchorEl: densityMenuTriggerRef.current, open: densityMenuOpen, onClose: function () { return setDensityMenuOpen(false); }, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, slotProps: {
list: {
'aria-labelledby': 'export-menu-trigger',
},
} }, DENSITY_OPTIONS.map(function (option) { return (React.createElement(material_1.MenuItem, { key: option.value, selected: density === option.value, onClick: function () { return onDensityChange(option.value); } },
React.createElement(material_1.ListItemIcon, null, density === option.value && React.createElement(icons_material_1.Check, { fontSize: "small" })),
React.createElement(material_1.ListItemText, null, option.label))); })))) : null,
filterAction ? (React.createElement(material_1.Tooltip, { title: "Filters" },
React.createElement(x_data_grid_1.FilterPanelTrigger, { render: function (props, state) { return (React.createElement(x_data_grid_1.ToolbarButton, tslib_1.__assign({}, props, { color: "default" }),
React.createElement(material_1.Badge, { badgeContent: state.filterCount, color: "primary", variant: "dot" },
React.createElement(icons_material_1.FilterList, { fontSize: "small" })))); } }))) : null,
React.createElement(material_1.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }),
exportAction ? (React.createElement(React.Fragment, null,
React.createElement(material_1.Tooltip, { title: "Export" },
React.createElement(x_data_grid_1.ToolbarButton, { ref: exportMenuTriggerRef, id: "export-menu-trigger", "aria-controls": "export-menu", "aria-haspopup": "true", "aria-expanded": exportMenuOpen ? 'true' : undefined, onClick: function () { return setExportMenuOpen(true); } },
React.createElement(icons_material_1.FileDownload, { fontSize: "small" }))),
React.createElement(material_1.Menu, { id: "export-menu", anchorEl: exportMenuTriggerRef.current, open: exportMenuOpen, onClose: function () { return setExportMenuOpen(false); }, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, slotProps: {
list: {
'aria-labelledby': 'export-menu-trigger',
},
} },
React.createElement(x_data_grid_1.ExportPrint, { render: React.createElement(material_1.MenuItem, null), onClick: function () { return setExportMenuOpen(false); } }, "Print"),
React.createElement(x_data_grid_1.ExportCsv, { render: React.createElement(material_1.MenuItem, null), onClick: function () { return setExportMenuOpen(false); } }, "Download as CSV")))) : null,
searchAction ? (React.createElement(StyledQuickFilter, null,
React.createElement(x_data_grid_1.QuickFilterTrigger, { render: function (triggerProps, state) { return (React.createElement(material_1.Tooltip, { title: "Search", enterDelay: 0 },
React.createElement(StyledToolbarButton, tslib_1.__assign({}, triggerProps, { ownerState: { expanded: state.expanded }, color: "default", "aria-disabled": state.expanded }),
React.createElement(icons_material_1.Search, { fontSize: "small" })))); } }),
React.createElement(x_data_grid_1.QuickFilterControl, { render: function (_a, state) {
var _b;
var ref = _a.ref, controlProps = tslib_1.__rest(_a, ["ref"]);
return (React.createElement(StyledTextField, tslib_1.__assign({}, controlProps, { ownerState: { expanded: state.expanded }, inputRef: ref, "aria-label": "Search", placeholder: "Search...", size: "small", slotProps: tslib_1.__assign({ input: tslib_1.__assign({ startAdornment: (React.createElement(material_1.InputAdornment, { position: "start" },
React.createElement(icons_material_1.Search, { fontSize: "small" }))), endAdornment: state.value ? (React.createElement(material_1.InputAdornment, { position: "end" },
React.createElement(x_data_grid_1.QuickFilterClear, { edge: "end", size: "small", "aria-label": "Clear search", material: { sx: { marginRight: -0.75 } } },
React.createElement(icons_material_1.Cancel, { fontSize: "small" })))) : null }, (_b = controlProps.slotProps) === null || _b === void 0 ? void 0 : _b.input) }, controlProps.slotProps) })));
} }))) : null)) : null,
tabAction ? (React.createElement(x_data_grid_1.Toolbar, null,
React.createElement(material_1.Tabs, { value: currentTabValue, onChange: function (event, value) { return onTabChange(value); }, variant: "scrollable" }, tabValue
? tabValue.map(function (value, index) { return (React.createElement(material_1.Tab, { key: "".concat(value.label, "-").concat(index), label: value.label, value: value, disabled: value.disabled || loading, wrapped: value.wrapped, icon: value.icon, iconPosition: value.iconPosition })); })
: null))) : null));
};
var Dashboard = React.forwardRef(function (_a, ref) {
var context = _a.context, list = _a.list, fields = _a.fields, tabAction = _a.tabAction, tabValue = _a.tabValue, editable = _a.editable, resizable = _a.resizable, columnAction = _a.columnAction, densityAction = _a.densityAction, filterAction = _a.filterAction, exportAction = _a.exportAction, searchAction = _a.searchAction, height = _a.height, sx = _a.sx;
var listService = new ListService_1.ListService(context, list);
var _b = (0, react_1.useState)([]), columns = _b[0], setColumns = _b[1];
var _c = (0, react_1.useState)([]), cachedColumns = _c[0], setCachedColumns = _c[1];
var _d = (0, react_1.useState)([]), rows = _d[0], setRows = _d[1];
var _e = (0, react_1.useState)([]), cachedRows = _e[0], setCachedRows = _e[1];
var _f = (0, react_1.useState)('standard'), density = _f[0], setDensity = _f[1];
var _g = (0, react_1.useState)(tabValue ? tabValue[0] : undefined), currentTabValue = _g[0], setCurrentTabValue = _g[1];
var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
var _j = (0, react_1.useState)(null), updateMessage = _j[0], setUpdateMessage = _j[1];
(0, react_1.useEffect)(function () {
setLoading(true);
listService
.getListFields(fields)
.then(function (response) {
var tempColumns = [];
tslib_1.__spreadArray([], response, true).forEach(function (value) {
var index = currentTabValue
? currentTabValue.displayFields.indexOf(value.InternalName)
: -1;
if (index !== -1) {
tempColumns[index] = (0, generateDashboardColumn_1.generateDashboardColumn)(context, value, !value.ReadOnlyField && editable, resizable);
}
});
setColumns(function () {
return currentTabValue
? tempColumns
: tslib_1.__spreadArray([], response, true).map(function (value) {
return (0, generateDashboardColumn_1.generateDashboardColumn)(context, value, !value.ReadOnlyField && editable, resizable);
});
});
setCachedColumns(tslib_1.__spreadArray([], response, true).map(function (value) {
return (0, generateDashboardColumn_1.generateDashboardColumn)(context, value, !value.ReadOnlyField && editable, resizable);
}));
listService
.getListItems(response, '', 'Created')
.then(function (itemResponse) {
setLoading(false);
setRows(currentTabValue
? tslib_1.__spreadArray([], itemResponse, true).filter(function (value) {
return String(value[currentTabValue.fieldToMatch]).indexOf(currentTabValue.stringToMatch) !== -1;
})
: tslib_1.__spreadArray([], itemResponse, true));
setCachedRows(itemResponse);
})
.catch(function (error) {
logging_1.Logger.error(error);
});
})
.catch(function (error) {
logging_1.Logger.error(error);
});
}, [list, fields]);
var handleTabChange = function (currentTabValue) {
var tempColumns = [];
var filteredRows = currentTabValue
? tslib_1.__spreadArray([], cachedRows, true).filter(function (value) {
return String(value[currentTabValue.fieldToMatch]).includes(currentTabValue.stringToMatch);
})
: tslib_1.__spreadArray([], cachedRows, true);
tslib_1.__spreadArray([], cachedColumns, true).forEach(function (value) {
var index = currentTabValue
? currentTabValue === null || currentTabValue === void 0 ? void 0 : currentTabValue.displayFields.indexOf(value.field)
: -1;
if (index !== -1) {
tempColumns[index] = value;
}
});
setColumns(tempColumns);
setRows(filteredRows);
setCurrentTabValue(currentTabValue);
};
var processRowUpdate = function (newRow, oldRow) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var rowId, error_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
rowId = Number(oldRow.Id);
setLoading(true);
_a.label = 1;
case 1:
_a.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, listService.updateListItem(rowId, newRow)];
case 2:
_a.sent();
setUpdateMessage({ text: 'Changes saved!', type: 'success' });
return [2 /*return*/, newRow];
case 3:
error_1 = _a.sent();
logging_1.Logger.error(error_1);
setUpdateMessage({ text: 'Error saving!', type: 'error' });
return [2 /*return*/, oldRow];
case 4:
setLoading(false);
setTimeout(function () { return setUpdateMessage(null); }, 3000);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
var onDensityChange = function (density) {
setDensity(density);
};
return (React.createElement(material_1.Box, { "data-testid": "mui-spfx-dashboard", ref: ref, height: !isNaN(Number(height)) ? Number(height) : height || 500 },
React.createElement(x_data_grid_1.DataGrid, { loading: loading, getRowId: function (row) { return String(row.Id); }, columns: columns, rows: rows, editMode: "row", density: density, onDensityChange: onDensityChange, processRowUpdate: editable ? processRowUpdate : undefined, initialState: {
pagination: {
paginationModel: {
pageSize: 25,
},
},
}, slots: { toolbar: CustomGridToolbar }, showToolbar: true, slotProps: {
toolbar: {
loading: loading,
columnAction: columnAction,
densityAction: densityAction,
filterAction: filterAction,
exportAction: exportAction,
tabAction: tabAction,
searchAction: searchAction,
tabValue: tabValue,
currentTabValue: currentTabValue,
updateMessage: updateMessage,
density: density,
onDensityChange: onDensityChange,
onTabChange: handleTabChange,
},
}, sx: sx })));
});
exports.default = Dashboard;
//# sourceMappingURL=Dashboard.js.map