111 lines
2.7 KiB
JavaScript
111 lines
2.7 KiB
JavaScript
import { createResource, onMount } from "solid-js";
|
|
import List from "../../components/list";
|
|
import RemotesService from "../../services/remotes-service";
|
|
import CreateCommandModal from "../../modals/create-command-modal";
|
|
import DeleteCommandModal from "../../modals/delete-command-modal";
|
|
|
|
function CommandsList(props) {
|
|
const [commands, { refetch: refetchCommands }] = createResource(
|
|
RemotesService.getCommands
|
|
);
|
|
|
|
onMount(() => {
|
|
refetchCommands();
|
|
});
|
|
|
|
CreateCommandModal.onCommandCreated(() => {
|
|
refetchCommands();
|
|
});
|
|
|
|
DeleteCommandModal.onCommandDeleted(() => {
|
|
refetchCommands();
|
|
});
|
|
|
|
function handleNewCommand() {
|
|
refetchCommands();
|
|
CreateCommandModal.Handler.show();
|
|
}
|
|
|
|
function handleDeleteCommand(command) {
|
|
DeleteCommandModal.setCommand(command);
|
|
DeleteCommandModal.Handler.show();
|
|
}
|
|
|
|
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={handleNewCommand}>
|
|
<i class="bi bi-plus-square me-2"></i>
|
|
New Command
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<List
|
|
class={"flex-fill"}
|
|
columns={[
|
|
{
|
|
id: "id",
|
|
name: "id",
|
|
width: 6,
|
|
},
|
|
{
|
|
id: "title",
|
|
name: "Title",
|
|
},
|
|
{
|
|
id: "protocol",
|
|
name: "Protocol",
|
|
width: 10,
|
|
},
|
|
{
|
|
id: "type",
|
|
name: "Type",
|
|
width: 6,
|
|
},
|
|
{
|
|
id: "options",
|
|
name: "",
|
|
width: 4,
|
|
},
|
|
]}
|
|
items={(commands() || []).map((command) => ({
|
|
id: {
|
|
html: <span class="font-monospace">{command.getId()}</span>,
|
|
},
|
|
title: {
|
|
text: command.getTitle(),
|
|
},
|
|
protocol: {
|
|
text: command.getProtocol(),
|
|
},
|
|
type: {
|
|
text: command.getCommandType(),
|
|
},
|
|
options: {
|
|
html: (
|
|
<>
|
|
<button
|
|
class="btn btn-sm btn-outline-secondary me-2"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
handleDeleteCommand(command);
|
|
}}
|
|
>
|
|
<i class="bi bi-trash-fill"></i>
|
|
</button>
|
|
</>
|
|
),
|
|
},
|
|
command,
|
|
}))}
|
|
></List>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default CommandsList;
|