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

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