implemented editing of 'show closed tasks' setting in project

frontend/src/Components/ListTask.svelte

@@ -6,13 +6,16 @@
     import TaskList from './TaskList.svelte';
 
     const router = useTinyRouter();
-    let { estimated_time, task } = $props();
+    let { estimated_time, show_closed, task } = $props();
     let children = $state(null);
     let error = $state(null);
 
     async function loadChildren(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/list`;
-        var data = {parent_task_id:+task.id};
+        var data = {
+            parent_task_id:+task.id,
+            show_closed: show_closed
+        };
         if (task.show_closed) data.show_closed = true;
         const resp = await fetch(url,{
             credentials:'include',
@@ -52,6 +55,6 @@
     <span class="error">{error}</span>
     {/if}
     {#if children}
-    <TaskList tasks={children} {estimated_time} />
+    <TaskList tasks={children} {estimated_time} {show_closed} />
     {/if}
 </li>

frontend/src/Components/MemberEditor.svelte

@@ -50,13 +50,12 @@
 {#if error}
 <span class="error">{error}</span>
 {/if}
-<table>
-    <tbody>
+<fieldset>
+    <legend>{t('members')}</legend>
+    <table>
+        <tbody>
         {#each sortedMembers as member,i}
         <tr>
-            {#if !i}
-            <th rowspan={sortedMembers.length}>{t('members')}</th>
-            {/if}
             <td>{member.user.name}</td>
             <td>
                 <PermissionSelector {permissions} selected={member.permission.code} onchange={(perm) => updatePermission(member.user.id,perm)} />
@@ -67,11 +66,10 @@
         </tr>
         {/each}
         <tr>
-            <td></td>
             <td>{t('add_member')}</td>
             <td>
                 <Autocomplete {getOptionsFor} {onSelect} />
             </td>
         </tr>
-    </tbody>
-</table>
+        </tbody>
+    </table></fieldset>

frontend/src/Components/TaskList.svelte

@@ -2,7 +2,7 @@
     import { t } from '../translations.svelte.js';
     import ListTask from './ListTask.svelte';
 
-    let { estimated_time, tasks } = $props();
+    let { estimated_time, show_closed, tasks } = $props();
 
     let sortedTasks = $derived.by(() => Object.values(tasks).sort((a, b) => a.name.localeCompare(b.name)));
 
@@ -11,6 +11,6 @@
 
 <ul>
     {#each sortedTasks as task}
-    <ListTask {task} {estimated_time} />
+    <ListTask {task} {estimated_time} show_closed={show_closed || task.show_closed} />
     {/each}
 </ul>

frontend/src/routes/project/View.svelte

@@ -20,6 +20,11 @@
         if (ids) update({new_member:+ids.pop()});
     }
 
+    function changeClosed(){
+        update({show_closed:project.show_closed});
+        loadTasks();
+    }
+
     async function dropMember(member){
         update({drop_member:member.user.id});
     }
@@ -38,12 +43,18 @@
 
     async function loadTasks(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/list`;
+        const data = {
+            project_id:+id,
+            show_closed:project.show_closed
+        }
         const resp = await fetch(url,{
             credentials:'include',
             method:'POST',
-            body:JSON.stringify({project_id:+id})
+            body:JSON.stringify(data)
         });
         if (resp.ok){
+            tasks = {};
+            estimated_time.sum = 0;
             tasks = await resp.json();
             error = null;
         } else {
@@ -125,7 +136,7 @@
             <th>{t('tasks')}</th>
             <td class="tasks">
                 {#if tasks}
-                <TaskList {tasks} {estimated_time} />
+                <TaskList {tasks} {estimated_time} show_closed={project.show_closed} />
                 {/if}
             </td>
         </tr>
@@ -136,5 +147,13 @@
 <fieldset class="project settings">
     <legend>{t('settings')}</legend>
     <MemberEditor members={project.members} {updatePermission} {addMember} {dropMember} />
+    <fieldset>
+        <legend>{t('miscellaneous_settings')}</legend>
+        <label>
+            <input type="checkbox" bind:checked={project.show_closed} onchange={changeClosed} />
+            {t('display_closed_tasks')}
+        </label>
+    </fieldset>
+    <button onclick={() => showSettings = false}>{t('close_settings')}</button>
 </fieldset>
 {/if}