@rebasepro/admin 0.14.0 → 0.14.1-canary.g7e666eb

package/src/components/CollectionViewBinding/SortButton.tsx

@@ -1,4 +1,4 @@
-import type { Properties } from "@rebasepro/types";
+import type { OrderByTuple, Properties } from "@rebasepro/types";
 
 import React, { useCallback, useMemo, useState } from "react";
 import { EntityTableController } from "@rebasepro/admin-types";
@@ -7,11 +7,14 @@ import {
     ArrowUpDownIcon,
     ArrowUpIcon,
     Button,
+    ChevronDownIcon,
+    ChevronUpIcon,
     cls,
     iconSize,
     IconButton,
     Popover,
-    Typography
+    Typography,
+    XIcon
 } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 import { getSortablePropertyOptions } from "../CollectionTableBinding/column_utils";
@@ -33,16 +36,26 @@ export type SortButtonProps<M extends Record<string, unknown>> = {
 };
 
 /**
- * Toolbar control that orders the collection by one property.
+ * Toolbar control that orders the collection.
  *
  * The table orders by clicking a column header, which leaves every other view
  * mode — list, cards, and either of them inside a split view — with no way to
  * order at all, even though the controller has always carried `sortBy` and the
  * query has always honoured it. This binds a control to it.
  *
- * Clicking the active property flips its direction, so ascending → descending
- * is one click rather than a trip through a direction selector; clicking a
- * different one starts it ascending. The popover stays open through both.
+ * It edits the *whole* order rather than a single key. A sort can have several
+ * keys, applied in the order shown: the second decides between rows the first
+ * calls equal, the third between rows the first two do. So the active keys sit
+ * at the top, numbered and movable, and the properties below them are the ones
+ * that can still be added under the last. Shift-clicking a column header does
+ * the same thing from the table; this is the view for the modes that have no
+ * headers, and the only place the order between keys can be changed.
+ *
+ * Clicking an active key flips its direction, so ascending → descending is one
+ * click rather than a trip through a direction selector; clicking an inactive
+ * one appends it ascending. The popover stays open through all of it — building
+ * a two-key order out of a control that closes on every click is four round
+ * trips through a button.
  */
 export function SortButton<M extends Record<string, unknown>>({
     tableController,
@@ -64,11 +77,18 @@ export function SortButton<M extends Record<string, unknown>>({
         checkFilterCombination
     } = tableController;
 
-    const activeKey = sortBy?.[0];
-    const activeDirection = sortBy?.[1];
+    const keys = useMemo(() => (sortBy ?? []) as OrderByTuple[], [sortBy]);
+    const activeIndex = useMemo(() => {
+        const index = new Map<string, { direction: "asc" | "desc"; position: number }>();
+        keys.forEach(([key, direction], position) => {
+            if (!index.has(key)) index.set(key, { direction,
+position });
+        });
+        return index;
+    }, [keys]);
 
-    const applySort = useCallback((next?: [string, "asc" | "desc"]) => {
-        setSortBy?.(next);
+    const applySort = useCallback((next?: OrderByTuple[]) => {
+        setSortBy?.((next && next.length > 0 ? next : undefined) as Parameters<NonNullable<typeof setSortBy>>[0]);
         // Re-ordering a partially loaded collection is the same event as
         // clicking a table header: the rows already fetched are no longer the
         // ones the query answers with, so pagination starts over rather than
@@ -78,21 +98,41 @@ export function SortButton<M extends Record<string, unknown>>({
             setItemCount?.(pageSize);
     }, [setSortBy, setItemCount, pageSize]);
 
+    /** Flip an active key's direction, or append an inactive one ascending. */
     const onOptionClick = useCallback((key: string) => {
-        if (key === activeKey) {
-            applySort([key, activeDirection === "asc" ? "desc" : "asc"]);
-        } else {
-            applySort([key, "asc"]);
+        const active = activeIndex.get(key);
+        if (!active) {
+            applySort([...keys, [key, "asc"]]);
+            return;
         }
-    }, [activeKey, activeDirection, applySort]);
+        applySort(keys.map(entry => entry[0] === key
+            ? [key, active.direction === "asc" ? "desc" : "asc"] as OrderByTuple
+            : entry));
+    }, [activeIndex, applySort, keys]);
+
+    const removeKey = useCallback((key: string) => {
+        applySort(keys.filter(([existing]) => existing !== key));
+    }, [applySort, keys]);
+
+    /** Swap a key with its neighbour, which is what changes which one decides. */
+    const moveKey = useCallback((position: number, delta: -1 | 1) => {
+        const target = position + delta;
+        if (target < 0 || target >= keys.length) return;
+        const next = [...keys];
+        [next[position], next[target]] = [next[target], next[position]];
+        applySort(next);
+    }, [applySort, keys]);
 
     if (!setSortBy || options.length === 0) {
         return null;
     }
 
-    const activeOption = options.find(option => option.key === activeKey);
-    const label = activeOption
-        ? `${t("sort_by")}: ${activeOption.title}`
+    const primary = keys[0];
+    const primaryOption = primary ? options.find(option => option.key === primary[0]) : undefined;
+    const label = primaryOption
+        ? keys.length > 1
+            ? `${t("sort_by")}: ${primaryOption.title} +${keys.length - 1}`
+            : `${t("sort_by")}: ${primaryOption.title}`
         : t("sort");
 
     // Icon only, at every width. The arrow says which way the order runs; which
@@ -105,25 +145,28 @@ export function SortButton<M extends Record<string, unknown>>({
     // second time in the same click and the popover would never open; a
     // `Tooltip` in between would swallow the trigger's ref.
     const arrowSize = compact ? iconSize.smallest : iconSize.small;
+    const primaryDirection = primary?.[1];
 
     const trigger = (
         <IconButton
             size={"small"}
             aria-label={label}
             title={label}
-            className={cls(activeOption && "text-primary")}
+            className={cls(primaryOption && "text-primary")}
         >
             {/* Same icon size as the filter controls it sits between: 16 in the
                 split view's narrow toolbar, 20 everywhere else. It was a flat
                 16, which read as a smaller button next to them. */}
-            {activeDirection === "desc"
+            {primaryDirection === "desc"
                 ? <ArrowDownIcon size={arrowSize}/>
-                : activeDirection === "asc"
+                : primaryDirection === "asc"
                     ? <ArrowUpIcon size={arrowSize}/>
                     : <ArrowUpDownIcon size={arrowSize}/>}
         </IconButton>
     );
 
+    const inactiveOptions = options.filter(option => !activeIndex.has(option.key));
+
     return (
         <Popover
             open={open}
@@ -133,7 +176,7 @@ export function SortButton<M extends Record<string, unknown>>({
             align="start"
             trigger={trigger}
         >
-            <div className="py-2 min-w-[240px] flex flex-col">
+            <div className="py-2 min-w-[280px] max-w-[360px] flex flex-col">
                 <Typography
                     variant="caption"
                     color="secondary"
@@ -142,43 +185,112 @@ export function SortButton<M extends Record<string, unknown>>({
                     {t("sort_by")}
                 </Typography>
 
-                <div className="max-h-[320px] overflow-y-auto flex flex-col">
-                    {options.map(({ key, title, property }) => {
-                        const active = key === activeKey;
+                {keys.length > 0 && (
+                    <div className="flex flex-col">
+                        {keys.map(([key, direction], position) => {
+                            const option = options.find(o => o.key === key);
+                            return (
+                                <div
+                                    key={key}
+                                    className="flex items-center gap-1 pl-3 pr-2 py-1 text-sm text-primary"
+                                >
+                                    {/* The rank, not decoration: it is the only
+                                        thing on screen saying which key wins. */}
+                                    <span className="flex-shrink-0 w-4 text-xs tabular-nums text-text-secondary dark:text-text-secondary-dark">
+                                        {position + 1}
+                                    </span>
+                                    <button
+                                        type="button"
+                                        onClick={() => onOptionClick(key)}
+                                        title={direction === "asc" ? t("sort_descending") : t("sort_ascending")}
+                                        className="flex items-center gap-2 flex-grow min-w-0 text-left cursor-pointer"
+                                    >
+                                        {option && (
+                                            <span className="flex-shrink-0 flex items-center">
+                                                {getIconForProperty(option.property, "smallest")}
+                                            </span>
+                                        )}
+                                        <span className="flex-grow truncate">{option?.title ?? key}</span>
+                                        <span className="flex-shrink-0 flex items-center">
+                                            {direction === "desc"
+                                                ? <ArrowDownIcon size={iconSize.smallest}/>
+                                                : <ArrowUpIcon size={iconSize.smallest}/>}
+                                        </span>
+                                    </button>
+                                    {keys.length > 1 && (
+                                        <>
+                                            <IconButton
+                                                size="smallest"
+                                                aria-label={t("sort_move_up")}
+                                                title={t("sort_move_up")}
+                                                disabled={position === 0}
+                                                onClick={() => moveKey(position, -1)}
+                                            >
+                                                <ChevronUpIcon size={iconSize.smallest}/>
+                                            </IconButton>
+                                            <IconButton
+                                                size="smallest"
+                                                aria-label={t("sort_move_down")}
+                                                title={t("sort_move_down")}
+                                                disabled={position === keys.length - 1}
+                                                onClick={() => moveKey(position, 1)}
+                                            >
+                                                <ChevronDownIcon size={iconSize.smallest}/>
+                                            </IconButton>
+                                        </>
+                                    )}
+                                    <IconButton
+                                        size="smallest"
+                                        aria-label={t("sort_remove_key")}
+                                        title={t("sort_remove_key")}
+                                        onClick={() => removeKey(key)}
+                                    >
+                                        <XIcon size={iconSize.smallest}/>
+                                    </IconButton>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+
+                {inactiveOptions.length > 0 && (
+                    <Typography
+                        variant="caption"
+                        color="secondary"
+                        className="font-medium uppercase tracking-wider px-3 pt-2 pb-1"
+                    >
+                        {keys.length > 0 ? t("sort_then_by") : ""}
+                    </Typography>
+                )}
+
+                <div className="max-h-[280px] overflow-y-auto flex flex-col">
+                    {inactiveOptions.map(({ key, title, property }) => {
                         // A driver may refuse a sort next to the filter that is
                         // already applied. Offering it would turn the click
                         // into a failed request, so it is disabled with the
                         // same authority the table headers ask.
                         const disabled = checkFilterCombination
-                            ? !checkFilterCombination(filterValues ?? {}, [key, active && activeDirection === "asc" ? "desc" : "asc"])
+                            ? !checkFilterCombination(filterValues ?? {}, [...keys, [key, "asc"]])
                             : false;
                         return (
                             <button
                                 key={key}
                                 type="button"
                                 role="menuitemradio"
-                                aria-checked={active}
+                                aria-checked={false}
                                 disabled={disabled}
                                 onClick={() => onOptionClick(key)}
                                 className={cls(
                                     "flex items-center gap-2 px-3 py-1.5 text-sm text-left w-full",
                                     disabled
                                         ? "opacity-50 cursor-not-allowed"
-                                        : "cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900",
-                                    active && "text-primary"
+                                        : "cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900"
                                 )}
                             >
                                 <span className="flex-shrink-0 flex items-center">
                                     {getIconForProperty(property, "smallest")}
                                 </span>
                                 <span className="flex-grow truncate">{title}</span>
-                                {active && (
-                                    <span className="flex-shrink-0 flex items-center">
-                                        {activeDirection === "desc"
-                                            ? <ArrowDownIcon size={iconSize.smallest}/>
-                                            : <ArrowUpIcon size={iconSize.smallest}/>}
-                                    </span>
-                                )}
                             </button>
                         );
                     })}
@@ -189,7 +301,7 @@ export function SortButton<M extends Record<string, unknown>>({
                         variant="text"
                         size="small"
                         className="w-full"
-                        disabled={!activeOption}
+                        disabled={keys.length === 0}
                         onClick={() => applySort(undefined)}
                     >
                         {t("clear_sort")}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -284,7 +284,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     filter={filterValues as any}
                     onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
                     sortBy={sortBy}
-                    onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
+                    onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"][]) => void)}
                     hoverRow={hoverRow}
                     initialScroll={initialScroll}
                     onScroll={onScroll}