working on project creation

frontend/src/App.svelte

@@ -13,6 +13,7 @@
     import Messages from "./routes/message/Messages.svelte";
     import Menu     from "./Components/Menu.svelte";
     import ProjectList from "./routes/project/List.svelte";
+    import ProjectAdd from "./routes/project/Create.svelte";
     import ResetPw  from "./routes/user/ResetPw.svelte";
     import Search   from "./routes/search/Search.svelte";
     import SendDoc  from "./routes/document/Send.svelte";
@@ -46,6 +47,7 @@
             <Route path="/document/:id/view"           component={ViewDoc} />
             <Route path="/message/settings"            component={Messages} />
             <Route path="/project"                     component={ProjectList} />
+            <Route path="/project/add"                 component={ProjectAdd} />
             <Route path="/search"                      component={Search} />
             <Route path="/user"                        component={User} />
             <Route path="/user/create"                 component={EditUser} />

frontend/src/Components/CompanySelector.svelte

@@ -0,0 +1,37 @@
+<script>
+    import {onMount} from 'svelte';
+    import {t} from '../translations.svelte.js';
+    let { caption, onselect = (company) => console.log('selected '+company.name) } = $props();
+    let message = t('loading');
+    let companies = $state(null);
+    let value = 0;
+
+    async function loadCompanies(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
+        var resp = await fetch(url,{ credentials: 'include'});
+        if (resp.ok){
+            companies = await resp.json();
+        } else {
+            message = await resp.text();
+        }
+    }
+
+    function select(){
+        onselect(companies[value]);
+    }
+
+    onMount(loadCompanies)
+
+</script>
+
+{#if companies}
+<select onchange={select} bind:value>
+    <option value={0}>{caption}</option>
+    {#each companies as company,idx}
+    <option value={idx}>{company.name}</option>
+    {/each}
+</select>
+{:else}
+<span>{message}</span>
+{/if}
+

frontend/src/routes/project/Create.svelte

@@ -2,18 +2,75 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
+
+    import CompanySelector from '../../Components/CompanySelector.svelte';
+    import Settings from './Settings.svelte';
+    let showSettings = $state(false);
+    let ready = $derived(!!project.name.trim())
+    let error = $state(null);
+
+    let project = $state({
+        name:'',
+        description:'',
+        settings:{
+            show_closed:false
+        }
+    });
+
+    async function onsubmit(ev){
+        ev.preventDefault();
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project`;
+        var resp = await fetch(url,{
+            credentials: 'include',
+            method: 'POST',
+            body: JSON.stringify(project)
+        });
+        if (resp.ok){
+            router.navigate('/project');
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    function onselect(company){
+        project.company_id = company.id;
+        console.log(project);
+    }
 </script>
 
-<fieldset>
-    <legend>
-        {t('create_new_project')}
-    </legend>
+<style>
+    label{ display: block }
+</style>
+
+{#if error}
+<span class="error">{error}</span>
+{/if}
+<form {onsubmit}>
     <fieldset>
-        <legend>{t('basic_data')}</legend>
-        <span class="warn">Company Selector</span>
-        <label>
-            <input type="text" />
-            {t('Name')}
-        </label>
+        <legend>
+            {t('create_new_project')}
+        </legend>
+        <fieldset>
+            <legend>{t('basic_data')}</legend>
+            <label>
+                <CompanySelector caption={t('no_company')} {onselect} />
+                {t('company_optional')}
+            </label>
+            <label>
+                <input type="text" bind:value={project.name}/>
+                {t('Name')}
+            </label>
+            <label>
+                <textarea bind:value={project.description}></textarea>
+                {t('description')}
+            </label>
+            {#if !showSettings}
+                <button onclick={() => showSettings = true}>{t('extended_settings')}</button>
+                {/if}
+        </fieldset>
+        {#if showSettings}
+            <Settings bind:settings={project.settings}/>
+        {/if}
+        <button type="submit" disabled={!ready}>{t('create')}</button>
     </fieldset>
-</fieldset>
+</form>

frontend/src/routes/project/List.svelte

@@ -2,11 +2,13 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
+
+    const router = useTinyRouter();
 </script>
 
 <fieldset>
     <legend>
         {t('projects')}
-        <button>{t('create_new')}</button>
+        <button onclick={() => router.navigate('/project/add')}>{t('create_new')}</button>
     </legend>
 </fieldset>

frontend/src/routes/project/Settings.svelte

@@ -0,0 +1,13 @@
+<script>
+    import {t} from '../../translations.svelte.js';
+
+    let { settings = $bindable() } = $props();
+
+</script>
+<fieldset>
+    <legend>{t('settings')}</legend>
+    <label>
+        <input type="checkbox" bind:checked={settings.show_closed} />
+        {t('display_closed_tasks')}
+    </label>
+</fieldset>