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