burdy
Version:
Open Source Headless Platform
164 lines (163 loc) • 10.3 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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const react_router_1 = require("react-router");
const groups_context_1 = require("../context/groups.context");
const yup = __importStar(require("yup"));
const permissions_context_1 = require("../../permissions/context/permissions.context");
const group_members_1 = __importDefault(require("./group-members"));
const loading_bar_1 = __importDefault(require("../../../components/loading-bar"));
const react_hook_form_1 = require("react-hook-form");
const yup_1 = require("@hookform/resolvers/yup");
const rhf_components_1 = require("../../../components/rhf-components");
const status_bar_1 = __importDefault(require("../../../components/status-bar"));
const permission_select_1 = __importDefault(require("../../permissions/components/permission-select"));
const permission_chips_1 = __importDefault(require("../../permissions/components/permission-chips"));
const useStyles = (0, react_1.makeStyles)({
personaCoin: {
paddingRight: 20,
},
mainInformation: {
marginTop: 36,
marginBottom: 24,
},
content: {
marginTop: 24,
},
});
const schema = yup.object({
name: yup.string().required().min(1).label('Name'),
description: yup.string().label('Description'),
});
const GroupEdit = () => {
const groups = (0, groups_context_1.useGroups)();
const permissions = (0, permissions_context_1.usePermissions)();
const [open, setOpen] = (0, react_2.useState)(false);
const { id } = (0, react_router_1.useParams)();
const history = (0, react_router_1.useHistory)();
const baseRef = (0, react_2.useRef)();
const currentGroup = groups.get.result;
const close = (0, react_2.useCallback)(() => {
history.push('/settings/groups');
}, [history]);
const Footer = (0, react_2.useCallback)(() => {
var _a;
return (react_2.default.createElement(react_1.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
react_2.default.createElement(react_1.PrimaryButton, { onClick: (_a = baseRef.current) === null || _a === void 0 ? void 0 : _a.submit, disabled: groups.update.loading, "data-cy": "groups-edit-submit" }, "Update"),
react_2.default.createElement(react_1.DefaultButton, { onClick: () => setOpen(false) }, "Cancel")));
}, [groups.update.loading]);
(0, react_2.useEffect)(() => {
setOpen(true);
}, []);
(0, react_2.useEffect)(() => {
groups.get.execute(id);
permissions.list.execute();
}, []);
return (react_2.default.createElement(react_1.Panel, { isOpen: open, onDismiss: () => setOpen(false), onDismissed: close, headerText: "Edit group", onRenderFooterContent: Footer, isFooterAtBottom: true, type: react_1.PanelType.medium, "data-cy": "groups-edit" },
react_2.default.createElement(loading_bar_1.default, { loading: !currentGroup || permissions.list.loading },
react_2.default.createElement(GroupEditBase, { baseRef: baseRef, close: () => setOpen(false), group: currentGroup }))));
};
const GroupEditBase = ({ baseRef, close, group, }) => {
var _a, _b, _c, _d, _e;
const styles = useStyles();
const groups = (0, groups_context_1.useGroups)();
const [users, setUsers] = (0, react_2.useState)(group === null || group === void 0 ? void 0 : group.users);
const permissions = (0, permissions_context_1.usePermissions)();
const { control, handleSubmit, setValue, register } = (0, react_hook_form_1.useForm)({
resolver: (0, yup_1.yupResolver)(schema),
defaultValues: {
id: group === null || group === void 0 ? void 0 : group.id,
name: group === null || group === void 0 ? void 0 : group.name,
description: group === null || group === void 0 ? void 0 : group.description,
permissions: (_a = group === null || group === void 0 ? void 0 : group.permissions) !== null && _a !== void 0 ? _a : [],
users: (_b = group === null || group === void 0 ? void 0 : group.users) !== null && _b !== void 0 ? _b : [],
},
});
(0, react_2.useEffect)(() => {
setUsers(group === null || group === void 0 ? void 0 : group.users);
permissions.selection.select(group.permissions);
register('users');
register('permissions');
}, []);
(0, react_2.useEffect)(() => {
setValue('users', users);
}, [users]);
(0, react_2.useEffect)(() => {
setValue('permissions', permissions.selectedPermissions.flatMap((p) => p.id));
}, [permissions.selectedPermissions]);
const submit = handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield groups.update.execute(data);
close === null || close === void 0 ? void 0 : close();
}
catch (e) {
//
}
}));
(0, react_2.useImperativeHandle)(baseRef, () => ({
submit,
}));
return (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement(react_1.Stack, { horizontal: true, verticalAlign: "center", className: styles.mainInformation },
react_2.default.createElement(react_1.Stack.Item, null,
react_2.default.createElement(react_1.PersonaCoin, { text: group === null || group === void 0 ? void 0 : group.name, initialsColor: react_1.PersonaInitialsColor.blue, size: react_1.PersonaSize.size100, className: styles.personaCoin })),
react_2.default.createElement(react_1.Stack.Item, null,
react_2.default.createElement(react_1.Stack, null,
react_2.default.createElement(react_1.Text, { variant: "xxLarge" },
react_2.default.createElement("b", null,
" ", group === null || group === void 0 ? void 0 :
group.name)),
react_2.default.createElement(react_1.Text, null, (_c = group === null || group === void 0 ? void 0 : group.users) === null || _c === void 0 ? void 0 :
_c.length,
" members")))),
react_2.default.createElement(react_1.Pivot, { "data-cy": "groups-edit-tabs" },
react_2.default.createElement(react_1.PivotItem, { headerText: "General", className: styles.content },
react_2.default.createElement(react_1.Stack, { tokens: { childrenGap: 12 }, horizontalAlign: "center" },
react_2.default.createElement(react_1.Stack, { tokens: { childrenGap: 16 }, style: { width: '100%' } },
react_2.default.createElement(status_bar_1.default, { controller: groups.update }),
react_2.default.createElement(react_1.Stack, { tokens: { childrenGap: 16 } },
react_2.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "Name", name: "name", autoComplete: "off", "data-cy": "groups-edit-name" }),
react_2.default.createElement(rhf_components_1.ControlledTextField, { control: control, name: "description", label: "Description", autoComplete: "off", multiline: true, "data-cy": "groups-edit-description" }),
!(group === null || group === void 0 ? void 0 : group.protected) && (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement(react_1.Text, { style: { fontWeight: 600 } },
"Permissions (", (_e = (_d = permissions.selectedPermissions) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0,
")"),
react_2.default.createElement(permission_chips_1.default, { permissions: permissions.selectedPermissions }))))))),
!(group === null || group === void 0 ? void 0 : group.protected) && (react_2.default.createElement(react_1.PivotItem, { headerText: "Manage Permissions" },
react_2.default.createElement(permission_select_1.default, { unwrap: true }))),
react_2.default.createElement(react_1.PivotItem, { headerText: "Members", className: styles.content, alwaysRender: true },
react_2.default.createElement(group_members_1.default, { users: users, setUsers: setUsers, close: close, isProtected: group === null || group === void 0 ? void 0 : group.protected })))));
};
exports.default = GroupEdit;