CrudPagedSupabaseEntityStateMachine

Class Overview: CrudPagedSupabaseEntityStateMachine

The CrudPagedSupabaseEntityStateMachine class provides a state management mechanism for handling paged data operations (CRUD: Create, Read, Update, Delete) with a Supabase backend. It is designed to manage entities within a database table while supporting pagination, filtering, sorting, and notifications of state changes such as loading, adding, updating, and deleting items.

Key Features:

• Pagination: Supports paged retrieval of data from the database with customizable page size, sorting, and filters.
• CRUD Operations: Provides methods to add, update, and delete items from the database.
• State Signals: Utilizes Angular signals to expose reactive properties (e.g., loading state, current page index, total items) that can be easily bound to the UI.
• Toast Notifications: Emits notifications when CRUD operations succeed or fail, allowing for user feedback. The state layer can not access presentation logic directly so it exposes a toast$ observable
• Filtering and Sorting: Allows for server-side filtering and sorting of data.

How to Use the Class

1. Initialization: To use this class, extend from CrudPagedSupabaseEntityStateMachine and pass it the Database scheme generated by supabase and the supabase table (in this case ideas)

   Example:

   @Injectable({ providedIn: 'root' })
   export class PagedIdeaStateMachine extends CrudPagedSupabaseEntityStateMachine<Database, 'ideas'> {
     constructor(ideaService: IdeaDataService) {
       super(ideaService, 'publish_date');
     }
   }

2. Pagination:

• To load a specific page of items, use the loadPage() method:

  readonly #ideaStateMachine = inject(PagedIdeaStateMachine);
  constructor(){
    this.#ideaStateMachine.loadPage(1); // Loads page 1
  }

• items is a computed property that returns all items across all loaded pages:

  readonly #ideaStateMachine = inject(PagedIdeaStateMachine);
  constructor(){
    this.#ideaStateMachine.items(); 
  }

3. CRUD Operations:

• Add an Item: Use the add() method to insert a new item into the database.

  await #ideaStateMachine.add(newItem);

• Update an Item: Use the update() method to modify an existing item.

  await #ideaStateMachine.update(updatedItem);

• Delete an Item: Use the delete() or deleteRange() methods to remove one or multiple items by ID.

  await #ideaStateMachine.delete(itemId);
  await #ideaStateMachine.deleteRange([itemId1, itemId2]);

4. Filtering and Sorting:

• To apply filters to the data, use the triggerFilters() method:

  this.#ideaStateMachine.triggerFilters([{ column: 'status', operator: 'eq', value: 'active' }]);

• To search items by a query string, use the search() method:

  this.#ideaStateMachine.search('search term');

• Sorting can be updated using setSortBy() and setSortDirection():

  this.#ideaStateMachine.setSortBy('name');
  this.#ideaStateMachine.setSortDirection('asc');

5. Reactive Properties: The class exposes several signals that can be observed for changes:

• loading: Indicates whether data is currently being loaded.
• adding, updating, deleting: Tracks if add, update, or delete operations are in progress.
• pageIndex: The current page index.
• totalItems: Total number of items available across all pages.

6. Error Handling: The class automatically handles errors during CRUD operations, emitting a toast notification when an error occurs. You can subscribe to the toast$ observable to display error messages or success notifications.

   Example of subscribing to toast notifications:

   this.#ideaStateMachine.toast$.subscribe(({ label, type }) => {
     // Display notification to the user
   });