147 lines
4.0 KiB
JavaScript
147 lines
4.0 KiB
JavaScript
import { createMemo, createResource, createSignal, onMount } from "solid-js";
|
|
import List from "../../components/list";
|
|
import RemotesService from "../../services/remotes-service";
|
|
import CreateRemoteModal from "../../modals/create-remote-modal";
|
|
import DeleteRemoteModal from "../../modals/delete-remote-modal";
|
|
import FileUtils from "../../tools/file-utils";
|
|
import Serializer from "../../data/serializer";
|
|
import RemoteService from "../../services/remotes-service";
|
|
import EditRemoteModal from "../../modals/edit-remote-modal";
|
|
|
|
function RemotesList(props) {
|
|
const [remotes, { refetch: refetchRemotes }] = createResource(
|
|
RemotesService.getRemotes
|
|
);
|
|
const [selectedRemotes, setSelectedRemotes] = createSignal([]);
|
|
const canExport = createMemo(() => selectedRemotes().length > 0);
|
|
|
|
onMount(() => {
|
|
refetchRemotes();
|
|
});
|
|
|
|
CreateRemoteModal.onRemoteCreated(() => {
|
|
refetchRemotes();
|
|
});
|
|
|
|
DeleteRemoteModal.onRemoteDeleted(() => {
|
|
refetchRemotes();
|
|
});
|
|
|
|
EditRemoteModal.onRemoteEdited(() => {
|
|
refetchRemotes();
|
|
});
|
|
|
|
function handleNewRemote() {
|
|
CreateRemoteModal.Handler.show();
|
|
}
|
|
|
|
function handleEditRemote(remote) {
|
|
EditRemoteModal.setRemoteId(remote.getId());
|
|
EditRemoteModal.Handler.show();
|
|
}
|
|
|
|
function handleDeleteRemote(remote) {
|
|
DeleteRemoteModal.setRemote(remote);
|
|
DeleteRemoteModal.Handler.show();
|
|
}
|
|
|
|
function handleListItemsSelect(items) {
|
|
setSelectedRemotes(items.map((item) => item.remote));
|
|
}
|
|
|
|
async function handleExport() {
|
|
let remotes = await Promise.all(
|
|
selectedRemotes().map((remote) => RemoteService.getRemote(remote.getId()))
|
|
);
|
|
let files = remotes.map((remote) =>
|
|
FileUtils.createJsonFile(
|
|
Serializer.serializeRemote(remote),
|
|
`${remote.getTitle()}.remote.json`
|
|
)
|
|
);
|
|
if (files.length >= 1) {
|
|
FileUtils.downloadFile(files[0]);
|
|
}
|
|
}
|
|
|
|
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"
|
|
disabled={!canExport()}
|
|
onClick={handleExport}
|
|
>
|
|
<i class="bi bi-box-arrow-up me-2"></i>
|
|
Export
|
|
</button>
|
|
<button class="btn btn-dark me-2 mb-3" onClick={handleNewRemote}>
|
|
<i class="bi bi-plus-square me-2"></i>
|
|
New
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<List
|
|
class={"flex-fill"}
|
|
columns={[
|
|
{
|
|
id: "id",
|
|
name: "id",
|
|
width: 6,
|
|
},
|
|
{
|
|
id: "title",
|
|
name: "Title",
|
|
},
|
|
{
|
|
id: "options",
|
|
name: "",
|
|
width: 6,
|
|
},
|
|
]}
|
|
onListItemClick={() => {}}
|
|
onListItemsSelect={handleListItemsSelect}
|
|
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();
|
|
handleEditRemote(remote);
|
|
}}
|
|
>
|
|
<i class="bi bi-pencil-fill"></i>
|
|
</button>
|
|
<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;
|