26. Queries avanzadas y .populate

advanced-queries-and-populate.md

Add to views/pages/things/available-things.ejs:

Replace the insides of the top-level <div> with:

<div class="container">
  <div class="page-header text-center">
    <h1>Things</h1>
    <h2>View available items to borrow, or upload your own things.</h2>
    <div class="header-buttons">
      <button class="btn btn-outline-primary">Add an item</button>
    </div>
  </div>
  <div class="listings" v-if="things.length > 0">
    <div class="card" :key="'thing'+thing.id" v-for="thing in things">
      <div class="card-options">
        <span class="options-button" data-toggle="tooltip" data-placement="top" title="Delete" @click="clickDeleteThing(thing.id)" v-if="thing.owner.id === me.id"><span class="fa fa-trash-o text-danger"></span></span>
      </div>
      <span class="label" v-if="thing.label">{{thing.label}}<br/></span>
      <small class="owner text-secondary" v-if="thing.owner.id === me.id"><span class="fa fa-home mr-1"></span> Mine</small>
      <small class="owner text-primary" v-else>{{thing.owner.fullName}}</small>
      </div>
    </div>
  <div class="empty text-center" v-else><p>You and your friends have not uploaded any items. <a href="/things/new">Add something</a> to get started!</p></div>
</div>

Add to assets/js/pages/things/available-things.page.js:

In data:

data: {
  things: [],
},

In methods:

clickDeleteThing: function() {
  console.log('TODO: set up modal.');
},

Add to api/controllers/things/view-available-things.js:

For the answer to the excercise, add .populate('owner') to the Thing.find() query