Categories and Filtering For Your First Rails 6 Restaurant App | Week 2 Episode 4 - 20in20 Challenge

so last time we set up the menu and this time we're going to be setting up the categories and the ability to search for that menu so you'll have the featured item card on there where it's like one of the pictures for one of the pizzas or whatever you'll have the list of pizzas then you'll have like your pastas with a featured item for the pastas etc and if you want to search for like your pastas you can do that or if you want to filter it by like your gluten-free menu items versus your dairy-free etc you can do that as well so that's basically the premise for this video I hope it helps and I'll see you on the other side all right so let's go ahead and let's get started the first thing I want to cover is last time you probably saw me type something like this I did like rails DB drop and in rails DB : my great Rails DB : seed rails s and I'll fullscreen this real quick and thanks to Sean from the comments you actually pointed out that instead of doing this what you can do is you can type rails DB open up a brace and then say drop comma migrate comma seed so this will do the same thing as dropping migrating and seeding the database and then you can also do a rails S at the end if you wanted to so that's nice and I found this article online and I'm just gonna talk about real quick or they mention that the advantage of doing it this way is every time you use here they're saying rake but it's the same for rails every time you use the rails command you're actually loading the rails environment so when we did the rails DB drop migrate seed whatever in the initial we were actually calling the rails environment three times and in this newer version we're actually only calling the rails environment once because we're doing you know we only say the rails keyword here and I apologize if you can hear a tile saw in the background we're actually renovating our house right now and they are doing the tiling in the kitchen but you can do the drop migrate the seed so here instead of running it for each one of these commands we're only running at once which means you only have the overhead once so your runtime here is actually like a third of the normal overhead and then just one step further you could create a new file at the root of your directory so you could say like sudo nano rebuild and let me just type in my password and then in here you could do the same thing so you could say rails DB : open up a brace a drop comma migrate comma seed and then we can save this and then I can let me just see it remodeled this real quick you can then do a dot slash rebuild like this and if you run it it's the same thing as running the command itself it's just stored inside this file I would recommend looking into how to build small little scripts like this because they can save you a lot of time in a production environment so you know normally I'll do something like dot slash deploy if I have a bunch of scripts that need to be run it's similar to and react how you can do like NPM start and it'll run a whole bunch of things but yeah so I just wanted to cover that real quick so now we have the rebuild file the next thing we want to do I guess I'll show you the demo for what we're building today so we're creating the categories for the food so you have like pizza you have pasta and you have desserts so each of these images is actually being pulled from one of these products where the featured flag is set to true so we're going to be doing something like for this category grab all the products from these products find one where the featured is set to true and so that is the image alternatively you could just attach the image to the category and then just say this is like the category image I did it this way in case you have multiple you can then like set up something where it'll like randomly pick one or whatever I don't cover the random selection here I'll leave that as an exercise for you guys but you get the idea it's just like giving you options and I'm presenting it and what I thought was the more difficult way so if you wanted to just do the category images you could figure that out yourself and then for the search it's a little bit buggy because rails change the way that JavaScript works again you can't just submit the form when you type it causes it to try to like redirect to an HTML page so I had to do a bit of a patchy JavaScript setup here the next thing we'll talk about is the search and the select for the filters and now that I'm looking at my code I'm actually realizing that I broke this in my local version so you won't be able to see it basically when you type it's going to filter out these products based on what you're typing and it'll also have some fuzzy matching so if you type Iza it'll be able to figure out that you want pizza and I apologize if you can now hear dogs barking in the background this is why normally for court at night and then for selecting the filters you can also select a filter and it'll grab the most relevant one so that's enough of the demo application let's go ahead and let's build this thing okay so the first thing we're gonna want to do is create the scaffold for our categories so for this we're going to type rails G scaffold we're gonna say a category has a heading of type string a body of type text and it has a display of type boolean then we can go ahead and we can run this well then come over to our DB folder our migrations and we'll take a look at our create products so if we're using sequel light you could just say T dot references categories in here but since we're gonna be using postgrads in the final version of the project we actually need to create a new migration to add the categories to the products so for this we're gonna say rails GT migration add category to products and then we'll say category : references and then we can run that migration we can come in here and then we don't want the category no false so let's just get rid of that save that and the last thing we need is let me close this because we're done here last thing we need is the act of storage migration so I'll say rails active underscore storage : install and that'll set up all of our migrations for us so that we can add images to our products so now I'm going to do our rebuild command which should just recreate everything it's dot slash rebuild and now that we have that we can move on to the actual like meat of the application so let's start by creating the the search right here so for this will come in two views menu index.html daddy or B and then we'll fullscreen this and we'll start writing some of this code so here we were doing three times do just to get more products on the page but we're gonna go ahead and we're gonna get rid of this and I'll address the turn area in a minute here but we'll start with a dot call - 12 and I'll link to my tutorial where I cover how to setup Emmet for the auto-completion as well as all of my Ruby gems or all my Ruby plugins that do the styling here but if you want to tab complete your divs like I do you can come in to file preferences settings you can search for Emmet and you can come down to the bottom and trigger Emmet expansion on tab and that will let you autocomplete in the same way I do here by pressing tab so now that we have this we need the form for the search so for this we're gonna create a form tag and we're gonna set this to be the search path and since we're using the search path let's come into our config and our routes dot RB and above the resources categories we want to say get search to menu search so that I'll set up the route for us and now we can use the search underscore path and then if we come back into our index after the search path we set the method to be get and then we want a remote true I think it's I do and then we'll end this down here okay and I actually have the wrong version in this index file as well so I'm gonna have to probably wing this a little bit so let's start by creating the div here it will say dot input - group and then a margin bottom of five I think oops yeah dot input group and then dot and b5 if we want to classes we do it like that so now that we have this we want a Col - eight and then inside of this we want to do the text field tag so it will open up some Ruby code almost like text under square field underscore tag we'll do this for the search we want the search to be empty by default so the search bar is empty well this a class of form control a place holder of search of search dot dot and then we want to give this a on key down and for this will say click Submit now we need to create this function and the reason why we're not doing something like this dot form that submit is apparently this is completely broken in rail six so if you call this dot form that submit even with remote true it'll still redirect you to an HTML page and I have not found a fix for this so if anyone in the comments wants to mention the fix for what I'm showing with this remote form something where it works better please do you can either like link a gist or just you know put the code in the comments and I'll do like a small update video where we fix the search form but if we come down here we need to create a script tag and inside the script tag we'll create this function that we just called so let's say function click Submit and then for the click Submit function we need to we'll have to grab the submit button so we'll say search underscore submit is the ID and then we want to trigger click and we now have to actually create that submit button but we also have to do the Select tags so this handles the text field the next thing we need is the Select so we'll give this a class of column three inside this column three will create the Select tag will call this filter and that's just the name of the parameter we're going to use we then need the options for select so we'll say options underscore four underscore select and this takes in an array so for this we're going to say the first one is select filter then we have D routes then we have dairy free then we have gluten I did it again gluten free then we have kosher then we have peanut peanut free then we have vegan and finally we have a vegetarian so that's all of our options let's go ahead and let's format this a bit nicer something like this there we go save this then after all of that I think we also have to add any custom select so say comma class of customs select so that should handle our select tag and then the last thing we have to do is this submit button which comes out of this column three I think so yes so we come down here and then we say column - one and then we'll do a submit underscore tag search class of button button dark an ID of search submit and then we can save this and now if I come over here and I run rails s we'll see if this is showing up on our page here yep so here's our search field you'll notice here that we have these weird gaps between our search our filter and our search button to fix this we'll just add some inline styling real quick so we'll say style is equal to padding zero and you could add this into a custom class and do it that way but I'm already a bit short on times that you have a call at 5:30 and I'm trying to get this video out today and this is my second time recording it so if we save this we refresh the page this should fix the padding issue there the next thing we want to do is for the searching you'll see here that the search action doesn't exist but you are going to have a couple options here for the one that we're doing we're actually going to set the style of the button to be display:none which will make the search button itself invisible and then if we're doing the search button invisible method we want to get rid of this column one and we want to change this to a column four and then if we refresh this page it'll take up more of the area and it kind of takes up the whole thing and it gives this a quarter and this two in this 3/4 of the search area but that is about it for the search field we then come down here and two divs down from the end we want to say create a div with a ID of menu - products - container and then inside of this we need to do a render for the menu slash products so now we have to come into menu create a new file and underscore products HTML ARB this is going to be our partial where we do all the logic for actually displaying the products it's on here we're going to create a row we're gonna say at Kats that each do cat and we still have to define this cats variable but we'll do that in a minute we'll come down here and we'll say and next will say if the cat that products that we're featured is true that first image attached and I'm not sure this is the most efficient way of doing this if someone else knows a more efficient way please let me know in the comments we'll just sort of crowdsource how to how to do this section I guess so then we'll create an image tag and we'll say cat dot products that we're where featured is true dot first image and then we'll give this a class of IMG fluid the next thing we want to do is give this a class of column - twelve the inside of this will create a h1 with a style of text-align:center and we'll close this h1 tag and then inside of this we'll say give this a cat heading so this is where we create the category head and then we do a HR with a slash right here down below this we do the at products dot each do product and we do also need to define what this at products is because we haven't done that here so let's then say end right here and then inside of this we want to do a dot Col - four and inside of this Col - four we do a h5 and inside of this h5 we do a product dot name then we do a P oops ap and inside of this we do a product dot just I guess we changed it to dot body now I don't know this one's still that description categories the body one so then we come down below the P tag and then we create a span and inside of this we say product dot price and then we do a bar here and then we said I think we did something like product dot catering question mark and if it was we said this is available for catering else it was just the empty string and then we closed that thanks to Jeffrey in the comments we actually have a better way of creating this ternary operator so we'll just clean this out and then we'll say instead of doing it like this we'll change it to of available for catering if product catering and once I looked at it I realized that we don't want this bar here because if the catering is false then it's just going to say like price of $11.99 and then this bar is gonna appear we want this to appear inside of the if statement so if the product that catering is true then we need to separate this so that handles that we then come down here below this end and we need to do two more ends and that should do it for this product dot HTML go to your B file the next thing we need to do is come up to our products controller and we need to add in a few permits in here the first thing we need to permit is the product image and we'll create this in a second and then we also need to permit the category underscore ID and then in the update we need to say at product that category equals category find params product and then we need the category ID and this is just because we're going to create the Select for selecting a category inside of the products edit page which is what the admins are going to use to manage the products from the server side and then up here and create will do the same thing we'll say a product category equals category dot fine params product and then category ID you could also move this into a private method and call a before action for the create and update methods that's gonna do it for the products controller the next thing we do is we come into the menu controller and let's do a before action oops set cats and then we'll come down to the bottom here and we'll say private set the DEF set cats and then we'll do at cats equals category dot all that we're display is true and then we need to do a Def Search and so our index is fine because we're now setting the category before we get to the index page our search we do need to do some things so we're gonna say e query is equal to params search so we're just grabbing the search params and storing it in a local variable you could also come into your products model and create a search method here for what we're about to do but we're going to do it this way instead because it keeps the logic in the controller for this one so now we're gonna say product dot wear name like question mark comma and then percent query percent and these percents are what makes the fuzzy logic work so if I were to get rid of this if you were then to type like eyes eza it would no longer match it to pizza so you do need the percents on both sides here and then the next thing we're gonna do is we're gonna do a check for if the params for the filter which is what we're using the filter by the like type of food so if it's kosher or dairy-free or gluten-free or whatever so this is equal to select filter which is our default filter setting then we just want our at products to be equal to results which is just saying make it equal to the search result for the query else we want to say symbol is equal to params and this is going to be a bit meta programming but symbol is equal to params filter and then we want to do a G sub on this and we want to substitute the space in here so get rid of this space between the Select filter and substitute it with an underscore then we need to down case this and then we want a call to underscore symbol so what this is going to do is let's say we call this with dairy-free we then do the G substitution which oops let me just spell this right we then do the G substitution which results in dairy underscore free we then call down case which results in dairy underscore free as a string and then we call to symbol which changes this to dairy free so we can then say at products is equal to results where symbol is true which is the same thing as saying at products is equal to results dot where and then let's say it's for dairy free we do dairy free is true so we'll just put true right here and the alternative to this is instead of doing the symbols thing you would have to do one for dairy you'd have to do one for gluten-free one for peanut free one for vegan one for vegetarian one for kosher etc and obviously this is just kind of messy so instead we will undo this and leave it as the symbol true so now that we have this let's come down to our views menu and let's create the Jas for this search so for this we'll say search jst RB and then we'll grab the menu products container and then we'll do the dot HTML for it is gonna be AJ render of menu slash products okay and that's it for the search jst or B file if we now come over to our server and refresh so to get to fix this error we need to say if product that category is equal to cat so once we do that and we refresh the page you'll see here that this is working we just don't have any products on the page yet let's now come back into here and let's come into our products formed at HTML Derby and down here at the bottom let's just add in two quick things so we'll say do a field we want this to have a form dot label for the category and then we need to do form that select for the category ID and this is important we're setting the category ID here as the parameter and in our products controller we're setting it as category ID if you just made a category in each one it would try to assign the category itself to be the category ID and you would get an error so make sure that you're setting this to the ID and then we're doing options from collection for select and then we want to do category all the ID the heading and then we want the default thing in here to be the at product category ID and then the last thing in here is we want to say for the field for the image so I'll say formed label image and then formed file underscore field for the image so now if we come in here and we go to slash products apparently I forgot a comma in here somewhere yep I forgot a comma after the category ID so let's save this and if i refresh now the products should work so let me fullscreen the products page so if you were the restaurant owner and I have to delete the scaffolds edit CSS but if you were the restaurant owner you'd have a page similar to this where you just come in here and you're like okay let's edit this pizza and I think for this we need to come into the models product RB and we want to say this belongs to a category whoops we also need to seed the database so let's go do that real quick because right here it's telling us that there is no category which is true because if I do like category dot first we haven't created any categories so let's come into our DB seeds file so we'll say category dot create don't forget your bang and then we'll say heading is pizza the body is the body is it's so good though and the display is true we'll create another one will say category dot create heading is going to be pasta body is going to be we can only do so much in each video and the display is going to be true the last one will do is category create with a heading of desserts it gives us a body of rocky rails ice cream and a display of true next we'll come down here and instead of doing 25 products let's only do 10 and let's change this eye to just be the regular eye and for this oops for this we'll say pizza is equal to product' and we'll change this to product new and after the catering true let's set the pizzas category to be category of category that find the first ID which is this one next let's create the pasta and the desserts so we're going to paste this twice we'll change this one - pasta this one - dessert and we'll change this ID to two and this ID to three and we'll change this price for the well will change this - pasta will change the price to be like seven ninety five and then we'll change this one to ice cream and we'll change the price to just be like three dollars next we want to set an image for all these so for the pizza will say pizza that image that attached io of open and then let's do HTTP Pixum dot photos / 1920 / 1080 comma file name of i underscore image dot jpg and then we'll just copy and paste this two more times for the other two so paste paste and we'll make this one pasta and we'll make this one dessert and we can even change this name so it's like pizza underscore image and pasta underscore image and dessert underscore image but then we need another underscore here so it's separated from the numbers so we'll do that and those dogs are just going crazy then we'll say if I is equal to five pizza feature it is equal to true pasta that feature it is equal to true and dessert that feature it is equal to true and and then down here we'll say pizza save pasta dot save and dessert dot save and that does it for the seed file so now if we come back to out loops so if we come back to our terminal and kill the server and we do a dot slash rebuild hopefully there's no errors here and this manages to rebuild the database oh and we did get Nair which is undefined method image for product so we do need to come into our product dot RB and below the belongs to category want to say has one attached image can't believe I forgot that just goes to show you that even though I made a tutorial on active storage that doesn't mean I remember to do it right every time so you know if you guys do forget something don't feel bad cuz it happens to all of us more than we care to admit honestly okay now we can run a rails s command and let me refresh this page let me actually just go to slash products as a whole and then I'll hit edit oh whoops I see what I did wrong here um it's been a long night and now a long day let's come into the products form you can see where my mind is I've been thinking about the production video that we have to do this is actually at product that category ID and now if we refresh the page it'll work just fine so we can switch between these three let's make this pizza a pasta and we can give it an image I don't think I have any pasta in here let's just make it a loaf of bread and hit update product there we go so now if I come in to edit it should be a pasta instead okay cool let's get rid of the scaffolds that s CSS finally by coming into assets style sheets scaffolds that s CSS and we'll delete this now let's come to the home page and we're going to on the menu and now now that we have this error we have undefined method products for category so the category dot RB model needs to has many products and we can save that and now you'll see that the application looks just like in the demo except with different images because we're using the Pixum and then we can search for something like pasta and you'll see here that we actually are still doing a request to text HTML so if we come into our index page for the menu you'll see why that is it's almost instantly identifiable we're still using the list form dot submit so let's switch this to we want to use our custom so I think it's like click Submit as the function name and then for the Select tag we want to say on change make this a click Submit I think is how we do this I know if we refresh if we go back to slash menu and we type something like pasta it's now filtering the pasta so that's good and if we check for a dairy-free pasta you'll see that all the pastas have disappeared we seem to be running into an error here so if I type pizza P ia okay now it seems to be working so it might have just been an issue with JavaScript again this is kind of a buggy way to do it personally I would say get rid of the remote true and I would just make it so it's redirects to a new page and the other thing I would do is if there are no pizzas so if we're just searching for like pasta I would get rid of this pizza image in the title but one thing I'm noticing here is if I like delete this and then change it sometimes it's updating and sometimes it's not and that's sort of the problem with doing things in a way that rails doesn't like is sometimes you do need to polish quite a bit there is no polish here of course because I'm making this product project in the span of like a week but I think that's it for this tutorial I do have my phone call now I hope this helped and I'll see you in the next part where I think we're doing the orders and the shopping cart finally okay so that's gonna do it for this video if this helped remember to like it and if it didn't help remember to dislike it so they gets like suppressed in the algorithm that way other people aren't subjected to it because you know you don't want to run into those bad tutorials where the guy just wastes a whole bunch of time and you don't learn anything so next time I think we're working on setting up the shopping cart in the ordering system and then after that we'll be pushing to production I have most of the production already set up on a server so that's running and working okay so hopefully there won't be any more unforeseen circumstances here and eventually we'll also do the admin panel dashboard thing but that my have to get pushed into next week because I decided to rerecord this video but yeah that's gonna do it for me you know remember to subscribe do my patreon stuff if you want links are in the description and I'll see you in the next video goodbye [Music]

Channel: Deanin

Views: 4,213

Keywords: deanin, deanin rails, rails categories, rails filtering, freelance rails, menu setup, menu setup rails 6, menu setup rails, rails 6 products, rails 6 restaurant, rails 6 freelance project, rails 6 real project, rails 6 store, rails 6 online store, rails 6 orders, rails 6 online orders, rails 6 freelance, rails 6 project series, rails 6 shopping cart, rails 6 production, deanin tutorials new, 20in20, rails products, rails 6 cache, rails 6 caching, rails caching, deanin new

Id: MBB3PMmr4is

Length: 33min 50sec (2030 seconds)

Published: Sun Mar 29 2020