Building a Cardstack app - Part 3

19 January 2018

We ended Part 2 with a working rental listing and rental details page.
All information was on the page except for the image of the rental. So in this
part, we’re going to add that, make sure that we can switch between the wide
and normal image variations and then implement the city filter for searching
rentals.

Adding the image field

We start by adding an image field to the Rental model in our model definition.

We only made two small changes in the new snippet. Instead of handling the click
with an explicit toggleImageSize action, we implemented it in the template, to
avoid having to create a component just for this reason. The other change is the
usual one: inside cardstack components, the “model” object passed in is bound to
the content property, so content.image needs to be written.

After an app restart (remember, we changed the model schema), the images now
show up:

Oh, while we’re at it, let’s add the little map to each location listing.
There’s nothing cardstacky about this step, so I’ll skip any explanations:

Filtering by city

You might notice that our Cardstack app is still missing the ability to filter
by city name, so let’s add it.

The pure-Ember solution uses a list-filter component which yields its results to
the wrapped element (and uses store.query behind the scenes). We already have
the cardstack-search component that does this, so we just have to add the
input and create an action handler that updates the mainQuery property of the
main page.

We defined the updateQuery action for updating the query when the input
changes its value but it doesn’t exist yet so we’d receive an error. Let’s
proactively define the action. We’ll first have to create the component file
itself as we haven’t needed it yet:

So if the input, and thus cityFilter, has a non-empty value, we’ll update the
query with a filter for the city field. The filter parameter is part of JSON
API and is fully supported by Cardstack endpoints, so we expect the above to
“just work” as it is.

We set the query to be a prefix one, so that if the user only types ’s’, both
the Seattle and the San Francisco rentals should be returned. (As the
underlying search engine is Elastic Search, we could choose to have a different
type of search like an exact or partial one.)

After the app reloads and we enter a search term, we can see that the right
query param is appended to the request,

and the cardstack-search component indeed correctly returns the rentals that have a
matching city name:

In the next part

We have now reached feature parity with the original Super Rentals app. In the next part(s), we’ll enhance the app with CMS features, so that we can create rentals and edit their details.