playback-device-server/www/src/modules/settings/users-list.jsx

81 lines
2.3 KiB
JavaScript

import { createSignal, onMount } from "solid-js";
import List from "../list.jsx";
import UserService from "../../services/user-service.js";
import CreateUserModal from "../../modals/create-user-modal.jsx";
import DeleteUserModal from "../../modals/delete-user-modal.jsx";
import UserSettingsModal from "../../modals/user-settings-modal.jsx";
function UserList() {
const [users, setUsers] = createSignal([]);
onMount(() => {
updateUsers();
CreateUserModal.onUserCreated(() => updateUsers());
UserSettingsModal.onUserUpdated(() => updateUsers());
DeleteUserModal.onUserDeleted(() => updateUsers());
});
async function updateUsers() {
let users = await UserService.getUsers();
setUsers(users);
}
function handleShowUserSettings(user) {
UserSettingsModal.setUser(user);
UserSettingsModal.Handler.show();
}
function handleCreateUser() {
CreateUserModal.setUsers(users());
CreateUserModal.Handler.show();
}
function handleDeleteUser(user) {
DeleteUserModal.setUser(user);
DeleteUserModal.Handler.show();
}
return (
<>
<div class="d-flex flex-row justify-content-end">
<button class="btn btn-dark me-2 mb-3" onClick={handleCreateUser}>
<i class="bi bi-plus me-2"></i>
New User
</button>
</div>
<List
class="h-100"
columns={[
{ id: "username", name: "Username" },
{ id: "is_admin", name: "Admin", width: 10 },
{ id: "options", name: "Options", width: 10 },
]}
items={users().map((user) => ({
username: { text: user.getUsername() },
is_admin: { text: user.isAdmin() ? "Yes" : "No" },
options: {
html: (
<>
<button
class="btn btn-outline-secondary me-2"
onClick={() => handleShowUserSettings(user)}
>
<i class="bi bi-gear-fill"></i>
</button>
<button
class="btn btn-outline-secondary me-2"
onClick={() => handleDeleteUser(user)}
>
<i class="bi bi-trash-fill"></i>
</button>
</>
),
},
}))}
/>
</>
);
}
export default UserList;