Displaying Users and Groups/Roles - A TimCo Retail Manager Video

welcome to the timko retail manager course this course focuses on real-world application development in this video we're going to be getting and displaying a list of application users and the groups that they are in or the roles that they're in now patreon members don't forget to head over to my patreon site to get the source code if you aren't a patreon member and are interested in getting a source code for each timko retail manager video hannover and sign up at the $5 per month level or higher if you've been following this course from the start you know the goal is to develop a dotnet framework application they can serve as an existing application so they can learn how to upgrade to dotnet core basically the idea of having a legacy application that then you need to migrate the schedule has now been set and as long as nothing unexpected comes up in this video or the next video the video after that will be the dotnet core upgrade now it can be scheduled for November 4th I'm playing a few surprises and giveaways for that event so you don't want to miss it I may even be on live when it launches make sure you subscribe to this channel to get alerted when new videos are launched also they'll be extra bonuses for mailing list members and patreon members the links to both those are in the description okay let's move on to Visual Studio now so far we have worked with the EF Data project or you have data database manually so you come in here - EF data and you look at the tables and said ok let's add a role and so we we went in here Manly add some roles we have three right now we do the same thing for wiring users up to roles we did that manually well that's good to start but it's not good for long term so we want to create a way to see who has permission to even use our application who's even signed up or registered and then once they're registered what do they have so that's that's this video the next video is where we'll actually modify those groupings so we'll say okay Tim is now a cashier add that role to Tim or Tim is no longer a cashier take that role away for right now what we're gonna do is just display the users and which roles they have assigned to them so let's start by going over to the trm Data Manager where go to the user controller right now we just have a get by ID so let's add a new endpoint we're going to say public we don't have a return type yet so let's say void we're gonna probably create our own return type instead of using one of the ones that comes baked right in but let's for right now is have a void and we're gonna say get all users now have a step a route for this as well but we'll get that in just a minute so for right now the first step is going to be to figure out how to get the data out of our entity framework database and that is important we're not using our sequel data access with this or we don't reach price shouldn't because we already have an entity framework solution set up so we need to work with EF to get the information out so let's start by just getting the information and see how it looks so var start the users store equals new users store control dot to add the using statement for entity framework get the user store for the application user again control dot add a link to the models folder and then I grab wrap pass in context which I don't have right here so let's actually do this let's make control X is easiest and get my context so of our context equals new application DB context and there I can use the context there we go so now we have a context to create our user store and then from there I'm going to create a user manager so user manager equals new user manager of type application user and this is going to pass in the user store to get that and now from here I can do something like var users equals user manager oops lower case user manager like so user manager dot users dot to list and that would give me all the users all right so let's do this let's put a breakpoint right here right after we get the users so we can see what this users object looks like which it's a list of application user which is going to look something like well it's a little messy but it's gonna look we're gonna see that's probably easy way to do it I'm not a huge fan of entity framework for this reason it gets a little complex when it comes to these types of things it's not easy to put your finger on things sometimes but we're going to get there so let's wire this up as an HTTP GET and we have to set up a route for it because this is not going to be a standard route so instead let's say we're gonna call this this would be user slash admin / get all users let's try that oops there you go and now let's put no let's actually take authorization off of this so that here you know what let's not do that let's say allow anonymous here now you can tell you offense it's close to where we're modifying it so I'm just going to create this just we can call it directly from the API web page just want to see that it's there and then call it so this is loading up once it does we're gonna go to our swagger and their user we have admin get all users we can say try it out and we go here now if we go to our locals window we can see the users which is only one user inside there we have zero claims we're not using claims right now but we have email address emails not confirmed there's a user ID lock out is not enabled zero logins there's a password hash and then down here we have roles inside roles we have two values we have the role ID and the user ID and we also have right down here we have role ID and user ID so let's look at what information when I capture we definitely want to capture the email address the ID and the roles but the roles is interesting because we're gonna have a role ID for each of these but not the actual role name okay so we're gonna say email address hey which is email so ID email and then we'll capture the roles or if I capture the role ID because for this user okay so that's that's the users so far now let's look at roles well we can say VAR roles equals and then say context dot roles dot to list and now we can run us again make the same call and look at the roles list to see we get sir swagger users make this call and now roles we have three values we have the ID and the name so there's admin we have the ID and the name there's cashier we have the ID and the name of manager and also notice they also have a user's down here which does tell us there's one user in this one it gives us the role ID and user ID for this role so now we have this array which has ID and name and that's we're going to link up with the users so let's stop this so let's create the models that I want here so let's create a simple user model let us say user let's say application user model and that does not come flip it conflict with the application user so let's say application user model and we're going to have a string for ID we're gonna have a string for email and then we gonna have a list and let's just say let's just ring for right now but being illicit something else that is roles let's actually do instead of a list of string let's do a dictionary of type string string for roles okay so now we have my ID email and a list of dictionary values okay now what I'm gonna do could probably done with link and joining these two together but that's gonna be complicated instead of messing with that I know this will work and so I'm gonna go this direction and maybe come back and refactor at some point and if you want leave a comment the description on how you refactor I'd love to hear it but I'm just gonna do a simple loop for each of my users okay so let's do a for each user whoops let's just do var user in users so loop through each one of the users have been found which right now is only one and we're gonna create a new application user it's a application user model and I say that this is you equals new application user model and let's actually even pre populate it with the ID equals user ID the email equals user dot email let's stop right there now we need to fill in our the dictionary list which by the way that dictionary list is probably not it's not instantiate I'd be a problem now as instantiate and through I say for each and let's loop over the our in user dot roles so for each role in the roles they're gonna add something to this list rug say ok let's grab it from dictionary well roles dot whoops u dot roles dot add well yes a key which would be our user actually note it's our it's going to be the first entry in our list which we're not looping over yet so let's do that let's cut this out and do a for each on this is going to be our e this is going to be a user role in user dot roles so I loop through those roles and then whoops no we're not Wow let's undo that sorry I thought I was looping with the other roles this is where it's a little confusing this is why prior a link would would help us with this we're guys and link we just join these two together and then create new object but this has been a manual process for it it is in some ways easier because it does show it but it can also be complex so you loop through every role and say ok we're going to that role so our dot roll ID that's the the value to add for the key but what's the value what's the the name of the role that's the value we can do some quick link here and say rolls dot where X arrow function X dot ID equals r dot roll ID first oops double equal and then sits me first or default and then we're gonna have dot and the name so actually Sunday the first default let's do first so first dot name and that's the name of that roll so we have one too many parens here I think I might let's see we have one two are opened one two are closed so yes we have one to me prints there we go so now it's gonna add the roll ID and the roll name for every roll the user has at the end of this we just need to add to a list so let's create a list let's do it even outside this and say list of type application user model output equals new list and then down here you can say output dot add you okay that new user after the this right here after we have a breakpoint we can just say return output and now we're returning a list of user model which by the way I'm gonna change my type from void to list of application user model and now this should give us back just my selfie that's the only user we have right now especially get back me and it should say what my rolls are so user let's say try it out the value you get back is the ID is this the email is this and the roles are here's one ID and admin here's the other ID and cashier so that's the roles that are assigned to me so that's only really on the on the server side on the API side we now have a way of getting all the values or all the users and what roles are signed to them out to the API level and beyond now we're going to take this off in order to actually have a cyan't the administrator can do this so let's do that now authorize roles equals administrator which I believe I am one I should have looked I think we have administrator manager and cashier no admin well let's change that that's why it's good to check so admin that way I should be allowed access to this when I'm logged in as myself all right so we have authorized we have HTTP GET and we have the route so now let's leave that open but let's minimize this and go over to our desktop UI library and let's look at the API helper which that's not what we want I don't think is not we want to have a helper for our endpoint for users which we don't have right now all the user stuff comes from the API helper directly so that get by ID is probably in here I believe so this is get logged in user info so slash user yep and that's where that get by ID is being called so we're going to create a an endpoint like we have here in fact let's just copy this code right here so you have a sample to work from and now I'm going to say add new class and this is going to be the user and point I'm at public and then I'm going to create a constructor and we're going to bring in the eye API helper and let me call it over here we called it API helper like so uncontrolled dot to add that private field and now paste this in and comment it out so have an example of how to make this call so it's been a bit since I have worked with endpoints and that's not uncommon it's not uncommon to forget what you did or the exact pattern of it the worst thing you can do is just kind of plug along and assume that you're doing because then your code is subtly different every time and that's painful especially when one of those subtle differences has a bug so do it new every time or do it as a as a mirror of what you've done for so public async tasks of type list of ty and that's any application user model what you don't have yet arrests a gets all users risk at all and follow the same pattern like so we don't have the application user model so let's create that and our class for application user model and actually this is create call it user model there's no reason to have application user model I'll just call it user model and make it public and we have our our application user model up here which for right now I'm going to copy and paste because there's no real differences right now I know that makes some of you twitch and that's okay it's okay at which we see copy and paste by the same time don't decide that you want to eliminate repetition by linking those two together that's that's much more problematic okay so now we have our control dot here to add the reference don't add a reference the TRMM data manager that's not right and this is actually a user model now we can do control dot and have the user statement there and this is a task there we go so now now we're set up here we can say using actually using there we go HTTP response message response equals a wait API helper API client get async and this is going to be the path is API slash user slash admin / get all users like so and now in here if the status quo is successful if response dot is success status code then VAR result equals a weight response dot content dot read as async and the type is going to be a list of user model like so and then we can just return result just gonna do it down here it's it's a mirror else throw new exception we're not checking for what type of exception here we're just saying throw exception and say a response dot reason phrase that's we get that unauthorized from so now we have that we have a method to actually call to get all the users so now we can create our interface so extract an interface hit OK hit save and now we can add this interface and implementation to our user interface in our bootstrapper and that should be down in here where we have our I sales endpoint we now also need a per request for I and its user endpoint like so and now we have that as well so now you have it registered in our dependency injection system for our front-end WPF application so now that we have that in place we can start working with that data so let's do this let's go to our view models and let's create a new view model so a new class and we're gonna call this the user display view model make it public and I believe will inherit from screen like all these do yep so we'll inherit from screen control dot there and now we can do is we can capture the various pieces that we need now let's actually follow a pattern of the sales view model here so here we have a constructor we'll get to that in a minute but then we have this protected override async on view loaded and that's where I do the actual product load let's do that here as well actually got copy and paste this entire thing in fact I'll copy and paste the load products as well and I'll come down here and I will paste it now we're not gonna do load products but that's okay so now we have our own view loaded let's leave the exception handle in place so we're gonna add our using for Expando and are using for system dot windows and then we have our status which we have to bring in from our constructor so ctor and in here we have our status info view model air control dot add that and we have our I window handler or window manager our control dot to add that field and now this is all working the way it should accept the fact we're not loading products we're going loading our users and the reason we do the on view loaded is because you want to wait until the view loads before we start getting the data to them populated since we're doing a asynchronously so let's say load users instead of products and we'll come down here and actually change that name to load users but we're going to say that we need an endpoint here and we need the user endpoint so we asked for that I user endpoint control dot at our using statement and say user initialize that and actually we call it product endpoint so let's do the same thing here user endpoint and let's get rid of this and do it again that way it's it is all quicker than trying to paste it and make sure I got everywhere so user endpoint now I can down here say user endpoint dot it's control J we have a get all which is going to return back a list of user model so that's going to be our user list now this right here does a conversion using Auto mapper to map to a display model but I don't think we need to do that in this case because it's basically read-only so this user list is a list of library dot models dot user model and we're going to create that internally so let's create that right up here let's kind of minimize this and where creates a public list of user model control dot so list of user model and we say this is users and we'll have our get which is going to be a return users which don't have yet so let's create that this is a full property I could done a full prop full I'm gonna do it manually so a list of user model users like so and I can return that we also have a set which is going to be users equals value and then notify of property change and this thing of type users yeah I set a list that she's binding list so let's do that I did my control dot to add the using statement there and now we have this which is a list not binding list a list we can say users equals new binding list and pass in a a list or a list of user model so user list and that's going to create for us our new binding list with all of our users populated in it after that what we need to do is we need to display these users and that's where our view model comes in I'm sorry review so this is user display view model so we're gonna add a new user control called user display view I'm going to increase this a little bit now go over to my my sales view I'm gonna copy most of this a lot of this let's start with the ignore 'l and i'm going to copy the rest and yes i know right we're gonna delete a lot of this stuff but that way i know where i'm copying to i'm copying to the grid the bottle grid and now i'm going to go from my ignore ball to the bottom of the grid and now i have the exact same thing as a sales page i can just start modifying it again keeping the same feel to the page so let's just say this is the users user administration and we're gonna have instead of having a two list right now i think we're going to do is let's get rid of this is center column so everything in here in column one we can get rid of don't need it and everything column two we can get rid of that as well and down below we have our subtotal total we don't need those we don't need to check out button either so we're starting to get down to just we have which is right now items but it's not items it's gonna be users and you want to have I do want a list box for right now I'm not gonna do anything with selected item so selected item let's create no it's not let's not even worry about it so we're not confused for next time and we do have this layout here that's good because we're going to swing users and we're going to want to have multiple pieces of information about this user let us start off with the email address probably the friend doesn't really care about the ID so let's just show the email address and if we look let's let's save everything let's close everything but this and that's come down to our user model which is ID email and then roles so this would be email and then after that we're gonna have a loop with all of our roles now as I'm thinking about that might be cumbersome especially that a lot of different roles you don't wanna have this long list under your email address of all the different roles you're a part of so instead let's do this let's have a comma separated list of your roles that does mean making a modification in this model not a huge fan of that that's why we separate out these models and make a separate display model but for this it's not the end of the world what I'm going to do is it creates a full property it's got a type string and say let's call it role list role list is probably fine like so and we'll get rid of the private backing field we'll get rid of the set and I could take us out that's what it comes down to whenever I type it out I'm like I should use a prop be the snippet but whatever I don't type it out I'm like or whether I do type it out in like it so long or don't type it out it's annoying so anyhoo let's do this let's do first of all return nothing fright now we're gonna loop through all of our roles in Korea comma separated value and this is actually not too hard to do so we're going to do is say return string dot join or a pass in first of all a separator so a comma and then our list which is roles and that's going to create for us a comma separated and actually we need to change us a little bit rolls dice select X equal or x arrow function X dot the value okay and the reason why is easy have this dictionary list not as a list of string and so I said well actually create a list of string first which is just going to be the values from our roles then join that by comma return that thing as a read-only property called roles and that should be all we need in order to get our role list now instead of going through all this hassle what we can do is we don't have to have going to have multiple stack panels underneath let's grab one of them possibly and do a this is a this has a horizontal orientation I'm wondering if that's gonna look right or not or maybe he's put the rolls underneath without anything else let's start there so let's just do text block text equals binding it was roll list so it was I'll verify it in just a minute now delete the stack panels no reason to have those so now we have our roll list and yes it's called roll list in theory this is gonna have a list of users with their rolls listed underneath as comma separated values let's see how it looks we can also make this a little wider so actually don't have a max width we'll probably have to add that is our role list might get a little long it at some point but with no max width I think that's for me fine so let's call that good and now let's add this to our she'll view we have the the menu items so you have a file menu we have we also have long out and exit so we have a file menu account menu that's we have so let's create another menu and this one we're going to call user users and we'll say user management so we'll have user and user management is the name of the call and whereas a this is user management like so and the the underscore will be in front of the the M so it's the M is what's going to be used to access that value so we can copy this we can go over to our shell view model and look at our different methods here we have logout we have exit application and we now have public void user management which what this is going to do is it's going to do a call just like this so it's going to activate an item and this item is going to be the user display view model that's what's gonna activate that should be all we need to do we're going to find out in just a minute I have not restricted anything here or hidden that's it anyway it should be that just works which if you've been developer for any time at all you know that that phrase just about dooms me to have an error here somewhere wait for the API load I'll log in I'm now logged in I can go to users user management and not found excellent and it crashes I'm wonder if it's the API endpoint so let's go to swagger and the endpoint is is actually admin into that API slash user it's slash admin / get all users that's not quite right we rework the URL somewhere else oh we do right here and it's get silly report with no API excellent so let's do API slash user slash admin / get all users so let's do that API slash user we have to add on to that so let's come down to our API endpoint see I knew this we need something come you needed changed down here in our let's not it but let's go ahead and get rid of our test code now to our user endpoint we actually - go to our controller user controller there we go and we need to say API slash user slash admin / get all users and then let's verify what we're calling in that user endpoint API slash user slash admin / get all users so that's correct at least now it is in theory let's try it again login go users user management and there we go Tim Cory is an admin and a cashier so that's all we really need to do for this video we can format to me a little nicer and probably should but that's basically it let's put a space there and let's make this a little smaller on the font size but then we're gonna do is we're going to let's close this out we're going to stop there and next video what we're going to do is show the roles and allow you to select a user and say ok they're already in these two roles I want to add a third role or I'm going to remove them from this role okay so let's let's work on our formatting so down here for this text blocks block our font size is probably inheriting from the form the font size is 24 let's change this font size to be let's go with 18 makes it smaller and then let's add a space after the comma that way we have a little more better separation and let's run that again see if we get something a little more valuable to display so log in users a user account management there we go so two space there and it's smaller and indicates these are the roles that were in okay so that's all there is for this video there's some complicated parts in here by the same time I think that looking over them and file in the same example you'll see how it's done and be able to do yourself so we got information about the users and the roles from the entity framework system and then we passed that all the way through the front end where we displayed it and we even did some formatting on our rolls so that it made it a little nicer to view okay there's a lot more we could do but I didn't want to spend another hour to making this pretty so I just want to get it done and show you we can move on from here but this is more of a demo than it is a full-blown application I'm trying to get the pieces in place even if they're not the prettiest and even if it's not complete but at least that way we have a pieces in place and you see the various parts that we're doing and then you can take those parts and extrapolate and do more with those parts okay so that's it let me know in the comments if you have any suggestions or if you have a way to make that that linq query between the users and their roles cleaner I'd love to see it and if you have any suggestions for in the next video when we link the two up you may not see this video before I do the next video but I am recording ahead of time so that I can take a vacation so if I don't do your suggestion the next video don't mention it that's why but I will look at the suggestions and I'll write them down and maybe after he converts dotnet core will have another bug fix or improvement video where you go through and make some refactoring changes to make this application even better okay thanks for watching as always I am Tim quarry

Channel: IAmTimCorey

Views: 9,557

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, tim corey, C# course, C# training, C# tutorial, C# app start to finish, timco, timco retail manager, wpf, asp.net, .net core, asp.net mvc, autofac, c# solid, c# solid principles, dependency injection, tdd, unit testing, xunit, moq, entity framework, c# ef dbcontext, c# ef, c# identity, c# roles, c# role provider, c# roles and permissions

Id: u9c2q1Wqu6Q

Length: 46min 14sec (2774 seconds)

Published: Mon Oct 07 2019