Rails Tutorial | Building a Project Management App from Scratch with Ruby on Rails 6

what's up everyone Steven here from tech maker TV in this episode I'm gonna show you how to build out a simple project management app with Ruby on Rails 6 if you've been following along with our channel you'll notice that we've been kicking off a whole bunch of new series so this episode is actually the first part and it's going to lay the foundation for a bunch of other episodes so if you want to stay up to date go ahead and subscribe to the channel and also go check out our website Technica TV we're posting a bunch more work session type stuff over there so that you can see the full front-to-back development of projects on YouTube we're gonna be posting some of that and we're going to be posting more standalone content that we managed to pull out of those larger projects with all of that said let me show you what we're gonna be building and then let's jump into the coding project from the very beginning so this is the app that I put together today essentially you have projects they have a status you can see how complete they are you can click into these things and you can see your different tasks that you have to do you can come in here and edit and say that it's actually in progress and now you're gonna see that this changes in the next episode we're gonna be adding some drag and drop stuff I've got some ideas for how to add real time functionality to this once you have a team so that if somebody changes the title or potentially leaves a comment or something like that that it's all very interactive but with all of that said this is kind of the basic framework for this project I'm gonna go ahead and post the code for this on github and link to it down in the description so if you want to pull that down and look at it there feel free obviously it's great if you code along there's a lot of styling in this project so the first 20 minutes are about setting up the structure so maybe you can follow along with that and then if you want to copy in some HTML or something at some point just check out the github but all of that said let's go ahead and just jump in to get things going I'm just gonna create a new rails I have rails new and I'm gonna call it a simple PM for simple project management so we'll let this run and then I'll pause the video for a second so with that done let's change down into our simple p.m. directory and let's go ahead and open up the code base so with this open I'm going to open up my gem file and I'm gonna add a couple of gems here really quick so I'm gonna add a gem devised which is for authentication and I'm gonna add another one that you may have not seen before called nested scaffold which is gonna make our lives a little bit easier so we'll go back over to our tunnel and we will bundle and this again will take just a second okay so that's done okay so we want to create a user that can log in so let's do this so let's say rails G devise install which is gonna set a few things up that divides needs in order for us to actually create users and it's gonna give us some instructions so let's just follow these instructions and I've done this a million times so I'm just going to go through and follow them copy this into development our B so open up development RB and just put this down here that's good let's go to the second step so we need to set up a root directory so we'll have let's go ahead and go to our routes that's not what I wanted to do and go ahead and just paste this but we don't want home index let's call this root two projects index like that okay so that should be taken care of then in our layouts application we need to paste these things okay so we'll just put these right above the yield tag and this fourth step should be optional so we'll just leave that alone we're gonna let the device be the devise views for now well you know what let's go ahead and do it why am i right so now we have all the divides views so we can modify those later if it wants you okay so now what we can do is say rails G devise user so this is gonna create a model for us and it's also going to have the device for users and the routes and use all of the various device controllers and stuff so all of our authentication is set up once we do rails DB migrate and this should take just a second ok so let's get going with our actual projects and so we installed that nested scaffold gem and we'll use that in just a second but first let's do rails G scaffold and I'm gonna create a scaffold for projects so rails G scaffold projects we're definitely gonna have project names and I think we'll have a description which should be text and we'll just run that actually I'm gonna undo that because the project also needs to belong to a user so will rails G and do all that stuff again and then I'm just gonna say user references so that we'll set up a user ID and index on our projects which we'll look at in just a second next let's do this let's say rails G nested scaffold and I'm gonna create a new object called task but an actual fact what I need to do is say project task and so what this is gonna do is it's gonna say that the task belongs to the project and it actually will set everything up for us in terms of the views and the controller and everything so that we don't actually have to go manually make all those little changes so if you're totally new to Rails this may be a little bit foreign to you but if you've done a little bit of rails work you'll kind of see how quick this makes things so I'm gonna have a title for my attacks or just a maybe a name and then a description and then we'll also say it will make that text and then we want a status so I'm gonna have a status of not started in progress and complete and then finally we need to say project references and so this will generate a bunch more stuff and then we'll rails DB migrate and again this should hopefully just take a quick second and then I'm actually just going to go ahead and start my server and so let's go ahead and go take a look at the browser and this is the nested scaffold documentation by the way so if you want to read up on that that's pretty handy but let's go to the localhost and kind of just see where we are so we have projects here we can create a new project project one we're not gonna be able to create a project because this user is required and we haven't created a user yet so let's do this let's go over to our code let's open up our projects controller and let's just say before we do anything I say before action authenticate user and let's copy this and let's do the same thing over on our tasks controller okay so we'll save both of these and let's go back and let's refresh and the first thing it's going to do here is say we have to sign up so when we have a login screen by default and then we can click down here to sign up so I'm gonna sign up with Stephen at techmakers evie and then just give it a password and we will register so now we're able to look at projects so if we click into this we really don't want to have a field for the user so let's go over to our projects forum now let's get rid of this user ID field right here okay so let's see what that looks like alright so now we're just creating a project with the name and description but this is also going to have a problem because what we need to do in our projects controller and as well and are actually user class so inside of our user we need to tell it that it has many projects so in our project class because we said it references user it automatically sets up it belongs to but we need to add the has many on the user that's just how rails is set up so what we want to do is the index so everything in here what we want to do is like scope it to the user so instead of doing project at all I just want to see the logged in users project so I'll say a current user about projects this next one on new will say current user that projects that build I think copy this on the create so we'll say current user dot projects not build with the params and on the rest of them we can actually change it down here so we can say current user dot projects not find one other quick thing we want to do is get rid of this user ID we don't want to allow the user ID to get passed in so let's go try to create a project now so if I go back I don't have any projects there's no projects existing right now so we can actually just say project one this is going to be a great project so create this project and then if we go back we'll have the index page with the name and description and saying our user ID is one okay so the projects work so let's check out how we can look at tasks so the handiness of that nested scaffolds thing is that it goes ahead and sets up all the routes and everything properly so that we can actually look in here and see that we if we go to project slash ID in this case one slash tasks we get two tasks here so if I click new tasks you can see that we have the same kind of problem down here where we have the project showing up in the forum so I'm going to go ahead and take care of that so I'm going to close these files if you're using atom I'm always using this command T on Mac quick shortcut so now you can search for the name of the file otherwise you can obviously find it in the file tree on the left well we can do is say tasks form and then right here you can just click insert and it's going to open this file so I'm going to get rid of this so this is what we don't want and then if we look at our controller so it's go to the task controller if we look at all of these so we have first of all we're both indicating a user then we're setting the project so let's check out set project so we want to do the same thing and set project we want to add our security layers so when we find the project we say current user dot projects that's fine but then after that everything should work just perfectly fine so we set the project and then like let's look at the index so the tasks are at project tasks and so on and so forth so essentially that gen sets up all of our forms properly and all of our scoping and all of our routes properly so it saves you a good amount of time so let's go back over here and let's create a task so let's create a task like do the dishes and then you should really do the dishes not really gonna get too much into this and then not started and actually we'll deal with that in a second so if we create this let's go back so now we can look at this and we can see that we have our tasks and what's nice about this is this is actually scoped under this project what I would like to do though is actually put this whole bit onto the project show page so if you think about it what you would probably like to have happen is you click on a project and on this page you see all of the tasks that need to happen so we'll worry about styling momentarily but for the moment I want to go ahead and get the pages all to be architected how I want so I'm going to close these down again let's go to the what is it let's go to projects show let's open that and then let's open up tasks index so the nice thing is these are already pretty much organized based on what we need so I'm gonna come down here I'm gonna put an HR tag just to put a separator and I'm just gonna paste everything in the one thing I'm gonna need to do is say at projects tasks like this and now you can see in here that everything actually what we need to do right here new project tasks will just need to change this to be at project ID right here so I don't know why my syntax highlighting I still haven't taken the time to fix that so if you've been watching this for a little while you've noticed I've probably been complaining about it for a while so anyway I'll fix it eventually so now let's see what this does so if I go to show so go back up here and it so really now we've got this all in place what I would like to do in addition to this is and I'm gonna add another HR tag right here again and we'll stylus up in just a little while what I want to do now is open up my tasks form actually let's do the nude let's I guess what we could do is well let's copy the top two lines here and come down in here and just add this like this and then we need to say render tasks form and then what I'll need to do and is in my controller I'll need to go to my projects controller and in show I'll need to add a at task equals project tasks build something like this okay so then what we can do let's refresh this and see what happens so I'm just over outmatches edit okay oh okay so it looks like so what we did by adding this task in this manner is now this is gonna be included in the app project tasks so I'm gonna just make a quick thing here where I say if task dot persisted and then we'll print it out because otherwise you're trying to trying to render something that's not staying through the database yet and with a with edit and destroy packs and so on so that's not gonna work so let's refresh now this should work so let's try to create from here and see what happens so we try to create a new task and we say that the task is do your homework description is homework create the task and then let's go back to project slash one and so now you have this so what I would like to actually do is in my tasks controller I want to update the the I want to redirect to the tasks project an actual effect and I don't really want to have the notice because it's gonna be obvious that it's just being added to the page in this context so let's just come back over here refresh and then do and have a task another one and you can just see that it gets appended straight below okay so let's deal with the status now so let's go over here and let's open up our tasks class and let's look at how you do this so we're gonna say validates status and then we're gonna say inclusion and then what we want to say that it's in one of these so we wanted to be not started in progress or let's see what else complete and we can actually try to decide if that's the best way to do it or if we should do like a lowercase kind of stuff maybe what I want to do is actually this I want to say not started and then in progress and complete okay and now what we need to do is in our I guess we're in projects well know it's what is it tasks form so right now we just have a text field we want to switch for a select so what I want to do here is just say F dot select but don't have to give it options and so instead of writing out some kind of complicated data structure here in the view what I'm actually going to do is say task and then status options so then we'll go over to our task and we'll define a constant for status options and then what I'm gonna do is say it like this so the argument that that method on the front end takes is something like may get this backwards so it may have to come back and change a couple of things but I believe it goes like this so we're gonna provide first of all we want to display on the actual Select field and then the value and then basically so we have this kind of nested array like this and so I'm gonna put these on their own line so they're easier to read and then what I'll do is just change them all so we'll have in progress and in progress and quotes obviously and then complete okay so let's save that let's make sure we save our form and then let's go refresh and see what we get so you can see here now it's telling us that we have basically our status is showing up here so what we can do now is actually add our start adding tasks and we can set the status here and then we'll have not started there and then when we want to actually complete a task or set it in progress or something we can update it so when we update we also want to go back to the actual page or the project page so we'll go to tasks controller do the same thing we did above so redirect to this page and we'll also not give a notice in this case okay so let's go back to this again we'll say ok now it's complete and so now we have a completed project and I'm gonna go ahead and just delete all of these because and you can see that delete is actually taking you to the wrong place too so we really just want to go to the project URL the actual effect we can just go to add project right so let's try this again and we'll go ahead and destroy yeah I'm sure okay so now we kind of have everything baked in here the only thing you might want to do differently is add it so that once we have a first of all we don't need to link to new tasks we'll get rid of that in a second but we'll just add a new task here so now everything can kind of happen from here except for edit maybe so we can just leave that for now but that's basically what it is so we do have some links we might want to fix like that kind of goes to a different like a weird place but anyway we'll deal with all these things in just a second so it's not pretty necessarily at the moment but we've gotten the majority of the functionality in place that we need to start keeping basic track of projects and tasks at least for an individual user will add teams and whatnot in the future but for now this is basically what I was wanting to get done on the functionality side I'm gonna take about five or ten minutes and start adding some styles and to do that let's first go set up at least a way to actually use style sheets so let's go into our JavaScript and I'm gonna use the web Packer variation on this idea so we'll create a new folder inside of our JavaScript directory inside of app and I'm just gonna call it style sheets and in here we'll create a new file application a CSS and then inside of our JavaScript we will import I think it should be dot dot slash style sheets / - --n like that and then inside of here I always not always but typically will create a style she called like based is CSS will import import base I think that might need to be dot slash base will try like like that so let's see if we've got all this set up right so what I'm gonna do is just set the body tag and have a background color of kind of a light gray okay so let's make sure we got everything saved and see what errors I've managed to create okay it's spinning let's see if we got I don't have any errors it's actually kind of hard to tell yeah the background color is in fact what we wanted so now we have stylesheet setup okay that's good okay so for the rest of this I do want to use bootstrap but I just want the style sheets so I'm gonna go to bootstrap CDN and just copy the seat the CSS link here and then let's go over to our application Die HTML one thing I actually need to do also has changed this to style sheet pack tag for some reason the style sheet link tag still works on the local host but that won't work if you deploy this somewhere without that so make that change and then we'll need to link style sheet and then we'll just paste in our href that we copied the other thing we're gonna need to do so let's go to refresh and just see what's changed so now you'll see we'll get the bootstrap font and whatnot so let's go up here to our assets style sheets and let's delete this well let's delete all of these actually well actually the only one we want to worry about because I don't want to see here and take out too much time it's just the scaffolds but you don't need any of those style sheets so it's refresh and you shouldn't see anything different in actual facts but anyway so what I wanted to start by doing is coming in here and adding a div with a class of contain and then going like this and just putting everything in the container that should bump everything kind of to the middle of the screen okay so let's see so let's just kind of start from the top and work our way down inside the container I'm going to put a card okay so this is a bootstrap thing I don't really want the notices in there honestly in the card I just want the main content in there and then additionally I want to add a padding 5 to the top of the container a PT 5 so again this is bootstrap stuff but this is just gonna bump everything down so you'll see now that we have this card sitting here it looks kind of like we got a piece of paper sitting on the screen or it's gonna look like that once we get this built out and then so if we just kind of click around you'll see that we have this going on so that's kind of what I wanted so that's a good start okay what's next so I want to go work on the projects index and change up how this looks so let's and we're gonna make pretty heavy use of bootstrap so if you're totally new to bootstrap just feel free to follow along and hopefully it'll make some sense but let's go to the projects index so we've got everything inside of a card which is right I'm gonna make this an h2 and then I'm gonna make this a class of card title so let's see what that looks like a little smaller what I want to do here is actually say D flex and then I want to say justify between I might need another word in there I might need to be justified content I'll have to check on that then what I need to do is add a span tag around projects so that it's actually its own HTML element then I'm gonna copy this link to new project caught it rather and put that inside of here and then give it a class of BTN BTN primary let's see what this does so now you can see that what essentially what that did is we're using flex to split and put the project's headline over here and then the actual button on the right side so there's no floating or anything happening there then I'm gonna do an HR tag actually you know what I should have done is probably go back to my application by HTML what I should probably do is not put the card in the I should probably put the card in the actual view code not the layout code that's gonna help me first of all or not first of all keep saying that repeatedly so it's clearly not the first time anyway so what we need to do is get rid of this notice because we already have the notice above so then I'm gonna say div card here and I'm gonna bump this up in there and I'm gonna say div I think it's card header let's try this see what this looks like and then right here we would say div card body and then put everything else in there so let's give that a try okay so I don't love that gray background but that kind of creates this segment and actually I don't like the way that looks so let's just get rid of the header here get rid of this div and then move this div up to the top I won't stick with this we'll just work on the positioning a little bit in a little while all right so what can we do next let's look at this h2 so I want to bump down to stuff below it a little bit so I'll say in beef or something like that and instead of a table what I want to do is render each project and its own little card so we'll just do that in place here and let's see what that can look like so we'll say for each one of these we're gonna say div card and then another card body and actually what I want to do is link to the whole card so we'll say link to project do so if you want to just create a regular link you need to do what we've done down here or what's automatically generated so link to some text and then give it the link you want to go to but if you want to actually just link to an element you have to do this where you pass in the HTML has a block with the do there so right here what we can do to say like h5 class equals card title and then we'll we'll say like Roger got name something like that and then let's go refresh and see what this looks like okay so this is sort of what I'm imagining here then under this we can say projects dot description and let's just kind of cut it off there we don't need to be able to do all the edit and destroy stuff at this level in my opinion we can do that on the show page which makes a little more sense to me in this particular context so let's refresh this and now this is what we got so in here we can actually well we can't destroy in here so we'll need to add that yeah this is kind of confusing but at least for now we've got this page out here okay so let's clean up this project show now all right so let's go over here to the code open up to projects show all right so we have right now this is split up into several sections or three sections so we again we don't even notice because we already have that layout file I'm gonna do the same thing because I want to basically have this kind of look across the app so we'll say card card body alright so I'm gonna do the same little thing I did on my project index I'm gonna paste this in here instead of saying projects I want to say at project name and then on the right side I'm gonna say new task or maybe add task no I don't even need that right I don't need that because actually let's go back and look at this really quick so we have our form just straight up on the page so what I want to have on here is actually the edit and I'm also gonna want the delete so I'm gonna say just give it a div and then in this div I'm going to add the edit like this and I'm gonna give this class BTN BTN warning and then I'm going to go over here I'm gonna undo a little bit so that I get my links to my delete and why not copy all this redo all the work paste in that I need to change this to at project and then I'm gonna give this a class BTM BTN danger and let's go see what this looks like if i refresh so that looks pretty cool actually so that's basically what I want okay then underneath the h2 so we've already got our in before on there giving us some space so now let's render the form so let's copy this stuff or cut a rather and I'm going to make this an h6 like that so it's kind of small and then I'm gonna say add task let's see what this looks like so so what I want to do is put this into a inline form so that it goes straight across the page so if we go over to the bootstrap Docs and search for inline form should have clicked that jump to inline form so here we can say that we have this class form in line and then we need to put form group on everything so let's just go try this really quick so go to our task form so I wonder if I can do this class form in line is that right that's what they call that form in line so then let's refresh see what this does to our HTML so right here I've got a class of new tasks so that did not work okay so I think that what I need to do here is actually add an HTML in front of this like this maybe let's see what this does okay so now you see that bootstrap is trying to put all this stuff up on on a single line so now let's fix the HTML so that works also before we get too carried away I don't think that it's really necessary for us to actually have all these fields here I think it might make food it might make more sense just to have the name and then you can edit the rest of this stuff now you can kind of quickly toss in tasks and then modify them after so I'm gonna try to do that and in order to do that I'm gonna go ahead and copy everything in this file as it is and I'm gonna undo everything because we're actually messing up our edit page by doing this so I'm gonna save this and close it and then right here instead of rendering I'm gonna paste in everything that was there and I'm going to go ahead and get description and status and instead of field I'm gonna call this farm group and I think the same thing on actions farm group and then we'll give this a class form control and then I'll give this a class of BTN BTN primary and let's see what this looks like okay so now I don't really care to have name sitting there actually and we can say a class we've already got class in here I want a place holder enter task name something like that and now we have a little form here now but it might be nice if it expanded all the way across I think so I'm gonna do that really quick okay so I just did a little bit of digging and it seems like what I want to do actually is instead of using this in line form I just want to use an input group and I had a good example that I just lost let's see here I think where was I so we have like right here for example on username so you have this input group you have an input group prepend I think I want to I want to append maybe so I'm gonna just try this out and play around with it a little bit hopefully not take too much time so I don't want this HTML stuff now you're gonna get rid of that here won't have input group then I'm gonna get rid of these two divs so these two things are in the same thing then I'm gonna make a div input group append and then push my button up in there and let's go see what this does so that's kind of nice so it's a it's wide maybe a little bit too wide actually but you can see here that like on the right side of this there these things are joined at the hip basically so the left and right have border radiuses but this middle part is now connected so I kind of like that so let's keep going I don't wanna get too hung up on all of this but I'm trying to make it look pretty good so now we don't need any of this so let's get rid of that back maybe I'll put the back button just at the top above the card actually let's try that just back and then we'll give it a class of BTN BTN lights and let's see what this looks like I don't really like the BTN light for now I'm gonna leave it when I give it a MB 4:3 see if that does anything okay so kind of okay with that the greys are clashing just a little bit so I need to worry about that okay so now what we want to do is link to the tasks we're not necessarily linked to then we want to iterate through them so we've got our form ending right here so let's look at what we want so right here I want to do an h4 and I want to say tasks and then below this let's iterate through and print out our tasks and let's do them in cards actually again so we'll say at project tasks that each do tasks and then inside of here we'll just add some more cards and again let's do su maybe H five and then we'll say a task got name and we'll say a P task description and then maybe at the top we'll put something like thinking bootstrap they have a tag or something like that what is that called it's not not breadcrumbs what is it called badge so let's get a badge so span class badge and we're gonna style these specific to the color the color of this will match the status eventually go for now let's say tasks thoughts status and let's go see what we got here so we've got an empty one and again this has got to do with the fact that the we're initializing a new task and it's not actually saved so let's go check that out so what I want to do here is say if tasks got persisted and then we'll tab all this stuff in make sure you end okay so now that goes away one thing I'm going to do here is on my form let's actually just put all of these things in a div together Dib div I won't say MB for maybe and then I'm gonna grab all of this stuff tab it in paste it in there and let's see what this looks like okay so that bounced everything down a little bit more nicely so let's go ahead and hook up everything in here that we need to so just to kind of wrap up the layout and design of this page so we really need to have edit and destroy capabilities we don't really need show page because it's all going to be pretty well encapsulated inside of this card so to that effect let's go up here let's go down here and let's copy these two TVs and inside of our task name let's do what we've done above I'm just gonna go ahead and paste these here we're gonna fix all this in a sec don't worry about it because if you're going oh my gosh that's invalid yeah it is so just hold your horses for just a second so paste this inside of the h5 and then again we need to put this TAS name inside of a span in order to make it its own element and justify it and then we're gonna just create a div with no classes or anything and let's bump these guys up in there and then we'll take out these T DS same thing for the ones at the ends and then finally let's add a class of BTN BTN the warning and class BTN bt in danger okay so that shouldn't basically do it for now so let's go ahead and just eliminate all of this stuff at the bottom and let's see what we got so it's not terrible and it's not great-looking it's kind of kind of funky actually for the moment the only thing I'm gonna do to make any changes here is BTN SM and let's see what other so that changed this it's kind of okay I guess alright so what else do we need to do okay so I started trying to add a little bit of extra data so we can see what this looks like and we missed one thing so if we say take out the trash it's gonna give us an error and what we need to actually do is inside of our form here we need to provide we need to provide where is it here so just right in here we can say F dot hidden field and we need to give it a status because remember the status is required and I'm gonna give it a value of not started so everything is gonna just start off as not started so let's try to add that again take out the trash and let's see what happens here so now we get it take out the trash and I've got my handy lorem ipsum over here so we can copy some text and paste this in if we edit so we still haven't styled the Edit screen I'm not sure I'm gonna worry about it in this episode I might we'll see how far I want to take this but now we've got a couple of things so now we can start kind of tinkering with the design a little bit more here so I think I'm gonna start by working on the spacing in and around these cards and then I'm gonna work on some of the wording like for example right here I don't think that she'd say that not - started I think it should say regular not started maybe we should have done that differently earlier but that's okay we'll fix it the other thing I want to do the colors on here look a little bit like we're at a circus or something to me which is not the vibe I'm going for so I need to work on that so let's see what we can do with the spacing so I think between each of the cards so first of all these cards let's just start by giving them the margin bottom of three and let's see what this does so that's just gonna bump that down a little bit I think that looks good and honestly I don't actually know how much this three is this is just a bootstrap saying I have em b1 and b2 so on and so forth you can switch this character right here so this could be like all margins are three you can do NT ml and R for top left right and then we are using the MB there on the spin I'm gonna add an MB 3 as well let's see what that looks like and then there's something perturbing me about how far down this is and I believe this is just because we have yeah we have an MB for on there so I'm gonna make that a 10 B 2 so now this looks a little bit better what I don't like in actual fact is that these are in line with the title and now that I'm seeing it I kind of think I should be in line with the badge of there so let's actually do this let's come up to the let's see where are we so I'm going to make a div and I'm gonna cut all of this stuff and paste it inside of this div I'm gonna put this span right there and then I'm gonna get my buttons put them in there and now I don't actually well I don't need to span tag technically but I think that's fine let's see what this looks like so that looks a lot better so let's change up those those colors so the b-team warning i think we could just make it a light and then maybe the danger we can make secondary so now those are looking kind of washed out but okay with it for the moment anyway I'm gonna find a different color for that in a second but let's do that to the ones at the top also where was that edit so let's do BTN light and BTN secondary so now I kind of have a monochrome thing going on here which I'm not really sure how I feel about just yet but anyway so let's go back to our project here so what I would like to do is change these to be specific colors depending on what the status is so maybe not started is like a gray progress is maybe blue and complete as green or something like that so how could we go about doing that so we need to open up our task hit the wrong button their task and then what I want to do is let's open up that and then let's look over at what we have going on in this where we have the badge so we have badge primary let's do this let's do um say um badge - task dot badge color or something like that so that would mean that we have badge - primary or so on and so forth so I don't know if I like this or not but let's keep going with it for now so we'll just write a method over your badge color and then we'll say a case status and then we'll say when not started we'll say a secondary when in progress well maybe say info and then when complete we'll say success or something like that so let's go see what this looks like so will refresh and they are they're really gray and not started and now we have this very very gray look so if I change this to be in progress so now it looks like that and if I change this to be complete now look like that that's not too terrible actually so I think one thing that's messing with me is actually this background color so let's go back over to our base CSS thing and I'm just going to take this away so now we've literally have no custom CSS at the moment and then in our application HTML yarby the body I'm gonna give a class of BG light here so then let's go over to our show page and it's back let's make this a BTN secondary so I'm just gonna kind of stick with the bootstrap colors for now to essentially kind of keep everything looking a little bit uniform maybe in a in a future episode I'll show you how to overwrite all of the colors so what I want to do is change this BTN secondary here it's a BTN dark and I'm changing that in two places so let's look and see what this looks like so it's going to take a second to refresh because it's gonna recompile some stuff so that looks a little bit snappier actually so I'm gonna stick with that I like that okay so this is looking much better maybe the Edit actually needs to be like something else cuz that's a little bit hidden right there maybe we should make that BTN secondary or something I think I'm gonna leave it alone for now I think it kind of like that okay so let's keep going okay so the next thing I want to do is handle the index page up here so I don't want this text decoration and I don't really want the color to be blue so let's see what we can do about that so let's go to our let's close everything except the index page here so we have this link to project so on and so forth so what we might be able to do let me see if this works if I do class text-decoration:none so this is another bootstrap class they have little utility classes for everything so let me refresh here so now you can see that when I hover over this it doesn't have an underline then what I want to do is on the card title first of all maybe we should make this in h4 just to have a little bit bigger text here we can also do it say text dark and then maybe on the paragraph tag we say class equals text secondary let's see what this looks like okay so now we have I don't really care for that H for size I'm gonna make this a bold see what this looks like I made it even bigger it's not what I wanted to do with H five okay that looks a little more like I like we also might want to make it where when you hover over this it gets a different background color or something like that potentially where the whole card gets a background color all right so let's go to our code and in here inside of the card so let's make this a project card and let's open up our base class so this will be our first actual custom CSS will say base knock base project card and I just really want to do well let's do like this will say project card and I want to transition the background color for 0.5 seconds I'm gonna ease and I'm gonna say and hover background color and I think it needs to be for bootstrap f7f 7 f7 is the light gray color so let's go refresh and try that out so if I hover you get this kind of nice little gray going on there to be totally honest with you though it's a little bit hard to see but I think I'm gonna leave it for now so let's add another project so first of all while we're here let's clean up this new projects page so projects new someone here was a div card well I mean actually before I do that let me actually open up projects index so it's just the same so I want to get like the first several things here so I don't actually need the D flex stuff I'm not gonna have any buttons but do you want that in before let's just get rid of this link will say new project okay so then we want to render the form and a link to back I'm gonna do what I've done previously so I'm gonna say class BTM BTN secondary and then in b3 like that so now I just need to close off my div here divs rather okay let's see what this looks like okay so now we have everything sitting nicely inside of a card let's edit the form so let's say projects form I'm gonna go ahead and just say form group and then I'm gonna give this a class form control same thing here instead of field will have form group text area classes form control and then the actions I'm not gonna worry about that class and I'm just gonna add a class here of BT and BT and primary so let's see what this looks like so that looks fine I think so we'll say project to another great project okay create project see our notification showing up there so now we can see here what it looks like we have multiple projects so on the index which is basically kind of our dashboard for the moment this card I'm gonna give an MB 3 so those look like that and that's looking a little bit better so let's go ahead and style a couple more pages and then try to wrap this up so if I go to the Edit project so now the Edit project page looks ok because it's getting most of those bootstrap styles that we have because we already saw the form bit but I want to look at projects edit so what I need to do in here is basically copy the code from new so I'm gonna put at the bottom and then just kind of replace stuff so this is the same doesn't back I don't really care to have this show in here necessarily actually what I want to happen is back should go to project because there is no way to edit from the projects index anymore so now we just have back which goes to the project the form is already being rendered that and then the title here should just say editing project ok so that looks pretty good let's just save this now and see what we get so if we refresh now we get this same kind of look if we click back we go to the project 1 so that's so forth okay so then probably the last thing we need to do is actually fix up this edit for tasks so let's go ahead and do that I'm gonna actually copy all of this again and we'll say tasks edit I'm gonna do the same kind of deal paste this at the bottom so everything kind of has a back pass so I'm gonna go ahead and just copy this and replace my project the one thing though is I want to actually go to the project path again what was I going to before yeah so I can actually leave this exactly the same I don't need to do that I want only to the project that's exactly what I want to do I don't want to show the form that's being rendered isn't really taking any arguments in this case so I'm just gonna render form and then editing tasks is what I want this to say so let's go and see what this looks like if i refresh okay so now it looks better but I need to actually go ahead and style so what and what I need to style is the form so I need to go into tasks form and we're gonna the same thing as before I'm going to replace filled with form group and then for each one of these we're gonna add a class form control and then the submit we're gonna give a class of BTN BTN primary and will refresh and we'll see what that looks like so the select actually doesn't get the styling so let me see if I can figure out what to do about that so it looks like the rails form dot select requires us to also pass in another option here we just have to give it an empty hash because we can pass in more settings if we want so that's the expected fourth argument so let's refresh this and see what it looks like so now we get a much cooler looking form okay so the last thing I want to do is go back up to the projects index and what I would like to have on here is actually a status indicating where we are with this so like is it started not started so on and so forth so it's gonna look really similar to the tasks down here but it'll it'll be a little bit different and we might actually include the percent completion so let's look and see how we can do that so first of all let me close every sit down and open up my projects index page so in the card body I'm gonna do the same thing that I had done before on the projects show and I'm just gonna copy one of these badges so let's grab this now one thing we're gonna get into here is we're gonna run the risk of making all the pages look so similar it's hard to tell where you are so we will come across that bridge in just a second probably so let's look at this and see what it looks like though so we have in progress like that how do we feel about that what else could it say so I'm kind of thinking is we could do something like div nb3 bump this up in there and then make another span and say class equals text secondary maybe and say something like 34 percent complete and I want that to be small I think so we'll cut that and paste it right in the middle see what that looks like oh that didn't do what I thought there we go yeah so that's Kanna what I'm picturing so how can we make this a reality so we need to do a couple of things we need to write a method so we'll say again what we call this project and we are we on the other one called it badge color so I'm gonna do the same here so we'll create a method project ID badge color and then here we will create a new method which we will say projects not status and there's gonna be a little bit of the definition of this which is potentially going to be debatable and how we should do it but I'm gonna do it in a way that kind of makes sense to me just as a starting point so we need two methods badge color and status so the status what I want to do is say okay if everything is complete then we want to essentially say it's complete so we'll say if we'll say how can I do this I'm gonna write it an ugly code when they clean it up so if tasks dot all and then we'll say tasks and then we'll say task complete so we need to write a method on task which is complete so we'll say def completes I don't say status is complete we write a couple other methods here go ahead and do that so we know we're gonna need an in progress status is in progress and then we'll see not started should be here so we'll say status is not started okay so that gives us a little bit of utility methods over here so if the tax are all complete will say that the status is complete else if tasks dot any task soul didn't say tasks that in progress will say in progress right so basically is saying like ok if everything is finished it's finished if if there's anything in progress then we're gonna say it's in progress else we'll just say not started okay for badge color we can actually copy this method exactly which you know maybe there's a refactoring we can do here but essentially we're gonna utilize exactly the same thinking that we did on for the code that we did on the other one so let's check it out and see what we got here so if i go back and i refresh so now we get in progress and complete so what's project two why is that doing that it's because there's no that's because there's no tasks so what we need to do is come over here to project and say return not started if tasks dot none cool so now we get something more like we're probably expecting so now we need to build out this percent complete so what i want to do here is say it's make a method it's gonna be called def percent complete and what we need to do is basically say okay how many are the how many tasks do we have that are complete so we'll say completed complete tasks equals tasks dot select and then we'll grab the task and say task dot complete question mark dot count and then we just need to say complete tasks dot 2f so we want to convert to a float so that when we do division we don't end up with like integers divide it like integer division doesn't really work for percentages basically if you want to get a decimal out of it I'll talk about that some other time but you'll I'm sure you've seen that before if you've been coding much so we get the complete tasks to a float divided by tasks that count right then we want to take that and we want to multiply by hundred because this is gonna say ok let's say there's three tasks and one of them is complete you're gonna get a zero point three three three three three so you want it to say 33% so then we need to take this and we need to round it okay now we also want to go ahead and just return 0 if tasks dot none so we're gonna guard against the case of there being no tasks because otherwise we're gonna get it divided by zero error so now over in our view let's make this say project percent complete and we'll leave that person in sign hanging out right there and just refresh so we get zero percent complete and so on so let's come back over here and let's add a new task will edit the task make it complete and let's go check our home page so now we get fifty percent complete and it's in progress so that's pretty nice so we might want to actually just add a little bit more info there so what we could do here is say okay so we're gonna basically just stay within the same area of text and I'm just gonna add a little note that says how many are complete divided by how many are so we're gonna show people what the division is essentially school say project total complete like this / projects dot total tasks and then we'll just say tasks like that okay so now you might realize okay well we don't actually have those things so let's come over here and say make those methods so we'll say def total complete and what I'm gonna do is you just grab this right here and now instead of doing this I can do total complete okay and then down here I can do another method total tasks and then we'll do tasks dot count and then we'll switch this out and say total tasks okay and now this is a really simple little two line method and now we should have everything we need so let's go see what this looks like so now this is giving us a good deal of information so when we look at these projects we can actually get a sense of the size of the project by just glancing so that's pretty cool now this is all really really simple but I think it's a good start you can definitely make arguments that these things aren't sophisticated enough and that's totally fair but just bear in mind I mean this has been a like a little over an hour work session to get something that's pretty decent put together so I've been going around trying to put in some more realistic data and I just realized that I made a small error here so I have one thing that's complete and two other things are not started and you can see on the home page is saying 33% complete and it's not started so what I want to do is actually in my project here this is what we need to do is say we wanted to be in progress if anything is in progress or complete so this is a small change but it's an important one so now in our homepage we're gonna get in progress there so that's just a small fix so I think that's gonna be it for this episode in the next episode what we're going to do is add dragon drop sorting so that you can reorder these things how you want same thing for the tasks so that you can drag and drop and organize this stuff a little bit better I don't know if we'll do that for the projects or not actually we might I don't know but we'll definitely do it for the tasks I think that's probably a little bit more important because it's like you know you're adding priority this series as I said earlier is setting us up for this episode rather is setting us up for a handful of others this is gonna be a pretty in-depth series so if you want to get all of it definitely go check out tech maker TV that's where we're posting a lot of in-depth work session kind of stuff in the series we pulling out some individual kind of interesting things and putting them in episodes on YouTube but everything over on tech maker TV should be available if you want the whole whole thing but anyway I think that's it for this episode if you've enjoyed it and stuck with me this far thank you so much and please give a thumbs up and subscribe to the channel that helps us out a ton so that's all that said I'll talk to you next time

Channel: Techmaker Studio

Views: 13,669

Rating: 4.9076924 out of 5

Keywords: rails tutorial, building a project management app, project management, ruby on rails tutorial 2020, rails 6 tutorial, ruby on rails tutorial, ruby on rails projects, learn ruby on rails

Id: u2o_new-T0o

Length: 73min 35sec (4415 seconds)

Published: Wed Jun 10 2020