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

<script>
    import {onMount}  from 'svelte';
    import {api}      from '../../urls.svelte.js';
    import {t}        from '../../translations.svelte.js';

    import Editor     from './Editor.svelte';
    import LineEditor from '../../Components/LineEditor.svelte';
    import Notes      from '../notes/RelatedNotes.svelte';

    let error       = $state(null);
    let companies   = $state(null);
    let new_company = $state({name:null,email:null});
    let selected    = $state(0);
    let missing_fields = $derived(!new_company.name || !new_company.email?.includes('@'));

    async function create_company(){
        const url  = api('company');
                const resp = await fetch(url,{
                    credentials : 'include',
                    method      : 'POST',
                    body        : JSON.stringify(new_company)
                });
        if (resp.ok){
            const company = await resp.json();
            companies[company.id] = company;
            error = null;
        } else {
            error = await resp.text();
        }
    }

    async function drop(company){
        if (!confirm(t('confirm_delete',{element:company.name}))) return;
        const  url = api(`company/${company.id}`);
        const resp = await fetch(url,{
            credentials : 'include',
            method      : 'DELETE'
        });
        if (resp.ok){
            delete companies[company.id];
            error = null;
        } else {
            error = await resp.text();
        }
        return false;
    }

    async function loadCompanies(){
        const url  = api('company/list');
        const resp = await fetch(url,{credentials:'include'});
        if (resp.ok){
            companies = await resp.json();
            error = null;
        } else {
            error = await resp.text();
        }
    }

    function showDetail(company_id){
        selected = company_id;
    }

    onMount(loadCompanies)
</script>

<svelte:head>
    <title>Umbrella – {t('companies')}</title>
</svelte:head>

<fieldset>
    <legend>
        {t('companies')}
    </legend>
    {#if error}
    <span class="error">{error}</span>
    {/if}
    {#if companies}
    <table class="companies">
        <thead>
            <tr>
                <th>
                    {t('name')}
                </th>
                <th>
                    {t('email')}
                </th>
                <th>
                    {t('members')}
                </th>
                <th>
                    {t('actions')}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" bind:value={new_company.name} />
                </td>
                <td>
                    <input type="email" bind:value={new_company.email} />
                </td>
                <td></td>
                <td>
                    <button disabled={missing_fields} onclick={create_company}>{t('create_new_object',{object:t('company')})}</button>
                </td>
            </tr>
            {#each Object.entries(companies) as [cid, company]}
            <tr onclick={e => showDetail(cid)}>
                <td>{company.name}</td>
                <td>{company.email}</td>
                <td>
                    <ul>
                    {#each Object.entries(company.members) as [uid,member]}
                        <li>{member.name}</li>
                    {/each}
                    </ul>
                </td>
                <td>
                    <button onclick={e => drop(company)}>{t('delete_object',{object:t('company')})}</button>
                </td>
            </tr>
            {#if selected==cid}
            <tr>
                <td colspan="4" class="edit">
                    <Editor {company} />
                    <div class="notes">
                        <Notes module="company" entity_id={cid} />
                    </div>
                </td>
            </tr>
            {/if}
            {/each}
        </tbody>
    </table>
    {/if}
</fieldset>