Sorting

The view below is grid/Sorting from qlive-test, unchanged, running in your browser on data recorded from the running application. Click a header to sort by that column, or pick an order from the select: several fields at once, or an expression such as the last digit of num.

There is no server behind it. The view’s query document holds all the rows it was recorded with and answers update() by filtering, sorting and paging them in the browser, the way it answers from the server in the application.

Demo

Sorting.tsx

qlive-test/frontend/src/app/grid/Sorting.tsx

import {DataGrid, decompileFilter, i18n, ResolvedColumn, unawaited, useInjection} from "@qlivedev/qlive-ts";
import {CNode, field, FieldExpression, matchSort, matchSortPart, value} from "@qlivedev/qlive-ts/filter";
import { Q_FooList, Q_FooListResult } from "./Q_FooList";
import FilterDSLPrinter, {sortExpression} from "../../component/FilterDSLPrinter";
import filterAsTitle from "../../util/filterAsTitle";
import React from "react";

/**
 * Sort orders a header click can't set, offered by a control of the view's own.
 *
 * A header click always sorts by that column alone. Anything more -- several fields, an expression -- is set on the
 * document from outside, and the headers show it as well as they can: the direction and the position of each field
 * in the order. A column whose field takes part in an expression, like num in its last digit, shows the expression's
 * direction and position in a color of its own.
 */
const ORDERS = [
    {label: i18n("Owner, then name"), sortFields: ["owner.login", "name"]},
    {label: i18n("Flagged first, then largest num"), sortFields: ["!flag", "!num"]},
    {label: i18n("Last digit of num"), sortFields: [field("num").mod(value(10))]},
    {label: i18n("Owner, then last digit of num"), sortFields: ["owner.login", field("num").mod(value(10))]}
];

export default function Sorting()
{
    const foos: Q_FooListResult = useInjection(Q_FooList, {config: {pageSize: 5}});
    const {sortFields} = foos.config;

    return (
        <>
            <div className="grid-example">
                <h1>Sort orders</h1>
                <p>
                    <select
                        value=""
                        onChange={ ev => unawaited(foos.update({sortFields: ORDERS[Number(ev.target.value)].sortFields, offset: 0})) }
                    >
                        <option value="" disabled>{ i18n("Sort by …") }</option>
                        { ORDERS.map((order, i) => <option key={ i } value={ i }>{ order.label }</option>) }
                    </select>
                </p>
                <DataGrid doc={ foos } columns={ ["name", "num", "flag", "owner"] } headerTitle={ filterAsTitle(foos.config) }/>
            </div>

            <p>
                { i18n("Current sorting order") }
            </p>
            <FilterDSLPrinter value={sortFields}/>
        </>
    );
}