1<script>
2  import { moveDocument } from "../api";
3  import { _ } from "../i18n";
4  import router from "../router";
5
6  import { basename } from "../lib/paths";
7  import { stratify } from "../lib/tree";
8
9  import AccountInput from "../entry-forms/AccountInput.svelte";
10  import ModalBase from "../modals/ModalBase.svelte";
11  import Accounts from "./Accounts.svelte";
12  import Table from "./Table.svelte";
13  import DocumentPreview from "./DocumentPreview.svelte";
14
15  /** @typedef {{account: string, filename: string, date: string}} Document */
16
17  /** @type {Document[]} */
18  export let data;
19
20  $: node = stratify(
21    new Set(data.map((e) => e.account)),
22    (s) => s,
23    (name) => ({ name })
24  );
25
26  /** @type {Document} */
27  let selected;
28  /** @type {{account: string, filename: string, newName: string} | null} */
29  let moving = null;
30
31  /**
32   * @param {Document} doc
33   */
34  function copyMoveable(doc) {
35    return {
36      account: doc.account,
37      filename: doc.filename,
38      newName: basename(doc.filename),
39    };
40  }
41
42  /**
43   * Rename the selected document with <F2>.
44   * @param {KeyboardEvent} ev
45   */
46  function keyup(ev) {
47    if (ev.key === "F2" && selected) {
48      moving = copyMoveable(selected);
49    }
50  }
51
52  /**
53   * Move a document to the account it is dropped on.
54   * @param {CustomEvent} ev
55   */
56  function drop(ev) {
57    moving = copyMoveable(ev.detail);
58  }
59
60  async function move() {
61    const moved =
62      moving &&
63      (await moveDocument(moving.filename, moving.account, moving.newName));
64    if (moved) {
65      moving = null;
66      router.reload();
67    }
68  }
69</script>
70
71<svelte:window on:keyup={keyup} />
72{#if moving}
73  <ModalBase
74    shown={true}
75    closeHandler={() => {
76      moving = null;
77    }}
78  >
79    <div>
80      <h3>{_("Move or rename document")}</h3>
81      <p><code>{moving.filename}</code></p>
82      <p>
83        <AccountInput bind:value={moving.account} />
84        <input size={40} bind:value={moving.newName} />
85        <button type="button" on:click={move}>{"Move"}</button>
86      </p>
87    </div>
88  </ModalBase>
89{/if}
90<div class="fixed-fullsize-container">
91  <Accounts {node} on:drop={drop} />
92  <div>
93    <Table bind:selected {data} />
94  </div>
95  {#if selected}
96    <DocumentPreview filename={selected.filename} />
97  {/if}
98</div>
99
100<style>
101  .fixed-fullsize-container {
102    display: grid;
103    grid-template-columns: 1fr 2fr 3fr;
104  }
105  .fixed-fullsize-container > :global(*) {
106    height: 100%;
107    overflow: auto;
108    resize: horizontal;
109  }
110  .fixed-fullsize-container > :global(* + *) {
111    border-left: thin solid var(--color-sidebar-border);
112  }
113</style>
114