87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import { createResource, onMount } from "solid-js";
|
|
import List from "../../components/list";
|
|
import RemotesService from "../../services/remotes-service";
|
|
import CreateRemoteModal from "../../modals/create-remote-modal";
|
|
|
|
function RemotesList(props) {
|
|
const [remotes, { refetch: refetchRemotes }] = createResource(
|
|
RemotesService.getRemotes
|
|
);
|
|
|
|
onMount(() => {
|
|
refetchRemotes();
|
|
});
|
|
|
|
CreateRemoteModal.onRemoteCreated(() => {
|
|
refetchRemotes();
|
|
});
|
|
|
|
function handleNewRemote() {
|
|
CreateRemoteModal.Handler.show();
|
|
}
|
|
|
|
function handleDeleteRemote(remote) {}
|
|
|
|
return (
|
|
<>
|
|
<div class="d-flex flex-row">
|
|
<div class="d-flex flex-row flex-fill">
|
|
{props.navigation ? props.navigation : null}
|
|
</div>
|
|
<div class="d-flex flex-row justify-content-end flex-fill">
|
|
<button class="btn btn-dark me-2 mb-3" onClick={handleNewRemote}>
|
|
<i class="bi bi-plus-square me-2"></i>
|
|
New Remote
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<List
|
|
class={"flex-fill"}
|
|
columns={[
|
|
{
|
|
id: "id",
|
|
name: "id",
|
|
width: 6,
|
|
},
|
|
{
|
|
id: "title",
|
|
name: "Title",
|
|
},
|
|
{
|
|
id: "options",
|
|
name: "",
|
|
width: 4,
|
|
},
|
|
]}
|
|
onListItemClick={() => {}}
|
|
items={(remotes() || []).map((remote) => ({
|
|
id: {
|
|
html: <span class="font-monospace">{remote.getId()}</span>,
|
|
},
|
|
title: {
|
|
text: remote.getTitle(),
|
|
},
|
|
options: {
|
|
html: (
|
|
<>
|
|
<button
|
|
class="btn btn-sm btn-outline-secondary me-2"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
handleDeleteRemote(remote);
|
|
}}
|
|
>
|
|
<i class="bi bi-trash-fill"></i>
|
|
</button>
|
|
</>
|
|
),
|
|
},
|
|
remote,
|
|
}))}
|
|
></List>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default RemotesList;
|