From 4f4ce245c67a17bbbb7792559ae1bce4adfa18cd Mon Sep 17 00:00:00 2001
From: Yorick de Wid <yorickdewid@users.noreply.github.com>
Date: Mon, 27 Jul 2026 10:09:59 +0000
Subject: [PATCH] feat(explorer): sort from the filter panel, and say which way

The table headers could already sort, but only on the six columns that
happen to be on screen and only by cycling asc -> desc -> off. "Op
opsteller, Z naar A" was three clicks and an invisible column.

Sorting now sits in the filter popover under a rule of its own:
single-choice, because the API sorts one column. Each column carries its
own words for the two directions -- "nieuwste eerst" rather than
"aflopend", since translating a control is how you end up clicking it
twice to find out what it does.

The active sort becomes a chip beside the filter chips. Same reason the
filters have one: a sort that lives only inside a dropdown is a sort
people forget they set. It matters more here, because Opsteller has no
column in the table to hang an arrow on.

Two things said out loud rather than dressed up: with no sort chosen the
API keeps its own order (coalesce(update_date, create_date) DESC), and
Type/Status sort on the PostgreSQL enum's declaration order -- which
groups the rows but does not rank them (in report.audit_status,
'rejected' precedes 'pending_review').

Saved views now carry sort + order, so "te controleren, oudste eerst" is
one saved question instead of a filter plus a setting to reapply. And
the column headers start at desc like the panel does; two controls
writing one piece of state should not disagree about which way the first
click points.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/Common/FilterBuilder.vue | 100 +++++++++++++++++++++++-
 src/components/Common/FilterChip.vue    |   9 ++-
 src/services/explorer.ts                |  79 ++++++++++++++++---
 src/views/InquiryListView.vue           |   9 ++-
 4 files changed, 177 insertions(+), 20 deletions(-)

diff --git a/src/components/Common/FilterBuilder.vue b/src/components/Common/FilterBuilder.vue
index fd36040..15e1484 100644
--- a/src/components/Common/FilterBuilder.vue
+++ b/src/components/Common/FilterBuilder.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { onClickOutside, onKeyStroke } from '@vueuse/core'
 
 import { INQUIRY_TYPE_LABELS, STATUS_META } from '@/services/inquiryEnums'
-import type { ExplorerQuery } from '@/services/explorer'
+import { SORT_OPTIONS, sortOption, type ExplorerQuery, type SortField } from '@/services/explorer'
 
 /**
  * The `+ Filter` popover.
@@ -16,6 +16,13 @@ import type { ExplorerQuery } from '@/services/explorer'
  * Everything applies immediately. There is no Apply button, because the result
  * count is right next to the popover and watching it move is the fastest way to
  * tell whether you asked the right question.
+ *
+ * Sorting lives here too, under a rule of its own — one column at a time,
+ * unlike the filters above it. The table headers can already sort, but only on
+ * the six columns that happen to be on screen and only by cycling
+ * asc → desc → off, which is three clicks to say "op opsteller, Z → A". This
+ * says it in two, names both directions, and covers the columns the table does
+ * not show.
  */
 const props = defineProps<{ query: ExplorerQuery }>()
 
