Umbrella/frontend/src/routes/files/Index.svelte

<script>
    import { onMount }       from 'svelte';
    import { useTinyRouter } from 'svelte-tiny-router';
    import { api }           from '../../urls.svelte';
    import { error, yikes }         from '../../warn.svelte';
    import { t }             from '../../translations.svelte';
    import { user }          from '../../user.svelte';

    const router = useTinyRouter();
    let children = $state({});
    let new_dir = $state(null);
    let parent = $state(false);
    let form = $state(false);
    let path = $state(null)

    let available = $derived.by(isAvailable);

    function isAvailable(){
        if (!new_dir) return false;
        if (children){
            if (children.dirs) {
                for (let key of Object.values(children.dirs)){
                    if (key == new_dir) return false;
                }
            }
            if (children.files) {
                for (let key of Object.values(children.files)){
                    if (key == new_dir) return false;
                }
            }
        }
        return true;
    }

    async function create_dir(ev){
        ev.preventDefault();
        ev.stopPropagation();
        const url = api('files'+path+'/'+new_dir);
        const res = await fetch(url,{
            credentials: 'include',
            method: 'POST'
        });
        if (res.ok) {
            yikes();
            loadChildren(window.location.pathname);
            new_dir = null;
        } else {
            error(res);
        }
        return false;
    }

    async function loadChildren(p){
        p = p.substring(6);
        if (p == '') p = '/';
        children = { dirs : {}, files : {}, title : p};
        path = p;
        console.log(p);
        if (p == '/'){
            children.dirs[`/user/${user.id}`]  = t('my_files');
            children.dirs['/project']  = t('projects')
            children.dirs['/company'] = t('companies');
            parent = false;
            form = false;
        } else {
            const url = api(`files${p}`);
            const res = await fetch(url,{credentials:'include'});
            if (res.ok){
                let json = await res.json();
                if (json.dirs) children.dirs = json.dirs;
                if (json.files) children.files = json.files;
                if (json.title) children.title = json.title;
                parent = p.substring(0, p.lastIndexOf("/"));
                if (parent == '/user'||p=='/project'||p=='/company') parent = '/';
                form = !(p=='/company'||p=='/project'||p=='/user');
                yikes();
            } else {
                error(res);
            }
        }
    }

    function onclick(ev){
        ev.preventDefault();
        ev.stopPropagation();

        var target = ev.target;
        while (target && !target.href) target=target.parentNode;
        let href = target.getAttribute('href');
        if (href) {
            router.navigate(href);
            loadChildren(href);
        }

        return false;
    }

    onMount(() => loadChildren(window.location.pathname));
</script>

<h1>{t('files')} – {children?.title}</h1>
parent: {parent}
<ul>
{#if parent}
    <li class="dir parent">
        <span class="symbol"></span>
        <a href={'/files'+parent} {onclick}>..</a>
    </li>
{/if}
{#if children?.dirs}
{#each Object.entries(children.dirs) as [k,v]}
    <li class="dir">
        <span class="symbol"></span>
        <a href={'/files'+k} {onclick}>{v}</a>
    </li>
{/each}
{/if}
{#if form}
<li class="action">
    <form onsubmit={create_dir} >
        <span class="symbol">+</span>
        <input type="text" bind:value={new_dir} />
        <button type="submit" disabled={!available} >{t('create_directory')}</button>
    </form>
</li>
{/if}
{#if children.files}
{#each Object.entries(children.files) as [k,v]}
    <li class="file">
        <span class="symbol"></span>
        <a href={'/api/files'+k} target="_blank">{v}</a>
    </li>
{/each}
{/if}
{#if form}
    <li class="action">
        <form>
            <span class="symbol">+</span>
            <input type="file" />
            <button>{t('upload_file')}</button>
        </form>
    </li>
{/if}
</ul>