added filter option to timetrack page

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

frontend/src/routes/time/Index.svelte

@@ -15,12 +15,14 @@
     let router = useTinyRouter();
 
     let times = $state(null);
+    let filter = $state("");
+    let lc_filter = $derived(filter.toLowerCase());
     let closed = $state(false);
     let tasks = {};
     let projects = {};
     let project_filter = $state(null);
     if (router.hasQueryParam('project')) project_filter = router.getQueryParam('project');
-    let sortedTimes = $derived.by(() => Object.values(times).filter(match_prj_filter).map(time => ({
+    let sortedTimes = $derived.by(() => Object.values(times).filter(match_prj_filter).filter(key_filter).map(time => ({
       ...time,
       start: display(time.start_time),
       end: display(time.end_time),
@@ -111,7 +113,17 @@
         return false;
     }
 
-
+    function key_filter(time){
+        if (!filter) return true;
+        if (users[time.user_id].name.toLowerCase().includes(lc_filter)) return true;
+        if (time.subject.toLowerCase().includes(lc_filter)) return true;
+        for (var tid of time.task_ids){
+            var task = tasks[tid];
+            if (tasks[tid].name.toLowerCase().includes(lc_filter)) return true;
+            if (projects[tasks[tid].project_id].name.toLowerCase().includes(lc_filter)) return true;
+        }
+        return false;
+    }
 
     async function loadTimes(){
         const url  = api('time');
@@ -234,6 +246,11 @@
     <title>Umbrella – {t('timetracking')}</title>
 </svelte:head>
 
+<style>
+    .filter{
+        margin: 0 0 0 30%;
+    }
+</style>
 
 <h1>{t('timetracking')}</h1>
 {#if times}
@@ -250,6 +267,10 @@
         <input type="checkbox" bind:checked={closed} onchange={reload} />
         {t('show_closed')}
     </label>
+    <label class="filter">
+        <input type="text" bind:value={filter} />
+        {t('filter')}
+    </label>
 </div>
 <table class="timetracks">
     <thead>