Django with HTMX Tutorial #4 - Displaying Contacts

Key Takeaways

so now that we have the contact model in this application we're ready to start building the user interface if we go to the page at the moment we just have this header that says contact manager we want to now change this page up and add some new features now what we want to display on this page are the user contacts so imagine you log into this application and you see all of the contacts that you've added in the past appearing in a table on this page let's set that up just now and go back to vs code and what we're going to do is go to the application views and at the top of the page I'm going to bring in the login required decorator from jangle and above the view here we're going to decorate this index view with the login required decorator now the reason for this is we're going to take the authenticated user which is available in Jango as request. user and we're going to fetch that user's contacts using a database query in jangle so let's create a variable here called contacts and we're going to reference request. user and we're going to reference the related name that we added of contacts and we're going to get all of the users contact so if you're wondering what contacts is on the user model if we go back to models.py here we have the contact model and the forign key to the parent user is here but when we want to go in the other direction from a user and get their contacts we have this related name of contacts that we add here in this statement and we can then simply add a key to the context called contacts and reference that value that we're pulling out on line 7 from the database and that's going to be a list or a query set of contacts now by adding those to to the context that means that in this template we can reference the contacts and iterate over them and display them in a table for example before we do that I'm going to add a DOT order by to this statement here and we're going to order by the most recently added contact First and we can do that by using the creat that field on the contact model and by adding the minus in front of that in the jangle notation that means that it's going to be in descending order so the most recently created contacts are going to be at the top of this query set so let's now go to contact HTML and we're going to take these contacts and we're going to display them on the page now actually what I'm going to do is create what's called a partial and this is for HTM X usage so what I'm going to do in the templates directory is create a partials subdirectory and within that let's create a new file here and this is going to be a template partial that we're going to call contact list. HTML now let me explain what we're going to do here so the actual list or in this case it's going to be a table of contacts the HTML markup for that is going to be contained in this file and that's because later on when we use HTM X we're going to return these fragments as part of a response so we can create the partial and you'll often hear it called a template fragment as well and you can encapsulate the code you want to return as an HDMX response in these partials so what I'm going to do it to start with here is create a div at the top with an ID of contacts list and we're going to have the markup for our actual table of contacts within this now we need to check if we have contacts first so we're going to add an if statement here in the jangle template language so we're checking if we have contacts in the context that we're passing to the template in other words did the database have any contacts for request. user so if that's true we're going to render a table here in the contact list partial so I'm going to add another enclosing div here and we'll close that off at the bottom and we're going to put the table inside this div here let's create an HTML table element and we're going to use some classes from Daisy UI and that's the table and the table zebra class and I'm going to use another one called called table pin row once we've added that we can close off the HTML table and let's quickly reference the daisy UI documentation on tables so for a table element the component class is table and we have these modifiers so table zebra is going to add the zebra stripe rows to the table and we also added table pin rows and what that's going to do is it's going to make all of the rows inside the table head and the table foot elements sticky on the page so now that we have the table let's add a table head element here and I'm going to paste this code in and we're going to reference this so we have a table head and the table headers here are in this table row we want the name of the contact the email address and the time that that contact was created and I'm going to add another column for actions that we're going to use later in the series below the table head what we can do is then create a table body element for displaying the actual information in this table so what we need to do within the table body is we need to iterate over all of the contacts that we have in the context for this template so for each contact in the contacts what we're going to do is we're going to render a table row so that's going to be a TR element and I'm going to close this off just below here and within each row what we're going to do is add some table data so first of all we have the contact that we're iterating over we're going to reference the name of that contact that's going to be the first row and I'm going to copy this down a couple of more times and for the email address we want to reference the email field on the contact model and finally we want to reference the time that that contact was created which is available on the model the create that field so that's three out of four columns but we also had this column here for actions what I'm going to do is paste some code in here and what we have here is another table data and inside that a button here with the text delete and some classes from daa UI so later on in the series we're going to use HDMX to delete a contact from this table so that is a placeholder for now for that action that we're going to add later in the series so that is our table here and what we're going to do is we're going to check if we have contacts and that's what we're going to render here but what if we don't have contacts what we can do is add an else Clause here and we can render some text if we have no contacts in the database and let's display a message here saying no contacts found and I want to do that within an alert component in Daisy UI now if we scroll down here we can use this color here for example if we wanted to show an error or a warning would be this yellow color I'm just going to use the info color which is a kind of blue color here so let's look at the HTML for that and I'm going to copy this HTML Emil and let's go back to our template here and paste this in and we can change the text that's within this and I'm going to put no contacts found instead of what we have from the documentation and once we've added that we have this contact list. HTML fragment or this template partial we can then go back to the parent template that we're going to add this to and that's contacts. HTML and all we need to do here underneath the H1 tag is use the include template tag in jangle and we can reference the path to our new partial so that's in the partials directory and the name is contact list. HTML let's now test this out by running the jangle development server and going back to the application and I've logged into the application's admin UI with my admin user and that's important because remember the jangle view that we're working with if we go back to this it requires an authenticated user it requires that session to be created and the user to be in the database so we need to log in and currently the only way to do that is via the admin so make sure you create a super user log in with the admin and then you can go back to the page and this time we get the message that no contacts were found that makes sense because we haven't added any contacts to the database let's go back to the Django admin and I'm going to add a contact here so we're adding John do and we have an email address here and the user that John do belongs to as a contact is going to be this admin user so let's save that and then once we've saved it go back to the application and when we refresh this we now get the contact appearing on the page so that's all working now and if we were to add another contact we would get that appearing in the table as well the last thing I want to do in this video is look at the created act time that we have here and we're going to use the date template filter in jangle to change the way that this is displayed we don't need the time component here let's just say we're only interested in the date let's go back to the template that we have here and go back to this created that so in order to use the date filter we can use this pipe here and then we're going to use the date filter and what we passed to that is the for format of the date so I want the month and then the day and then a comma and the year so if we save that and go back to the template again and refresh this page you can see we get this format instead we have the month and we have the abbreviated form of the month and we get the day here and the year so that's just a quick primer on how to use the date template filter if you want to customize how a date time is shown in the UI so up until now we've not used HTM X anywhere in this project but we're going to start using HDMX in the next video and what we're going to build is some search functionality so let's say we have lots of contacts in the database and we want to find a particular user or a particular contact we don't want to look through a huge list and potentially a paginated page of contacts instead what we're going to add is a search bar and it's going to use HTM X to search for a given contact and return those to the user so that's where we're going to start using HDMX and we're going to introduce some attributes and some modifiers so that's coming up and we'll see you in the next video