role selector without creation

src/pages/playlists/playlist-view-editor.jsx

@@ -1,7 +1,8 @@
-import { Button, TextInput, Group } from '@mantine/core';
+import { Button, TextInput, Group, Stack } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
 import { useState } from 'react';
 import setNotification from '../errors/error-notification';
+import RoleSelector from './role-selector';
 
 const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
     const handleClose = (playlist) => {
@@ -10,8 +11,9 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
     };
 
     const [isLoading, setIsLoading] = useState(false);
-    console.log(item);
-    // todo permissions
+    const [rolesView, setRolesView] = useState([]);
+    const [rolesEdit, setRolesEdit] = useState([]);
+
     const form = useForm({
         initialValues: {
             name: item?.name ?? '',
@@ -28,15 +30,17 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
             setIsLoading(true);
             if (item) {
                 await APICall(item?.id, { name: form.values.name });
+                // todo permissions
                 item.name = form.values.name;
                 handleClose(item);
             } else {
-                const res = await APICall({ name: form.values.name });
+                const view = rolesView.map((roleId) => parseInt(roleId));
+                const edit = rolesEdit.map((roleId) => parseInt(roleId));
+                const res = await APICall({ name: form.values.name, view: view, edit: edit });
                 handleClose(res.data);
             }
             setIsLoading(false);
         } catch (err) {
-            console.log(err)
             setIsLoading(false);
             setNotification(true, err);
         }
@@ -45,6 +49,10 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
     return (
         <form onSubmit={handleSubmit}>
             <TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} mb="sm" />
+            <Stack>
+                <RoleSelector label="View Permission" value={rolesView} setValue={setRolesView} />
+                <RoleSelector label="Edit Permission" value={rolesEdit} setValue={setRolesEdit} />
+            </Stack>
             <Group position="right" mt="md">
                 <Button variant="light" color="red" onClick={handleClose}>
                     Cancel

src/pages/playlists/role-selector.jsx

@@ -0,0 +1,60 @@
+import { MultiSelect } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import setNotification from '../errors/error-notification';
+import API from '../../services/api';
+
+const RoleSelector = ({ label, value, setValue }) => {
+    const [data, setData] = useState([]);
+    const [search, setSearch] = useState();
+    useEffect(() => {
+        API.roles
+            .search(search)
+            .then((res) => {
+                if (res.status === 200) {
+                    for (let i = 0; i < res.data.length; i++) {
+                        const role = res.data[i];
+                        if (!data.find((r) => r.id === role.id)) {
+                            role.label = role.name;
+                            role.value = role.id.toString();
+                            setData((prev) => [...prev, role]);
+                        }
+                    }
+                } else {
+                    setNotification(true, res);
+                }
+            })
+            .catch((err) => {
+                setNotification(true, err);
+            });
+    }, [search]);
+
+    // useEffect(() => {
+    //     setData([
+    //         { value: 'React', label: 'React' },
+    //         { value: 'Angular', label: 'Angular' },
+    //         { value: 'Svelte', label: 'Svelte' },
+    //     ]);
+    // }, []);
+
+    // creatable
+    // getCreateLabel={(query) => `+ Create ${query}`}
+    // onCreate={(query) => {
+    //   const item = { value: query, label: query };
+    //   setData((current) => [...current, item]);
+    //   return item;
+    // }}
+    return (
+        <MultiSelect
+            label={label}
+            data={data}
+            searchable
+            searchValue={search}
+            onSearchChange={setSearch}
+            value={value}
+            onChange={setValue}
+            maxDropdownHeight={160}
+        />
+    );
+};
+
+export default RoleSelector;

src/pages/users/index.jsx

@@ -79,7 +79,7 @@ const Users = () => {
                     setItemToUse(item);
                     toggleModalView();
                 }}
-                deleteUser={(id) => setUsers(users.filter((item) => item.id != id))}
+                deleteUser={(id) => setUsers(users.filter((item) => item.id !== id))}
                 updateHandler={toggleModalUpdate}
             />
             <ModalUserEditor

src/services/api.js

@@ -43,6 +43,13 @@ const API = {
         list(data) {
             return caller().get('/roles', data);
         },
+        search(search) {
+            if (search === "") {
+                return API.roles.list()
+            } else {
+                return caller().get(`/roles/${search}`);
+            }
+        },
     },
     users: {
         create(data) {