completed user-defined states

frontend/src/Components/StateSelector.svelte

@@ -14,7 +14,7 @@
 {#if project?.allowed_states}
 <select bind:value={selected} onchange={() => onchange(selected)}>
     {#each Object.entries(project.allowed_states) as [code,name]}
-    <option value={+code}>{t('state_'+name.toLowerCase())}</option>
+    <option value={+code}>{code%10?name:t('state_'+name.toLowerCase())}</option>
     {/each}
 </select>
 {/if}

frontend/src/routes/project/Kanban.svelte

@@ -19,10 +19,9 @@
     let project      = $state(null);
     let ready        = $state(false);
     let router       = useTinyRouter();
-    let states       = $state(null);
     let tasks        = $state({});
     let users        = {};
-    let columns      = $derived(states?Object.keys(states).length+1:1);
+    let columns      = $derived(project.allowed_states?Object.keys(project.allowed_states).length+1:1);
 
     async function create(name,user_id,state){
         var url = api('task/add');
@@ -85,7 +84,6 @@
 
     async function load(){
         await loadProject();
-        await loadStates();
         await loadTasks({project_id:+id,parent_task_id:0});
         ready = true;
         loadTags();
@@ -107,17 +105,6 @@
         }
     }
 
-    async function loadStates(){
-        const url  = api(`project/${id}/states`);
-        const resp = await fetch(url,{credentials:'include'});
-        if (resp.ok){
-            states = await resp.json();
-            error  = null;
-        } else {
-            error = await resp.text();
-        }
-    }
-
     async function loadTag(task){
         const url  = api(`tags/task/${task.id}`);
         const resp = await fetch(url,{credentials:'include'});
@@ -194,14 +181,14 @@
         {t('filter')}
     </span>
     <div class="head">{t('user')}</div>
-    {#if states}
-    {#each Object.entries(states) as [sid,state]}
-    <div class="head">{t('state_'+state.toLowerCase())}</div>
+    {#if project.allowed_states}
+    {#each Object.entries(project.allowed_states) as [sid,state]}
+    <div class="head">{sid%10?state:t('state_'+state.toLowerCase())}</div>
     {/each}
     {/if}
     {#each Object.entries(tasks) as [uid,stateList]}
         <div class="user">{users[uid]}</div>
-        {#each Object.entries(states) as [state,name]}
+        {#each Object.entries(project.allowed_states) as [state,name]}
             <div class={['state_'+state, highlight.user == uid && highlight.state == state ? 'highlight':'']} ondragover={ev => hover(ev,uid,state)} ondrop={ev => drop(uid,state)} >
                 {#if stateList[state]}
                 {#each Object.values(stateList[state]).sort((a,b) => a.name.localeCompare(b.name)) as task}

frontend/src/routes/project/View.svelte

@@ -21,11 +21,30 @@
     let showSettings   = $state(false);
     let tasks          = $state(null);
 
+    let new_state = $state({code:null,name:null})
+    let state_available=$derived(new_state.name && new_state.code && !project.allowed_states[new_state.code]);
+
     async function addMember(entry){
         const ids = Object.keys(entry);
         if (ids) update({new_member:+ids.pop()});
     }
 
+    async function addState(){
+        const url  = api(`project/${id}/state`);
+        const resp = await fetch(url,{
+            credentials: 'include',
+            method: 'POST',
+            body: JSON.stringify(new_state)
+        });
+        if (resp.ok){
+            const json = await resp.json();
+            project.allowed_states[json.code] = json.name;
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
     function addTask(){
         router.navigate(`/project/${id}/add_task`);
     }
@@ -200,6 +219,17 @@
             </td>
         </tr>
         {/each}
+        <tr>
+            <th>
+                <input type="number" bind:value={new_state.code} />
+            </th>
+            <td>
+                <input type="text" bind:value={new_state.name} />
+                {#if state_available}
+                <button onclick={addState} >{t('add_state')}</button>
+                {/if}
+            </td>
+        </tr>
         {/if}
         {/if}
         {#if estimated_time.sum}