Feature: custom queries

This commit enables function to define custom queries
within configuration file or by environment variables.

Its not scope of this commit to define custom queries on-the-fly
on the ui.

Closes #24

Author: monofox

CHANGELOG.md

@@ -1,3 +1,17 @@
+## Sun 04, May, 2025
+- [x] Remember shortcuts for project and tags in a cache file.
+  Default cache path: $HOME/.cache/taskwarrior-web/mnemonics.cache
+
+## Thu 01, May, 2025
+- [x] Improved CI pipeline in order to increase continues quality checks.
+- [x] Improved mobile view: proper scaling of the pages as well as headers are now really sticky, not fixed anymore. This ensures, that the header does not cover any tasks on small displays.
+
+## Tue 29, April, 2025
+- [x] Rework of task modifications.
+- [x] Adding absolute dates in task details.
+- [x] Added possibility to delete tasks.
+- [x] For denotation its now possible to select specific annotations.
+
 ## Fri 28, March, 2025
 - [x] Font's can be customized
 - [x] Removed packaged font

Cargo.lock

@@ -28,6 +28,7 @@ serde_path_to_error = "0.1.17"
 shell-words = "1.1.0"
 directories = "6.0.0"
 toml = "0.8.22"
+config = { version = "0.15.11", default-features = false, features = ["toml"] }
 
 [dev-dependencies]
 tempfile = "3.19.1"

Cargo.toml

@@ -78,12 +78,12 @@ It is recommend to specify the corresponding volume in order to persist the data
 
 In order to configure the environment variables and contexts for `timewarrior-web`, docker environments can be specified:
 
-| Docker environment               | Shell environment       | Purpose 
-| -------------------------------- | ----------------------- | ---------------------------------------------------------|
+| Docker environment               | Shell environment       | Purpose                                                  |
+| -------------------------------- | ----------------------- | -------------------------------------------------------- |
 | TASK_WEB_TWK_SERVER_PORT         | TWK_SERVER_PORT         | Specifies the server port (see "Ports")                  |
 | TASK_WEB_DISPLAY_TIME_OF_THE_DAY | DISPLAY_TIME_OF_THE_DAY | Displays a time of the day widget in case of value `1`   |
 | TASK_WEB_TWK_USE_FONT            | TWK_USE_FONT            | Font to be used. If not, browsers default fonts are used |
-| TASK_WEB_TWK_THEME               | TWK_THEME               | Defines the theme to be used (see "Themes")              | 
+| TASK_WEB_TWK_THEME               | TWK_THEME               | Defines the theme to be used (see "Themes")              |
 
 ## Hooks
 
@@ -219,17 +219,63 @@ Keyboard shortcut is `u`
 This will bring up undo confirmation dialog
 ![Undo](./screenshots/undo.png)
 
+## Custom queries
+
+Task organization is a pretty personal thing. And depending on the project or individual base, custom workflows and reportings are required.
+Create a configuration file under Linux in `$HOME/.config/taskwarrior-web/config.toml` or under Windows in `%APPDATA%\taskwarrior-web\config.toml` and add custom queries.
+
+A configuration file can look like:
+
+```toml
+[custom_queries]
+
+[custom_queries.completed_last_week]
+query = "end.after:today-1wk and status:completed"
+description = "completed last 7days"
+
+[custom_queries.due_today]
+query = "due:today"
+description = "to be done today"
+fixed_key = "ni" # this will override randomly generated key
+```
+
+Following options for each query definition is available:
+| property    | mandatory | meaning                                                                |
+| ----------- | --------- | ---------------------------------------------------------------------- |
+| query       |     X     | specifies the query to be executed on `taskwarrior`.                   |
+| description |     X     | description to be shown in the Web-UI for recognizing the right query. |
+| fixed_key   |           | Can be specified as two characters which will hardcode the shortcut.   |
+
+The query can be selected via keyboard shortcuts or via click on the right buttons.
+In order to select custom queries with the keyboard, first type in `q` as key for queries.
+A list is shown with available custom queries:
+![Custom query selections](./screenshots/custom_queries_selection.png)
+
+On each custom query, either a pre-defined shortcut key is shown or an automatic and cached shortcut is shown.
+The right one is typed and automatically the custom query is set:
+
+![Custom query list](./screenshots/custom_queries_list.png)
+
+As soon as one of the other reports like `next`, `pending` or others are selected, the custom query is unset and `taskwarrior-web` standard reports are shown.
+
+Beside of a configuration file, it is possible to configure via environment variables as well:
+```shell
+env TWK_custom_queries__one_query__fixed_key=ni TWK_custom_queries__one_query__query="end.after:today-1wk and status:completed" TWK_custom_queries__one_query__description="completed last 7days" RUST_LOG="INFO" cargo run
+```
+
+The same way it is possible to configure the docker container accordingly.
+
 ## Switch theme
 
 It is possible to switch the theme, which is saved in local storage too.
 
 For this following three symbols are used (left of the command bar):
 
