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. Paged state is there for entities that should not be loaded all at once. So this is used for big lists.

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
   });