Merge pull request #3701 from ilandikov/feat-filter-results

feat: Add text box to filter searches by description

Author: claremacrae

src/Renderer/QueryResultsRenderer.ts

@@ -3,6 +3,7 @@ import { GlobalQuery } from '../Config/GlobalQuery';
 import type { IQuery } from '../IQuery';
 import { PerformanceTracker } from '../lib/PerformanceTracker';
 import { State } from '../Obsidian/Cache';
+import { DescriptionField } from '../Query/Filter/DescriptionField';
 import { getQueryForQueryRenderer } from '../Query/QueryRendererHelper';
 import type { QueryResult } from '../Query/QueryResult';
 import type { TasksFile } from '../Scripting/TasksFile';
@@ -147,29 +148,71 @@ export class QueryResultsRenderer {
     }
 
     public async render(state: State, tasks: Task[], content: HTMLDivElement) {
+        const queryResult = this.performSearch(tasks);
+
+        this.addToolbar(queryResult, content);
+        await this.renderQueryResult(state, queryResult, content);
+    }
+
+    private performSearch(tasks: Task[]) {
         const measureSearch = new PerformanceTracker(`Search: ${this.query.queryId} - ${this.filePath}`);
         measureSearch.start();
         const queryResult = this.query.applyQueryToTasks(tasks);
         measureSearch.finish();
+        return queryResult;
+    }
 
+    private async renderQueryResult(state: State, queryResult: QueryResult, content: HTMLDivElement) {
         const measureRender = new PerformanceTracker(`Render: ${this.query.queryId} - ${this.filePath}`);
         measureRender.start();
-        this.addToolbar(queryResult, content);
         this.htmlRenderer.content = content;
         await this.htmlRenderer.renderQuery(state, queryResult);
         measureRender.finish();
     }
 
-    private addToolbar(queryResult: QueryResult, content: HTMLElement) {
+    private addToolbar(queryResult: QueryResult, content: HTMLDivElement) {
         if (this.query.queryLayoutOptions.hideToolbar) {
             return;
         }
 
         const toolbar = createAndAppendElement('div', content);
         toolbar.classList.add('plugin-tasks-toolbar');
+        this.addSearchBox(toolbar, queryResult, content);
         this.addCopyButton(toolbar, queryResult);
     }
 
+    private addSearchBox(toolbar: HTMLDivElement, queryResult: QueryResult, content: HTMLDivElement) {
+        const label = createAndAppendElement('label', toolbar);
+        setIcon(label, 'lucide-filter');
+        const searchBox = createAndAppendElement('input', label);
+        searchBox.placeholder = 'Filter by description...';
+        setTooltip(searchBox, 'Filter results');
+        searchBox.addEventListener('input', async () => {
+            const { filter, error } = new DescriptionField().createFilterOrErrorMessage(
+                'description includes ' + searchBox.value,
+            );
+            if (error) {
+                new Notice('error searching for ' + searchBox.value + ': ' + error);
+                return;
+            }
+
+            // We want to retain the Toolbar, to not lose the search string.
+            // But we need to delete any pre-existing headings, tasks and task count.
+            // The following while loop relies on the Toolbar being the first element.
+            while (content.firstElementChild !== content.lastElementChild) {
+                const lastChild = content.lastChild;
+                if (lastChild === null) {
+                    break;
+                }
+
+                lastChild.remove();
+            }
+
+            const filteredQueryResult = queryResult.applyFilter(filter!);
+            await this.renderQueryResult(State.Warm, filteredQueryResult, content);
+        });
+    }
+
     private addCopyButton(toolbar: HTMLDivElement, queryResult: QueryResult) {
         const copyButton = createAndAppendElement('button', toolbar);
         setIcon(copyButton, 'lucide-copy');

src/Renderer/Renderer.scss

@@ -16,8 +16,24 @@
 .plugin-tasks-toolbar {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     gap: var(--size-4-1);
+
+    label {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        input {
+            height: 100%;
+            padding-left: 24px;
+        }
+
+        svg {
+            position: absolute;
+            transform: translateX(25%);
+        }
+    }
 }
 
 .tasks-count {

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_-_rendering_queries_should_render_the_toolbar.approved.html

@@ -3,7 +3,12 @@
 -->
 
 <div>
-  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
+  <div class="plugin-tasks-toolbar">
+    <label test-icon="lucide-filter">
+      <input placeholder="Filter by description..." test-tooltip="Filter results" />
+    </label>
+    <button test-icon="lucide-copy" test-tooltip="Copy results"></button>
+  </div>
   <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency"></ul>
   <div class="task-count">0 tasks</div>
 </div>