Boards that keep growing stay readable (refs #293) 657e7d5c9da9

- **Boards that keep growing stay readable (#293, first part):** a column of more than 30 cards shows its newest 30 (cards join a column at its end), says how many older ones it leaves out and links to "show all"; a filter above the board finds cards by title or reference, and by state (open, closed, landed, draft), in every column, counting "3 of 312".

    /// Cards the page leaves out (#293): the oldest of a long column, or

    /// those a filter does not match; `total` is how many it holds.

    pub hidden: usize,

    pub total: usize,

/// A column longer than this shows its newest cards only, with "show all"

/// (#293): a board's Done column otherwise grows without end.

pub const COLUMN_SHOWN: usize = 30;

/// How the board page shows its cards (#293).

#[derive(Deserialize, Default)]

pub struct BoardQuery {

    /// The column shown whole.

    #[serde(default)]

    all: Option<i64>,

    /// Only cards whose title or reference holds this.

    #[serde(default)]

    q: Option<String>,

    /// Only cards in this state (`open`, `closed`, `landed`…).

    #[serde(default)]

    state: Option<String>,

}

impl BoardQuery {

    fn text(&self) -> String {

        self.q.as_deref().map(str::trim).unwrap_or("").to_string()

    }

    fn state(&self) -> String {

        self.state.as_deref().map(str::trim).unwrap_or("").to_ascii_lowercase()

    }

}

/// Filter and cut the columns as `view` says.

fn shape(columns: &mut [ColumnView], view: &BoardQuery) {

    let (q, state) = (view.text().to_lowercase(), view.state());

    for col in columns.iter_mut() {

        col.total = col.cards.len();

        if !q.is_empty() || !state.is_empty() {

            col.cards.retain(|c| {

                (q.is_empty() || c.title.to_lowercase().contains(&q) || c.reference.to_lowercase().contains(&q))

                    && (state.is_empty() || c.state.eq_ignore_ascii_case(&state))

            });

        } else if col.cards.len() > COLUMN_SHOWN && view.all != Some(col.column.id) {

            // Cards join a column at its end: the newest are the last.

            let cut = col.cards.len() - COLUMN_SHOWN;

            col.cards.drain(..cut);

        }

        col.hidden = col.total - col.cards.len();

    }

}

    /// The filter the page shows (#293), and whether one is set.

    q: String,

    state: String,

    filtered: bool,

#[allow(clippy::too_many_arguments)]

    view: &BoardQuery,

    let (mut columns, repos) = board_columns(app, viewer.account(), owner, &project).await.map_err(e)?;

    shape(&mut columns, view);

    let (q, state) = (view.text(), view.state());

    let filtered = !q.is_empty() || !state.is_empty();

    Ok(Page(BoardPage { shell, project, columns, repos, can_edit, can_manage: r.edit, notice, error, transfer_to, q, state, filtered }))

        let total = views.len();

        columns.push(ColumnView { column, cards: views, hidden: 0, total });

pub async fn show(

    State(app): State<Shared>,

    viewer: Viewer,

    Path((owner, number)): Path<(String, i64)>,

    Query(view): Query<BoardQuery>,

) -> Result<Response, Error> {

    Ok(board(&app, shell, &viewer, &owner, number, None, None, &view).await?.into_response())

        return Ok(board(

            &app,

            shell,

            &viewer,

            &owner,

            number,

            None,

            Some("This project is closed; reopen it to change it.".into()),

            &BoardQuery::default(),

        )

        .await?

        .into_response());

    Ok(board(&app, shell, &viewer, &owner, number, notice, error, &BoardQuery::default()).await?.into_response())

/// #293: a long column shows its newest cards, says how many older ones it

/// leaves out and links to them all; a filter finds cards in any column.

async fn a_long_column_shows_its_newest_cards() {

    let h = hub().await;

    let app = &h.app;

    let andy = register(app, "andy").await;

    let csrf = csrf_of(&get(app, "/projects/andy", Some(&andy)).await.body);

    post(app, "/projects/andy", Some(&andy), &format!("_csrf={csrf}&title=Roadmap")).await;

    let (project, done): (i64, i64) =

        sqlx::query_as("SELECT p.id, c.id FROM projects p JOIN project_columns c ON c.project_id = p.id WHERE c.name = 'Done'")

            .fetch_one(&app.db)

            .await

            .unwrap();

    for i in 1..=35 {

        sqlx::query(

            "INSERT INTO project_cards (project_id, column_id, position, kind, note, created_ms) VALUES ($1, $2, $3, 'note', $4, 0)",

        )

        .bind(project)

        .bind(done)

        .bind(i)

        .bind(format!("card-{i:03}"))

        .execute(&app.db)

        .await

        .unwrap();

    }

    let board = get(app, "/projects/andy/1", Some(&andy)).await.body;

    assert!(board.contains("5 older cards not shown") && board.contains(&format!("?all={done}#col-{done}\">show all 35</a>")), "{board}");

    assert!(board.contains("card-006") && board.contains("card-035") && !board.contains("card-005"), "the newest 30");

    assert!(board.contains(">35</span></h2>"), "the count is the column's");

    let all = get(app, &format!("/projects/andy/1?all={done}"), Some(&andy)).await.body;

    assert!(all.contains("card-001") && !all.contains("older cards not shown"), "show all");

    let found = get(app, "/projects/andy/1?q=CARD-002", Some(&andy)).await.body;

    assert!(found.contains("card-002") && !found.contains("card-030") && found.contains("1 of 35"), "{found}");

    assert!(found.contains(">clear</a>"));

    let open = get(app, "/projects/andy/1?state=open", Some(&andy)).await.body;

    assert!(!open.contains("card-0"), "notes have no state");

}

#[tokio::test(flavor = "multi_thread")]

<form class="board-filter" method="get" action="/projects/{{ project.owner }}/{{ project.number }}" role="search">

  <label class="visually-hidden" for="board-q">Filter cards</label><input type="search" id="board-q" name="q" value="{{ q }}" placeholder="filter cards">

  <label class="visually-hidden" for="board-state">State</label><select id="board-state" name="state"><option value="">any state</option>{% for s in ["open", "closed", "landed", "draft"] %}<option{% if state == *s %} selected{% endif %}>{{ s }}</option>{% endfor %}</select>

  <button type="submit" class="small">FILTER</button>{% if filtered %} <a class="small" href="/projects/{{ project.owner }}/{{ project.number }}">clear</a>{% endif %}

</form>

  <header><h2 id="col-{{ col.column.id }}">{{ col.column.name }} <span class="count-chip">{% if filtered %}{{ col.cards.len() }} of {{ col.total }}{% else %}{{ col.total }}{% endif %}</span></h2>

  {% if col.hidden > 0 && !filtered %}<p class="small mute col-hidden">{{ col.hidden }} older card{% if col.hidden != 1 %}s{% endif %} not shown · <a href="/projects/{{ project.owner }}/{{ project.number }}?all={{ col.column.id }}#col-{{ col.column.id }}">show all {{ col.total }}</a></p>{% endif %}

.board-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }

.board-filter input[type=search] { min-width: 0; flex: 1 1 14em; max-width: 24em; }

.col-hidden { margin: 0 0 6px; }