diff --git a/package.json b/package.json index 2a67d03..ec90d5f 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@mantine/ds": "^6.0.8", "@mantine/form": "^6.0.6", "@mantine/hooks": "^6.0.6", + "@mantine/modals": "^6.0.18", "@mantine/notifications": "^6.0.8", "@tabler/icons-react": "^2.16.0", "@testing-library/jest-dom": "^5.16.5", diff --git a/src/pages/playlist/content.jsx b/src/pages/playlist/content.jsx index abdc81e..2c96c15 100644 --- a/src/pages/playlist/content.jsx +++ b/src/pages/playlist/content.jsx @@ -111,7 +111,7 @@ const Content = ({ form, playlistId }) => { }; const handleDelete = (index) => { - API.playlistRemoveFile(playlistId, { file_id: form.values.files[index].id }) + API.playlistRemoveFile(playlistId, { file_id: form.values.files[index].pfid }) .then((res) => { if (res.status === 200) { form.removeListItem('files', index); diff --git a/src/pages/users/index.jsx b/src/pages/users/index.jsx index 479d727..d1afa68 100644 --- a/src/pages/users/index.jsx +++ b/src/pages/users/index.jsx @@ -2,21 +2,24 @@ import { useEffect, useState } from 'react'; import NavbarSignage from '../../components/navbar'; import API from '../../services/api'; import setNotification from '../errors/error-notification'; -import ModalUserEditor from './user-editor'; +import ModalUserEditor from './user-editor-modal'; import { Button } from '@mantine/core'; import GrantAccess, { Perm } from '../../tools/grant-access'; import UserTable from './users-table'; +import ModalUserView from './user-view-modal'; const Users = () => { const [showCreate, setShowCreate] = useState(false); const [showUpdate, setShowUpdate] = useState(false); - const [itemToUpdate, setItemToUpdate] = useState(); + const [showView, setShowView] = useState(false); + const [itemToUse, setItemToUse] = useState(); const toggleModalCreate = () => setShowCreate(!showCreate); const toggleModalUpdate = () => setShowUpdate(!showUpdate); + const toggleModalView = () => setShowView(!showView); const [users, setUsers] = useState([]); const [roles, setRoles] = useState([]); - const [deleteLoading, setDeleteLoading] = useState(false); + useEffect(() => { API.listUsers() @@ -69,9 +72,13 @@ const Users = () => { { - setItemToUpdate(item); + setItemToUse(item); toggleModalUpdate(); }} + viewUser={(item) => { + setItemToUse(item); + toggleModalView(); + }} deleteUser={(id) => setUsers(users.filter((item) => item.id != id))} updateHandler={toggleModalUpdate} /> @@ -87,9 +94,10 @@ const Users = () => { handler={(item) => updateUser(item)} handlerClose={toggleModalUpdate} APICall={API.updateUser} - item={itemToUpdate} + item={itemToUse} name="Update" /> + ); }; diff --git a/src/pages/users/user-editor.jsx b/src/pages/users/user-editor-modal.jsx similarity index 100% rename from src/pages/users/user-editor.jsx rename to src/pages/users/user-editor-modal.jsx diff --git a/src/pages/users/user-view-modal.jsx b/src/pages/users/user-view-modal.jsx new file mode 100644 index 0000000..63a4398 --- /dev/null +++ b/src/pages/users/user-view-modal.jsx @@ -0,0 +1,52 @@ +import { Button, Group, Modal, Text } from '@mantine/core'; +import UserView from './user-view'; +import ModalUserEditor from './user-editor-modal'; +import { useEffect, useState } from 'react'; +import API from '../../services/api'; + +const ModalUserView = ({ opened, handler, ...props }) => { + const [showEdit, setShowEdit] = useState(false); + const toggleModalEdit = () => setShowEdit(!showEdit); + const [user, setUser] = useState(props.user); + + useEffect(() => { + setUser(props.user); + return () => {}; + }, [props.user]); + + return ( + <> + + + + + + + User view + + + + + + + + + + + + + setUser(item)} + handlerClose={toggleModalEdit} + APICall={API.updateUser} + item={user} + name="Update" + /> + + ); +}; + +export default ModalUserView; diff --git a/src/pages/users/user-view.jsx b/src/pages/users/user-view.jsx new file mode 100644 index 0000000..ae0eb48 --- /dev/null +++ b/src/pages/users/user-view.jsx @@ -0,0 +1,21 @@ +import { Paper, Stack, Checkbox, Text } from '@mantine/core'; +import { Perm, checkPerm } from '../../tools/grant-access'; + +const UserView = ({ user }) => { + return ( + + + {user?.login} + + + + + + + + + + ); +}; + +export default UserView; diff --git a/src/pages/users/users-table.jsx b/src/pages/users/users-table.jsx index 3cd7335..e17ad74 100644 --- a/src/pages/users/users-table.jsx +++ b/src/pages/users/users-table.jsx @@ -36,7 +36,7 @@ const Line = ({ user, ...props }) => { {user.login} - @@ -51,7 +51,13 @@ const Line = ({ user, ...props }) => { const UserTable = (props) => { const rows = props.data.map((user) => ( - + )); return ( diff --git a/yarn.lock b/yarn.lock index b21c4cd..08b67db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1789,6 +1789,13 @@ resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-6.0.17.tgz#dc942c87e6dcfa14a70e4e4a162c22eeb4ff3724" integrity sha512-7vf2w1NlzKlUynSuyI2DAIKoEOYKYC8k+tlSsk3BRdbzhbJAiWxcYzJy5seg5dFW1WIpKAZ0wiVdHXf/WRlRgg== +"@mantine/modals@^6.0.18": + version "6.0.18" + resolved "https://registry.yarnpkg.com/@mantine/modals/-/modals-6.0.18.tgz#1f52f3215c3b7b04e828acb5606f91fd2c558dde" + integrity sha512-iwO5NEVt3CXcofy8NEOHGYgFjuVb/yxVqNAGaLHM7b9FfHXfS/Mu+YijCHjk6/IHp2BgAGbKJx7PnKCQfz9Esw== + dependencies: + "@mantine/utils" "6.0.18" + "@mantine/notifications@^6.0.8": version "6.0.17" resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-6.0.17.tgz#719b89583b9350baa6502e8428e10c8491e553f9" @@ -1810,6 +1817,11 @@ resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.17.tgz#7d4a6c7686a3ee19a0ac248ef14780f00730837b" integrity sha512-U6SWV/asYE6NhiHx4ltmVZdQR3HwGVqJxVulhOylMcV1tX/P1LMQUCbGV2Oe4O9jbX4/YW5B/CBb4BbEhENQFQ== +"@mantine/utils@6.0.18": + version "6.0.18" + resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.18.tgz#da9ac8b13364277ad1a41b1ad5681fceebc89871" + integrity sha512-xvTnAUUHsdpsBm7OrcBueGEPdBwDm7wzUBsHweqSZMjT/HQOf4w4iirefNrFhMD2wNVetNL42kEngEBe6t63/w== + "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1": version "5.1.1-v1" resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"