todo,todo-backend: add support for filtering

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/todo/src/api/TodoClient.ts

@@ -38,6 +38,7 @@ export class TodoClient implements TodoApi {
     offset,
     limit,
     orderBy,
+    filters,
   }: TodoListOptions): Promise<TodoListResult> {
     const baseUrl = await this.discoveryApi.getBaseUrl('todo');
     const token = await this.identityApi.getIdToken();
@@ -55,6 +56,11 @@ export class TodoClient implements TodoApi {
     if (orderBy) {
       query.set('orderBy', `${orderBy.field}=${orderBy.direction}`);
     }
+    if (filters) {
+      for (const filter of filters) {
+        query.append('filter', `${filter.field}=${filter.value}`);
+      }
+    }
 
     const res = await fetch(`${baseUrl}/v1/todos?${query}`, {
       headers: token

plugins/todo/src/api/types.ts

@@ -37,14 +37,21 @@ export type TodoItem = {
   repoFilePath?: string;
 };
 
+type Fields = 'text' | 'tag' | 'author' | 'viewUrl' | 'repoFilePath';
+
 export type TodoListOptions = {
   entity?: Entity;
   offset?: number;
   limit?: number;
   orderBy?: {
-    field: 'text' | 'tag' | 'author' | 'viewUrl' | 'repoFilePath';
+    field: Fields;
     direction: 'asc' | 'desc';
   };
+  filters?: {
+    field: Fields;
+    /** Value to filter by, with '*' used as wildcard */
+    value: string;
+  }[];
 };
 
 export type TodoListResult = {

plugins/todo/src/components/TodoList/TodoList.tsx

@@ -33,6 +33,7 @@ const columns: TableColumn<TodoItem>[] = [
   {
     title: 'Tag',
     field: 'tag',
+    filtering: false,
   },
   {
     title: 'Text',
@@ -57,6 +58,7 @@ const columns: TableColumn<TodoItem>[] = [
   {
     title: 'Author',
     field: 'author',
+    width: '20%',
     render: ({ author }) => <OverflowTooltip text={author} />,
   },
 ];
@@ -80,7 +82,9 @@ export const TodoList = () => {
         sorting: true,
         draggable: false,
         paging: true,
-        paginationType: 'stepped',
+        filtering: true,
+        debounceInterval: 500,
+        filterCellStyle: { padding: '0 16px 0 20px' },
       }}
       columns={columns}
       data={async query => {
@@ -97,6 +101,10 @@ export const TodoList = () => {
                 field: query.orderBy.field,
                 direction: query.orderDirection,
               } as TodoListOptions['orderBy']),
+            filters: query?.filters?.map(filter => ({
+              field: filter.column.field!,
+              value: `*${filter.value}*`,
+            })) as TodoListOptions['filters'],
           });
           return {
             data: result.items,