From 8f176b6d117b8e6f520bcf38de22c023e8322aba Mon Sep 17 00:00:00 2001 From: dushimsam Date: Tue, 9 Aug 2022 11:14:48 +0200 Subject: [PATCH] feat(UI): added manage group-users page Signed-off-by: dushimsam --- src/Routes.jsx | 6 + src/api/groups.js | 39 +++++ src/api/groups.test.js | 66 +++++++- src/components/Admin/ChangePermission.jsx | 103 +++++++++++++ src/components/Header/index.jsx | 4 +- src/components/Widgets/Input/index.jsx | 3 + src/constants/constants.js | 20 +++ src/constants/endpoints.js | 5 + src/constants/routes.js | 1 + src/pages/Admin/Group/Manage/index.jsx | 179 ++++++++++++++++++++++ src/services/groups.js | 29 +++- 11 files changed, 451 insertions(+), 4 deletions(-) create mode 100644 src/components/Admin/ChangePermission.jsx create mode 100644 src/pages/Admin/Group/Manage/index.jsx diff --git a/src/Routes.jsx b/src/Routes.jsx index 7f5f48603..34466f8dd 100644 --- a/src/Routes.jsx +++ b/src/Routes.jsx @@ -91,6 +91,7 @@ const UploadDelete = React.lazy(() => import("pages/Organize/Uploads/Delete")); // Admin Pages const GroupCreate = React.lazy(() => import("pages/Admin/Group/Create")); const DeleteUser = React.lazy(() => import("pages/Admin/Users/Delete")); +const ManageGroup = React.lazy(() => import("pages/Admin/Group/Manage")); const AddLicense = React.lazy(() => import("pages/Admin/License/Create")); const SelectLicense = React.lazy(() => import("pages/Admin/License/SelectLicense") @@ -284,6 +285,11 @@ const Routes = () => { path={routes.admin.group.create} component={GroupCreate} /> + { addGroupName: false, }); }; + +// Get all group members +export const getAllGroupMembersApi = (groupId) => { + const url = endpoints.admin.groups.getAllGroupMembers(groupId); + return sendRequest({ + url, + method: "GET", + headers: { + Authorization: getToken(), + }, + }); +}; + +// Remove Group Member +export const removeGroupMemberApi = (groupId, userId) => { + const url = endpoints.admin.groups.removeGroupMember(groupId, userId); + return sendRequest({ + url, + method: "DELETE", + headers: { + Authorization: getToken(), + }, + }); +}; + +// Change user permission +export const changeUserPermissionApi = (groupId, userId, permission) => { + const url = endpoints.admin.groups.changeUserPermission(groupId, userId); + return sendRequest({ + url, + method: "PUT", + headers: { + Authorization: getToken(), + }, + body: { + perm: permission, + }, + }); +}; diff --git a/src/api/groups.test.js b/src/api/groups.test.js index 6074be0ab..cfb5f3462 100644 --- a/src/api/groups.test.js +++ b/src/api/groups.test.js @@ -15,7 +15,12 @@ import sendRequest from "api/sendRequest"; import endpoints from "constants/endpoints"; -import { createGroupApi, getAllGroupsApi } from "api/groups"; +import { + changeUserPermissionApi, + createGroupApi, + getAllGroupMembersApi, + getAllGroupsApi, removeGroupMemberApi, +} from "api/groups"; import { getToken } from "shared/authHelper"; jest.mock("api/sendRequest"); @@ -56,4 +61,63 @@ describe("groups", () => { }) ); }); + + test("removeGroupMemberApi", () => { + const groupId = 2; + const userId = 1; + const url = endpoints.admin.groups.removeGroupMember(groupId, userId); + sendRequest.mockImplementation(() => true); + + expect(removeGroupMemberApi(groupId, userId)).toBe(sendRequest({})); + expect(sendRequest).toHaveBeenCalledWith( + expect.objectContaining({ + url, + method: "DELETE", + headers: { + Authorization: getToken(), + }, + }) + ); + }); + + test("getAllGroupMembersApi", () => { + const groupId = 1; + const url = endpoints.admin.groups.getAllGroupMembers(groupId); + sendRequest.mockImplementation(() => true); + + expect(getAllGroupMembersApi(groupId)).toBe(sendRequest({})); + expect(sendRequest).toHaveBeenCalledWith( + expect.objectContaining({ + url, + method: "GET", + headers: { + Authorization: getToken(), + }, + }) + ); + }); + + test("changeUserPermissionApi", () => { + const groupId = 1; + const userId = 1; + const permission = 2; + const url = endpoints.admin.groups.changeUserPermission(groupId, userId); + sendRequest.mockImplementation(() => true); + + expect(changeUserPermissionApi(groupId, userId, permission)).toBe( + sendRequest({}) + ); + expect(sendRequest).toHaveBeenCalledWith( + expect.objectContaining({ + url, + method: "PUT", + headers: { + Authorization: getToken(), + }, + body: { + perm: permission, + }, + }) + ); + }); }); diff --git a/src/components/Admin/ChangePermission.jsx b/src/components/Admin/ChangePermission.jsx new file mode 100644 index 000000000..2fac252c9 --- /dev/null +++ b/src/components/Admin/ChangePermission.jsx @@ -0,0 +1,103 @@ +/* + Copyright (C) 2022 Samuel Dushimimana (dushsam100@gmail.com) + + SPDX-License-Identifier: GPL-2.0 + + This program is free software; you can redistribute it and/or + modify it under the terms of the GNU General Public License + version 2 as published by the Free Software Foundation. + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along + with this program; if not, write to the Free Software Foundation, Inc., + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +*/ + +import React, { useEffect, useState } from "react"; + +import { InputContainer } from "components/Widgets"; + +// Required functions for calling APIs +import { changeUserPermission, removeGroupMember } from "services/groups"; + +import PropTypes from "prop-types"; + +// Required constants +import { userPermissions } from "constants/constants"; + +const ChangePermissionContainer = ({ + perm, + setShowMessage, + setMessage, + currGroup, + user, + handleFetchGroupMembers, +}) => { + const [selectedPerm, setSelectedPerm] = useState(perm); + + useEffect(() => { + setSelectedPerm(perm); + }, [perm]); + + const handleSetNewPermission = async (newPerm) => { + setSelectedPerm(newPerm); + // eslint-disable-next-line no-console + try { + let res; + if (parseInt(newPerm, 10) === -1) { + // eslint-disable-next-line no-console + console.log(`HERE ID ${newPerm}`); + res = await removeGroupMember(currGroup, user.id); + } else { + res = await changeUserPermission(currGroup, user.id, newPerm); + } + + setShowMessage(true); + setMessage({ + type: "success", + text: res.message, + }); + + handleFetchGroupMembers(currGroup); + } catch (e) { + setMessage({ + type: "danger", + text: e.message, + }); + } finally { + setTimeout(() => { + setShowMessage(false); + }, [3000]); + } + }; + return ( + + {user.name} + + handleSetNewPermission(e.target.value)} + /> + + + ); +}; + +ChangePermissionContainer.propTypes = { + perm: PropTypes.number, + setMessage: PropTypes.func, + currGroup: PropTypes.number, + user: PropTypes.node, + handleFetchGroupMembers: PropTypes.func, + setShowMessage: PropTypes.func, +}; + +export default ChangePermissionContainer; diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index b1c310d0a..5236a4c42 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -255,9 +255,9 @@ const Header = () => { - Delete Group + Manage Group Users diff --git a/src/components/Widgets/Input/index.jsx b/src/components/Widgets/Input/index.jsx index e1a404435..60fbd6b50 100644 --- a/src/components/Widgets/Input/index.jsx +++ b/src/components/Widgets/Input/index.jsx @@ -26,6 +26,7 @@ const InputContainer = ({ id, className, onChange, + defaultValue = null, children, checked = false, placeholder = null, @@ -70,6 +71,7 @@ const InputContainer = ({ className ? `mr-2 form-control ${className}` : `mr-2 form-control` } value={value} + defaultValue={defaultValue} onChange={onChange} multiple={multiple && multiple} size={multiple ? "15" : ""} @@ -125,6 +127,7 @@ InputContainer.propTypes = { onChange: PropTypes.func, checked: PropTypes.bool, disabled: PropTypes.bool, + defaultValue: PropTypes.string, children: PropTypes.node, options: PropTypes.arrayOf( PropTypes.shape({ diff --git a/src/constants/constants.js b/src/constants/constants.js index 857b325f9..47fb01b07 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -260,3 +260,23 @@ export const initialMantainanceFields = { rmvRepoOldFiles1: false, rmvRepoOldFiles2: false, }; + +// eslint-disable-next-line camelcase +export const userPermissions = [ + { + id: -1, + name: "None", + }, + { + id: 0, + name: "User", + }, + { + id: 1, + name: "Admin", + }, + { + id: 2, + name: "Advisor", + }, +]; diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index ef4986113..7aeb77120 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -71,6 +71,11 @@ const endpoints = { groups: { create: () => `${apiUrl}/groups`, getAll: () => `${apiUrl}/groups`, + getAllGroupMembers: (groupId) => `${apiUrl}/groups/${groupId}/members`, + changeUserPermission: (groupId, userId) => + `${apiUrl}/groups/${groupId}/user/${userId}`, + removeGroupMember: (groupId, userId) => + `${apiUrl}/groups/${groupId}/user/${userId}`, }, }, license: { diff --git a/src/constants/routes.js b/src/constants/routes.js index 358782b2b..5643df79c 100644 --- a/src/constants/routes.js +++ b/src/constants/routes.js @@ -67,6 +67,7 @@ const routes = { group: { create: "/admin/group/create", delete: "/admin/group/delete", + manageGroup: "/admin/group/manage", }, users: { delete: "/admin/users/delete", diff --git a/src/pages/Admin/Group/Manage/index.jsx b/src/pages/Admin/Group/Manage/index.jsx new file mode 100644 index 000000000..226c28df4 --- /dev/null +++ b/src/pages/Admin/Group/Manage/index.jsx @@ -0,0 +1,179 @@ +/* + Copyright (C) 2022 Samuel Dushimimana (dushsam100@gmail.com) + + SPDX-License-Identifier: GPL-2.0 + + This program is free software; you can redistribute it and/or + modify it under the terms of the GNU General Public License + version 2 as published by the Free Software Foundation. + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along + with this program; if not, write to the Free Software Foundation, Inc., + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +*/ + +import React, { useEffect, useState } from "react"; + +// Title +import Title from "components/Title"; + +// Widgets +import { Alert, InputContainer } from "components/Widgets"; + +// Required functions for calling APIs +import { fetchAllGroupMembers, fetchAllGroups } from "services/groups"; + +// Required page components +import ChangePermissionContainer from "components/Admin/ChangePermission"; +import { getAllUsers } from "../../../../services/users"; + +const ManageGroup = () => { + const initialMessage = { + type: "success", + text: "", + }; + + const [currGroup, setCurrentGroup] = useState(null); + const [allUsers, setAllUsers] = useState([]); + // const [groupMembers, setGroupMembers] = useState([]); + const [groups, setGroups] = useState([]); + + const [showMessage, setShowMessage] = useState(false); + const [message, setMessage] = useState(initialMessage); + + const handleSetAllUsers = async (groupId) => { + try { + const members = await fetchAllGroupMembers(groupId); + const users = await getAllUsers(); + // setGroupMembers(members); + for (let i = 0; i < users.length; i++) { + users[i].isMember = false; + users[i].group_perm = -1; + for (let j = 0; j < members.length; j++) { + if (users[i].id === members[j].user.id) { + users[i].isMember = true; + users[i].group_perm = members[j].group_perm; + break; + } + } + } + + // eslint-disable-next-line no-console + console.log("altered users ", users); + // eslint-disable-next-line no-console + console.log("altered members ", members); + setAllUsers(users); + } catch (e) { + setMessage({ + type: "danger", + text: e.message, + }); + } + }; + + useEffect(async () => { + try { + const res = await fetchAllGroups(); + setCurrentGroup(res[0].id); + setGroups(res); + await handleSetAllUsers(res[0].id); + } catch (e) { + setMessage({ + type: "danger", + text: e.message, + }); + } + }, []); + + const handleFetchGroupMembers = async (groupId) => { + try { + // const res = await fetchAllGroupMembers(groupId); + await handleSetAllUsers(groupId); + // setGroupMembers(res); + } catch (error) { + setMessage({ + type: "danger", + text: error.message, + }); + } + }; + + const handleGroupChange = async (e) => { + setCurrentGroup(e.target.value); + await handleSetAllUsers(e.target.value); + // await handleFetchGroupMembers(e.target.value); + }; + + return ( + <> + + <div className="main-container my-3"> + {showMessage && ( + <Alert + type={message.type} + setShow={setShowMessage} + message={message.text} + /> + )} + <h1 className="font-size-main-heading">Manage Group Users</h1> + <br /> + <div className="row"> + <div className="col-12 col-lg-8"> + <form> + <InputContainer + type="select" + name="name" + options={groups} + id="select-tag" + property="name" + onChange={(e) => handleGroupChange(e)} + value={currGroup} + > + Select group to manage: + </InputContainer> + </form> + + <table className="table table-striped table-bordered rounded mt-5"> + <thead className="bg-dark text-light font-weight-bold"> + <tr> + <th>User</th> + <th>Permission</th> + </tr> + </thead> + <tbody> + {allUsers?.map((user) => ( + <ChangePermissionContainer + currGroup={currGroup} + user={user} + handleFetchGroupMembers={handleFetchGroupMembers} + perm={user.group_perm} + setShowMessage={setShowMessage} + setMessage={setMessage} + key={user.id} + /> + ))} + </tbody> + </table> + </div> + <div className="col-10 mt-4"> + <p> + All user permissions take place immediately when a value is + changed. There is no submit button. Add new users on the last + line. + </p> + <p className="font-weight-bold"> + Note: By removing users, you may loose access to uploads, that are + uploaded by them. + </p> + </div> + </div> + </div> + </> + ); +}; + +export default ManageGroup; diff --git a/src/services/groups.js b/src/services/groups.js index ff91fd019..171e53264 100644 --- a/src/services/groups.js +++ b/src/services/groups.js @@ -16,7 +16,13 @@ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { getAllGroupsApi, createGroupApi } from "api/groups"; +import { + getAllGroupsApi, + createGroupApi, + getAllGroupMembersApi, + changeUserPermissionApi, + removeGroupMemberApi, +} from "api/groups"; import { setLocalStorage, getLocalStorage } from "shared/storageHelper"; // Fetching all the groups @@ -37,3 +43,24 @@ export const createGroup = (name) => { return res; }); }; + +// Get all group members +export const fetchAllGroupMembers = (groupId) => { + return getAllGroupMembersApi(groupId).then((res) => { + return res; + }); +}; + +// Change user permission +export const changeUserPermission = (groupId, userId, permission) => { + return changeUserPermissionApi(groupId, userId, permission).then((res) => { + return res; + }); +}; + +// Remove group member +export const removeGroupMember = (groupId, userId) => { + return removeGroupMemberApi(groupId, userId).then((res) => { + return res; + }); +};