@@ -51,6 +58,36 @@ function setType(value: number) {
 function setMine(value: 'reviewer' | 'creator' | null) {
   emit('update', { ...props.query, mine: props.query.mine === value ? null : value, page: 1 })
 }
+
+/**
+ * Picking a column sorts it descending — newest, highest, most recent first is
+ * what people mean by "sorteer op datum". Picking the column it already sorts
+ * on turns sorting off again, so the same button is both the on and the off.
+ */
+function setSort(value: SortField) {
+  const off = props.query.sort === value
+  emit('update', {
+    ...props.query,
+    sort: off ? null : value,
+    order: off ? 'desc' : props.query.order,
+    page: 1,
+  })
+}
+
+function setOrder(order: 'asc' | 'desc') {
+  emit('update', { ...props.query, order, page: 1 })
+}
+
+/** The active column's own words for its two directions. */
+const direction = computed(() => {
+  const option = props.query.sort ? sortOption(props.query.sort) : null
+  return option
+    ? [
+        { value: 'desc' as const, label: option.desc },
+        { value: 'asc' as const, label: option.asc },
+      ]
+    : []
+})
 </script>
 
 <template>
@@ -61,7 +98,7 @@ function setMine(value: 'reviewer' | 'creator' | null) {
       :aria-expanded="open"
       @click="open = !open"
     >
-      + Filter
+      Filteren &amp; sorteren
     </button>
 
     <div
@@ -135,6 +172,63 @@ function setMine(value: 'reviewer' | 'creator' | null) {
              so this one narrows the page you are looking at, not the query. -->
         <p class="text-sm mt-2 text-label">Type filtert de zichtbare pagina, niet de hele set.</p>
       </section>
+
+      <!-- Sorting is a different verb from filtering, so it sits below a rule
+           rather than as a fourth chip group. Unlike the sets above it, this
+           one is single-choice: the API sorts on one column. -->
+      <section class="border-t border-divider pt-3.5">
+        <h3 class="studio-label mb-2">SORTEREN OP</h3>
+        <div class="flex flex-wrap gap-1.5">
+          <button
+            v-for="option in SORT_OPTIONS"
+            :key="option.value"
+            type="button"
+            class="text-base rounded-full border px-2.5 py-1 font-medium"
+            :class="
+              query.sort === option.value
+                ? 'border-blue-border bg-blue-tint text-blue-ink'
+                : 'border-line bg-surface text-muted hover:border-line-hover'
+            "
+            :aria-pressed="query.sort === option.value"
+            @click="setSort(option.value)"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+
+        <!-- The direction only exists once a column does, and its words come
+             from that column: "oudste eerst" beats "oplopend" on a date. -->
+        <div v-if="direction.length" class="mt-2 flex flex-wrap items-center gap-1.5">
+          <button
+            v-for="option in direction"
+            :key="option.value"
+            type="button"
+            class="text-base rounded-full border px-2.5 py-1 font-medium"
+            :class="
+              query.order === option.value
+                ? 'border-blue-border bg-blue-tint text-blue-ink'
+                : 'border-line bg-surface text-muted hover:border-line-hover'
+            "
+            :aria-pressed="query.order === option.value"
+            @click="setOrder(option.value)"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+
+        <p class="text-sm mt-2 text-label">
+          <template v-if="query.sort">
+            Klik dezelfde kolom nog eens om terug te gaan naar de standaardvolgorde.
+          </template>
+          <template v-else>
+            Zonder keuze houdt de API haar eigen volgorde aan (laatst gewijzigd eerst).
+          </template>
+        </p>
+        <p v-if="query.sort === 'type' || query.sort === 'status'" class="text-sm mt-1 text-label">
+          Type en status volgen de volgorde van de database-enum: dat groepeert de rijen,
+          maar rangschikt ze niet.
+        </p>
+      </section>
     </div>
   </div>
 </template>
diff --git a/src/components/Common/FilterChip.vue b/src/components/Common/FilterChip.vue
index 9e3d164..f9839ae 100644
--- a/src/components/Common/FilterChip.vue
+++ b/src/components/Common/FilterChip.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 /**
- * An active filter, shown as `key: value ×`.
+ * An active part of the question, shown as `key: value ×`.
  *
  * Filters that live only inside a dropdown are filters people forget they set,
- * and then report the list as broken. A chip per filter makes the current
- * question visible and removable in one click.
+ * and then report the list as broken. A chip per filter — and per sort, which
+ * has the same problem — makes the current question visible and removable in
+ * one click.
  */
 defineProps<{ label: string; value: string }>()
 
@@ -20,7 +21,7 @@ defineEmits<{ remove: [] }>()
     <button
       type="button"
       class="ml-0.5 leading-none text-blue-soft hover:text-blue-ink"
-      :aria-label="`Filter ${label} verwijderen`"
+      :aria-label="`${label} verwijderen`"
       @click="$emit('remove')"
     >
       ×
diff --git a/src/services/explorer.ts b/src/services/explorer.ts
index 36e8793..8622ef6 100644
--- a/src/services/explorer.ts
+++ b/src/services/explorer.ts
@@ -98,16 +98,53 @@ function ints(raw: unknown, valid: (n: number) => boolean): number[] {
   return out
 }
 
-const SORT_FIELDS: readonly SortField[] = [
-  'id',
-  'document_name',
-  'type',
-  'document_date',
-  'creator',
-  'reviewer',
-  'status',
+/* -------------------------------------------------------------- sort fields */
+
+export interface SortOption {
+  value: SortField
+  label: string
+  /** What the two directions actually mean for this column. */
+  asc: string
+  desc: string
+}
+
+/**
+ * The sortable columns, in the order the filter popover offers them.
+ *
+ * Each direction gets a label of its own rather than a shared
+ * "oplopend / aflopend": on a date column that is a word people have to
+ * translate into "oudste eerst" before they can use it, and translating a
+ * control is how you end up clicking it twice to find out what it does.
+ *
+ * `creator` and `reviewer` sort on the user's e-mail address server-side —
+ * which is the string the table shows, so A→Z means what it looks like.
+ * `type` and `status` sort on the PostgreSQL enum's declaration order: that
+ * groups the rows, but the order between groups carries no meaning (in
+ * `report.audit_status`, `rejected` precedes `pending_review`). Said out loud
+ * in the popover rather than dressed up as a ranking.
+ */
+export const SORT_OPTIONS: readonly SortOption[] = [
+  { value: 'document_date', label: 'Datum', asc: 'oudste eerst', desc: 'nieuwste eerst' },
+  { value: 'id', label: 'ID', asc: 'laagste eerst', desc: 'hoogste eerst' },
+  { value: 'document_name', label: 'Naam', asc: 'A → Z', desc: 'Z → A' },
+  { value: 'type', label: 'Type', asc: 'oplopend', desc: 'aflopend' },
+  { value: 'status', label: 'Status', asc: 'oplopend', desc: 'aflopend' },
+  { value: 'creator', label: 'Opsteller', asc: 'A → Z', desc: 'Z → A' },
+  { value: 'reviewer', label: 'Beoordelaar', asc: 'A → Z', desc: 'Z → A' },
 ]
 
+const SORT_FIELDS: readonly SortField[] = SORT_OPTIONS.map((option) => option.value)
+
+export function sortOption(field: SortField): SortOption {
+  return SORT_OPTIONS.find((option) => option.value === field) ?? SORT_OPTIONS[0]
+}
+
+/** `datum · nieuwste eerst` — the sort as one readable phrase. */
+export function describeSort(sort: SortField, order: 'asc' | 'desc'): string {
+  const option = sortOption(sort)
+  return `${option.label.toLowerCase()} · ${order === 'asc' ? option.asc : option.desc}`
+}
+
 export function parseQuery(raw: Record<string, unknown>): ExplorerQuery {
   const page = Number(raw.page)
   const sort = SORT_FIELDS.find((field) => field === raw.sort) ?? null
@@ -195,7 +232,7 @@ const MINE_LABELS: Record<'reviewer' | 'creator', string> = {
   creator: 'ik stelde op',
 }
 
-/** One removable chip per active filter — see `FilterChip`. */
+/** One removable chip per active filter, plus one for the sort — see `FilterChip`. */
 export function chipsFor(query: ExplorerQuery): Chip[] {
   const chips: Chip[] = []
 
@@ -226,6 +263,19 @@ export function chipsFor(query: ExplorerQuery): Chip[] {
     })
   }
 
+  // The sort is not a filter, but it belongs here for the same reason the
+  // filters do: it changes which rows you see first, it survives in a shared
+  // link, and half of what you can sort on (opsteller) has no column in the
+  // table to carry an arrow. Clearing it returns to the API's own ordering.
+  if (query.sort) {
+    chips.push({
+      id: 'sort',
+      label: 'sortering',
+      value: describeSort(query.sort, query.order),
+      clear: (q) => ({ ...q, sort: null, order: 'desc', page: 1 }),
+    })
+  }
+
   return chips
 }
 
@@ -258,7 +308,16 @@ export function saveView(label: string, query: ExplorerQuery): SavedView {
     // updates the view instead of stacking two tabs with the same name.
     key: `custom:${label.toLowerCase().replace(/\s+/g, '-')}`,
     label,
-    query: { q: query.q, status: query.status, type: query.type, mine: query.mine },
+    // The sort travels with the view: "te controleren, oudste eerst" is one
+    // saved question, not a filter plus a setting you have to reapply.
+    query: {
+      q: query.q,
+      status: query.status,
+      type: query.type,
+      mine: query.mine,
+      sort: query.sort,
+      order: query.order,
+    },
     builtin: false,
   }
   const next = [...customViews().filter((v) => v.key !== view.key), view]
diff --git a/src/views/InquiryListView.vue b/src/views/InquiryListView.vue
index 15f1cec..a08266f 100644
--- a/src/views/InquiryListView.vue
+++ b/src/views/InquiryListView.vue
@@ -182,12 +182,15 @@ const sortField = computed(() =>
   Object.keys(SORT_KEYS).find((field) => SORT_KEYS[field] === query.value.sort) ?? null,
 )
 
-// asc → desc → back to default recency ordering.
+// desc → asc → back to default recency ordering. Descending first, because
+// that is what "sorteer op datum" means, and because the filter popover's sort
+// section starts there too — two controls writing one piece of state should not
+// disagree about which way the first click points.
 function onSort(field: string) {
   const key = SORT_KEYS[field]
   if (!key) return
-  if (query.value.sort !== key) push({ ...query.value, sort: key, order: 'asc', page: 1 })
-  else if (query.value.order === 'asc') push({ ...query.value, order: 'desc', page: 1 })
+  if (query.value.sort !== key) push({ ...query.value, sort: key, order: 'desc', page: 1 })
+  else if (query.value.order === 'desc') push({ ...query.value, order: 'asc', page: 1 })
   else push({ ...query.value, sort: null, order: 'desc', page: 1 })
 }