CrudRealtimeupabaseEntityStateMachine

Class Overview: CrudRealtimeSupabaseEntityStateMachine

The CrudRealtimeSupabaseEntityStateMachine class provides a mechanism for managing entities in a Supabase database with real-time updates and CRUD (Create, Read, Update, Delete) operations. It is designed to automatically refresh data in response to real-time changes and offers filtering, loading states, and error handling.

Key Features:

• Real-time Data Handling: Automatically refreshes data when changes occur in the database via Supabase's real-time capabilities.
• CRUD Operations: Supports adding, updating, deleting, and retrieving individual or multiple items from the database.
• Loading Indicators: Provides reactive signals for indicating when data is being fetched or when a CRUD operation is ongoing.
• Filtering: Supports filtering of items based on specified conditions.
• Toast Notifications: Emits success or error messages when operations complete, enabling user feedback.
• Reactive Signals: Uses Angular signals for reactive state management and easy integration with Angular components.

How to Use the Class

1. Initialization: To use this class, you need to instantiate it by passing in a service that implements SupabaseCrudService for performing CRUD operations.

   Example:

   @Injectable({ providedIn: 'root' })
    export class ProductStateMachine extends CrudRealtimeSupabaseEntityStateMachine<
      Database,
      'products'
    > {
      constructor(@Inject(ProductDataService) service: ProductDataService) {
        super(service);
      }
    }

2. Real-time Data Updates: The class automatically listens for real-time changes from Supabase and refreshes the item list when changes occur.

3. Reactive Data Access:

• The items signal provides a real-time list of items, which is updated whenever filters change or new data arrives from Supabase:

  readonly #productStateMachine = inject(ProductStateMachine);
  constructor(){
    this.#productStateMachine.items();
  }

4. CRUD Operations:

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

  await #productStateMachine.add(newItem);

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

  await #productStateMachine.update(updatedItem);

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

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

5. Manual Refresh: You can trigger a manual refresh of the item list using the refetch() method:

   #productStateMachine.refetch();

6. Filtering Items: To filter the items displayed, use the triggerFilters() method with an array of SupabaseFilter objects:

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

7. Loading States: The class provides reactive signals to track whether data is being loaded:

• loading: Indicates if data is currently being fetched.
• loadingDetail: Indicates if detailed data is being loaded (e.g., fetching a single item).
• acting: Indicates whether any CRUD operation (add, update, delete) is ongoing.

Example usage:

const isLoading = #productStateMachine.loading();

8. Error Handling: The class automatically handles errors during CRUD operations and emits toast notifications via the toast$ observable. You can subscribe to this observable to display error or success messages:

   #productStateMachine.toast$.subscribe(({ label, type }) => {
     // Show a toast message to the user
   });