implemented sorting for task list

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/task/Index.svelte

@@ -16,6 +16,7 @@
     let loading = $state(true);
     let map = $state({});
     let hidden = $state({});
+    let sort = $state({key:'',asc:true});
 
     async function changeState(idx,state){
         const task = tasks[idx];
@@ -37,6 +38,11 @@
         changeState(idx,'COMPLETE');
     }
 
+    function cursor(key){
+        if (key != sort.key) return 'asc';
+        return sort.asc ? 'desc' : 'asc';
+    }
+
     function edit(tid){
         router.navigate(`/task/${tid}/edit`);
     }
@@ -96,6 +102,40 @@
         changeState(idx,'PENDING');
     }
 
+    function compare(task1, task2, key){
+        if (key == 'project') {
+            let pj_id_A = task1['project_id'];
+            let pj_id_B = task2['project_id'];
+            if (pj_id_A == pj_id_B) {
+                let parentA = "";
+                if (task1['parent_task_id']){
+                    let parent = map[task1['parent_task_id']];
+                    if (parent) parentA = parent['name'];
+                }
+                let parentB = "";
+                if (task2['parent_task_id']){
+                    let parent = map[task2['parent_task_id']];
+                    if (parent) parentB = parent['name'];
+                }
+                return parentA.localeCompare(parentB);
+            }
+            return projects[pj_id_A]['name'].localeCompare(projects[pj_id_B]['name']);
+        }
+        if (key == 'state') return task1['status'] - task2['status'];
+        let valA = task1[key] || '';
+        let valB = task2[key] || '';
+        return valA.localeCompare(valB);
+    }
+
+    function resort(key){
+        if (loading) return;
+        if (sort.key != key) {
+            sort.asc = true;
+            sort.key = key;
+        } else sort.asc = !sort.asc;
+        tasks = tasks.toSorted((a,b) => sort.asc ? compare(a,b,key) : compare(b,a,key));
+    }
+
     function start(idx){
         changeState(idx,'STARTED');
     }
@@ -103,6 +143,15 @@
     onMount(load);
 </script>
 
+<style>
+    .asc{
+        cursor: s-resize;
+    }
+    .desc{
+        cursor: n-resize;
+    }
+</style>
+
 <svelte:head>
     <title>Umbrella – {t('tasks')}</title>
 </svelte:head>
@@ -124,11 +173,11 @@
     <table>
         <thead>
             <tr>
-                <th>{t('name')}</th>
-                <th>{t('project')} ({t('parent_task')})</th>
-                <th>{t('state')}</th>
-                <th>{t('start_date')}</th>
-                <th>{t('due_date')}</th>
+                <th title={t('sort')} class={cursor('name')} onclick={e => resort('name')}>{t('name')}</th>
+                <th title={t('sort')} class={cursor('project')} onclick={e => resort('project')}>{t('project')} ({t('parent_task')})</th>
+                <th title={t('sort')} class={cursor('state')} onclick={e => resort('state')}>{t('state')}</th>
+                <th title={t('sort')} class={cursor('start_date')} onclick={e => resort('start_date')}>{t('start_date')}</th>
+                <th title={t('sort')} class={cursor('due_date')} onclick={e => resort('due_date')}>{t('due_date')}</th>
                 <th>{t('users')}</th>
                 <th>{t('actions')}</th>
             </tr>

translations/src/main/resources/de.json

@@ -357,6 +357,7 @@
   "show": "anzeigen",
   "show_closed": "geschlossene anzeigen",
   "show_kanban": "Kanban-Ansicht",
+  "sort": "sortieren",
   "source": "Quelle",
   "start": "Start",
   "start_date": "Startdatum",

translations/src/main/resources/en.json

@@ -357,6 +357,7 @@
   "show": "show",
   "show_closed": "show closed",
   "show_kanban": "Kanban",
+  "sort": "sort",
   "source": "source",
   "start": "start",
   "start_date": "start date",