|
| 1 | +/* |
| 2 | + Copyright (C) 2022 Samuel Dushimimana ([email protected]) |
| 3 | +
|
| 4 | + SPDX-License-Identifier: GPL-2.0 |
| 5 | +
|
| 6 | + This program is free software; you can redistribute it and/or |
| 7 | + modify it under the terms of the GNU General Public License |
| 8 | + version 2 as published by the Free Software Foundation. |
| 9 | + This program is distributed in the hope that it will be useful, |
| 10 | + but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 11 | + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 12 | + GNU General Public License for more details. |
| 13 | +
|
| 14 | + You should have received a copy of the GNU General Public License along |
| 15 | + with this program; if not, write to the Free Software Foundation, Inc., |
| 16 | + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
| 17 | +*/ |
| 18 | + |
| 19 | +import React, { useEffect, useState } from "react"; |
| 20 | +// import messages from "constants/messages"; |
| 21 | + |
| 22 | +// Title |
| 23 | +import Title from "components/Title"; |
| 24 | + |
| 25 | +// Widgets |
| 26 | +import { Alert, InputContainer } from "components/Widgets"; |
| 27 | + |
| 28 | +// Required functions for calling APIs |
| 29 | +import { |
| 30 | + changeUserPermission, |
| 31 | + fetchAllGroupMembers, |
| 32 | + fetchAllGroups, |
| 33 | +} from "services/groups"; |
| 34 | + |
| 35 | +import PropTypes from "prop-types"; |
| 36 | +import { userPermissions } from "../../../../constants/constants"; |
| 37 | + |
| 38 | +const ChangePermissionContainer = ({ |
| 39 | + perm, |
| 40 | + setShowMessage, |
| 41 | + setMessage, |
| 42 | + currGroup, |
| 43 | + member, |
| 44 | + handleFetchGroupMembers, |
| 45 | +}) => { |
| 46 | + const [selectedPerm, setSelectedPerm] = useState(perm); |
| 47 | + |
| 48 | + useEffect(() => { |
| 49 | + setSelectedPerm(perm); |
| 50 | + }, [perm]); |
| 51 | + |
| 52 | + const handleSetNewPermission = async (newPerm) => { |
| 53 | + setSelectedPerm(newPerm); |
| 54 | + try { |
| 55 | + const res = await changeUserPermission( |
| 56 | + currGroup, |
| 57 | + member?.user.id, |
| 58 | + newPerm |
| 59 | + ); |
| 60 | + setShowMessage(true); |
| 61 | + setMessage({ |
| 62 | + type: "success", |
| 63 | + text: res.message, |
| 64 | + }); |
| 65 | + handleFetchGroupMembers(currGroup); |
| 66 | + } catch (e) { |
| 67 | + setMessage({ |
| 68 | + type: "danger", |
| 69 | + text: e.message, |
| 70 | + }); |
| 71 | + } finally { |
| 72 | + setTimeout(() => { |
| 73 | + setShowMessage(false); |
| 74 | + }, [3000]); |
| 75 | + } |
| 76 | + }; |
| 77 | + return ( |
| 78 | + <tr> |
| 79 | + <td>{member?.user.name}</td> |
| 80 | + <td> |
| 81 | + <InputContainer |
| 82 | + type="select" |
| 83 | + name="name" |
| 84 | + options={userPermissions} |
| 85 | + id="select-tag" |
| 86 | + value={selectedPerm} |
| 87 | + property="name" |
| 88 | + onChange={(e) => handleSetNewPermission(e.target.value)} |
| 89 | + /> |
| 90 | + </td> |
| 91 | + </tr> |
| 92 | + ); |
| 93 | +}; |
| 94 | + |
| 95 | +ChangePermissionContainer.propTypes = { |
| 96 | + perm: PropTypes.number, |
| 97 | + setMessage: PropTypes.func, |
| 98 | + currGroup: PropTypes.number, |
| 99 | + member: PropTypes.node, |
| 100 | + handleFetchGroupMembers: PropTypes.func, |
| 101 | + setShowMessage: PropTypes.func, |
| 102 | +}; |
| 103 | + |
| 104 | +const GroupCreate = () => { |
| 105 | + const initialMessage = { |
| 106 | + type: "success", |
| 107 | + text: "", |
| 108 | + }; |
| 109 | + |
| 110 | + const [currGroup, setCurrentGroup] = useState(null); |
| 111 | + const [groupMembers, setGroupMembers] = useState([]); |
| 112 | + const [groups, setGroups] = useState([]); |
| 113 | + |
| 114 | + const [showMessage, setShowMessage] = useState(false); |
| 115 | + const [message, setMessage] = useState(initialMessage); |
| 116 | + |
| 117 | + useEffect(async () => { |
| 118 | + try { |
| 119 | + const res = await fetchAllGroups(); |
| 120 | + const resGrpMembers = await fetchAllGroupMembers(res[0].id); |
| 121 | + setCurrentGroup(res[0].id); |
| 122 | + setGroups(res); |
| 123 | + setGroupMembers(resGrpMembers); |
| 124 | + } catch (e) { |
| 125 | + setMessage({ |
| 126 | + type: "danger", |
| 127 | + text: e.message, |
| 128 | + }); |
| 129 | + } |
| 130 | + }, []); |
| 131 | + |
| 132 | + const handleFetchGroupMembers = async (groupId) => { |
| 133 | + try { |
| 134 | + const res = await fetchAllGroupMembers(groupId); |
| 135 | + setGroupMembers(res); |
| 136 | + } catch (error) { |
| 137 | + setMessage({ |
| 138 | + type: "danger", |
| 139 | + text: error.message, |
| 140 | + }); |
| 141 | + } |
| 142 | + }; |
| 143 | + |
| 144 | + const handleGroupChange = async (e) => { |
| 145 | + setCurrentGroup(e.target.value); |
| 146 | + await handleFetchGroupMembers(e.target.value); |
| 147 | + }; |
| 148 | + |
| 149 | + return ( |
| 150 | + <> |
| 151 | + <Title title="Manage Group Users" /> |
| 152 | + <div className="main-container my-3"> |
| 153 | + {showMessage && ( |
| 154 | + <Alert |
| 155 | + type={message.type} |
| 156 | + setShow={setShowMessage} |
| 157 | + message={message.text} |
| 158 | + /> |
| 159 | + )} |
| 160 | + <h1 className="font-size-main-heading">Manage Group Users</h1> |
| 161 | + <br /> |
| 162 | + <div className="row"> |
| 163 | + <div className="col-12 col-lg-8"> |
| 164 | + <form> |
| 165 | + <InputContainer |
| 166 | + type="select" |
| 167 | + name="name" |
| 168 | + options={groups} |
| 169 | + id="select-tag" |
| 170 | + property="name" |
| 171 | + onChange={(e) => handleGroupChange(e)} |
| 172 | + value={currGroup} |
| 173 | + > |
| 174 | + Select group to manage: |
| 175 | + </InputContainer> |
| 176 | + </form> |
| 177 | + |
| 178 | + <table className="table table-striped table-bordered rounded mt-5"> |
| 179 | + <thead className="bg-dark text-light font-weight-bold"> |
| 180 | + <tr> |
| 181 | + <th>User</th> |
| 182 | + <th>Permission</th> |
| 183 | + </tr> |
| 184 | + </thead> |
| 185 | + <tbody> |
| 186 | + {groupMembers?.map((member) => ( |
| 187 | + <ChangePermissionContainer |
| 188 | + currGroup={currGroup} |
| 189 | + member={member} |
| 190 | + handleFetchGroupMembers={handleFetchGroupMembers} |
| 191 | + perm={member.group_perm} |
| 192 | + setShowMessage={setShowMessage} |
| 193 | + setMessage={setMessage} |
| 194 | + key={member.user.id} |
| 195 | + /> |
| 196 | + ))} |
| 197 | + </tbody> |
| 198 | + </table> |
| 199 | + </div> |
| 200 | + </div> |
| 201 | + </div> |
| 202 | + </> |
| 203 | + ); |
| 204 | +}; |
| 205 | + |
| 206 | +export default GroupCreate; |
0 commit comments