Added a new folder button

closes #66

frontend/src/components/DirViewer.svelte

@@ -3,16 +3,36 @@
     const show_preview = writable<boolean>(false);
 </script>
 <script lang="ts">
-    import {Checkbox, Dropdown, DropdownItem, Spinner, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Tooltip} from 'flowbite-svelte';
+    import {
+        Button,
+        ButtonGroup,
+        Checkbox,
+        Dropdown,
+        DropdownItem,
+        Input,
+        InputAddon,
+        Modal,
+        Spinner,
+        Table,
+        TableBody,
+        TableBodyCell,
+        TableBodyRow,
+        TableHead,
+        TableHeadCell,
+        Tooltip
+    } from 'flowbite-svelte';
     import {filesize} from 'filesize';
-    import {Folder, FolderParent, DocumentBlank, CaretLeft} from '../icons';
-    import {api, download, token, rpc} from '../store';
+    import {Folder, FolderParent, DocumentBlank, CaretLeft, FolderAdd} from '../icons';
+    import {api, download, token, rpc, workingWrapperR, error_banner} from '../store';
     import LinkButton from './LinkButton.svelte';
     import DeleteModal from './DeleteModal.svelte';
     import A from './A.svelte';
+    import {createEventDispatcher} from 'svelte';
 
     export let node: api.Node;
 
+    const dispatch = createEventDispatcher<{reload_node: null}>();
+
     let selected: number[] = [];
     let nodes: api.Node[], dirs: api.Node[], files: api.Node[], previews: {[key: number]: string|null} = {};
     let total_size: number;
@@ -29,6 +49,21 @@
         }
     }
 
+
+    let show_new_folder = false, new_folder_name = '';
+    const new_folder_keyup = (e: KeyboardEvent) => { if(e.key == 'Enter') newFolder(); }
+    async function newFolder() {
+        if (new_folder_name.length === 0)
+            return error_banner.set('Folder name can\'t be empty');
+
+        show_new_folder = false;
+        const resp = await workingWrapperR<api.CreateNodeInfo>(() => rpc.FS_create_node($token ?? '', false, node.id, new_folder_name));
+        if (resp && resp.file)
+            return error_banner.set('Folder already exists as file');
+
+        dispatch('reload_node');
+    }
+
     async function getPreview(node: number) {
         const resp = await rpc.FS_download_preview($token ?? '', node);
         if (resp.o == null)
@@ -122,6 +157,7 @@
     <tfoot class="text-gray-700 bg-gray-50">
         <tr>
             <td class="px-6 py-3" colspan="3">
+                <LinkButton on:click={() => (show_new_folder = true)} class="mr-3">New folder</LinkButton>
                 {#if selected.length > 0}
                     <LinkButton on:click={downloadSelected}>Download</LinkButton>
                     <LinkButton color="red" on:click={deleteSelected}>Delete</LinkButton>
@@ -132,6 +168,17 @@
     </tfoot>
 </Table>
 
+<Modal bind:open={show_new_folder} outsideclose title="Create new folder">
+    <ButtonGroup class="w-full mb-4">
+        <InputAddon><FolderAdd /></InputAddon>
+        <Input type="text" placeholder="Name" bind:value={new_folder_name} on:keyup={new_folder_keyup}></Input>
+    </ButtonGroup>
+    <span class="w-full flex">
+        <span class="flex-1 mr-2"></span>
+        <Button outline on:click={newFolder}>Create folder</Button>
+    </span>
+</Modal>
+
 <Dropdown triggeredBy="#dropdown-button" trigger="hover" placement="left">
     <DropdownItem on:click={selectAll}>Select all</DropdownItem>
     <DropdownItem on:click={selectFolders}>Select folders</DropdownItem>

frontend/src/icons.ts

@@ -1,5 +1,6 @@
 export {default as FileStorage} from '~icons/carbon/FileStorage';
 export {default as Folder} from '~icons/carbon/Folder';
+export {default as FolderAdd} from '~icons/carbon/FolderAdd';
 export {default as FolderParent} from '~icons/carbon/FolderParent';
 export {default as DocumentBlank} from '~icons/carbon/DocumentBlank';
 export {default as Download} from '~icons/carbon/Download';