121 lines
3.8 KiB
Svelte
121 lines
3.8 KiB
Svelte
<script>
|
|
import { useTinyRouter } from 'svelte-tiny-router';
|
|
|
|
import { api } 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){
|
|
ev.preventDefault();
|
|
const url = api('project');
|
|
var resp = await fetch(url,{
|
|
credentials : 'include',
|
|
method : 'POST',
|
|
body : JSON.stringify(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>
|
|
|
|
<form {onsubmit}>
|
|
<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="project" bind:tags={project.tags} />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</fieldset>
|
|
<button type="submit" disabled={!ready}>{t('create')}</button>
|
|
</fieldset>
|
|
</form> |