mui-spfx-controls
Version:
SPFx component library built with MUI
145 lines • 6.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateDashboardColumn = void 0;
var tslib_1 = require("tslib");
var fields_1 = require("@pnp/sp/fields");
var react_1 = tslib_1.__importStar(require("react"));
var PeoplePicker_1 = require("../components/PeoplePicker");
var PeopleService_1 = require("../services/PeopleService");
/**
* Wrapper component for PeoplePicker, resolving user details based on query.
*/
var WrapperPeoplePicker = function (_a) {
var api = _a.api, context = _a.context, query = _a.query, multiple = _a.multiple, onChange = _a.onChange, props = tslib_1.__rest(_a, ["api", "context", "query", "multiple", "onChange"]);
var peopleService = new PeopleService_1.PeopleService(context);
var _b = (0, react_1.useState)(null), resolvedUser = _b[0], setResolvedUser = _b[1];
var _c = (0, react_1.useState)(true), loading = _c[0], setLoading = _c[1];
(0, react_1.useEffect)(function () {
var resolveUser = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var resolvedUserResponse, _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_b.trys.push([0, 2, 3, 4]);
return [4 /*yield*/, peopleService.resolveUser(context, query)];
case 1:
resolvedUserResponse = _b.sent();
setResolvedUser(resolvedUserResponse);
return [3 /*break*/, 4];
case 2:
_a = _b.sent();
setResolvedUser(null);
return [3 /*break*/, 4];
case 3:
setLoading(false);
return [7 /*endfinally*/];
case 4: return [2 /*return*/];
}
});
}); };
resolveUser();
}, []);
return (react_1.default.createElement(PeoplePicker_1.PeoplePicker, tslib_1.__assign({ context: context, loading: loading, value: resolvedUser, onChange: onChange }, props)));
};
/**
* Generates a dashboard column configuration for use in MUI DataGrid.
*
* @param {WebPartContext} context - SharePoint WebPart context.
* @param {IFieldInfo} currentField - SharePoint field information.
* @param {boolean | undefined} editable - Whether the column is editable.
* @param {boolean | undefined} resizable - Whether the column is resizable.
* @returns {GridColDef} - Column definition for MUI DataGrid.
*/
var generateDashboardColumn = function (context, currentField, editable, resizable) {
var _a;
switch (currentField.FieldTypeKind) {
case fields_1.FieldTypes.User:
return {
flex: 1,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
valueFormatter: function (params) { return params.Title; },
resizable: resizable,
renderEditCell: function (params) {
return (react_1.default.createElement(WrapperPeoplePicker, { api: params.api, context: context, query: params.value.EMail, onChange: function (selectedUser) {
params.api.setEditCellValue({
id: params.id,
field: params.field,
value: Array.isArray(selectedUser) ? selectedUser.map(function (user) { return ({
Id: user.EntityData.SPUserID,
EMail: user.EntityData.Email,
Title: user.DisplayText,
}); }) : {
Id: selectedUser.EntityData.SPUserID,
EMail: selectedUser.EntityData.Email,
Title: selectedUser.DisplayText,
},
});
} }));
},
};
case fields_1.FieldTypes.Boolean:
return {
flex: 0.5,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'boolean',
resizable: resizable,
};
case fields_1.FieldTypes.DateTime:
return {
flex: 1,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
valueGetter: function (params) {
return new Date(params);
},
type: 'dateTime',
resizable: resizable,
};
case fields_1.FieldTypes.Choice:
case fields_1.FieldTypes.MultiChoice:
return {
flex: 2,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'singleSelect',
resizable: resizable,
valueOptions: (_a = currentField.Choices) !== null && _a !== void 0 ? _a : [],
};
case fields_1.FieldTypes.Number:
case fields_1.FieldTypes.Integer:
return {
flex: 2,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'number',
resizable: resizable,
};
case fields_1.FieldTypes.Note:
return {
flex: 4,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'string',
resizable: resizable,
};
default:
return {
flex: 2,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'string',
resizable: resizable,
};
}
};
exports.generateDashboardColumn = generateDashboardColumn;
//# sourceMappingURL=generateDashboardColumn.js.map