The ice cream shop is so successful that delivery orders are flooding in! Now we need to manage delivery orders. A delivery driver can deliver multiple orders at once, which means we need to create a relationship between deliveries and orders. This is a classic one-to-many relationship - one Delivery contains many IcecreamOrders.

In this tutorial, you'll learn how to:

First, let's create the Delivery module using the CLI. This module will connect multiple ice cream orders into a single delivery batch.

Now let's define the Delivery model with a relationship to IcecreamOrder. The key is using LightIcecreamOrder as the field type - the delivery stores each order's id, and reading a delivery hands the orders back as LightIcecreamOrder.

Let's understand the key relationship pattern:

Add dictionary entries for the Delivery model:

Now let's implement the service layer with lifecycle hooks. When a delivery is created, all associated orders should be marked as finished:

Key service patterns for related data:

The generated slice reads "cru: None", so nobody can create a delivery yet. Open creation the way the practice tutorial did for orders. Updates stay closed, and _preUpdate refuses them on the server too:

Now let's create the Template component for selecting related orders. The Field.Children component is designed specifically for selecting related data:

Key features of Field.Children:

Add a new slice to IcecreamOrder specifically for the delivery selection UI. This filters orders by status and serve type:

Add arguments to support serveType filtering in the byStatuses query declaration in the document.

Add dictionary entries for the new slice:

Now let's create the Unit component to display deliveries with their related orders:

Notice how we iterate through delivery.icecreamOrders and render each one using the IcecreamOrder.Unit.Card component. The orders arrive loaded with the delivery, so the Unit runs no query of its own.

Delivery.View still renders the name field the CLI generated, which no longer exists. Render the orders there the same way:

Create the Zone component with a modal for creating new deliveries:

The submitOption.onSuccess callback updates the local state with the finished orders, keeping the UI in sync with the database changes.

Finally, let's integrate everything into the main page using Tab components to organize orders and deliveries:

Key features of this integrated page:

All core tutorials are complete. Explore the Architecture section to see how everything works together.