Modals

Clase 27 de 54 • Full Stack JavaScript with Sails.js

Clase anteriorSiguiente clase

Darius

student•

skipping over the styling was sneaky. would love to see you work that through in real-time

David Kratz

student•

Just to comment, but at any of these points where we're assigned to make changes etc. on our own, it'd be really helpful for the next video to have a cut of the project at that current state. Our solutions likely aren't word for word the speaker's solution, and it'd help to get back in sync so that we could follow along. The project is available in git, but that's the end state, not the individual steps as we're seeing here.

Barend van der Merwe

student•

Yeah I copied the styles and can’t get mine to look the same either.

Jorge Aguilar

student•

I have a problem, I copied the code, but it does not work the same, it comes out {{thing.label}} and {{thing.owner.full Name}} and it only does it once and it does not show the things of its friends

Barend van der Merwe

student•

I can’t seem to get the fa icons to load? Am I missing something?

Darius

student•

Same here. I see the home icon and the small text briefly as the page reloads. I do not see the trash can icon at all.

I have diligently copied from the video as well as from the source repo and no luck…

Michael Pacey

student•

For myself I had to delve into the bootstrap-overrides.less file and comment out all of the modal styles, for some reason this made my modal full screen, white with no styles.

Sophie Lafrance

student•

I'm a little bit disappointed about you not showing the frontend code, nor giving indications on the updated files. I understand the why, and that the full project is on Github but I didn't want that full code yet, nor spending half an hour debugging errors created by getting that code. Coming from Sails in Action with AngularJS and knowing nothing on Vue.js except what's been said until now, I would have appreciated any details I could have had. Anyway thanks for showing the ejs code at 3:50 minutes so I could copy!

Mike USA

student•

The full code is available in Github, but you don't have to download the whole thing. Just navigate to the page you have a question about and look for the portion that interests you.

For instance, if you have an issue with thing view, see this page: https://github.com/mikermcneil/ration/blob/master/views/pages/things/available-things.ejs

Of course, it will be updated with other code, which will be added later in the course. Still, you should be able to find the piece that you're concerned about.

Up to this point, the videos have documented everything that you need. If you require more information about Vue, pause and go learn view. If you know Angular, all you should need to do is look at the first page of Vue and it should tell you about basic attributes to get it up and running. You don't need to be a pro or master at this point. Just follow along, try new things, and learn as you go.

Hope this helps!

Pek Ratanak

student•

Hi, Mike! I can not get name.
I print Thing object as below.

{ “createdAt”: 1542096126503, “updatedAt”: 1542096126503, “id”: 35, “label”: “This Kenny G album”, “owner”: 30 }

When I use thing.owner.fullName it return nothing

Sophie Lafrance

student•

If you didn't figure it out, or well for anyone who ask this, you need to populate the Owner info before returning the found things in the action. var things = await Thing.find({ or:[ { owner: this.req.me.id }, { owner: { in: friendIds } } ] }) .populate('owner');

Ekoha Devs

student•

Hi all, I copied the available-things.ejs (to get exactly the same render in my browser),
but it’s not the case, someone have an idea ?
I haven’t got your style website.

Thanks

Noitidart Saab

student•

Yeah some stuff was skipped but we can see what he did. Just get to the ejs file and the page.js file and pause it and we can see what he did (ignoring the styling).

Raquel Estevez

student•

Looking for the final ejs file?
We want all the students to feel successful after taking the class with Mike!

<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" @click="clickAddButton()">Add an item</button>
      </div>
    </div>
    <div class="listings" v-if="things.length > 0">
      <div class="card" :key="'thing'+thing.id" :class="[thing.owner.id === me.id ? 'mine' : '', thing.unavailable ? 'not-available' : '']" v-for="thing in things">
        <div class="card-options dropdown" v-if="thing.borrowedBy && thing.owner.id === me.id">
          <span class="options-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-ellipsis-v"></span></span>
          <div class="dropdown-menu dropdown-menu-right">
            <span class="dropdown-item" @click="clickDeleteThing(thing.id)">Delete</span>
            <span class="dropdown-item" @click="clickMarkReturned(thing.id)">Mark as returned</span>
            <span class="dropdown-item" @click="clickContactBorrower(thing.id)">Contact {{thing.borrowedBy.fullName}}</span>
          </div>
        </div>
        <div class="card-options dropdown" v-else-if="thing.borrowedBy && thing.borrowedBy.id === me.id">
          <span class="options-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-ellipsis-v"></span></span>
          <div class="dropdown-menu dropdown-menu-right">
            <span class="dropdown-item" @click="clickReturn(thing.id)">Give this back</span>
            <span class="dropdown-item" @click="clickContactOwner(thing.id)">Contact {{thing.owner.fullName}}</span>
          </div>
        </div>
        <div class="card-options" v-else-if="!thing.borrowedBy">
          <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>
          <span class="options-button borrow" data-toggle="tooltip" data-placement="top" title="Borrow" @click="clickBorrow(thing.id)" v-else><span class="fa fa-handshake-o text-dark"></span></span>
        </div>
        <img :alt="thing.label ? thing.label : 'A mysterious item'" :src="thing.imageSrc"/>
        <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-success" v-else-if="thing.borrowedBy && thing.borrowedBy.id === me.id"><span class="fa fa-star-o mr-1"></span> Borrowing</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" @click="clickAddButton()">Add something</a> to get started!</p></div>
  </div>

Love,
~The Sails Team

Satya Prakash

student•

Hi, I already working on Sails V0.12 But Currenly I have moved on Sails V1.1. When I run Application I saw the bellow error "he default primary key attribute (id) is not set up correctly.".

Also How I can use Deep Populate in Sails V1.1

Please Help Me.

Mike USA

student•

Deep populate is a concept that has not been implemented in Waterline by default. To my knowledge, in order to deep populate, you will need to pass in the result to .exec() and then perform subsequent lookups on the other tables. Needless to say, if deep populate is part of your design structure, you may want to seek using another ORM, like Sequelize or issuing a native query (SQL) through Sails.

I imagine deep populate is a very common need, which is not so easy to implement or integrate into the code base; especially, since the ORM is attempting to remain RDBMS/DB agnostic. I remain hopeful it will come one day, and welcome anyone to challenge and correct my comments here.

Modals

Welcome to the course

Introduction and generalities

The technologies we are going to use

What we will build

Avoiding mistakes in our code

Github for our project

Installing platforms and dependencies

The essentials

Backend architecture

Frontend Architecture

ParasailsJS

Authentication and login

User Subscription

Sessions and Data Base

Password recovery

Email verification

Contact form

Managing payment information

Creating a new page

Making our page interactive

Creating a new model

Automatic testing

Creating a new action

Using Cloud SDK

Creating custom made functions

Personalization

Permissions

Friends with associations

Advanced queries and .populate

Modals

Ajax forms

Loading and error states

Putting it all together

Uploading backend file

Uploading frontend files

Downloading files

Your turn

Growth and monetization

Building a paywall

Recurrent payment subscriptions

Notifications

Invitations (Existing Users)

Invitations (New Users)

Unclaimed Accounts

Going live

SailsJS and NodeJS Settings

Application secutiry

Cloudflare and SSL Certifications

Using a platform as a service

Deploy to Heroku

Settings to send to production

Adding variables to Heroku

Data Base Settings

Before launching

Course Closure

Bonus content

Server-side rendering with EJS

Designing your frontend with Bootstrap 4

Understanding datastores

'Pure' APIs