Generic Adoption Form

[azmtbr]

1. Create adoption form with general fields that would relate to a pre-screening for adopting and animal.
2. Display the forms as a list of cards containing a few basic fields on an admin page.
3. The form should be formatted and printable for filing and future reference.

[azmtbr]

Adoption form

[azmtbr]

@matstc -Working to implement Sendgrid to send the form. Proving to be tougher than I thought.

-Just want to know if I'm on the right track by making the adoptionForm send function in a factory. Also, I know that the format is wrong because it won't work.

Here's the commit: Here

And this is from the Sendgrid docs:

[matstc]

Hi Jon. One problem is that the URL should have a ? before the parameters. However, the real problem is that you should be making this API call from a backend, not directly from the browser. When you do make that call from the browser, you get a CORS error. And I don't think you can get around that.

For backends, you can use a Rails app and make the API call from it, or you could also use a Nodejs app and use the sendgrid-nodejs package.

I think you'll need a backend for a few things (including storing animals) so this is a good time to think about this. I would suggest either Rails or Expressjs. LoopBack built on top of Express also looks interesting but I've never used it.

[azmtbr]

@matstc

Well I had to reset to a prior commit anyway because I accidentally left the api-key for sendgrid in there and they caught it and suspended my account. lol

So basically it's like it's Friday morning for me. No big deal as your're right that I will need a backend anyway. I'll be spending the rest of my weekend until our meeting on Monday reading up on integrating angular into a rails app. Since the one from my last course already has sendgrid somewhat implemented and other things, I'll go with that.

I have refinery cms integrated and I'm assuming that would cause some issues with angular. Maybe not. Talk to you Monday.

[matstc]

Hi Jon: if that's the case then you'll want to regenerate an API key. Reverting a commit is not enough: the key is still in the git history.

As for integrating rails and Angular, there's no integration: rails powers the API and Angular makes API calls. Just make sure to have two completely different apps!

Jon Malis notifications@github.com schrieb am Mo., 29. Feb. 2016 00:38:

@matstc https://github.com/matstc

Well I had to reset to a prior commit anyway because I accidentally left the api-key for sendgrid in there and they caught it and suspended my account. lol

So basically it's like it's Friday morning for me. No big deal as your're right that I will need a backend anyway. I'll be spending the rest of my weekend until our meeting on Monday reading up on integrating angular into a rails app. Since the one from my last course already has sendgrid somewhat implemented and other things, I'll go with that.

I have refinery cms integrated and I'm assuming that would cause some issues with angular. Maybe not. Talk to you Monday.

— Reply to this email directly or view it on GitHub https://github.com/azmtbr/rescue-site/issues/5#issuecomment-189961252.

[azmtbr]

@matstc -I completed the adoption form functionality and did some basic stying to get the ball rolling. -The only two things that I can think of at the moment to still implement would be a state selector for a field(which I tried but had trouble with) and taking the user to a different page after submitting the adoption form. I'll work on those things next and then this issue should be pretty much finished. Unless there is anything you have in mind.

api commit frontend commit

[matstc]

Hi Jon. A couple of things:

I get the following when I go to an animal's page:

There seems to be missing information and the URL does not contain the slug.

Also, maybe it would be time to add navigation. You could just use a standard Bootstrap nav bar with links to Animals and Contact.

[azmtbr]

@matstc hmmm.... On my end it's working fine. Very strange. Did you remember to start grunt with RESCUE_ID=1? That's all I can think of at the moment.

I'll start working on navigation today.

[matstc]

Very good, it was my bad: I didn't have slugs in my database.

As for the adoption form, it's coming along well. But when I submit it, I get an error in the console related to the location param. It's trying to build a URL from the @adoption object and failing…

You can simply remove that location indication since the angular app won't heed it anyway. Makes sense?

[azmtbr]

@matstc

• The adoption form notice is sending properly. The message and the link are hardcoded for now.
• I've implemented printing functionality for the adoption forms. Now I just have to learn how to style the section for print only.
• I'll be working on that next and then will move on to uploading profile images if you agree that this issue could be closed. I moved the more advanced issues related to the adoption form into their own issue and put it under the secondary milestone

frontend commit

api commit

[matstc]

That looks good. It would be nice to provide some feedback to the user after the form has been successfully submitted. Perhaps you could redirect to the animal's page and show a message at the top of the page (e.g. "Your adoption request for Koni was received. Thank you!").

You could also move this code below (from the AdoptionFormController) into a function so you don't have to write it twice:

    $scope.adoption = {name: "", email: "", age: false, street_address: "", mailing_address: "",
                       city: "", state: "", postal_code: "", home_phone: "", cell_phone: "",
                       work_phone: "", desired_animal: ""};

Otherwise it looks good!

[azmtbr]

@matstc -I was able to get most of the things done today with the adoption form. -One lingering problem is that the adoption form gets initialized with the animal.name, but on the completed form, it needs to be adoption.desired_animal. How can we set ng-model as one thing, but then have the form output the same info as something else?

It goes in like this:

      <input ng-model="animal.name" class="form-control desired-animal" disabled="disabled">

but comes out like this:

Is this something I have to do in the controller or in the view with the form? I've tried both ways quite a bit with no success obviously.

current commit

[matstc]

Hi Jon—Let me see if I understand this correctly. You're using the same HTML for both forms, but one form needs animal.name where the other needs desired_animal, is that right?

If so, given that you have one controller for each form, you can just set a variable on the scope (in each controller) called something like $animal and initialize that to the right value, depending on which controller you're in. And your HTML can now look like:

      <input ng-model="animal" class="form-control" disabled="disabled">

And will work in both places. Does that make sense?

Also, you should probably have your Adoption model link to animals using a foreign key and not just the animal's name.

Let me know if that made sense.

[azmtbr]

The user flow relating to an animal is this:

1. From the animals' profile page, the user clicks on the adopt animal button and is taken to that animals' adoption form.
2. The animals' name on the adoption form is already filled out using animal.name.
3. When the user submits the form, he or she will receive a confirmation that the form has been sent, and is given an option to return to the same animal's page. So far so good.

In the admin area, when I try to get that animals' name to appear on the adoption form panel in the show view, It won't work. I'm trying to call the animal the same way as before using:

Restangular.one('animals', $stateParams['slug']).get().then(function(animal) {
      return $scope.animal = animal;
    })

I know this isn't right because the slug is no longer in play at this point. I changed the rails routes so that the forms are now available at http://127.0.0.1:4000/api/rescues/1/animals/animal_id/adoptions instead of http://127.0.0.1:4000/api/rescues/1/adoptions

I don't think this is right either at the show page is based on ng-repeat="adoption in adoptions

Basically all that I need to be able to do is access the name of the animal from the adoptionShowController and I'm not really sure how to initialize the variable to the right value in this controller. Is this what I need the animal_id for?

I am able to get animal_id to show up in the rails console when I look up newer adoptions, but it shows that it's nil and I'm not sure what's wrong.

Sorry for the mess, just a little frustrated.

[azmtbr]

Freakout over. lol

I'm getting closer in that I can actually set an animal and use the data in the adoption show view. I still have to hard code the particular animal and as you can see here, I've tried many ways of getting the correct animal for the form.

So, still stuck but less stuck. Here's the commit

[matstc]

All right Jon: conceptually, you have the animal linked to your adoption model, you should be sending that animal down with the rest of the adoption model in your JSON. Then, in your template, you can simply write things like {{adoption.animal.name}}.

For this to work well, you will need an adoption serializer that includes the animal (see my last commit).

Also, you currently have adoptions#index returning a list of all adoption requests. And the animal_id from the route is not used. This is strange! Better to un-nest that route if you're not using the animal's id.

[azmtbr]

Working like a charm now. I was so close in so many different ways. That's what gets frustrating. I wasn't worried tho. ;)

commit

And.....moving on?