Stian Aune
5 years ago
8 changed files with 290 additions and 45 deletions
-
6webui/src/App.js
-
40webui/src/Components/Group.jsx
-
20webui/src/Components/Modals/GroupAddModal.jsx
-
101webui/src/Components/Modals/GroupPropertiesModal.jsx
-
39webui/src/Components/Modals/LightPropertiesModal.jsx
-
84webui/src/Components/Modals/PermissionsModal.jsx
-
12webui/src/Helpers/groups.js
-
33webui/src/Hooks/auth.js
@ -0,0 +1,101 @@ |
|||||
|
import React, {useState} from "react"; |
||||
|
import useAuth from "../../Hooks/auth"; |
||||
|
import { |
||||
|
Button, |
||||
|
Col, |
||||
|
Form, |
||||
|
FormGroup, |
||||
|
Input, |
||||
|
InputGroup, |
||||
|
InputGroupAddon, |
||||
|
Label, |
||||
|
Modal, |
||||
|
ModalBody, |
||||
|
ModalFooter, |
||||
|
ModalHeader, |
||||
|
Row |
||||
|
} from "reactstrap"; |
||||
|
import PermissionsModal from "./PermissionsModal"; |
||||
|
|
||||
|
function GroupPropertiesModal({id, nValue, permissions, onClose}) { |
||||
|
const {users} = useAuth(); |
||||
|
const [name, setName] = useState(nValue); |
||||
|
const [permUserId, setPermUserId] = useState(null); |
||||
|
const [permModal, setPermModal] = useState(false); |
||||
|
|
||||
|
function permissionFor(userId) { |
||||
|
const perm = permissions.find(p => p.userId === userId); |
||||
|
|
||||
|
return typeof perm !== "undefined" |
||||
|
? perm |
||||
|
: null; |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Modal isOpen={true}> |
||||
|
<ModalHeader>Endre gruppe</ModalHeader> |
||||
|
<ModalBody style={{margin: "0 auto"}}> |
||||
|
<Form> |
||||
|
<FormGroup row> |
||||
|
<Label sm={3} for="text-name"> |
||||
|
Navn: |
||||
|
</Label> |
||||
|
<Col sm={9}> |
||||
|
<Input type="text" |
||||
|
id="text-name" |
||||
|
name="power" |
||||
|
value={name} |
||||
|
onChange={e => setName(e.target.value)}/> |
||||
|
</Col> |
||||
|
</FormGroup> |
||||
|
<FormGroup row> |
||||
|
<Label sm={3}> |
||||
|
Tilgang: |
||||
|
</Label> |
||||
|
<Col sm={9}> |
||||
|
{users.map(user => { |
||||
|
const permission = permissionFor(user.id); |
||||
|
const btnColor = permission !== null ? "secondary" : "success"; |
||||
|
const btnLabel = permission !== null ? "Endre" : "Opprett"; |
||||
|
|
||||
|
return ( |
||||
|
<Row> |
||||
|
<InputGroup className="mb-2"> |
||||
|
<Input className="permission" disabled value={user.name}/> |
||||
|
<InputGroupAddon addonType="prepend"> |
||||
|
<Button color={btnColor} onClick={() => { |
||||
|
setPermUserId(user.id); |
||||
|
setPermModal(true); |
||||
|
}}>{btnLabel}</Button> |
||||
|
</InputGroupAddon> |
||||
|
</InputGroup> |
||||
|
</Row> |
||||
|
) |
||||
|
})} |
||||
|
</Col> |
||||
|
</FormGroup> |
||||
|
</Form> |
||||
|
</ModalBody> |
||||
|
<ModalFooter> |
||||
|
<Button color="primary" |
||||
|
onClick={() => { |
||||
|
onClose(); |
||||
|
}} |
||||
|
> |
||||
|
Lagre |
||||
|
</Button> |
||||
|
{" "} |
||||
|
<Button color="secondary" onClick={onClose}>Avbryt</Button> |
||||
|
</ModalFooter> |
||||
|
{permModal && ( |
||||
|
<PermissionsModal permissions={permissionFor(permUserId)} |
||||
|
groupId={id} |
||||
|
userId={permUserId} |
||||
|
onClose={() => setPermModal(false)} |
||||
|
/> |
||||
|
)} |
||||
|
</Modal> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default GroupPropertiesModal; |
@ -0,0 +1,84 @@ |
|||||
|
import React, {useState} from "react"; |
||||
|
import {Button, CustomInput, FormGroup, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap"; |
||||
|
import {savePermissions} from "../../Helpers/groups"; |
||||
|
|
||||
|
function PermissionsModal({groupId, userId, permissions, onClose}) { |
||||
|
function getPermission(type) { |
||||
|
if (permissions === null || typeof permissions[type] === "undefined") { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
return permissions[type]; |
||||
|
} |
||||
|
|
||||
|
const [read, setRead] = useState(getPermission("read")); |
||||
|
const [write, setWrite] = useState(getPermission("write")); |
||||
|
const [create, setCreate] = useState(getPermission("create")); |
||||
|
const [remove, setRemove] = useState(getPermission("delete")); |
||||
|
const manage = getPermission("manage"); |
||||
|
|
||||
|
return ( |
||||
|
<Modal isOpen={true}> |
||||
|
<ModalHeader>Endre gruppe</ModalHeader> |
||||
|
<ModalBody style={{margin: "0 auto"}}> |
||||
|
<FormGroup className="perm-switch"> |
||||
|
<CustomInput type="switch" |
||||
|
id="switch-read" |
||||
|
name="read" |
||||
|
label="Les" |
||||
|
checked={read} |
||||
|
onChange={e => setRead(e.target.checked)}/> |
||||
|
</FormGroup> |
||||
|
<FormGroup className="perm-switch"> |
||||
|
<CustomInput type="switch" |
||||
|
id="switch-write" |
||||
|
name="write" |
||||
|
label="Skriv" |
||||
|
checked={write} |
||||
|
onChange={e => setWrite(e.target.checked)}/> |
||||
|
</FormGroup> |
||||
|
<FormGroup className="perm-switch"> |
||||
|
<CustomInput type="switch" |
||||
|
id="switch-create" |
||||
|
name="create" |
||||
|
label="Opprett" |
||||
|
checked={create} |
||||
|
onChange={e => setCreate(e.target.checked)}/> |
||||
|
</FormGroup> |
||||
|
<FormGroup className="perm-switch"> |
||||
|
<CustomInput type="switch" |
||||
|
id="switch-remove" |
||||
|
name="remove" |
||||
|
label="Slett" |
||||
|
checked={remove} |
||||
|
onChange={e => setRemove(e.target.checked)}/> |
||||
|
</FormGroup> |
||||
|
<FormGroup className="perm-switch"> |
||||
|
<CustomInput type="switch" |
||||
|
id="switch-manage" |
||||
|
name="manage" |
||||
|
label="Forvalte" |
||||
|
checked={manage} |
||||
|
disabled/> |
||||
|
</FormGroup> |
||||
|
</ModalBody> |
||||
|
<ModalFooter> |
||||
|
<Button color="primary" |
||||
|
onClick={() => { |
||||
|
savePermissions( |
||||
|
groupId, |
||||
|
userId, |
||||
|
{read, write, delete: remove, create}); |
||||
|
onClose(); |
||||
|
}} |
||||
|
> |
||||
|
Lagre |
||||
|
</Button> |
||||
|
{" "} |
||||
|
<Button color="secondary" onClick={onClose}>Avbryt</Button> |
||||
|
</ModalFooter> |
||||
|
</Modal> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default PermissionsModal; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue