burdy
Version:
Open Source Headless Platform
126 lines (125 loc) • 7.09 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const hoc_1 = require("../../../helpers/hoc");
const back_panel_1 = __importDefault(require("../../../components/back-panel"));
const react_1 = __importStar(require("react"));
const react_2 = require("@fluentui/react");
const lodash_1 = require("lodash");
const groups_context_1 = require("../../groups/context/groups.context");
const react_router_1 = require("react-router");
const auth_context_1 = require("../../authentication/context/auth.context");
const useStyles = (0, react_2.makeStyles)({
detailList: {
':global(.ms-DetailsRow-check)': {
height: '100% !important',
},
},
commandBar: {
marginTop: 12,
},
});
const UserGroups = ({ close, groups, setGroups, user, }) => {
const styles = useStyles();
const auth = (0, auth_context_1.useAuth)();
const history = (0, react_router_1.useHistory)();
const [addGroupOpen, setAddGroupOpen] = (0, react_1.useState)(false);
const [selectedGroups, setSelectedGroups] = (0, react_1.useState)([]);
const groupsContext = (0, groups_context_1.useGroups)();
const selection = (0, react_1.useMemo)(() => new react_2.Selection({
selectionMode: react_2.SelectionMode.multiple,
getKey: (item) => item.id,
onSelectionChanged: () => setSelectedGroups(selection.getSelection()),
}), []);
const selectableGroups = (0, react_1.useMemo)(() => { var _a, _b; return (0, lodash_1.differenceBy)((_b = (_a = groupsContext === null || groupsContext === void 0 ? void 0 : groupsContext.list) === null || _a === void 0 ? void 0 : _a.result) !== null && _b !== void 0 ? _b : [], groups, 'id'); }, [groupsContext.list.result, groups]);
(0, react_1.useEffect)(() => {
if (addGroupOpen) {
groupsContext.list.execute();
}
}, [addGroupOpen]);
const commandActions = (0, react_1.useMemo)(() => [
{
key: 'add',
text: 'Add groups',
'data-cy': 'users-groups-add',
iconProps: { iconName: 'Add' },
onClick: () => setAddGroupOpen(true),
},
{
key: 'delete',
text: 'Remove memberships',
'data-cy': 'users-groups-remove',
iconProps: { iconName: 'Delete' },
disabled: selectedGroups.length === 0 ||
(selectedGroups.some((g) => g.protected) &&
auth.user.id === (user === null || user === void 0 ? void 0 : user.id)),
onClick: () => {
const selectedGroupIds = selectedGroups.map((g) => g.id);
setGroups(groups.filter((g) => !selectedGroupIds.includes(g.id)));
},
},
], [setGroups, groups, auth, selectedGroups]);
const columns = (0, react_1.useMemo)(() => [
{
key: 'id',
name: 'ID',
fieldName: 'id',
minWidth: 40,
maxWidth: 40,
},
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 80,
maxWidth: 120,
onRender: (item) => (react_1.default.createElement("div", { style: { fontSize: 14, color: react_2.CommunicationColors.shade10 } }, item.name)),
},
{
key: 'description',
name: 'Description',
fieldName: 'description',
minWidth: 120,
},
], []);
const renderFooterContent = (0, react_1.useCallback)(() => (react_1.default.createElement(react_2.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
react_1.default.createElement(react_2.PrimaryButton, { "data-cy": "users-groups-submit", onClick: () => {
setGroups((0, lodash_1.sortedUniqBy)((0, lodash_1.sortBy)([...groups, ...groupsContext.selection.getSelection()], 'id'), 'id'));
setAddGroupOpen(false);
} }, "Add Group(s)"),
react_1.default.createElement(react_2.DefaultButton, { "data-cy": "users-groups-cancel", onClick: () => setAddGroupOpen(false) }, "Cancel"))), [groups, setGroups, setAddGroupOpen, close, groupsContext]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(back_panel_1.default, { title: "Add Groups", type: react_2.PanelType.medium, isOpen: addGroupOpen, onBack: () => setAddGroupOpen(false), onDismiss: () => close === null || close === void 0 ? void 0 : close(), isFooterAtBottom: true, onRenderFooterContent: renderFooterContent, "data-cy": "users-groups-panel" },
react_1.default.createElement(react_2.MarqueeSelection, { selection: groupsContext.selection, isDraggingConstrainedToRoot: true },
react_1.default.createElement(react_2.ShimmeredDetailsList, { selection: groupsContext.selection, enableShimmer: groupsContext.list.loading, selectionMode: react_2.SelectionMode.multiple, setKey: "multiple", selectionPreservedOnEmptyClick: true, className: styles.detailList, onItemInvoked: (item) => {
history.push(`/settings/groups/edit/${item.id}`);
}, items: Array.isArray(selectableGroups) ? selectableGroups : [], columns: columns }))),
react_1.default.createElement("div", { "data-cy": "users-groups" },
react_1.default.createElement(react_2.CommandBar, { className: styles.commandBar, items: commandActions, styles: { root: { padding: 0 } } }),
react_1.default.createElement(react_2.MarqueeSelection, { selection: selection, isDraggingConstrainedToRoot: true },
react_1.default.createElement(react_2.ShimmeredDetailsList, { selection: selection, selectionMode: react_2.SelectionMode.multiple, setKey: "multiple", selectionPreservedOnEmptyClick: true, className: styles.detailList, onItemInvoked: (item) => {
history.push(`/settings/groups/edit/${item.id}`);
}, items: Array.isArray(groups) ? groups : [], columns: columns })))));
};
exports.default = (0, hoc_1.withGroupsContext)(UserGroups);