burdy
Version:
Open Source Headless Platform
139 lines (138 loc) • 7.88 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 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 GroupAdd = () => {
const styles = useStyles();
const { create } = (0, groups_context_1.useGroups)();
const { list, selectedPermissions } = (0, permissions_context_1.usePermissions)();
const history = (0, react_router_1.useHistory)();
const [users, setUsers] = (0, react_2.useState)([]);
const [open, setOpen] = (0, react_2.useState)(false);
const { control, setValue, handleSubmit, watch, register } = (0, react_hook_form_1.useForm)({
resolver: (0, yup_1.yupResolver)(schema),
defaultValues: {
name: '',
description: '',
permissions: [],
users: [],
},
});
const [name] = watch(['name']);
const close = (0, react_2.useCallback)(() => {
history.push('/settings/groups');
}, []);
(0, react_2.useEffect)(() => {
list.execute();
register('users');
register('permissions');
}, []);
(0, react_2.useEffect)(() => {
setOpen(true);
}, []);
(0, react_2.useEffect)(() => {
setValue('users', users);
}, [users]);
(0, react_2.useEffect)(() => {
setValue('permissions', selectedPermissions.flatMap((p) => p.id));
}, [selectedPermissions]);
const submit = handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield create.execute(data);
close();
}
catch (e) {
//
}
}));
const Footer = (0, react_2.useCallback)(() => (react_2.default.createElement(react_1.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
react_2.default.createElement(react_1.PrimaryButton, { "data-cy": "groups-add-submit", onClick: submit }, "Create"),
react_2.default.createElement(react_1.DefaultButton, { onClick: close }, "Cancel"))), []);
return (react_2.default.createElement(react_1.Panel, { isOpen: open, onDismiss: () => setOpen(false), onDismissed: close, headerText: "Create a group", onRenderFooterContent: Footer, isFooterAtBottom: true, type: react_1.PanelType.medium, "data-cy": "groups-add" },
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: 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, name)),
react_2.default.createElement(react_1.Text, null,
users.length,
" members")))),
react_2.default.createElement(status_bar_1.default, { controller: create }),
react_2.default.createElement(react_1.Pivot, { "data-cy": "groups-add-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(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-add-name" }),
react_2.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "Description", name: "description", autoComplete: "off", multiline: true, "data-cy": "groups-add-description" }),
react_2.default.createElement(react_1.Text, { style: { fontWeight: 600 } },
"Permissions (",
selectedPermissions.length,
")"),
react_2.default.createElement(permission_chips_1.default, { permissions: selectedPermissions }))))),
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 },
react_2.default.createElement(group_members_1.default, { users: users, setUsers: setUsers, isProtected: false, close: close })))));
};
exports.default = GroupAdd;