-| Symbol | Purpose                               |
-|--------|---------------------------------------|
-|   ⚹    | Auto Mode or forced mode from server |  
-|   ☽    | Dark mode                            |
-|   🌣    | Light mode                           |
+| Symbol | Purpose                              |
+| ------ | ------------------------------------ |
+| ⚹      | Auto Mode or forced mode from server |
+| ☽      | Dark mode                            |
+| 🌣      | Light mode                           |
 
 # WIP warning
 
@@ -243,11 +289,11 @@ there will be errors, as no checks, and there may not be any error messages in c
   - [x] Hiding empty columns
   - [ ] Temporary highlight last modified row, if visible
 - [x] Make the mnemonics same for tags on refresh
-- [ ] Modification
-  - [ ] Deleting
+- [x] Modification
+  - [x] Deleting
 - [ ] Following Context
 - [ ] Error handling
-  - [ ] Retaining input in case of error
+  - [x] Retaining input in case of error
   - [ ] Finetune error handling
 - [ ] Add more tests
 - [ ] Convert to desktop app using Tauri

README.md

@@ -0,0 +1,8 @@
+[custom_queries]
+
+[custom_queries.one_query]
+description = "report of something"
+
+[custom_queries.two_query]
+description = "report of another thing"
+fixed_key = "n" # this will override randomly generated key

config.sample.toml

@@ -23,7 +23,7 @@ function focusTextInput(event: KeyboardEvent | MouseEvent) {
         event.preventDefault()
         ss.focus();
     } else {
-        document.getElementById('cmd-inp').focus();
+        document.getElementById('cmd-inp')?.focus();
     }
 }
 
@@ -34,11 +34,11 @@ window.handleTaskAnnotations = (event: KeyboardEvent | MouseEvent) => {
     }
     event.preventDefault();
     let annoSelector = document.getElementById('anno-inp');
-    document.querySelector('#anno-inp').classList.toggle('hidden');
+    document.querySelector('#anno-inp')?.classList.toggle('hidden');
     Array.from(document.querySelectorAll('.is-a-annotation')).forEach((value) => {
         value.classList.toggle('hidden');
     });
