Files
Umbrella/frontend/src/routes/project/Create.svelte
T
2026-05-19 16:05:43 +02:00

116 lines
3.4 KiB
Svelte

<script>
import { useTinyRouter } from 'svelte-tiny-router';
import { api, post } from '../../urls.svelte.js';
import { error, yikes } from '../../warn.svelte';
import { t } from '../../translations.svelte.js';
import CompanySelector from '../../Components/CompanySelector.svelte';
import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
import Tags from '../tags/TagList.svelte';
let ready = $derived(!!project.name.trim())
const router = useTinyRouter();
let showSettings = $state(false);
let project = $state({
name : '',
description : { source : '', rendered : '' },
settings : { show_closed:false },
tags : []
});
async function onsubmit(ev){
if (ev) ev.preventDefault();
const url = api('project');
var resp = await post(url,project);
if (resp.ok){
var newProject = await resp.json();
router.navigate(`/project/${newProject.id}/view`);
} else {
error(resp);
}
}
function onselect(company){
project.company_id = company.id;
}
function toggleSettings(ev){
ev.preventDefault();
showSettings = !showSettings;
}
</script>
<style>
label{ display: block }
</style>
<fieldset>
<legend>
{t('create_new_project')}
</legend>
<fieldset>
<legend>{t('basic_data')}</legend>
<table>
<tbody>
<tr>
<th>
{t('company_optional')}
</th>
<td>
<CompanySelector caption={t('no_company')} {onselect} />
</td>
</tr>
<tr>
<th>
{t('Name')}
</th>
<td>
<input type="text" bind:value={project.name}/>
</td>
</tr>
<tr>
<th>
{t('description')}
</th>
<td>
<MarkdownEditor bind:value={project.description} simple={true} />
</td>
</tr>
{#if showSettings}
<tr>
<th>
{t('settings')}
</th>
<td>
<label>
<input type="checkbox" bind:checked={project.settings.show_closed} />
{t('display_closed_tasks')}
</label>
</td>
</tr>
{:else}
<tr>
<th>
{t('settings')}
</th>
<td>
<button onclick={toggleSettings} >{t('extended_settings')}</button>
</td>
</tr>
{/if}
<tr>
<th>
{t('tags')}
</th>
<td>
<Tags module={null} bind:tags={project.tags} onEmptyCommit={onsubmit} />
</td>
</tr>
</tbody>
</table>
</fieldset>
<button onclick={onsubmit} disabled={!ready}>{t('create')}</button>
</fieldset>