implemented opening and closing of projects right from the project list

frontend/src/Components/CompanySelector.svelte

@@ -6,6 +6,8 @@
     let companies = $state(null);
     let value = 0;
 
+    let sortedCompanies = $derived.by(() => Object.values(companies).sort((a, b) => a.name.localeCompare(b.name)));
+
     async function loadCompanies(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
         var resp = await fetch(url,{ credentials: 'include'});
@@ -27,8 +29,8 @@
 {#if companies}
 <select onchange={select} bind:value>
     <option value={0}>{caption}</option>
-    {#each companies as company,idx}
-    <option value={idx}>{company.name}</option>
+    {#each sortedCompanies as company}
+    <option value={company.id}>{company.name}</option>
     {/each}
 </select>
 {:else}

frontend/src/routes/project/Create.svelte

@@ -26,7 +26,8 @@
             body: JSON.stringify(project)
         });
         if (resp.ok){
-            router.navigate('/project');
+            var newProject = await resp.json();
+            router.navigate(`/project/${newProject.id}/view`);
         } else {
             error = await resp.text();
         }

frontend/src/routes/project/List.svelte

@@ -7,6 +7,7 @@
     let error = $state(null);
     let projects = $state(null);
     let companies = $state(null);
+    let showClosed = $state(router.query.closed == "show");
 
     let sortedProjects = $derived.by(() => Object.values(projects).sort((a, b) => a.name.localeCompare(b.name)));
 
@@ -16,7 +17,11 @@
         if (resp.ok){
             companies = await resp.json();
             url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/list`;
-            resp = await fetch(url,{credentials:'include'});
+            resp = await fetch(url,{
+                credentials:'include',
+                method:'POST',
+                body:JSON.stringify({show_closed:showClosed})
+            });
             if (resp.ok){
                 projects = await resp.json();
             } else {
@@ -27,6 +32,31 @@
         }
     }
 
+    async function setState(pid,state_name){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${pid}`;
+        const resp = await fetch(url,{
+            credentials:'include',
+            method:'PATCH',
+            body:JSON.stringify({status:state_name})
+        });
+        if (resp.ok){
+            var prj = await resp.json();
+            projects[prj.id].status = prj.status;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    function show(pid){
+        router.navigate(`/project/${pid}/view`)
+    }
+
+    function toggleClosed(){
+        router.navigate(showClosed?'/project':'/project?closed=show');
+        showClosed = !showClosed;
+        loadProjects();
+    }
+
     onMount(loadProjects);
 </script>
 
@@ -36,10 +66,11 @@
 <fieldset>
     <legend>
         {t('projects')}
-        <button onclick={() => router.navigate('/project/add')}>{t('create_new')}</button>
+        <button onclick={() => router.navigate('/project/add')}><span class="symbol"></span> {t('create_new_project')}</button>
+        <button onclick={toggleClosed}><span class="symbol"></span> {t(showClosed?'hide_closed':'show_closed')}</button>
     </legend>
     {#if projects}
-    <table>
+    <table class="project list">
         <thead>
             <tr>
                 <th>{t('name')}</th>
@@ -51,9 +82,11 @@
         </thead>
         <tbody>
             {#each sortedProjects as project}
-            <tr onclick={() => router.navigate(`/project/${project.id}/view`)}>
-                <td>{project.name}</td>
-                <td>
+            <tr>
+                <td class="name" onclick={() => show(project.id)} >
+                    {project.name}
+                </td>
+                <td class="company" onclick={() => show(project.id)} >
                     {#if project.company_id}
                     {companies[project.company_id].name}
                     {/if}
@@ -61,11 +94,20 @@
                 <td>
                     {t("state_"+project.status.name.toLowerCase())}
                 </td>
-                <td>
+                <td class="members" onclick={() => show(project.id)} >
                     {#each Object.entries(project.members) as [uid,member]}
                     <div>{member.user.name}</div>
                     {/each}
                 </td>
+                <td class="actions">
+                    <button class="edit     symbol" title={t('edit')}></button>
+                    {#if project.status.code < 60}
+                    <button class="complete symbol" title={t('complete')} onclick={() => setState(project.id,'COMPLETE')} ></button>
+                    <button class="abort    symbol" title={t('abort')} onclick={() => setState(project.id,'CANCELLED')} ></button>
+                    {:else}
+                    <button class="open     symbol" title={t('open')} onclick={() => setState(project.id,'OPEN')} ></button>
+                    {/if}
+                </td>
             </tr>
             {/each}
         </tbody>