mui-spfx-controls
Version:
SPFx component library built with MUI
308 lines • 19.9 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { Cancel, Check, Close, FileDownload, FilterList, Search, TableRows, ViewColumn, } from '@mui/icons-material';
import { Badge, Box, Divider, Fade, InputAdornment, ListItemIcon, ListItemText, Menu, MenuItem, styled, Tab, Tabs, TextField, Tooltip, Typography, } from '@mui/material';
import { ColumnsPanelTrigger, DataGrid, ExportCsv, ExportPrint, FilterPanelTrigger, QuickFilter, QuickFilterClear, QuickFilterControl, QuickFilterTrigger, Toolbar, ToolbarButton, } from '@mui/x-data-grid';
import { Logger } from '@pnp/logging';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { ListService } from '../../services/ListService';
import { generateDashboardColumn } from '../../utils/generateDashboardColumn';
var DENSITY_OPTIONS = [
{ label: 'Compact density', value: 'compact' },
{ label: 'Standard density', value: 'standard' },
{ label: 'Comfortable density', value: 'comfortable' },
];
var StyledQuickFilter = styled(QuickFilter)({
display: 'grid',
alignItems: 'center',
});
var StyledToolbarButton = styled(ToolbarButton)(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 = styled(TextField)(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 = useState(false), exportMenuOpen = _b[0], setExportMenuOpen = _b[1];
var _c = useState(false), densityMenuOpen = _c[0], setDensityMenuOpen = _c[1];
var exportMenuTriggerRef = useRef(null);
var densityMenuTriggerRef = useRef(null);
return (React.createElement(Box, { display: "flex", flexDirection: "column", rowGap: 1 },
columnAction ||
densityAction ||
filterAction ||
exportAction ||
searchAction ? (React.createElement(Toolbar, { style: { display: 'flex', alignItems: 'center' } },
updateMessage ? (React.createElement(Box, null,
React.createElement(Fade, { in: true, timeout: 500 },
React.createElement(Box, { sx: {
display: 'flex',
gap: 1,
alignItems: 'center',
p: '4px 5px',
} },
updateMessage.type === 'success' ? (React.createElement(Check, { color: "success", fontSize: "small" })) : (React.createElement(Close, { color: "error", fontSize: "small" })),
React.createElement(Typography, { fontSize: "small", variant: "button", component: "span", sx: {
color: "".concat(updateMessage.type, ".main"),
} }, updateMessage.text))))) : null,
columnAction ? (React.createElement(Tooltip, { title: "Columns" },
React.createElement(ColumnsPanelTrigger, { render: React.createElement(ToolbarButton, null) },
React.createElement(ViewColumn, { fontSize: "small" })))) : null,
densityAction ? (React.createElement(React.Fragment, null,
React.createElement(Tooltip, { title: "Density" },
React.createElement(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(TableRows, { fontSize: "small" }))),
React.createElement(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(MenuItem, { key: option.value, selected: density === option.value, onClick: function () { return onDensityChange(option.value); } },
React.createElement(ListItemIcon, null, density === option.value && React.createElement(Check, { fontSize: "small" })),
React.createElement(ListItemText, null, option.label))); })))) : null,
filterAction ? (React.createElement(Tooltip, { title: "Filters" },
React.createElement(FilterPanelTrigger, { render: function (props, state) { return (React.createElement(ToolbarButton, __assign({}, props, { color: "default" }),
React.createElement(Badge, { badgeContent: state.filterCount, color: "primary", variant: "dot" },
React.createElement(FilterList, { fontSize: "small" })))); } }))) : null,
React.createElement(Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }),
exportAction ? (React.createElement(React.Fragment, null,
React.createElement(Tooltip, { title: "Export" },
React.createElement(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(FileDownload, { fontSize: "small" }))),
React.createElement(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(ExportPrint, { render: React.createElement(MenuItem, null), onClick: function () { return setExportMenuOpen(false); } }, "Print"),
React.createElement(ExportCsv, { render: React.createElement(MenuItem, null), onClick: function () { return setExportMenuOpen(false); } }, "Download as CSV")))) : null,
searchAction ? (React.createElement(StyledQuickFilter, null,
React.createElement(QuickFilterTrigger, { render: function (triggerProps, state) { return (React.createElement(Tooltip, { title: "Search", enterDelay: 0 },
React.createElement(StyledToolbarButton, __assign({}, triggerProps, { ownerState: { expanded: state.expanded }, color: "default", "aria-disabled": state.expanded }),
React.createElement(Search, { fontSize: "small" })))); } }),
React.createElement(QuickFilterControl, { render: function (_a, state) {
var _b;
var ref = _a.ref, controlProps = __rest(_a, ["ref"]);
return (React.createElement(StyledTextField, __assign({}, controlProps, { ownerState: { expanded: state.expanded }, inputRef: ref, "aria-label": "Search", placeholder: "Search...", size: "small", slotProps: __assign({ input: __assign({ startAdornment: (React.createElement(InputAdornment, { position: "start" },
React.createElement(Search, { fontSize: "small" }))), endAdornment: state.value ? (React.createElement(InputAdornment, { position: "end" },
React.createElement(QuickFilterClear, { edge: "end", size: "small", "aria-label": "Clear search", material: { sx: { marginRight: -0.75 } } },
React.createElement(Cancel, { fontSize: "small" })))) : null }, (_b = controlProps.slotProps) === null || _b === void 0 ? void 0 : _b.input) }, controlProps.slotProps) })));
} }))) : null)) : null,
tabAction ? (React.createElement(Toolbar, null,
React.createElement(Tabs, { value: currentTabValue, onChange: function (event, value) { return onTabChange(value); }, variant: "scrollable" }, tabValue
? tabValue.map(function (value, index) { return (React.createElement(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(context, list);
var _b = useState([]), columns = _b[0], setColumns = _b[1];
var _c = useState([]), cachedColumns = _c[0], setCachedColumns = _c[1];
var _d = useState([]), rows = _d[0], setRows = _d[1];
var _e = useState([]), cachedRows = _e[0], setCachedRows = _e[1];
var _f = useState('standard'), density = _f[0], setDensity = _f[1];
var _g = useState(tabValue ? tabValue[0] : undefined), currentTabValue = _g[0], setCurrentTabValue = _g[1];
var _h = useState(false), loading = _h[0], setLoading = _h[1];
var _j = useState(null), updateMessage = _j[0], setUpdateMessage = _j[1];
useEffect(function () {
setLoading(true);
listService
.getListFields(fields)
.then(function (response) {
var tempColumns = [];
__spreadArray([], response, true).forEach(function (value) {
var index = currentTabValue
? currentTabValue.displayFields.indexOf(value.InternalName)
: -1;
if (index !== -1) {
tempColumns[index] = generateDashboardColumn(context, value, !value.ReadOnlyField && editable, resizable);
}
});
setColumns(function () {
return currentTabValue
? tempColumns
: __spreadArray([], response, true).map(function (value) {
return generateDashboardColumn(context, value, !value.ReadOnlyField && editable, resizable);
});
});
setCachedColumns(__spreadArray([], response, true).map(function (value) {
return generateDashboardColumn(context, value, !value.ReadOnlyField && editable, resizable);
}));
listService
.getListItems(response, '', 'Created')
.then(function (itemResponse) {
setLoading(false);
setRows(currentTabValue
? __spreadArray([], itemResponse, true).filter(function (value) {
return String(value[currentTabValue.fieldToMatch]).indexOf(currentTabValue.stringToMatch) !== -1;
})
: __spreadArray([], itemResponse, true));
setCachedRows(itemResponse);
})
.catch(function (error) {
Logger.error(error);
});
})
.catch(function (error) {
Logger.error(error);
});
}, [list, fields]);
var handleTabChange = function (currentTabValue) {
var tempColumns = [];
var filteredRows = currentTabValue
? __spreadArray([], cachedRows, true).filter(function (value) {
return String(value[currentTabValue.fieldToMatch]).includes(currentTabValue.stringToMatch);
})
: __spreadArray([], cachedRows, true);
__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 __awaiter(void 0, void 0, void 0, function () {
var rowId, error_1;
return __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();
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(Box, { "data-testid": "mui-spfx-dashboard", ref: ref, height: !isNaN(Number(height)) ? Number(height) : height || 500 },
React.createElement(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 })));
});
export default Dashboard;
//# sourceMappingURL=Dashboard.js.map