add hide/show completed tasks

src/task/api.ts

@@ -171,25 +171,33 @@ export function searchTasks({ model }: Context): AuthRequestHandler {
 
     // Read parameters
     const herd = req.params.herd || undefined
+    const filters = query.array(req.query.filter, [])
     const limit = query.integer(req.query.limit, 1, 100) || 10
     const page = query.integer(req.query.page, 1) || 1
     const search = query.str(req.query.search)
     const sort = query.sorts(req.query.sort, ['description', 'position'], ['position', 'ASC'])
 
-    // Build filters and skip
+    // Build filters
     const filter: Record<string, unknown> = {
       _account: req.account._id,
     }
+    // Add herd filter if set.
+    // We don't need to verify access as it is implicitly asserted by the _account filter
     if (herd) {
-      // Add herd filter if set.
-      // We don't need to verify access as it is implicitly asserted by the _account filter
       try {
         filter._herd = new ObjectId(herd)
       } catch (err) {
         return http.badRequest(res, next, { reason: 'invalid herd' })
       }
     }
+    // Hide completed tasks by default
+    if (!filters.includes('showCompleted')) {
+      filter.done = { $eq: false }
+    }
+    // Textual search
     if (search) filter.$text = { $search: search }
+
+    // Set skip
     const skip = (page - 1) * limit
 
     try {

web/src/api/lib.ts

@@ -70,6 +70,7 @@ export class RequestError extends Error {
 
 /** Search and pagination parameters. */
 export interface SearchParams {
+  filter?: string[]
   limit?: number
   page?: number
   search?: string
@@ -102,6 +103,7 @@ export function readSearchParams(up: URLSearchParams): SearchParams {
   if (up.has('page')) params.page = parseInt(up.get('page') as string)
   if (up.has('search')) params.search = up.get('search') as string
 
+  if (up.has('filter')) params.filter = up.getAll('filter')
   if (up.has('sort')) params.sort = up.getAll('sort')
 
   return params
@@ -153,6 +155,10 @@ export function writeSearchParams(params: SearchParams): URLSearchParams {
   if (params.page !== undefined) up.append('page', `${params.page}`)
   if (params.search !== undefined) up.append('search', params.search)
 
+  if (params.filter !== undefined) {
+    for (const filter of params.filter) up.append('filter', filter)
+  }
+
   if (params.sort !== undefined) {
     for (const sort of params.sort) up.append('sort', sort)
   }

web/src/components/SearchForm.tsx

@@ -1,15 +1,15 @@
 import './SearchForm.scss'
 import Button from './button/Button'
 import ButtonSet from './ButtonSet'
-import type { FormEvent } from 'react'
 import FormGroup from './form/FormGroup'
 import FormInput from './form/FormInput'
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
 import Row from './Row'
 import { useRouteSearch } from '@/hooks'
 import { useState } from 'react'
+import type { FormEvent, PropsWithChildren } from 'react'
 
-export default function SearchForm() {
+export default function SearchForm({ children }: PropsWithChildren) {
   const { searchTerms, setSearchTerms } = useRouteSearch()
 
   const [searchInput, setSearchInput] = useState(searchTerms)
@@ -38,6 +38,7 @@ export default function SearchForm() {
             </ButtonSet>
           </Row>
         </FormInput>
+        {children}
       </FormGroup>
     </form>
   )

web/src/components/form/FormToggle.scss

@@ -0,0 +1,13 @@
+@import '@/vars.scss';
+@import './mixins.scss';
+
+.toggle {
+  display: flex;
+  flex-direction: row;
+  font: inherit;
+
+  label {
+    margin-left: $space-s;
+    margin-bottom: $space-xs;
+  }
+}

web/src/components/form/FormToggle.tsx

@@ -0,0 +1,18 @@
+import './FormToggle.scss'
+import type { HTMLAttributes } from 'react'
+
+export interface FormToggleProps extends HTMLAttributes<HTMLInputElement> {
+  checked?: boolean
+  label: string
+}
+
+export default function FormToggle({ className = '', id, label, ...props }: FormToggleProps) {
+  return (
+    <section className={`toggle ${className}`}>
+      <div className="checkbox">
+        <input type="checkbox" id={id} {...props} />
+      </div>
+      <label htmlFor={id}>{label}</label>
+    </section>
+  )
+}

web/src/hooks/routeSearch.ts

@@ -5,6 +5,14 @@ import { useSearchParams } from 'react-router-dom'
 export function useRouteSearch() {
   const [search, setSearch] = useSearchParams()
 
+  function setFilters(filters: string[]) {
+    setSearch(prev => {
+      prev.delete('filter')
+      for (const filter of filters) prev.append('filter', filter)
+      return prev
+    })
+  }
+
   function setLimit(limit: number) {
     setSearch(prev => {
       prev.set('limit', limit.toString())
@@ -47,12 +55,14 @@ export function useRouteSearch() {
   const limit = searchParams.limit || 10
   const page = searchParams.page || 1
 
+  const filter = searchParams.filter || []
   const sort = searchParams.sort || []
 
   return {
-    limit, page, searchTerms, sort,
+    filter, limit, page, searchTerms, sort,
     searchParams, search,
 
+    setFilters,
     setLimit,
     setPage,
     setSearch,

web/src/views/HerdView.tsx

@@ -9,6 +9,7 @@ import type { DragEndEvent } from '@dnd-kit/core'
 import EditButton from '@/components/button/EditButton'
 import FormGroup from '@/components/form/FormGroup'
 import FormInput from '@/components/form/FormInput'
+import FormToggle from '@/components/form/FormToggle'
 import LoadingIndicator from '@/components/LoadingIndicator'
 import Main from '@/components/Main'
 import Notice from '@/components/Notice'
@@ -63,7 +64,7 @@ export default function HerdView() {
   const navigate = useNavigate()
   const { options } = useConnection()
   const updateForm = useTaskUpdateForm()
-  const { limit, page, searchParams, setPage } = useRouteSearch()
+  const { filter, limit, page, searchParams, setFilters, setPage } = useRouteSearch()
 
   const [data, setData] = useState<api.GetHerdResponse>()
   const [taskData, setTaskData] = useState<api.SearchResponse<api.GetTaskResponse>>()
@@ -74,6 +75,7 @@ export default function HerdView() {
   const [loading, setLoading] = useState(false)
 
   const disableSorting = Boolean(searchParams.search)
+  const showCompleted = filter.includes('showCompleted')
 
   async function createTask(data: TaskCreateFormData) {
     if (busy) return
@@ -155,6 +157,11 @@ export default function HerdView() {
     }
   }
 
+  function toggleShowCompleted() {
+    if (showCompleted) setFilters([])
+    else setFilters(['showCompleted'])
+  }
+
   async function toggleTaskDone(task: api.WithId<api.Task>) {
     try {
       setBusy(true)
@@ -239,7 +246,9 @@ export default function HerdView() {
         </ButtonSet>
       </header>
 
-      <SearchForm />
+      <SearchForm>
+        <FormToggle label="Show completed tasks" id="show-completed" checked={showCompleted} onChange={toggleShowCompleted} />
+      </SearchForm>
 
       <Notice error={error} />