InventoryTracker with Order Portal

We will continue with the inventory tracker app.

We will add following functionality

• let employee order equipment
• staff can view and fulfill order

Content

• Models
• Routes
• Order with Items (Parent with Children Nested Route)
• Add Nested Route
• View Code
• Next Steps

Models

App has for models

• Catalog
• Inventory
• Order
• Item

For this tutorial, we will be using the following models:

Order

List of employee equipment orders with field to track status.

Item

List of equipments ordered and has fields to track type of equipment request and which equipment was assigned by fulfillment team

Routes

At this point you should be in Inventory Tracker Visual Editor and have following routes:

• Catalog
• Inventory

If you are not in Visual Editor, use following

• Select Editor Tab
• Select Inventory Tracker App from List of Apps

Order with Items (Parent with Children Nested Route)

Order functionality allows user to order computing equipments and have them fulfilled by our IT team.

In Visual Editor, click Add Route

Enter following

Template: Select > 'Table - Detail'
Model: Select > 'Order'
Label: 'Order'

Template: Select > 'Table - Detail'
Model: Select > 'Order'
Label: 'Order'

This will add new Order route with familiar List and Detail views. These represent Table and Form view, pre-made and fully functional. Click Preview and see various Orders. Don't make any changes yet.

Exit out of Preview by clicking Done.

Add Nested Route

Back in Editor, selected, Order Form view detail route. When user creates an order for equipments, they will add one or more equipments to the order. Let see how to build that functionality.

On the detail route, scroll to bottom.

Now click on Components Panel and find the Editable Table component.

Drag Editable Table component to the very bottom of detail route form and drop it when drop area changes color. (take care to drop it on very bottom and not into an existing Panel. If you did that, no issues, just drag it below, to new panel so that we have space to separate order details and items list)

This will bring up Add Related Item dialog. In that dialog select Item and click Add.

You should see Item Editable Table added to order form detail route. You will also see Item Detail nested route for item details.

Behind the scenes

When you added Editable Table to an existing Form, RemixFast understood that you are trying create parent child nested route. This is another kind of nested route, where child route is tightly coupled to parent route. In this category of nested route relation, children are usually viewed with parent and not independently.

Because RemixFast knows shape of your data and relationship between your models, is able to show dialog with related model, in this case Item. When you selected Item, RemixFast added Items Editable Table to Order form view and wired up list with form so that they work together as an atomic unit. When you create order, use can also add items and entire order with items is saved to database in one go as a part of transaction. If for some reason there is error while adding say an item, it won't add any records, ensure no broken data in entered in database, ensuring data integrity.

Editable Table view shows Items for an order and uses useFetchPager, a useFetcher based hook to retrieve items for an order without causing navigation!

Lets make is easy for user and fulfillment team to select catalog and inventory.

Select Catalog Name field in Editable table. On the Properties panel, enter following:

Type: select > 'Picker'
Model: select > 'catalog'
Key Field: select > 'catalogId'
Display Field: select > 'catalogName'

Type: select > 'Picker'
Model: select > 'catalog'
Key Field: select > 'catalogId'
Display Field: select > 'catalogName'

This will change Catalog Name field to be a Picker that retrieves catalog list from database and lets user select equipment to order.

Select Asset Tag field in Editable table. On the Properties panel, enter following:

Type: select > 'Picker'
Model: select > 'inventory'
Key Field: select > 'inventoryId'
Display Field: select > 'assetTag'

Type: select > 'Picker'
Model: select > 'inventory'
Key Field: select > 'inventoryId'
Display Field: select > 'assetTag'

This will change Asset Tag field to be a Picker that retrieves inventory list from database and lets fulfillment staff select a particular equipment that will be given to employee.

Lets now link Catalog Name and Asset Tag picker so that we only show relevant equipment.

Select Asset Tag field in Editable table. On the Properties panel find Filter and select it. This will open Filter Editor dialog.

Click Add Field Condition and enter following

When:
Select Field > 'catalogId'
Select Criteria > 'Equal to'
Enter ${value} > '${catalogId}'

When:
Select Field > 'catalogId'
Select Criteria > 'Equal to'
Enter ${value} > '${catalogId}'

Click Done. This will setup data filter to ensure that only inventory list for the selected catalog is shown!

When user is adding item, there is no need for 'Asset Tag' picker as it is relevant only after order has been submitted.

Back on the Properties panel find Display Condition and select it. This will open Display Condition Editor dialog.

Click Add Field Condition and enter following

When:
Select Field > 'itemId'
Select Criteria > 'Exists'

When:
Select Field > 'itemId'
Select Criteria > 'Exists'

Click Done. This will ensure that Asset Tag picker field is shown only after item row has been created in database.

We also need to ensure that only fulfillment staff can edit this field. Back on the Properties panel find Edit Condition and select it. This will open Edit Condition Editor dialog.

Click Add Right Condition and enter following

When:
Right Type: select > 'Workflow Right'
Right: select 'orderFlow.Pending.FULFILL'

When:
Right Type: select > 'Workflow Right'
Right: select 'orderFlow.Pending.FULFILL'

Click Done. We have now ensured that only user with right to fulfill can edit Asset Tag.

Click on Preview and select Order tab in navigation bar on left. Select an Order and see details with Items that were part of the request.

You now have a working Order page with child Items in form view. Order and Items are now linked and behave as a single entity.

Export Code

Click on Export Code, to generate codebase for the app.

This will open Export Code dialog. Enter following

Version: 1.0.0

Version: 1.0.0

Click Export Code button. This will start code export. Once completed, select Code tab and view generated code

• \prisma\schema.prisma to view generated Prisma Schema
• \app\models\order.ts to view additional model details
• \app\models\order.server.ts to view Prisma CURD functionality
• \app\routes\__app\order.tsx route to view loader for getting data list
• \app\routes\__app\order\$orderId.tsx route to view action methods for order model
• \app\routes\__app\order\$orderId\item.tsx route to view loader for item list for selected order

💡

Route \app\routes\__app\order\$orderId\item.tsx only has a loader, and does not export a default view. You can not directly navigate to this route, it is only callable using a useFetcher.

Also check out various views.

click on Download Code to continue development in local editor!

Next Steps

Continue by adding Dashboard, Reports and Profile pages to the Inventory Tracker App. ->