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
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
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):
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
Collections & labels
Grouping documents into a user-managed collection, and tagging them with shared or personal labels.
Labels
Public and private labels on a document — an autosuggest multi-select field, and a bulk-edit dialog that shows both fields side by side, gated by the labels web service's own configuration.