Atomic Angular — Doc interne

Collections

A paginated list of the user's saved collections (baskets), with an add-to-collection dialog and a delete confirmation — built on the shared ListPanel primitives.

A collection (the API calls it a basket) is a user-managed group of documents, persisted server-side through UserSettingsStore. <collections> renders the current user's collections as a list; the AddToCollection and DeleteCollection callables handle adding articles to one and removing one entirely.

Concept — basket

A basket is the backend's name for a collection: a named list of document ids, stored per user. Basket (from @sinequa/atomic-angular's models) is { name: string; ids?: string[] } — the type every component on this page reads and writes.

Minimal example

The collections list
sample.component.ts
import { Component } from "@angular/core";
import { CollectionsComponent } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [CollectionsComponent],
  template: `<collections />`,
})
export class SampleComponent {}

Clicking a collection syncs QueryParamsStore.basket and navigates to /search?b=<name> — the sync happens before the navigation so a consuming app's own allowEmptySearch: false guard already sees the basket by the time the destination page evaluates it (see Pitfalls).

How it works

itemClick(collection) delete({item, index}) loadMore() DeleteCollection.call() patch(basket) then navigate deleteBasket(index) CollectionsComponent ListPanelHeader ListPanel ListPanelFooter DeleteCollectionDialog Router UserSettingsStore

CollectionsComponent itself never adds documents to a collection — that is a separate entry point, callable from anywhere a set of articles is available (a result row, a multi-selection toolbar):

Adding the current selection to a collection
add-button.component.ts
import { Component, inject, Injector } from "@angular/core";
import { AddToCollection } from "@sinequa/atomic-angular";
import type { Article } from "@sinequa/atomic";

@Component({
  selector: "add-button",
  template: `<button (click)="add()">Add to collection…</button>`,
})
export class AddButtonComponent {
  private readonly injector = inject(Injector);

  protected async add() {
    // Accepts one article or an array — a multi-selection passes the whole array at once.
    const article: Article = { id: "doc-1", title: "Q3 Report" } as Article;
    const event = await AddToCollection.call(article, { injector: this.injector });

    // "dialog-yes" (added) / "dialog-no" (removed, toggled off) / the raw close event otherwise.
    if (event === "dialog-yes" || event === "dialog-no") {
      console.log("Collections updated");
    }
  }
}

The dialog shows a checkbox per collection, checked (or indeterminate, for several articles) if the article is already in it — ticking one toggles membership immediately, no separate "confirm" step; a "Create collection" screen at the bottom lets the user start a brand-new one already containing the article(s).

Keyboard

Same list, same keys as recent searches: ↑ / ↓ to move, Enter to open, Delete to remove (Backspace too on a Mac). While the keyboard focus is in the list, the focused row and the footer say so — a mouse click never shows it.

Options

Prop

Type

CollectionsComponent has no outputs — clicking a collection navigates directly via the router.

Pitfalls

What's next

On this page