Active record scopes, cleanup, and select boxes with enum - clearbnb - Part 8

hey what's up welcome back to another episode of clear bnb so we're gonna continue working on our short-term rental marketplace there's uh there's already been several episodes i think this might be episode eight or maybe nine i don't know we'll have to go back and check the numbers um we have right now we have a way to sort of like create your own listings and a couple different pieces around that but i think it makes sense to start talking about how guests might view a listing and yeah we'll just kind of dig into how we might create a separate like detail view in a list view for searching for listings and we'll start off just super super basic and then continue working our way up ultimately we want to provide someone like a way to actually book a listing and so we'll have to figure out pricing and how do we move money around and things like that so in this episode why don't we focus on just getting some lists and detail views up and running so i've got clear bnb up here we'll fire it up refresh the page here this is kind of what it looks like right now it's very much just using tailwind ui and then we've got slash host slash listings which i think okay so undefined method listings for nil class so this means that the current user is nil so in this controller in the host listings controller we should make sure that someone is logged in so let's go to the host listings controller uh no host listings controller so here we want to require that someone is logged in and i think yeah so this is using devise we call we set up a before action and we say authenticate the user so now if we come over here and hit refresh we're redirected to the sign in page where we can hit sign in and now we're logged in and we can see our listings we've got this test listing and right now the detail view for a host is just the json output for the test listing and then you can edit it if you want right now the forms and everything look pretty nasty but everything is functional so this is like the hosting side of it and so there are uh the on the other end when when you are a guest browsing listings i think we want to have just like a slash listings view where you can see all of the different rooms or houses that you can uh potentially book and so why don't we work on that now so we'll just say rails g uh controller we're gonna generate a new controller called the listings controller and it'll have an index page and a show page to start i think yep that's probably a good good spot to start so then inside of our routes file we want to add resources listings do now i name spaced the other listings controller underneath host but for the guest listings i don't think we want to namespace them i think the path will be more familiar for sort of just end users if they can just go to like clearbmb.com listings or whatever that ends up being and we actually don't need a do end here someone recently commented on youtube and asked for a deep dive on routes so i do plan to make an episode all about rails routes and how they all work and fit together but right now we're just going to add resources listings this will create seven different routes it turns out we we can limit those seven which are create update delete show a way to show the detail for it a way to show the the edit form a way to show the new form and a way to list them all so that's the seven routes but we can limit it so that it only creates the routes for the index which is the list of listings and the show page which is going to be like our detail view and so now if we jump over here and refresh the page so now we've got the listings index so we'll go to our listings index page here and for now i think it makes sense just to kind of like iterate over a bunch of listings so i don't know ul li uh yes we want to say at listings.each do listing um and for each listing we'll create an li and inside that li we will just put a link to the listing dot i can't remember if we used a title or name or something yeah title to the listing path for a listing and that should get us at least started here so if we refresh the page oh we need to end our loop here all right and we don't actually have an instance variable for listings so from our listings controller inside the index action we want to say listing.all just to start off we'll get like all the listings that exist and right now there's just one test listing and then over time as we we add more listings we should get more um or we'll just see like somehow i think we want to break out this view so that we see a map so you can see where on the map your listing is and then on the left we have kind of like a table maybe that shows an image of the listing and the price and things like that but to start off let's just get the listings on the page this is kind of annoying me too this little profile settings situation so i think i'm gonna actually just like go into the layout for the application and i think i'm gonna try to track this stuff down so your profile and um yeah view notifications like all of this stuff that's up here i think i want to take it out so let's see profile drop down so the profile drop down i wonder if i can just add like hidden or something just to like get it out of the way okay great um and then maybe when we we can go back and like add a thing where we like when we click on this it toggles the class which like re-shows it or whatever but for now i just want to kind of get it out of the way all right so listings are here we see test and when we click on test we're brought to the show page for the listing um and on the show page so listings show we want to add like some sort of details so here we can just maybe say like at listing.title and then let me pull up the listing model so we know what's on it so it's got the host id the about so we'll probably have sections for like i don't know um the host uh maybe some more information about the host uh host dot email or something for now should be fine uh ultimately we don't actually want to show which the email of the host but for for now this should like at least get us started i guess we're also going to want like a uh the about at listing.about we're going to want to show all like the details about how many rooms there are and things like that but for now let's keep it like this and that instance variable isn't going to be available until we say at listing is listing.find params id notice that here i'm not limiting or i'm not scoping these queries to the current user i'm just saying like give me all the listings um so this is something we'll want to go back and and update uh okay we'll grab the the listing.host so that should give us okay so that is the right host's email address um what other things are on the user though maybe we can just use name instead host.name and okay maybe i don't have a name saved on myself um let's see rails c user.last.update and we'll set the name to cj we refresh here and now you can see the host is cj and then we've got the name and the about for the listing is showing there we also want to have like photos and other stuff so listing show um let's pull this back up so we've got the title the about um uh let's see at listing.max guests typically you don't see the uh the actual address for the listing but you might see for instance the city that this that the listing is in so we can do just like at listing.city and um at listing.state just so that those things are available so we see reno nevada that's cool um we've got a country lat long status okay i guess you know what the status we only want to see published listings here so one thing we could do is we could come into our listings controller and we could filter this to say listing.where status is published right so that's one option and now we would only see published listings and uh or i guess we need to go back to this this route here and no there's actually no published listings right now so nothing would be published so in order to make that work we need to go into our our data our local data model for this listing and say like listing.last and say that update status to published and now if we refresh the page here now we see test but what i wanted to point out was that i don't think we want to do this in the controller per se so instead of um yeah instead of having a query directly in the controller you generally are going to want to use this uh sort of like query a bunch of times and so for instance right here right so right now what we're doing is we're sort of um scoping the the listings that are coming back on the list of listings we're scoping those to only the listings where the status is published so uh the other thing that we're going to want to do is we only want to have the show page work um so this this detail page here which is showing listing one like this should only work if the listing is published also so if we if we go back here and we update the status again to draft um then when we refresh this page for the show page like we should not actually see any listing here because it's not technically published so we want we don't want to show up under listings slash id instead what we want to do is we also want to use the same scope here so like dot where status is published right and so because we're doing these two scopes or we're like scoping the the results the same way twice here rather than needing to do that in a bunch of places what we can do is we can create a scope inside of the listing model and that scope can be um it will be a tool that we can use anywhere we want to only return published listings and so you can use a default scope so rails model scopes so yeah you could use a default scope where anytime you did any queries it came back with just uh published listings but we only want that to be true on the guest side not necessarily on the host side and so what we can do instead is we can use this scope method and uh scope is going to scope so scope is a like top level class method that we can call on application record classes we're going to pass it the name of the scope and then a lambda and the lambda is going to contain all of the query function stuff so um yeah so ours is going to look like this so we're going to say scope is published or with published let's do that because published i think published is also going to be l is listing.last l.published uh okay so published question mark would give us the whether or not the status is published so i guess we can do published and that is going to be a lambda of like where status is published and now inside of the listings controller we should be able to just say listing.published and listing.published and that should work as expected so now if we come back over here refresh the page it says it couldn't find listing with id one so in in practice this would show a 404 page to the user which is exactly what we want and also when we come back to our listings index this will also not include the listing that should be published so now if we come back over here and we update back to published and refresh the page now we see the listing so this is again showing and now the the detail page also continues to work so that is one way that you can add an active record scope um let's see what else we should add to this so listing model listing show okay city state zik zip country uh status and then we've got um in terms of yeah so in terms of associations we've got rooms so we might say something like um i don't know at listing.rooms.each do room and inside of here we can print out like room dot beds that count or something like um i don't know so let's let's make this a ul and then this is going to be an li and i can't remember if in the bed so in in the room we have what do we have here we have the room type so we could do like room.room type and then some number of beds or something let's just see what this looks like we get back one okay so if we go back to host listings slash new let's make a new listing so this is going to be something like um cabin in the woods um enjoy some time away in the woods by yourself i don't know and the address is going to be i don't know what's going on with the um the address situation here we're getting an error from our javascript uh so we'll have to look into that i don't know what's going on with the address autocomplete but yeah oh also it lost our stuff kevin in the woods cabin in the woods all right create listing all right we got our listing and now if we go back to slash listings we should see both test and um oh no that that one wasn't published so we'll publish it okay so now we've got test and we've got cabin in the woods and okay so now if we look at cabin in the woods it should show us some details here and this this looks a little wack because there is no city and state i think we should like validate that there is city and state and we got to figure out what's going on with that address input um also i do think it would be nice if inside of our like host listings view here if we had a way to um like publish the listing from here and also uh to i don't know i think yeah there's just like some improvements we can make we also want to be able to like make um add do we want to be able to add rooms and i don't think we have an edit rooms button yet so i think we have to go to like rooms or something and that allows us to add bedrooms and add beds and such um so let's let's do a little bit of cleanup here so on the host listings view host listings index view right now we're printing out the link to the listing and its status and a couple other things i think we want to update that view to be some sort of table or like grid where we're showing you each of your listings especially if you become a property manager that has several listings it'll get more and more important to like actually have lots of view or like lots of to be able to see lots of different listings um and so yeah i don't know if we want a grid list or a stacked list some sort of table i think maybe stacked lists might be what we're looking for and yeah i think this looks pretty nice and we can put like the picture of the listing and then the title of the listing the address and then whether like what the status is etcetera etcetera etcetera so yeah let's just uh copy this and um drop it in here wow that's a lot of html okay um all right so for each li we're doing this and then what do we want we want like the entire thing to be yeah a link to the host listing path for the listing and what else do we want we also want the status somewhere and we want a button to delete so for now let's comment that out is that gonna no this i can't remember how exactly that works let's see all right so we've got your listings and instead of uh okay so i guess there's probably several lis here i'm betting so yep there's the first one so we want to just delete the other two okay and then instead of ricardo cooper we want the listing's title l.title alright so now we've got test and then ricardo cooper is down here as the email address let's make this the actual address l dot address and listing so we're storing the address line one address line to city state postal code and country and so for address what i want to do is i think i'm going to return just like address line one and um address line two and [Music] city and state city and state okay and then yeah we should be able to just spit out the address okay so that looks pretty good and then instead of the um i guess like instead of the uh little uh email icon there it would be kind of nice to have that be a hero icon for a like a pin or something hero icon map pin let's see uh is there an svg for this um map uh pin pin shopping bag shopping cart map okay copy the svg and then i think we can just paste it here let's see refresh look at that okay now we've got a map cool and then applied on blah blah blah complete the phone screening so i guess we don't really have a published app but we can have yeah let's just have the status there instead of completed phone screening we'll do l.status so these are both showing published and then we can say dot capitalize so that it shows like nice a nice pretty view there and then uh what i think we also might want to do is like if it's published oh actually location marker is actually better than map i like that uh okay all right so change my mind location marker that's what i was looking for before was the map pin um did that change anything wait um that's weird maybe i didn't copy uh wait location marker copy svg okay that looks different all right here we go and refresh location marker okay so that looks much better so this check box though i think we only want it to be checked and green if it is published otherwise i think we want some other stuff so right now this um this is the hero icon and this is if it's published so i think we want to do something like if l.published then show this otherwise we want to show something else and in order to look at two different listings i'm going to update one to be draft and so now we have one in draft and we have one that's published so what should our draft be what icon should we use for draft um not ban i guess we could use a check circle or something or maybe a clock i don't know something about it being pending or like not complete like a work in progress what what seems like a good icon for a work in progress i'm thinking maybe this this clock here that's like filled in and also uh we can make its color um we can make the color text orange 400 or something i don't know let's see okay that didn't work um flex shrink uh zero mr 1.5 height five width five okay so this how come we're not turning orange let's see tailwind css orange text text oh maybe it's yellow text yellow text yellow not orange text oh also i spelled orange wrong let's see if that worked uh no text yellow nice wow okay that looks super cool okay so then applied on january whatever like i don't know if we even need that right like maybe we could see we could maybe we can put something else there like last booked or something like la i don't know last scene last seen by guests or something and then we can put some date um that'll be like a to-do we'll have to come back and actually update that for now let's just comment it out and see okay that's fine all right so we've got we've got two listings your listings i think we want to make that even bigger uh xl or something and text i don't know does that do what i think it does no uh bold or like text sizes uh size font size font family font style text okay so i was looking for like 2xl and let's see okay and then in terms of font styles or font weights i guess font dash bold font dashboard instead of text font dash okay um cool so your listings and then i also want that to have like a little bit of breathing room like it seems like it's pretty tight underneath this this uh the top of this list notice how much breathing room there is around dashboard right there's kind of like even spacing between this horizontal reference and the top of the d and then from the bottom of the d to the top of sort of this panel and underneath your listings we have like a little bit of breathing room from top to here but underneath there's like no space and so i think we want some sort of like margin bottom so that there is yeah so just like m something i don't know m eight i don't know if that's a thing m8 okay too much um oh you know what the other thing is that i only want it around the bottom so i think i have to do like m [Music] mb mb and i think that's probably too much yeah so let's do like four we'll binary search our way into it okay that's looking pretty tight all right so we've got your listings here's a couple listings we've got the address they're published you click on it when you are the host you're going to want to see like all of this stuff but in practice whatever the json is fine for now let's leave it as is but let's add to um so host listing show let's make this um let's actually make this consistent so that like all these h1s have the same classes uh text 2xl font bold and b4 i wonder too like how in practice how folks are doing this like are you creating are you using like tailwind css alias tool to create a class that's like oh every time you have an h1 you just drop in like page title or whatever and then it uses all these classes or are you putting them directly in your html leave a comment down in the description how are you using tailwind css it's definitely something i'm like new to and i'm just kind of poking around with um but yeah super curious what y'all are uh how y'all are using that so let's say edit rooms so we've got edit the like details we've got edit rooms edit host listing rooms path and let's see does that work as expected edit host or maybe just host listings host listing rooms path so we've got a link to edit the details we've also got a link to edit the rooms and edit rooms brings you over to here rooms uh i guess like we want to also make rooms have the same style of title um so here we're going to make this 2xl font bold mb4 and okay so that looks pretty good we've got our room type and then we can add a bed and wait what why didn't that work why is my javascript not working oh you know what it's cause i'm still using webpacker stuff split vertically uh been web alright i guess been webpack dev server so people have also asked in the comments um on some previous videos why we're still using webpack dev server and the reason is that when i started this project it was like very much still the like the most common tool that folks were using and so i have not switched to es build or js build or vt or whatever the next hotness thing is going to be but i also am not seeing a really common or like something that people have standardized on yet so i kind of just want to wait and see what folks land on and um yeah so we'll we'll eventually get some sort of other updated uh handling for our javascript assets and such but for now i think um yeah it's the way that we've got it is totally fine uh i kind of forgot that we had this cool little card here that shows the room type and how many beds there are and what kinds of beds there are um is this working as expected if we add a full and we add a twin and we say add room are we getting a full and a twin we're getting a full on twin okay so that that room thing is totally working um i guess we need another way to get back to the listing uh so while we're here maybe we should say something like uh h link to back to um uh listing i can't remember if we have the listing here or not back to listing um let's see what we've got okay so in the index we do have the listing so back to let's see um at listing.title and we'll say host listing path for at listing and that should give us a button up here or a link that will take us back to test cool and now we can edit the details we can edit the rooms um in i guess we want to do this also for our edit view and here we'll say um edit all right edit test i definitely want to come back and clean all this up so that it does not look like trash but for now this is uh this is fine okay what um what have we got going on i guess back over here on slash listings we have our list of listings oh the other thing i wanted to add to the index view when you're looking at something as a host or maybe on the show page yeah on the show page let's make a button that allows you to publish or unpublish i think that's what we want to do i'm trying to think like if we want a button that publishes or if we want to just make that status field inside of the edit so listing form like inside of the edit form here if we just make another input that's like you know status and then we can have a select box where the name is listing status and then the options are going to be all of the different possible values for status for a listing so it's going to be something like this where we say option and we have like the status here um but in order to get these statuses we need to figure out how to get those out of the listing object so i think we can say like something like listing.statuses and there's probably other methods though like listing.status listing dot methods dot um select like m starts with stat okay so that is the only one all right so statuses so listing.statuses.map onto the key and we don't care about the value so just give us back the key and or maybe i can just say keys okay nice so then we just want to iterate over all these so listing that status is that keys so listing listing i guess listing.statuses.keys that each do and then for each of those statuses we want to create an option here so if we go into uh host listings just host listings and then we jump into one here and we say edit the details we should now be able to pick oh this listing is archived or this listing is published i think this one was already published so we want to make sure that we're checking or we're selecting or pre-selecting because right now right if we refresh the page draft is what is selected so if we click update it should update it to draft but it's not going to work yet because we have to update the controller too but uh so if we go back to the host listings controller we also want to permit status here and but if we look in the database right so if we find listing one listing.find one the status right now is still published even though it shows draft here and if we say update the listing and we're redirected back to the listing show page the status is draft that's because we just updated it in the controller so when we say edit details draft is correct but if we set this to published and say update listing it will show published here but as soon as we go back to edit it's going to show draft right because right now we don't have any logic in our form to to check off or to select this option so what we want to do is say something like print out selected i think or checked or something if the current listing dot status is the same as status and if it is then it should check the box so now we see published so if we make if we mark it as archived and say update the listing now this says archived and when we go to our edit page it should show archived and it does i don't know if we want archived to still show or if we even want that to be a button or like a status you can click because it kind of makes sense to say like okay once something is archived it's like no longer available you can't even see it here anywhere but for now i think that is okay so let's mark this back to published we'll say update listing and then when we go back to uh all of the listings here we now see test test is available and if we come back to [Music] this view we see this one is in draft and we can say edit details mark this one as published update the listing and now when we go back to listings we should see both and we see test and we see cabin in the woods so listings index let's also make this one have the class text 2xl mb4 and font bold all right so now we've got our two listings um for the guest when the guest is viewing these we're going to want to show something a little bit different also we need some like pricing situation um also i don't think i like this dashboard thing anymore uh so application html erb dashboard just like i think i'm just gonna delete that like entire thing let's see oh wait no that's the wrong one this one header yeah let's just take this out and see what happens okay let's take this out too uh in this uh yeah okay whatever this is this is better and then where this says dashboard i want this to actually say listings and then here this is going to be a link that goes to slash listings and we'll have to go through and figure out like how do we mark these as sort of this dark background when you're on the path that has that dark background versus like whatever other things you might have so the on the other ones that i think we're going to end up with that we can just kind of start playing around with now is having like bookings or something or reservations uh and that'll be like all your current and past reservations um i don't know if we're gonna have any others but that's this is like probably all we need to start with is listings and reservations um and we can probably even like add this path like reservations and it just won't do anything right now right like um when you click on it it's gonna bring you to a page that doesn't exist other things that we can do um we're going to want to like drop pins on a map where the listings that are showing right now exist we're going to want to add pagination and filtering and sorting and searching and all kinds of fun stuff but um this is a pretty solid start i think we're going to want probably like yeah also like images for the the each listing et cetera et cetera et cetera so i'm going to leave it at this for this episode we've kind of gone through uh just a little bit of clean up some adding listings to a list we talked about a scope um with active record we talked about uh using a um in enums values for creating a select box and yeah so i think this is uh this is where we'll leave it thanks so much for watching and we'll see you in the next one cheers [Music]

Channel: CJ Avilla

Views: 243

Keywords: cjav_dev, web development tutorials, web development for beginners, vim, ruby, rails, javascript, ruby on rails, active record scope, select box with enum, rails enum, rails select

Id: _fBpethNY2I

Length: 41min 6sec (2466 seconds)

Published: Tue Nov 30 2021