Merging Similar Pages - Building SaaS with Python and Django #101

hello welcome to building sas with python and django my name is matt lehmann and on this stream we work on a django application i'm going to continue on that application tonight i'm going to work on a new feature or it's actually a rehash of an existing feature that has been reimagined that my customer is interested in seeing so we're going to do that before we get started though i want to thank my patrons who support me so i have a an account on patreon and you can go to patreon.com mblament and support me if that's if you find this uh content interesting and compelling and i want to thank rupert andrew patrick eric phillip and miguel for your contributions it's really greatly appreciated um what are we working on tonight so let's let's talk through it it's a it's an issue that it's listed here on this github page which i will drop in the chat and i will note that you're free to ask me anything about python django or web development and that's what i'm here for but i am trying to work through a project and um so this is the project they're working through i should also add if you're catching this on youtube please give me a like comment subscribe um i try and respond to all the comments that i can um so if you have questions about what you see tonight uh or or on this video i should say it's i don't know what time of day it is for you as you're watching um then you can put down there and i'll be doing my best to answer so we're going to work on combining two separate pages together today it was a kind of a rough point in the application that is is just it's just proven to be confusing i had it in the initial design for particular reasons and now i want to try and get rid of it because i think it's there's a ton of overlap and the two pages that we want to combine and we'll see them we'll see how they're different and then we'll talk about what we're going to do to take care of that so here are the two pages in question one is a course page and then the other is a student's view of the course page to track have they completed the work for the course that they're in if you've never seen the stream before i'm building a homeschool application for for my family and anybody else that's similar to my family um and need to educate their kids at home so the the the domain that we're talking about for this stream is all about school stuff and so one of the main concepts in the application is courses and uh yeah we have this have to deal with this problem of of what do you do about courses and right now there's two ways you that you can get to a course when you're planning out the school year and deciding on what's going to go into it you go to the school year page and you come down to your grade level and this grade level has way too many courses because i've been using it as a test playground for a long time but you put in all of the courses that are relevant to your student and you can populate them with the tasks that the that you want a student to do and that's what gets you to this page once the school year is running though there is a different view for students so if we go to the weekly view of things here's the weekly view and here's a particular student my son's name is mark so i'm using him as an example and you can go to the same kind of page but you can get it from mark's perspective of what is mark completed what are his grades and when is he expected to complete things and that's where we get this separate view and so the two views have a ton of overlap because it's the same list of tasks but some one view has the dates plan dates for completion the grades that are associated with a particular student and the other is just about here's the actual content for the course i found this confusing as i'm playing with it my spouse who is my user has also found this confusing as she's been using it and so i'm going to try and make a change where i combine these two views together and the the final outcome that i'd like to have is something where the student that is enrolled in a course or enrolled in a grade level that has this course will appear as a column on this particular page that way they can see a user can still see the planned completion for the students they can see any grades associated with the student's account see multiple students if there are multiple students taking the same course because that's a possibility in the application and just generally have a single place to go to which will help clear up the confusion i think between going to this dedicated page that what you got to from this week view versus going to the course page that you get to from the school year view i think it will just make the whole application a lot cleaner in its modeling so um the the real question though is that are these pages going to mesh together well i think the answer is going to be yes but i have a feeling there's a bunch of gotchas in here um that we need to look out for and that's where we need to do some work and where we're going to to hedge hedge our bets so for this particular feature we're going to combine pages but we're going to do so with a feature flag and if you've not encountered feature flags before they're they're a very good way to at at the run time at the the usage of the application decide whether to show certain functionality or not and the benefit of feature flag in this case is i can build out this this feature and put it behind a feature flag so it's a gated code so that you either have access to this feature flag or you don't and if you don't you'll see the old view the application will continue to work as it does today but if you do have this flag enabled you'll see the new view and so my spouse would like me to put this in a feature flag and check it out herself because she's actually not sure if this new combined view will do everything she needs and so she wants to be able to rely on the old behavior so she's going to be my kind of beta tester after i get some version of this out all right so that's the context um let's get to the code so this is two different views and two different actually two different parts of the system that's another part that gets confuses this is this is this view right here is in the courses application that i have and this other view is in the students version so it's i'm going to be blurring the lines a little bit between django applications which i'm not typically a fan of doing if i can avoid it but i think this one has a pretty compelling case to do so so really where i want to land i mean if you look at the two of them this url if you look at the top shows that it's got students and courses in it and this other one has just courses so i think this one's much simpler much easier to read and understand and see so we're going to try and modify this page and extend it with the information that includes the students so let's simplify and make sure we have just the tabs that we need and i think i have some notes here um yeah those are no those notes are not too creative that and need to be commented on so let's go to the actual view the view in question is in the courses app it's the course um course detail view and here it is and it has it's not a complex view this is the entire thing right here it's got the course which it gets from a course query set it prefetches some other data to get out resources and grade levels actually i'm not even sure why it gets out resources that's interesting what is that for huh now i'm super curious why that's there maybe there was a reason and i put it in there and or maybe not maybe it's just i copied it from somewhere else and left it in and didn't clean up after myself in fact let's see if there's something that i'm missing here so i'm going to stop this and i'm going to turn this on with the debug toolbar which is going to show us the or give us the ability to see the queries that are on the page so that that query set has a prefetch related and i'm not sure why that's needed and that's where i want to go and try and turn it on and off and see what happens curiously there's already enrolled students in this view so which i don't understand why that's there that's very very curious i know why that's there because if you look at the top there's this link that says check out the progress for mark and i would check out it it would list it for any enrolled student um so we're already fetching some of the data that we would otherwise be displaying in here all right so let's refresh the page and we'll get the django debug toolbar over on the side now that we've turned it on with debug mode um which i control through an environment variable and we can go to the sql query sql query is this big one it's there here it's right here there's a you can see there's a the main query and then because i use prefetch related it fetched um with the resource table the task table and the graded work table and some other stuff down there so i'm curious like we've got a query of nine why in the world do we need the resources i don't see it used anywhere and so i'd like to just get rid of it if it's not used like that was nine right okay and let's refresh it just to make sure it stays at nine yeah still nine okay so we'll delete this and if and if the resources aren't actually even used we'll actually save a query so it's still nine oh you know what it might be at the very bottom of this page it has resources so it's saying it's going to list over those all right so the the answer was in the template and i didn't go to the template so that's my fault all right so how do we begin this process what what is it that we need to to make this uh more appropriate i think in fact i'm ready to turn off the debug toolbar i don't i don't actually believe we need that and that's going to slow down the page as we use it so turn this back on to answer your question keeping track of this account uh no i'm not using django tenants so django tenants i believe like sets splits up the databases between accounts but i i'm doing everything um i'll show i'll show my no problem let's let's take a quick peek at the modeling diagram that i have for the whole system this is something that is produced by uh the django extension the the way that i'm controlling who has access to this for multi-tenancy is this model right here the school model so all of my queries that i do ultimately have to filter down to is the person who's logged in the admin of the school school you can view it as like a tree the school has many school years school years have many grade levels grade levels have many courses courses have many tasks and so on it's big big gigantic tree so all of my access control goes through and checks are you actually the owner of the school um but yeah that's that's how i'm keeping track of tenancy which means it's a bit more manual on my my side but i think it simplifies the database setup in my particular case but i've i've heard good things about django tenants um i'm using django all auth for my off layer yep which is a really solid package because it gives you flows for different social login which i'm not doing right now but makes it easy to do email only login which is the scenario that i'm in i'm not doing user accounts everybody has signs in with yes all off with emails so that's that's why i picked it and it has all those views to do password resets and all these other flows in there that um the out-of-the-box django auth doesn't include okay so let's return to this course page and talk about what other data is needed and and how i want to do this because there's there's some things in here actually i should even probably even leave up the other version of this so we can do a compare and contrast there are some features that are in this version that are not over here to start off this course page shows every task and as you can see from this demo account there are 184 which is not an unrealistic number for a school year if you're meeting five days a week and you know like it adds up to um a lot of different tasks to do but the year there are times where as a user you don't actually want to see all of those tasks you only want to see the ones that are still left to do so the student version of this starts by filtering out the ones that have been completed by the student already and if you want to see all of them there's this button at the bottom that shows the remainder so we have to factor that in to this new version and the other challenge here [Music] i'm using the accounts prefix for the path on all auth the the other thing that we need to factor in that's going to be a new challenge is there can be multiple people um involved in an individual course and so that can lead to multiple columns i'm actually not sure of what happens when a user has a course that has say like four people enrolled like if you have a family of four and you have one shared course that everybody's doing art or something like that what's that going to look like so there are some cases that i want to try and work through to see how how the ui is going to handle this how this table is going to work as you can see there's a lot of wasted space already with you know these these things can span this whole distance but uh in practice this and this is data i actually borrowed from one of my wife's classes that she built for a math is that there's a lot of details and new lines that make it so that there's a bunch of white space so i think we can probably get away with like kind of bringing this in a little bit because maybe the average task is not that long so those are the thoughts that are going to run through my head i think the other thing is like we'll obviously want to get rid of this that doesn't isn't going to make any sense anymore because this is taking you to the other page that's not relevant at that stage so that's kind of kind of where that is um and then we have to also consider we need a feature flag to do all of this so let's give i need to give this a this flag a name and i'm using a feature flag library called django waffle and django waffle operates by using a database table it gives you it's a it's a native to django so it's a flag model and allows you to turn control things through that model and so you can go through the django admin and turn off flagstate through the the admin so that's where we'll we'll use so let's let's go ahead and create the flag and give ourselves a first little taste of this so you can see that by wrapping this chunk of code with the flag um nope it's alive and kicking it's a in fact i saw a new release last couple months so it's still still in good use and we'll see that wrapped up here and get that out of there when the flag is on and then start going into the data and applying it to the view so let's go to the actual detail page so that's going to be in the templates area it's going to be the courses template and it'll be the detail template and we'll go to the top and say we need to bring in the the flag and um so we need to use the load is it load or loads i can never quite remember we want to load the waffle tags is where the flag tag is and let's see if i got that right or if it's loads no it's load okay and then we want to find that area where it says see progress for and we're going to wrap this whole chunk of template syntax with a flag so we'll say flag and then we'll say um oh is it do i leave it bare or put quotes around it i can never remember that part either and we need to give the flag a name so we'll say combined combined course course flag just needs to be something that's semantically meaningful to me that i can recognize later so we'll put that here and indent this a little bit i don't really care about the white space change that's not super important to me and i should have another example of flag in my system um okay it looks like it no quotes i was wondering if it was quotes or not so now we have the system using a flag and if we refresh this page the flag is going to be off by default that's that's what makes them safe to do so we have effectively um hidden that code but that's actually this is backwards this is not this is the um the place that we want for new code so we actually want this to be the else block of the flag so that is on by default because that's that's the state of it going out so that makes sure that this old functionality stays preserved and in this case there's actually not going to be anything to replace this so we're going to leave the flag block above the else just empty so there's that first piece the i've also been thinking about the way i want to structure this um there is a there's a lot well actually maybe there's not as much as i thought ah there's that's because there's a special table so when we get down to actually modifying the table of tasks that's where i'm going to want to be careful because because of a bunch of reasons actually um but but one is that one reason is that part of this is like there there's some dynamic stuff going on that that you might not not realize this page go back to the page if i delete a task if i come here and say goodbye 78 i can click this x and get a prompt and it deletes it and the whole page now will be reloaded but it's not actually the whole page so i'm using htmx which is a way to do javascript stuff it's a really cool project so i have a separate view that will load just the set of tasks over again and the reason it has to load just the set of tasks is because of the numbers that are changing on the side i could have made this so that you would delete it and just the row would disappear but then you'd have like if i wanted to delete 58 or 59 here then i would have 58 followed by 60 and that was not not something i was willing to tolerate so i had to force the page to reload and i know i could have done some javascript to renumber everything but i didn't want to um so that's that's the state of that so there's that extra aspect that we have to consider so i have to think through the data structure that is going into that's being processed in this table it looks like there's already a header here so if there if there's something to display it puts in the headers at the top which we'll probably have to fiddle with and then we'll also have to fiddle with this course tasks table um template let's see what that what's in there the course tasks template i think it has an empty state too or maybe it's just a for loop [Music] yep it does it has the empty state so if there's no tasks then there's another view of here calling with a call a call to action a cta of adding a task for the first time cta is call to action something that gets used in sas apps a lot or at least that term that's that's what i've heard anyway so i want to essentially leave as much of this template alone as i can because i want to not um mess up anything any existing template that's here so what i'll probably do is put this a flag in here around the actual table of data and then then copy the the old code into this new area this flagged area and start working on that i think that'll be the winning strategy here okay so how to do that we're going to come up to here and we're going to say we also need to load waffle tags in this template as well so we get access to the flag template tag and then we can say flag and use the same name as was used previously which i've already forgotten combine something combined course flag so we've got the combined course flag we're going to have an else block and we're going to have an end flag block and so i want to take all of the existing tasks that are in here which i guess includes all the way to the four man all right maybe i can just leave this chunk of code if i out dent this a little bit yeah that sounds better so we'll take we'll move this end flag to the bottom that way we're not actually fiddling with all the indentation there which i know i just said a moment ago don't really care about but with this much code i kind of do we're going to duplicate it completely here i don't always um just like as if you're considering feature flags as a strategy i don't always do this sometimes i get right into the actual area where i'm going to make little logic changes but in this case i think the changes are going to be extensive enough that i'm going to want to have like two separate versions that can run side by side and that will make me feel good about that anyway that's my feeling on it so we now have this stuff flagged and if i did this right we should come to this page and still see that i'm going to refresh and not refresh the chat room which is what i just did but i just refreshed the page and there's been no action here so let's take a look at what this is going to look like in the flags area so what you'll notice right off the bat is i now have this combined course flag how did how did django know to do that well that's that is a setting of django waffle is anytime it encounters a flag that um it has never encountered before it will automatically create an entry in the database table and then you can control what the behavior you want that to be the safe version is to turn it off by default so flags flags should always be something that you proactively opt into not just a behavior that is suddenly encountered and then turned on right away that's not the way to go about flags so here the code has seen that this new flag and so now we can turn it on and turn it off so i'm going to do that i'm going to turn it on so that we can see what this looks like and we should see a whole lot of nothing although no that's not true because we copied all that code so it may the only thing that we will see is that little progress thing will go away so i'm going to enable this flag for everyone which is that check box right here that globally enables it and then we can return to this page and we should see this see progress for mark thing go away it's gone so it tells me that the flag change that i have so far is working and that's good news um now let's think through what's what is next the thing that we probably need to do next um yeah i have seen a little bit of django htmlx i haven't looked at it too much i'm actually not sure i think it's uh adam johnson maintains that right i don't i think and i think he put some good stuff in there but i just haven't haven't had a need to use it yet i might later depending on i need to check it out i haven't looked at it recently to see what else it's got in there so thinking about this through this problem of what to put in in next i think we probably in order to even try things out and before we even get to messing around with template design we need some set of data in here so this is all of the um the tasks so i think what we need is is actually a column that is who's enrolled in this course and start to add a column per student that is enrolled in the course i think that's probably the next step so that's going to be at the view layer and actually getting into the data so i think we can we'll leave the the tasks alone for the moment and go switch over to the views and as i said we already have an example of some of this is in here so there's there's this stuff that does a filter which is curious and it gets the enrolled students which is also curious like that and it did that just to get the name out of there so i'm trying to figure out if we can take advantage of this information and just add quickly to that table with like a new a new row that might be the best way to start because there's we're going to need other data um there's going to be other things that are part of this of determining um should we show a grade should we show the dates that this is likely to that a person is likely to finish that there's kind of there's a bunch of context data that's not here right now but we need a starting point and in order to at least in order for me to get my head wrapped around um this particular problem so how should we do that if we have the enrollments maybe we work with the enrolled students already without touching this at all how's that going to go let's bring up the two templates in fact so we want to go back up to the table start so we have here there's this starting table and i'm going to i'm going to continue this path of doing the wrapping at the the level above the logic and just duplicating stuff so we'll hit flag and then combined course flag and we're going to want the else and then we're also going to want the end flag and we can take this chunk and put it in here so that's that's one and if i do that it's going to make the table top go away so this task stuff at the top will just disappear but we want to bring that back in because we want that so there's that now the next thing we want is this this version whoops i deleted that and you wanted to duplicate it okay we got two of them so this is the one we want to modify and we want to say if you have tasks that's good if you also have students that is some something else so this is where this is where it gets a little weird is the the display i'm trying to think if i want to resize the display based upon if you have a student too so like i could i could make a course display wider whenever there is no student to enroll and then condense it when there's more but i feel like that that kind of shifting might just be awkward so maybe instead of doing that we can just bring this down but then i'm not sure if i if i don't take up the full space is it going to wrap and so on so i'm not really my my knowledge on flex is a little weak on this front so but i think it should be okay because each of these will be its own row so to start let's try this let's take this down to an 8 which is gonna shrink uh that down we don't actually even see anything over here and that's that's okay and then we're going to say um here's where it's going to break though oh crumbs i'll show you i'll show you what i mean we have a constrained amount of space for students and if i just say if i try and let's try and work through this if there is enrolled students that was the context data it's a list of first names i think right now but that's good enough then then we could do a for loop for enrolled student in the enrolled students and then we could do something like this but hopefully you're starting to see where this will is going to break down if i say class p2 whoops with a width of 2 out of 12. well great i've that's fine for one student so enrolled enrolled student dot first name is that gonna work try okay ignore the placement right now the the bigger problem the larger problem with this is what happens when there's two of them then we break the grid so this is if you i'm using tailwind which is my css framework and tailwind uses a grid system a grid system is something that comes from the design world and essentially it's a a way to give yourself a structure to your page and so if you have a box a flex box and you want to have a certain number of columns this width system is helping determine what are the how wide are those columns going to be so you can say this is going to be 8 out of the 12 columns total that are available this is 2 out of 12 and this one is also 2 out of 12. but what's going wrong is that you have to see that also um this will exceed 12. if i have more than a single student i'll actually have as you know 10 plus 2 times n number of students and that's not good um so there are a couple of things i could do i suppose i can um i can shrink this down even further and then just kind of hope for the best and give students a certain amount of space and then see what happens we can play with that actually we can probably simulate what's going to be what it's going to be like if there are more than like let's say there are three students what that will look like um the other thing that we can do um is i could give a fixed width amount of space for all the students but there's a problem with that too if i gave a fixed width amount and you have five students enrolled in a single course there's no way that even if i use like if i crunched over i can't really i wish i could draw on this better if even if i moved over the buttons that are here like right up next to the tasks and eliminated all the space and left all of this room over on the right side of the screen with room for students then a certain number of students is going to to break this and maybe i just need to be comfortable with that and deal with that problem when it arises because uh the average case the probably 99 case actually maybe 95 if there are common courses for families is that it'll just be like one or two students so let's let's try this right now see if it just totally falls over um but we probably should at least work from what happens if there are two students that that's that's going to be a common case because it's a it's at least a case that is true in my household and so i need to make that case work for certain um so i think i have a couple of courses that are in both [Music] which one did i make a double course i don't know was it science well it doesn't really matter we could make make a course a double course so we'll say it applies to both second grade and kindergarten for my both of my kids and now thankfully it looks like it is not like wrapped so perhaps what it's trying to do is just like saying that's a fixed dimension now i'm really curious of is it just jamming them all in there i don't know okay well we're gonna go with this model for now even though i know that there's like limitations on it and we're going to change the we're going to change this to like a minimum width i think that's something something we can do in tailwind and then like you try and use as much space as it wants to that scheme gonna work if i say you're at least this wide and then it overflows what's it gonna do um all right never mind well we'll stick with the max 2xl for now we'll get the rest of the columns in there and then i think i'm gonna just have to start fiddling with a bunch of stuff to on the template so we have enrolled students [Music] now we're on course tasks though here's another problem i suspect the the detail view that we were looking at a moment ago i told you i mentioned that there's a separate view that will load in the tasks so there's probably where is it course tasks html here it is so this is the html stuff that i was talking about and it has the course and it has the tasks but if we're suddenly about to be putting enrolled students in here for this this hdmx stuff we're gonna have to make sure that that context is available too um i don't i doubt we'll get this far tonight but i'm gonna put in a to-do for myself to factor in enrolled students into that so we'll focus all of our energy on the course detail view get that working right and then i can work about on the dynamic stuff probably offline to get this going so we've got our our um title bar updated it has the student's name in there um this has got both this is probably not a great example anymore because it's only two tasks so actually let's go back to the school year and even though it's going to be a total lie we'll make this math two apply to both of my kids so we'll see both their names so these are my kids faye and mark so the next step is to actually modify the the course tasks table to have the same thing so let's do that let's close the views close the detail page for the moment and then stare at this template because that's where we are and this template has a different layout or a different set here that it is trying to do there and that versus we'll have to make sure that we're looking at the right set of width modifiers so there's here's one there's another one that gets us up to seven this is nine and this is the remaining three so you still have you still have to get up to the 12 but it's a different grouping because of what it's trying to show uh hidden in this that hasn't been displayed on that banner at the top is what happens when a task is only set for a particular grade level so that's also in this particular layout in the main table all right we're ready to start fiddling with this yep so let's let's drop this down to size let's cut this down to [Music] because we cut an area but down before let's cut down the description area by an equivalent amount and drop that down to 2. and then at the bottom of this after this set of buttons here that's what all this stuff is in this width three we'll do yeah here it is we'll do this final thing so if enrolled students and this will work this should work because the we didn't include and the include will pass on the context i believe to the set below it so if there's an enrolled student we're going to do the same thing as before of enrolled student in enrolled students and we'll do oh man the same font styling that's where we have to get more specific uh let's take that one and we'll say for the time being we're going to say div and then we'll actually just say placeholder so we'll see if it shows up oh yikes okay got some work here so why is already we have questions of i have questions of why is this different it seems like there's this is a different size as the other one this is the the problem with the setup that i'm doing is that i'm actually not using like html tables i'm using a flexbox that has the illusion of a table by just making sure that everything is pixel perfect and clearly this is falling over now and so i need to find out the difference so the box that's here that we use for this previous example was a flexbox and with a max width of 2xl with has 8 2 2 2 so put all those in there and then if we inspect this row it's the same width ah because we don't want one we want two that would be what we're really looking for so it should fill up all right great and i'm gonna get myself in trouble um no i'm not i've got i'm still in the proper i was about to say i think i was getting myself in trouble with the messing up the flag story but this is my totally new area that's my scratch area so like it here we can go prove that too we'll go back to the flag admin page we'll turn the flag off so we can say disable refresh the page and all this stuff if i did it right should go away and it did that's good all right let's turn the flag back on okay so i think something that's going to be important out of this is we want to permit a max a bigger width like this is going to be probably too narrow with that max 2xl let's close this for a second take a look i mean if i just look at this it feels awkward what is going on here there's is there some padding that i'm unaware of nope come on that's not what i meant to click there's something strange in here this is set to a 2 did i really do that i think i did by mistake i think i meant it's meant to say four i think this was a six and i went for two instead of four okay and you can see what's happening is there's some there's some space crunching that's going on because i've got too um too much stuff in the flexbox it's trying to do its best to fit everything and we're getting into overflow stuff and it's just looking crunched so this is where we're gonna try to give it a bigger box let's give it a three we're gonna need to do that for the detail page too so now we've got the full amount of breathing room for everything and got a bunch of placeholders so i think this is approaching the layout that i'm looking for now we need to start asking the question what goes in where the placeholders go so let's jump over here and so there are a couple of things that are [Music] functional that we don't have to actually keep which is nice um there is this button right here to say add a task and on the other equivalent page this is the same button and i didn't even use the consistent tooltips so this is this is one great example of of why this scheme was already confusing like different different styling a button different task naming yeah just getting confusing the other thing to note is that um this is a graded task this is an example here with this little clipboard and the we're going to have to modify this to actually kind of replicate this for both [Music] both students so if this is a graded task then both of my children could be graded on it they both have separate grades right um so we need to be able to move this this button needs to be here probably to show that it's graded but there's also going to be a separate one to say grade and then a separate one to say grade there's also another piece that's here that is um where'd it go is this calendar icon calendar icon says when when did the student do it um when was this work completed and so that is something that is part of this too and can be modified and each one of these can be tweaked so i can actually clear this and delete it and all this other stuff it takes me to a special page that's just for this that's adding the completion date for a task so those are the pieces that need to fit into that puzzle here of that but to this icon which is actually a link in this one and this icon which is setting the date for the thing and furthermore there is the planned completion column which exists on this version of the page that shows any user when is this task likely to happen when is this all stuff all done and that can vary per student because one student could be ahead of some work and one student could be behind and it matters so that gets in there too so that's there's the bunch of pieces there and then finally the biggest other noticeable change is that these are all grayed out because these are done and there's not that notion here so we get rid of this button from the other page but we add a couple more ourselves so i think what i'm going to do is go into that other template and see if i can just steal those chunks and replace placeholder with them i have a feeling that it's going to be very very noisy because you have um the nice previous the nice part about this design previously is that all the buttons all of the user user interface stuff was off to the far right side that's no longer the case with here um maybe maybe that's an argument for flipping this around to put the students between and have a button a bunch of buttons on the end kind of liking that idea um that also lets me get rid of the grade icon because if they're well we can we can make that conditional um so if it's graded then it will appear but if it's if it's something that's graded for the student there's no point in replicating this as well so we can control that too so that's good yeah that that's feeling that feeling like a good idea so let's go try that so i want to take um [Music] i'm going to go down to the course task list and i'm going to actually take the things that we just added these enrolled students stuff and i'm going to move it up above the set of buttons and see how that comes out that should be right here that is going to impact the placement of the header stuff on the top it's going to be out of sync but we i think that we can fix that up by doing the math yeah i feel like that's going to work out way better i still it's still going to be kind of weird because there's going to be a lot of buttons but it's a start so we know now we know that before this placeholder buttons there is a width of 2 4 7. so in this page we need to put we can change this to a 7. move this to afterwards and make this a 3. it's going to make the numbers line up this is starting to feel like kind of what you want anyway like you want to know if your students are how they're doing with their tasks and so on um still not convinced of how we're going to put the dates in there maybe that's functionality that doesn't advance along um there are other places to get that kind of stuff and i'm not convinced that it's the best thing here so let's just try putting in just the buttons to see what happens the other page that has these buttons that we care about is in this other template and that other template is under the student section so that's templates students course is the actual thing that we're looking for and it has planned completion yadda yadda a bunch of stuff i'm looking for the svgs here's one and here's the other but they have a different set of context state around them that's this is data that is not um not part of everything yet but we can drop maybe drop the links in there and see if it will show up this is what it is i think this is it right here but we don't want this last one of creating a task let's take these two anchor tags and drop them right into placeholder and we'll move them in a couple and we might hit an exception because we're trying to access some data that's not there or it might just silently show nothing yeah it's not there okay so there is a reverse in here that's trying to call students grade task it's expecting a student id and it's getting nothing and it's also expecting a course task but the task is available it's just under a different name and so frankly so is the student so we can change this to enrolled student or in fact let's go simpler there's nothing there's no reason that we have to reuse this enrolled student name so let's just call it student in the for loop and then we can come over here and ditch this task item thing and it's just called task in the context here same same coming down here we just want the task and same there's a bunch of spots where this is used unfortunately so we want the task okay and then aha okay well let's see if that part will that's still not going to load probably because there's another link here that is also has the same stuff task id task id and one more all right at this point at least the page should load i hope okay but here's where we're starting to get weird the design of this just looks strange right this is a very awkward looking page now so all these icons that are in the middle of nowhere [Music] yeah i'm not not really feeling good about that so maybe maybe this needs to change to something that's more than just icons i can see this being a stack of a couple of things like if there is none of these are showing grades but they should here's an example i'm still confused about why there's clearly enough space for all this stuff and there's some of them are wrapping at a weird spot why is this wrapping here four oh okay it's because we don't have a certain type of task defined so let's put in some more examples that are going to make make it evident why there's some extra spaces here that shouldn't that seem like they shouldn't be and and the other stuff that's just not appearing in this page yet so i'm going to say create a new task after the first step and [Music] for second grade only let's make sure this task description wraps around that should do it and we want to change this to be for second grade um that's curious that should not be appearing there but whatever and i'm going to say add so now you can see what what's happening the reason there is a block of 2. um space here for the scenario where we have a task that is specific to a grade level that is possible for this for courses because i've made it possible in the system so that a course it can can be for multiple students but sometimes there are things that only one student needs to do like my son who is a couple years older than my daughter might be doing some slightly more advanced stuff in a shared course so this is a sensible scenario to have a task that is only available to the second grader and not for the kindergartner the and this is where some of the filtering is going to get annoying and complicated is like in that scenario if there's a task for only one student any other student should not have the ability to set a date for that task it doesn't make sense and you shouldn't be able to set a grade and so on and so on but what i think what's bothering me more is that i'm wasting a lot of space for something that only affects some some this only affects things sometimes so i think what i would really like to do is change this so let's put another task here is another task with a long description that should wrap that doesn't apply to a single grade level and this is bothering me that this is saying all the grades i need to i'm going to make a note there so that's a bug it shouldn't so if you have a course that only applies that only two different grade levels are in you shouldn't be able to filter it a particular task down to any other grade level so add task for multi-grade course shows too many grade levels a course with a course for grade level a and b will show grade levels a b and c on the course on the grade level filter that's not right i'll get to that one later so frankly i thought i'd fix that before but i seem to be wrong so we'll add that and so here here's a good example like this is a ton of wasted space i would love to be able to say nope like there's there's nothing used here so let's use the space because most the time you should be allowed to use all that space so we have our links we'll clean these up a little later i want to come down to the this guy right here and this is this is where it needs to change like we only want to really show this div if there's a task grade level that's when it's showing the name so that's when we should show the div so let's move this up and we're literally going to change the structure but the important part here is now we need to do a little bit of extra stuff on this width so if uh there's a task grade level then you want that to continue to be that smaller size of the the width for 12 because that's going to show it's going to make this extra div appear however if there's not then we want to go to an else block and say width of 6 12. that's what i want to put there and then we end it now we should still get the behavior that is nicer here of this is a smaller box because it has to accommodate this but this thing should expand the full amount of space and as i do that it's making me wonder if i actually like that because this is like a weird chunk of ui now like if you're going along and none of these other ones are going to have this because this was not originally a course for multiple grade levels so there should be some other some other call out oh you know what it's going to be yeah yeah yeah okay i like this better i want to get rid of this grade level column thing altogether because in a scenario where i have a grade specific task then this second grade task is only going to apply to this student who is in second grade it will not apply to this student who's in kindergarten so whatever ui we end up putting in these boxes i can leave empty for that particular task and or say not applicable or something some kind of demarcation that it doesn't matter for faye in this example and then we can leave this get rid of this all the time so that's that's actually a nice a nice benefit um the downside of this approach is that the person will not see that the task is only for second grade they will really just see that [Music] that faye doesn't have to do it and then you'll have to know that faye is not in second grade and that's maybe a downside especially if you don't have any students enrolled okay so there is a there is maybe one scenario where you kind of want to keep this and that's if there's no enrolled students and um yeah and dude my brain's farting on me um if there's no enrolled students and whatnot and uh and it has is for a specific grade then you still want to show that probably so should we say that should we do that somehow um so if there's if there's a grade level and there's no enrolled students and not enrolled students then do this 4 out of 12 thing this is the only time that we want this to be true and not enrolled students yeah i think that feels right so this is saying now most the time this thing will just not show up yep that's what it should be because that that should still give the user the best of both worlds in the end like if they're if i said well i'm not gonna i'm not gonna mark this out but if these were gone then it would still show second grade so you would know if you hadn't put any students in there yet okay starting to make so i think it's i'm hoping i'm illustrating that just making these little logical tweaks matters for um making the usability of the application good or bad i think this is still rubbish like it still looks terrible but we're chipping away at it and i want to see what's what's taking up the space here we've got this what is going on so there's some like padding or something in here oh you know what it is there's a hidden when there's a graded icon in here it's hidden most of the time so to make to give it all equal spacing all the time so there's one thing the other noteworthy thing is there is that second icon that's not appearing that it should appear here but it's just not appearing at all and on this one it's actually like before the graded icon that's that's really kind of curious um so i would have would have expected it to show up over here if this had been working but it wasn't um so let's come back over to the list of stuff and so task item has greater work that's why this is not working i think i made this into a property on on my model i need to check on some stuff there's a really bad a really bad version of this that we'll do a ton of database queries if i'm not careful because but we just need to check on it so let's look at the course models and go to the class course task um is graded that's really the thing and this is what that has graded work thing was doing um and it says there's a good i'm thankful i wrote myself a note this triggers a database query since it's a related name so what we have to do is we have to make sure that when we're in the view that we have prefetched that data otherwise it's going to be bad news so i think we have we're in that detail view course detail and graded work is there so that's that's already good so i think what we can do is come down to here and say this is the task and instead of has graded work we say is is graded is that property um i think that's the only spot that it occurs all right let's try that i guess when i see what's happening now so i have these um the divs are not set up right so they're stacking instead of being put in a line i didn't i must not have carried that over from the student one so we can go to the div that's wrapping these things and see where it's here it's just it's just a regular dig div is not a flex box so we need to go back down to the other one that is um what we see here we need a flex box we need item center and we need justify center to make this look right and take that stuff and paste it up here that should do the trick with any luck okay now i also want to do i do want to do the confirmation that we are in fact not doing an insane number of queries right now so let's before this was like nine we might be doing a little bit more but we shouldn't be doing like hundreds if we're doing hundreds then it's i haven't done all the right prefetching or select related stuff and that's what i want to check on so 11 yeah and there are tons of graded things in here so this would have been a big problem the the new ones are on [Music] i don't even know i don't know a grade level maybe there's another the enrollment i'm not even sure which is the new query okay so this is starting to look better there's some other oddities about this um by making this change we have now got the title the name up here doesn't match up with the buttons which looks a little strange so we can probably try to correct that let's try that with um i think we can just do this with like a text center see if that looks okay to center align the text i should put it right over the buttons with any luck okay it did all right so this is getting better it's still a little weird like there's now a lot of buttons here and i think it's reaching a point where it's non not obvious what these buttons are supposed to do so you you can on some of these apparently not this one though i messed that up there it is so if you hover on it it does give you the the action what that is but why do you why why should i make them hover um so i'm trying to think like what i should replace that with if i wanted to replace it with something the this is still probably the right amount of space for all this stuff like i think spacing wise i don't think that we're going to get a whole lot better um you know with a 12 column grid here what are we doing we're already overloading it with too much stuff so we've got 1 out of 12 6 out of 12 so that's 7 and then we've got 9 and then 11 and then 14. so we're already over over the limit of the grid system that's there so that's not really that good i think it might just be trying to do some percentages i'm not really actually sure what it's doing to make accommodate that um but what other strategies could we do i mean we could i don't know because here are some things that i like when these things can be pretty if you don't have a lot to say like look at this line right here this line 11 it's a single line task it's one line it's got one row of buttons there's something to be said for that simplicity there are a lot of tasks that go multiple lines but i don't know if i'm not sure well maybe it's the norm to now i think it's just a mixed bag sometimes there's multiple lines sometimes it's not so i'm asking i'm digging at some of these questions a little bit because there might be areas where we could claw back some space so like if i if i changed the button layout for example to make it a box over here so that we have up and down on the side and then maybe plus and the x like to the next to those then we could shrink down this 3 out of 12 to be perhaps a 1 out of 12 or a 2 out of 12 and clear up some space because this is this is all the real estate that it's using right now to do that and it's quite a bit now i could also get more space by why does it keep hiding that that's annoying all right there we go i could also get more space by chopping off the um the left and right padding there's a strategy that we could do um looks like there's actually some stuff inside of this too maybe not and maybe it's just the justify that's doing that it could be not really sure um but if i did that i guess the point is why am i trying to do that because i would like to make the actions for [Music] each task for the student clearer also we there's some stuff that we still haven't put in here at all the completion dates i don't know what to do about that um and maybe i'm not even sure that it's truly necessary anymore because there was um my spouse had asked for like she needs to know when when is the end of something and on a um on a particular course it's possible to get an answer to this or a particular school year that's what it is there's like this thing which shows it's a report that shows like all of the projected end dates based on each of the courses so i'm i'm not convinced that she needs to see it on a day-by-day basis like i don't think it's that helpful i think it's more of this this particular kind of forecast report um is more helpful of seeing like oh this thing's supposed to end here so any getting back to the course itself like i could totally see taking this final number and showing that somewhere um for for a course i don't know though this is this is part of why i'm gonna i'm putting this behind a flag and i'll have it be something that i can turn on on and off to show her and let her give some feedback until she's happy with it and then switch it over to something else okay let's go back to this so what what else can we do then um so let's assume for the moment that the planned completion date is going to be a feature that she's going to say yep you can throw that out then um then what else do we need then we could say uh maybe instead of having a couple of buttons like this we do a button with a label that says like grade or set date so that it's a pretty clear action rather than just some mysterious icons it might also fill out the user interface to be something nicer as well so let's try playing with that see if we can get it going and see how it's going to look um still think we don't really need to mess with the view that's been it's been a big big surprise to me so far as we haven't had all the data's been here thus far so that's been a nice benefit i'm sure we'll need some eventually but it's been nice not to have to need that so we've got an svg and i'm just gonna after it say grade see what happens i think it's gonna not work well but i wanna see it yeah so it's trying to wrap it because it doesn't know what to do about it and part of that is that these are a couple of anchor tags and although they're set to block so that's curious um i would think that block stuff would oh but we're also doing flex so this is where it gets weird it's um what if we changed it to wrap this all on a div for the moment i don't actually never mind we don't need to do that we've got a an anchor what if we change it to a flex column is that the right syntax tailwind flex column nope i had the wrong syntax so what i'm trying to do is switch the stacking oh man what is going on here that looks like junk why is it doing that really looks terrible if we gave this more space what would happen nope that doesn't fix it so there's something wrong with like that particular row these things are not going the way i would think they would maybe that svg is like a block all right there's some funny stuff that you have to do like see how these are lined up right here this is actually more complicated than it looks it's really a flex box inside or something it is a flexbox itself so that the svg and the div can be lined up yeah so we have to if we want this to look that way we have to go to this and we have to say flex then we say items center and then we can come into here and add another i don't i think we need a tag around grade okay that that gets that effect just closer to what i'm looking for so let's try that we'll we'll keep going with this for a minute see if i might need to um to give a little bit more more to this but the idea is feeling okay so far and we're gonna add the same plex and items center and put a div with set date see how that looks okay and then these look like junk now because they're they should be at least to the same side so i want to take off of the flex column we don't want to justify center i want them to be on a side i think that's the right one nope that was not what i thought it was um item center there it is i think the justify center was setting it to the middle of this which still feels pretty good there's a there's a weird oddity here you can see it all right you may not be able to see it i see it um when there's no grade it's still putting that item there so i really want that to be somewhere else so i want to say if you're not graded i want to take that if statement and put it up above the whole anchor tag wrong wrong wrong um there so in fact i don't and if i do that they don't need the else side of that that should put this right back in the middle there it goes that's feeling pretty good um what else could i do so let's talk about like how does this table of data get start to get richer in the future um it starts to get richer by this says a date right now but this is if this is already completed i can put that date here there's no reason to say set date it'll be like this is the date similarly if there is a grade i can say here put the grade there while i'm here i want to change the little grade thing put it give it some margin on the bottom because it is too tight so let's say margin bottom let's try one just for now i'll space that out a little bit i hope yep so this is beginning to feel like a more natural user interface to me um we're getting as much space as we can here there's still this weirdness with the spacing over here like there's there's more space than i would feel is necessary um i think it's a just the size the reality of i've given this this particular box a 3 out of 12 width so it's got a lot of freedom in that when it doesn't need to um the other thing we can do like we don't necessarily need there's a bunch of padding in here that i'm not sure is needed and that padding is taking up space but i don't want this at the same time i don't want the table to look crammed and i think it's in danger of doing that if i take off too much space and i don't know why i gave this one well that's there any padding on this if there is i should definitely take that off i can save myself a little bit by chopping off the padding [Music] on the number on the right side but anyway that's the detail that we'll get to later as i'm tweaking okay so then when we get back to when we get back to what's really required if a task is graded this i mean if you are looking at these this row of icons this starts to look really obviously uh unnecessary um i could make this so this doesn't appear at all if there are enrolled students which would shave down um on that quite a bit i don't know if it would be so let's try changing this whole thing to a 2 and see if it's all going to fit in there i probably pick three for a reason but it's worth checking but i also picked three when the table was smaller and that might not be the same constraint anymore i think it did some funny stuff oh yep that's so strange so when you run out of space it suddenly decides hey i'm just going to shrink the icon to fit so weird and this is probably going to frankly it's good what's going to happen if i have too many enrolled students all the buttons are just going to be shrink up but here's one where if i could get rid of all right let's bring it back for a minute talk through it so that'll bring back the size there it goes so what else can we do with this i mean longer term it'd be nice to get rid of these buttons all together the up and down it'd be nice if stuff was just like draggable that i could just drag it up and then drag it down and reorder that'd be super cool that's one thing that's not what i'm doing anytime soon but that is that's one thing the other stuff so as i said this this set could be this could be two rows of buttons i don't think i can do that quickly and then but the problem is that we've got this graded thing so how can i how can i hint that something is graded without having that icon there um but otherwise i'm starting i'm starting to like where this is shaping up to look like i feel like it's being it's representative of the kind of actions that you want to do it gives the the parent the homeschool teacher the educator this all this control right from this page which is pretty cool [Music] it does display the information i really do feel like there's too much space here just it's just too much [Music] so we get this all of that i'm going to try what happens when i resize this you won't be able to see this because it's going to cover up some stuff but so we've set a max to 3xl so we have constrained the space to even even though i'm shrinking down the browser size or growing it we're working with a fixed quantity here which is good uh it means that the experience is going to be pretty consistent for everyone and unless they go i mean if you get really small then it's going to get stupid but i'm hoping that yeah that's just no but my hope is that nobody's working on a browser that is like teeny teeny tiny uh i am not going to design for that i just don't have the time to design for every single browser size especially ones that are unreasonably small like that so what else should we do i mean i might say that this might be like a good stopping point for this particular stream um and then go get some feedback from before i commit any of this code like i think i'm not i'm not sure any of the tests have broken we can try running the tests i think all of those it's just like template changes so [Music] yeah has there been any code change i don't think i don't know if there's any been any python code change so i'll let those run for a minute see if they complain about anything the other area that we need to that i need to eventually change is anywhere that links to this old page that has this old style i have to link to the new page so that's that's something okay well thanks for joining even if for a moment i'm glad you are enjoying the podcast and and and we'll continue to i i do put up all this content on on youtube so if you want to catch some stuff later off work hours you're welcome to do that um i had somebody else from who on twitter from like germany or something that said you know this is actually three in the morning my time so that's the reality of time zones right and we're all in different parts of the world sadly um and i can't see i can't accommodate everybody unfortunately um but yeah thank you very much appreciate that um so last thoughts on this template is this seems like a good start um i need to run it by my spouse and get some feedback on there i can probably run a test that has like three or four um students and see if it just totally breaks down it might because as we saw with the buttons this stuff got weird and it might become unusable if somebody might tries to make too much uh but other than that i don't know what else what else uh what else is going to be needed and my brain is frankly just running out of steam so i am going to call it here for the night i want to thank you all for for joining in um hopefully you saw something of this process of doing template design um we didn't get to see a whole lot of the benefit of feature flags i showed them a little bit in practice and how they they kind of make it possible and and just for one last time let's let's uh switch let's turn the web server back on um let's just switch it off to make sure that everything still looks good it should i mean everything all the code was gated behind this so i could i can in theory commit this code right now and the page for every user on the actual site in the production environment or the live environment should see this view which is the um the much simplified view that doesn't have both both students so yeah there's that anyway this content is going to go up on youtube after this i hope you enjoyed the stream this evening and i hope you have a great night or great morning or wherever you are today so take care have a good one you

Channel: Matt Layman

Views: 292

Rating: 5 out of 5

Keywords: twitch, Python, Django, SaaS

Id: mmy-xAMv90w

Length: 102min 16sec (6136 seconds)

Published: Thu Apr 29 2021