-    if (annoSelector.checkVisibility()) {
+    if (annoSelector?.checkVisibility()) {
         annoSelector.focus();
     }
     return false;
@@ -59,45 +59,66 @@ window.handleTaskAnnotationTrigger = (event: KeyboardEvent | MouseEvent) => {
 
 hotkeys('esc', function (event, handler) {
     // Prevent the default refresh event under WINDOWS system
-    if(event.target != document.getElementById('tag-inp')) {
+    if(event.target != document.getElementById('tag-inp') &&
+        event.target != document.getElementById('query-inp')) {
         console.log("not processing")
         return
     }
-    event.preventDefault()
-    let tag_selector = document.getElementById('cmd-inp')
-    document.querySelector('#tags_map_drawer').classList.toggle('hidden')
-    if (tag_selector.checkVisibility()) {
+    event.preventDefault();
+    let tag_selector = document.getElementById('cmd-inp');
+    if (event.target == document.getElementById('tag-inp')) {
+        document.querySelector('#tags_map_drawer')?.classList.toggle('hidden');
+    } else if (event.target == document.getElementById('query-inp')) {
+        document.querySelector('#querys_map_drawer')?.classList.toggle('hidden');
+    }
+    if (tag_selector?.checkVisibility()) {
         tag_selector.focus();
     }
     return false;
 });
 
+hotkeys('ctrl+shift+K', function (event, handler) {
+    // Prevent the default refresh event under WINDOWS system
+    event.preventDefault();
+    focusTextInput(event);
+    return false;
+});
+
 hotkeys('t', function (event, handler) {
     // Prevent the default refresh event under WINDOWS system
     if(event.target != document.getElementById('cmd-inp')) {
-        console.log("not processing")
+        console.debug("not processing")
         return
     }
     event.preventDefault()
-    window['toggleTagPanel']();
-
+    window['togglePanel']('tag');
 });
 
-hotkeys('ctrl+shift+K', function (event, handler) {
+hotkeys('q', function (event, handler) {
     // Prevent the default refresh event under WINDOWS system
-    event.preventDefault();
-    focusTextInput(event);
-    return false;
+    if(event.target != document.getElementById('cmd-inp')) {
+        console.debug("not processing")
+        return
+    }
+    event.preventDefault()
+    window['togglePanel']('query');
 });
 
-window['toggleTagPanel'] = () => {
-    let tagSelector = document.getElementById('tag-inp')
-    document.querySelector('#tags_map_drawer').classList.toggle('hidden')
-    if (tagSelector.checkVisibility()) {
+window['togglePanel'] = (panelType: string) => {
+    let tagSelector = document.getElementById(panelType + '-inp')
+    document.querySelector('#' + panelType + 's_map_drawer')?.classList.toggle('hidden')
+    if (tagSelector?.checkVisibility()) {
         tagSelector.focus();
     }
     return false;
-}
+};
+
+window['processPanelShortcut'] = (event: KeyboardEvent, panelType: string) {
+    const shortcut = event.target?.value;
+    if (shortcut.length >= 2) { 
+        document.getElementById(panelType + "s_" + shortcut)?.click() 
+    };
+};
 
 document.addEventListener('click', function (event) {
     let element = document.getElementsByTagName('html')[0];
@@ -154,6 +175,7 @@ document.addEventListener("DOMContentLoaded", function () {
                     .padStart(2, "0");
         }, 1000
     )
+
     let day_progress = setInterval(
         () => {
             const dd = document.getElementById('time_of_the_day');

frontend/src/main.ts

@@ -1,9 +1,12 @@
 <div class="pl-2 pr-2 py-1.5 rounded-sm text-xs flex bg-base-100 gap-2 items-center flex-wrap">
 
     <div class="join" id="tag_search_bar">
-        <button class="btn btn-neutral btn-xs join-item" id="tag-selection-toggle" onclick="window['toggleTagPanel']()">
+        <button class="btn btn-neutral btn-xs join-item" id="tag-selection-toggle" onclick="window['togglePanel']('tag')">
         <span><span class="shortcut_key opacity-50">t</span>ags</span>
         </button>
+        <button class="btn btn-neutral btn-xs join-item" id="query-selection-toggle" onclick="window['togglePanel']('query')">
+        <span><span class="shortcut_key opacity-50">q</span>ueries</span>
+        </button>
         <span class="btn btn-neutral btn-xs join-item" id="task_action_bar">
             <button hx-get="task_action_bar" hx-target="#task_action_bar" hx-swap="outerHTML"
                 hx-trigger="click,keyup[key=='s'] from:#cmd-inp">ta<span class="shortcut_key opacity-50">s</span>k</button>

frontend/templates/left_action_bar.html

@@ -0,0 +1,42 @@
+
+<div class="flex flex-wrap gap-2 p-4 bg-accent-content">
+    <div class="join">
+        <button
+                id="query-btn-back"
+                class="btn btn-warning btn-xs join-item"
+                hx-get="tasks"
+                hx-trigger="click,keyup[key=='Escape'] from:#task-inp"
+                hx-target="#list-of-tasks"
+                hx-include="[id='filtering']"
+        ><span><span class="shortcut_key opacity-50">ESC</span></span></button>
+        <label for="query-inp" class="hidden"></label>
+        <input type="text" id="query-inp"
+               class="input input-xs input-accent join-item"
+               placeholder="Custom queries"
+               hx-trigger="changes delay:2s"
+               hx-target="#list-of-tasks"
+               hx-include="[id='filtering']"
+               hx-swap="innerHTML"
+               autofocus
+               autocomplete="off"
+               onkeyup="processPanelShortcut(event, 'query')"
+        />
+    </div>
+    {% for shortcut, query in custom_queries_map %}
+    <div class="mb-2">
+        <div class="flex gap-2">
+            <button id="querys_{{shortcut}}"
+            class="btn btn-xs btn-info shrink"
+            hx-get="tasks?filter={{ query.query }}&custom_query={{query.description | urlencode}}"
+            hx-target="#list-of-tasks"
+            hx-include="[id='filtering']"
+            hx-swap="innerHTML"
+            >
+            <span class="kbd kbd-xs bg-primary">{{ shortcut }}</span>
+            {{ query.description }}
+            </button>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+