You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.0 KiB
106 lines
3.0 KiB
<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'; |
|
|
|
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 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> |
|
|
|
<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('detail')} |
|
</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> |
|
<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> |
|
</tr> |
|
{#if selected==cid} |
|
<tr> |
|
<td colspan="3"> |
|
<Editor {company} /> |
|
</td> |
|
</tr> |
|
{/if} |
|
{/each} |
|
</tbody> |
|
</table> |
|
{/if} |
|
</fieldset> |