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