Complete Employee Management System | .NET 8 Blazor Wasm & Web API - Perform CRUD, Print, PDF etc..

hello guys welcome back to net code Hub channel I  am Frederick as you know and I'm happy to have you   here today I have receive a project from a company  that I'm working on currently and that is employee   management system so I have planned to do this  project with you maybe at the end of working on   this project you might have learned something  which is more relevant to you but there's one   problem do not tell anybody okay yes do not  to anybody okay so let's actually go through   the details that I got from this company and you  know I'm not going to actually reveal everything   to you okay the diagram here tells you what this  going to do we have the company we have um general   department we have Department in here we have  Branch we have employee and within the employee is   going to have vacation table overtime table doctor  table and um sanctions table so this is going to   be a cascaded drop down list as soon as you select  Department general department you must select or   Department must be available for you to select  as soon as you do that you must have a branch you   also select this has to relate to each employee  now you must have these four tables whereby the   vacation time for each employee will be kept over  time over two will be kept here now doct table   going to handle all information about doctest  and also the sanction that is in case there's any   restriction we're going to put it over there which  is related to the specific employee so this is   going to be a relational database meaning database  tables with relationships okay also when I quickly   go through this let me just review small you can  see we have authentication we have ad pages and it   has given us the kind of property that they need  to handle that so we are going to follow this and   at the end of the day we're going to have a print  and also export to PDF or even word I believe you   love that okay so this what we are going to do it  they going to be a simple project for you and I   to work on all right so once I do you also do it  I'll put it in in a small small videos and at the   end of the day I'm going to put all in one video  so if if even if you couldn't watch or you miss   any part of the video you check all in one video  and you're going to find it in there also maybe I   will leave the description that is the link the  source code when we are done with this project   I'll leave everything because this since this  is um a company project maybe I'm planning not   to um push it but well let's see let's see what  will happen at the end of creating this project   so the model that you're going to use here is the  company is demanding for an web API with blazer   web assembly and definitely we going for net a  because that is what we are all using so we're   going to use net 8 web assembly standard loone  which going to consume data or info from the web   API also. net8 web API I believe you know already  that I do offer training session for people who   are interested in Blazer and net Technologies  talking about we API service um Blazer assembly   and also the Blazer server app net Mar and  Mar Blazer hybrid I have a link in the video   description and every video description so if you  want to hook me up just check the description and   I have a mail in there you can write me through  it so this is going to be an interesting project   um it's going to be an an an a stepping stone for  everybody you and I okay so before we jump right   into this please do not forget to subscribe and  also hit on that notification Bell so you never   miss out any of the content from this net code  help Channel also if you are okay and you like   what I'm doing you want to support me you can  just click on the the like button to to give   me thumbs up to this video also you can buy me  coffee to support to give me a lot more energy   to sit down and I'll thank and I'll come out with  some beautiful ideas so we can Implement in this   so if you want to buy me coffee I'll I love you  so much and I appreciate it a lot check the this   video description or any of our videos in here  description and you're going to find the link   over there all right so now that you've you've  seen the view you've have the view of what you're   going to do let's jump right into this we're going  to create a project in Visual Studio either in   the preview one or the normal visual studio so  let's hop into that and then let's start doing something so in here lunch your Vis C could be  visual C 2022 preview or it could be the 2022   the stable one you can use any of them so click on  create new project and first of all you're going   to create a solution and uh we add the project  to the solution later on so let's pass in here   solution and that's going to be a blank solution  and here I'm going to say the name of this going   to be demo employee management system solution so  click on create to get this project created once   done we're going to add the server and now the  client itself so let's click on new project we   going for web API and now here I'm going to  say there is a server and also we make sure   we choose the same net 8.0 authentication time  going to be n because going to create our ownt   custom authentication click on um create to get  it created aside from that you also need to add   a client so let's do it quickly add a new project  and you need Blazer assembly stand loan and here   say is and also the same type authentication  type will be none so click on create to get this   project created so once we have done here we want  to put all the repat and services in a separate   project so maybe later on if you want to use it  in other project you can you can make it or we   can make it possible to use it okay so in doing so  we are going to create a separate project for each   and I'm going to name them as um client library  and also the server library and also going to have   a base Library which going to have a models which  are going to be sh by both the server and also the   client so click on add new projects and we go in  for C Class library and now here I'm going to say   this is Base Library so click on create andet  8 Z so we can just clean this off so let's add   this to the project and let's go to the server  and now when we click on the server we are going   to add this Base Library project so I click on it  dependencies and I click on ADD project reference   and in here we're going to choose the client not  that's a base Library this is what you're going to   um choose for so click on okay let's also do same  to the client as well so I click on dependencies   ADD project reference and now choose the Base  Library so we see both projects are using the   same class library now the client going to have  Services folder the server going to have a poory   folder so why can't we create um project for each  so you can handle everything in there so let's do   that quickly so inside this solution we are going  to um add a new one so let's add a new project   and now it's going to be the same class library  and I'm going to say this going to be a client Library so this is a client library and this  is limited to only the the client so here I   click on dependencies and that's going  to be for the client dependencies go to   add project reference and now add the client  library to it so we have two libraries added   to this the general one and also the limited  Library let's do same to the server as well   so let's also add one and project so here  the same and now this going to be the server library and now this server is going to be  added to the server project so right click   on this dependencies add project reference and  I'll choose the server Library so we see the   server has the base it has the server Library so  two um libraries added for each of the project in   here okay good so we can clean um the default  classes created so from this class Library we   have also this can make some Cleanup in here  okay so that is it now the next to do here   is we can run the client we can also run the  server separately and so in order for us to   get communication happen between the server and  the client we have to establish cost between them   when we get there we're going to do that so  currently this is the server we can um choose   the client and we can run the client here and  also while this getting um ready to run we can   also run the server alongside here so I click  on the server and now let's wait for this to   get then it can now go to um start without the  Bing we can also run this so we're going to work   on the server first then we also work on the  client as well so let's wait for this to get run so while is repairing let's see so  solution I click on the server to and we   can click on the bag and I'll start with that  the bagging so this also going to start with that so that is this is going to be the the client  so let's wait for the server to also get loaded   all right so you can see on the check here we  have our client here and we also have our API   so default this is what we have and we can test  this out and you can see this also um working when   you check the weather forecast you can see this  also working so we have our two project configured   and they have their dependency separately or  both have one shed Library you're going to be   used by both projects aside from that each has a  separate project that it going to inherit it from   either is a service or is a paratory is going to  derive from that project okay so now let's close   this now next that we're going to do here is we  going to create our folders which are going to be   used in this project so first of all we are going  to work on authentication and authorization for   this okay so um in doing that you first have  to install these packages to the application   and now this limited to the server so see we  have a server Library we are going to install   them here so I can right click on this then go to  unload project and I in here I can create an item group so I'm going to have an item group and I'll  past in this so we can see we are installing this   packages uh b.net and we're installing the JWT bar  EF server tools and also the tokens and token. JWT   these are the packages that you want to use in  the server Library so save this I click on this   and I'll load project with dependencies you can  also um right click on the server Library you   go to the add or manage get packages and now you  can just install them one after the another from   the browse section by doing this you going to  install this once and for all let's wait to see   they all installed peacefully in say okay so aside  from this we have to also go to the server and I   install same packages in there because you're are  going to be using the same package as well okay   so let's go to the server and in here we click on  this is the server depend so I'm going to right   click on this then um you see unload project and  have an item group so I'm going to paste them here   and here to we are installing this we don't need  a component server cuz I'm not using cor hosted   project there's EF server tools and as you can  see we have the token we have filter for um add   authorization to the Swagger we have token and we  have be so make sure you have this also installed   now save this right click on this and go to reload  with dependencies or you can also right click on   this dependencies and go to m get packages and  you can install them from the browse session one   after the another you can install them in as you  can see from here I have them installed okay now   once you are done here the next thing that you're  going to do here is we going to create our models   so let me close all this let's save them and now  when you check this we have this base model so   the models which are going to be used by both  client and server we put them in the base model   and now the models and method which are limited  to each project is going to be um is going to be   put inside the limited or eight private project  okay so from the base project we're going to be   using dto so we have to create our dto this  going to be the base project so right click   on this let's add a new folder name it as dtos  and we also have to um create a new folder and   I name it as entities so these entities are going  to be used by both so let's say this is going to   be used by the server okay so the enties can be  in here by see this going to be the shared one we   want to put the entities in here so add this then  the new folder and now here is going to be the   entities aside from that you're going to have our  responses so let's cre one folder and name it as responses so we have our responses in here  now let's right click on this base um library   and we have to install one package to this  Library we're going to use as a converter   to convert this ET to entity so it's going  to be the autoa so let's install autoa in here so let's wait we have it installed so  maybe if you're going to be using it here we   have to install this um package in there and also  where we need to use maybe if the client session   we also have to install this package in there  but don't worry when we get there we see what   you're going to do next so once we have this  installed uh we have also our dto folder and   our entities and responses folder created now we  need to create um folders to each project because   from the client session it's going to have um  services and also from the server session it's   going to have a repository so we let's put them  to um their projects that's their libraries so   here when you go to this client section it has  the client Library so in here I click on this   and we can add a new folder to this and this  going to be Services because since the client   is going to consume a service to from the API and  in the service you're going to have a contract and   interface contract are the interfaces so you have  contract and you're going to have our interfaces   so this contract are the interfaces I'm going to  have the repository as implementations so let's   have a name in here implementations now within the  same thing in here we can copy this folder and now   from the server session server Library we can  also page them here and now this is going to be repositories so this reposit going to have the  same contract and implementations okay so now we   have this set we are going to create our entities  so the first entity that you going to create is   going to be an employee so right click on the  entities and then click on add a new class and   this going to be an employee the reason why we  are creating entities and D2 is that entities are   the database models so d2os are the user models so  whenever you are communicating data from database   to the user you're going to use a dto and whenever  you want to communicate data to the database then   you're going to use the entities okay so entities  are the native of the database but the dto are   what going to be used to transfer data from the  natives to the user all right so let's keep moving   now we have this class created we can remove all  this but there are some properties which are very   common or which going to be common to all models  so in those properties we can create a base entity   and now um put those properties in there so we  can inherit from them okay so we are trying to   skip repetition all the time I normally say try  not to repeat yourself so let's have this base   entity and now this base entity we want to have  an ID and our name which this property are going   to be available in all model that we are going to  be creating so let's say we have this and that's   going to be the name and in here we're going to  have a relationship in here so let's also add a   relationship to it and this is going to be um one  to many so we're going to have this relationship   here let's say when we create a different model  we're going to have this relationships so now   let's let's move on now we have this employee okay  now this employee it has this um list of employees   but we not going to inherit this employee you're  not going to inherit this base entity inside   this employee because this employee has it data  properties already but when it get to the other   models that is where we going to inherit from  so let's keep moving now within the employees   we need or maybe we can still simplify the see we  have this relationship as one to many So within   relationship this what we can do from this en base  we can add another class and I'll name it as um relationship okay so this is the relationship  and now here we can just grab this make it as   public and from this base entity we can then move  this relationship here and now to this model so   this is going to be this model is handle the  relationship and that is one to many okay so   let's remove this here and now when you go back  to this base entity it has Name ID and a name   right so when you check this employee we can now  inherit from this base entity because this base   entity has if I pep this it has ID and a name  that's going to be employee ID and an employee   name okay so we can add the rest to um this  also we want to add the flowing properties in   here we have civil ID file number full name job  name address telephone number um phone type and   that's all the other these are the properties or  these are the instruction given from the company   so we are doing according to what they provided  okay so maybe you can customize to suit what you   want or you can follow this and at the end of  the day we all going to achieve the same thing   okay so um we have this created we need to also  create our cascaded model and this going to be   the general department so let's create our model  so the first one here is going to be entity and   let's add a new class and you say this general  department this general department is going to   inherit from this base entity and that's all we  have a everything because the department needs   an ID and our name and this base department has  it so there's no need for us to repeat it again   very simple one you see let's create the next  one and this is going to be department so the   company need general department it also needs  a department let's add a class and this this   is going to be department and now this also is  going to inherit from the base entity because   department has a name and an ID so we save this  so we are trying to skip all the repetition that   you're going to be making so try to do that do not  repeat yourself keep it in mind all the time okay   now once you done this you can also handle Branch  Branch also have the same ID and our name so let's   handle the branch in here now Branch also have  from same base entity and it's going to be public very simple the next one here you have um town and  on this town is when user is registering that is   where we need this town so also going to have  an entity so let's create that and now a town   is going to have a ID and also ID and our name so  we make this as public and now since it's going   to have ID and name we can hry from this base  entity and that is all very simple one okay so   we have our models in here now we see from the  relationship we have one relationship in here   and that is from um one to many meaning we have  a list of employees which going to have a link   to this employee that we have specified in here  the mod that we have in here so example here is   Branch so Branch can have a list of employees so  one branch can have a list list of employees under   isn't it Department one Department can have  a list of employees the same thing applies to   general department can have a list of employees  so we going to link them in there so in order   to do that you go to the base entity and that  is where we specify this relationship in here   as you can see aside from that we go back to  this employee here and now we need to specify   there the relationship in here as well so down  here we going to specify that here going to be   many to one and so can see we have the general  department so one Department one ID Department   ID is going to have a list of employees that's a  many to one so many employees is related to one   department now um that's for general department  and also we have the department going to have a   list of employees um Branch going to have a list  of employee Town also going to have a list list   of employee right because many employees can  live in one town isn't it yes so we have the   relationship also established in here so you can  see that the base entity here does not have the   relationship created it has only two properties  in here now when you go to each of the properties   for the Department it is inheriting from this base  entity now this B entity has this ID and our name   but how do you establish the relationship  also here that's where we need to add the   relationship okay so it means that it also has  a list of employees in here so this relationship   here that we are creating when you check this  but I think there's an error here because one   class cannot have a multiple classes as as a  base right so maybe this what we can do since   we have this base entity we can just modify this  a little bit so we can just go in there once you   have the employee ID from this section this BS  entity we can just copy this and let's put into   this employee because the employee data here is a  unique so we can put it in here now in this base   we can remove it from this section okay save that  we go to this relationship we can just grab this   from the relationship model we go back to this  base entity and I will leave this in here so   this means that employee um model is not going  to inherit from this based entity but the are   going to inherit from so we can just remove this  relationship in here and now when you go back to   the department you can see we cannot remove this  and I inheriting from this if I click on this and   now pick definition it gives you this so it's  having a list of employee all right so that's   the the property that also going to inherit when  you go to the department to and now check you're   also going to have the same list of employee in  there so we create it once and I use it multiple   times in the various model all right so we have  entities here um created and these are what   you're going to be used to create database  table okay for separate model that we have specified the next thing that we're going to do  here is we go to the dto and now we are going   to create an account because you're going to  have authentication system to this so Isam must   register you know administrator must have overall  boss aside from that administrator can assign um   people managers these managers have roles and they  can edit or delete employee they can manage the   employee as well and maybe an employee can also  update it data it information okay so this is a   hierarchy of row and need to also do that so for  now let's handle the registration first then we   see how to handle the roles too so in the dto  we have we need to create one model and that's   going to be the user so let's create a model to  handle that and this also going to be saved okay   so this is going to be an identity um entities  so let's add to the entity it's going to be a   class and I'm going to say application um user  now this application user is also going to Harry   from something let's also create an base entity  as well application user also going to have from   this base entity because the base entity okay the  base entity has a list right a list of models or   a list of employees and in that you don't want  to inherit from this so maybe the application   user we can Implement our own we go to this  base entity now it has we need an ID and now   we need the name we can just make a copy of this  and now in here we can paste it here okay then   let's make this as public and also we are done  with this one let's go to this application user   so we have the name we have the the ID the name  and we need to add few more stuffs that's going   to be the email and the password so maybe going  to have this email and going to have the password   here so this is what we're going to create in  a table form that's going to be for any person   who registers in the account whether the person  is an administrator the person is a manager the   person is normal employee we're going to take in  the ID and the name the email and the person's   password so that maybe if the person wants to  log the application to update this information   you're going to use the same credential specified  in here to update that or to login and access his   or her information I believe this is clear okay  now let's go to the dto So within the dto we   going to create login and our registration right  so let's create our login but before that we need   to also create a base um um model here because  you're going to be using in both so let's have   a b account base now this account base we're going  to have something like email and our password now   the email and password you're going to we're going  to decorate it with this validation attribute see   we have this we have um email we have password  because when you check the registration you're   going to use user you're going to need user email  and user password when you check the login to we   also going to use user email and the user password  isn't it so it is better you put them in a class   CL now we can he from this class as well okay so  this is an object oriented oops object oriented   programming okay put them in separate classes and  I'm calling them inheriting from classes and do   a whole lot of stuff in it making application  very simple and easier to read as well so once   we have this account based we also going to  have our login so in a you're going to have   our right click on this and it's going to be  um login now do this login you know when the   person wants to log to application this is  public the person must provide his username   and email address and password and now we have  this specify in the account base so we have to   we just inherit and we we move on let's go to  the register let's add a new class and this is   going to be a register now with the register  we also going to do same and in that you're   going to need person name person's email person's  phone number maybe not phone number because phone   number is going to be taken already from the  employee data so maybe in here we need these   features we need a password okay so we're going to  compare this we need um name of password we need   just a full name we need confirm password and  also we need an password and a confirm password   also we need an ID isn't it and they can be  found in the account base so we specify them here so you have two properties in account  base and they are going to be added to this   making four so that's going to be the  ID name um password and our email and   now confirm password right so these are  the properties that we need in here so   these are the model that you're going  to be using for now in this all right   so maybe we have a model created the next  thing to do here is we're going to create   our appdb contest class and um try to perform  migration to start working with authentication system so let's see we go to the client server  library that is where we going to add the data   to handle the migration so inside that we can just  create a folder to the server library and I'll add   a new folder as data in here now within that data  let's add a class known as a appdb contest you can   name it any name that you want okay so name it  here abdb contest and let me just format it 12   okay so abdb contest and now this going to be a  public class and this is going to inherit from   DB contest so DB contest class and it's coming  from EF core so install that we can just create a   constractor from this and pass in this option but  the help of the C version 12 new meod introduced   as primary Constructors we can use it here in just  one line of code very simple one aside from that   we need to specify all our models to create a  database table for us so in that what can we do   we can specify the following um models in here and  within each we are going to create a table which   has this name and I'm going to use the various  properties in this model to create the columns   for that table to control period we have to add a  reference to this Base Library and all these are   going to be solved so do added and now everything  is going to work okay so we have application   user for the application we have Town branches  Department general department and Etc we have more   to be added such as the the sanctions table we  have the overtime table we're going to be adding   them as soon as possible but let's going to start  from scratch then we keep pushing we keep pushing   we keep keep pushing okay so don't worry let's  maintain what we have in here let's save this   now the next to do here is we have to specify our  appdb contest that's going to be our connection   so from this connection we go to the server and  as you can see from here we have a file known   as a app setting. Json so in here let's specify  our connection on top here and now with this I'm   going to say this is going to be a demo employee  demo employee DB that going to be the name for the   database so just specify yours and I'll do same  and now let's move on so once you're done with   this we need to register the database connection  and also um and perform migration with this first   okay so to do that you go to the same program  from the server session and I'm in here let me   give space here so this is is starting and this is  going to be um Builder services so do services. DB   contest and now is an appdb contest and now in  here we need to specify an option to it so this   Max to we going to say options. use SQL server  and now the SQL Server we can have our builder. configuration so Builder do wo let's  do it again so we have builder.   configuration then do get connection  string and then in here let's have it   is now then through new invalid operation  exception and I'll tell the person that sorry your connection string is not found okay so  we can TR new exception when it is null in here so   with the bu. configuration. get connection string  we must specify we have to terminate this and also   we have to close this so here let's go to the app  setting copy the name for default connection save   that go to the program. Cs file and in here just  page it here and that is all so we are done with   this so once you have this you can now go ahead  and now perform database migration so to do that   let's make sure we have a server selected from  here and now let's run this application so build solution so while this is done you see we have  five succeeded we go back to the package manager   console from here you can find it go to  views not views go to tools and you can   see we have the you have it it here you get  package manager and I click on the console   so in here let's make sure we make the server  Library project make a setup one because when   you check this you can see that from here  we have the DB appdb Contex class in this   project so we have to select that whil  we make the migration so let's say add migration and now let's say d o that's going to  be the output there's a folder called Data open   it create another folder as migration and do  all your stuff in there so we need to specify   name and I'm going to say this is first so let's  do that while this this is building the project   let's click on the server and I go to this and  now from this invariant globalization set this   to for because trust me if you don't do that  you're going to have error trying to update the   database so let's update it update Das database  quickly let's do that and it's going to run the   command to create all these tables in a database  for us so while this is running we can just go to   SQL Server object Explorer if you're not find it  click on views you can see it's over here click   on this and um here let's wait for this to get  loaded so we can see our server we see we have   this a desktop click on this and um open it  if you're not find this click on this icon   this plus so add a new connection to this and  maybe you can select the local and also um set   this TR connection or TR certificate through and  click on connect and that is all so we have open   that's a demo employee DB we open this tables  and these are the table that have been created   from this migration file in here it's going to be  listed let's give it some seconds to get loaded   yes we have application user branches Department  employees General departments towns and Etc right   so these are the tables that we have now this  application is going to handle from administrator   to managers and to employees so it's going to  have this hierarchy of rows so it means you   have to create a table that can handle the rows  as well so quickly let's go to this let's clear   first what we have in here now the next to do  here is we go to the base Library which contains   the models and you can see we have this entities  so all models in at this area is going to be kept   in a database it means that you're going to have  a table representation of all these models here   we need a table to handle rows so first of all  since we are not using identity manager we have   to create our own or customized identity manager  for ourself so let's quickly create a class and on   the class here I'm going to name it as system row  so this system rows is going to have only ID and   our name so we have system row ID and a name so we  have this we can just remove this and make this as public so it means going to have an ID  administrator or user any other r that the   administrator want to add and assign people to is  possible here now now let's save this and we also   have to create a table that going to handle user  row as soon as you assign um a user to a row it   must be updated or kept so anytime that we are  generating the token we can come in there and   un fet the user row and use it so we can create  a class to handle that so here we need an ID we   need um a row ID and also we need user ID so this  are the two tables that we need now when we are   done here we have to go to our server library and  this is going to be the data assess um layer now   that data assess layer see we have this appdb  contest and that is the name that I have given   to it as server Library it is a data assess layer  because it get interacted with the database and I   retrieve data and do a lot of stuff as well  so within the appdb context we need to also   create another two rows here is it two rows or  two table so let's create two tables so we have   them in here so system rows and our user row now  each is deriving from the respective model that we   created okay so we have this all right so we  are done with the model here we can now save   this but before we continue on if you haven't  subscribed you make sure you do that as well   and if you want to support this project as well  and want to buy me coffee you can do that check   the video description and the link is over there  you can also like this video and you also support   this video um as well okay so let's move on now we  have our model here created we now have to create   our repository which comprise of an interface  and an doation now this going to happen in the   server Library that's we're going to create our  repository in so let's go to the contract and   as you can see from theat we have have a contract  and implementation so in the contract which going   to handle all the implementations or all the  interfaces we create a new interface and I will   name it as I user account so this I user account  you want to have two method for user registration   and also for user login so we have this public and  you know we have to create a responses here and we   know we have um this mod that we need to add from  this um Base Library from the dto we have this so   let's see if we can add a to this place now when  you go to the base Library you can see from here   we have this dto and that's where we have this  register So within this we can right click on   dependencies and add project reference we need  to add this Base Library and it has been added   already so click on okay and our then cont period  we can include the name space of this so let's   see so in here we have to include a name space  for this that is from the base libraries. dto   this is the folder that we are looking and also  we need to create this uh responses we have the   general responses and also login responses so in  order to do that we have to create a folder and   I name it as responses we have it already so  we going to create models the first model is   going to be General responses model and this  is going to be um a record so we click on the   responses let's add a new class and I say General  response so in here we are going to have this as   a response so let me just P it here we have  response and it's a flag and it's a message   you can now save that aside from that we need to  also create login response which going to handle   token and and the refresh token in case um um  everything work we want to do handle that so   we have to also create one model for that and  you're going to name it as login response and   now in the this model we want to have a message  you want to have this um a flag a message token   and a refresh token so that is what you want  to have for this response now let's remove this okay so that what we have now let's go to  the interface and now we can add this to   the response and now this is done we need  to also create the implementation and you   can see we have this folder in here so you're  going to make it as user account repository and   let's quickly create a class and I handle that in  there so right click now let's add a class in here   and it's going to be user account repository  now within that it have to it has to inherit   from the interface that we created to our user  account and we have to implement the interface in here so when you check our up setting dojon  from the server section you know we have our   JWT section in there and we have to specify it  here so we have our connection the next thing   here is we need to specify our our JWT and this  the audience um the key and also the issuer these   are the sessions that we're going to be using for  our token generation so we have to put them here   so here I'm going to paste this here so you can  see we have this JWT section and this our key so   you can have a random key minimum is 16 and have  to get an issuer and the audience so you know the   issue is going to be the here we set the issue  and the audience to the same API address if you   want to have the port you go to the server go to  properties line settings and you're going to have   the port in here from where we have this HPS we  have the port as 7294 can just grab that go back   again and I'll change this good so we have our key  in here and we have our ISS and the audience now   in net 8 there is an eye options which can be used  to map this and this is a strong type it means   that when you make even an error here it's going  to Aller you to rectify before the application   can run and so let's try to um use that is a new  one in the 8 so let's see if we can integrate that   so in order to do that we are going to or we  have to create a folder and now to This Server   Library that's the data access we can just right  click on this create another folder Here and Now   name it as um help us or yeah let's say help it  now within this helper folder we also need to um create a class here and now let's name the  class to the name of the section here as   DWT section so we click on this let's add  a class JT section and now in that we need   to specify properties that we have in the app  setting. J so let's make here as nowo so when   you check this app setting you see we have um  key issuer and our audience we want to map it   so we must have the same name in here so we  go to the program.cs file from the server section and now in here we are going to  map this so we can do that from here and   we're going to say that builder. services.on  configure then JWT session this is a model   that we created we want to get a session name  as JWT session and I'll map the the key and   our it value to the property that we have here  respectively all right so once we've done this   we can now be using this anywhere in a models  or in a class that you're going to be created   let's have a look at the next one and what  we're going to talk about here is going to   be the interface implementation for the user  repository so let me close um the rest so save this okay so let's open the implementation  again so here what I'm going to do here is   we are going to inject it in here and  I'll start using it and it is not only   the um JWT section model that what we  going to inject we also need to inject   abdb contest class as well now with the  help of T version 12 you know what you   call as primary construct test so I'm  going to inject them here very simple one okay so let me just okay so very simple one  now control period I can just remove this an using   in here so you can see I'm using this eye options  and I passing the J section in here and I create   an instance of it so anytime that I call this  I'm going to have access to the the keys which   I have in the ass jent value so um let's see  first of all we're going to create an account   so you know we've injected abdb contest but let's  have a look first so when this register model is   null maybe you want to return something because  it is a best practice to um always check if mod   is n before you even make any um operation so  we check if it is null then we want to return   but in case it is not you want to find out and  check if the email already exist so in order to   do that you use we create a method that is a find  email or find user by email now in that method we   can specifi a very simple method which is going to  handle that for us so I'll put it down here and it   is it's an application User it's going to return  an application user so we're going to look through   the database AS application user and I search for  email and I return so we are saying that if it   is not equal to n meaning person is registered  already you want to return that but of in case   the person has registered or the person hasn't  registered then what are we going to do we want   to now save the user so how do we save the user  we have to create an instance of this application   user and we need to populate it the the property  that it has we need to specify model vales to it   here we need to specify application um full name  so let's make some edit in there we go to the   application itself from The Base Library where you  have this entity application user and here we can   make it as full name I thought I copied that I did  not so we can make this as full name definitely we   going to apply migration so don't worry and we are  you can see we create email um full name email and   password and at password we using this B cryp to  has a password and now we create this method as   add to database so this method is going to handle  this model and I'll add it to database and I'll   save it and it can also return the entity so let's  create that method down here so what we have this   this method is going to save the data and it is a  tax of T so it means you can pass in any model to   create a generic uh class that we are creating so  we add it to database and I reive changes and I   return entity of this tax of T So once you come  here this is solved so we add to database and   after we are done adding we're going to do here is  we're going to check and assign row so how do you   check and assign row let's see the first person to  register an an application here you want to check   create an admin rle and assign to that person and  this application going to handle one ad trator   initially so the first person to register going  to be in admin the rest are going to be user as   administrator you can assign another row to people  maybe um when we are done okay so this is going to   be the default one and later on the admin can  assign multiple roles and even change the row   of a user in here that's going to be identity  manager I'm going to handle that as well okay   so here in order to handle in order to um save  the uh the admin test and also the user test you   have to create as a constant so you're not passing  raw or raw string in here maybe we might have it   in an in a wrong way okay so it's better that we  create a class and on this class let's make this   as constants so we can just go to this place where  we have our helper folder we can just right click   on add this make it as constant okay so this going  to handle all our constant um properties and now   in here we want to have a static method for this  we have our admin and our user for admin user so   anytime that we need admin user we not going to  type it maybe you can type it and make here as   lower case as a and in that case it's going to  have an error in it okay if you don't if you do   not ignore case so it's better that you put it in  the constant like this anytime that you want you   can call this and the value Remains the Same let's  save that and we are checking from here that if we   have an admin row then skip it in case you do not  then create an admin row and the current person   assign the person to an admin row okay so we call  the same at database method which is going to add   the data and I return the entity and I assign the  row ID to the return entity in here the user ID   is a return type and then the row ID is also the  return entity remember that here we are creating   admin row and it's going to return an entity so  we can have an ID here and now this user ID also   going to return an entity when you call this add  to database to the application user we can also   have the current user ID in here the reason why  we are having this underline is we did not make   this as public or static class so this must be a  static because we do not want to create multiple   instances create it once and I'll start using it  everywhere okay so this must okay so it's saying   that it's an ambiguous reference between the  helper constant and Visual Basic constant okay   so maybe we can include the name space for this  control period we not using this we want to to use   a server constants okay so this what you want  to use all right so we have it stored in here   control period you can remove necessary ones okay  so once you do that this going to start the admin   but in case an admin rule has been created already  meaning admin has been registered then you know   what you're going to do we are going to check and  add the user so admin is registered check if user   is not created create it and add a person if the  US also created already then add a person to it so   we see we have find the system row and check if we  have user in there if um row it is null then add   it add it so here we have to add the user not the  admin okay so constant. user we add user and now also we also assign the rule over here the r  ID and we have the user ID as well so the same   thing that we also running from the user that  row aside from that we have to add it to the   database meaning if the user it is if the user  row is created already then add a pressing do   not create so it's going to skip this it's not  going to create a row again it's going to skip   it and I'll add the user um here and assign the  row return account created the very simple one   so this is what we are doing now we can save  this and what we going to do here is let's um   register this in the program CS file by creating  dependency injection in this so program. CS file and now let's register this here so  after registering this in here we need to   contr period let's see if we can include this  user account repository it is coming from this   server library that data access layer so  if I right click on the dependency let's   see if we've added that package reference  Bas server Library okay so let's include it here so using server Library dot repositories  okay so let's see user account let's Che the   name in here user account repository that is a  the name that you create is inheriting from this   user account repository so we can copy this we  check it in here let's P it here and now what is   it saying this canot be found so let's see why  it is not found we need a in here dot so dot implementation okay so we have the implementation  and that is where this model is found now when   you check here this is going to be an internal  so we need to make this as public so it can be   access globally and this supposed to yes so we  have it set now let's create our controller to   handle this so let's quickly go to solution now  in the controller let's open this right click   let's add a new one and it's going to be an API  empty controller and our this we're going to name   this as an authentication controller so here let  me this now with this authentication controller   we want to inject our the interf contract  as a primary constractor and in that for   the registration you want to create one endpoint  and I name it as registration and you can see you   pass this a payload you call the account server.  create async and I return the response so once   we have this let's see this build this again and  I perform migration to get the the taable to the   model recently created then we run the application  and test the registration or the account session so this is done let's add a  database so let's add migration to   this so say add- migration  let's do it again add that migration so add um rows let's that's going to be   the name let's choose the server  Library data asset layer let's run it while this has finished  running we are going to update the database so this is also done as you can see from here  it is done so we can now run this application   and I'll see what we have now okay so the API is  ready now let's click on register and I'll try   to create an account in here so let's maintain  what we have user at example.com and then the   password is same we have full name my string as  well and confirm password to the same so you see   we have to arrange it well but let's say when  when you're working with the UI we can arrange   them well in the based on the form that you're  going to create all right so once we have this   we are going to execute this the first person to  register the app it is it is this one so here we   must have a row as an administrator as an admin  row and let's see so you can see from here that   account created let's add one more so user one  and this has to be assigned with a user row so   this account created let's say this is the same  thing if I click on execute you must have user   registered already and maybe we can specify to  let's say execute it and our account created if   I click on it again user registered already so  user cannot register with the same email twice   let's go to the database and now and I'll check  and see if it has been added in here so this is   going to be the application user if I refresh this  let's you must have three records now and that's   what we have in here user user one and user two  these are the respective password that we it has   been created for us using the bcrypt aside from  that when you check the system rows and two rows   has to be created admin and our user admin is one  and our user is two when you go to user row when   you refresh it you must have rules assigned to the  various users so you can see ID one Row one that's   a user one so Row one is administrator user one  is a user now row I2 is is a user right Row one   is an admin now row ID of two is a user user ID  of two it is a user and also user one and a user   two so only one person has assigned as admin the  rest has been assigned as what row ID of two and   that is the um user user role good so this is  working now let's handle the log so that's the   person logs in we can now check verify and now  generate token as so add a reference token to it   let's go to the interface and I add one more you  know we have it already so we go to quickly to the   implementation let's see there is a create async  and now here's a sign in async so let's handle this so in here the first thing that we do is  we we check if it is now then return this must   be an async I believe remember that aside from  that you're going to find the user and see if   the US email is found database if it is found  then we want to continue but in case it is not   then want to return user not found in case it  is found we want to verify the user's password   that is coming in take note that we have the  password already so we want to check it using   the same b.net they want to verify the password  we passing the current password now the database   password and this password going to be possible  as soon as the user is found in here we can the   present password in case they do not match that  is when returns for it means they do not match   you want to return email or password not valid  in case it is valid we want to get the row so   get the user Row from the user row table aside  from getting the row we want to get the row name   you know user row has only the row ID and the  user ID so once you have the user ID in there   you can retrieve the row and now you can find the  row name from the system Row in here once you do   that you can now generate a token and generate  a refresh token by passing in the application   user object that we have and also we can pass in  the row to get it created so we call two method   generate token you pass in this application  user which is an instance of this app user we   have this row name also as well so we adding  these two properties as a payload then we can   now generate it and this is returning string this  Al return a string and I can see from here return   a login response where specify the GWT token so  the refresh token in here let's generate the tube   method so what we're going to do here is first  we're going to create a method to generate the   token and as you know already this is what we've  been doing since you application user and now we   get a security key from this config value. key  I hope you remember now so they you're not using   configuration then you pass in in the section  of the the app setting rather I want to use the   eye option object that you created then we also  do same to the issuer we specify our issuer and   also our audience okay these are our claims that  we have we want to send a person's ID the person's   name email and a row so these are the ones that  you're going to use to authenticate the user   based on the app that the person is registering if  register registers and the person is administrator   you want to show all features if the person is  and the manager or any other user you want to   hide some and I'll show some we can do that using  this row so that's what we are adding here after   that you want to return the token in the form of  a string and that's what this is doing now from   the refresh token we going to Generate random  numbers convert to 64 string and our return so   in to do that just one line of code is going to  help us handle this peacefully without without   having any issue with it so can see we use this  r number and this is coming from cryptography uh   that security. cryptography so we have to include  that we get a bite of a 64 string then you want   to return as a refresh token this is the simple  thing that we are doing in here let's go to the   controller in here and also specify our route in  for this login you go to the controller the next   one here is specify the route is it the route  the end point okay so it's a login user and now   see if it is not returned but in case it is not  then call this sign in async um interface and   also return the user let's save this and let's  see let's um run application again to check it out so this is also ready now let's check this  out if I click on try this out we have the same   user which is an administrator now let's log  in but before we log in we want to check the   road as well token that you're going to have  you want to verify from JW 2.io to check if   this token is valid and what what are the  claims that this token have we want to um   check it up and see so let's see from this user  normally we know this an admistrator isn't it now   let's click on execute so you have the token  generated and our refresh token added as well   which going to come as a response as a login  a response so let's wait patiently for this okay so we have our token ready you can see we  have the flag as through message here and this   are token we have a refresh token in here let's  grab this token from this section and you know   this is the administrator we know already because  of the email that we created so let's say from gt. let's clear this and now let's paste our own  token that we copied now let's check it out you   can see see we have the name identified the ID  here it is one the name here it is what string   email is user at email example.com let's come to  the claims you can see we have an admin as a row   this expired date we adding one day there is an  issuer and that is an audience so see we have an   admin row here let's have a look the next one  here we're going to check for the user and see   if um this also going to give us the user or admin  row let let's grab same then let's check this out   and I you see this also user there is a email that  is a name and that is an ID so our authentication   system is working we can generate refresh token we  can also generate um our wwt token as well okay so   now that you have this working let's implement  the refresh token um definition you know we have   the refresh token key here but you can do nothing  with this key yet so we have to implement it now   there is the overview of this refresh token when  the user logs in a token and a refresh token will   be generated to the user the user is going to keep  it in the local storage or the cookie storage when   the user Make a request and added this token to  the header of an HTTP client from the Blazer web   assembly the server is going to authenticate the  user and I'll give the user an access but when   the token expired the US the server is going to  issue 401 status code meaning unauthorized when   that happened then the client will send the  refresh token to the server the server takes   in the refresh token verify from the small table  that has a refresh token and check if it is found   then it calls the token generation method so the  refresh token generation method to generate a new   token and a refresh token it update the refresh  token to the table and I'll send the token to   the user so the server does not save the token it  saves only refresh token because when the request   is coming in the token has everything that the  server needs to authenticate so it doesn't need   to check from in database to um make sure it  is what he created or not so it is stateless   so anything that comes in from the client must  have all the necessary um information that the   server will see get retrieve and authenticate that  specific client I believe this is clear now let's   have this done so I'm going to close this and we  have to create a class that's we're going to use   to handle the token in a small database table  so let's do that in the entities folder let's   add a new class and that is a refresh token info  in that you want to have three method in here so   it's going to be a public as you know we want to  have ID the user ID and the um token so this is a   token and that is a um user ID this token here  is not a GWT token rather it's a refresh token   because it is limited to the refresh token here  okay so once we have this what we can do again is   let's say this let's go to the appdb contest class  and I'll add the road a table to the database so   we go to the business layer and here you can see  we have this appdb contest we are going to or we   have to add method in here so we can just make a  duplicate of this and I'll change it to this app   DB contest so can see we have here refresh token  INF for and that is the table name you have three   properties in here and that's going to have three  fields or columns let's save this now let's create   our data transfer object that's a dto so with the  dto you're going to name it as refresh token it   let's do that in the Base Library so come here to  the base library and in here you're going to have   our dto so right click let's add a new class to  this it's going to be refresh token now in this   you're going to have only one property that is  what the user going to post it anytime the token   expired and this method has to provided or has  to provide the server with the token as a refresh   token so we save that after doing this let's go  to the I user account interface and now in that   contract file we need to add one method and that  is known as a refresh token so it is returning a   login response because going to return um a  token and then the refresh token as well so   we passing this refresh token which has only  one property so far we save that we go to the   implementation in the user account repository and  in here we have to implement this control period   let's implement the interface in here so when it  come down here we have the refresh token here now   this what you're going to do the first time the  user creates an account or the first time the   user logs into the account the refes token going  to be generated has to be kept so we have to go   to the edit the sign method and I'll keep the  refesh token which was released the first time   the user created an account okay then later on  when the refresh token is been made it goes to   database first get a token and I'll update it  and I return the new token to the user so let's   have that done and to do that there's a method  which has been created in here and we don't want   to repeat it so we want to extract this method  into this uh statement into a method so we can   be using them um um um normally can using them  more often so because you're going to need some   of this method in here so you want to exract  this method and then put them here so put them here so we have these three methods the first one  here it is that is find user row so this going to   get the user row now this Al going to get the  user row name so here you going to provide only   user ID and I to get the specific user because  you know it is making a sech from this user Road   table and now here we want to find the row name  so the row that we have created we want to find   the name of it this user row here this user row  comprises of if I pep this definition you could   say it has only the user row ID and the user  ID so once you have access to the row ID we can   now go to the row system rows and then find the  specific row name so if I peip on this you see   we have the row ID and I have the name so we can  now find the name by looking through and getting   this row ID okay so this what we doing now we  can make some slight changes here whilst you're   making a search out of this to get the r ID we  can just remove it since we have a base class   that we can be calling it from so this what we  can do from this row row name we can just call   find row name call this method and that is it we  can also do same to the find um user row so with   this instead of writing this we've created one  base class and we have to use it here so a wait   find row you pass an application um user in here  so once you've extracted this method that we can   also be using them in here so in the refresh token  what are we to do or what are we going to do first   first you want to check if the model here it is  null then you want to return because you want to   check maybe it's not going to be null but let's  say let's check First for security sake okay so   let's check it if it is now then we don't want to  even Pro proceed at all or you want to return in   case it is not or it is not it is not empty then  let's find a refresh token in the token info table   so make a search from the refresh token info table  and I get a token which has the same um key or ID   or the same string as what is coming in in case  it is found what is the next thing to do we want   to get the user info so there specific user who  has access to this refresh token and since this   table has a token user user ID if you check this  token info it has let's see this token info it has   user ID so we can now make a search from this and  I get this user ID so we get from the application   user and find the user ID here in case this is  found then what are we going to do we want to   Now find the row get the row name and also um call  the token and I refresh token again so you can see   that this method we've created them once and then  we are seing them again that's the best practice   so far now aside from that we need to update the  we need to now check if the refresh token table   contains that specific user info because as soon  as the user logs in the info must be added there   that's a token or the fresh token so it's going  to make a search from it in case it is there then   you want to return something like if it is there  then this what you want to do you want to update   it and I return so that we keep the fresh token  we keep the current one and discard the old one   so see we are setting the the the old token to  the new one that has been created in here then   save changes I told you earlier that we are not  going to save the GWT you don't have to save it   the server is stateless it doesn't it doesn't have  to save any info about this token before it gets   recognized the specific client no it doesn't  have to do with that so we don't want to waste   our memory or our database storage so we have to  St a refresh token and I return this to the user   okay so now that we have this implemented let's  go to our controller and we are going to have   our refresh token endpoint and now this is going  to be a post whereby us has to post this to this   endpoint and I call this service and um try to get  a refresh token so that's what this is doing and   let's save this and the next to do here is we need  to add database migration now adding the is going   to help us add a new table that we have created to  the database so let's first run this let's build a solution so this is done let's add migration to this so down here I'm going to  say that add- migration then I'm   going to say add rules no add token in for table so let's update a database so this is done now we can  now run this application and check it out so this is ready you can see we have a  refresh token in here now if I click on this   and try this out and it is asking a refresh token  passing anything as a refresh token let's click   on execute it's going to search with the database  table and now find if you could find this in case   it couldn't it's going to tell you some info  in here so refresh token is required so it   means what you uh specify it is not a required  token it is not a valid one okay so let's log   in first so we can have access to the Token  so click on execute so this refresh token is   going to be called by the user it's going to be  called by the application itself so computer to   computer communication that is what this refresh  token is going to do so maybe this what you can   actually do you can also add date to the refresh  token so that at least when there's an incoming   of ref token you can then check and see if it  has expired or not okay if it hasn't expired   you can just return something to the user and if  it has expired then you call a new token you can   modify it or you can customize it to see it  where you want but this what is going to fit   what we going to do okay so let's maintain this  we have our token so let's grab our fresh token   in here now let's call this refresh token Endo  so let's paste this and now let's execute this   so now let's check this token the refresh token  ends with DWG right let's see the new one the new   one ansers so you see okay so you have a fresh  token required the the reason is when you check   our code maybe I believe you saw this already so  let's see we have a refresh token and token in   here okay so we get this we call this refresh  token a sync when you go to this user account   repository first it comes in here and now we  are going to make a search from this and now   check if token is there right so token won't be  there because when we logging in we did not save   it to the the database table so we have to um do  that so we can do that from this session when we   log in so let me just minimize this so here see  before we return this response to the user we   want to save this refresh token that we have to  the database table okay so what are you going to do so here first of all you want to find if the  refresh token is found if the user is found in   the refresh looking table okay so if the user  is found then we want to check and I'll update   it so let's see what we're doing so we are saying  that if the user here it is not now if the user   is found then we want to update the token to the  current refresh token that has been created here   maybe the user can log in today and I log out  the same time and I try to loging at the same   time the next day some users as soon as they  are done with what you're doing they want to   log out they don't want to keep the session  open they want to log out so when they log   out this refresh token is still there it's not  going to be um um um deleted so when the person   tries to log in again it's not going to check  if the user in there already if the person has   a refresh to there then update to the current  the new one coming save changes but in case it   is not then you want to add a new one you want  to add the current token if the first time of   you loging in you want to add it to database then  I return it to the user so this what you want to   do or you should we should have done this to  save the the info to the table now let's say   and now we can run this and for now trust me  don't be any issue here again let's check it out so let's log in here try this  out and we have this user so let's execute so let's check the response we have a refresh  token and now let's copy this let's go to the   refresh token here and I'll paste this token so  before that let's click on execute this and I see   the response so refresh toen is required that's  fine now let's space this execute this so let's   check this token see we have a token refresh  successful y that is a current token it ends   with es s the current Tok refresh token ends with  EQ let's check this old one this ends with BQ so   the first one current one is the EQ and this one  is BQ the first token is es and I can see this one   is one Z so you can see that we have a different  token and different refresh token all together   when a request is being sent all made from the  client to the server and that's what the server   is doing in here so this means that we have system  done both our GWT token and our fresh token plus   our Rose also has been assigned and now added to  the Token so the next one here is going to be um   trying to consume this into the the client section  that's going the Blazer we assembly let me close   all the tabs in here so we can have a fresh view  to handle this now let's go to solution Explorer   we have our client service we have all our project  added now we have this data access layer so this   contains all the mechanism the contract and the  repositories whereby you can have access to the   database this going to handle the client library  is going to handle all services related to the   client so what we're going to do here is after  creating this Services we go to the client and we   consume the service from this client Library okay  so that's what we are doing now before we jump   right to this we have to install some packages  to this client and now it Library that's going   to be the service project so let's do that I'm  going to click on this client so and maybe I'll   just unload this so once I have this item group I  have these packages that I need to include or you   and I need to include and that is let me put them  here so we have to install Blazer local storage   we have to install microsoft. ASP net. component.  authorization we need to also install web assembly   is there already so we don't need that it is there  we need three packages and we need microsoft.   extension. HTP so we need to install this packages  so let's save it so after saving this what we're   going to do here is go to solution then right  click on the client and I click on reload project   with dependencies this going to update all the  necessary uh links that we added the packages   that we here if you don't want to do this you  can just copy this the name of the package here   you go to the same solution open the client and  right click on dependencies go to manage n get packages and now in here you can just space it  to the browse Tab and I try to install them now   since I did that I have them installed as you  can see over here let's also navigate to the   client project that is the the the service  project so let's go to solution and I can   see we have this a client Library so I click on  this and maybe we can just go to manage new get   packages now in here we can install this system.  models. token let's install this package from here aside from this we also need to install   the same local story from the  blade back recent so let's do that and that is this one so let's install  this package um to the client project as well okay so we have our packages installed  and the next thing to do here is to create   the service so go to solution and I can  see let me minimize all this okay so you   can see from the client Library open  it see we have Services folder click   on it and you have this contract  we need to create an interface for this so we need to choose an interface and  the name of this interface going to be our   user account service now this user account  service going to handle let's say let's for   testing purpose I want us to um add this you're  going to be testing this later on we're going   to modify this so for now let's have this method  in here we have our general response to control   period Let's see we have we have to link the  reference to this remember that we we created   this General respond for registration and we did  that for the login okay so we have this now let's see so let's go to the base library and I want  to check the responses we have a general response   method here and it's a public record and we  have the login response also the same public   record so these are the model that we are adding  as a response now once we have this let's see we   have also same so using responses okay and now  here is a un weather forecast so this for the   testing purpose so you know when you check  the API when check the server it will have a   default WEA forecast so we are going to move  this then put this to the dto actually when   we are done we're going to remove this you're  using this for a test purpose you put this in   here now let's change the name space yes the name  space dtoo now let's put it to the same with that   forecast dto so that's the name space in here  okay now when you go to the weather forecast we   can now make change in there so when you go to  the controller and you can see we are now using   from The Base Library so we need to include the  link in here so control period we have to include this so let's use okay so this is solved  so we have our interface in here we want   to create as create an account sign in and also  get a refresh token which is handling with this   refresh token as a payload to be posted this has  only one property in it that's a token and this   is where we're going to pass in our refresh token  um when we have a 401 that is and not authorized   okay so we have this for testing purpose now  let's go in there and create implementation for this so you know do you know where you're going  to create implementation yes I believe you do   when you check we have implementation folder to  the service project and that is where we going   to have all our implementations in here there is  going to be a class and the name is going to be   user account service and it's going to inherit  from the interface that is the I user account service so here contol period we have to  include the contract name space this must   be public and we have to extract or Implement  all the interfaces the four interfaces that   we created to control period you can see  let's Implement all interfaces so we have   four interfaces here for get weather forecast  I want to put this at the last because when we   are done we're going to remove this so this one  will be the last one so we have registration we   have login and we have um signing a sync so  this is going to be signing okay so I want to   rearrange it to well registration comes  in then we have signning before refresh token you know with this what you're going to  do here is with the create and the signning and   also refresh token you're going to making an  API call and now we are in the client project   so it means that we going to having access to  the local storage of the browser because when   the user logs in and a token and a refresh token  is being retrieved the best or the good practice   way is to keep the token now where going to keep  it you can keep it in the either a cookie or um   a local storage this time we're going to use  local storage to save the token and also the   refresh token so we need a model to handle the  token and the refresh token after that we need   a class whereby we can inject it or register that  class so we can be injecting into other component   or other classes so we can have access to the  Token from the local storage so anytime that we   call that service you can retrieve you can update  you can remove the item from local storage aside   from that you need to also get an HTP client that  client we have to have it um we have to add the   token to that client header before a request is  being made but you know when you create or when   you sign in this time around the header has no  authorization because we're going to make it   as allow Anonymous on top of the controller so  if the user triy to create an account the user   doesn't need to be authenticated before he can  perform that signing to same and now for the   refresh token the user must log in and the user  must receive the refresh token this refresh token   must be kept and now anytime that you want to make  a refresh token we have to go to a local storage   retrieve the refresh token and I make a post in  an API and I retrieve a new token and I refresh   press token and I'll do it again so that's what  this is going to handle now let's have a model   to handle the the method or to handle the token  and the refresh token which is going to be kept   in the client local storage so with this we're  going to create a class we're going to name this   class as user session in the dto so let's put the  dto here let's add this class as user s now this   is going to handle only two properties that's  going to be the token and the refresh token   so we have token and the refresh token this must  be public we don't want to store any information   again onto the client's browser because you  know the client can go to the local storage   and un view all the information over there so we  don't want to save some crucial information in   there what we need here is the token and the  refresh token is that Tres to make an change   to any of the token May the it means that the  authenticated the authentication State here is   going to be um damaged because the token won't be  won't correspond to what we have in the database   especially that is going to be the refresh token  so that's what we are doing let's close all this   let's save that so here since we are going to be  serializing analizing modus we want to create a   separate um static class to handle that so in  the client's Library let's create one folder to   this we're going to name this as helpers mine is  help us but maybe you can also change it to what   you think is suitable for your project so here  I'm going to create this class and as going to   be realizations now this is going to be a stting  class and now in that class you're going to have this okay so we have this ization and we're  going toize this object of T so it going to   be a generic so any mod that we pass in we  canalize that and aside from that we also   dualizing this um the same model here and at  the end of the day there going to be a list   in case you want to have a list of model we can  also visualize the list of model in here so for   now we're going to concentrate on the first two  later I to talk about the last one so here we can   control period remove all necessary using okay  so we have this ration model done the next we're   going to create here is going to be um the local  storage service now the local storage service   is going to handle all local storage CR remove  get and also um set okay so let's do that from   the same helper now you know that this this a  static class so it means eight instance going   to be created once and now we can U be using it  often now with this you're not going to make it   as a static because this going to handle with  an async so let's have that also created let's   add a new class in here and this is going  to be um local storage service that's the   name that I'm giving to this in that we want to  include a local storage service this must be a public we can remove all this then in here we also want to  have a local storage service we   create our local storage key here  let me remove the things we have a duplication okay so we have our loc this is  the key and this is the key that you're going   to um use in the local storage then here get  token so um local storage. get item as async   we pass in the key then here set token so this  is going to be the string of items to come here   then we have the key already we specify the  key and now in here we specify the item then   remove token we get the the key here and I  remove from the local storage so that's what   it's going to do it's going to set get and now  remove okay now the next model that we need to   create here it is to get an HTTP client now this  get HTTP client we are going to fetch the data   going to fetch data from the local stage and  append it to the header of an HTTP client so   anytime that we call the HTTP client it's going  to get the local storage data check if it has it   um visualize it and I append it to the client or  the header of an HTP client before it makes it a   request okay so let's quickly also create that  and now with this I'm going to make it as get   HTTP client so with the same helper I'm going to  create it in here get HTTP client now they since   we install package of microsoft. extension.  HTP we can now use HTTP client Factory okay   so in that factory we can create our own client  and give it a specific or specified name this   must be a public and this also won't be a static  because going to be a task we are going to first create let's have our method in  here now the first method that we   are creating here is when to check this  let me remove this here to clear all the spaces okay let me just include this to okay so control period did we install this  okay so we have to install this package um to   this quickly let's do that so I click on  the that's the client Library that's a   service project go to man get packages  and now in here we need to install Microsoft do extensions HTTP so we need to install this package okay so now this is installed let's come here  control period and now you can see it is gone   now so you can see we are injecting this HTP  client Factory and also we are injecting the   local storage service that we created aside from  that we have a header key as authorization we want   to get a private HTP client now what are this  private going to do it's going to get you see   ref first create a client in here then that client  that we are creating we are getting get token from   this local storage service this going to return  the string so we check if string is null it means   that the user has not log in meaning there's no  token found in a local storage I want to return   a client this time is going to be a new client  because here authorization header has not been   added so it's just a normal client but in case it  is there we want to disiz it into a user session   which is going to be the token and the refresh  token and I we also check if it is now we want   to return but this just check purpose it is not  going to be null because as soon as it found it   you're going to have a data in there that's a  value in there but let's say maybe if there's   some issue here we have it as now we want to also  check it but in case it is not then you see we are   adding theorization header to the client so we  are say to new system. HSP header doation value   and then in here we specifying the bearer and now  we specify the realiz or token we can extract the   token from it so we add a token to the header and  after doing that you want to return the client so   this client here is going to have header appended  so this head client here is different from this   client here this client here has no authorization  added but this has it now this a get public HP   client so here is going to check maybe if header  it is there this header key going to remove it   because with this we don't want to add any header  this is for a public endpoint like create um or   register account login and even refresh token it's  a public one so we don't need a header attach in   the client before we can make a request to it and  that is what this is doing so it's going to check   if it's there going to remove it then it's going  to return a new client here with no authorization   header added so this all we are doing anytime that  we call this method we can have two method in here   get public HTP client and also get a private HTTP  key client so now that we have this we can now go   to the implementation and I'll start doing some  things in it that is the user account service so   user account service so first of all we're going  to do here from the create asnc what are we going   to do we have to inject the get GTP client here so  let's inject this after injecting we want to just create URL and that's going to be the public  constant but this what we're going to be using   for the authentication so it's better that we put  here in order not to um be typing typing to skip   typos so we can just put it to one line here and  we can be using the alt URL so what we're going   to do here is first you want to check we can  even check if us model is now then R to return   by here when you use data notation that the form  validation is going to check so maybe we can check   it but for now let's skip that so we can see we  are Crea an instance of this public HTTP client   so this public here has no authorization header  attached and we making a post this must be an   async now with the post that you're making you  could see we passing the all URL and now the end   point is going to be the register we pass in the  user in here we check if the status code is not   equal to success then you want to return error  Ur but in case it is you want to return content   you want to read the content and in the form of  a general response which has a Boolean as a flag   and also a message as a response from the process  and that's going to handle the create async let's   do same for the signing async too so with this two  we're going to have create the same public client   and this must be an ASN I believe you know since  it's going to be a task then here I return loging   response so we check this route in here specify  with the the payload and I will read the response   here in the form of login response okay now we're  going to test it with the refresh token we come   back to this later on but with the get weather  forecast maybe we can and just also create the   same public one but this time this going to be  a private so this will be a private because you   know we are going to decorate this weight and  authorize attribute to the end point so let's   make this as private and now in here let's go to  solution we check the server and now the weather   forecast controller let's make this as an API SL  controller name and now with this we can specify   this as authorized and I even we can add I want  remove this so we can have a get method and now   this you want to have authorize authorize and  now in here let's specify rules as only admin   so only admin can have access to this you can  also change this to user okay but for testing   purpose you're going to make it an admin later  on you can also switch to user and now test it   in the NC so we have this set in here let's  go back to the user account service so here   we create a private HTTP client which is going  to add token to the header and now after that   you can make a call from this and I return this  coming with an array of list in here okay so let's   go to the pages in here and let's try to modify  that right but before we modify this in the the   razor component we have to create a custom  authentication State provider what are this   going to do the custom oate provider is going to  handle all user um authentications when switching   from when switching between pages so moving from  page one to page two is going to check it is the   duty of this custom oate provider to check if the  US authenticated or not and it is authenticated   then it's going to use this authorized component  to hide and un show um to show features that you   want to show based on the role that we have added  to the user so it is very important in this so we   have to create the custom aate provider and we're  going to put that in the same helpers folder from   the client Library so in the client Library you  can see we have this a helper let me close the   server now the same helper let's right click  on this let's add a new class and I will say   custom authentication State provider let's add  it now after adding this house to this going to   be a public I believe you know that isn't it and  this going to H from Custom authentication State   provider so this is an inbu from the component  authorization and it has one abstract class that   we can Implement in here so State provider  and it is saying Okay so let's see control period so so we have no method meaning  that we have not installed this component   do authorization let's write to include the  name space here okay so we haven't installed   that it means you have to install  this package in here so let's grab this let's go to solution now  from this client library right   click on this and now manage new get  packages and let's install this package here yes so we have to install this now when we go back to the custom State we  have it now we can Implement an abstract class   from this and that is a get authentication State  Asing so anytime you are switching between page   one to page two this method is going to be called  so anytime that you move from one page to the next   page this method will be called so that is where  it's going to check if the is authenticated or not   okay so let's see now that we have this what can  we do here we have our local storage um service   created which get toen from the local storage and  we also have a calization where we canalize and   naturalize model and we also we have our get HTP  client which we can retrieve public and private   HP client with header and with no header so what  do here we are going to inject them and I'll start   using them here so first let's inject the local  storage service because we're going to retrieve   token from local storage service we can do that  from this section so local storage service then   we create an instance of this the first thing is  going to create Anonymous as a claim principal   and now it's going to have with no identity as you  can see now we check if we want to get token Str   from the local storage initially so anytime they  page load check communicate to local storage and   get the token this must be an async in the form  of a string so we are checking if token here it   is null meaning user is not registered they want  to tell the app that this user is not registered   so you want to return TX from results New  authentication state with KN any mod you   want to do that but in case the user here this  token is found what can we do we are going to   dualize this token so first let thisiz it into  model so into this user session model and now   we also going to check if this model is null then  what are you going to do you want to also do same   although it is not but it is good that we check  it check it out now the next thing this after   distalizing it we also going to um decrypt the  token so how can we decrypt the token we have   to because the token that we create comprise of  the claims we want to decrypto can retrieve all   claims and these are the claim that we need to  set into this authentication State provider so   we want to create a method here to decrypt this  token you passing the token in here then after   decrypting the token this is going to return with  the get user claim so this claim in case it is in   case this claims here it is null you want to also  return mod as user it is authenticated so anytime   that returns no it us is authenticated it want  to return um now or there Anonymous to the user   and that nymous here is an is a new instance  of claim identity which tells the user that   which tell the component that current user it is  not registered or it's not authenticated okay so   we need to create this decrypt token now the decp  token going to we're going to decp the Token that   we have in here so we need to create a private  method to handle that but before we do that we   um let's also add the next method to handle it  let's say after after we've retrieve the claims   in here what we're going to do here is once  you have the claims we are going to set the   claims and I return it as a claim principal  so after return the claim principal then we   going to pass it to the authenication state  and at this time around we going to return   the same tax from results and now we passing this  claim principal so this is going to tell the app   that the user is authenticated it is no manous  rather it's authenticated because you have the   claims in here let's define this to um General  models here now the first one here is a decrypt token let's have it down here so what are we  doing this is a private static custom user   claims this customizer claim is the model that we  need to create so quickly let's get this created   and let's create that in the user dto so that's  going to be the The Base Library which contains   all the models and the dto so so let's add a new  class and this going to be a custom user claims   now this custom user claims going to handle few  properties and it's going to be a record type so   let's grab this and in here we are just having an  ID name email and a row so this is all we need we   need a name ID email and a row for this token so  this is what we're going to use to authenticate   the user this is a token these are claims not  token these are claims that we set during the   authentication or during token formation so if  I could remind you let's go to the the data set   layer that is a server library now you can  see from the repository and implementation   folder you can see we have this user account  repository and now when it gets to this create   a sync that is a login async we are creating  claims now what where are this claims let's see let's see from this generate token  you can see from the generate token we   are creating these claims we have an ID we  have name email and a row so the same token   the same claims is what we are decrypting to  retrieve so we are retrieving them in the user   service no that the custom oate you see we  are retrieving the same user ID name email   and a row so create it in the server and I  retrieve them in the client that's what we   are doing so in case you are checking if this  is null then you want to return new instance   of this but in case it is not then you want to  get a token um decrypt it read the claims from   it and I retrieve all user ID name email row and  I return a new custom since the record type we   can specify this as a parameter to this method  and that's what this user claim is going to do   so here we have this user claim as an object  once we have this model here we are going to   set this model into the set claims principal so  let's also handle that set claim principal uh method we also create another private method in  here and this going to return a claim principal   and here it is it is as accepting this as  a payload this a model that we accepting it   here so this is a custom user claim and that is  what we are passing here so the output of this   decrypt token is going to be an input of this uh  method uh here that is a get claim so this going   to set the claim to this claim principal and  it's going to return as you can see from it's   going to return a new claim principal with  this um claims in it so we have the ID the   name the email and then the r now we give the  name here as GWT meaning GWT authentication and   aside from that we can save this so that's what  we are doing so we are getting data from local   storage de crypting it and now we digitalize  the token we get the claims in it set to the   claim princip now return that so anytime  the page loads or navigate from one page   to another this method is going to be called  all the time but of in case the user tries   to log in what can we do we want to Now set a  token to loc reg so call this set claims and   now um I'm set the claims to token I refresh  the page okay so we want to handle that in here so this method is not going to be private  because you're going to be calling this outside   the scope of this so we're going to make it  as public and I will say public asent task and   update authentication States we pass the user  session as the refresh token and the token and   aside from that we check we create a new instance  of this claim now here we check if token is null   it's not equal to null and US session also user  session refresh token is not equal to null so we   are checking from this if it is not equal to  null then we want to serialize it as you can   see weiz into a string then we set to the Token  to the local storage see we have set token local   storage serv. set token we passing the string  in here and also we want to get all user claim   so we deip the to token that is coming in and we  set to the claim so the claim that we created an   instan in here we call the set claims to return  a new claim with now with um a new claims which   has retrieved the claims from the token and now  set it aside from that we call the not notify   authentication State change then we pass in  the claim that we have created in here okay   but in case this user session it is n it tells  you that maybe the user want to remove or want   to log out so if the person wants to log out  then we still call this local story service.   remove token then notify authentication State  change so after the token has been removed this   going to get reloaded as soon as this page um  this component get refreshed check here it's   going to come to this and I get the token from  local storage in case it is null there going to   return anonymous mean the user is not registered  so that's what we are doing for this custom or state so the next to do here is we have to  register the services that we have created   so in order to do that let's go to the clients  and now we go to program.cs file and in here   let's register the services here so we are  using this authorization call and now we add   this Blazer local storage since we installed  Blazer local storage we also want to register   this getp client so we can inject it as we've  done Ru it to local storage and now we also um   create pen injection between this oate and the  custom that we created so from that you know   we have this user account interface and we have  eight implementation service we also um register that the next thing to do here here is in  order for this client which has a different   port to communicate with the server which  also has a different port we have to um   register Court okay so cour will help it to  communicate from the client to the API so in   here to handle that we go to the server first  then where from the server that is it is over   here now let's go to the properties let's  go to line settings and you know from here   we have from https since our app is rying on  https we want to grab this okay now let's go   to the program. CSR from the client so this is  the client now in here inste of this bet. host   environment. Bas address we want to remove this  and now specify our own okay so in here let's   add the first slide like this so it means the  Base address going to be the API all right now   let's go to the API 2 that's going to be the  server program CS file and also will handle   that so we go to the server program.cs  file now in here we have to add calls to this so in here too we going to add the  course build services. add course and now   here we give it a name as maybe allow Blazer  web assembly okay so allow Blazer assembly and   now here we need to configure some options  with this so here's going to be the the end   point for this Blazer so to get the the the  URL or the address we also go to the client   and I go to properties and you know from the  L settings from the atps you know it is 7239   so let's grab that let's go in there and I'll  change it in here so from for htps it is 7239   and also when you check from the HTTP it is it  is 5245 so we can also grab that and then make   can change 5245 but we are running on https  so there's no need for us to even do this but   in case you want to run on HTTP then you have  to include this as well then allow any method   and any head know allow credential so that the  authentication section or auor section can be   added and I'll send it to with an API okay so we  have this done let's use the call that we have   created we can do that down here where you have  this app midle pipeline so let's Implement app.   use course then passing the name of this call  here okay so that is all that we need to do here the next thing to do is to handle or to  surround the cascading authentication State um   around the route the route is found in the app.  Razer so go to the client now you can see from   the client we have this app. eraser So within  here we can surround it with a with a cascading   authentication state so we can just make a copy  of this then we have this cascading All State   Control period we need to include the name space  in here and now this must be an authorized route   View and now in that when we authorizing you want  to just display a custom message so please wait a   moment whilst we authenticate you anything that  you feel you want to include in here you can um   pass it routin okay by this mine maybe you can  also specify your okay so now we have this let's   see I want us to display something on the screen  so as soon as user logs in we can see isn't it so   let's go to the solution solution and from the  client you see we have pages from the layout we   have um nav menu so here was when you go top here  you can see we have this client okay so with this   client maybe you can remove this and you can just  space in here to hi if you are authorized you want   to display the the name if you are not you want  to display High guest so see using this authorized   View and now if you're authorized display this  if you are not then display guess to the user   so this is going to be displayed on top of the  nav bar and maybe when the countdown here we can   have a login and our log out so instead of having  it on top there we can also um put them here okay   it's possible but let's check it over there let's  put on top so let's go to main layout and then in   here we can remove this and now we can just  create one so this is going to be a class so   let's say BTN BTN n and now with this we can just  type in something this is going to be an hre and   it is navigating to Identity let's say account  slash login that's going to be the route for   our login then let's say this is login we can  make a duplicator of this and I make this as register so register let me make this a  sign in okay even log will be okay isn't   it all right so we have this and maybe this  could be let make this as test danger or test   this okay okay so let's maintain this now  the next one is let's make a copy of these   two and now display BTN BTN this going  be test danger and then this will be log out so with this log out we not going to implement  this you're going to have an onclick event so at let's have at unclick then we say log out clicked let's define definition  for this so at the code section we can have um async task log out click good so when I click  on log out this is what I want to um do so   to implement this method we need to Let's log  out model equal to new and here we need a user session so we need to include this new user  session model which contains the user the token   and the refresh token so let's save this let let's  go up here and we can include the name space so using so client library or let's see if this is the base  library. dto so that is where we have this user   session then custom aate provider it is coming  [Music] from the C library so let's say at you using and this is the client's  Library so let's see this using so client Library dot we have the  helper that is where the custom aate   is coming from now you need to inject this  aate provider so we can have at inject then Authentication State provider and we say this all state provider so this has  to come from the name space   of I think microsoft. component let's say so at using so microsoft. component as cor do component.  authorization yeah that's where it's coming from   so we can move all this we can cut this save  that then put it in the import so we can use   it in another page as well so go to the ut.  Razer now done here let's paste this okay so   I want to group them this where we have all  the inject this the usern and now in here   let's also inject I user account [Music]  service and I will say this is um account service okay so this is also from the using of  this as using is coming from the client Library   dot services dot contract that is where this  also coming from okay so we save this we go   back to the main layout and now can see we have  it so can see we are calling an update State   method that we created we pass in now or empty  object in here and when it gets the object is   empty the person wants to log out then it log the  person out and I navigate to this page that's a   homepage and I reload the page again to get a  token from the local in case you couldn't get   it then it's going to return and only mod from  the custom orate provider good I believe you   are good right so now let's see the next to do  here is we're going to create our um component   that's a login and now the register component  so let's go to the solution and now here where   we have the pages this is a page that we have  we going to create one folder in this and name   it as account pages so account Pages inside this  account Pages folder we want to have just a login   component to right click on this then add a new  component as login component or login page now   inside this login page we want to have a simple  edit form in here when I check this we have this   ER that we specified and now we have this input  edit form in here that is a handle login and we   use this validation to validate um the model or  the form we have a user email and a user password   when check you have this user and now that is  an instance of the user um detail that we have   created so we going to use that user as the model  for this edit form if I click on login I want to   submit I'm going to submit to this method that's  the reason why we specifi it here aside from that   we need this nav manager so let's include it  from even from the custom aate this nav manager   so that is a main layout yes you must have this  nav manager so let's include it here at the same inject so in this is going to be navigation  manager then we say nav man manager okay so   when you come to the login we as soon as we call  this we see we do the same thing here when we have   the response as through it me user has now log  in then this result going to retrieve the token   and the refresh token so you want to push it to  this update authentication State this time around   we not going to specify as now right I want to  populate it in here as a token is equal to the   result of token and I we have the refresh token  is equal to this result. refresh Tok token which   is coming in as a respon from the service in here  aside from that you want to also navigate to the   homepage and I reload the page so that the custom  orate can retri from the local storage and I'll   append it to the header and do a lot of stuff with  it get the claims and I'll set claims to the uh um   claim principal and I return it to the component  yeah so that's what we are doing in there too okay   so we have this the login now let's handle the  registration but before we do that let's navigate   to the login page let's find this application  and test the login if it works then we can also   handle the registration component as well all  right so let's quickly check it up so I'm going   to make this as a client not a server choose the  client here and now we have to set the client as a   startup Pro project so I click on the server let's  run the server so thebag start with that the b in so once we have the Endo ready we  also go in there and now start the client okay so it is by you see from the CL and  we have an error in here let's check this up we   check the console and it is saying it is the  there's no service type for this um HTP client   Factory okay so let's let's do that quickly  so I I think I forgot this when you check   this where is it our service user account  service you can see from here that we are   creating we create this uh public client right  now when to check this get public client that   the service of this get HTTP client let's check  that service you see that here we create a new   client and I give it a name as system API client  right so when you create this client we have to   register that and I did not tell you so that's  the reason why we having this error now let's   see let's register that so we can go to the same  client session program. CS file now instead of   this this one we can now use this so builder.  services. add HTTP client then we specify the   name in here then with this we can copy the  name of the the port and I rep place the port   let's close this you can comment this let's  save this let's run it again and now check it out yeah so you can see this is ready but we  have login Lo register and log out wow we did   not surround it with the authorized component  and you did not tell me I hope you've done yours   right so let's quickly do that from this where  I have this login this is going to come in as   an authorized so authorized View and now here  if I am authorized I want to see this if I am   not authorized I want to see this you see so  if I am not authorized I want to say login and   I register if I am authorized I want to see log  out I hope this is clear okay I believe the first   time of you hearing this you know this and using  this oh isn't it let's save this and now let's do   it again and see for now if you're going to see  this again all right so this must be a register   yes do that before okay before you forget it so  that's going to be a register although we haven't   created a register component but we specify the  name here and as soon as you create it that'll be okay so since we are not registered we are not  indicated we see we have login register I see so   let's go to the login now I'm going to click  on this inspect element you're going to call   this endpoint so let me expand this a little bit  go to the network tab click on register and now   here we have user at user 4 at examp example.  you remember we have string as a password now   if I click on um login you can see it is calling  an endpoint here but the response here is two4   okay so see in and it was 200 and the page got  refreshed so you can see here we have the log   out when we check the you have high string right  so that's going to be the name when you check our   um app where can I find the app it is here let  me open it Tom more yeah so when you check this   go to local storage open this and you have the  token in here this our refresh token and that   is our token so we are authenticated if I click  on log out you see has been removed get refesh   and now you're going to see hi guest yes meaning  you're Au authenticated and you see we are now   you can now see log in and now log out so this is  working now if I click on WE forecast we have an   issue here why check the network Tab and now check  this with the forecast click on it again let's see   it is not making even a call when you check this  console it is saying that an invalid request URI   was provided okay so let's handle that so we can  retrieve this as soon as you make a call to this   Endo then we can retrieve it from the database  or that's an API because now we have a token uh   added to the header as well and you can now make  a call to this Endo now let's see we decorated   the API that the r forast Endo as the row as  admin user for it is not an administrator is   going to be a user so when this work we must have  403 that is forbidden for means you authenticated   but do not have access to that specific API or  that specific Endo let me put in that way okay   so quickly let's also handle that let's go to  our source code here navigate to the where we   have this weather forecast um components and that  can be found inside the client pages and actually   have weather. Razer so here we don't need to use  this HTTP client anymore all we need to do here   is we have to also clear this because you're  going to be using this weather forecast from   the base library. dto so with this we have to  use the name space here we have the name space   already so we can now remove this and I will say  that there is an await a account service do get   weather forecast so we now calling from an API  let's save this now this is going to call from   the private um HTP client which going to get from  the local storage append the talking to the header   and I return an instance of HTTP HTTP client  and now we can make a call to it let's run this again so as soon as the app runs it goes to the  text and I see do we have any um in the local   storage yeah we have it and now now we have hello  guest right so with this hello guest let's log in   let's log in here we are going to authenticated  now you're going to have the data store in the   local storage so let let's check it first after  getting the the weather forecast we're going to   check how does this work right click on this go  to the inspect and I in here from the console not   the console this network tab click on whether  forecast and here we have an issue 500 let's   check it out so this is an internal server error  but you see when you check the token you have the   token added to the header that's fine but the ra  is why are we having this let's go to the API here   the user service and now from the refresh token  we getting it from an API wether forecast okay   let's Che the controller we have the row as admin  authorize attribute specified and now here this is get so let's let's check the the end point  let's try to get data here and check it up   so no authentication scheme was specified oh okay  so we have not specified any authentication scheme   yet yeah so I did not also tell you that all  right so let's also do that you know I I keep   forgetting things all right so let's quickly do  that this should have been the first thing to   even do before we handle this this has to happen  in the server and I will go to the program. Cs   file from the server and that is where we have  to add authentication scheme so down here you   see we have authorization so authentication  must come we have our authorization in here   so authentication and then authorization  let's save that now let's add the scheme   so after the registration of the service the  connection we want to add authentication then   after adding this we have to also add the bearer  that's going to be the GWT Bearer that is where   we are going to specify our issuer the audience  validate Etc and Etc so you see we have validate   issuer validate audience validate issue ass  signing key validate Lifetime and now this a   GWT session so where are get in the JWT section do  you remember that in the second video um we made   mention of DWT section as a model we are using  our options to map the session in the app Json   so we don't need to use the config anymore  we can use this eye options and to do that   we made a registration here this one so let's  put Let me just remove this and put this on top here and the next thing we need to do here is we  have to cach this so we can be using it in here   so this is going to be used outside the program.  Cs file and now this can be used inside this file   so section we get a session of this we map it to  this so that is what we doing in here and we are   getting the bite of the key so if you don't know  where is coming from when you check this app. Json   from the server we have this specified in there  app settings there a GWT section we have the key   issue and now the audience and that is exactly  what we are using in here okay so this what we   need to do now let's save this and I believe  we can stop everything and I run this again okay so let's stop this and I run this again so I first  have to let's save all let's run the server after that we're going to run the client  and I believe this is going to solve the problem so even here when we test this get API we  must have 41 let's see 401 yeah we have   401 meaning it is unauthorized because we have  not registered now let's go in there around the client all right so it is ready now rightly  let's go to inspect element and let's check   it out and see if there will be any issue again  what do you think if I click on this get will   forecast okay so you can see have 43 and what is  the definition of 403 it is for bidding meaning   this must be this is only for administrators but  here you are a user you want to have access to   Let's log out we going to admin then going to  make a call and I see it's going to go through   log into this inste of this user it's going to  user let's log in there going to be there's an   admin so let's log in okay so you check this you  have a new token and that is an admin token for   this and now if I come to a network tab let me  clear everything click on weather forecast and   that's fine we have it so check it up if I click  on this you see we have the token in here and I   if I decp this token you're going to have it  as an admin we did that in the previous video   so go to gw. pay this token you're going to have  all the claims you're going to have all the the   scheme the header and Etc okay you're going to  have them in there okay so there is working by   here when we check our token formation we made  it as let's go to the user repository from the   uh data sets layer and now in here we have this  us account repository when generating the token   we specify the expir date as one day so maybe  this is too long for us we cannot be waiting   for one day to get this so let's say add seconds  and maybe we can add let make it as two so as soon   as you create this account and try to log in this  account we have to it has to expired and when it   expired it means the user cannot have access to  the resource again because the token giving the   person access has expired let's check it this  out I'm going to try this now let's find this   and see all right so here we are going to log in  again so let's log out so that the token will be   cleared up from the local storage and now when we  log in it's going to assign a date and time of an   expir date and time to the Token okay so it can  expire as the date or the time specified so log in so once you're in right click on this let's  go to inspect and now let's see if when you go   to the netk tab can just click on forecast  and I'm going to retrieve it so anytime   that I click on it since the token hasn't  expired you see I can able to retrieve and   any c that it makes it happens it has the  authorization header added so we can just   be clicking on it all the time now let's give  ourselves some time so that this token will be aspired all right so I went offline and tried  a couple of times and you can see from the   last end that uh it is successful now we have  a call made token has been added by the store   41 meaning you are not authorized and when you  check the WW authenticate uh key the value tells   you that the bar error invalid token now  the description here is the token expired   at this date and this time so the token has  now expired any call that you Tred to make is   not going to go through because the token is  now expired there com see the refresh token   as token expires then we have to call the  refresh token let's have a look on how to   implement the refresh token there are so many  ways of implementing this I'm going to also   show you the other way around today normally  I do um handle that in the um service section   by this time around you're going to create a  custom custom HTTP Handler which is going to   inherit from a delegating Handler and within the  Handler we're going to create going to override   the send async method we're going to check  from the request if the response it is or the   request has a stus code of 401 we want to call the  refresh token let's see how to go about that so   I'm going to let's go to the source code of this  project and now let's close everything from here let's go to the solution and now where we have  the user service from the service project that's   going to be the client service so the client  Library see we have this services and we have   this user account service so in here we need  to implement the refresh token and it is it's   a post method so we can just grab this without  wasting time we can just grab this one and now   in here we can uh paste it it so we get this is  going to be a public HTP client also because for   the referes token it is anonymous let's go to  the SQL is SQL the solution now when we check   this authentication controller we can set here  as allow anoos so it means all the end point   here can be accessed by Anonymous by this need a  key and that's a refresh token to um get access   to this let's save that and let's go back again  and you know saying this a task you must have an   asynchronous method and it is also R the same  login response now here we are not converting   or we not returning this you want to rather  return a login response to the refresh token   and now we are going to post this token not the  user that's all that we need to do and now here   it is refresh token so from the controller you  can just grab the name in order not to make a big   mistake here let's past the name here that's all  copy this and I return login respon if it works   that's fine this all that we need to do here from  the service now let's go in there and create a   custom HTTP Handler in the helpess folder that  we created right click on the folder add a new   class and I'll name it as custom HTTP Handler or  you can name it any name at all you want to do   you can put it that now this has inherit from  delegating Handler so this has iner from this   delegating Handler and you know there is a class  so if I click on this it has p definition it has   this meod and it's also inheriting from this  HTTP message Handler and now in that you can   override the Met known as a send a sync if it is  not here then this method that we can overwrite   then we can now have access to this request okay  so this what we are going to do this must be a public and now once you have this as a  public we can overwrite the method known as so here you see we have this send a SN  this a meage that you want to WR right now   in here we want to check so first of all if it  is um this if it is login register or if it is   refresh token we don't want to append header  we want to call the public and I'll return it   so this what we are doing first we check  if the request content there is a refresh token so login URL let me URL refresh register URL   and I refresh token URL so it is going  to return return if it contains refresh token okay then we want to return so if this  contains any of the this um name here it means   you are calling a public URL and in such that  or in that case we don't want to append the   authorization head on top because these are public  endo and even without authorization header we can   still make a call to this so there's no need  for us to append the header make a call to a   public endpoint with authorization added to the  header you cannot Escape that but for now let's   actually make it clean so we want to remove that  so to do that you want to check you say if login   URL that is true or if register URL which is  also true or if refresh token URL which is   also true so if any of this is true then this  is what you want to do we want to just return   this okay that is when it is through so skip  this return don't add any header but in case   it is not and it is other like refres to um get  weather forecast get employees or any other um   method or any other end point then you want to  append the head so to do that you want to cash   or store the header in here let's store this  here as a result so let me remove this okay   so this must be an ASN take note so we store  it as a result now the result we are going to   check if the stus code is equal to 401 so if the  Cod isal to 4 401 so here must be an await don't   forget if stus code of the results here is 401  that is where we want to specify or return all   this you want to handle this but in case it is  not then you want to return the result that we casted and you know this result that is this  one so if this result status Cod is equal to   unauthorized that is a 401 it means that  the token has now expired it could be that   there's no head app or there's no section  app to the header or the token has expired   so there are two ways first let's check  if token is there meaning that this the   link or the token has expired but in case  the token is not there then we can add a   token and I'll make a request again okay so  that's what we are doing we want to check   first and here this could give us um error  so maybe you want to check if if token is available okay so here we are checking if  token is available but first of all um if it is   unauthorized maybe we can get token from the local  storage so let's first um get token from local storage okay so here we have to inject this  local service so in here let's in the two   so that anytime that we need an htcp client  we don't need to create any more because we   have one in here let's append it so this must  be yes so we need get HP client which returns   two method that is a private and public the  private one contains the header now local St   allow us to set get and now remove so we get  the local storage in the form of a string if   it is now return results but in case it is not  then we are going to check if this token here   is empty so this is going to empty in case um  there's no head that's going to be empty so if   this is empty then what are we doing we want to  just add the token to the header and I'll make a   request again so we add the token you know from  here we have to deip this okay so in order to do   that we are calling this method digitalization  um digize token. token so here we are going to   decrypt this token and to decrypt this token  we have to just create a simple method which   is going to dve from this let's put on top here  so we can use it within this the scope of this   if so can see weiz uiz the token of user session  of this string token that is is coming in as a   string then we check if it is now return but is  not going to be null but let's check for check   sake then in here we are passing in the seriz  the calized token the token property in it we   pass to the the header that at the end we want to  call it again so here the second if the response   status code is 401 first let me check does the  HTTP has a header known as authorization in case   it is n then first to the token and I'll add to  the header and I'll make a request again that's   what it's doing but in case it is not in case it  has it that is when if this is not n meaning that   the token has expired that is where you need to  call the refresh token okay end point okay so to   do that we have to now get the refresh token so  let's create a method in here to call the refresh   token and on this a refresh token we must Define  it here tool period we can just generate a method   for this as a refresh token now this refresh  token is going to come in with a token it's   going to come accept a token as a parameter so  we passing a string in as a refresh token now in that let's change this V to give it as  an appropriate name refresh token now in   that you want to make a call so with  making this call what is what you're   going to do we need to call this we have to  inject let's inject one more so maybe I can   then maybe let me put this here let's  inject I user account and I say this is account service okay so with this account  service we can have a method in here so results   is equal to we can have an AIT account service dot  then get refresh token async this needs a model so   we can say new um refresh token model then with  this we can have token is equal to this refresh token okay so this refresh token that is this one  so you pass it over here then we make a a respon   to this now with that we can check if response  is null because this going to return a response   so here we can even check if the this result  is null because this result is going to come   in with a login response if I click on dot you  see we have um token flag we have um let's see   token refresh token message okay so if this is  null then this is what you want to do you want to return okay so let's return this in case this  token here it is not but this token it will   never be n because as soon as you passing a  correct refresh token and it's going to come   out with a new token and a refresh token  this not going to be handled by the user   right it's going to be a computer to computer  or machine to machine communication okay so   in case it is not or even here we can this  must be um let's make it as a string okay   so let's return as a string from the token  so instead of this we can return this null here we can return now but in case this  is not then I want to um return or maybe   instead of doing all this stuff we can just  return result straightforward then we go our   away so we can make a check in there  so return this result very simple one   so here I want to return the result from this  let's see with DOT refresh token so this is a token so before we return this token you know  we have to also set it to the local story so   that anytime the person logs into another page or  navigate to page and come back the token will be   there the current one so in order to do that  let's serialize there the new one and set it   to local storage so in that you can have this  two method to handle that so see weiz the token   coming in then we call do realiz this object  then this new user we have token is equal to   this result do token and also when you check  the next one this is going to be the refresh   token so we have the model populated here then  weord this local storage service. set token we   passing this I token this going to set it at the  end of the day we want to return only the token   not the refresh token we want only the token now  in here we are going to check if this token here   it is not now so we check if okay so we can say  if string do is now empty that is the new token   coming in definitely we know that it is not going  to be n but let's see if it is n then you want to   return result and now this result is what you have  in here okay so that's the result that we cat here   return this result but in case it is not then we  want to append to the header and also remake a   request or remake the call again so append to the  header so we append the new token that's the new   token and at the end of the day make a request  again so as soon as you have 401 it's going to   pause call the referesh token API get the token  add to local storage remove the current the old   one append the new header to the HTTP client and  I remake the same call again to get the current   data that we want this what that this custom  a going to do now after doing the next thing   that we're going to handle here is going to be  let's register this so we have to do that in the   program. CS5 from the client server not the client  server the client section so we go to the program solution this is the client where is it this  is the server client program.cs file that is   this okay so in here all I need to do here is  to add an HTTP message Handler to this so let's   add HTTP message Handler to this then call  the custom HTP P before that we need to also   register as a transient so on top here let's put  this as a transient and that's all that we need   to do so we are good to go let's save this and  now let's try this again so I'm going to close everything so let me close all these okay all set now let's run save this first now  let's go to solution and now from the server right   click on the server debug this without debugging  let's start it after that we are going to also   start this client then we're going to make a call  as we did earlier on we're going to wait for some   time if the token exp part we click on it again  going to see that going to make a call to the   refresh token and you're going to be having a new  token so let's see we have this L from the client to okay so let's now we are still in we navigate  here to the inspect now let's even check so here   you know that when you run this the token expired  already isn't it so if I click on weather forecast   let's see good so you can see now we have a  refresh token called up here right so now let's   wait for the response of this refresh token good  good yes so this working have you seen that you   can see the first time we made the call to this  we had 41 this is a token check the end of the   token it ends with 2s now ref token was called  and now you can see there's no authentication   header attached to this now when you check this  when you check the payload we send the this is a   refresh token and now this is a response from the  server we have a new token and now the refresh   token and now the same it came and now we made  another request to the header and now check the   first token here it is the OG so check the old  one it is 2s now the new one here it is what   OG so it means that ref token was called and now  a new token was be retrieved added to the header   and I make a call and I re have it so all the  time anytime the token expired F token is being   initiated and now we can now have a new token for  ourself this machine to machine communication the   user has no Duty here okay all right so let's see  now we left one that is a registration component   so quickly we let's go in there and create  our registration component let's minimize this so let's go to the solution now where  we have the same the client Pages we have   our account page we click on this add a  new razor component and this ISS register   page now in this we want to paste in this it  is the same edit form that we created this a   r that we have hand registration the same as  the edit form for the login that we did the   same thing just that here we using the register  component the register model okay then when you   check this we have the full name email password  and now confirm password we have data notations   and dation summary so to get or div validated  for us and we have a register Button as a type   as what submit and now that is just handle it  so this is what we are saying in case is true   meaning if it works you want to clear the model  in case it is not you want you don't want to do   anything yes we going to be using either maybe  notification a message Handler to handle this   but for now let's see so this what we are doing  let's save this let me close this and reopen it   again so let's let's go to register page again  and now yes so we have it that's what that we   need to do very simple one you call account  service. create Asing we passing this user   model that's fine now let's run the client only  we know that the API is on the way it's alive so   we going to run the client then we're going to  register and I also log in and I'll test this up so let's go to Let's log out and  after logging out we are going to   log in again we going to register  create new account so let's click   on register and I can see we in the  registration page let's pass in net code then maybe let's have an email in here we  have five then password string let's maintain   the same string now I click on register as soon  as this becomes it me registered right now let's   go to login and now in here pass net the password  click on reg login and now you're going to have   net up channel on top here okay this this works  going to have it here so maybe later on we can   use some buttons to display as soon as I click on  this we can have some running feature to tell the   user that a process going on so click on this  let's see and we can now make a call to this   but let's see s this a user let's see token it  be append to the header click on this come back   again yes 41 the token is appended here but still  4 because the Endo is restated for only admins all   right so in our application that we are creating  you can see there is the client section that we   have opening on the screen we have just a login  and log out I can just click on this login now   when I log out you I go to the same homepage  that is not the best this this is an employee   management system so before you have access to  even the homepage as you see here you must be an   authenticated user so this what you're going to do  we are going to extract the login and the register   into eight layouts and now a user is going to um  authenticate himself before the person get access   to the hom page or the front page that you see and  aside from that you're going to have another page   which is going to authenticate the user maybe  um if I've registered already whereby I have my   token and I refresh token stalled in the client  library that is a is it client library or the uh   local storage yeah local storage so if I have my  token and refresh token have store in there as   soon as I open a large application so far as the  token hasn't expired it has to give me the access   straight to the homepage but it shouldn't send me  to the login page we're also going to handle that   as well okay so let's do these things then we see  the way forward okay so I'm going to close this   and let's go back to application um this where we  stop the other time so defaultly this application   it the all the component are using one layout  and that is a admin layout so when you check the   solution you go to the client so that's a web  assembly and I when you check the pages and I   check a folder name as layout you can see we have  this main layout and that is the layout that each   and every component is using and that is where  you can see we have this log out and our login   and register we don't want this to happen here  we want the want to have just a login screen only   you want to have a registration uh page only on  the screen before is gets to the whole hom page   the user must be an authenticated user before he  or she can have access to all the other features   of our application so let's extract this out but  first of all in order to do that we have to create   a layout first so let's create a layout and I'm  going to name it as authentication layout well you   can choose your own style okay okay so maybe you  can name it a name of your choice but for me I'm   going to name it as authentication layout because  it's going to check and authenticate the user and   that is a page that is going to happen it's going  to contain authentication um component before a   person get access to the other component as well  so that's the reason why I'm giving it the name   like that so we go to the same layout in here and  let's add a new razor component and now this as   you know the name already I need not to have it  here so let me just past it here now let's move   on so that is the authentication layout so you  can just name with your own one now with this   layout this first thing that we going to do you  know a layout inherit from the layout component   base so our this custom layout must also inherit  from the custom component base so let's first do   that it's very important aside from that you  want to have something like um container fluid   from the just a small bootstrap classes we  have a container fluid and we have the row   and this a column large 12 mean you're going  to cover the entire page that's what we have   in here okay let's save this now this is what I  want us to do I want us to add some image at the   background so I have I've prepared some images  here I went to the internet and I grabbed some   sample images and um use some photoshop to set as  a blur and that's what I'm going to use all right   so maybe if you good at that you can just do same  or maybe at the end of the whole video I'll put   the the description that is a source code at the  description too so you can have a look at that   but you can just grab any image of your choice and  I'm um use it so you know I downloaded a couple of   images in here and these are some of the images  that you're going to be using especially this is   you're going to be using for the profile picture  as can see default profile image and I'm using   this this as a BG so this is the image I make a  copy of it and now that is it so with this say   I made it blur so this is blur image and I just  move these two images from here and I move them   to the solution I created a new folder in here so  I have to create it right so let's create a new   folder in here and now let's name it as images so  I've add an folder then with this I'm going to say images in that let me also create one um folder  I want to organize this very well and neat as   well I'm going to say this is background so you  know this is background folder okay so within   the background folder I'm going to copy the one  that I shown you I'll paste it in here and that   is the image as you can see is the same isn't  it good so there is a background image now in   here you want to have a default a general uh  design for login and log out so is I'm going   to do I'm going to create um this style I like  using Styles within components okay okay so I   have this style in here and now that is a body  so affecting the whole content here and I set   the background to the image in here and I say  no repeat it shouldn't repeat itself you should   just stretch it to fit the entire page aside from  that I use this web kit um to make it as a cover   to cover the entire page neatly and now nicely and  also beautifully okay so that's what we are doing   in here now we have a layout created so we can  peacefully close this the next that we're going   to do here is we are going to um use this custom  layer that we have created in the login and our   register component so we go to solution and now  in our Pages we have an account Pages we have   login so here we have to use the layout that we  created together you and I so on top here let's   past what we have that is a the name that is a  layout authentication layer so this is a layer   that we created isn't it so maybe um in case it  needs a reference you can hit on control period   or Control Plus dots and now add the reference  in here but this supposed to be green or is it   light let's see but I'm not seeing that let's  try to close this and let's reopen it a time   that's how this visual that's how it is you need  to um do it again so log in and I have it in here   so control period let's check it out okay so it  is still not giving us access to that page let's   see maybe it is going to be here already or what  do you think so using um is it is it client this   not so is a I think client or so when to check  the name space here it is a client we have this   project is a client we have um layout and now we  have this here right so maybe it is it is here so   client let's check it out if not we have to build  this and see whoa It's not giving me let's save this let's run this and see first if it is working  if not then we see the way forward okay so I have   it in here now this is what I have to do I have  to just close it and I open it with the the stable   version of the visual studio not the preview  uh before I got this so maybe if you're also   having the same thing then it's better you use  that studio but I'm sure you're not having the   same issue as I'm having now all right so once we  have that this is what we're going to do we want   to divide this s into columns so we can have this  login centered in the middle okay so you know that   we're going to use some bootstrap classes and the  same thing as You' seen over here you're going to   have column lg5 and LG2 and also five again so  this is going to be two here you want to have   five so I can just make a copy of this that is the  easiest and the fastest way so let me just close   this up now this will be five so the whole thing  must be 12 so 5 plus two making seven I'm going   to have one at the end here so making 12 so when  you do that this is going to be in the middle okay   so five five here five here two in the middle  that's fine okay so once we have this we have   to I want to use the div and now this class that  we have here I want to apply some little bit CSS   to it having the opacity to 0.5 and small design  okay so can see we have the B do opacity is the   half of it so going to a little bit blur we have  the margin top as 50% to just push it and we have   the radius as 10% is it 10% 10 pixels yes to just  con the edges together to have in a round rounded   shape yes round the St you have the font t as B  and the color here is white from that maybe we   can have no more um please fill it login rather  you have simple login with maybe an F5 from the   font size as five and that's what you want to  have now okay aside from that maybe I want to   add a Campa logo but since I'm not having a Campa  logo yet I want to use the next CoD up logo okay   so in that I have the logo store somewhere I just  go in there and I make a copy of this and after   the card body maybe I can just put it somewhere  here before we can move on what we doing so for   me to Center the image in the middle of the the  the div or or the content maybe here where we have   this card body I can do so put it somewhere here  after the container so it doesn't get involved   in the card body section and on here I'm using a  container and I'm also making a division as you   can see four four four making 12 so I'm going to  use the middle one so making four the middle one   going to be four for the image and I have a four  for the last one making 12 in here and you know   I also have a folder called um campaign logos and  have this but I have not created that so let's go   in there and create it to the image you say add  a new folder and this is going to be campany logo   now let me show you the netop logo if you don't  know let me show you so that is the logo right   here as you can see this is a logo so maybe you  can just rename this and I'll name it as net code   yes so let me grab this logo from this I just  have to go to campaign logo right click on this   and I'll paste this here so you can see the name  is same net cod. jpg and can see that the same   thing in here all right so we have this beautiful  then when you run it going to have it nice looking   well is it nice looking to you or to me all right  so let's save this and let's try to see we have   going to navigate to this accounts and check it  out so let's click on this to see all right so the   app is now loading now let's wait and check it out  okay so let's navigate to the login page and let's   see yes so this what you we we want to do or we  want it okay so we have this the login and we have   just an email and password in here and we have  just login so passing everything now see we have   this login button so this what a small design here  for this and that is a BL image that we use as a   background okay so now that we have this maybe you  can decide to um resize this or increase the size   of this or do a lot of stuff you can customize  it suit to suit where you want okay but let's   maintain this for the sake of this video okay so  see we have the campaign logo as well and that is   this over here you can just so let me reset this  okay so email and we have our password so we can   just pass it down and log in all right so and  let's have maybe um a display down here to link   the page to um sign sign up or register so where  we have the card you know this is a card this is a   card and I we have this a header and now there's  a the body is around here so at the end of the   body we want to have card footer and now we want  to use so we want to add the viation summary down   here we want to tell the user don't have account  then sign up give a reference to the the component   and that is it so here when we come here we have  to remove this validation summary you want to have   the summary on beneath not on top of the page okay  so let's do same to the register component too and   now let's let's remove them from the the homepage  so we go to the same folder that is the pages   account section and register component and let all  do save to this so here too we're going to make it   as column md5 and two then you're going to make  here as five so this is five and let's make it two okay so now that we have this we can just  edit this we can cut this and put inside this   column LG2 we going to have five five and two  in here you can expand this and make it three   make sure the divisions must when you add them  together you must have 12 so we have it here   nicely that is it one okay let's also have same at  the the background where we can have the viation   sumary been it so after the card body you want  to have the card fter as well and we have the   validation summary here here is also linking to  the sign in I hope you know that and we've done   this earlier on now let's remove this as we did  to the the login you have to do same we're going   to change this card and also change the header as  well so from the card I just have to grab it from   my resource here and just have to make a paste  so the same that we are doing okay now with the   fill this form to register you can just type in  or register an account very simple one no long   talk so very simple cre this account to login we  also need to include the image as well and in the   cardb we want to have an image session from the  card body maybe we can have an image section here   or maybe on top here we can also have the image  session let's check where we pasted the the login   so when you go to the login we added it in here  from this um we have the card header and then   between that's where we added it so here to you  can do same not within the card body but before   the card body we can also um paste in this control  KD you can format as well and is same campaign   logo that we have been added in here okay so this  all that we need to also do from the register now   let's so save this and we have to include the  layout as well do not forget is very important   so authentication layout let's save this and now  let's find this again and I'll check this out all right so we go to the same register and now  let's check it out okay so this very lean isn't   it but well if you want to make it like this  or you can extend it in case you want see if   you want to extend it there is very simple we  go here where you have this column MD you can   make it at four so 4 4 4 will be okay so this  going to be four will be okay for this and you   can also make this as four so four for making  three and that is it or you can make this as   two or three Etc you can make this as well  it depends on how you want it to be done so   you can save this and I want to check it  again and let's you refresh this because   this too Lan yes it's very very l so let's  see if we try to reload this let's check it out all right so I expanded it I made it four in  case this is okay for you you can also do that uh   in case um you have you want to have the sign  up this also in case this sa for you it's okay   you can also do this and I remove on okay so that  is a register um section we are done with this so   what you should do here is we go to the page and I  try to remove it from that um nav menu so this can   be done from the solution you go to um layout  I think so can be found in here layout and na   menu no that is a main layout I think so yeah  that's where it is we can remove it from here   because you don't need it anymore here so all  you can have here is a log out as soon as you   get to the app you can now log out from there the  next thing that you want to do here is when you   check the page if I click on register I want  to have some button spinner to tell the user   that there's a process going on so please do wait  for us once you process your request all right so   maybe let's try to um do that and in other to do  that we have to create a component to handle that   so quickly let's close this let's go to solution  and in here we go to Pages we can just create a   one folder and I name it as other pages so maybe  all other Pages you're going to put them in here   so right on pages now add a new folder to this  and I name it as other Pages or give it a name   you can decide not to follow what I'm doing  okay my rename in still going to make it so   um let's make that button loading spinner it's  very long for you isn't it now in that it's just   a bootstrap that we have in here just a button  with this processing and that is it okay so you   can see it's a spinner and it is disabled okay we  save that we go to the login and that is where we   need to include this so maybe let's navigate  to the register page that is near to us and in   here we can have a button or just a property  to hold this show loading button set this to   for so initially when the page loads you want to  set this to foral okay now aside from that maybe   you can have you can over write this button the  register button that is this so here I'll just   copy this and I'll make it in this form so if this  is true then show this button so control period we   have to include the the reference in here so if  this is true then show this else then show this   one very simple one using IF else switch between  them now when you come to the create async that   if I click on the button the first thing I'm  going to do here is I want to show this show   busy button to through so we're going to have that  loader and after every process is done down here   I want to set show loading button to force that's  what I'm doing here let's go to the login to and   do same so this is a login page page within the  down here I believe you can do that so pause the   video and try your hands on it let's see if you  can do it okay so once you have this you come to   the section where we going to have the um submit  button you're going to make the same changes right   so login log in let's include the Nam space and  that is it okay so if it is through then show that   in case it is then hide but how you going to show  it we have to click on or set the value to varable   when the button is clicked so if this is clicked  on shows that but in case everything is done then   please do not forget so to um close it up okay  with even here it's going to navigate to a page   and I will set the for Lo through so I'm not sure  this even get to to to run this as soon as it gets   here it's going to um direct us to a new page  so here that's what we have now the next thing   they're going to do here is after adding this  do you want us to try this and see maybe let's   give it a try so we have not okay so let's save  this let's run the server first so the bag start   with that the baging that is for the server and  as soon as this runs up you're going to run the client so there is running let's  run the client as well all right   so let's see both are running  now let's navigate to the is it identity account and our login  so we're going to get us to the page okay so in here if I click on login let's  see what happens here so I'm going to click on   this okay so there's nothing happen what why  let's check it again email is okay so there's   not let's pass in the current email in here so  maybe we can just do EX at gmail whoa so let's   let make it again gmail.com now if I click on  login yes so we have it here now I'm processing   and now say this going to be uh you don't have  this this name or this email registered maybe   that will be that won't be a call or what do  you think if I check this network and I click   on this again let's see so login is being called  up let's see the response from the server whoa it   tells you that hey us are not found and that's  fine so maybe we going to have a mechanism to   um to display the the information to the user  but as soon as um it finished the processing   you can see it it turns back and the the spinner  is off we have the real button looking up to us   okay so this working when you check the sign up  to I we can also do same let's say from net from   net at mail.com we have 1 two 3 one two 3 this  a creating a new account and let's see you want   to have an account an email which is already  registered all right so we're going to say it   is user at example.com I think so so example.com  yes that's fine so let's say if I click on um this   net code click on register and I you see we have  the same when I check the response it is telling   you that user registered already yes so it is  working that's fine so now let's go to the next one so this what we're going to do now we want  to display the message to user so we're going   to use a SN fion component that is known as a  SF dialogue so this dial component is going to   enable us to display a response to a user now  let's install that component quickly so let's   close this up then we can navigate to solution  Explorer now from the client service section   dependencies go to manag get packages and in  that we are going to install s fusion. blazer.   popups let's install this and I'm going to choose  23. one. you can choose the update one okay you   can um choose that and now um let me inst this  aside from that maybe we can install buttons too so buttons and you have to make sure the  the versions are the same so if I choose 23.   1.36 the same version must be installed all  packages and now the next thing here is teams   so we have to install teams to now let me go  for the same version 2 [Music] 3.36 36 install this okay so they are installed once you're done  we have to include the CSS and and the JS file in   the index.html so click on that from the WW folder  then you can see you find it in here so in here we   have to um install this later on we're going to be  installing bootstrap because we don't use this old   version so maybe it's better that we do it now  what do you think yes since we have here let's   do that now in as well and as do that you go to  ww folder that is this one right click on it and   now let's add client Side Library and in here type  in bootstrap we have Boost STP that is this 5.3.2   click on install aside from that we also need  to install bootstop icon because you're going   to be using icons in this to so let's see once you  have this let's add the client Side Library again   and now here we have bootstrap you're going to see  the icons here also click and install the icons as well and you can see the they are installed  so we can now close this peacefully without   having any issue once you done we have to  also include the bootstrap um CSS and the   JS and also the icon CSS link as well so we  go to the same index index. HTML click on it and now once we in here let's add this  bootstrap we have the bootstrap um css. me   we have the mean. CSS and also we have the icon.  me. Cs we have a default one so we can um remove   this one we have to also add maybe the the band.  JS file so let's also um add it down or even here   okay so this is done now let's go to program.cs  file now let's register s Fusion dialog service   so this is going to give us access to have this  dialog by giv access to the show alert show prompt   and all the those guys okay so let's add it B  service. ascope SF dialog service control period   and now we have to include a name space from this  so you wait for the loading s you completed then   we're going to choose from what we want so that  is it we need to use S sy. blazer. popups and   we have this we can now save this peacefully now  let to do here is we going to include the provider   into the main layout component so in order to  do that we we're making this as Global so so   we can be using it anywhere anytime right even  when we asleep and you wake up you want to use   it it has to be possible it has to be available  for us to use we go to the main layout in here   and I'll down here paste the component here as  a SF dialog provider save that now let's go to   the login now we have to inject since we've uh  registered it it means we've created dependency   injection and we can use it in the login page  on top here inject it here peacefully without   having any issue except that service control  period maybe you can add the name space and   that's fine down here we can um put it in here so  when you log in successfully this is what you want   to do we can just create a base method which is  going to call this service for us so we're going   to use an alert you passing content and title  then when you have it done successfully when we   log in we want to tell the user that hey you're  loging successfully so passing the message that   is coming from the API in case it is not then  you want to make this as an alert so this time   around we need an L statement so we since we have  the if already let's add the else right so we add   the else here then call this meod and I'll display  so instead of calling this method twice we put in   the method then we just have to call the class and  that's all okay we do same to the register to and   let's check it up so let me just go in there let  me grab this I grab the SF this D Ser it okay so   we go to the register component and then in here  we do same on top so make sure you paste this you   include the name space control period you add  the popup okay so now when you come down here   we are going to also do same when it successfully  registered this is what you want to um do we also   copy the same method in here and I'll paste it  at the base of the app maybe here will be fine   for you and I S from that in case there there's  any error coming from the API or from the server   this is what you want to just display call this  method and passing the message but in case it's   working then uh click the content here and I  display something beautifully to the user that   is coming from the server okay so do that quick  okay let's save this and this all that we need   to do to use this component very simple the  easiest way to implement a dialog service is   this and also to use the inbuild direct element  from net a Blazer team all right so now let's   run this again and I'll check what we have now so  we run the client and Al We Run The API as well all right so you can see from here that you have  an error now when you check the inspect element   it is saying something let's check it out okay  so object reference not set to an instance and   also what again um all right so simping pop  up provider there's no reg service okay so   let's go I've seen the issue you can see that  here we added the main layout we added the the   the provider to this but we did not since the log  and the register is using different layouts it's   better that we put in there yes to make it it  work let's run it again and it has no issue it   has nothing to tell us it must work now yes it  must work so let's wait and see what's going to   happen so it seems I was lying before all right  so yeah I do remember when you go to program.cs   file we have to also register bler itself that  the S Fusion component itself right so it is   Builder do services do add Sy Fusion I think so s  Fusion where is it is it is it f here so s Fusion   Blazer think so contol period it has been included  already and that is the reason why it was giving   us this SRS now let's say and for now trust me if  I say trust me do trust me there's no issue again   okay so no fear now let's wait for this to get  ready and let's see what it has for us who vbl   so you can see we have it in here and there's  no issue anymore so now let's navigate to the   login and see so identity account login and as  soon as we log and it made success we must see   login succeeded or something like that okay  if I see any error to let's see so processing   let's wait and see oh so Al let user not found  and why are you have having this pop up here   instead of having it in front here see where we  having it oh so let's let's have a look quickly   and I'll see where we pasted the when you go  to authentication layout we added it in here   we have this is supposed to be isn't it all right  so I've seen the issue I have to clear the browser   um history so do same click on History if you're  also facing the same issue as I'm having now as I   was having now click on clear browser data and  I click on clear now and I get it cleared when   you're done come back again run it and I see if I  type in login let's see this user not found f now   let's pass in the correct name and see so user at  is a user at example.com and this is going to be a user and now the password here it is just string  so if you remember processing and I let see ah   successful that's fine so you see that is it  it is it is it is going on well and the same   so try the registration it's still going to  work so this is what you want to do next as   soon as if I run this application I don't want  to get to the homepage like this I want to go   to the login and I wait for a component to check  up background to check up if I authenticated then   it navigate us to this page if not then please  go and register or go and log in it sent us to   the login page okay so that company is going to  authenticate they're going to stretch us between   the homepage and now the login for loging  in and also as a login user let's have a   look on that so let's close this and now in  here let's go to the solution and from this   solution you see we have homepage here let's  change this homepage name to authentication   page now within the authentication page we want  to since we have the reference already we want   to inject authentication state and also the nav  manager these two guys are coming from the this   is this we know already this is also coming from  authentication state so as soon as you log in we   can now have access to the user details and  now we are getting the user here and now we   checking if the US authenticated then please go  to the home and dashboard in case we are not go   to the login you can see we know this but we don't  know this right so let's create a component known   as homepage and the right must be a dashboard so  what we have this home the pages folder I click   on this let's add a new folder now see I'm going  to say content pages but it depends on you if you   want to have same then you can name it content  pages and in that let's create a component as a   homepage and that's going to be the homepage for  authenticated users okay so within this homepage   we can specify the route on top here and that  is a home/ dashboard so if you're loging come   in here but if you're not then go to that the  place go and log isn't it good so now let's   see let's this this is the homepage and maybe  I want us to have something here to display H1   and I will say this is homage all right now let's  see if I run this again let's see what's going to happen all right so you can see that we are here  now since we are logged in you see we inside the   homepage let's log out and see now I'm out now  let's wait and see what're going to happen here   so it's going to navigate to the homepage my home  page is going to check is this person registered   no then please go and register or go and log in  now we are in here click on sign out and we are   in here now if I decide to go to say home SL  dashboard let's see home okay so this wrongly spelled home/ dasboard now let's check it up  and wait and see what going to happen Okay so   we are in here here right but when you log  out and now you want to navigate you can go   there but when you passing the route it means  it becomes possible how do you handle this so   if you specify the route in the address bar  and try to navigate whil you not log in you   you see how I guess while you're not loging  then we want to navigate you back okay so   back to the sender that is what what we want  to do so quickly let's go to the same homepage again so let's min miniz this now the same  homepage let's create a method in here when   the page initializes we going to call this  method now what is this method going to do   is going to check if the is authenticated or  not then after that check if an authenticated   then go to the login very simple one so um that's  what it's going to do now also let's check from   the the login so maybe this is what you're going  to do with the login we we check if you AU itic   at then pleas when try to access the login page  navigate the person to the hom page because the   person is already authenticated and we don't want  anybody who is ticated to also access the login   page again okay so we have to also do same we're  going to copy the same code you go to the login   and I do same to the register as well now when  the page loads up in the initialized async we   Cascade this and we want to call the same method  in here now this method what we're going to here   is all that we need to do is to change the route  name to dashboard when you're log we can do same   to the Let's see we can do same to the register as  well so register page we can just have this method   in here and now we go to the login and I make a  copy of this very fast and quick because I know   you know this already so you after you are running  like a horse so you go to the same register page   and I in here when to try to um access this  page as authenticated user it tells you you're   not allowed to do this so please go back to the  dashboard very simple and fine let's try this out so the page is now ready as you can see it  is now loading so let's it is loading and it is   the hom page that is so it is authenticating us  no we are not logging so you can see we are in   here if I try to access a dashboard let's see so  this is going to be what is is a home dashboard   now let's see what's going to happen oh beautiful  you see so when you try to access it and this was   giving us now let's log in and see so if I click  on login processing let's wait okay fine so I'm   logged in now let's see so it's navigating us to  the homepage Now High string that's the name that   I use high string yeah string string that's me  now let's say so here we want to also navigate   the the login now I'm going to say identity slash  identity slash account slash login now let's see I   want to log in was I'm user I want to still log  in is it possible okay so this okay so because   we added home home shouldn't be there so then  account and login and now let's see the outcome   of this oh fantastic so you can see we are see  inside a dashboard so it has navigated back to   the dashboard so this page is protected both the  login now the homepage they are protected that's fine so in here we are going to include a nav  bar here and now you see this is a hom page so   we have to use the main layout page I see this is  not giving us the the nav menu right so we go to   the page itself and that's the homepage here and  we have to use the main layout isn't it because   this has to this the hom page of and we have have  to include a layout in here let's check the other   pages from the login we are using a page there's  a layout um page so from the homepage we have to   also use layout then this is going to be the main  page so main layout now let's run this again and   now let's see if you're going to have a nav bar  because when you check the main layout you can   see we have this nav bar here waiting for us  okay so you must have that you in that page all right so we have the pages in here we have  our home we have our counter and our weather   forast and um working yeah so let's um close  this we have a because our token has expired   so when we check this section I can see it is  41 where is it 41 type to F error uh maybe our   server is also down we have not run it all right  so this is not what we talking about so let's go   to Let's create our page now the homepage that  you have you want to actually have some design   section here for the admin and also and user  can also admin can add users or add General   categories based on the the instruction that I  got so let's start to work on on that as well so   let's create a folder for as an admin so we go to  the pages in here from the client section we have   our Pages folder we right click and then we also  add another page here another folder okay let me   close this up first and now this folder we are  going to name it as Administration pages so all   admission Pages that's where we going to put them  in the first thing you're going to have here is   let's create a table Banner now the table Banner  if I if I shown you the I don't want to show you   now so the instruction that I got you can see we  have um sections we have vacation we have other   tables as well um vacation we I think vacation  we have um doctor table Yeah another table so   let's let's quickly do that t which is going to  be displayed as soon as the page loads up hom   page in that I want to create just a simple four  or five tables in here now the first table see   is container flu so we can spread it across the  entire page we have a row and you see we using two   two two two so making there are six making 12 and  that's for a full page so we have the employees   the number of employees going to display them the  number of occas that we have in there we're going   to put them there over time to doctor table SS  and a department so these tables are going to be   on front front of the application as soon as you  log in you're going to see the count of these um   people who have um um be added to that specific  table okay so once you have this we go to the   homepage and are very simple we are going to use  this in there so we go to the homepage and where   is it this one so that's our homepage and let's  use this table Banner control period you have   to include the name space for this and this  can be found in administration pages so let's   say it can be found here in the client. pages.  content pages. Administration pages I think so so   Administration PES and that is this one so let's  see it's still giv us error let's check it up so   content pages okay so this is not content Pages  this is rather Administration pages okay and um   we have Pages then we have our Administration um  page then we have a table banner I think so let's   control period let's save this and I'm going to  close this at time this what just still be doing yes so maybe I haven't saved that let's check  it again and now yeah it is soft now okay so   when you run the this is what you're going to  have aside from that we want to create the hom   page that we have you let's when you run this  let's see you're going to have this boxes they   are just the boxes that you have created you're  going to have them displayed um in there and   aside from this we want to add a logo that's a  profile so that's specific person that we are   calling or has loging we can include the profile  picture in there we can also update the profile of   that person okay so let's have a look on that you  while this finished running yeah so this what I'm   talking about you can see we have the employees  we have vacation overtime doctor sanctions and   our department so this is going to be a banner  which going to display the quantity that we have   in that specific table okay now you can see these  icons are that's a Bo stop icon that we installed   so how did I add them that's the question when  you go to the table where is it that's a table   Banner solution Administration and now when you  check this table Banner can see it is just an i   that's one icon bi bi for people so if you want  to know lot of these icons that's a bootstop icon   search on uh for it on the internet and you're  going to have a lot of icons you can be adding   them based on what you are looking up for okay so  once you have this when we check the page in now   we have this dashboard in here and you can see we  have this loger but you want to actually add the   person information or that's the person image or  something like that okay so defaultly we have not   added that yet we're going to do that later on but  we can add maybe a default image as soon as the   person hasn't added any image you want to display  that and you remember that in here I added a image   here that is known as default profile image here  so when you check the images and campaign logo   that is this one and when you check my photos  the one I shown you you can see that you have   this image that's a default one so this one I'm  going to use okay so I'm going to copy this and   in I need to create maybe a folder as profile  inside this images folder so let me stop this first yes and this must be  profile so let me add this as profile and let me paste this here so paste this  so we have the image uh in here okay so that's   what you're going to use as soon as the person  created or the person doesn't have an image the we   don't have an employee image we going to display  that so how do you implement this let let's create   a simple component to handle that okay so we go to  that's going to be under other Pages let's addor   component and maybe you can make it as profile  drop down because the reason why I name this   is when you have that drop down that's going to  have logout and also update employee profile so   you can just change the name or do a lot of stuff  with this now in here what can we create or what   can we add to this component so we can add just  a split button from bootstrap as you can see it   is just a split button copied from bootstrap so  if you want check bootstrap um docks you're going   to have this split button so you can see we have  here and now what is what I'm doing this is just a   button group and I'm having an image here I having  profile image is if it's equal to n then I want   to display the default image so here I have the  weight as 13 and the height is also 30 aside from   that that see I have this a button that I'm using  and it's just a drop- down Tagle split so that is   this one check the bootstrap docs and you're going  to find some in there if you don't know how to get   it I'll put maybe the link at the description you  can just click on it and I'll grab the the link   in from the bootstrap docs okay and then here we  are having just a profile and also um log out so I   have two buttons update profile and also just log  out now if I click on this log out this method is   going to get fired let me close this and open it  again so I do not have this black and white that's   the old style right so let me open it again and  and I'm thinking I'm going to have the one yes so   log out clicked and that is it you can see we are  injecting this custom oate provider that's what   we created in the second video and now we want  to check update authentication State we pass in   an empty model and now we're going to navigate  to the login and replace it before load the same   page as well all right so that's what we are doing  for this s the page P Lo going to have the image   displayed beside whereby if I click on the drop  down I'm going to have the two men in there for   log out and so for profile for now we're going  to work on this later on but this it's working already so we can just run this and and check it  out but before that we have to include this um in   the homepage now I believe this should be yeah  that's the homepage I think so so let's go to   the main layout and where we have this log out  we going to remove this remove everything from   here or maybe send is going to be a something that  we're going to be using navigate to we can even um   well we can remove everything and past it here  okay so this is the profile drop down control   period we can include the name space in here  okay and also maybe here we can include the add attribute this attribute and now this is  going to be an authorized so it means that   before you have access to this you must be  an authenticated user yeah so we have to   do that and you have to include the name  space for this let's see control period   yeah so let's include the name space in here  that's fine all right so you can run this and see beautifully so can see we have the image  in here and that if I click on this I have this   drop down so log out and now profile this is if  I click on this log out I'm log out and can see   it is directing now to the login page so we have  to log in again and now yes so that is this click   on log in again and now we wait and it's going  to authenticate us to the same page right so I   believe the server is down we are not running the  server that is the reason why so fail to fetch I   have not run the server yet so yes fa to fetch  so this is no problem just that the server is   down okay so we can handle the try catch here  to handle this this exception that's given us   when it fills to check but maybe later on we're  going to do that all right so once we have this   implemented let's see what we're going to do next  is when you check our homepage we need to have a   you see we having this na bar from the default  one and then here you want to have some buttons   in there okay so how do we get those buttons let's  see how to work on that so let me close this and   now let's navigate to the nav menu so there's  a nav menu here so this what we have from for   this when the page we want to change this and  I'll make it as maybe welcome or yeah welcome   will be okay all right so if you're authorized  we want to use um welcome to welcome you yes   welcome you and that is it what we want to do  so this is coming from the Tagle okay so let me   replace all the stuff in here with the simple one  we using this authorized attribute and as soon as   I loging we can just have the name and welcome  you so maybe at the end here we can have this authorized so there an authorized and the  last end you're going to have an authorized   route view okay so aside from this we are  going to have some buttons in there okay   so with these buttons I'm going to it is  a button that we are going the same button   from this so you know here this I'm going to  do let me just copy this and I replace this   with the new one that we have it is the  same thing I made a copy and paste and as   you can see from here let me close this  and open this again don't run yet so na menu control KD format it 12 okay so why you  having problem here let's see okay because you   have no implemented this so you see the same thing  we have the same now and I'm making a copy of this   one this is a two and now three now with this  three we are having this it is Administration   now the fourth one we are having department so you  want to add Administration and in administration   we want to add um user so I want to just do  click to hide and I click to um display okay   so I see I'm adding a CSS style of visibility to  this as hidden and also I'm visible depending on   the the state of the variable that you're going  to create to handle that we do the same thing to   this Navar two for the Department margin and  here we're going to push it upwards a little   bit and as you know when you see margin top you  know it is pushing it up isn't it yes so that's   what we doing and this is also a nav link if I  click on this you're going to also push this up   and um to do that and and here too we just have a  general General that's a general department um we   have Department itself and we have a branch so we  going to be adding Department general department   you can be adding the department itself and we  can also be adding Branch so before a user can   create or you can create an employee you must have  general department you must have um Department   itself and you must have Branch as a cascaded  drop down before you can have access to create   a new employee okay now when it come to the code  session what are doing here this is very simple   we are going to create um two properties here to  handle the department itself Department margin we   set to 3.5 umm and you can see we have the Cs St  as hidden so defaultly when I run this application   this CSS style here this is hidden this this is  not going to be shown if I click on this I want   to show this okay so I have also show how to force  and that is this so I don't want to show this get   it hidden so if I click on this if I click on  that button I want to show this see I said this   show is the opposite of this so initially this  is false the opposite going to be true and I   if through then add this and I'll do that okay so  this in case it is false then do it so you want to   just move it up and move it down when when I run  this you're going to understand this better based   on what you are going to see okay and also um the  next thing is we're going to also have department   so if I click on Department I want to also expand  the department itself how this default is hidden   and if I click on show you see I'm setting this  OB so the same that we are doing from here set   it to the opposite of each other and um we check  if it is true then set it to visible else meaning   it is false then set this to Hidden so that's  what we are doing in here okay so if I I save   this we have this general department clicked mean  there's a button here if I click on this general   department meaning I want to create um and and  I want to create this general department so in   case of that what I'm going to do maybe with  this we can and pause this for now let me just   remove this one let's save this and now let's run  this application and see okay so we need to reild this so let's before I think we  have to run the server because   we are not logged in so let's run the server first okay so I think let's try  to log in and see if the server   is is active yeah the server is  not it is still running let's see so let me just do it again from  here I click on the server the bag   and now okay so it's still run  as you can see from here so let's wait all right so the server is now active now  let's refresh it so we can try again so load this page and let's see so let's log in again and see all right so you can see login  successful now let's click on okay   and we are going to authenticated so when we  get there let's see the the nav I'm talking about okay so can see this all we have if I click  on this administrator this should move down and   that is it's going to add some CSS start to it  as margin um um negative 3.5 now let's see you   see has gone down and now this has popped up  have you seen here and US margin left of5 to   push it over here if I click on it again see is  off and now this push back to negative that is z   not negative Z because you don't have negative  Z isn't it that is there so if I click on this   to this also get popped up general department and  our Branch all these are icons from the bootstrap   icons and that's is what I added all right so um  if I click on this general what I'm going to do   that is where we have to ride an event up to to  display um a session where we can add maybe um   general department okay because here this is going  to be by adminstrator section or any person that   administrator gives him or her the the ability to  work here meaning that person is registered as a   user or as a manager and that will happen if and  only the admin gives that person that role okay   we're going to do that um as well so here if I  click on General it me I want to add a general   um Department okay so we must have maybe a box  so we can add and I'll save to database and I'll   make a query get them and I can I add employee and  I'll SEL this and and do a lot of stuff with it so   let's see how to also work on that as well so we  go back to the page where we were and this button   remember that here I clear some button from this  drop down that is this one if I click on so this   is general department this is user administrator  department and now here it is general department   let's this general department so here you must  have a button here for a click event to happen   this okay so you see that you have it in here  now if I click on this what should happen we   have to W I mean event to this so let's have  a meod definition to handle this but you know   one thing you know this is when you check this  this is just a layout and now this is a page a   body page so how can we get connection or how can  this page um connect to this page we have to use   State containers action event okay so as soon as  I click on this this action get invoked when this   action invoked and this page has been subscribed  then it's going to um receive the message and um   transform it and start using it so that's what  we need to do so we have to create a folder again   this is going to be the last folder for this video  okay so let's create one folder I know you are   tired of folder folder folder okay this going to  be the last one for this trust me so let's create   one folder for this and and you can name this as  application um state so let me just close this up so all the the the links in there the tabs in  there that you're going to be clicking general   department department and our Branch we have  to be creating the same state for each of them   okay so try to understand this and when you get  there even when I'm when you're offline you can   even do it yourself so let's see from the client  I click on this let's add a new folder to this   now this is going to be application um States  because we're going to be adding more state to   this now in this state let's have Department this  for Department state so let's create a class for   this let's name this a department state so  in this state we want to have you know it's   a class you want to have few properties and one  simple public method in this we using an action   and I we said this general department action  so we can invoke this anytime that we want   we set this to a Boolean that a show general  department so you want to show this you want   to hide this so this is going to Tagle between  the this general department that you're going   to create we have the department event here so  if I click on this you want to First reset or   currently we have only one reset here but when  we start adding them we have to or and I'll show   the current one so this is the current one if  I click on this I want to inv department so   show hide everything in case you have two or  more hide them and I'll show only one of them   that I want to display after that invoke this so  any page has to subscribe to this by using this   I disposable interface using the public void  dispose method and I'm subscribing and also   unsubscribing from F and that's what that we need  to do now once you have this let's go and register   this friend to create dependenc injection so we  can inject it and I use it a couple of times in   all pages so go to program. CS file and now in  that we have to register this beautifully in here so let me create a V Space here for this  and for you so I can just space this now control   period let's include the name space for the  Department states it is coming from it's even   there already it has seen it already so that  is it now let's go to no we don't want to run   it now the nav manager so where the nav is there  the nav menu and in here we have to we're going   to call this you know we are not going to pass  in any value we are just clicking on this to   invoke the method in here so we have to inject  this on top so let's inject this here so we can   have injecting the interface so let's say this  an interface you inject it here so we can have   access to that method control period and this has  to come from application State and in that we are   calling this method so you know when you call  this method what's going to happen check this   when you call this method you want to set this  to what to through def this is an undetermined   so when you set this to through it mean the state  here has changed and we have to notify any company   going to subscribe to this so which company going  to subscribe and that's going to be the home page   right so let's navigate to that but before that  we have to create the last component and that's   going to be the general page general department  page so I told you that you're going to create   a last folder right and trust me this is the  last one okay so um um Pages here and let's   add the last folder to this and this is going  to be Department um pages so all departments   going to come here and now in that we are going  to create a department page so Department pages   right click let's add a component and it's going  to be Department general department P this only   for general department so in that we have to  implement the ey disposable from the interface   so can see we add it in here aside from that  we implement the we inject the space the name   space or the container that we created earlier  on we add them here and in that we can include   so let's see I have just a simple um here that I  want to copy and paste it so let me here we are   using the table so this table we are yet to format  this table I just copied this from the bootstrap   and I just pasted it so it's a a bootstrap  table that you can see from here let's save this okay so let me also save this now let me  open this again so I can have it in the CID   form so we have Department state. Show general  department this going to render either true or   false if it is true then it's going to shown if  it is false this going to get hidden okay aside   from there we have a button and this button  is known as what add department so it's a add   Department button that we are showing on top  of the table so down here we want to include   let's create a department here um there is  going to be Department from the code section so Department general department dto we have not  created this department D yet okay we're going   to create it soon aside from that when the page  initializes we have to subscribe to this page um   that is the the general department action from  the state service that we create State container   control KD and when the page is about to dispose  we also have to um dispose it as well so we also   dispose it that's how we subtracting so it is  plus and subtract plus and minus we subtract   it and also we add that all right the next thing  here is we need to create our dto that's a general   department dto we have the dto entity already so  when you check our Base Library you can see we   have this entity and that's a general department  we don't want to touch this because this are for   the database sake we want to create our own dto  so let's create it in there as general department dto so let's see but before that maybe you can  also create our base Department dto because all   of the Departments are going to inherit from  this and this is going to be a class so let's   have a look at this as B department dto and in  that we want to have just only two properties   so when you check the The Entity it has this  relationship but for now since we are adding   we don't want to retrieve any Rel relationship so  we add the required ones what we need so that's   the reason why we have to use a dto to transfer  when you check the previous one let me let me   show you this let me remove all this from here  save this when you check this base entity you   could say it has a relationship here and when we  adding Department you don't want to add employee   no you want to add department when adding or  when you want to add Department if and only   when we adding employee but when you're adding  Department don't want to employee so we need not   to include this but if you don't include this here  in the database relationship you're not going to   retrieve department or employees which have a  specific department but in the dto we can skip   that so this is going to be the base dto let's  go in and create our general dto for that and   you know what is going to do the general dto is  going to inherit from this base that's going to   be the inheritance and that is all so we don't  need to specify any um property again just make   it as inheritance to Let's inherit from the base  so base department and that is all so make it as   public so we can have the method in there okay  so save this now let's go back to the general   department component and that is this so we say  it's already solved okay so if I what is the   next thing to do once you have this instance  created we want to add a dialog component so   we can be adding the this uh Department okay so  remember that we've installing fishing. um popup   and also the button so we can have a dialog from  this package that we installed so quickly let's   go in there and and create a component in here  and this is the last one trust me if I say last   trust me is the last one and from here from the  Department Pages let's add one component in here   and this going to be general department dialogue  so for this general department dialogue we are   going to have just a s Fusion component so first  let's um include the name space from the same Fusion this going to be the name space you see we  using the button the popup and the dialog service   from the same Fusion aside from that we want to  use this SF dialog and this is going to be the   SF dialog from syn Fusion I just copied from the  sync fusion um documentation so we have this let   me close this I hit this T and open this again  well let's see okay yes so our one we have the   bind visibility we set is visible so we're going  to create a variable to handle that there's a   weight we have the close button so maybe we can  set this weight to um 300 350 depending on what   you want to and 350 okay this is an event to open  dialogue we have show close event no this an icon   not event and here we have our department so  we see we have an edit form simple edit form   with just one property in here as what name  then we have a button as submit as a dialog   event button okay so let's handle this this must  be a parameter coming in from the page main page   from the home page aside from that when that's  what you're using to retrieve it in here then we   are going to if I click on open dialogue what am I  going to do this is a method if I click on this I   want to show the dialogue so that's going to be  the event so open dialogue and set this visible   to through where from this is visible we have not  created that and that is what I'm going to create   next that is visible to force initially so the  pages the DI component is is down as soon as I   set to through it's going to be up then add the  state has Chang because the state of this has   changed and you need to reload the page to get  this dialog box up aside from that if I click   on save that is this save button what do I want  to do that is where we call the database service   to handle that by first we're going to check if  it is null then return this tell the user that   it needs to provide Department name it's an Aller  type okay so passing the the content and the the   title okay so this all that we need to do maybe  later on we're going to talk about getting the   database service okay so and also we're going to  continue with this all that you've done here we   have to include the this dialog service in the  general department component so we go to General   department. Razer in here we have to include  this create a reference and we can now call   the method in it so down here that is the general  dep department. Razer down here we can use at ref   attribute to call a method in it as so far as  the method is a public type so when you check   this you see this is a public type where is it  you see it's a public type that's in the open   dialogue so we can have access to this using  this reference um the reference okay reference   and the reference that's what I'm talk about okay  so we have to create an instance of this and very   simple one we can just make a copy of the name  here then we reference it to this instance then   if I click on open dialogue what am I going to  do open dialogue where is it there is an open   dialogue so if I click on it we have to while  an event up to this I want to call the method   known as the open dialogue in this component  and I'll display to the user so get it open   and that's what I'm doing here so see this General  Department dialogue. open dialogue okay and that   is it so in here we can run this application  and I'll let see what you're going to have in now okay so let's log in in here so succeeded now for for this the the  notification that you seeing here it is from syn   Fusion it means that you don't have a license key  so I have a video done on how to claim free Comm   LC key from s fishion and now register it in the  component so you can have um this message removed   okay check this video description I'll put it  there so you can watch it and um do it all right   so once you have this let's have a look now that's  the department I click on I have this drop down   now if I click on this general department let's  say I must have this popup but I'm not having it now yes General and they should call but it is  not so let's figure this out quickly so let's   minimize this here now when you go to the na  menu nav menu where is it can be found in the   layout open the layout nav menu now here we call  this to invocate so it means when you go to the   homepage from this it has to get notified from  this homepage but we see we are not adding the   general department component so let's add it we  have to add it first so let's add it here now this   do we need to add name space to this yes of course  so let's save this now let's run this again and see okay so let's try this our department  general department and and that's it yes so   we have it so we see we have this the default  one that we added and this not what we want   when you check the bootstrap documentation  is the same thing that you're going to see   over there okay so we're able to show this  component in here now if I click on this   add Department you must have this yes you  see add name and at end going to have save   for now there's nothing in it as you can  see so if I click on Save I'm you need to   provide Department name and that is a SF doll  component that we using from the same s fusion   and it is working perfectly if I want to close  this click on this and that is it fantastic you know this is just a project for a company and  I am not actually sure that the company will love   if they see the document that they give to me on  the internet okay but because of the love that I   have for you guys I have to even sacrifice and  help you guys understand so let me just flash   it quick and um be you can see it so let's see  from the project design I want to only show you   the the diagram okay only the diagram so want to  check the diagram you could see that here we have   the company we have general department we have  department and a branch employees and with each   employee is going to have access to Vacation  table overtime table and now the doctor table   here it is the health sector so and we have the  sanction table so the from General up to branch   to be a cascaded style so we going to be the  cascaded drop down let me put in that way so   as soon as you choose a general department then  Department be available for you to select it goes   to database and I make a sech and also as soon  as you choose a specific Department it get the   ID quickly runs the database and I make a search  and I retrieve all related data to that department   ID and I fill it as a branch so without selecting  general department a user cannot have access to   Department without selecting Department the user  cannot have access to Branch are you getting it   and now you employee here has a branch so if  I personing a branch ID of one I know Branch   ID of one has a department ID of two and I when  I go Department ID of two it also has a general   department ID of one or three or any number so we  see they are interrelated that is what we known as   relational database so you need to understand this  first before we can actually move on else is going   to be a hectic for both of us that's reason why I  have dedicated this video to help you understand   and now establish this relationship also when we  have a look with the vacation overtime doctor and   assension they may have some few properties in  common so in doing that you know when you check   the principles of um developing you know normally  I do not follow the architectural design rather I   do follow principle so I can create my own custom  architecture one of the principle that I always   talk about is dry do not repeat yourself so there  are some properties found in this vacation also   in this over time and up to the sing table that  we can extract it and create it as an inheritance   we can herit it through all these four um model  that you're going to be creating so that is what   you're also going to have a look we did that in  the department here I also go through and I'm   going to do same to this after that may the next  video when you have enough time we're going to   talk about how do you create generic interface so  we don't want to create you can see we have a lot   of interface to create here we want to learn how  to create single interface and use it across all   over the repositories also we want to create just  a single generic um um controller then we can use   it across all the other controllers so we have a  lot to talk about but it's going to be in pieces   so let's first handle the one to one in our many  to many relationship as I saider on if you haven't   watched any of the videos pleasee do that because  they may help you understand this better also with   every episode with every episode that I do I put  the source code under the video description so   you can just go in there and grab that specific  episode source code so let's say um we have done   from part one up to part four or part five when  you check the update one there beneath this video   we're going to see the source code which comprise  of the part one to part the current part that we   are handling okay so you're going to find it over  there as well okay so quickly let's see so this is   what we did we we able to design this very simple  one adding classes and removing it there's no   JavaScript here it is just a CSS and a c you see  so it's a it's working as expected as you can see   beautifully Uh custom uh uh um this one is custom  made right from net code Hub all right so and   you can see from here to we have this that we can  update profile now we haven't we have only the log   out and which has access to the login and Al the  registration and that's what we have now so let's   close this this we're going to talk about today  let's close this and now let's start with the models so when you have the look at our project  source code you can see from the previous video   that we created our classes and this classes we  have the data set um layer and that is the server   Library so it contains all the the repository  the contract for the server as a repository and   also when you check the that is the client library  that is where it has the services for the client   so that's where we make an API course and I return  it to the the UI that is a component now when you   check talk about when you check the Base Library  it is a domain which has access to our model and   our dto you know one of the principles that I want  to talk about here it is Case Case K I know you   know the case not the case that you know this case  here it means keep it simple stupid so keep it   simple so meaning when you create your application  in the source code must be simple for everybody to   read do not make it too complex or complicated  for reading else it's going to you're going to   have a problem in future if you want to scale  the app you want to add from more features to   it so doing that I decided to actually make some  slight changes in this instead of creating all   our DT WS we want to remove our DT WS here which  are not necessarily needed and want to use the   models from this entity the reason is we are not  doing database first approach so database first   approach is going to scat fold all the database  columns and turn them into models so if you want   to check here and we've applied some Properties or  some rules such as required maybe other properties   to it one as soon as we apply database first  approach we apply migration it's going to over   right that going to clear everything but here you  know we are not using database first approach we   using Code first approach so it means that we are  going to perform our migration here and it's going   to affect the database so in doing that there's no  need for us to create a dto which in which we have   the same properties as we have in the um that is  the entities and whereby what we have in entities   you want to display everything to the user you you  can create DS whenever you want to hide you want   to select a specific properties to the user but  in this case we want to display everything because   talk about the general department it has only  three properties it has I think two the ID and   now the name so when you check this Bas Department  you could see it has only ID and our name and now   we want to display this to the user so there's no  need for us to to create dto for this so in doing   that I have to remove some of the dto then to make  it simple as you know one of the principle that is   case keep it simple stupid it is okay so let's  try to handle that first then we start with our relationship so let's go in there and now  all these account base I want to remove   them with also the base department and this  general department dto so I want to remain   the custom user claims and that is what we are  using to hold data um from to prepare data or   to set the claims to the authentication that's  der authentication we did this in the part two   of the this series so you can check that one  out we have a login and you know login is very   important it's coming from this account base  okay so that means the account base shouldn't   be deleted it's supposed to be here and I  have deleted that so let's let's get it back   okay so for the account B is I think do I even  have it somewhere and maybe unless I check it out okay so I got it so this is the dto from here  and I'll page this as account base now let's see   if I could change the name in here yeah that  is even the same okay so the account base is   there and that is a base for the login and so the  register both are inheriting from this because the   account base has contain this models and these  properties are going to be used by the login and   the register component isn't the component of  the the class or the model also um we have this   refresh token and as for this we are not going  to edit any we're going to maintain them as here   so that's what we want to do we wanted to clear  those guys above you want to clear them and now   let's um start to include or create some of these  models and add to what we have in here so as soon   as we delay that you see we have some issue here  that we need to fix to general department D it is   not found that is when we're trying to create  this component in the four video so instead of   the GTO we are going to use the the main boss  that is the dto itself so let's this gener dto   we can have it from this entity so we have to  include this as an entity and that is all fixed   now also let's check this up now here too we  need to modify this so when I'm done with this   to I'll put it the source will be available so  check the video description too and you're going   to see it in there waiting patiently for you  okay so that's what we need to do now we can   build this and let's see if it's going to work  as expected oh that's fine so you can see that   it worked and you can see one suceeded so for  updated me you have five project and that is it   okay so let's see how to go about this and now  want check the diagram that I shown you you see   we have a lot of table that we need to create  and now let's see how to go about this so when   you check the entities here you can see we have  the general department and we do not have we must   have the branch because when you check you can  see we have general department we have Branch   okay and we have um um we have Department itself  aside from that we have country we have City and   we have um town so these are all cascaded and we  must have a relationship established between each   of them so let's first have a look on creating  this now we have a general department created   which inheriting from the base entity So within  this base entity let's try to modify this a little   bit so when you go to go to definition you can  see it is having um in connection with this it   is having one to many relationship meaning any  model that we make a a reference or inherit from   this base and it is going to have a list of model  which going to be one to many so with this this is   what you want to do you want to remove this first  then the question is why am I removing it we want   to have it in a cascaded form so um a user an  employee is going to have um a town ID the town   ID also has um a city ID the city ID also have  um um country ID right so you can see they are   in a hierarchy form when you talk about about the  department to the department general department   we're going to make a reference to the town the  town ID has in connection with the with the branch   not the town the branch ID has in connection  with the department now the department also has   in connection with the general department so what  you need to do here is you need to reference only   the bige the bottom one that is the here when  talk about the city the the country or the town   you have to make a reference to the town in the  database to the employee and also when you talk   about the department you have to make a reference  to the last one and that is the um the branch so   when you do that it's going to have in a hierarchy  form of relationship established between them and   we can drive any data that we want when we start  to implement our real logic so let's have a look   um so we're going to make Ed here by removing  that list or that link from this Bas entity so   here we have only the ID and now the name now we  go back to the general department dep M and now in   here we want to pass in a specific model related  to only general department and now with this you   want to have a list of department it means that  one general department is going to have a list of   sub Department in it so let's say we have um  it section or it as a general department now   we going to go into it general department you  have we have some Department inside this it or   um any giant Department Department you have sub  Department in it and that is what you known as   a department so this is a big department which  going to have a list of this small departments   okay now let's also check how to create connection  with the the department to this general department   so here is a one to many relationship with the  department and now when you check the department   it's going to be a many to one so with that many  to one defaultly EF is going to create an ID for   us but you know what you like to specify y it  ourself so we rather want to include the general   department and now this is the general department  ID so this is a link going to link it together so   anytime that we are filling Department here we  must have a drop down list of department such   that when we select the general department you're  going to retrieve the ID and this ID going to be   stored in here so when you check the department  table you're going to have the department name   from here Department name Department ID and also  we're going to have the general department ID now   this general department ID here it is making a  reference to this giant or this parent general   department and in that you can make a search  through um this general department using the   ID specify in this department that is what we are  doing and you know we are using one to many and   a many to one relationship so anytime whether you  make a reference to this we using the many to one   relationship and now in the J Department there  whereby you have this list we are using um one   to many meaning one of the department we going to  have a list of this department okay that is for   this now let's have a look with the next one so  once you done with the general department let's   see with the Department itself now we have  this in here what of the branch what can we   do here we're going to have um one Department  going to have a list of branches okay so let's   also have a look on that so let's create  a class now the name here is going to be a branch so let's wait then so that is a branch in  here okay so the fing Branch already part of this   okay fine so it is here oh I didn't see it okay so  this Branch also defaultly has is inheriting from   this that is the ID and the name fantastic aside  from that we want to have a list of this so This   Is A Min to one relationship to the department  many to one relationship in here to the department   now see we have Department ID so many of this  branches is going to have access to one department   so that's why you say many to one Department okay  now let's check the department itself and also   when you check there what can we do to establish  relationship in here we have to establish one to   many relationship between the department and  now the branch so go to the department and now   in here we establish that relationship so one  to many so one Department going to have a list   of branches I believe this is this is cool right  that's fine now let's go to the next one we have   general department we have department and then we  have Branch so a branch is going to have a list   of employees so one branch is going to have a list  of employees let's say in Ghana here maybe I have   in Acra there's in arra here you have one branch  now within that Branch there are list of people   we have a list of employees working in this camp  or at this sector so this brand going to have a   list of employees let's so have this figured out  so you go to the branch in here and now in there   we need to specify the list of employees as a  relationship in there so what can we do it's   very simple we establish one to many relationship  as we did for this um Department that is a branch   so we go to the branch in here okay now here we  have to establish it to the employees so going to   have one to many one brand is going to have many  employees I believe this is clear thank you let's   move on okay let's save this and let's go let's  set it up so once we have this created established   how do you receive it from the employee section  let's navigate to the employee model so that's the   employee model now in here we want to remove  what we have in here so let's remove this one so we have the branch that is a branch  so this this Branch it is just a Min to one relationship because when you check here many  um many employees going to have one branch and   we have the branch ID in here okay so we are done  with the department now let's go to the country   the city and also um that is the town okay so  let's have a look on how to also do that so if   you actually go back again your department has a  list you can see this dependent okay so um this   independent I think so it has dependent anybody  this there's The Inheritance so you can see it   just having a list of departments and now when you  go to Department it is having this relationship in   as many to one okay referencing general department  ID and also it's having a list of branches so when   you go to branches it also has has this many um  to one relationship specified in here now this   Branch also has a list of employees so we have to  also make a reference to this employee and that's   what we have in here so employee with the branch  ID because making a reference to the branch that's   fine okay so let's see now let's go to the town  first but first of all let's have a look with the   country so let's create a class for the country so  add a class and the name is going to be country so   we going to have a list of country and now within  that list of country let's see what we can do in   here so for Country we can also inherit from the  base entity because country going to have an ID   and the country name so we inherit from the same  base as you've seen and as you know we've done   it before let's make this as public as usual and  aside from that you going to have relationship and   now this is going to be one to many relationship  and you're going to have a list of cities okay so   one country to have a list of cities Ghana here  talk about Ghana is a country it has a list of   cities like it has AA it has kumas it has cap  C it has a lot of cities in here okay so that's   what it's also doing and it's a list we call it  at cities we have to also create a city class so   we can also accept the relationship in there so  quickly let's add a class and we say this city   so with this city class what is going to happen  we also going to have uh going to inherit from   the same um base entity because it is also going  to have name and ID isn't it ID is defaultly for   the primary key automatically so by all means we  have to include that as soon as you want to save   it to the database it's better or it's a mass  that you have to add it so here we adding just   one complimentary property and that is the name  so we heard from here and aside from this since   we are making a reference or in connection with  country we have to also receive V in here so in   the city what can we do we need to make many to  one relationship from this country so we passing   a country ID so from the city table we going to  have country ID and this country ID is going to   represent the actual ID of this country um model  or object or instant that we sa to database as   a record now here aside from this the country  it must also have a list of town a country not   a country so that's going to be the city okay  so City m is going to have a list of towns so   list of towns in here so meaning that we have to  create a town model we have it already in here   so check it out we have this it inheriting from  this because time is going to have ID and our   name ID is automatically primary key isn't it  good so let's remove this from the top and now   when you go to the city in here we have a list  of town now how do we accept the town let's see   how to um handle this relationship in here so  you must specify City ID in the town field so   where is it there is a city town I'm going to  open this then go to definition this is a town   which has the ID and now the name and aside from  that you must have City ID and now City name okay   City ID and the city object itself making as a  reference that is a many to one so as you can   see we are establishing one to many many to one  one to many many to one okay now aside from that   a town must have a list of employee so maybe in a  here the the session or the campany that we have   the brand that we have here may have 20 30 people  from this city or from this town okay so we have   to also establish that in here and that's going  to be one to many with the employee model so one   time going to have a list or a lot of employees  okay let's remove one of these control KD we can   format it to and I'll save it fine now once you  have this let's check um the employees field now   the employees so let's check it in here so you  can see we making a reference to the town and   our town ID so when you check this this is making  a reference to this town if I peep this town and   I click on PE definition you can say this town  so have a list of city now if I Pi on this city   and I go to definition City also has a list  of country ask have you SE good now when you   check the branch too the branch has a list let  me PE definition it has a list of employee okay   or department now the department also has um  a link to general department as you can see so   we see is in a hierarchy form of relationship  that we establishing so as soon as we pass in   the ID of a specific employee we can retrieve  the the town we can from the town ID we can   retrieve the the city we can also retrieve the  country the same thing applies to when we have   access to the the branch ID the branch we can  retrieve the department from the branch we can   also retrieve the general department from the  Department table using the same ID so we are   creating them and using relational database so  we are linking them using the foring key among   them to stick them together as an whole entity  okay so let's say we have this done let's close   this up the next thing to do here is you know we  don't want this to be empty empty as soon as you   decide to start we want to passing some stuff  in there so let's specify an attribute known as   required and in that I'll just have to remove all  this and now um paste this in here it is the same   thing here I have the C ID I have the file name  the same full name job type address telephone   number and um phone number in here as well so  maybe even here we can also specify data type   as three phone number here could be an address job  name can specify the minimum file number you can   specify this as well so quickly let's have a look  with the data that is a address so data type then   we say this data type Dot and that is phone number  you see so we have phone number in here and with   the address to we can specify the same data type  these are attribute that we can um use them as an   address so okay there is an email address so we  can have okay so here we not having this just a   test and noral test already so we don't want to  include that okay so we can specify lot of stuff   in here but for now let's maintain only this now  as you can see you're asking yourself where is   the ID where is the name it is coming from this  entity base is it base entity base so that's a   base entity this Bas has in the ID and our name  so we have to we can make a reference out of it   remember dry do not repeat yourself so try to  create an inheritance try to inherit from other   model so you make your code very simple as Kate  says keep it simple stupid yes you want to keep   it simple as well okay now from this base we want  to also apply some instruction or some um this to   that and that's going to be the required attribute  so let's go to this base base entity and now in   here let's make it as required and also set this  as Str to now you see there an where is an ID the   ID must be there because that is what each model  need as a primary key fine all right so we have this let's save this now let's see the next one  to talk about so we are done with the department   now let's go to the other tables and that is  the overtime table when to check the yeah so   when check the table the diagram that we have  you see we have other table so these are what   we've worked on from the employee table we've  worked on this we've worked on the the branch   the department the general department and also the  country the city and and the town so we are done   with them now let's go to these four tables  in here vacation overtime doctor and now um   sanction now we say these tables are related  to the employee now what does each table take   it takes in the same information um or part  of the information from the employee data the   employee model and it has extra th extra four  models which are unique to it so in order to do   that we can extract the common properties and  I'll keep it as an a base entity for that you   so maybe since we have a base entity we can also  create one class and I'll name it as other base   entity meaning it is making a reference to the  other table which are the four table that I am   talking about or you and I we are talking about  okay yeah so you're going to have this Bas entity   um created and it's going to hold data for the  vacation the overtime the doct and the sanction   table okay I believe you know what it does isn't  it vacation is vac time over time is when over   work the time doctor table is when is about  your heal whether you seen doctor you've been   I'm giving some medications and Etc dat and Etc a  lot of stuffs and the S is maybe you've committed   something wrong and you are under punishment so  the start date the end date the punishment type   and the whole lot we can also specify in there so  now let's create a base model to handle all this   remember dry do not repeat yourself kiss keep it  simple stupid okay so let's do let's follow these   two principles today maybe later on we talk about  the other one that is a solid we talk about that   too all right so let's create a nice uh model in  this nice model we're going to name it as other   entity base so you can just add new class and now  this say other entity base now I'll just have have to makes these modeles available maybe be asking  yourself oh we do have these properties already   in the employee table so why are you putting it in  here yes we do have but let's say when we display   the employee table when you display the vacation  table the overtime table the doctor table and now   the St table Etc we want to display user data and  this data we want to use the server ID you see   this Ser ID file number the is not going to type  in file number anymore when trying to access this   table or when trying to fill up data to this  table all that user needs here is either the   server ID or the file number we F the database we  F the the employee detail from the database so we   can provide the other one so in case you provide  sver ID this is going to be a unique and we can   search through that grab the ID we can also grab  the pH number and in case the person want to add   any other related message to it can just type that  and I'll add the current data so that necessarily   mean that here we're going to be adding the same  data again no provide a S ID and now we can fetch   from the database from the employee table and now  we have to populate it and now go on our way so   don't worry when we get there I think I'm going to  make things clear or you're going to make things   clear for yourself okay based on what you're  going to see you're going to understand that   okay so let's let's move on now we have this base  entity created for the following table that I just   mentioned on let's copy this and we need to create  the first one that's going to be the overtime   table but first let's have this overtime type  so you're going to have time type table created   as a class so this is a type of the um this now  this type is going to inherit from the same base   entity because going to have an ID and our name we  can clear this from the screen to make it simple   let's save that and now with this let's make this  as public tool save this let's create our overtime model now we right click on dependencies we go  to the add new class and it's going to be over time okay okay so this is over time now with this over time you  want to have the following properties which going   to inherit from this the default um class that  we have created that is the other base entity   so meaning in another base and the we have about  three four properties in here and now these four   properties are going to be inherited by this  over time I hope this is clear good now let's   see from here let me remove all the this to make  it simple so it doesn't scare you you can see we   have start date we have end date so over time  the start date the end date now you have number   of days so in here you want to grab only days  so this is what the instraction is saying the   company said they want the user to type in select  the start date and I also s the end date now the   system must automatically calculate for number  of days for the over time so in doing that we   do not have to set this access against this it's  rather we have to grab the data as soon as we we   have access to this we can calculate it and now  append with the date so here we are extracting   the date and now we want to get a number of days  from it that's the reason why we use the days I   hope it's clear now this we want to establish  relationship as well okay so here it is many   to one and now you want to choose because when  adding overtime data to the table you you must   select the type the type okay I don't know  the type yet but maybe the company knows the   type that they want to create but for now in the  testing session you're going to add any type to it   then we can now test it out so you have to select  type before you can add the overtime data in here   and now you need the overtime type ID so that's  overtime with eight entity and that is a with   eight um relationship let's go to the next table  and what what is going to be the next even table   we can talk about sanction table and sanction  type so sanction type going to be the same as   what you've done so right click on this let at  the class sanction type and this also going to   have the same ID and our name so we're going to  inherit from the same base entity it t the stion   class so let's create that class and establish  the relationship between or among them stion class and now within that sanction class  it is also going to H from the other base   n because it is the default properties for  all model so we have to also inherit from that all right so you see we have date punishment  um punishment date and our sanction type so we can   also select that and now you move on aside  from this what is the next step we can also   have a look on vacation so vacation type two we  can um create a model for that so vacation type   and now within vacation type we are also going  to create the same relationship here with the   vacation model we have to clear this and now  with the vacation let's copy this let's create   a class for that vacation so add a new class  vacation and now within that vacation class   what can we do we can specify few properties  and also inherit from the base class that we   have created and that's the other based entity  now in that what are the properties that we need we need the start dat the number of days  now we have an end day so end day two we are   going to add automatically and I get the date  the date for the user and vacation type and I   we establish the relationship that is a many  to one and one to many in the vacation type   in here okay now the next one I'm going to  talk about here it is the doctor table so   whether you have any medicine doctor within  your period we have to create that I did not   actually like the name I could have made it  as health but well that is the instruction   from the company so I need know to change  it what programmers do here is you do what   I've given to you and at the end you have any  suggestions then you can work on that but for   now let's do what the company says so let's put  this doct table and now this doctor table has it   doesn't have any doctor type okay so it has  only the inheriting from this other base and also it is um having this medical diagnos and  a medical um recommendation so this is what is   having okay so these are the models that  we need for this application so far well   we are not yet done so I cannot promise  you that this is going to be the end of   this model this domain maybe we might add  more domains we must remove some of them   but don't worry let's leave that one up  to you and and I when we start doing it   you both of us going to think together and  I see what you're going to do whether to add   new model or to maintain or remove some  of them okay but for now this is what we have so you know that since we have created  these models definitely we're going to have in   a table form so in order to create table our  data says whereby we have our appdb context   class we have to make a reference and I use a  DB set to call these models and and and it's   going to use them to create a table based on  the name that we specified and and the model   that we use so let's see how to do that to you  we've done this earlier on I believe you can do   that to even close your eyes and I'll try it  and let's see go to the data set project and   now from the data assess we see we have this  abdb contest now we specify this um and we are   going to let me let's group this okay so we can  see as soon as you have your eyes watch them you   know oh this is coming from this group this  from this this from that okay let's simplify   and also group our our code once you organize it  as well so we have the employees sitting on top   and that is this employee we give a space in  here we have all um department and it is the   same so that's an all department so we can also  create space between and that an all Department   here let me just group them or Department  it is general department department and our   Branch we also aside from that we're going  to have um so maybe here we can have general department general department then we can have  this department and then we can have Branch aside   from that from it come to this side what are  you talking about what do you think I'm going   to write we have discount then we have what  again City isn't it then that's right you've   got it we have town so we have this two and now  this is going to be the authentication so here we   have just authentication and this authentication  you're going to have um rows two and you have um   user rows and that the r as the same as the user  rowes we have system rows okay so not the name row   going to be the row in in authentication then  let's have a look with the other table so here   we have other table and this other is going  to be the vacation you're going to have the sanction we're going to have what again the  doctor then one left is what we have a s over   time that's fine thank you for remembering me  so over time so let's have that also specified   down here and and within that we see we have  each has a type so we have this type we have   a type A type and there only doct doesn't have  a relationship here okay so we established both   one to many and our many to one here we not  having many to many it is just one to many   and our many to one relationships okay so this  what we are doing after doing this you know what   to do we have to run this save this build this  and I perform database migration to get this   model created but since we establishing new  relationship I suggest we delete everything   because so we do not have error in writing this  or we can even try this and you let's delete it   first so I want to go to this space where we  have the database system you can try it okay   you can try it and see in case um it worked then  that's fine we are not having this so I'm going   to click on this plus if you're not hav do that  and with the popup choose the local now this my   machine who are choose the security as through  yes do TR it and I click on connect and that   is it so open it and click on database and can  see we have this demo so I open this demo open   tables so I want to just clean this demo  demo DB close connection and then clear it up okay so it is gone and now here to go to the  data and migration I'm going to remove this so   it's it's going to be like the app is fresh it is  fresh like foots okay so let's see now the package   manager console let's start a new Migration by  make sure you choose the data assess layer okay   it's not the client it's not the server rather  going to be the server library but that's we have   our EF installed and our updb contest class as  well so add migration now let's make it as first   going to be the first one then D that's going to  be the output a data folder open it and now create   another folder known as migrations make it simple  and put it everything in there so you're going to   create a file and now um past it there in case we  do not have any error then we're going to apply   database migration does an update database  to turn the code into an a thing that we can see oh okay so we having an error  here the specified Jon so let's   do this let's clean the solution  and we can rebuild this project again I'm going to clean it again once more  let me make sure everything is in order okay   so um I think five suceeded that's fine now I'm  going to rebuild this do same okay so reild this   solution now let's see we're storing some get  packages and around this again and aside from   that you're going to run a database and see  the migration if this working then we see okay so it is done now let's try again so  let's CL screen and add migration Let's   see we have the same issue so client.  dep Jon does not exist so why can't it   doesn't exist let's see let's see let's  see let's see the back this I'm going to okay so this why I did maybe let me  tell you I just had to close and open the   app again and I did nothing again close  the application and open it again so if   you're having the same issue then please  do that okay pause the video and undo it   but I believe you're not having because  maybe M could be some errors that I made   somewhere else but not in this uh video so  let's update database and let's have this created so this is going to run all the queries  that we have specified here see we have a lot of   table that has been created or this is going to  be the code that we have creating primary Keys um   creating um foreign Keys you see referential  action cascaded it means as soon as I delete   this they going to be deleted and Etc you have  all this in here and that's going to a database   so we're going to have about 20 or more tables  in the database so we say still running as you   can see yeah that is done check it up and now  let's make a refresh to the database folder now   let's see the current database that we have demo  employee DB that's fine open it up and then let's   check it up tables oh let's see we have about 10  or 15 tables guess what oh that's right from tabl   see we have it for branches application user up  to Vacation type can just pause the video and I   try to count going to have like 20 tables yes so  this is a small application but I had a lot of   tables so there's no there's no smart application  okay there's no smart application any application   is a level one it's a big one okay so let's see we  can just close all this so once we have all this   um working itat we've done with our relationship  and we've done with our model but I think we have   enough time we spent about 48 or 45 minutes  now so we can start working on our um generic   repository so this is what you want to do you  can see we have a lot of model in here from um   application um from user up to vacation we have  to create interface and generic type for each   and every one aside from that we have to also  create um a controller for each and every one   you can use generic repository whereby you're  going to have a generic interface you're going   have a generic um implementation and we're going  to have a unit of work then we can use them we can   herit from each of them and I use it once and for  all we can also have a a generic interface only   generic interface but we're going to implement  the other ones implementation specify the model   and now um injectate create dependency injection  in it create a generic controller and I'll start   using so I want to start from the known one  so let's start with a generic interface so   we're going to create only generic interface and  generic controller take note generic interface   and our generic controller but the rest you're  going to implement our interfaces for each and   every model that you want to create take notes  that's what you're going to do so once you do   it try to learn how to create generic you don't  know how to create generic interface I'm going to   teach you today if you don't know how to create  generic repository not a repository generic um   controller too then I'm going to screw you today  so sit tight get some water and then let's move on so in order to do this first you're going  to create a generic interface which going to   be used for all the model that you have created  these are the basic ones so we can specify we   can customize each of them in the application okay  so let's say from this we can have something from   the contract you know from the data set layer  that's a server Library you see where we have   this contract for that we have one already and  that is a is account this Isa account we want   to um separate the authentication from the system  because authenication is on its own we don't want   have any any confusion or any issue between our  models and our processes and the authentication   so that the reason why we are not implementing  this um generic interface inside or we are not   inheriting from this generic interface the model  has it own interface and that is what you see as   our using account so you're going to create a  new one and this is going to be an interface so   take note I choose a class but I'm going to pick  interface later on from this section and now in   here let's make this as I generic interface so I  generic repository interface going to be generic   everyone you can use this so let's make this as  public and you can just remove this to make it simple okay now in here since we want to create  it for only a specific model we're going to make   it as T value so this going to be T value it  means anytime that you call the interface you   must provide the specific model that you want it  to relate aside from that you're going to have   these properties is it Properties or interfaces  yeah interfaces you know it's very good to use   task anytime that you want to deal with database I  see a lot of people trying to get access database   they do not use tax when you use tax gives you  the access to use an asynchronous meaning a tax   will wait for a process to be done before it  gets return return it's very good and it's a   good practice to use tax all the time try to  use it response is a method or it's a service   response that you and I created earlier on in the  first part video so when if I Peck this it's has   just a flag and on the message that's what it has  okay and now here we have a TX of get by ID it is   returning just the the Modo this getting the  list and that is all so it get all get by ID   insert it update and now delayed by ID very simple  generic interface if you have any custom ones you   can create a custom interface and inherit you to  the the base that implementation and then create   that one too when we get to the employee whereby  we going to use we going to create a custom um   interfaces attached to this I'll teach you okay  I'll show you how to do about that so for now   let's stick to this I hope it's simple for you  isn't it so pause the video and type them and   um pause it if are done let's move on are you  done that's fine so let's go let's keep going   now the next thing we going to do here is once  you have this the generic we're going to create   our implementations so first of all let's create  our general department repository we can create   that let me just close the the DS because we  done that's the domain so here check this the   implementation we have only one here we want to  add one more not one more we going to be adding   more not one more so this general department  repository so it's a class and this class going   to inherit from this it's going to from this the  interface that we have created okay so you can   just increase remove this to clean up and now with  this it has to implement the interface so let's   Implement all of the interfaces you know here we  specify the model that's the general department   okay so in here delete get or get by ID insert it  what we can do here is in C version 12 there's a   new introduction of primary Constructors anytime  you specify this this is going to be available   in the whole scope so there's no need for you to  initialize it again very simple one keeping your   code simple and stupid that is a case take note  so we have this delet by ID so in in case I want   to delete what can I do first you want to have two  method these method are going to be used often and   that is what known as dry do not repeat yourself  so try to put all method which can be called often   in a uh mean in this a class that you can be  calling it all the time so I'm going to have   this two method down here this are General method  that is in case a mod is now I want to return this   in case it works everything is successfully done  process is completed I want to return this okay   it's a new general response that you are returning  also I want to have this method that is a commit   because we've been we going to be using a wait  save changes Asing save changes Asing all the   time so I want to have it in just one class so I  can be calling it all the time also I want to be   checking create this okay so let's move on I I'll  teach you what to do okay so let's see now from   the delete um this this is a delete by ID we're  going to supply the ID to this method now this   method is going to call this your Petry that's a  context class as a a gateway to the database and   now in that we want to have this simple method in  it this must be an async so do not forget because   a task so it must wait then aside from that you're  going to have this method so we're going to check   for Department um we check if um the general find  is going to find it from the the table in case it   is not there it means it is not found then return  this method check down here that is a method   soorry Department not found very simple isn't it  go back again in case it is then remove it and   now commit a weit save changes call this after  that return success call this we are done done   let's move on now the next thing here it is to get  all department and now with this we can use this   Lambda expression this must be an async I believe  you haven't forgotten so you make sure you add an   async to this we get the data from the database  make it as a list and I return it to the user very   simple um way okay so use Lambda expression we can  close that and now here we have to use I think the   EF call yes the next one is the fine Asing that  is fine user by or fine Department by ID this   one so we can just replace it with this getting  the ID must be an async then find asyn find async   right going to passing the ID it's going to make  a search out of it and I return the response very   simple in case it is not to it's going to return  it the next one here it is a insert so if you want   to insert it what can we do first we can check  it this must be an aing so you have to take notes here then in this we are checking check name so  you call this method this method has to return   either true or false so if it is true if it if  the object when it check the name you don't want   to you want to skip repetition you don't want to  um um add um Department which has already been   added no so we check the name the name going in  there we going to check from database and check   if it is there already then you want to return  so the method which going to help you understand   this is the method I'm going to um write it down  here so check the name we passing the name and   now we check from database um if it is there if  it is there return now so return now means here   this is null and if it is now return true but  in case it is not now return false okay so if   it is null here what we are taking here is if  it checks and now it is null meaning that here   the name the object is not found and it is going  to be true so if true then you want to come here   but if it is false then return this meaning the  data is already there you want to return this to   the user but in case it is not there then we add  it to database we commit it and then we save it   return the this information to the user that's  what that we doing now when we get to the update   to we also doing the same for the update let me  just grab the update in here and for the update   we are just updating it we also check it and  return what found in case it is not if it is   there we update see we have only one property in  there that's going to be the name so we commit it   and we return success very simple one as well  okay that's all that we need to do for this   model that's we are done very simple now we save  this you can now close this peacefully the next   thing I'm going to talk about here is you see we  are still implementing from this isn't it we are   going to talk about um the next one and this is  going to be the branch not the department first   so here what we're going to do here is we're going  to create a department repository for this so add   a class to the implementation this is going to  be Department repository and now this this what   I'm doing very simple one so here I'll just paste  it it's the same thing just copy and paste and we   see Department proi we inject the same thing and  now because we're doing the same just that here we   have to change the department table and we CH the  table in here and also we change the object that's   the mod itself that's the thing that we doing the  value is the same as you can see from here it is   the same so pause the video and I'll try to do the  same thing as well okay now once we done with this   we also going to hle the next one that going to  be the the branch so let's have a look with the   branch repository we also create the same class  add a new class for this Branch repository and I   know the branch first is is going to inherit from  the same interface and I pass in the branch as you   can see from the branch in this you're going  to specify that is the delete it is the same   so let's go through one this a delete aside from  that you're going to have the get all and get by   ID what it tries to make a search from this get  all get by ID we have it in here the next thing   here we have um get response or insert it so for  the insert we also want to specify the insert this   you can see we change the branch and now the model  name or the database table going to be the branch   or the branches then here is an update so we have  to also make an update in here the next one here   is we need to include the general method that  we specified or we do specify in each method so   this is what um want to do we can see that here  we making a repetition but maybe if we use the   generic uh implementation we could have skipped  this we could only create one uh structure then we   can be using it all over but when you get to the  controller we have to also create controller for   each it is the same but I think that one would  be better than this don't worry let's focus on   this okay there are several ways to do it maybe  the next that going to be doing when you have it   in the large quantity we're going to learn how to  use the generic Tre which comprise of the generic   interface and the generic implementation with  unit of work we're going to learn how to do that   but for now we are having only generic interface  and we are having generic controller that's the   only thing that we are having now okay so this  also working we are done with this peacefully   we can close this um and um yes so that is  this okay so let me increase the size more   now save this we can just closes the next that  we're going to do here is we are going to work   on we have the brand so we have the Department  um general department we have Branch okay so we   have the next one as country that's going to be  the country section so let's have a country and repository so I'm going to add this class  No it should be should be the implementation instead so count repository now let's add this  now it is the same thing that I'm going to do   so I just have to grab this and I'll P it  okay just I change it to countries that's   going to be the table name countries and  and that is it changes and now and off   you go okay so that's the country hosit Tre  and this the countryart the same so why am I   having this just that maybe I did not specify  this in the database so let's check it up from   the appdb contest do you have country City  Country oh so you see I hope maybe you've   done the correct thing right I forgot this  so let's make a duplicate of this this is   going to be country then in here you're  going to have countries then you have um city and here it's going to be cities okay then  I want the town to be last one because the town   is going to be the the smallest among all so  let's have this okay so let's save this go to   the repo and I think it is working perfectly  as you can see from this okay now let's update   perform migration so we can have those also  created so in here add migration add country and city update database base so here let's update the database yes so it is also done now when you  check um repository we have to get that if want   to check a database I did not check that so if I  refresh this I have to now get the countries now   the cities in the towns I have it here cities and  our countries that's fine I get them I believe you   also have the same isn't it now let's also create  a next implementation and that's going to be the   city so now we have country we have to add a new  class as implementation City repository and now   within that City repository we want you have it as  a city so the same thing can just make a copy and   paste and now we start remove on okay the same  thing so here just I have to change the city as   you can see from here and um change it the model  and cities you change them and also the database   is City's database so you have to S change them  as well okay let's see the next one and um you   can even pause a video and then try this yourself  because I believe you can do that isn't it it's   very simple too and I believe I trust you that  you can make this work we have City we have town   have you created the town repository not yet so  let's quickly do that too so time repository and   with that time repository it is the same so you  don't have to waste time here I believe you're   also doing same so you just have to copy and paste  it and it's the same as you know commit submit you   see the same thing the the whole stuff so you  shouldn't waste time here so now we have these   um repositor created they are inheriting from  one base gener repository interface and that is   a i generic repository interface so the next to  do here is let's go in and create our generic um   controller okay later on we're going to add the  the rest the rest okay but for now let's maintain   this let's go to the server where we have this  controller we have authentication controller   already so we need to create the controller for  the tables that or for the repository that we have   created now the first thing to do here is you're  going to create create a generic controller so   how can we create a generic controller let's go  to controller I click on this and I will choose   add a new controller choose an API empty one the  name make it as um generic controller click on ADD so with this this is what you're having  we need not to inherit from this we want it   to inherit from that you can see from here check  what is happening controller it is accepting of a   t value and now we are injecting this interface  you know this interface needs a t value so you   specify the T value in here and now we we create  an instance of this so defaultly or the normal   way here we using a primary Constructor okay  if I click on this and I click on um let's say   create and assigned this we could actually create  a Constructor and now and assigned it but I think   this is the the the best one so let's keep oursel  updated so this is what we are using so it means   you're injecting the interface that going to pass  here going to must be a generic so it means you   can be using this controller for any type of  model or the that we have created where T is   a class and I believe you know that okay so in  here we are going to have our HTTP get and now   we specify the route as all so get all and it's a  tax of ey action resoles an interface to and get   all so we see rep get all because we have this  get all from this rep so we get all and now this   depends on this interface based on the T type that  we're going to specify aside from that you want to   have the delete and now the same thing we can now  have the delete in here with just an interface so   we see from this we have this we checking if the  ID it is less than equal to zero it means the ID   is invalid you want to return B request but in  case it is working then you want to return okay   with the response of this get by ID or delay by  ID and that's going to be the delate now when you   have a look on the the next one that is a get  by ID we're going to make it at single so get   by ID as you can see from this and here is we're  going to supply as a parameter as ID and in here   we do the same thing in here so maybe we can check  this we can create this in private model in here   and now we can just return okay but for now let's  maintain because you have it only used twice here   you want to return okay with this the next thing  here is the add the addition in case I want to   add a new um data to this you see we specify  the t- model in here because this a generic   so we are not making um an a specific model name  which a t value to check the T type to check that   and now if it is not then return this by case it  is not then insert to the database based on that   time that going to provide and the last one is  is the update so in case I want to update this   I can also use the same thing in here so update  it and I can call this update to update the model   from the generic P interface and now it inheriting  from this the payload is a t- model which has the   I result interface um to um handle that okay if  it is not to return there so this is our generic   interface that we are creating the interface  generic controller not the interface we done with   the interface take note don't let me confuse you  please this is the generic controller interface   what we've done already okay so fine now we have  this so what we're going to do next year is in   order for us to have access to the department  the general the city the country we have to   create a separate controller so we can inherit  from this generic interface so let's do that as well so we go to Let's tackle  with the generic or the general   department controller let's create a for this so API mty1 and now the name here it is  general department controller so place it here   general department control I click on ADD now  what you need to do here is you don't need to   write everything anything okay just inherit  from the interface and that's all very simple   one yeah this is very simple so other the time  you're trying to make it simple and stupid kiss   yeah very important so see this what I'm going  to do here I just have to there the name here   I'm using a primary Constructor so I passing the  interface and the interface needs a t value or   t model so passing the value in here and aside  from that we create an instance of this and now   we P this instance to the base of this you  see inheriting from this generic controller   and I we passing this model so the same mod  from here and from this and now passing this   to the base and that is all okay so in case  you need extra um um customized endpoint then   you can specify this here okay but for now  you want to have only the ones that you have   specified so let's save this let's do same  to the others as well so the next one is we   going to have the department controller and now  that department control toer let's also create same API empty the name is Department  controller and now that two we are also   doing same to this we change here to  Department department and that's what   I have to do save this let's go to the  next one and it's going to be the branch controller right click on the controllers let's  have the next one so I believe you can do this so   pause the video and I'll do it once I also  do it let's see who finished first okay so   run controller we on a to speed so let's see  who just finish writing all this first so we   have this and that is it see you passing the  branch and the branch and that is all now we   are done with the department so we go to the Y  which are there do you remember country first so country let's do that country controller and you're going to  the same thing so anytime we want to add any   or extra interface or customized interface we add  it here if it is not going to be used by all the   interfaces all the repositories then specify it  here okay that going to be the end point if you   want to have an an endo going to be used by  all the controllers put it in the generic one   but in case you want to have it a specific or  limited one put it B uh put it to the specific   controller that you have created okay so let's  see the next we have a country let's have the city so add this to controller API now let's see from the city controller  and now we doing same here nothing changes   it is the same thing passing City model  City model and that is all let's see from   now the last one here is the branch oh we  have Branch already okay it's a is a town   I think so you're not done with a town so  let's have a look over the town to we do the same and now here too what we're going to do here  is we going to make the same copy and paste copy   and paste it's so sweet you don't need to type  copy and paste everything and off you go okay   so now that we have all this what is the n to  do I think we have almost 1 hour 14 minutes   we spend that so maybe you're going to be be  ending this session soon so we can continue   next but I want us to run this and make sure  that it's running before we can um close this up we need to register this and create dependency  injection among them so let's go to the program.   CS5 in the server and now in here we need  to register each and everyone so I'm going   to grab all this down here where we have this  let's register them so we registering you can   see passing the generic passing the model  passing the model passing the model now   they are inheriting from the same generry but  they have a different model and now passing   the corresponding implementation this very  simple thing that we doing now it is saying   this has a problem why it is inaccessible due  to age protection level meaning that we did not   change from turn out to public or private  to public do you do the same let's have a look yes I believe we did not or you  followed me okay so we have it set and   that is all so now let's check it again  and not set and done so let's save this   let's run this the server is already set up  let's run this application and let's test   the API you're going to have access to all  the I think six end points that we can have   access to general department Department Branch  country town and now City and town let's have a look all right so we have it in here let  me increase the size here so you can see it   well okay this authentication Branch City Country  Department general department Town wether forecast   oh just for testing purpose okay so this what we  have now let's Che the scheme now the scheme has   tell you what it has now let's first check the  branch if you see the branch has an ID and our   name it has connection the department you see if  I cck on Department two department has ID and our   name it has connection with general department so  if I click on this two it has ID and our name so   you see have you seen the hierarchy of it so the  Branch we can retrieve the general department from   the branch by getting the ID of this department  searching to this and I'm getting the branch ID   of that specific record we can get a a department  ID fine check the city too it is the same city   has country country has that is it where is the  town so we must have town in here or we did not   we did not establish Town isn't it let's have a  look so we have count country must have a city   when to check this a branch must have Department  Department must department so a town must have   city the city must have country but we did not  do that right so let's let's check that one up quick let's check the model entities then let's   see from the town so from town it  t c t list of employee in here C ID let's check the time so we have City here  everything is here it's working check the time   and see it reference C ID and now employee okay so  that is now let's check back again and see maybe   I did not see it well okay so you have CT let's  close it again so here we have the city then from   the city we have country okay so from country  we have this country do you have town in here   so country okay so we have towns click on this  here that is it so we have town and I have Town   ID and I a city ID now if I click on this city  employees you see now there the employees so we   see the relationship that is going so from country  to City from City to town from town to employee   and employee also has Branch now Branch also has  Department Department have general department as   you can see so that is the the the order now when  you check the same applies to this when check the   employee too it is the same we see the employee  has a branch it has a town so from Branch you can   have Department you can have Department in here  from town you can have um City you can have what   country you see so that's what we having here  okay now let's test our end point Here and Now   check things up and see so from the branch if I  click on Branch get all try this out now let's see okay so you can see yeah it is working it  is empty let's add one so add this now all of   the we see this that dependencies and we going  to remove everything and leave only this okay   so I can just copy this click on execute and now  let's see if you're going to make success oh we   have an issue here it is saying that an error  occurred while saving the entity changes so see   the in exception for detail this conflct occur  in database insert statement conflicted with   the forign key constraint okay okay the conflict  occurred okay so column with an ID so let's have   a look first and see how to solve this let's go  to this table and let's see the country that is   was it the city or which one so this is Branch  right so let's have the branch so where is it   there the branches view data and we must have  the ID Department ID yeah we did not provide   Department ID so it means we have to provide the  department ID now before we add Department ID we   must add Department itself so we can have the ID  to this because it is dependent it is depending   on that so let's see now department where is  it we close it D Department that's the first   part so let's add try this out we can just just  copy and paste this so this is let's say this is general department name let's click on execute this and I can see  process completed so I can even copy this let's   go to get all execute this and we have it in here  you see department is null but we have the ID then   if i c click on delete this passing the ID of one  let's see yes success now click on all empty let's   add this again so here add this again the ID is  going to be two so let's see get by ID let's pass   in one where you know the 10 is two we have what  so 204 we did not handle that maybe lat on we're   going to handle that but when it pass into we  have the data in here okay so let's go to the   department and I'll add this so we come here  this General we are done the branch you must   have Department first okay so this department  let's have ADD add department and I try this   out see we have a lot of these guys here so we  need to add only general department so we can   just close all like this then Department here  it is two so take notes now let's save this and   see if it's going to work okay so it is saying  that the Json value could not be converted to   this one more viation the mod field is required  the department and let's see name is the string   and ID is this then department is two I think  this will work what do you think so this a 90 okay so let's see execute this and um  I think yeah so completed maybe we did not   include a department ID well so we have to get  this now as soon as I click on execute again   you see we have Department already added so it  means we've able to add the department now let's   go to the fetch or department and let's you try  this out and you can see we have Department ID   here of two we can also we have branches as n  and Department as n but we have the department   ID in here we have the branch um the department  name when adding so this the this is one the ID   is one when adding the branch we have to also  add department so let's see so try this out this is a branch now this brch if I click on  execute this you're going to have error here   so let's reset this and now when you check this  one we have to remove all this because here we   need Department ID so Department ID this  a department ID this is general department   ID you're looking for branch and branch  has to get Department ID not the general   department so we're going to have have to  use this one so we're going to clear all this maintain this and I remove  this one and now clear the rest so Department ID is one let's click  on execute and now let's see yes you see   process completed now when you click on get  all branches try this out you can see we have   the part ID as what one now you see you have  employee as null and that's the ID three so   you can also do same to the rest now when  you go to the country to you can also add   this uh you can also add country first let's  see so if I want to add this country must be   the first thing to be added then aside from  that you can add City and Etc so here too   you can also do same let's try one more  and see so I'm going going to remove all this and now here there is a country so  I'm going to use let's say this is Ghana   and then click on execute like you see  saved the ID is one if I want to add um   city I must provide country name country ID  so this is a country I must clear this remove   all these and now I must I can country  ID as one after that I must remove all this then remove this trailing comma execute  this and you see this is done now if I want   to add City I must provide the country the  city if I want to add town I must provide   the city ID so from here come to the city so  that is a town where is it the town must be   in here so town and and and here I must  provide the town ID so with all this I   have to remove all these and now where  can I get this C ID I think it must be here Department brand city city ID will be around  here let's see so that's it ID so remove all this   then the CT ID I'm going to remove this two then  you have CT ID as one click on execute and I we   see being completed so you can now click on get  all try this out and now you can have access to we   see we have City ID as one the town ID is one and  that is the name employee and C they are all n now   because you have not added the include statement  also when it's check this country get all country   you must have Ghana in here and when you check the  that the country want to check the city too you   must have the city ID and the country ID as well  so can see they are linked together and because of   the the relationship that we specified as one  to many and are many to one as well this time   around this is what you going to do we're going  to be creating a servit and also we're going to   implement this service in the client and you're  going to perform all the crowd operation that is   a create read update and delete so a manager or  a user can add Department can update Department   can also um delete Department this applies to all  of the various sectors in here Department general   department branches countries cities towns okay so  that's what we're going to do now this is what uh   the next to do here is from the country and and  town and the cities you can see there are some   API that we can even call or there's some app that  we can call to get the countries but here we want   the company to add their own countries it might be  that not all the country that they need they have   branches or they have employees in so they want  to add a um respective or what they want required   countries with their various cities and town okay  so that's what we're doing for now maybe if later   on they want us to include include that we're  going to to make that possible but for now let's   focus on the crow for this and also see when I  check the administration we have this user so the   administrator can able to also change the role of  a user to an admin or to any other role as far as   the role has been created okay so this what you're  going to do today you can do any the following to   support this channel you know you can subscribe  and hit on notification Bell so you never miss   out any of our upcoming content and also we can  like this video by clicking on the thumbs icon   beneath this video you can also buy his coffee to  support this as well if you want to do that check   the video description the link is over there all  right so I do offer training session for people   or coaching or mentoring whatever for people who  are interested in blazer. net Technologies talking   about the B Ser web assembly um. net WEP for web  service and so forth so check the description   today um I have the the link over there or the  email link you can write me through it all right   you have a lot of work to do so let's quickly  jump to what you're supposed to do today and   now let's start so you better get some some food  and eat and get better because you're going to   work today a lot okay all right so let's see now  I have to close this up and because this is what   we did on the previous videoos so if you haven't  watched any of them please check the description   I have the links over there for you so when you  go through the previous project is it previous   lesson or PR project the same project by previous  lesson isn't it don't mind me so when you go to   the previous lesson that's what we've done so far  we created our generic controller and now we are   inheriting the other controllers from okay so this  gener controller it has all the crowd operations   um in here aside from that we created our inter  generic interface and I we created separate   respository which each inherit from that generic  interface now this is going to be the server side   so if I run this and I run the API now see the  API we have all the crowd in here for branch City   Country Department J Department town and Etc but  when you go to the client service or the client   section it is not consuming this API so let's have  a look on how to do that but first of all we have   to create our dto to handle that and also we have  to create a service in the client which also to   have an interface and implementation but maybe  I'll try much as possible to create a generic   service and generic interface so that we're going  to have the interface once created and we can be   using them multiple time because know we have a  lot here to do Department country um um um what   else City branch and Etc if you are to create  an interface for each of them it going to take   us about 3 days to finish this okay so let's have  a look on how to create this generic interface is   for service and also the implementation so we can  inject them very simple way and also try to use   them so let's go to the service that's a client  Library wherever you have this service now in that   let me just close this okay so there's a server  there is a client liary as you can see from here   now you can see we have this implementation under  the contract from the service folder inside this   contract you see we have one default um service  in here there's an interface service and this for   account Authentication so we don't want to add  authentication system to our the other ones okay   because authentication very important and want to  handle that specifically in application so we not   using the we are not inheriting from the same Crow  or the same inter that you're going to create no   we're not doing that so let's say once you have  eight separate interface created let's create   the other interfaces for the the other guys I  I I spoke about general department Department   branches countries cities and Etc so let's add  a new item here and now this item is going to   be an interface so take note you have to choose  an interface for this so do we have interface here all right so now I'm going to give you  the name as I generic service interface so   you can give it any name of your choice  but here I generic service interface now   in that it's going to inherit from  a t object so let me just grab this here so we make this as T because you're going to  pass in it's a generic so the T here stand for um   a model okay so we're going to pass in separate  models individual models different models so we   are not making a specific here here we make it as  a generic General one so any one that you pass in   is still going to work okay so once you have this  is a public type and let's specify our this um or   our method in here so you can see from here I have  this so this a tax of get list of T so that's a   get all and we pass in the base URL we have get  by ID um General response and that is for insert   we have update and then we have delete by now  the next question is I believe you guys you do   understand this right but maybe we asking yourself  why are we passing base you are as a parameter to   this yes the reason why I am doing it or you  and I we are doing it is that this is going   to be a generic generic inside it implementation  we need to call the API service isn't it now the   API service since we are creating this interface  we want to also create generic interface generic   implementation okay so we can be using it um  we can create it one and use it all over so we   have to make a specific to their respective base  URL because they are not they are not having one   URL the API is an API SL the controller name now  we have General interface controller we have no   general department controller we have Department  controller we have Branch controller we have   country controller we have Department controller  we have um City controller okay and then we have   Town controller and I'm going we going to also  have user controller so this means that we are   not having one specific um API that we going to  handle all this so you're going to have separate   controllers and in that you have to specify  the URL so that's the reason why I put the   URL in here so we're going to create a separate  class and I'm going to store all the URL in there   so as soon as you call this method we passing  the URL and that's all very simple one okay so   this don't worry about this as soon as you create  this and start working on this it's going to make   clear to you and you're going to love it trust me  okay so once you have this we are going to create   our implementation and this is also going to be a  generic implementation when you check the server   you can see that we created only the generic  interface and I created separate implementation to   handle that but this time I don't want to create  different implementation I want to create one   implementation which going to handle all the other  uh model that we have okay then so let's see how   to work on that we go to the same implementation  and we have to create our own class which is going   to be generic service implementation so from the  contract implementations right click here then   let's add a class this is going to be generic  service implementation is going tohit from this   a generic type so in here what are we doing we  can just specify changes to public and this has   inh from the interface that we we have created I  believe we can do that so pause the video and undo   it and let's see are you done did you get the  same thing as this oh that's fine okay so now   we have this we have to inherit from this generic  interface here we specify the T object in here and   at this two since I'm going to make it as generic  you need to also specify the T I believe you know   this get HTTP client this returns two method the  first method here is going to be the public and   the private if I click on PE definition you know  we have what public where is the public this we   have public and then we have private this is a  private one okay so from the private one it get   from the local storage the token from the local  storage append it to the header then it returns   as an HTP instance okay from the public to it just  returns just an HTP client from the client that we   created using the HTP the HTTP client Factory  yes okay so the HTTP client Factory we returns   an instance and that is all so here we are not  specifying any header what we're going to do here   is in case the header we have a header attached  already then you want to remove the header because   when calling a public HTTP client we don't want  to add any header because it's not necessary so   we want to trim it and I'll make it simple as well  if you don't know how to work on this we've done   this earli on in the third or the fourth video or  the fifth video well I'm not actually sure maybe   the third video so you can and check this out I  have all the video links Ben this so please check   it out in there okay so once you have this we have  to implement all the interfaces for this okay so   we're going to implement it one after the another  don't worry but can click on control period and um   generate or Implement all the interfaces we're not  going to do that so let's see now aside from doing   this you can also Implement you can also create  Constructor and I'm passing this you know this   is just a c version 12 primary Constructor that  is what we using I keep saying all my my videos   since this C version 12 was released so if you've  been watching my videos you know what I'm talking   about okay this is a primary con so we using  making things easier and more friendly to us   okay so the first thing that we're going for here  is the delayed by ID or should we start from CRA   so create isn't it let's have a look so that's  going to be the insert we have our so this is   going to be create okay so this create now in our  create we have the insert T item and you know it   has in this based URL must be an ASN since it is  a task getting data from the local storage local   local database right so can see we are getting the  private ATP client because from this insert it is   only authenticated person can handle this admin  or anybody whom the admin has delegated power two   that's the person can have access to this so if  you just BMP into to the app and I want to insert   data no it's not going to allow because you are  not authenticated you don't have the right to do   that so we get a private ATP client which going to  append the HTTP I do make errors here HTTP right   which going to append the token to the header of  it client I'm not going to say HTTP client I'm   going to say client okay so if I say client you  know what I mean HTTP and that okay so we're going   to make a post Asing to the base specify and now  the rout here all going to have assess to this r   as ADD okay so all they have it add and I passing  the model in here as an item if you want to check   out this when you go to the controller we created  from the generic you're going to understand this   from the last video we did that so see this is  a generic controller and I will see all of them   this is an all to get all delete by ID single by  ID then add so all of them going to implement this   route is it end point yes so so that's what we're  doing here return the results catch the results   and I return peacefully with no issue aside from  that the next thing is read so let's say this is   read all so with the read all what can we do  in here do you have any idea can you do that   yourself well pause the video try that and let's  see are you done how was it or should I continue   on okay so this s we having for the read is  simple we get the same private and now we   have to return this but you know I want to want us  to catch this to get this now issue so let's say results equal to this then let's return results pefully okay so that's the read then we're going  to have read single by ID you want me to pass in   the ID okay I'll do that so we're going to read  by ID and now in here you can see that from here   we are specifying the base URL to each endp point  or each interface method so you can see from here   we have the same thing and I want us to cat this  cat this catch this so V results equal to this   then let's return results with no issue save that  so that is it you specify passing the ID and now   here can see we are specifying the base single  and the ID don't forget the controller single.   ID isn't it fine let's move on now the next thing  here is we have this read single ID and um so we   have C create read update so this going to be an  update okay so update and now this is going to   be model you're not going to pass in an ID here  it's going to be the whole model okay and with   that update let's see I believe as for the update  very simple that you can work on that you're just   going to use put at async and that's what we  have in here put adjacent async is an update   is an ASN task and see we have the same page and  this is a motel as can see it's coming from this   T it's an instance of this object okay so when you  check here you get a private HTP client um maybe   you may asking yourself can we cash it once and  be using it you can try it yourself okay so you   can call this once you can see anytime I make  a call here we are creating a private private   private private can you make it one yeah we can  can create a simple method here and I return   that and we can use it in here well try and let's  see now let's see so here we have this V result   as usual I want to catch this to remove this n  issue and I return results peacefully with no   issue okay so using put ADN passing the base  Ur and the item and that is all you read the   response and our return in the form of a general  response okay so as from having this what else C   so we have for you and on D that is a delete now  this has to take in with an ID I hope you know that so from the ID we can then have the first  method I wanted to add so this is the first method   I wanted but it's going to be the last one delete  my ID is a tax of async and I see be passing   the ID and you're using delete async not delete  adjacent async delete async read the response so V results equal to then in here let's return  return peaceful results has no issue with it okay then we are done so this is going to be  the base for every model okay okay so every mod   going to have the same thing create read update  and delete create read update and delete find   single find all if you want to have a specific  one there you can create a specific interface   and um try to link it up later on maybe we're  going to have a look on um something like that   later on in the near future okay but for now  let's focus on this I believe this is very   simple and clear to you all right that's fine  so let's save this in here now once you have   this we need to register this we should not  forget this okay so that's very important we   have to register this in the program.cs file  in the client service at the client section   so in that let's see how to work on that  but before we do that we need to specify   we see need a t value so we have to specify the  various T values in there now let's go to the program CS from the client server no this is a  server so let's close this now there is a client   and there is a client let me open it closes the  library from the program TS file we are going to   specify them here you know that we have this the  interface specifi from this user account and now   with the various repositories or interface so we  have this for general department department and   Branch you see we specifying the department  as a model now we have it in here from the   implementation which also need the same model so  the interface and the implementation both need   model so passing the same model in there do not  say general department or and passing Branch here   no you're going to confuse the app okay soorry  it don't never work so you have to specify the   same thing then Department to Department Branch  to the branch you see we have the same generic   by using it multiple times okay so this is going  to be for what general department department and   our Branch you be asking yourself well we have  country we have City we have a U Town pause the   video and and and try that I give you one second  it's up are you done let's see if we able to   do the the right thing so the same thing is in  here well well done I believe you got it right   Country Country Town town city city and that  is it okay so maybe you're going to also add   employee so let's also add an employee to this  because so we don't come here again to specify   this we have an employee employee and that is  it so here I'm going to specify an employee okay so let's save this the next question is when  you check the interface it needs base URL you have   to specify to this anytime that I make a call to  this okay we're going to inject this um interface   and it um repository or eight implementation  class in the component the Razer component so   in this we have to inject or you have to call  the have or you have to pass in the base URL   to it so how can we do it is not better that we  create another class which can be a static or a   constant class so we can include or we can handle  all the links in there yes it to be let's do that let's go to the client Library you see  we have helpers folder now didn't help us   let's create one class let's name this as a  constant constant not the name constants okay   this constant and now we can specify all our  constants in here constant um links this is   going to be an API route so you see we have it's  a static class and the name is constant we have   public constant you see general department  so this is a this is a API route you can   see you can see are you getting it that's  fine isn't it so are you okay with it all   right I believe this is clear let's save  this anytime that we inject the interface   we have to also call this because they work  hand in hand if there's no constant there's   no API call because there's no route to work on  okay so there must be this and the interfacing here so now in order for us to have this work we  need to inject this in the inut Razer file now   what you do that is going to make it as a public  to the whole component that you're going to create   even the future component that you're going to  create so it is a matter of that putting it in   there so let's say from the client service or  the client section go to the import. Razer here   let's put them here so in here we're going to  make some nice arrangements so you can see it   well okay I don't want to add them together  so it confus you no I don't want to do that   I want to make it very simple and readable to  you um here here we have you know we have this   authentication State provider and that's for  this you know it's already we've done this in   the authentication system this a navigation  manag a default one so you know this now in   authentication Service authentication Services we  created we need to inject it in here and that is   it um I user account service and account service  we done this already now what we're going to do   here the next here is we're going to be using um  SF dialog service so from that dialog service we   have to include it here uh we going to install  this I think you install this already or haven't   we let's see okay so using popups we have this  already installed because that's what we've been   using for the ad or register and I'm giving out  the response and aside from that let's have our   general department and the branch um and Etc  okay so we pass it here we have our general   department department and our Branch we need to  use this model so now to use that it is coming   from contol period let's see this where it is  coming from entities aside from having this we   need to include our U the next one so you can see  the same interface we using it for all the models   that we've created almost six models general  department um this a gdd a branch for b c c right   country City town we have all them used from the  same generic interface and we need the last part   and that's going to be the employee so we have  also this and this is going to be an employee to and that is it an employee okay so we  have this set and done now let's go to our   components and start consuming this so when we  check this pages you know we have Department   in here and now this department we have this  general department dollar component isn't it   so here we have the D component and there is  the page the D is what you're going to use for   ADD and for update and now we have the page to  handle or to display all the list of the various   Department general department that we have I  want us to just format the the location here   well we want to actually group them very well  so you know from this account let me close this up so if we check here the department should be  in the content page so let's move that folder   inside this content page okay so it is in here  now we can see from the demonstration we have a   table banner and is a table that going to display  the total um employees and Etc so here we want to   move this to the other folder okay so now let's  remove this Administration so you can see when   you open the content if I if I open the pages we  have account Pages that's for authentication we   have content that the actual component which is  going to be rendered on the screen for the user   anytime we have other Pages these are the the  supplementary pages that we need in order for   this to work and we have this authentication page  counter weather we don't need any of them so we   can remove this this weather too maybe well  we use that for testing so we are done with   the testing we can also remove this weather okay  so you can see we have this the authentication   page is going to be the let's say outside here  because that's going to be the first thing to   even work on before you going to have access to  the content and the other pages so let's open it   let's click and let's see in case we have header  specified on top we can just remove that and then   speci y all the headers in the program program  import. Razer so from the general dialogue we   have all this we going to clear this because we  are going to specify them inside you've done this   in the program so that's the input sorry let's  save this and there won't be any issue here we   have this already as you can see service it's in  there we have the department to and now with this   we are going to also remove this accept the  the interface for this I disposable now the   department service we have to include Department  service inside let's see where to work on the   department State okay so that is the department  state from the App State so we're going to work   on that this from the application State folder  in here and that is where it's coming from so   you're going to work on that soon you go to the  homepage and now here too we want to remove all   this okay so we have this set and I think all  done so check our login and register we can also   remove this cuz we have this already so we want  to remove you want to make them clear you go to   the same thing and then here we have to remove  this dialog service and also this that's fine   all right so account session done content Pages  at department and homepage also done now when   you check the department and and the the general  dialogue it's also done let's see the other pages   from the button profile drop down we do not have  any header table banner yes authentication page   yes so we have to also remove this because  we have it specified already in there okay   so once you have this let's see from the App  State we want to um check this that from the   client and see have the application State you  want to rename this and then make it not only   up state but it's going to be all states okay  so you want to create one class for all so all states so let's check from the general department  um general department page where we use that all   state or that's application State let's figure  things out in there okay so here we're going   to use All State okay so this what we need to use  all state now when you click on this all state we   what I using this for this is what you're going  to use to hide and I'll show the component if a   user click on it it's going to hide and show  based on um the the movement okay so here we   have to use an action which going to notify a  component um and also going to render it based   on what we have specified okay so there is going  to be the general department click and we have   um reset or to set this to force default and now  we want to show the specific one with this we can   modify or Mi few changes in here so we have our  action State already and this action is a scope   action meaning it's going to be available for the  entire scope so I can say it's a scope action here   aside from that you're going to have this general  department now this general department I want to   modify something small in here so for this we  can say this is general department and I give   it a title here as a general department so this  action instead of saying general department action   you want to say action General action okay so we  invoke it here we show only general department   if you want to show show that that is a general  department so we see we're going to have one uh   the base page and we can be showing and hiding  this department general department Department   branches cities count and Etc so you want to make  a dynamic movement um with the pages okay so we   have this for only Department we have to also  create one for the Department itself then from   this action method since a scope we have to use  it or we can use it all over so here is a scope   you can see show Department to then we're going  to hide the rest and I'll show all so let's say   from this we need to add branches so this is  the branch we show only Branch as well we show   only Branch as you can see show branch is set to  through okay set the rest to false and then show   Branch set to through invoke this so any pages  and subscribe to this going to render retrieve   the current value and now use it based on what  you want the pay to be done to be done or to do   so we have this country and at the show country  we have you invoke this action in here if you   don't understand this don't worry let's let's  finish this and now when you start implementing   this you're going to love it trust me you keep  loving this project to be finished okay so you   have the city show city is set to true and now  we want to reset all to false then we have our town so there is also the town we have it set  here show to through and we see the same petion   that we are doing just that here we need to  specify the the specific um property that you   want to set in the form of a Boolean type and  this is going to be the user so if I want to   manage user add or delete user I can have to  show this on the screen and now this is what   I am using to show show user we show the US to  through and the last one here is an employee   so show all employees this method is going to be  visible to all the users or managers also to the   admin as well and the last one here it is this  that is a reset all Department we want to set   all Department to first so let's say if I click  on show Town show user is already open I want to   close it so I have to call this method which  defaultly closes all the method then when it   come here show us over right the first method  I show user say through then only this will be   will be shown if I click on this show you that  it's also through if I click on show town this   is through reset all method so close all then  only pop up the show town I believe is clear now   that's right thank you that you've understood  it okay so we have this state created and now   we have to inject this state in the import  razor to so go to this import and now let's   also inject the state here so we can be using it  um all over in our component or the application   so this state we're going to make this as a na  bar so where should I even put this aside from   this I think authentication first so let's put  this here as inject All State then all state   did we change this okay so we have this all state  created we have not included the folder reference   so let's do that and that's a nav bar nav tabs  nav bar tabs communication State handling okay   so this is a component or the state container  handling with this action which invokes anytime   the value in that component gets changed and the  page subscribing or the subscriber get notified   re rendered and I'll get a current value and  I'll use it very simple um that is what it is doing you spent the 4 minutes now take some break  and I'll come back I give you five minutes okay   time is up now let's continue on so let's go to  let's start working on the department so we go   to this department um page now this department you  have the page and the dialogue the we going to use   to add a now perform of the CR you know we add  it here now we can add from the previous video   we see that here if I click on Save we check if  Department name is not specified you want to tell   the user something by using this dialog service  but in case everything is working as expected or   it is in order what are we doing in here we need  to um invoke this method to the parent component   so we can handle the Savings in there okay so in  that we have to use this event call back method   we going to pass in the model of this general  department so let's add it here and it is passing   returning this general department so anytime  that retrieve this data or this method we're   going to come in with this general department as  a model so we can retrieve what we have in there   okay since we going to be using this component  for adding and for updates we want to also set   a default title in here as ADD when the page run  first going to add but if the user clicks on on   the when this page is rendered again the second  time whereby the ID of the mod coming in that's   the general department is greater than zero  it means that you want to Now update so you're   going to change the value for this title okay  but for now let's see so we can use else here   if everything is working if you that pass on the  correct thing else we want to invoke this method   then we can pass in this so invoke this method  and I'm passing gener department so this gener   department is this one let me be specific so you  get yourself confused so we have this general   department here you want to um invoke this  method and I'm passing this one so you saying   is not a valid given contest Department let me  make this as maybe small G and let's see is so   saying same thing okay so if Department name so  Department let me just change this here Department name so let's grab this and let's go to the  method in here from the Department name let's   paste this change the name in here and now this  is a model so we have to also specify the model   in here okay so you can see this is solved now  and that's what we have so it's going to invoke   this so this means that as soon as you CL open  this dialog box is going to pop this up and we   can now start adding some data in it let's go to  the department pin let's try to handle this very   well but before we go in there I think we have  we have one thing left that we can do from this   department dialogue from here once we saving we  can have this open dialogue you see we have this   open dialogue and aside from that we must have  a method to also change the title so we can be   using this reference uh method to change the  title called method in the chart component we   passing the title and I going to be assigned to  this title and as the value of this changes we   have to specify the title in here too so that the  title can also change so instead of saying making   a static type like our title we want to say um  this title department so it's going to be going to   switch between add or update okay and I'm going to  make it work okay let's save this let's close all   this cuz uh we don't need them okay so let's save  those one that you haven't saved then let's go to   Department um page so so from this page you can  see we have this inheriting from the Disposable   and now it is checking if show Department um is  through then it's going to show this okay we have   our button and this this is going to be the ad  as you can see from our department s from that   we have this um this is a card header and this  is the body the body system there is a card you   you see this is a it's a container which has is  a card header general department and now from the   card board you can see we have this table so this  is a table that we have and we going to specify   the data in here for now this is just a static  one that we copied from bootstrap we're going to   make some changes in here but before this we have  to include this this a general department that we   have in here let's specify the ref attribute so we  have the ref attribute in the general department   dialogue that's fine aside from that we need to  specify the the save method that we created so   we can also have it in this way handle save save  method and also we need to provide a department   itself so department and this is going to be  um general department right so Ag Department is   better that we make it in an upper case I think so  so let's see check things up here from this must   be a general department and with this capital  G is very important to make it this States now   let's um make some slight changes here fine we go  back and now in here it is not so in here we need   to specify the same object as general department  then okay so that's what we have now now let's   create this so first of all we have to set a title  because you know title is going to be change often   so we have to set this title in here so we can  keep changing this default is also add so add the   already one is ADD it's going to override that and  no problem it's fine so here this is going to be   um action remember that we made changes to this  and here is an all state instead of Department   State we have to do same so let's copy this okay  so initialize okay so action that is when the page   is disposed in we want to quickly um unsubscribe  or or revert the proess before it dies up so we   have this and we have to create a department for  this okay so we must have a general department first so in that we need to create and now  initialize it we have it here and I don't want   to State Department must be called the general  department okay so never confuse us and we have   the title so specified beautifully so from that  we need to get a list of department because as   soon as I add data I want to get a list so I can  see a live event there a r time I need to get it   as soon as I add isn't it okay so this means we  have to call a method known as a wait get general   department and we do that before we initialize the  whole component or um is it initialized reender   because you're going to subscribe so anytime the  changes happen we're going to render this by then   get Department might have finished getting on the  department so we can show aside from that in here   we're going to have this this the simple method  as return get Department in here and I'll check   this is the first time of us using the constant  class that we created beautifully let's see how   I did that or how you and I we going to do that  see is very simple this a list a we Department   here get or passing the the URL general department  based URL so if I PE this one you know Department   here it is what API Department it goes to the  interface passing this URL and this also use   as a post async or get async to the API to this  specific route and I get the data and I'll give   it to us this very simple thing that you doing  here isn't it so get department and there the   method but the question is why is there still  having red line her we operator and this must   be an asent tax I believe you know that async so  un initialize async I know this have to have an   async in here fantastic okay so now we have this  we have this add button here that we need to so   this a handle save operation event in case I want  to do that what should I do I can just create a   simple method to handle that but it's better that  I copy this let me just remove this because you're   going to handle with ADD or update together yes  let's do that we don't want to waste time much   time in this so here we are saying that let me  put this to the next line update so you can see   everything yourself Philly Philly okay so watch  here this what we doing now this is a method that   is coming from the endpoint from this endpoint  okay from this chart component save it is com   in with what let's see general department as in  the model so here as soon as it returns this s   you're doing in here for that then department. ID  is greater than zero so where are we getting this   ID we have to get it from this because you know  this is just a save okay this is coming with a   general respon so when you create this method we  have to retrieve that isn't it let's see so we   have to pass [Music] in this general department  and now we say this general department okay so   with this general department we have to check we  have this in here then this the boan to force and   we check if this department has an ID so let me  make it like this or should it be like this let's   make it like this okay so we have to check if  the ID here it is greater than zero which means   that you want to update this then you want to  call the department. update this is a service   do update rep passing the model that is going in  as a general department then rep passing the base   URL this a sucess in here defaultly it is false  by this we call this method as display message we   pass in the flag in here from the response from  this result and I with this message because you   know this is coming from the general response  these two guys here from General response now   this meage is going to display an information to  the user now we store it here so it's going to   return at the end let's see what's going to do to  return from this we need to create a simple method   known as what display message let's put it down  here so display message going to take in a flag   and now a message it's going to return a Boolean  expression so if it is through we want to change   the title to sucess operation display from the  dialog service and aler passing a message and   I return through very simple one in case it is  false meaning something went wrong you want to   say alert the message in here and I return forse  so if this is false you want to skip it because   if this is false we want the user to modify the  changes that or the uh the data that he or she   has added we don't want to clear the container but  in case it is true meaning everything is working   we want to set the department to null okay and  know since we are passing you can see this general   department we pass in here as a model to this so  if this is not going to also clear the container   in there from this ad um general department dialog  component so let's see then we also call await G   gener Department it's Al going to get us all the  list of the department since we've added a new one   then this get Department know what it's going to  do isn't it check here it is getting from the API   passing it the the base and then boom that is it  aside from that you want to change the title to   add so if I click on so this means that when  we get to the editing section we're going to   change this so as soon as we click on Save and it  finish saving defaultly change the default State   that's going to be the ad okay so this is going  to handle um our save it's going to take in this   parameter as a model coming from this event call  back method from a chart component that we have um   initiated or initialize in here okay so this is  now working now let's have to work on the let's   work on the edit to then we run the application  and then see what we can do um to make this work   so from this edit we have to create a method  known as edit and I definitely you know that   this edit is going to come in with the same model  so that's general department and I say d and now   we have to change the title here update as soon as  I mean you're getting the idea isn't it so there's   an update as soon I click on edit the form must  change to update Department then we specify this   general department to the object coming in here  and aside from that we open this dialogue now as   soon as you assign the output of value of this to  this object that's the general department in here   this department let's say so I have to change all  this um don't want to use this this this and that   to Department this my department and yeah so  here okay so for this we're going to clear the   container itself and now that is it all right  so any could say this general department it is   an instance of this department that we created and  that's what we are assigned to this as a parameter   okay so anytime as soon as you pass value to  this definitely it's going to also Supply the   same value to the chart and it's going to work in  there so we from the edit we assign the value of   this to the department then we open the dialogue  which going to display the content that we have   in here okay so once you have this let's run this  application and see what we have now so save this   and now let's run this up but before that we have  to make sure our server is active so we click   on the server then de bag and start with that  debagging let's start it first then we start the client okay so it is ready now now as  you can see let me minimize this and   let's start the client that's what which  the client is what we want not the server   as well because s we know it is working  let's see oh as you can see we have an   error here let's check it out so the name dark  service does not exist yes I know because it   is D like this and uh which one again this  one too it is D like this which one that's all okay so it is now loading and this is what  we have so if I click on Department I have the   general department for now brand Department we  have only for the department now if I click on   this I think this must shown here but it is  not because of maybe we have not included   that let's check it out from the homepage  P we go to the homepage and in here we have   this tabs okay so we haven't included this  pages so let's include them here so we can   grab this cut this save this go to the import  and I'll keep it there so the next hand I want   to use it globally there won't be any issue  anymore so in here we can let's paste this   here save that go to the homepage and you can  see the soft refresh this now we are good to go okay now let's click on Department general  department okay so I have it here now oh it's   all right so we have we I'm not using using this  here but if I click on this add Department you   can see passing the name of department so let's  say this an IT department click on Save and now   this is going to wait to see process completed so  click on okay and now it has cleared this we can   now close this we can also add another one let's  add the same it andc so same it Department click   on Save and it tells you process completed  W really we are not checking so let's say   it again click on this okay so there's an issue  here because we do want to save this more times   let's have a look from the dialog component  okay so in here that's where we have the save   the ID here so we add a new one isn't it so we  add this from the inser we pass the department   and now we get it let's go to the repository  let's first run the interface no the API now   let's see from this general department  so get all let's see what we have from   the API okay so we have all this we see it it  it it you know it's not the best so we want to add so we adding department and all I  need to do here is you need to clear all this okay okay so try this out what we need  is only the name nothing much we need only the name so there's an it again let's see I can  just copy this click on execute and complet   okay so the issue is coming from the end  point here okay let's have a look with the   end point let's go to the process repository  what process doll component or the general   department repository and this happen in  the server um repositories and under the   implementation from this general department  Petry in here we get all we get by ID we   insert it right and that's where the problem  is coming from so let's check it out we first   check the name so here normally what I do here  is let's cash it so let's have check if now so   check if now is equal to then we can now call  this name a wait so check name then pass in   this item. name not this item okay that item.  name now this going to check so here we can say that okay so check this if now now when you count  down here with return item is null it's going to   be true but Le you can do this if now return  through else then return false okay so that's   the same way but here for us to get a better  understanding maybe you can do it like this   this time operator you actually get it isn't it  so it's second from this not Department this must   be a general department have you seen good so now  we can return back to the normal State f forat 10   okay simplify this we can make this very simple  return item is now from this general department   is going to check if the name is not equal to that  and in that we can now return so here we can just   go ahead we can just grab this put it here you can  do like this anyone that you feel you want to do   it by the time try to cash it before you check so  that it makes checking very easy de bagging very   easy or easier for you than putting this whole  method in here okay so I want say Department   this must be a general department isn't it  I believe you've done this already isn't it   good okay okay okay so this is now working and we  let's close this up we are going to run the server again then we run the the client okay  so this is working the server is ready   now let's terminate this and let's  run the client not terminate hide it okay so Department um General and I click on  ADD let's add same it click on Save okay PR   just completed the same thing so provide name  it the same thing oh we have to check this one   again so in here let's see what we doing doing  doing doing we check from the Department if null   return okay so if this is false that's the right  thing the is not meaning is not found but in case   it is found it's going to be false right the  return this I got it so we have to refresh this up all right so this not ready click  on General Department here and I add   Department uh so with this we passing  an it let's see it with this it tells   you Department already added right so this  already added maybe you can specify this it then tell the user that's already added  or something like that you can also you can   customize it the way that you want okay I leave  that up to you but this what I'm going to do this   okay now let's display them in here from the  UI so in in that we go to the department page   and now where we have this we're going to clear  from the table body because see this a table we   have table head then we have the body so T body  we going to clear this the content here and also   from the the TR with this we also going to clear  the header and now let's specify our own custom   head for this and that's we're going to use to  display um this to the user bear in mind that   we have installed bootstrap icons already and  that is what we are or we have been using in   this project so with this this is the header  I'm going to passing this as id id is this a   number ID and the department and action so that  you can add or you can edit it in this the tbody   I'm going to have something beautifully simple  as this as well so from the tbody that is this   one in here I have can't you see this is this  okay okay so we have just a scope and you can   see this just getting looping through this general  department list and we checking if it is not now   that's you want to run this we have a count  here to get it count the number of item that   we have count and count Plus+ I believe for this  you know isn't it then we have delete async or   delete click and also edit click so if I click  on delete if I click on edit I want to pass in   the whole object and I try to edit it in case  this is null we want to return no Department   um added yet we have this edit already created  now what is delete for now we can comment this   and I'll work on this later on so contrl KC  comment this save that and let's run this and see now there you go it is ready click on  Department General and I can see we have   the whole list Department in here as you can see  from one up to 18 isn't it check it up 18 from one   up to 18 and if I click on this see what happens  there's an it if I click on this it has a popup   it and let's say um if I want to change this to  maybe um um um customer customer service click on   Save and now let's see proess completed save it  and that is it check it up so edit is done isn't   it check the next one edit this and let's say uh  customer support save this save success you see   is ADD see add department check this one edit this  and see as update Department right right so let's   say this is cleaning or don't you have clean your  department you have isn't it okay so can see now   it's working let's refresh and see maybe it is not  getting to the database let's refresh and see if   it is getting to the database now when you have  this done correctly we're going to copy and paste   this to to create all the datas so after that I'm  going to leave it to you I'm going to run as fast   as horse or rabbit or snail rabbit right so you  can have finished this on time now you see it's   still there right so you see we have this these  are the IDS these are the numbers and that what   we can see from here but maybe this what you want  to do we want to um when it's too long we want   to just have a system to scroll this up from the  header you want to scroll this you don't want to   be having it down there okay and as as after that  you have to work on the delete icon to and change   the indicators here this must be a pointer right  like you this it must be a hand but a pointer   change that and this one too we're going to change  that in there okay so let's go in there and let's   start working on this so to have this done we're  going to have the card header we're going to set   this Max height or Max your max height this is a  cut header set this Max height as a you can create   as a style that you can apply by like using this  inline one so you set the height to 580 P overflow   on X you want to hide it but on y you want to  scroll very simple one now let's have a look   with the delete if I click on delete this is what  I want to do I'm up setting passing the method   with what the current item object and item object  and that is talking about the general department   model now in here let's handle the the the delete  method in here down here you know this edit right   so this is edit and now on top here I'm going to  say this is um add or update so three in one this   edit and now this is delete so Crow is done this  going to be delete now for the deletion what can   we do what are we doing do you have any idea on  implementing the delet it's very simple you want   to actually confirm do you want are you sure want  to do this first before we do that so in here it   has to accept a method in here and at this method  is coming with the general department as you can   see from here then we using the dark confirm a  sync I want to delete you passing the name confirm   delete it's a title then if it is false return but  in case it is through when you call the response   the server service general department service  or delayed by ID passing the ID itself and I   here passing the base URL and check you have this  method already to display the message right so you   can see we are using what is this classes oops  object oriented programming is not that we have   this classes whereby you can call this classes put  the common ones here then you can be calling it   as well remember also one of the design princip  report dry do not repeat yourself so we try as   much as possible to do that at times we may repeat  but not all time okay trust me but maybe there are   some better ways to do that you can also search  on that and implement it okay now let's see so we   have this method done and aside from that as soon  as you delete you want to call get employees oh   employees get general department because one has  been removed and you want to remove it from the   list okay this all that we need to do now when it  sh V interface we using this icons check check it   out from the bootstrap it is an icon of what bi  pencil bootstrap icon of what pencil boost icon   of trash and that is going to be give us the  trash can and the pencil to delete all right so   let's refresh this and let's see when we have this  done we're going to make a copy of this simple and   try to edit it very quick from this department  you're going to clear the general and I leave   all the Departments and going to duplicate  itself Now work on it very fast and quick so let's see it is not ready iand and guess what  let's wait for this to get run Department uh   General and I can see we have this if I click  on this see what going to happen I want to do   this you want to delete cleaning no it sticks  it I want to do this yes it's removed check it   out okay it's too many so you can't see isn't  it now let's see now before we do that check   out you can see that here the header doesn't go  see you header is stuck isn't it then scroll time   fantabulous working well so let's delete this  one it are you there it is not isn't it check   here it is 16 let's do this one and see the rest  15 now is is working right 14 so I leave it up to   you delete the rest and let's move on I believe  you did not delete all the it one there because   also Department okay so now we have this we have  to go in for this general department right so   how do we work on that when you close this up  and now when you check in here you can see we   adding this ID kesa style and that is what we  need to do let's specify this kesa style then here okay so changing kesa the from normal  pointer from normal K to pointer okay so   that is it so this completed now the next to do  here is we have to work on this department now   this is General so for Department two let's close  all this so we're going to use the same idea all   right so here I'm going to run like a rabbit  so I told you earlier on you want me to slow   down then for the video light light and so I can  slow down but I'm running okay so um when it come to let me open this I no want to open this lib man  close it up it's a mistake you go to the solution   now from the same Pages we have this department  so we're going to add another department so   Department going to be this is General one you  going to add Department itself okay so let's   create this inside this department um we add  a new razor component then we say Department   dialogue inside this dialogue you want to still  have it is the same thing that we are doing so   I suggest if you actually understand the first  one general department then they're good to go   we have a an object here we have a list it is  a event call back and passing in this general   department and this is we getting a list of  general department because here it's going to   be a cascad drop down this department has to have  an ID general department ID before you can save   it so we have to include the general department  in here all right so we have this visible you   know this already title you know this already  from the previous one so you don't need for me   to explain it let me explain the important ones  to you and that is it you know this already you   know this already we invocate Department in here  open dialog you know change title you know and   now here that is this comes in using the same  fing drop down so we want to change CH this on   value change we pass in general department and  now here you want to specify the ID to this this   is going to be the string defly so converting  to integer using n. pass to pass it to integer   we have to create this drop down to have this  change event act which pass in the string and   now with the object as general department and  it is basing on the general department list that   you have in here and this is going to be a supply  type okay as you can see there's a parameter here   so you need to supply it from the pay component  okay so once you have this let's have the design   very simple one we using a dialog component is it  dialog yeah that's a dialog s dialog component I   have to grab this so I can explain it up to you  so let me place it on top here oh very simple so   control period let's include it first or we have  not installed a component have we no we haven't   SF dialog box we have sfop drop down list this  is the same thing as we copied from the first   um general department so I need not to explain  this dialogue you know what is going already   but what I'm focusing here is you have the same  title is this when you get to this edit form we   have Department as a model on submit as saved  and now from the Department I Department name   we have select general department that is a  there is a problem is it a problem that is   a task so we check if Department Department it is  not now we want to display this but in case it is   not meaning that it is the first time of us adding  data so this is add this is update you know update   department is going to have a source of data  right to eight um values respectively but with   the addition there's no data from this it's going  to be an now to contain the current selected item   so we displayed so we are switching from based  on the department general department okay now in   order for us to have this we have to retrieve  this general department and we're going to do   that so here we have to install this first except  dialog box. popup I think so so let's save this   let's install this component so right click on  this client you go to dependencies and stop this rest man to get packages so in here we're  going to type in s Blazer do dialogue so   you're going to have this this is  a dialogue let's see with a drop down this drop down is going to come from  okay so you have this drop down and now let's   click on this no you don't want to install  this version you you can actually install   the update one but I have a specific version  that I do use I want to go for that specific version so install this this maybe we need to also install button as well so simp Reon Blazer buttons let also okay  so we have it already installed that's all that   we need for now when we need any package again  we come back and install so don't worry now in   here control period we can include the name  space here but since we're going to be using   it for the whole application let's cut this  you know where you're supposed to P it right   so do that quickly let's see who finishes first  so import Razer and then here let's paste this   yeah I'm done you go back to the dialogue and in  here we have this SED and when you check this it   is just we have a selected item if this is  not now we want to retrieve the department   name okay from the Department to retrieve the  general department name from the department   and we pass department at the T item the same  thing for the T item in here and now this is a   field so you want to get the ID as the the field  you know how we use this option select option   option has a value and it has a name right  so the value is this one this one going to   be bound to the object and this all going to be  displayed to the user so we have this can I can   I can I close this okay then we have the data  source as this so you see the data source the   same so that here if it is not now you want to  pass instead of saying select you want to pass   in the name what has been selected already  if a new one then select general department   this on value change and Val change going also  handle the same thing the same method is going   to handle that and that's what that we are  doing we have this dialog button down here   and it's saying submit you know this already  so let's skip that so you see the change here   it is only this and that's what I've taken you  through okay that's fine so let's save this and   now it is the same we have it's going to invoke  let's go into the same dialog and let's create   the component for this and this is going to be  the dialog component or Department page you know   we have the dialog already so we need to create  the page itself so from here we have Department   we have the department dialogue and now here add  a new component and this is going to be Department page all right so the same thing as we've  done um so the same thing and I believe I   say the same thing trust me it is the same  so from this I can just grab all this from here okay so here we have the same style as you  know this we call this Department dialogue and   you know it have the same reference the same save  option the same Department here the same general   department so here we're going to supply general  department to the dialogue if you check this it   is accepting a general department as a parameter  which is a list so we need to supply it we have   three one two three right so we need to supply the  same type one two 3 this a reference this is going   to make us have access to this method down here  change title since the public type you can have   access to it using this at ref reference okay  so we have this title stat we have the object   created Department initialized we have the list  created here the same Department to display un   initialized we call this to Method get department  and I get the general department list subscribe   to hide and show we have get department to  get the Department here we have get general   department to get ordinary Department maybe you  be saying ah why can't you put all in one yes   you can but the reason is here it is used for add  or update this is going to be used for no this is   used for add or update this used for display at  times you don't want to add you want to display   you want to just you don't want to add you want  to update you want to just display if you want   to call this again then you have to call this  again all right but since weing them the same   type in the initialized so we can just put the  same here then maybe you can say load default   but for specific sake for you to get the better  understanding what it does that is the reason why   I did this you can modify the way to suit how  you want it okay then we have this add button   click you want to change the title display the  dialogue and now this is the open dialog called   this method to display now I click on save you  can see the same thing right so I need not to   explain this just that here we need a department  service not general department service update   passing the object department and now with this  it is coming in with this department since we   invoking and we say Department copy this in here  we can now paste paste okay and that is all so   in here we going to say this equal to null and  I'm set change the title if I click on edit this   depart that we have we have created initializing  from the SE section this section section okay so   um assign it to the department as an incoming  payload and um open dat box to Del update and   that is to delete do same confirm and now call  the department service passing the department   based URL and now department ID display the  response get the whole department again and   this the section this you know it already  dispose it when dying up all right so that   is the same thing now what we need to do here has  have to display this so first of all we go to the homepage so hom page can be found in the  pages you can see that's the end here um   homepage homeage that is this one right so  there's an other we have Department there a   homepage now this the homepage you have tab table  oh table table Banner we have department so guess   what we have also this department let's say this  this is going to show in the screen but how can   we hi and show when you check the department  um page you must have a UI so this is a code   section now on a UI we need to use a method that  we created in the state container so we can hide   and show this anytime that we want so in that it  is the same thing that we done so the expanation   won't be too much here see weing show department  so it is a state from the All State okay so the   same thing add button I can just move to the next  line so you can see it well you see the same thing   isn't it check it out here we add the general  department then we look to the department and I   will check if this is not now we have account to  initialize as a counter we get a department here   item department. name so here we are calling from  the link you know when creating a relationship we   say list of departments is going to have um list  of department we made a reference in the general   department so one to many and many to one so one  depart general department going to have a list of   department that is one to many when you go to  the department it's going to have um a list of   department going to have one general department  that is a many two one we did that earlier on and   that's what we doing here so we have this edit  at on click we have this and edit and I delete   the same thing that we are doing in here and the  department selected for default one but when we   run this we might have an error the reason is we  have not included this so definitely when you try   to go to edit there will be an error we don't  want to see that first so let's run no no let's   edit it first okay so let's go to the server not  the server itself the server Library that's from   data assess and now in the data assess go to  the general department not that the department repository so in here when you go to this get  all you you see we have this I would like to   you can put this in a in a in in a DOT form  okay so we have this we have this and that   but in here we must have as no tracking so let's  use as no tracking then dot we have do include   general department maybe asking yourself why am I  using as no tracking if you check the community I   have posted um this the programming tips from this  Jara now he said that this as no tracking actually   tracks it you know when you get data from from the  data B using this the contest it keeps tracking   the data so that anytime that you want to make  an update it makes it possible here we are just   reading the data only so to include or to improve  perform for months we have to set a snow tracking   to hot it so anytime that start to track it say  no don't track this let the system let the memory   be free so no tracking no cash data stored nothing  else then we can now move on okay so this going to   is there to improve performance but you can decide  to also skip it okay it doesn't matter but when   you have in a large scale application this small  small things actually improve the performance here   for data Retriever and query and a whole lot all  right so we are including general department and   now this going to make it work so save this and  you know what let's run the server again so save   everything make sure the server is closed and also  the instances created is also close you know this   one make sure you close it up then right click  on the server let's debug this and I'll start   but before we start I think I remember one thing  we not going to see the display because default is   going to set to off unless you click on a button  so to do that let's handle this first let's go to   the nav menu the na menu can be found from the  solution Explorer you go to the client service   or the client section and in the client you can  see we have the pages layout and there's enough   menu so you want to handle this in here so you  don't want to inject this States let's close this   authorization we can cut this then let's remove  all this from the top here we go to the import   of is here already so with this we need okay this  already so we can remove this one no duplication   save the state also um stated already so from here  this is what we doing let's see we did this in the   last video so you know this must be um when this  is clicked so this is going to be an all state so do general department clicked that is if I  click on general department now where from this   general department it is this one so this is  General all right so if I say General D that's   going to be general department so that's what  you're going to make some change in here and also   we need to let's finish all this quick before you  move on to the next one once you have the gener   department you're also going to have Department in  here now that department let's go bind it to the   department click so maybe Department click also  has to work from here and that's the department   click so this for Department aside from that you  going to also have Branch so Branch clicked there   is a branch as you can see so Branch clicked  let's have this method so we can wi up and in   that we let's have this line as a line separator  to set separate it up then let's go to the next   one that's going to be country so we're going  to add one more for Country aside from that   you're also going to add one more for City then  you're also going to add one more for um town so   this is going to be the city now City clicked  and then the last one here we're going to have is let's see this is going to be the town okay  so to clicked you know you know we are using the   bootstrap icons so when you check the icons  then use one that see to what you're doing   aside from that let's also have this line  separator to separate this then we have the department so at the end we are going to use  authorized view to hide this some of them from   the users normal users and let's administrator  then we show everything okay so this what we have   now let's let's have a Kea style so we can change  the the Kea to pointer and we can put that down here okay so aside from that we need to have the  department or Department stated down so we know   we have Department stated down here already so  this I'm going to do I'm going to use this Lambda   expression for Department we have um let's  say we have General then there's going to be department and we have brand the next one is  going to have City Country City and our town   so we can see that we using the state container  here right then let's have the user and now the   employee so if I click on user display user  click on employee display employees so when   it Che down here let's let's have a look  with the user so here we have this counter   you can remove this counter and now the the  home is there so counter shouldn't be here   we don't need it then you can see we have  Administration and now this Administration   maybe we can manage it a little bit so this is  going to be um manage user something like that okay so manage users click on  that you're going to have this   drop down as users then let's have  this click attached to this to the user so we have this user and it's going  to be click attach to okay so this order   that you want to um have it and now  instead of saying um Department maybe   this this must be available for only admin  right so here we can make it the same same Administration then here let's say management  so with this some of them will be available to   users that they the admin assign to work with it  or to work with them we can have management and   in inside the management you have this general  department we have Department you have branch   and all stuff okay so this is now set and that  is it what we want to do here we can save this   and now let's find this up let's see if the server  is already on no it is not we have to run a server again so the server is ready first of all  let's have a look so click on department   and I'll get all we want to include all  General departments but I can see here we   have this cyclic um event or detected let's go  to to the source go to solution Explorer then   go to the base library from the entities  click on let's see from the base entity   no link here from the branch we see we have  this link so we have to include this Json ignore okay so let's grab this course I'm going  to be using it all over copy this let's go to the   City to it has a list of towns so let's include  that go to the next one countries does it have a   list of cities so let's also include this let's go  to Department it has a list of branches so let's   include this we're doing this for so we don't  get any problem we go to doctors it doesn't   have employees it doesn't have list from here  the department has it a list of department so   let's include go to okay this one doesn't you go  to what time it doesn't okay so here base refresh   toen and sanctioned it doesn't have this sanction  type has a list in here so we need to um include   we go to towns it has a list of employees so we  have to include then user RS doesn't vacation   doesn't and vacation type does so we have to  include this here so if you actually check all   this you can see that you have all this J ignor  should be specifi on the list type so we can   skip this cyclic um error which always go like  a roundabout okay it Loops to get 34 so let's   include system. test. Json we have to add that  let's check the add s overtime type has it up so   this overtime type it has only ID and our name we  did not then overtime so here when you check this   even there there must be know from S Type we  have this one to many we have to include the same but when you go to overtime type  it is inhering from this base entity if   I pick definition it has ID and name  and now since there's a relationship   we have to also establish it  in here so as a list so from overtime list of over times I think that's this how it's supposed  to be we have to run migration when you're working   on that then we have the set to what time  type then what time ID okay we go to general   department we have it then we go to Department  this a duct test we have the department so we   have to include this too from this general  department then country has a list let's include then City also has it Branch also has it   okay so doing this it is not going  to work let's run the server again all right so let's check it up from  the Department that's where we have   the relationship created or established so  click on execute and I can see we have the   department in here and we have the department  so we have only one department for now and   that the department and you see that's general  department ID of two and that is an ID so this   is a general department the name is general  department name and you can see there an ID   of two here okay so we have it to work now  let's run this clan to and see what going to have so the app is ready now let's go to  department and we have you see we have all   this so this is general department that department  is too long so you have to make some change I can   make it as only General okay General be okay  or I either I have to expand this but I'm not   going to expand that or I can move a little  bit here okay so maybe um any of them still   going to work when to check the solution from  this we have to we can do that check from the   na menu and if I actually check it well you  can see from here it is having having having   from this management and from this drop down  it is having a left off five margin left of   five isn't it and each is having I think  this is a list right so this is a div that   displays the general department so maybe you  can make it as three you save this refresh this again check it up so can see now you have it  yes so it is working yeah and that's it see   I have this USU okay so if I click on General  deep General deep right we have Department we   have an ID we have the department name and I  click on the branch you see we have it this   is the branch general department name click  on this so you can see it is having a branch   of ID of what two so check it out we have it  right and this the depart that we created if   I click on edit is let's see I pop up and you  can see we have edit the name select Department   so let's say the department is under is under  is under let's say server handling well I don't   know I'm just passing something server handling  is a department in what you think will be an it   so choose an it now I'm going to change from  this click on Save and now yes updated process   completed fantastic check it out Ser handling  department is coming from this department one   but this is the remains okay so that's  a problem we need to have a look on this let's go to the code we have to navigate to the  Department repository so in here when make the   update instead of updating the whole item um  and in there this what you're going to do you   know when it gets to database and I'm find out  that the ID of this item it is not found it's   going to turn it as a new item which going to be  saved but I don't want to do that okay so you want   to make sure up that's what we expect so let's  um include let's use the four one that is this   one you make a SE from database by tracking then  we want to update the uh Department ID in here I   think this is going to solve the whole issue so  let's save this one let's find this up now let's see so in here let's first refresh this then let's have a look click on the  management department and now in here let's   make the edit and see so let's choose an it that  we wanted to use Now update this click on okay   and I can see it has now changed so meaning that  when you use the the update the inbuilt one with   a relationship at times it gives you problem and  maybe we have to use a manual way of doing it okay   so let's add one more or let's delete this two  are you want to do this yes I want to do that so   click on okay and now it is off let's add another  one so passing the name as um server handling as   you know is from this and it then save that and  it's going to be saved we can also add another   one and this is going to be maybe maybe maybe  maybe maybe maybe well um this is going to be   the home cleaning and this going to be part of  the cleaning section so cleaning in here click   on Save and you can see you're having it in here  okay so is working now let's work on the branch   and um we are done with that then we go to this  country City town then employees and we have one   in here user so these are the thing that we are  supposed to work on all right so we have a lot   of work to do now let's have it done now you see  we've done the same thing we're going to make a   copy of this and now use it for this branches okay  for this Branch we're going to change the general   department to just department and I'll use the  list of um Department instead of using general   department in this department component all right  so let's have a look on this and how we can also   implement this if you know you are tired you can  just you can just pause it for some time relax and   now let's let's start okay I'm not tired so we  have a lot of work to do so let's let's move on   okay so before we skip here let's see this is the  department depository so we go to the let's go to   the go for branch repository in here and now we  have to make this change so from this get all we   we have to include dot right so do include let's  specify as no tracking so as no tracking then do include let's include here Department to  D Max to D dot Department okay so let's   do this or you can just put it line  like this it's still going to work two list okay so we have this now  let's check the update so here we   add once you update we say department  DOT Department ID so this supposed to   be an Department this supposed to be  a branch right so let's say this is a branch so we check Branch branch and this is  going to be branch and and Branch Department   ID is equal to item. dep Department ID that's  what you must do or we have to do it okay so   let's save this and I believe the rest is okay  it's the same let's go to the component for our   class session and now in the component we're going  to make a copy of this so now we have Department   dialogue we're going to create um Branch dialogue  as well so I click on Department let's add a new   razor component and this is going to be Branch  dialogue now with the branch dialogue you know   what it means we're going to have the same thing  the same code the same style so that is where I   like copy and paste very simple one you can see  we have Branch list of department you know at   first we use general department but here we  have Department there an event call back in   here you had visible done already and if it is  saved done already right invoke it and now so   select Branch not Department oh okay so the same  Department name then dialog open the same invoke   it in here passing the object then title change  title and you're going to have this so Branch   id. Department idal to pass the department here  and I convert the value to integer and as you   know you can see the same isn't it let's have the  UI so that's why I'm just running like a rabbit I   told you earlier on I'm going to run okay so  let's see we have have this done and for the   this the UI we are using the same SF dialogue  component now if you check here the same thing   that we are having the same title department  and this going to be a branch right so title   add Department not this going to be Branch  so it must be add Branch or update Branch so   Branch Branch ID Branch name to Branch if it  is not now get the Department name from this   then in here display this you know the same thing  button and now when it come down here we have it   very simple one and it's the same okay so no need  to explain again because I've extended this more   than twice this a third time now let's have a look  on the next one and that's going to be the branch page we have to create this component So within that Branch page we have [Music] to  we need to do same as we've done so from our   code section what we did to the branch page  the same thing you're going to have access   to the title um Branch dialogue as a reference  you're going to have the branch as a container   as an object you have a container department and  there's a department of what this is a container   of branches so this is going to display to  the user and and it going to display anytime   the user want to add Branch we have get brand  gate department and you know get brand gate   Department as you see we passing the pattern  based URL Branch based URL from the constant   class which is static we have a add button you  know it is showing change the title open dialog   is calling this in the add button clicked we  have save if it is greater than zero it means   you want to update call it passing the branch  based URL else you're going to add it so here   is an update this is add ins set passing the Bas  URL and now if it is Success click the container   change the title to add and edit container  edit click change the title open Branch set   this Branch here but you know from this handle  save option this must be Branch then we say this   Branch so with this Branch copy this Branch then  if the branch ID here it is one no it is one it   is good than zero that you pass in this branch  else passing this Branch set a branch new and   you're going to automatically write write that  okay edit set the branch this one and now open   the dialogue you're going to fill it up oh that's  simple so this all that we need to do now let's   save this to we need to create the UI and the UI  to in the same thing that we doing so we have to   you can just grab from the U in there and we  can paste it here very simple in a quick way okay so we have to also implement this interface  I disposable since we are using it you can see   we include a branch dialogue and you get a  reference a Save branch model Department list   we have it there a k Star as you know we've  done it already you and I there's a button   as you know is the same thing that you know  we have the height and over overflow scroll   and Etc you have the column header this are  the the buttons to edit and delete and then   you see we have that is it's the same  no need to talk much here okay let's run this oh so it is ready now I hit this small one  let me open this now Branch management department   so we're going to Branch we have it opening here  oh do you know the reason why you're not having   this tell me oh yes I believe you know it but you  can't talk when you check this page we go to the   homepage and we did not include this so go to the  homepage and check it up we did not include that   I believe this what you're talking about isn't it  so Branch page that that is it so let's run this again now let's have a look on this uh management  branch and we have it in here currently Department   Branch action nothing happened in here add Branch  let's see so so I'm going to add Branch here and   this branch is going to be uh which branch which  branch which branch okay so Kumasi Branch well   this a Comm Branch so here we have sever hand  link you see we have these are the branches and   this this Branch this department so this are the  department that we have right so which department   does this Branch fall is it home cleaning is  this s handling okay so this Branch from s   handling then save this so saved you see we have  an issue here have a look it is saying that object   reference not set to an instance from this um  Branch page line one let's check it up Branch   page line one branch page this line one so aate  show Branch you have it if branch is null if it   is not then this what you want to do Branch name  okay did we include the branch Branch P Tre get   all branches include Department okay okay so we  need to just build the application and everything   is working all right so we have this Branch now  we can add one more to this let's say okay so   this is going to be in Acra branch and this is  going to be for this department we in Acra home   cleaning the branch of this let's save now let's  see completed and I can see we have it over here   so see we have the the department then we have the  branch in here all right let's see if we want to   add to cect Branch so this is Sal Department we  have to um handle that now from the edit two if   I want to change this to um s handling from the  branch click on Saved now let's see you can see   it has also changed now you have the same Ser  handling from the same Branch now let's see if   I can also delete is it possible yes I can also  delete it all right so this also working now   let's have a look with the next thing is there  so we are done with this three We're Going to   the Country City and our town so before we we  go to that I want us to make some changes here   from this dialog Branch dialogue instead of  saying select Branch this going to be select   Department right so department and maybe I'm  sure when we check the other ones you must have   the same issue so department. dialogue and this  might be select general department okay so this   here and yeah that is it now let's have a look  with the next one this is a department that's   going to be location so from country City and  our town this must also be a sked style so the   first one is going to be country must be selected  first then you're going to have the city and then   the town so let's let's stop this application  and in here we go to the same content Pages   now let's create another folder and I name it  as location you know I want to organize this   now in here let's create the first one let's  handle the country first so we have country dialogue I click on this add country dialogue  and now in the dialog we still going to have   the same thing so the same thing for what we've  been doing copy and paste is the best so far we   have countries we have a country in here and  we have handle save operation events as for   event callback the same thing then we invoke  the country in here so please you need to   provide country name it's an alert then change  this okay now let's have the drop down to give   us a session for the country that the UI so  from this user interface we have this temple one maybe I can just replace it to well so we  have this you know it's a dialog box is the same   we have country as a model unsubmit is saved we  have country ID country name the same and there's   a button so if I click on it you get this method  invoked fine save this let's go let's create this   country page where it's going to use this chart  component that we have created so you can see   in any we create a component we create parent  and a child right and then we are communicating   using event call back and also parameter um  communication right click on this let's add a new   component in here and Country page now now in that  country page we can have our style and you know   the style what we be doing so the same K style  maybe we can put this at the CSS that's the app.   CSS then we can be using it once but well you can  do it that that's why you're a genius you can do   it so let's see we have this country dialogue and  you see reference to this as country dialogue when   it saved and another country um object we have  the same thing in here there's a list of country   we get as soon as we add we get the country from  here then you see we getting the country from this   country based URL from this constant class static  class when this button is Click change the title   and I open it call this method in here now when  it is saved we have to return this country because   it's a event callback and it's coming with a model  now this country if it is n if the ID is greater   than zero you want you want to update it passing  if not then add it passing the country based URL   display the response and if it is successful get  the list and I'll change it to title if edit is   clicked then call this method assign it to this  country and now open it dialog it's going to   automatically fill up delete is Click then confirm  as the person if for return if in case it is   through call the service and now here passing the  country based URL display the message get a list   again because an edit has been um occurred and you  need to refresh it that's what we are doing very   simple one now in order to do this first let's  go to the homepage and let's also add the country page so here this what I'm going to do let  me just cut all this control period I need   to include this because we're going to have  country City and our town so let's cut this   we go to the import where is it where are  you import where are you oh it's not here   so go to solution then from this client you  have the import and let's space it here okay   let's go to the country repo and I'll try to  um here let's see what we can do so from the   country repo it is here do we have country  repo we have City okay this is a count repo   and let's see from the Save delete we have um  get all we are not including anything from get   by ID to the same insert to this same in here  and now for update we don't need to do same   you don't need to do same right we doing same  as well okay so that is it one very simple so   let's save this and once you've added this to  the homepage we can now run this and test it out run the client two let me expand this okay  so management now you go to Country oh we are   not having the UI did we actually put in the UI  oh there's no UI let's check it up so from the   country country Department oh the country  Department country page country dialogue   country page do you have the UI UI oh we do  not have the UI you see so let's include the UI so the UI 2 is very simple it is the same table  that you know we've been doing show country from   the state container add button and the same edit  and click because you are looking to this country   list and that is what we are doing you see the  same delate and yeah that's all so I know I   you know to explain this yes trust me and now I  think everything is going to work let's run this again now let's see from management you go to  countries you have the form do we do we do we   do we no we don't no we don't no we don't why  I know we have added this country page to the   homepage in here oh okay so this is a dialogue  it's supposed to be the page I know you've done   this you knew what the writing so you've done it I  did not see the dialogues are the chart component   these are the parent all right now this parent  also become a child to this homepage so it's a   desender sty so this hom page a descendant to  the country and now the country dialogue what   the country page is so is a parent to the country  dialogue and the country dialogue is a child to   Country page component that's how it is working  so let's see from the management now country oh   we have it now see this at the country uh we have  Ghana here and maybe let me just edit this tell   me the name of your country let me add it I know  India yes India is one I love that country yes so   um let's see and I love the program is there to  now let's see from here what else let me come to   Africa Nigeria is in here and it is close to me  okay so which one again uh well well well well I   know I know B me have to type United States right  and let's see so these are the countries that we   have what else okay so who whoa whoa whoa whoa  I want the the the short ones Kya is okay for   me very simple I know too this is here what this  again ah okay these are simple ones so you see we   able to add these countries okay now let's see if  I want to delete this I want to delete no I don't   want I want to delete maybe too so you click  on this you see hi it is done fantastic if I   want to edit this to maybe India let's see I made  it I want to add India so save that completed and   let's see close on that ah I have it right but  is not how you spell it go back save H that is   it so that is working we can do everything now  let's go to the next one that is the city I on   City what should happen let's have a look before  that let's go to the repo City repository and   now where we have this repo let's go to the  get all here a wait do City do to dot as no tracking dot include so here you want to  include country so C Master to Country   now let's go to this inser we have it  done update so this supposed to be um city now with this city we first check if it is  now in case it is not city. name call to this   item City do country ID is equal to item.  Country ID we map it manually we save it   and that is all that you want to do here okay  so this means you have to close this have to   terminate it because you have to R it again  when we're done we can also shut this down okay all right now let's see the next one is  I have to close this two yes it is done now   let's go to the oh let me clear this all  this cuz you're done clear all this okay   so solution we go to the client Pig country  now you have the country page right so we're   going to also create City so let's do that  add a new component to location the name is   going to be City dialogue as you know now the  city dialogue we need to have this our code   section and it is the same just that here we  need to populate the country and now passing   as a parameter to this you can see list of  country as countries then country city city   and here is a handle save operation the  same event call back then you know you   need to provide country name yes of course you  need to do that okay you can't do away without   now open change title invoke it get the the  country ID invoke it now let's quickly have the UI and now with the UI you're going to  have a drop down section where you're   going to display the country so the  can just choose so you can see have   title changing title Dynamic title we have  um city name City Select City no select country then country name if it's not now display  this this going to there for the edit and this for   a new adding you see you have this item as count  country the value of ID and I test his name and   aside from that when to check here we have it as  soon as I click on any of the country I'm going   to set the ID to the city ID and city. Country  ID that is what it means then you know this is   just a relationship I believe you know that  because this is a country ID which is making   as a foreign key to the city and the country  fantastic okay so we need to create the the   page the boss page itself and this page is  going to be the city page so let's quickly   do that too right click location add a new  component City page let's have our code session so it is the same we have this title um  have the reference object reference made   component reference we have cities here  countries to populate and return as a   parameter initialize get you method  City countries when is ADD you know   pass in the country based URL and now from  City service pass the city based URL when   this is open dialogue I open the dialogue in  here when this is save it is coming in with City so if City here it is null or the ID is  greater than zero it means you want to add   passing the city in but in case it is not then  you want to add passing the city from the city   service passing the city based URL then save  and I return access get to cities clear the   container and I'll display title simple one  if edit is Click then edit this assign it to   the city then open dialogue delete confirm then  get from delete from the API from there the end   point that we have then after the end guess it  is in here okay then that is it save this let's   go to homepage and add City page so homepage  then add City page do you want have to try this   yeah I think so let's see if there's no issue  with this so I click on this server let's run this let's run the client two so you know we have a city page it means  we did not add let's see City page this is a   country City page okay so we did not include  I always forget this wow okay so from the city   page you have to include the UI so it's very  simple way I know you can do that to pause the   video and try and see if you can include the  UI for the city page okay so City page City   page let's check first do you have the dialog yes  we have City page now here okay so it is the same   add button then these are the headers these are  the the buttons edit and delete loing to cities   uh list then setting up counter and that is this  one so you see it is the same now let's do this again all right now let's click management cities  so we have cities in here now let me edit this   because I don't have any city name as string  in Ghana we have an AA I hope you heard of it   right this is Ghana here okay click on okay and  that is ADD you see I can also add another one   so let's say I want to choose the same Ghana we  have another name Mas Massi so save this now we   have when you go to Nigeria I believe we have  Lagos is it logos or Legos logos Legos so it's   coming from Nigeria save that so maybe you can  also add your country name maybe you want to go   to um well which one again the same Nigeria  we have um Abuja I think so it's a city it's   a c well call City okay so um that is this one  Nigeria save that I you know from NY New York   and this coming from maybe United States when  I go to have Nairobi Nairobi or so is that so   Nairobi maybe this coming from Kenya H okay and  maybe you can have Pari from France so Pari is   over here at least each has one okay so India  okay so all of India Maybe I you know what of mumbay oh that is it okay so save that all  right so now we have this in here okay now I   can delete any I can also edit it let me add  one more and and delete it so maybe country   City Hy it is coming from Ghana save this  save clear this now Del this is wrong one   so right click are you sure yes get it is off  okay so this also working we have the country   here we have the city okay so now let's go  to the town we must have these towns the   cities and I'm going to have a town related  to each of the city so town here we're going   to work on that let's see so we go to the town  repository so Town repo now from town repo you   go to the two list and now with the two list  do towns Dot the town dot ASN tracking dot include then this is going to be City so dot City two list when you go to  the update there going to be time copy this copy and paste so town. name  now town. City ID is equal to item do c ID save it that's all that we need to do  so sorry Department not found this going   to be sorry style not found and I can say  that style already added okay or you can   even include a name so maybe if you want to  include a name let me show you one thing use   this string interpolation then here if you  want to say that maybe the name so say item.   name that is very simple one save that okay so  this working we cannot close this although we   haven't tested it but it is working trust me  if I say it is working trust me it's working   I know you know that it's also going to  work let's go in and create our repost   so maybe in here before we forget this let's  add the town page although we haven't created that okay let's grab this then let's save that  we're going to create the town dialogue and also   the town um component okay that's going to be  the page component we go to solution now from   the location let's add the last one and this is  a town dialogue so Town dialogue we need our code session then you know the same thing  Town list of cities we have event call   back invoke it in here open dialogue  and now I'm get it C ID let's have the UI on top it is the same looks same we  have the drop down list for city name if   for update and now for adding of new entry so  select City or select your city in here going   to start the city for this you know the  it item is city that is this one okay now   let's create our City page and that's going  to be the parent page for this no the town page so solution location right click add  to page then in order to skip this I want   us to First have our UI first let's  create our UI before I forget it so   this our UI we have shown show town from the  UP State then we have ADD button clicked we   have the same header we looking through  the towns displaying it and passing in   what edit clicked then we have this town  component down here and we have town and   the cities to provide as the parameters  now let's come down here and handle this method so in here you're going to handle it with  this we create our instance of this component   that we have added a to is over here we create  an instance our L container is here for cities   the same less container for towns to display  the screen then if initializes you want to call   these two methods and these are the definition  for them and aside from that passing Town Base   URL and City Base URL for each if button is  Click Change Tittle open dialogue set tle to   new open dialogue open dialogue open dialog  then open the town dialogue if it is save it   is come in as a parameter of what town so pass  in this town we can now go ahead and check if   Town ID here it is greater than zero you want  to update it if else then you want to add it   as a new response check and then get towns change  title edit is Click then change the update to the   title of an add to update then assign a new one  coming from the payload then open dialog again   delete confirm first if was return in case it  is then passing the Town Base URI passing the   ID because this method needs an IDE of it at  the end of the day if through then get down   then there is a method to display the message  okay this saved and I believe we've we've added   it to the homepage yes now let's also try this  and see so from our server let's write it again and now let's also refresh the client got is ready so let's open it management  and our town we have it in here so City and our   town so Town let's let me edit this now in Acra  we have that I say in Acra it's a town save this   aside from that you also have um let me use  the ones that I know okay so these are all   Ts then okay you need to provide city name okay  so this is an Acra so you have to added two now   maybe in K we have uh T okay for Kum so I just  select this and yeah that's why I know foros or   Nigeria I don't a town from this okay well so  this towns you can provide town to this okay   so town that can be found in that but let me  maintain this two from here let me close that   if I add a new one I want to delete maybe I can  also delete it so each want to do this place and   I can see it is off so we have two towns added  in here okay and these are the cities so we have   four sets now let's have a look with the this  Administration if want to manage it how can you   work on that then we come back to the employees  so we are completed with this from Department up   to the country so you can just this is an entry  point or this is a management point that you can   manage it when it gets to employee you have  to add all this so you can have it selected   from this employee this is going to be the master  one so let's have a look first with the user and   this can be accessed by only the administrator  you can just add user no no not add user okay   user must get registered we going to be assigned  automatically and the admin's RO here it is to   update the roow so if you are just a normal  user I can CH you to be an administrator to   what I am I I can also um de administer you  okay yeah so let's see how to work on that too so let me just hide this or minimize this on  and now let's go in there and I create user page   P so from here content Pages let's add a new  folder for organization we have to stop this   first as we can't rename this now let's check  it up so from this homepage we need to make it   as user Pages now with these user Pages we need  to also create the same user dialogue and now um   the user page so right click on this user page  and now let's add a new component this is going   to be user dialogue now this user dialogue we  also going to do same so let me just grab this   the same procedure the same method like you see  when you check here we have this manage user oh   I did not create that class right that's what  we're going to use to populate data so normally   um one of my friends suggested I should use a  dto but this a dto but I did not add a D2 to   it so maybe later on I don't want to just spot  the whole issue with it okay so I just maintain   this maybe in a later project any time I want  to create etos I'll just have to add the name   convention all right I'll be added to it but well  you canci to do that for clarity sake and also for   readability well it's good right click on D toos  and they going to add a new class in here and   it's going to be the manage user so this class  going to handle all the properties that we need   to get the user here so in here we need we need  only name email okay we need name email user ID   and on the row these are all strings so the row  will be string so that's what we need in here   this what you want want to display to the user  okay in case you want to add more then it's up   to you to add more properties here now let's go  back to the user dialogue and now where we have   this manage us over there ready we have system  rows that's what we we created when doing the   authentication it is about in part two part  one part two yes so part two part three you   can check up you going to understand what system  row is but if I PE on the definition for this it   is just a row that starts from table to database  ID and our name that's what it need very simple   one then we have manage user so you can see here  is an event call back that to send the list to or   to send a model to the parent then we check you  need to provide user uh the provide R name that   is the admin want to change the r name and decide  not to select any we will not allow the admin to   save it so we can see do the same thing here and  a system row you get ID okay so let's have a UI created so for the UI you can have the same what  you've been doing we have the same um dialog and   you can see there is an update this is only update  user so you're not making this as a dynamic title   or dynamic header manage user is a model that we  passing in and you know we have manage user name   this is disabled email disabled it is only row  that is um that has been enabled for the user   to select so um if row is not empty then we want  to add you want to get it set the selected value   to it okay that's what we're doing in here and now  I think this suppos yeah it's gone that's display   selected that is for update and this is for adding  a new one the T item is system row system Row for   the T item and as the same thing the value is and  name and the test is name you at first you have   the value name as the ID this time right we not  going to have the ID you're going to retrieve the   row name we go to database we search the list in  there or the columns which have the name that we   have specified as a row we can grab the ID from  there and I'll update it okay you can also make   it as an ID in here now when you change this as  an ID unless you pick the ID go to database and   I retrieve all a name or a row which has this  ID so we can display in the table because you   don't want to display just a r ID you want to  display the RO name the ID is hidden for you the   administrator or for the developer but the name  is visible for the user all there the normal user   yes so if this is clicked to we want to have this  on value selected in here we get the name as you   can see here we not using. pass we get want to get  the name straight because this is a string I want   to assign it in here you have we can also change  title but title I'm not sure this this important   now because no title changing it's only update and  now even this there's no title needed here okay so   open dialogue set Vis to through and that is it  okay for the dialogue then we have this so what   we're going to do here is let's create our user  page and where do you think we need to create a   user page maybe I know you are just suggesting  or saying your head that we need to put it   inside the user folder Pages folder and that's  correct correct for three points okay so user page and now with us that page let's first have  our the code section that is the first thing I   like to do most so from the code section you  can see we're doing the same thing we create   an instance of this we create a container it's  not container actually it is just an instance   of this manage model then we get all users from  manage users we get the system rowes then when   the page initializes get user R get rowes in here  okay so within this we have this get users and at   this many user. account service. getet users then  get row equal to you want to also get rows open   dialog in here to open dialogue and if I click  on Save I am just returning from this so here we   have to once you use this we have to invoke and  it is coming in as um let's see tax user page   so when you check this handle save operation  event it is coming from this user dialogue   since we are invoking it up in here we have to  retrieve it from the user page so here we pass   in the it is as a manage user then we say it's a  manage user payload from the chart components so   in here we update it okay so here we just making  only an update not addition we are just updating   and that's what we are doing here okay after that  we display message and we CLI the container get   all users and I if it is clicked then you can  see in here manager is equal to this right so   we open the dialogue okay so you need not to or  maybe you can just set the title update user but   title is already set already title is already  set already it is set already so you need not   to overwrite that because just an update in case  it is deleted you want to delete it then as this   are you sure you want to delete or you want  to delete the US this user if yes then delete   this user from the account okay then it means you  invoking the account you're invoking the person's   account the person will not have access to the  system again unless the person registers a new   account okay then later on you call the service  maybe later on you can decide to you can put some   bra list on people using their their emails or  their staff IDs so that they cannot have access   to the account it is an Advan is a scalable so you  can scale it to anything any any way that you want   okay you can um add more features to this then  display message here to use a dialog service and   I dispos it up but know we having delayed user  this are the end point update user get rules   get users where from this yes we need to include  them so we have to update the interface for the   accountant cas then we can now go ahead and use  them because when you check the import you know   we have this in here employee we have account  service account service but when you check this   account service it doesn't have this interfaces  check it out so go to this account service check   the account interface it has only create sign up  refresh token and I get weather forast okay now   with this you want to remove this you don't need  weather forecast again so let's clear that so we   are going to replace it with this ones so can  see we have get a list of managers we have this   update user and passing this the payload we have  get rows a list of system rows and we have this   delete user and ID is a payload okay so we have  to create implementation for of this now let's   go to the interface implementation and it can be  find implementation folder from this user account   service so here we have to implement it down here  okay so let's come down here we don't want this   anymore so we want to remove that so first one is  get users we get all users here from this get from   Jason has a list of manager there's an ALT URL and  the users we're going to create an endpoint known   as users so you can see we are using this um API  there's an ALT URL from this API authentication   that's what we are using okay now let's see now  this we get the private HTTP client because here   it's a private type and now you must have the  token to the header let's have a look there an   update we also do the same and here for the update  it is just a put adjacent asnc and that is what we   are doing update user passing the model coming as  a payload then the next one one is get rows so for   get rows all I need to do here is to get a system  row and then displayed so get private ATP clients   then system Rose to the / Rose then we can now  move on and the last one here it is delete user   so for delete user we just have to delete async  that is an API route or the HP client or delete   user passing delete user on the ID return the  response to the user this you can see these are   the responses that return the return type General  response and the list of system roles and Etc okay   so we're done with this but we have to create an  interface and implementation repository for the   data access layer so we go to the solution  and now where we have this server Library   that's a data access layer we go to the contract  which whereby we have our user account we have   to include the same interface in here so we can  just grab this interface from this session then   we go to this user account no that is the I user  account rippo then in here let's paste this here   after doing this when you go to the repository we  have to implement the interfaces for each so user   account repository that's what I'm talking about  now come down here so you can just ref fresh token   minimize this okay so in here let's have the  implementation of this the first thing that   we are doing here is get list of manager okay  so manage users now here is what you're going   doing you first want to get application users get  user rules get system rules this method must be a   private method that we can call within the scope  of this application or this a file okay because   we don't want to be repeating this method all  the time so we create one then we can call this   all the time oops object oriented programming  okay so you create this as an object that you   can be calling in your classes form you can call  it a numerous times until we we are tired okay so   let's have this method created these are three  method which are going to be private I'm going   to put them at the basic here now this method are  what tax get system rows and and is appdb contest.   system. asot tracking. to list so you want to  return and user row and also this application   row. to. asnc okay so that's why we are returning  this are the methods that we need and now here we   get all the rows in here after that we're going  to check if the all users count is equal to zero   or rows count equal to zero we want to return mean  there's an error because as there is a user there   cannot be empty row because defaultly when you  create an account you assigned to a user R so   defaultly you must have an account a row attached  to so if this happens it means there's a problem   somewhere else then they need to contact me as  the developer now check here you see we have   the user is equal to new list of manager we are  looking through all list of users then grabbing   the data grabbing each row so see user row is  equal to First default user ID it's called to   us the ID from this user rows this going to handle  with this row ID and a user ID when you have the   user ID or the row ID you have to get the row  name because that's what we need so get the row   name from all rows whereby the row ID okay this is  not user so this going to be the row ID so row ID   is equal to user the row ID okay then we retrieve  say we're going to create a new instance of this   manage user whereby going to have the user ID name  email address and the RO name in here then at the   end of the day you return the user as a list that  that's what we doing the next one that we doing   here is once you have the get users we can also  have update user so in update user what are we doing it is returning just a general response  we passing the we accept the payload and now   we check from this system rows okay if the name  here is equal to the row so checking from the   rows if the the row coming in from this user row  it is found in there if it is it means the user   has found that you want to grab the the user  so get the user ID isal to this user ID from   this row user row okay so see what we doing we  are having this user coming in with an user ID   now we have this so here once we retrieve this  user ID in here we can have the user ID from   this isn't it now you want to get the user rows  this user rows contains the user ID and the row   ID so you want to grab the user from this so here  user row. where. user ID this is from the column   from this user row is equal to this user coming  in as a payload do ID when you retrieve it then   the row that we are getting from the new database  from the system rows we want to update it so see   user row. row ID is equal to this get row. ID this  get row so you want to get that and now you can   retrieve it or update it here after that you can  save changes and now return this R user R updated   successfully so that's what we're doing so here  user is updating only the role not any information   only role so switching from admin to user or user  to admin that is it you cannot change the email   you cannot change the password you cannot change  anything okay that's what the system is going to   be doing so even your admin are limited you don't  have all the the capabilities in doing everything   no it's only the the the developer who can do that  okay so that's for the update and at the last one   okay not the last one we have the delete no we  have get rows so for get rows we want to call   this method so call this system row because this  system row is going to have all the rows so call   it instead of using the context again no oops use  that and now aside from that the next one here is   a delete so if I want to delete then you know the  application is that table contains the user info   so you're going to make a search from that and  I'll delete it so ID application user find it when   you get it delete it save changes and I'll return  user successfully deleted so that's what we are   doing let's go in there and now add our endpoint  so we go to the solution and I'll try to add our   controller endpoint to this so you know where  controller is found isn't it go to the server   then here from the controller Authentication  controller We have basically have only up to   refresh token we're going to add the next one  and that's going to be the users so to get all   users an API com has made to this you call account  service get all users then we have to update user   so to update user we have to call this endpoint  then update the user in here then the next one is   um to get all rows call the same end point to get  all row R and the next one is delete user so call   this Endo to delete user you know that the HTTP  VB here some of them they have these are the route   specified these are specific route that you need  to specify and these are the parameter that you   need to specify as well and the IDE the parameter  here must sync with what we have in here okay save   this and now our end point is ready so let's  have a look let's run the server and I'll see so save or on the server then the bag and I'll start  with that the bag in all right so let's see the   Endo is ready now we go for the authentication  section you know we have this update arrows and   now delete right get all users so if I click on  this right this out let's see what it's going to do oh so we have an error for for not found why  not found because we did not add header to this   this this is protected so we are not having that  we can do that from an end point from an end point   where we have from the client where we can have  access to this okay because when you check here   we are not having this authorized attribute to  include the bar token here so let's see let's   consume this in the client and now everything  is going to work well trust me so now when you   go to this user dialogue I think this my soft  we see now let's say from this user page where   is it there you go so you can see this it's  now it's working now let's run the client   so the app is ready now let me open it widely  management and if I click on no Administration   and our user we have not linked this you see  you see this yes let's let's do this quickly   so we go to the homepage and now here we need to  include the user user page I'm going to cut all this and now with this let  me move this out you want to   have our homepage as much as simple and  readable so we don't want to include all   the whereby we have the appropriate  place to include them you go to the import then let's also add it here let's reload this okay so here too I believe user page we  did not include that have you see user page   user we not add the UI so let's see so let's  navigate to the user page and now in here we   have a UI with the S and as you can see from  this we have the same column ID name email   row and action based on the properties in the  manage user uh model so can see we displaying   them in here and now we have the click  that is on edit and on delete when you   come down here this manage manage user is  a list and system R is also a list um get   this method from here see we are getting them  get users and now I've explained this earlier   on so this a UI that we are creating or we  have creating we we are creating or we have   created yes so let's see if I try to run this  again let's see what we going to all right so   the app is ready back you see we have an error  here but don't mind let's click on let's log out and we're going to log in again  so log in here I'm not sure us are   not found yet so let's create a new user um let me use next code so I have this password one  two three that's what I'm using so let's wait   account created just update it sign in then  here log in and okay so successfully logged   in and let's wait for this to get loaded  okay let's go to Administration click on   user and I can see we have one user in here  right there's an admin let's log this out   we are going to create another account and  now let's see so create account in here user   this is not n code this maybe code Academy  then it's user one password 1 2 3 one two 3   register created got sign in email so user One  login okay got it now have a look here if I go   to us I'm going to have two so you can see  you have users right let's add last one log out register user so this is let's say let me use  my name Frederick and I have it as three password   password register create created got it signning  use this user three the same password successful login got it Administration users you can  see we have three right let me log in as   admin so there's Frederick now you see here I am  although I'm not an admin but I can see this so   maybe later you're going to put protect  this page only admin can have access to   this Administration but with this if the want to  change this to an admin check see if I click on this this I must have the dialogue but I'm  not having it why what of the delete are you   want to do this no dialogue open dialogue open  dialogue it is not working let's have a Let's   cross check so from this user dialogue we have  it in here okay so this is a user dialogue and   um this um open dialogue is visible to through  state has changed that's fine you have it in   here manage users user page we have this but we  do not have instance of that right so let's have   the instance here let's space it we provide the  manage user system roles over here has a list   list and now this and handle save or handle  update okay we have this instance of user   dialog service and that's what we are using  it here to open a dialogue aside from that   we have this um manage user as a payload and  we update it now let's sa this let's refresh this so let's open this so Administration users  and let's say so if I click on this user   and myself yes so you can see the name is  is disabled EMA Thea is only the row I can   now have access to two rows I choose the admin  click on save it has now change to admin so if   this person logs out and I loging again all  the administrated Fe say the person is going   to see I can also change it back so let's say  to user save it yes back to user I can delete   this let me delete this Academy so delete this  and delete it and it's off so we done with the   management user management okay this what the  admin can do only the admin now you go back to   the main boss and that is the employee so let's  close this up then you're going to work on the employees so let's close all these stabs and we have to create the interface for  the employees in the server so we go to servers   that's data assess layer from the server Library  where implementation because this also going to   inher from the generic interface that we created  now this is going to be employee repository so   let's add this now in here you know we have to  inherit from the same interface and I specify   the T value so we do that we passing the DB  contest as well then for delete we doing same   so for delete then employees find then not  found commit and unsuccess it is the same   method that we are going to use so here let me  also grab this and this is what we been doing   from the previous videoos so you know why I  mean it is the same for employees check name   and Etc so here from that is for the delete  let's have a look with the next one get all employees then get all employees you're going  to have it here so you can see it's a list of   employees then we are including all these so we  first as as no tracking then we include Town town   has a relationship with City so then include city  has a relationship with country then include then   when we come to Branch branch has a relationship  with Department Department with general department   so it's in a hierarchical form that we are  including or we can retrieve all data So   based on the employee we can retrieve employees  Town employees city employees country employees   Branch employees department and employees general  department I believe you love this right that's   fine that's what we are doing aside from that we  can get by ID so um get by ID we get the by ID the   same thing you get by ID and I return Then update  no insertion or add so we do same the next one is   an update so with update we have to do the same  but here let's try this and see first we want to   update the user you want to check if when you  try the update user will work but for this I'm   not sure the relationship would work so we have  to manage it ourselves so let's have a look on   that so instead of doing this we can just use this  mapping so we don't have any issue again okay so   we have this set and we now commit uh Commit This  we return um this sucess okay now that's all that   we need to do do here for this user we save this  and now we can go ahead and create a controller   for this user so for the controller we go to the  controllers folder then we're going to create   a controller known as employee controller so  solution Explorer then I click on the controller   let's add a new controller now this is going to be  employee for an API mty1 employee controller and   now in that you know since you going also inher  from the generic controller that we created so you   specify in the the employee to the interface  and as and that is all to the implementation   to and that's what that we are doing okay so when  you run this let's test this API out and I see so   if I right click on the employee the server go to  debug start without barging and let's have a look but I'm sure you're going to have an issue do you  know the reason why because you have not created   the Ben injection there's no registration done to  the empo that we created so definitely when this   runs you're going to have a problem with this  so quickly we have to include employees maybe   if you haven't let's check and see solution  server program.cs file let's see if we have   it okay so we did not we have to include this  in here from this employee and at the employee   Pro Tre we have to include that as well okay so  with this we can now save this and I run this again so this is ready now from authentication   Branch City Country Department you  have employee then department Town   WEA close it this what we need so if I  click on try this out let's see what we have so it is not right because you have not added  anything yet yes and we can do that so let's go to   the UI and I try to consume this um and add  some employee to this so let's close this up then let's go to the client and here  from the pages content Pages you're   going to create another page known as employee pages so here I can see this is the layout  we have our Pages content pages so these   that Pages now let's create another folder  here so right click now add a new folder   to this and this going to be employee Pages  inside that you're going to have ADD employee   add or update employee component so add a  update employee maybe you can add a page to this then you're going to also have um employee  page this to update employee is going to be um a   chart component to this employee page we  are not going to create you're not going   to use the dialog box for now we going to use a  different thing together now let's see what we can do we want to have in the group session as  soon as user finish the first one click on   the next one you want to hide or you want to  show the second one and maybe you're going to   have some little bit indicator on top as you can  load as soon as the user start to type that is   what we want to do something like that so let's  have a look on how to work with the work around   so with this we also go to when you check this  all state you can see we have show employee down here so show employee right so um the first thing  do here is we this page also going to inherit from   this component ID disposable interface and you  want to say if your employee it's true that is   only when we want to display this now even with  this ad we want to also say that if show or add   is true that is when you want to display if  you don't understand it don't worry you're   going to it's going to be clear to you later  on okay so control KD we have it in here so it   is going to be the the public one the general  one to show the employee page and also of the   add or update employee page but the second  one is going to be used inside the employee   page the parent page so you can hide and show  this all the time now within this you're going   to have a container now in our container this  what you're going to have and it's going to   be container in the middle then we're going  to have the first one is going to have our row so inside a container let's have this row so  we have column lg1 and lg6 the one here is going   to handle with the using this x large that's for  close so to close form because we are building   a form then if this is clicked this what you  want to do so maybe down here you can see we   have this close form here as a button click which  we are binding it to this icon that's an I so we   have this add employee as a header that's going  to be the first R then in the next row we want to have the first line so the next row  here okay so let's have this a class   row then in that we can close this now in  the second row we want to have this D in here and now we it's going to load here just a  bootstrap class that you're going to attach to   so you're going to have them load on top as soon  as the user types in I finish the first page and   I click on the next page now that page has this  has to get loaded so I name it as first layer   and now second layer okay when I when we get  to the view it's going to make better or clear   to you now aside from that we have um this and  you know it's an H tack format so going to be in   a horizontal format okay so control period and  K you can form this well so in here at the end   we're going to have employee one so you know you  see this is the end of this so this is the H tack   there is a column Row one so at the end of this  we're going to you have the first layer from this   employee section and let's see for this what we  need here it is so you know this is just an a row   and this is taking the LG2 so at the end of this  you can also have can also extend another lg12 so   here you're going to be the employee employee form  okay which include the first and the second layer so here and this I'm going to do then if you  check this check here what I have now this   is just a column lg12 it's a container fluid  now first layer if it is true then you want   to display this is an edit form whereby we have  this employee grouping so we have group one and   we have group two the form here you have form  one and form two okay this what I'm doing now   this is just a row and now call LG2 and as you  can see from here if I minimize this we have   from ed2 we have column lg4 making six then we  have column LG2 making eight so let's see all   must be 10 so all must be 12 so 2 4 6 we have um  four here right making 10 and now two making 12 so   we're going to have in the um the whole um this  is going to be horizontal right yes so we have   that in there and now within each we see we have  this edit form one and we have edit form two okay   so we have within the form one what do we have in  here so you can see from this it means we have to   to um create this group okay so you can have group  one and group two all right let's put that in the dto so you go to solution where you  have the dtos you're going to right   click on this you're going to add a new class to this then here we're going to paste it in here as  employee group one let's create this class then   inside this we're going to divide the employee  page the employee model into two so let's make   it as public maybe there are several ways that  you can implement this okay this is one so we   have to include this we have the name address  telephone number photo Ser ID and and and file   number now let's create the next group and  that's going to be employee group two so we   can just copy this then let's go to the solution  now the same dto we can add another one and this   going to be group two so we are grouping  them group two now inside group two what   can we have we going to also pass the next  one that is AR rest and this is going to be public and you're going to have  the job name the range that the   branch ID the town ID and now the other  okay so this is what we need to um add then let's save this so when you go back to this  ad page you can see we have this employee model   that's a model one so the property that we have  in there that's what we assigning to this we have   the input test for the name we have telephone  number we have address as a test area okay we   have idation message beneath and when if it  is submitted or if it is clicked you want to   submit to this form one all right so let's  see what we doing and the next one here we   are dividing this into since a column Ed 12 we are  dividing this into first two second four so there   a second four then we have the next four with  this and that is the next one so it's an other   information the first one here is going to be the  personal information we have you can see that we   have personal information with this as can see  from here personal information then this going   to be the other information so here you're going  to use the test inut test S ID file number and a   photo photo later on you're going to modify this  this is going to be um an input file that is has   to select a picture here but for now you want  to use a test box for testing purpose later on   we're going to do that convert to this the four  string and I'll save it to database but for now   let's maintain this and we have the submit button  and now see we have this The Nest so this button   here we say next when I click on this I'm going  to submit it to this for that's the form one this   okay I'm going to submit to that form so this is  going to give us the form one now we have the com   12 to make it 12 so if I also minimize this we  have 2 4 42 making 12 okay that's is the first   layer when it comes to second layer we also doing  the same form two and this is a model employee   group two and then here it is 2442 the same thing  job information we need the job name as you can   see from here job name then here here we need the  department before user can select Branch the user   first must first select the department general  department then select the department itself and   now can have access to the uh Branch the same  thing applies to selecting location the town he   needs to select country first then you're going  to have access to the cities then going to have   access to the town so that's a cascaded drop down  that we are creating okay so here we are going to   check something here like if general department  name is equal to now then display select general   department else you want to display this selected  general department equal to this so you're going   to use this for both the top going to be used when  you want to update it okay so as soon as you click   on update this is going to display as you can see  from here we going to display the department name   in case it is not call to now here we do same to  the next one that's Department name so here going   to be general department name this department name  and this where the employee name so from the not   the employee from the branch from the branch we  can retrieve this from the employee mode that is   coming in here okay so you're going to work on  that later on but for now you want to have you   want to focus only on the the ad so we have all  this and when you check this we have select town   then we can now select town and this a branch the  T item is the branch and the T item to for this   is a branch which has this on Branch value change  so if we select any um list drop down value from   this this meth going to get fired this one going  to get fired so we can retrieve the ID of them   okay now we also have a button known as previews  so this is going to be a previous one so since   we have two form that we are showing we want to  show one at a time so we can navigate from back   and a previous so if I click on the previous  one this is what this is the method that I   want to call okay to navigate to the previous  one and now the next one here we have the next   one column al4 this is the location information  and we say this is for the country we have this   for the city and then we have this for the town  you see then we have the other form here and you   have submit type of what save we have LG2 and LG2  in here this shouldn't be here so we have 2 442   for this um view2 so if I this you see this is a  24 and then this also four in here so check this up so you see that we have 2 442 as 2 442 the  same thing right and this are all edit form   edit form okay okay now let's handle the the code  session let's save this now from the code session   what are we to do we first have our Styles in  here that's what we're going to be using so   we have inactive span and inactive Dave and as  you can see so we have this inactive Dave that's   what you're using in here if you check this we  have the floating number we have floating number   one floating Dave one floating number two and  now floating Dave two and now we have the same   thing in here now when you check this are CSS  St that we have created and we're going to be   adding the CSS names to the variables that  we going to create okay so let's have them created so from the code section we first have this so floating number  one we add it to the CSS class as can see so we   assign them to various um CSS class now when  you check this you have a parameter show add   or update employee this is going to be managed by  the the parent component not the uh the container   the state container rather it's going to be the  parent component okay so that it can just tangle   between the tle the show and height for this add  or update employee okay so we have the first layer   second layer and default first layer set you  through so meaning when you run the application   you want to see the first form then as soon as you  click on the next if it is filled correctly we're   going to see the next one is going to handle  this so how do we tarle between let's have a   method to Tagle between um this form to hide and  show so we have these two method here to handle that okay so if show Layer Two is  clicked you want to set oh this must be in okay so when you check here show Layer Two then  we want to set this first layer to force and a   second layer to true so you are using the true  false to just hide and show them if I click on   previous then here layer one is set to false  layer one is going to be true and second going   to be what false because previous me go to  the start one so that's the form in here okay   let's save this and this what we're going to  do let's use this in the page so we go to we   have to create the employee page so we can use  this in there now let's go to the pages employee pages and now let's add another  component this is going to be employee page so for this component we're going  to be using S Fusion data grid okay so   let's go to Let's install this we  go to the client dependencies you   C go to men get packages and now  in here we need Fusion data um grid okay so that is this one sbl  grade so data grid this is what you   need to install I go for my preferred  version 23.1 36 now let's install this okay so it is installed successfully you  can now close this now when it come to this   we have to get list of employees so we going  to retrieve the whole list of employees from   here as employees now in that when the page  loads or when the page initializes we want to   call this employee list okay so employee  list then once you have this employee list we want to Loop through the employee list  that we have and um set them to the data as a   data source to the data grade that we have um  installed so we're going to implement an interface   for this and now that interface going to handle  with the um State container that we have created   since you're using all state do show employee  okay and in here we also have show main page in   here so we're going to Tagle between this page  and now the add or add employee page so we can   show main page you can show we can add employee we  can also show main page and do a whole lot okay so   back and forth back and and for but as soon as  I click on Department then all state department   employe is going to set to off which going to  show all the pages that's the two component um as   the the employee and add add employee is going to  hire them and I display the third component that   has been um set to through with eight property  okay so we need to in the page load we need to   initialize this so let's subcribe to this event  when the page loads first then we come back here   so when the page loads you can see we subscribe  to this and I reload employee so we're going to   remove this for now we load this employee and that  is this method so it's better that this method can   be need okay so we load this employee get all  employee then you pass in the employee base   URL all right so once you have this when the page  is about to die we need to also um unsubscribe to   it and this what we need to do okay now let's go  through this we using this SF data grid we need to   include data blazer. grid you can just move this  up then go to the import and paste it in there okay so let's go back from the employee page we  have this datag grade is a source of employee   that is a list in here we are specifying column  so first is going to be the employee image we   have the context as employee then we can retrieve  the image but for now the image is null so we're   going to do that later on this add if I click on  this I want to show add or update employee button   clicked so this is a button that I am clicking  on I can just move this the next line okay and   we using an icon to handle that so display an  icon as um B bootstrap icon plus SEC D dotted   that is what we are using as an icon for this  as ADD employee then we have we specify the   great column so this is the various F you want to  display then S ID file name employ name telephone   number job name um branch and our town ID but this  not Town Town name okay so later on if you is C on   any of the employee want to view detail that is  where we going to retrieve all the J Department   the department the branch the country the city  the town we're going to retrieve all of them and   add it to or display under the users um detailed  okay but for now these are the header test that   we specified and that is all so this all that  we we need to do for now okay but when you run   this this going to get us a list of employees  in that but since you're not going to have any   employee yet we cannot see anything but let's  have a look on the add or update button click   so if I click on ADD or update button what am  I doing I want to hide this and I'll show the   form that is the ad form I want to hide the main  page and I'll show the add or update form so in   here we can create a method down here this was  be down so we can create this method now this   method is going to have show main page and now  show add or update page so they set to through   defaultly and they set to false automatically or  initially if I click on this button then change   the the settings so we do that in here and that's  going to affect the view okay so this is all that   we need to do for now let's save this and now  let's see go to the homepage let's include this employee okay so in here let's add this employee page so let's put this the the input let's cut this we go to the import now let's P it here now when you go back to this homepage you  have the employee page in here when you go back to   the employee page we need to specify the the other  page in here that's a add or update component we   need to add that so in here here we're going to  say add or update employee page you need to add it   like that and you know when you go to this add or  update employee it requires some parameters that   we need to specify let's see if it does it needs  this show or update employee so with this we go   to the homepage not the H page employee page and  now in here show or we have to assign a value to   this so that's a show or update and that is the  value that this method so show or update page so   let's grab this and I P it here so the the value  of this is going to set automatically to this okay   to and to show in this page so when you check  this well you can see that when the page loads   initially add a set to force so this is going to  be false not going to be shown soon as I click on   ADD employee that is where I want to show this add  or update employee page okay save this let's run this so we have an error here let's check it out  now let's see saying that this page does not exist   does not implement this ey disposable page so  add or update it has to since you have this I   disposable you have to inherit this you have to  implement it in here so from the when the page loads now here we can have this  method as override initialize and   in here we can see we added now  when the page is about to die to   we have to unsubscribe to this method  then that would be all so let's save this okay so we subscribe as well  I believe for soled but let's see   we requ up okay so here we do not have this method anymore and now let's see from this okay so let's see saying  hasn't been captured before   okay so now let's restart this up let me close all this okay now let's run the server after that you're going to run the client too let's run a client to so before we run this let's see let's have  to um Rectify some few problems in here and you   go down here you can see our form we have this  close form so this close form when you come here   we are going to use it in the parent component  so we want to notify the parent that the form   has been closed and if the form has been closed  then you want to hide the child and then display   the component the the parent okay showing that  we're going to have an event call back which has   no return type then we as soon as you click  on this button we are going to invoke it and   now set this to force okay so we can retrieve it  in the parent and I'll perform an action in the   parent later on okay aside from that let's have  a look when you go to this employee page we have   this employe employees let's specify the property  for the grouping that's for the employee grouping   one and now the grouping two and now this has to  come inside the add or update employee so that   is where we need to specify the groups so I think  these are going to be parameter so we have to get   employee grouping one then create an instance  and a grouping two we also create an instance   here okay so when you also check this the drop  down that we have in here you can see this drop   down contains the following so even with this  this label we can just command this for now when   we get to the update section then we can update  it from there okay so let's let me also commment this the comments are here out all right so we can  see from here that this is coming from the general   department and now if you click on this button  check this it's coming from this ongen department   value change and I check here on Department value  change that is coming here which are data source   of department and general department so it means  that we need to specify the list of this general   department department and our Branch right  we also do have we also have to do same to   countries cities and our towns okay so in order to  do that we going to have maybe um this department   countries down here let's have it down here maybe  we can minimize this CSS then where we have all this that is for the country City and now towns  so you're going to to provide this um values or   these models here from the parent component  we need to also do same for the Department as well so we have our department general department  and we have Branch okay so that's what we need to   do aside from that since we have our employee  group in here we need to also add our employee   itself this is what you're going to use to  invoke the method so maybe we can put this on top here okay now let's go to this um change event  happened if in case they do happen when   you click on any of them what you want  to do we want to invoke this method so   for country City and our town we create  this method and I invoke it or handle   that here so from country City and now the  town let's have a method down here to handle this so with this country City and town  handle country um selected event we invoke   the ID here to we invoke the city name  and now here we also invoke the town   ID you see then you are not actually  invoking this but we are storing this   employee group into town ID is equal to  this this is for the town this is going   to have say to integer as an ID then  the next one here is going to be the employee so for this employee we can have it  down here and you know it is the same thing   that you're doing we invoke it by ID we also  passing the department by ID and also by branch   in here we store this now the reason why we not  invoke here it is we don't need to invoke it the   reason is check here now the first one this is  a department we are passing in the department   ID when it gets to the appearent table we are  going to search you department and I retrieve   all Department which have the general ID as equal  to what is coming in then we populate that lists   to the depart aside from that when if I click on  Department to we want to populate all list the   department that I'm going to select we're going  to populate all list in there from the branch and   also return it in the drop down so that the  user can now select from the Department so   without selecting country you cannot select City  without selecting City you cannot Select A Town   Without selecting general department you cannot  select Department without selecting Department   you cannot select uh um town because this are  cascading and one must work before the other okay   so this that's what we are doing in here and at  the end of the day we want to get only the branch   ID because that's what you're interested in for  the first two we bring it for the user to have   access to okay but what we need here is a branch  ID and the user ID all right so let's save this also when you check the error list you  see we have this form we did not issue   a method to handle that okay so for  now we have form one and form two we   have to handle these form down here  so let's say this is going to be the forms so one and two not one and  one one and two so the first one   is a form one and this is going to be maybe  an asnc for now let's have it as void form one okay then going to have the same form two okay so that what we're going to do um for now  we are not implementing anything yet we are not   invoking the meod inside the parent component  we rather want to um test it and see the UI   how it's going to look like let's run this and  see whether you have any other error to work on it all right so the app is ready now let's click  on um management click on employees now let's wait   and see okay so you can see we have this table  form and this a DAT grade and currently we have   this employee image ID file name name telephone  job name branch and our town no records to display   if I click on ADD employee you can see this is  the form that we have built manually we have this   the whole column LG2 we divided it here so we can  have the displayed like this okay now is the clue   if I click on this that is this is going to be  handled by the parent so this is from the childart   if I click on this it must send the signal to the  parent that you want to hide this and display the   list so for now you can see it is it is gone but  the parent did not get display the list so you're   going to also handle that in the near future in  the next video also um let's see let me fres this again so another one is let's click on on the same  management go to the employees once you have the   list popped up um click on ADD employee and I  if I click on this next you can see this form   you need to fill up right and unless I'm done  so you see if I'm done finding this app then   I click on next then I have to navigate to the  next page but for now if I get to the next page   this page must get this side must get loaded  and on the background color must change from   Gray to this is it light blue or Etc it must  change to this color right so that's going to   implement next but let's first have a look on  this you want to solve the issue if I run this   or if I refresh this application the first  time they upload the screen is blank have a look you see so it is blank and we don't want  to do that this application is mainly based on   employees so what I'm going to do here is it's  soon as the page loads we want to have this   employee as a default opening so this must get  opening so as soon as you load the page you going   to see this employee and Page loaded on the screen  okay so let's finish let's handle that so to solve   this issue is very very simple and I believe youve  have an idea to to do that what what kind of idea   is that what do you think we can do to handle this  you see we have our container right container and   that is what we are using to handle this using the  event or the action okay so we can set it to that   let's quickly go to the source code of our project  in here now when you check this solution you can   see that you have the state container where is  it have you found yours go to the client and see   application state or state so you could also group  yours in various States but here I made there a a   default of General one and now from this aate  you see we have Department Branch country city   um we're going for looking for employees so show  employee let's set this to through and that is   what we want very simple one okay so when to save  this that issue it is now solved so all of these   are going to set to for but only the employee defa  going to set you through and that going to make   it shown on the screen you can also change it to  user you can change to anyone so when the next day   when the company calls me to set the the user as a  default I just have to come in here clear this one   and I'll um um add this one here very simple and  I have to charge them for doing that isn't it okay   so that is it so you can also switch between the  view and the high default on based on setting up   this yeah that's magic so once you're done with  this what is the next thing that we have to um   work on so if you check the app from this this add  employee you can see that soon as I'm done with   this uh I can click on next but if I'm done here  and I'll fill everything up and decide to click   on the next one see what happens nothing happens  right so let's handle that and also if I click on   this I have to navigate to the list page this page  must get shown but you see it is not showing so   let's also handle that so let's clear all screen  let's clear all the tabs here okay and now um that   form it is found in the add or update employee  so that is this one we can choose that from this   employee pages in the content pages okay now you  see from here we have two groups of um models here   it is the same employee model that we have divided  into two based on the form that we've created okay   so we have the first layer we have the second um  layer in the so that's the first layer there the   second layer and now we are switching between hide  and show based on two or force that we have based   on the names that we have stated in the second  layer set through now the first layer is forse   and that's going to make the second layer to be  shown when we set the second layer to force and   our first layer to through it mean second layer  is going to be hidden and at the first layer is   going to be shown right I believe we done that  in the part six now the next we going to have a   look here is you see each is submitting to a form  this is form two for the second layer now when you   check the form one the first section that is first  layer it is submitting from form one you can see   we have this data annotation validator when you  create this method in here and then we bind it up   to this as soon as I click on the next button this  method has to get R from Top up to down from Top   up to the bottom before it checks the vibration  system and in this case you want to click on that   the next button is this when we done clicking on  this form one we want to check if this form is   being um validated and also we want to navigate to  the next component to the next session to display   the form two if this page has no empty space okay  but if you try to create this from one method and   I try to click on maybe show this and show that  it's going to have an issue although we have not   added anything to the table but it's going to have  it's going to move to the next table so to do that   we have to handle the validation ourself so as  to do that we going to also check it maybe you   can also do some customized check um to this if  form one has everything then we want to hide form   one and I show form two I believe you're getting  the concept right that's fine so let's see from   here let me just hide this tab because we done  this already now in here we have show layer to   show and the previous click so maybe down here  we can do the validation so we are doing forms validation okay so we have form one this is form one I have to comment this okay so from one we  want to create a simple method to check you know   the model that we created we divided into grouping  one and then grouping two maybe you can improve it   by changing the name to maybe something uh uh  meaningful this so can see we have private is   returning the type here it is Boolean so you see  viid dat employee group one now we checking if   none is null okay we want to return this through  so we are saying if this is null return false   meaning something is not going on here that's why  we using all so it means even if one of this is   not um it's now we're going to have this issue  you're going to return Force if not it's going   to return through so when this method returns  through you know we've retrieved or we've seen   that the form one is been validated okay so here  this what we doing so after doing this we have to   also work on the form two so let's also check  form two as well now when we divide the model   you can see we have this form two or the employee  group two has only the job name or the job title   it has the town ID and the branch ID which are  cascaded drop down okay so we have this and each   is null if when you have the employ group for the  job name is null or if the group ID here the town   ID is equal to zero or the branch ID is equal  to zero it means the user has not selected any   of them then return Force so in that we not going  to move to the next one we're not going to even   submit the form to the the method that we going  to create okay else then submit it so this is   what we are doing here so what of the question is  what of if each returns through and everything is   in order the person made everything available then  we have to extract you know we have two edit forms   and we have two separate models employee group  one model and another employee group two model   so we are going to extract both data and I'll put  it or inside the m employee single instant that   we've created remember that we have this employee  instance created in here and that's what we are   going to invoke okay we're going to return so  we have to ask for this we created it up for   temporal one so we can set up the values in here  we can divide or split this and I'll set to this   after doing that we have to combine this and I'll  assign it to this employee and this going to be   the sender okay so the return type must be this  employee not employee group one or group two so   in doing that we have to have a a single method  to extract it but you know saying this going to   be going to handle this with an event call box  we have to create the parameter first then we   can handle that so we have this event call back  and going to return an employee to the parent   component and aside from that let's extract  from one as soon as I click on submit and I'm   going to check first if check here so we going  to extract this okay so when you click on that   you're going to extract the properties here and  now um um then we're going to make a call to this   or maybe we can also check this first because  maybe you don't want to extract whil group one   it is some some something is null all right or  each or some of the forms in there or the test   box is null so maybe this what we can do we can  firstly call this to skip some errors in here   we can um call something like this we call this  method first this going to check if this employee   group one is null if each property in this is  not then we want to just call this method to   extract it right this makes sense isn't it so  we're going to say that if okay this is not if   this is true meaning none of the properties here  it is null so we can then extract this in here maybe you are asking or you're saying oh we can  simplify this you can just copy this method and   um put it up to this condition yes it's really  going to work by making a Deb bargain very   difficult I can put a break point here and I can  have the value stored here either true or false   if I put this here it become very difficult for  me to debug it and I know the cost of this or the   output of this method that's the reason why it  is it is better you have to cach it you cat the   the response or the result then you can now verify  if only want to verify okay after extracting then   please show Layer Two so we can just move this to  here I hope this makes sense fine so that's what   this form one is going to do so as soon as I click  on this this is going to shown through now when I   check this um Layer Two maybe if I peep this let's  see if we going to have the definition for this   layer too check it out we're going to set first  layer to force and now show second layer that's   what we are doing right so this going to make  that work now when we check from group two for   the the next that is the session Layer Two when  the user also decide not to choose any not decide   not to uh provide the value for each or any test  box since we are validating this you're going to   have the same issue in case everything is working  then we have to also save Layer Two not as Layer   Two form two now when we are creating this for  from two method we also going to do same with   this you're going to also validate it then we  can um just have a look on that okay so let's   see what we going to do in here so from the form  two this is a form two then we are checking we can   see we are extracting it first and as I saider  on this is not the best so we can uh make this   happen in here so if this is true then we want  to receive validate and PR group two if this is   true then we have to extract it after extracting  the adds in here we invoke this method after um   invoking this we want to set this container to  empty so that it makes it available for other to   type or to maybe do some modification Etc or to  add a new employee so this what we are doing but   maybe maybe for this employee instead of setting  this to new here you could wait um maybe um after   sending it and maybe there's a validation issue  in there maybe the data has already added a name   has been added already and the person wants  to change the name you can make it available   before you clear it if not as soon as we invoke  this you're going to clear so when you have any   fature error the employee is cleared unless the  person enters the whole data again okay okay but   this what you want to do for now so you make sure  that before you you type in you know what you're   doing want try an error in application okay so  let's um save this we have our form ready and we   are going to try this out and now here we going  to invoke it to this Method All right so here   when you use this add or update chart component  in the parent component we can now extract this   communication um and extract the model property  from it and I use it in the parent component so   after doing this definitely we're going to have  an issue here check it up when you go down here   this what we did the last video to extract or  to get the branch ID and then to get the town   ID as well we have this P right here so we need to  remove this you don't want any duplication then we   have this um dispose Method All right so this is  what we have in here let's remove all these empty spaces and even with this you can  simplify this using um this Lambda   Express instead of creating this and  making taking the whole Space we can   make this simple isn't it let's have a  look on how to do that so that's what I'm   doing let's make this okay so you can see  this becomes cleaner and also um simple as well we don't need to be using this  block block blocks you can do this just one line and that is it isn't that  beautiful yes it is and I believe you   like this right so try to use it all  the time to make things up simple and   easier to read or okay this is  the last one let's finish that up I think this must have an a wait  right oh am I missing something   in here let's see okay okay  okay okay okay so this why I did think this must been a  we okay no they shouldn't   be it should be be like this so what do you think yes okay so all set as can see very  simple one that we've done all right   so this is working we are done with this  one and let's handle this component in the   parent so if I click on ADD what am  I going to do what can I do we have   our UI created design already using this  drop down list you have this popup okay   so let's see first we are going to run  this application again and I see what we have so let's see add employee and now if I click  on this I have this issue let's try to pass in   something um something in here right so let's  see you know this must be number if I click on   next then let's say could see yes validated and  I will have the form two displayed in here we   have this take note I have the job name I have  if I decide to click on Save see what happen I   need to select job name I need to select town  and I need to select what branch now why did I   not show information or instruction or warning  against this take note okay fine so let's see I   decid passing job name or job title that's fine  it's working now if I decide to forget this and   I click on select Town see nothing happened no  record found no record found click on Department   no record found click on City no record found the  records are found in this general department okay   for now there's no record found here because you  have not provided it but as soon as I click on   this I'm going to have all the record in here  as soon as I select any of the record I'm going   to have it populated a department and as soon  as I select any of the department I'm going to   have it uh towns um or it Branch separated or  displayed in here so we have general department   we have Department we're going to have Branch not  town we have country we're going to have City and   you're going to have town so that's why we say  it is a cascaded drop down one must finish the   tax first before the other before the other so  in the hierarchy form that you cannot skip you   must start from one and end up to where supposed  to end now you can see that soon as I click on   the next I have this form filled up so if I click  on previous it goes back so I'm the first session   click on next second one further so you can can  actually improve this you can add when you have   maybe three or four forms you can um do the  this is a customized one there are some third   party library that you can use to actually  you have the same idea all right but this is   a customized one and I like to build my custom  one so I'll know the two and frow what goes in   what goes out into that component or that form  that I have all right if I click on this close   to it is working but let's handle this close  system if I click on close I want to show the   is employee okay so let's go to the code now  down here so if I click on that is a form close   we want to notify the parent that hello a chat  component method has been clicked so please do   you can you change yourself a little bit okay  so that is what you want to do now let me give   it name as form closed notify parent form has  closed it is returning it's a void it going to   return nothing it's just a message it's an alert  that is given up and let's have this method in   here as soon as I close the form that is a method  name so closed form all right so this closed form   this must be capital F now with this close form  you see that here we want to notify parent we're   going to invoke it in here and that is it what  is it saying okay so we have this already right   ambiguity between Noy close and five close meaning  that we have this created already let's have a   look if we have it set H okay so that is this  one right so you can see we have it set already   so I need not to but I'm sure let me remove it  from this side yes you want to put it on top here minimize this ones to make it clear and  visible yes so form close close form this what   you're going to notify the parent then we're going  to set this show or add update employee force and   that is this current component set this to force  and then take note if I click on this check top   here the whole content be surrounded with this so  in case set to for so this set for here is going   to be the internal one and it's going to be the  global one remember that the all state is a global   but is going to be um an internal one is it Global  or not global internal okay so we have this let's save and let's go to we have this close form so  let's make it fix the name well okay so before we   go up to the the parent to handle that I want  actually also finish the complete something   in here check take or check this for me you  can see from the photos have you seen or you   can just come closer you see the photo here we  must have this input file but what do we have   here that's fine input test and is it the right  thing no it's not the right thing so we have to   use the input file and I want to handle that  now in an image you want to convert it into   basic four string then you want to store it  in database as a string file okay so we can   be using it all the time so let's do that  so we're going to remove this the input in here so actually for this where we have  this input file was supposed to be that   is this one we can just overwrite this whole  method with this we have the same form group   um margin top as three you have a label  and on this label we are making a check   okay so using T operator we checking if  this component is a component if this   property here is equal to empty then display  empty now the test is going to be your test danger and we checking up here if the same is  equal to null we want to display this upload   image and now image upload message this is a test  that you want to display this is your property now   with this what we're doing here is a class take  notice a class so in case we have any message in   here we want want to make it as red okay test  danger in case you have any error message you   want to display it here so this property here  is going to handle all errors which is going to   happen during um program or is it program during  image uploading okay we have this input file and   now there the unchange event we call this method  as upload event this is a validation message as   soon as the decide the user decide not to  upload image we're going to have with this   um issue so that's a validation message going  to have a message to display to the user okay   so let's handle this one property here and our  one method uh or event so let's come down and   maybe what we have this validate validate here  before the validate we can actually have file upload so in here we can have this method upload and it  is coming with an input file change event act so   we checking it over here if the file contains PNG  it means we allowing only PNG files we create the   format we read the request then we create the  buffer resize it then we going to convert to   Bas default string the uh the size that we have  we convert to defa string okay then we set this   property to null that's where you have no issue  but in case this does not contain PNG then we say   PNG file needed then we have to return so we  have to create a property to handle this and   maybe on top here we can just have a property  State up here as an image upload message so we   have it set okay now let's go in there and um try  to display the the image you want to preview the   image to the user the selected image you want to  preview it so how can we handle this so when you   go up here what we have this the employee name  the telephone number and the address you want   to create one and U um display the image preview  in here okay s the user select it we have it um   converted and now cash it in there we want to Now  set it up in here so Android is not pixels it's   100 already so we want to set up the the image  as the source going to be the employ group 1.   photos and you know at the end when you check  the code in here when we are done when we are   done uploading the image we see we are setting  the photo string here that's the property to the   image data so as soon as this gets set we're  going to have it um displayed in here for us   so get set and I'll get shown that that is what  we are doing get set and now here is going to um   show it where is it um why do we have this image  it's coming from the form one so this is second   layer second layer we have it this the input file  and that is this one I hope you've seen that okay   so we're going to also shown this all right so  once you're done with this we want to now go in   there and now see now once we have this we not  going to do we're going to use it for only add   employee right it's going to have an update and  also add so let's change this let's make this as   Dynamic we set this as title and once you have  this definitely it tells you that we're going   to have a property to handle that as title so  let's go to the the base where we have the code   session and in here we can have um the title here  right or we can let's see I can just move this up   from here then maybe let's put it here title and  also aside from that you're going to have access   to the general department that is are going to  select the department the brand the city the town   okay so in order to do that let's also have some  properties to handle that so we can display them   on the screen the selected user that the user  selected during adding that specific employee   because here the user can update the employee and  we want to display the various general department   sele the department selected the branch selected  the country the city and now the town so you can   see that here we have it what is selected from  the location and also from the Department you   have them in here then we change the title as  well they are all public meaning that when we   make a reference to this component we can retrieve  these properties from that component okay in the parent now for the title we set the default  value to add because when the page um loads   or initializes is going to have ADD as a default  and that's what we want to do so once you have   this we have to go in there and I set this  on top of each of the drop downs in here so   you can see we have from here we have that is  going to be the department right we have our   um depart this is general department we have  Department we have Branch when you go to the   second one you have this country City and our  town so if it's an update this is going to run   when the the the form is in adding a new employee  but all of if the form is adding a new or already   is updating already added data as an update then  what can we do so from this since the properties   that we have is going to contain values we can we  are going to check if it is now it means it's an   add of new data then we want to display maybe  um s gener Department case it is not now me   it has data then we want to set it to the data  that it has right so maybe we can remove this   from what we have in here then we can use we can  hold on with this so you can see we having the   straight gender oh this is general not gender  this General we have um general department if   it's equal to empty then display this you see all  of the you're using this scary operator to check   that if it is not then display this then where  can we use this just copy this now in here here   just let's use the ad and now let's P this here  that is all we are done with this okay so when   it is you're going to update you're going to have  this work in here let's do same for the the other one and that's going to be the department  so we have the department here where from   it this a department right so let's remove this then we're going to have select department  but I believe you must also have this we   must have a label down here too so select  Department we must also have a label select Department okay then let's go to the next one  and this is the department this is going to   be the branch so not City so select Branch so  in that we're doing the same so you can even   pause the video and then try your best your  hands on it if you can actually achieve what   we going to do the next one that is this one  okay I hope you you got the same thing isn't   it yes fine so we can actually do move on so  we have this set now let's go to the location   and we have country City and our town we do  same isn't it so pause the video and I give   you some maybe one minute try your hands  on it and let's see let's see who finish   it first so I have this select country and  I'm going to paste it here you know copy   and paste is very sweet so I I encourage  you to use copy and past all the time not   to repeat yourself all the time be typing  and typing and typing so select City we do same okay then the last one is  Select town to reduce same so to we do same okay control KD then let's save it  okay so that is all this this form is available   for add data add employee and also update employee  or edit employee is going to work on that so when   I was working on it this came to my mind we want  to actually dynamically clear the content you can   decide to leave the content and we can actually  clear it okay so it's better that I sh you the   way to clear so let's have a property down here  this going to be a public method which can be   invoked in the parent component you can see  when we save let minimize this when we save   the form what are you saving do you know where  we are saving this is the first this is where   we are saving right form one wece it in form two  that's where we invoke this you can see we are   clear the content here and it's not the best so  as I said this earlier on we can actually have   a simple method down here to clear the content  and it is the same so clear content and we put   it in a single method in here okay so that they  become Dynamic and we can um clear it you can   decide to clear we can decide not to clear okay  and I we leave it in there okay so we have this   we can save this and that is all done and set I  believe we have nothing to do again here we can   say goodbye to this add or update employee form  yes of course we are done with this so let's run   this and now test it up and see if the form is  working and everything is intact as we you and I expect okay so if I click on this add employee we  have a beautiful form displayed and you can see   nothing happens here maybe you can decide to show  a default image if the person hasn't selected any   image yet but maybe or you can decide to hide this  you can do it yourself isn't it yeah I trust you   now let's say I'm going to pass in some names I  click on next and see photo field is required and   you need to actually do some magic here to get the  photos for me yeah so that's what is telling you   but you can't hear I only can here see we have a  default one is upload image see you can see from   the list here I have this images as a background  so I'm going to select this this is a JPG file see   what happens it has a PNG file required okay so  it's going to update automatically and you need   to actually um have it set and let's choose  another one so I'm going to choose this guy   and see what happens upload image and that's fine  it's gone check here you have the image watching   you hello how how are you okay yes so we have it  in here click on next and see what happened next   p it has submitted then we have the form being  retri the data being retrieved and I'll save it   to the employee model we can now actually um fill  up here and I click on Save right if I click on   save you know what's going to happen job name and  Etc must been provided okay if I click on the C it   has to okay so this has to be handled because we  are notifying the parent but we haven't retrieved   it and we haven't called anything so we have to  also handle that so our form is actually working   as expected and that is all so we can move on um  from this add or update employee into the parent component so let's close this then we going  to okay so save this and everything is intact   now we have this let's go to solution and let's  have a look from this employee page and that is   a parents page for this add or update employee  that is a page we displays the list in here so   you can see when I click on this show menu That's  we have our SF grd sing data grd which displays   the employee list in a tablea form in that we  have our add or update employee page and that's   what we have worked on so far so in here we are  going to specify this um the parameter that we   specified in this add or update so when you have  a look here let me show you when you check this   add or update employee all the properties that  have this parameter set up um to initialize it   is what you're going to provide you're going to  provide all the parameter or parameters to this   component right so we need to provide this and  also when we come down here we also have this   par is over here for Save form we also have this  parameter in here for um handle count or country   selected event for City selected event for um J  Department selected and for Department selected   event so we have to handle all this so we have  about 10 or more um parameter that we need to   specify to this component right so let's go to  this employee again and now in here we are going   to have have this property specified so I'm going  to remove this one and I'm going to specify all   this so if you want to do that you see as soon as  I click on space I have all these properties we're   going to do it one after the another to you order  to skip time I'm going to past this in here these   are all the property that we have but the values  that you set in here we have not created them we   are here to do that so pause a video and try to  specify the employees going to specify it here   show or update employee we're going to create  it in here we have um modify parent or notify   parent form close collect do you remember all  these country City towns J Department Department   branches you know all these isn't it they coming  from this add or update employee component we have   handle country selected City selected U Department  selected brand selected Town selected and Etc okay   so all these are the ones that we need to specify  that's fine now when we come down here employees   as employee list do we have employee list in here  we are not providing employee list so we have to   create an employee to handle this let's do it  one after the another the first one is we have   to create a reference for this component so this  is a reference and we're going to copy this and   assign it in here let me make thisable let me  place it here and that's so this is solved all   right so from this employee we can make a copy of  this so let me just let's make a cop copy of this   send this a list I can change this to this as  a list that's a new version vers 12 we have you   can now use this an array as a new list all right  now here inste of an employee it's going to be an   employee take note because a single object and  I let's remove the list this also solved right   that's fine now show or update employee it is  solved already because you have it in here we   have the property stated over here and that a show  or upate so this also solve the next one is notify   parent change so let's also handle the notify  parent change and in case the user clicks on   close form we want to notify the user and notify  the parent and now call an event immediately okay   so here let's put the initialized form on top like  this let's leave one space and here we say notify   parent and when form closes right so which form  is add or update form employee form right let's   be specific so in here let's space it so it's good  to add um comment to your code later on in case   you come back and want to modify it you know where  you're going right so comment are very important   so please do comment yours as I do mine okay so we  show pit as true then this force all right then we   call the load employees why are we calling when  the user finish adding a new employee and click   on the close form you want to call the employee to  load it again so we can retrieve the data in there   but maybe you can actually Advance it because it  could be that the user may not add data but the   user want to close a form and I see they already  created um employee in say case do you you have   to load the uh employees again no you don't by  this in this situation it's going to load it so   maybe you can actually sit down and try to find a  way to handle that but for now we not going to do   anything you want to load it as soon you closes  the form fantastic okay this is solved the next   one is the country so we need to provide default  countries to this so with the countries down here   we're going to have access to them we have like  country City and our town right so you can see   raising this over here the same gen Department  department and a branch we have them also in here   so all these are solved we have um country solved  we have um default Department solved right so we   have these two guys also solved now the last one  here is you have to provide this selected maybe   you be asking yourself why are you having so many  list in here let me take time to explain okay now   come closer come closer then listen you know we  have this form as soon as the page loads since we   having a cascaded drop- down list we don't want to  populate each list or each drop down with a data   no we want to only load the first one that is the  city not the city the countries and now we want   to also load the general department these are the  parent Department these are independent Department   dep model or List they do not depend on anyone  as soon as the user select country we pick the   specific country selected ID we look through the  list that we have already and now get the cities   okay as soon as you also get the CI and the US  select the city we get a specific City ID and   I look through the towns and I'll select the towns  related to that specific city so we didn't want to   get the selected country then we now going to  a database in make an API call no soon as the   page loads get all the API calls and I'll cat them  we want to have application to be to work faster   so we don't want to have a SL application so you  want everything to be made available before they   just start to work on so select this the data  is already there you just have to go in there   and make a loop make some search select and then  display when select the data is already so make   this and I'll display no more API calling Etc  soon as the page load call the API all the API   get all the list once and for all we can now  move on I believe you love this explanation   isn't it that's what we are doing so that's why  we have this selected Department selected branches   selected City and selected Town these are the list  that you going to select and these are the what   you're going to populate or going to provide to  this testt box not the default one that you have   in here so take note you can see we have default  country cities and town the same thing applies to   this and in that you have selected department  and now selected branches seled cities and now   selected towns all right so these are the ones  maybe you be asking yourself why didn't I are   selected Department here we don't need to do that  because here soon are selected you're going to   have a method invoked which going to select we  going to return with the the integer the idea of   that once you have this list here we um Loop to  this list we get the specific selected ones and   I'm put them into the selected variables and I'm  set it to the motel or the component and then boom   that is it so let's say um let's create a single  method and that is known as um load default so   what is this load default as soon as you hear  default what comes to mind yes it means you're   going to load default an application or a call  that you're going to call anytime the application   loads up okay maybe this could also cause an  issue later on because anytime the the user   tries to navigate to that page and come back the  pages method has to call an API call might be made   here we are just getting data only so wouldn't be  inappropriate if you cash this so API call is made   once we can make another API call if and only this  data have been updated or deleted or a new data   has been added but for now we are not doing that  we can also optimize this application I leave up   to you you can actually do that yourself and I  believe you can do that thank you for releasing   me okay so we have to call this we see we have  default countries cities and our town general   department department and our branches when this  page loads we want to call that and that's the   reason why we calling this method in here so  it's better that you copy this method before   you forget and now let's duplicate this pass this  in here remove the old one save it and that is all so the next question is how do you get  the selected data or the selected um general   department ID or the selected country from the  user we've invoked it already so you can just   create a single method and I'll look through  the ler we have in here and I'll make a sort   just going to pick it up and I'll catch it or  put inside the the selected element that we   have so to do that I have them in here quickly I  just have to go in there and grab this and then   place it and we can just quickly move on this  is very simple in here okay so this is going to   be the select W I hope you can see that isn't  it don't worry I'm going to push it like this   so this will be this will be that will be yes I  believe this clear and simple so see what we're   doing you're using this Lambda expression we're  not using this block block block no we want to   SK skipe that that's why it's at moded so this  is a new one let's use this okay so handle City   selected event or select event you could see it  is coming in with an integer then we want to set   selected cities equal to default. where this  using where Clause means you want to get the   list so we have to convert it to two list when we  are done and assign to this city do same to the um   city that's the town do same to the the general  department that's here for the Department that   is getting the general department ID and I'll do  same for the branch okay from this department ID   so that's what you're making a a check in here so  this the the relationship that we created that's   the reason why we able to do this so you can see  we created a foreign key that is a primary key of   this general department which is representing  or representing the data or which is appearing   in the department data making as a reference or  joining these two tables together so we're going   to check if this ID is equal to the department  Properties or the columns ID or the record ID   which is equal to the ID that is coming in as  a general department ID gather all the record   in here convert to a list and I'll return it  that is what we are doing very simple one as   well okay so that's what we do you call this  method when the page loads and also we want to   load this employee separately because when the  user decide to add a new one and click on close   form we want to load this we don't want to put  it to the load default so that anytime that is   that close form all this will be loaded no we want  to actually want application to be faster or fast   enough and smart as we are right so we want to  um separate this so we can call only this method   anytime that we want so when the page loads we  want to call this we have even here already so   we can remove um this and I use this Lambda  expression let's grab this and when you check   this method is in here already so we need not  to reference it anymore so load employees that   is the method that we are creating let's save  it so now let's check and see what are some of   the values that we haven't provided that is a  handle save employee so if I click on Save what   should happen we want to handle that peacefully  without having any issue with it okay so we can   do that by calling this one meod down here and um  where should we put it maybe here will be okay no   here show main page here will be okay so let's  say save employees so there save employee you   see we handle it and it is coming with this an  employee um model then we're going to call this   Suess check is false defaultly we check in here so  this method is going to handle update or adding of   new employee isn't it so if it is if the ID is  greater than zero it means you want to update   it so call this method passing the the base URL  and now call this method to display right so to   display the message to the user like maybe um  user updated or um added process completed and   Etc we've done this already you and I created this  method earlier on so we can copy this method again   and now down here we we can put this method here  since you're going to be using it often we can put   it in here okay so that's the method you know you  know this already isn't it yes you know so let's   see and that's what we're doing so we we cash it  in here and the result is going to override this   if it is through we want to clear the content  if it is false we don't want to Cle the content   because maybe you want to change something in  there and have to H save it again we don't want   to be clearing content even when the pr is not  successful you want to remain it there so you can   actually modify it before you save it C it when  only this is true that's fine let's save this   so as we are done with this one we can run this  application and then check it out so let's have a look okay so let's see now I reset  everything so you can see you have   the blank one let's click on  ADD employee now let's provide   the name so I'm going to use the  same name that I use to net code h so thone number is going to be just a random  number in here address going to be let me just   pass in aarh so S ID I don't know what they're  using it for so so like they passing number file   number two passing something now let's use an  image here this going to be an employee image   so I'm going to choose my best friend now click  on next so in here let's have a job title I'm   going to be maybe as a software developer  that is a job title now here I'm going to   select General so that's an IT department maybe  management is okay then a branch oh there's no   Branch here we have not created any branch and  Country we have Ghana City we have an Acra and   and town so we have all these towns in Acra  can just select any of them but you know if   I click on on this optional if I click on Save  I'm going to have isue here so unless recreate   let's say branch and there's no Branch let's add  a branch here and this this branch is going to   be developers so it's coming from management  click on Save okay so being saved let's go   to the employees again now choose here unless  refresh this so we can make a search so maybe   you're not implementing that as soon as you  add unless the upload so we can have all of   these but if you want to um get the whole data  as far as you add any you can use a container   State container to also handle that from various  components okay so let's see from the management   we go to what again no no is an employee okay  so next code hop it's going to automatically   fill it for us and I said aana yes then let's  choose my best friend as an image and that is   just one this guy click on next what is the  job title here is a developer so there is software and is coming from the general department  of it some Department of management and the branch   as a developer country as Ghana city as AA and  a half town as maybe ad will be okay so optional   this optional so I'm going to say this optional  optional message here okay so click on Save and   let's wait and see okay so we have an alert and  this blank okay so nothing happen click on it   again there's an alert if I close this and let's  refresh the page and see if we're going to have it   you know then it means we have an issue that we  need to rectify then wece to it okay so nothing   display it means it is not saving let's check  from the source code in here where we have the   employee Razer now that is where we handle the  employee save it is coming with this employee   and now we have this it's calling this API right  so this is an API that we have created passing   this employee and now the employee base URI so  let's see we have it as API employee and when   we check from the server two let's have a look  if we have the controller also created so from   the server this a controller and now do we have  employees controller okay all right so while this   is working let's let's see something let's check  our solution Explorer let's check the model and   see if we we have any mistake in there so from  our employees um dto not the dto itself that's   the Modo itself we are inheriting from this base  entity and now this based entity has properties of   name and ID that's fine okay so you can see when  they come here we have this full name and it's   it seems like we are duplicating that uh property  in here so let's move it because you're not going   to provide any value to it and we also add an  attribute or required attribute on top which   going to give us a problem so once youve done  this we have to perform migration so we can um   have this taken effect okay so let's actually  perform database migration um to that I believe   you know how to do it isn't it so pause the video  and also try to do it or you wait then we all do   it together which one do you want okay so let's  see so first of all we are going to build this project so after building this solution then we go  to package manager console and we are going to add migration okay so build suceeded now let's go   to package manager console and  in here we're going to say add migration so add migration and and let's say  update employee table okay so once you have   this we need to set this to um server  library and let's set the server to   Startup project you can see the default it  is a client so set this as startup then we   can now go ahead and undo it so it's going  to run the modification that we've done to   this by removing the full name property  up from this employee entity or employee   model so can see we have it that's  dropped that now let's say so update database okay so this is done so let's run this up  again and see what we're going to do so you first   have to run the server but let's set the client  to start up project then the server here let's   debug without debugging so start it and while  this the server starts we can also start the the client so that is a server you  can see it is running and let's   wait for the client to run and  that is also the client so let's see let's add employee now let's  see so first was net code hub then maybe the number is around here okay so let's have an address that is  an AAR scanner I'm going to choose the ID   for now C12 maybe F12 for the file  number and also we choose an image   for this friend click on next then we can  now go in for job title that is software developer we can choose the department as it  Department as management and may be developers   country Ghana that's only one I have a city a  and our town is up optional there going to be an   optional message so sorry I do not have anything  to say anything to say so click on Save and now   let's wait and see the the output here see we  have um process complete and success operation   right so click on okay now when you click close  this up you can see we have the data in here so   you can see it's working and and if you refresh  this again we're going to see the same data in   here all right so I employee is working and we  can now add um employee the next thing here going   to talk about here is if I want to update it if I  want to edit it is it possible yes let's actually   have a button in here to do it when it Che check  this um department and Department we see they have   this buttons in as an action you want to actually  do same but you know when you use um data grade   for this employee you could it has its own add  buttons and also update buttons and Etc right we   want to make this as much as um um simple as well  so we can add that as a customized one that you're   going to do so we can add our own um image in here  buttons so you can click on and going to fect the   context okay so let's have a look on that so let's  close this and let's go to the source so inside   this employee page let's have a look so that's the  employee page okay so when we come here we see we   have these are the columns we have this great  column and these are the various column that we   specified now down here this what you want to do  let's add another one and now within this we want   to specify we're going to add just an icon with  this okay so this icon that we are adding we have   a method um shown here and that is a show menu  popup so we are passing in the contest here as an   employee and that's what we are staring from the  contest here as an employee okay we need to create   a method for um to handle this show menu popup so  let's actually have a look on how to um work on   that so this is what you're going to do we want  to show we want to use as a context menu as soon   as we click on that going to use a dialog bar to  show menus that a user can select from okay either   um edit it update it delete it or even add to  Vacation add to um what is the next one add Health   add uh I mentioned vacation already okay sanctions  and Etc okay so that exactly what we're going to   do here so once you have this method let's define  the method for this and maybe down here we can uh   put down here from maybe this session will be okay  load employee this one is save so aside from say   what's the next that we are doing we are going to  load a context so here there there you go so let's   say this is um context menu who why is the m okay  so in here we have this show show menu popup then   we want to select you see this method is coming  with this um object so we want to create the   selected employee then we can assign it to that  so we can hold it then context menu. open context   menu where from this guy we need to create a menu  a context menu for this quickly so we're going   to create another component and that is where we  going to handle all our menus in there okay so we   go to solution then have you seen the folder the  other Pages folder yes let's put it here if you   open it see have this let's open this let's add  another razor component and I let's name this as   contest menu contest menu now inside this context  menu what are we going to use here we want to have   this SF dialogue because you know it's going to  be a dialog automatically now in here let me open   increase the screen size now you can see when  you check close this up cuz you don't need plus plus Okay so CL s that's right so when you check  this let me save this um close this and now open   it again so you can see everything clearly okay  you can see we using this SF dialogue now um we   have if it is open you want to call this open  contest menu we have it bound is visibility to   this is visible property now in that you see we  have this a content and this a management menu   or maybe employee menu well you can make it as  employee menu I think this one will make it more   meaningful and and here it is what view edit  delete you see it we have um this ad vacation   overtime health and our sanctions so we have this  menu in here and this means we are going to create   separate model for each okay so let's have a sty  the CSS St do you have um specified here as Kea we   want to have this here and I believe you know what  this going to do because it is the first time of   me using this and aside from that you're going to  have this code session down here and now with this   code session we want to specify this let's create  an instance of this and normally in order to we   can make this as nullable so let's use this okay  then we set this visibility to false so defaultly   when they upload it is false not going to be  shown we are going to invoke all these methods   so what are this method the event that you've  covered over here you want to wire them up here   so we can use them in the parent component so so  this what we are using if you take this CLE this   as well you can see we have this parameter as  handle view so if I click on view you want to   invoke it if I click on edit do the same click  on ADD um Health do the same vacation do same   for time do same s do same and I'll help you do  same so we're going to retrieve all this method   in a parent okay when um you click from this chart  component also we're going to have two method in   here and that is a show and hide dialog component  so open contest and now close contest we caate as   CH to get the current state here affected to this  page so we can either render or it can be hidden   okay so once we have this we go to our employee  in here now this we need to make a reference to   this in the parent component um to uh make this  work okay so let's have it done so in order to do   this we have to create this context menu top  here or we can even put it on top so we can   it you confused right so this this is a this is a  context menu and now you put it here context menu   you got this context menu so when you say contest  menu. open contest you know what it means isn't   it that's fine okay so now we have this set the  next we're going to do here is we need to make   a reference to that contest menu and I'll specify  all the method that we did in the chart component   so let's go down here we are done with this out  update so then you're going to use this context   menu and that is a context menu we making a  reference to this context menu that we state   down there aside from that we have this handle  delete okay so control KD handle delete this   is what we call delete click handle edit edit  click handle view view clicked handle health   health clicked handle over time over time clicked  add s s clicked handle vacation vacation clicked   all right so that's what we actually doing in here  so anytime that you click on this we want to add   this specific user to the table because you know  that with this we have the data selected as soon   as I click on check take note as soon as I click  on show popup I get a current contest and I'll set   it to this selected so if I open that contest  I still have this property full of data that's   the current contest that we have talking about  the employees I believe you know what I'm doing   isn't it that's fine so let's handle the various  um methods that we have specified in here delete   edit view add health and Etc so down here we can  start implementing each and every one here okay so   there is the default one and now here let's start  with it so first of all we're going to handle   edit clicked so if I click on edit click what am I  going to do here let's wait for this to get loaded   um I think it's finishing some command let's wait  now we going to public since we have this employee   object used in the form the add or update form  we're going to populate that employee object here   and I when we are done what you need to do here is  hide the main page and I'll show the ad or update   employee page and I'm going to have all our data  in there so see check what you're doing now if I   click on this edit click you see we are as you  can see from this an add or update employee now   this is coming from the instance that we created  here if I let me just minimize all these things we   are done so when you check this you can see that  you have this add or update employee where is it   this one and we have we created a reference out  of that's the add update employee so we want to   have this method has a property known as employee  we want to populate this right so that's exactly   what we are doing down here so when you check  this let me minimize this too okay so when you   check this one you can see that if I click on edit  click you can see this employee. ID we assigned to   the selected ID right and we are doing same until  we get to the server ID so this is a group one Che   take notice the group one now we have to do the  same thing to group two so group two also has   job title and the other we assign to this selected  employee now when it go to the general department   remember we created some properties known as  general department department and Branch if you   forgotten let me show you quickly so we can come  back again we we created this property down here   so have a look these are the property that we  created J Department up to the town so we need   to say you see initially they are n so we can set  the properties to at with the current can see we   are using selected employee. branch. department.  general department and when you check you see do   name we do the same thing to department. selected  branch. department. name so we are retrieving the   name from the relationship that we created  according to the entities okay then we can   retrieve the department name Canute the department  the general department name and also the branch we   do same thing to the the country and the city and  the town and now we have all set so when we are   done we want to change the title to update okay  after change the title then contest menu. close   you want to close the contest menu that we have  opened after closing it then we want to click on   show or add page to through and now show main page  to first so this is going to hide the main page   and I show the add or update page and I'll set the  title to update and we're going to have all our   data in there okay that's what we're going to do  for the edit now what of the next one so want to   check this model you can see when you check this  this edit here it is solved what case I click on   delete and also view clicked add to help um add  over time clicked add SS and also add vacation   clicked let's handle one after the another so  the next one here it is a delete so if I click   on delete what can I do or what is it going to do  here that's an edit clicked so down here I'm so   going to have this um delete clicked so that is a  delete click we have been using this several times   based on the creating these objects um Department  J Department Branch City and also Town Etc you've   done the same thing so what you doing here is as  soon as I do that the first thing is to close the   context menu then you want to um ask the person  are you sure you want to do this so you can see   we are confirm you want do this if falls returned  but in case it is yes then brand service. delay by   ID passing the selected ID in here from the object  that we have selected then passing the URL to as   you can see API employee to the API and now if  it is through then set this employee to empty in   this case it has been deleted so we don't want  to hold the data again you want to clear that   and also load the employees because when you do  that as soon as employees deleted it means when   is off we have to load it and I'll get a whole  employee again that is what the delay here it   is doing very simple one now let's see the next  one and that is a view click so case I click on   view what can this do or what am I going to do  let's say so if I click on this view we set this   employee into this selected employee now with  that we have this context menu. close because   you have to close it so we can display the next  one then show Details page is equal to through   and I'll show main page is equal to what force  and selected emplo is equal to new so we clear   the content now we have a strange property  here as show Details page where from this it   is a property that we need to create and that's  what we're going to use to hide the details and   also show the details in the same parent component  so let's have that um property created and where   can we even put this so it don't get yourself  confused I believe you can put it beneath the   context menu reference from this area so here  where is it contest menu contest menu contest   menu where is it we have the the reference made  or state up here and I think it is around here   or maybe you can decide to put everything there  but here I want to group them so you don't get   yourself confused when I'm looping to when looking  at this project okay so show Details page is set   to first defaultly so as soon as I click on  view I want to set show detail Pages score to   or through so maybe we can move it since it is  related to this view let's put this on top of   the view okay so we have this set here let me CLE  this now this means that you're going to create   a detailed component very simple one okay so we  can just um create something simple for to handle this so do you know what you're going to do why  do you think we can create this component too   I believe I guess you're saying that from this  employee Pages that's right you are correct so   let's create this component and we're going to  say this is an employee detail page so inside   this employee detail page I did not have time to  um um decorate this well okay so I was able to   come up with something small and maybe you can  actually Advance this since it's just a detail   that's going to display um information you can  actually do something um nicely over here let   me take you through what I did you see here is a  container and is a row it's a column lg12 as you   know already we have a card stated in here and the  title here is a detail and detail property that   you're going to come in name then we have details  so if it is a net code net code have details if   it's your name your name details okay and when  you come you see we have an image and that image   is what you set it to this so you have a class in  here there's a border and you have a style I'm set   in this with the height and Etc you can actually  move all of these to a CSS or a style class then   you add it in here but normally I really like  in line okay maybe let me put this to the next   line okay so this what we're doing now when we  check the next one let me see if this close this   and I open again so I can get rid of that black  and white I think I must have the writing now or   still same who still the same okay so when I check  you can see we have the image State up over here   we have a same card and you have this table table  in here you can see we have the table body TR so   we have the name the name here we have the title  title in there telephone telephone in there then   address address then you have the next one that's  for Department info and that's very simple too we   have the same table so TR we Contin with the  TR and I have Department Department you have   to sa the name in here so you see we are making  a reference to the branch which has a reference   to Department which has a reference to the general  department do name we do same thing to the branch   name and on the not the department name and under  the branch name okay that's what we're doing when   you come down here you have the same table down  and this for location info so see we making the   grouping so from the personal information from um  maybe um job information or Department information   then we have this personal information or the  location information we have country we have City   we have town then in case I click on a button like  close to the what can I do so I call this method   also to get it closed now we have this um stated  beautifully what we can do here is we going to   specify this event call back and our methods to  handle this as soon as the user close it up and   the user retrieve the data from the parent okay  so in this we can have this three parameters to   handle that now we have okay so I didn't not to  repeat this code again cuz it is already that is   one bad side of copying copying cop so you can  see from here that we have this show detailed   page and now when you check the top here it is  say if this is true that is the only when this   maon take note okay so we're going to provide  the uh value to this from the parent then we   have employee employee details and the event call  back to also handle this okay so this event call   back and I need not to provide New Year okay I did  not see it trust me so there's no we don't need to   provide new here we are invoking the event call  back as handle Details page close button click   okay so that's what we're doing let's go quickly  go to the main page in here you know today we have   a lot of work to do as what we did the last video  so you know to waste some at all okay but you can   pause the video take some take some rest and  I come back okay but for me I'm not tired yet   okay so we go to the employee page and now in here  we have to make a reference to this um component   that we have created so where we have this you can  see we have this this contest menu in here and as   from that we have ADD and update so maybe with the  details let's put in the middle here as detailed component so maybe May here will be better for us  to get the the arrangement well because so we add   then we can now show the details so we need to  provide this to the the property as an object   to this parameter also we have this parameter  as a Boolean expression that we need to specify   this then we have this event as handle page close  button click so in case I click on close from the   tat to the parent what am I supposed to do or  what should the parent do as soon as you hear   your chat I'm crying crying crying what I going  to do then we going to respond to it isn't it   good so let's also respond to this and we can do  that from this session so from the detail page   we can do that after the view so down here  if I see that or if the parent Hears A Clos   event has been called from the chat component  then quickly the details hide it and I'll show   the main page that exactly what we're going  to do now that you have this set let's have   a look we can see we have all the three here  set let's go to the ad Health the overtime and   also the sanctions and click event and Etc but  for now we can just remove this okay so maybe   I just I don't want to remove everything because  we're going to be using it soon so I'm going to   copy this then I'm going to paste this here  then you know what I'm going to comment this   because definitely going to be using it soon  then I can now go ahead and I remove these guys okay all right so now let's save this  and now let's um run this application   and see the output that we or you and I we have right okay so the app is loaded back see we have  this Arrow here and I believe it is coming from um   the fact that you have not logged in because you  know we have created a new done a new migration   so maybe let's log out and and try to log in again  and I'm sure user won't be found because there's   no data in there so let's create an account here  then let's use this net code okay so there's a   password one two three nice one click on register  account created then we can now sign in okay so   loging successfully now see we have the net code  we have accounts loging and that error must be gone okay right all right so you can see it  is also gone as well now if I click on this   see what happen if I click on this you can see I  have this a contest me that I'm talking about or   recreated ourselves and if I click on this view  see what happens see I have this a view right   this very is not good at all I'm going to do this  later on um for the campany itself but for now you   can mod you can leave this maybe you can modify  it yourself you have the department info you   have location info you have the personal info  in here the job title telephone number address   and department for it management developer we  have the location as well if I click on this CL   notify the parent and I can see it is off click  on it again and if I click on edit what happens   you see I have the same info in here click on  next and let's see yeah I have the same data   you see it now the department here I did not  provide Department you see the department is   null Branch to select Branch we did not we have  only the job title in here and we need to provide   the city the country and Etc this is a Ghana so  you must have it selected in there let's click   on close and see so um edit this we have the  flowing it and our V Department you have to get   that so let's quickly check the the code in here  from this employee not employee details you know   from this add update employee in here we check it  if it is equal to null then we have to set it and   now W so can see we have to pass in the name in  here instead of passing in that you have to use   a select country and let's say um select Branch we  have to use this instead so this is what we have   to do right and also let's have a look Department  we have to do same to this department I think we   nearly forgot it but it's good that we've seen  we've seen it earlier okay so we have general   department is already we have department and it  is there branch is here we have location so from   country count is over here City must be around so  we have to pass in the city property as well okay   then the next one is Town so let's also grab  this and now let's paste this as town yes so   that is this one now when we save this let's try  to reload this application and let's see what we have okay so it is ready now if I click on let's  see go to details and click on edit we have this   okay so we are here we have everything click  on next and you have here we have it management   developers and you have everything set up in  here but if I click on um this Clos this and   if I click on add new see we have the same thing  right so on the close button clicked we have to   clear that container we can actually do that  and I believe as for this you can do it isn't   it so where are you having a notified appearent  let's search for from this employee page where   we have this notifi parent it is coming from  show uh where is it notify notify let's see   okay so in here after loading this this maybe  we can clear this container also and let's say   selected um employee is equal to new okay so we  do that and that's going to clear that container   off now when we click on update let's see what  going to happen so with this you want to change   the name maybe the first one software developer  we from this previous this is Fred right so maybe   let's change to net code hub then click on next  we have the name set up in here already so if I   click on Save yes you must select this okay so  you have to select before you select this you   must also choose from um this side and we have  only one so let's use from first one here it is   what PR pram so I'm going to use test in here  developer and you can select from the it field   s from management and I developer and I click on  maybe here let's say um modify click on Save and   now let's see completed so if I click on close you  can see we have the data in here being modified   or specified as well and if I click on ADD again  you can see we have no name right so this working   okay so that is this one now when you have a look  you see we've done the view edit and I'm delete   no no not not delete so let's see if I click on  this delete this I just want to do this I want   to delete as say yes click on okay and complet  it and you can see it is off so delete is also   working let's have a look with the next one the  the last three that we have is it three or four   1 2 three four here vacation overtime health and  now sence if I click on ADD vacation we going to   have a test box um a dial box which going to  display maybe the day that the user want to   the number of days and and Etc right so let's  have a look on how to generate this based on   the credit requirement that was given we're going  to have to do same according to the requirement   given to us okay so then let's go back to the  source coding here and remember when uh we got   up here we have to now uncheck this cuz you're  going to work on the three left and we can now   remove this contest menu here okay so we have  this set let me put it here a little bit okay   so let's a look with the ad health and the rest  one so in down here let's go to uh down here so   there's an edit and this edit is working this  delete also working now let's this is a view   also working so the next one you're going to have  a look here it is that's a page close button down here so we going to create the various components  that we can be used to just display the popup in   so display the list of these various um option  that we have have been given so in that we can   do that from um this other Pages now let's create  a folder in here and I have to stop everything   here because you know I can't rename the folder  if I do not stop it okay now stop now let's have   a look so you have to create let me close this up  close this now on this page we going to add a new   folder now the name is going to be um do Pages  BAS on the requirement supposed to maybe Health   Pages or so but yeah talk page is what was given  so maybe we can actually have a look on that and   the next one they're going to create here is  we're going to create a component dialogue so   here let's add this component dialogue and I this  that going to be a popup it's going to displayed   anytime that the user or the administrator or  the person the manager want to add um vacation   or health issue related to a specific employee  this going to pop up okay so so in that dialogue   you're going to have only few um is it columns or  text box specified so here let's see what we're   going to do we have just a dialogue and you know  we have this add employees health here you are   just only adding you're not editing and you can  see this and doctor so here is a mod that we're   going to create I like to save this and open  this again so I can have everything um call   it not this black and white Okay so so that is  this so here before we come to see we have this   the doct and this is the mod that we created if  I right click and Peep definition for this this   has what it has um date medical diagnose and  recommendation so these are the the thing the   property that supposed to now when you click  on this other base click on peep it has um ID   civil ID and file name file number and other but  you know we're going to remove all this because   when we have all this related to the specific  employee database already so we're going to do   here is we're going to only link the the employee  ID to it so maybe later on you can use a dto to   collect all the information and and display if  they want us to do that okay but for now we're   going to do that so let's try to modify this a  little bit so we can um use it in here let's go   to the dto not the dto itself the entities now  from the entities you can see we have this an   other base entity we're going to remove all these  and now except only the ID that's what we need and we remove this and we add this employee ID so  let's add employee ID here so this is going to be   the foreign key in here right so you have emplo  ID so when you check each like the doctor model   so if I check this do model you see it has dat  medical diagnose and recommendation and it has   the two properties specified when you also check  the other um models which inherit from this other   base entity you can see um it has the same thing  that you're going to be using they all going to   have this employee ID as a foreign key reference  U made to them so you can see that's what you want   to do you don't want to um be using or repeating  the same property a couple of times in in this   table okay you want to make this simple and it  should be also um nicely designed okay so we have   this it means as soon as you made these changes  migration is what is coming to your mind isn't   it you're right we have to um do it so let's save  this and now let's update this table so I'm going   to say maybe add migration and I'm going to say  update tables oh so it's wrong to see we selected   the client and that is a wrong thing that we've  done so we're going to have an error it's going   to build it but it's going to have an error here  so we have to make the server or um a set project   and we have to set the default project to the data  asset layer that is a server Library let's wait   for this to get finished because you have nothing  to do then we move on and I do what um you're   supposed to do so even build field and that's  right realiz that let's set the server through   a startup and here we choose the data assess  so we're going to do same add migration update   tables and I'm just going to run it peacefully and  nicely then we're going to update it when it is done okay so build field what's the  reason let's say let's build it our   yeah I know the reason because of this  what want to check this um contest menu   employee page you know we have this okay  so control KC maybe we have to comment this let's do it again I believe it is not only this because  we have created the new page now and we need   to also Rectify that so this what we're going  to do let's finish everything then we're going   to run or build this then you can run it and  see what is actually doing so let's go to the   once you have this set let's go to the doctor's  um dialogue and that is the health dialogue so   Pages now go to this do dialogue and now in  here we have this that we need to specify so   from the code section we can just replace it  with this so when you check that you have we   have a title in here this we're going to make  this available uh maybe if you decide you want   to update it then we can now change that we have  the doctor in here as a model and we have when   it is clicked we want to invoke this personing  sending this doctor entity and now when this is   clicked that is where you want to handle that  defaultly we set is visible to force now if I   click on open dialogue set this through and I C  state has change we've been using this already   so I think you know what this is going to do then  change tit we going to change the title for this   okay so let's save this and um once you're done  here the next thing we going to do here is let's   go to the parent component and that's going  to be the employee page so employee page will   be here and now from this add Health we go down  there and now try to have definition for this add health so that is this one add he will be here  so if I click on ad Health what am I supposed   to do that's add heal click we call this method  in now doctor we call that employee ID is equal   to this selected employee ID remember as soon as I  click on shop up I have this selected ID assigned   to the employee or to the context so in that I'm  going to close a context from the popup context   and I'm going to show this doctor dialogue so we  have to make a reference to this doctor dialogue   so you have to make a reference to um this object  of the doct model so in that we can actually have   a look on it by setting it up on top so let's go  up in here or well we can decide to put it on top   since it is related to only this okay we sign up  in here and is a doctor dialogue so control period   we need to use it from this doctor page so in  order to do that you see we don't want to include   all the links in here so we go to the input and  I'm try to include all the various link that we   going to being create in future you're going to  put them in there so I'm going to have all this   let me just grab all these and in here you can  see we have the content pages and everything we   going to replace it with this you know we have  this sanction Pages we have um vacation pages   and overtime pages and now we have this um doct  pages okay so this is what we've created we're   going to create other thread in here okay so  let's um leave them here before we have her   him again okay now in the employee page we have  when I check down here let me just minimize this   cuz you done with that okay so when you check down  here you can see that notify so cont test okay so   we have it this is a do dialogue okay so we have  this Dr dialogue and it is a dialog that we just   created this a do dialogue and I believe this we  added already or we have to make a reference to   Dr dialog itself so to make a reference it means  we have to use that component in this page okay   so in order to use that we just have to copy  this or you just have to copy the name of this   do dialogue in here because this is a component  so we can make a reference to that component here   where we have all these component so the next  one I like to put it here and that's going to   be the do dialogue because you want to use the  dialog you want to pop the dialog up as soon as   we click on um add Health okay so in that you see  these are the parameters that we need to provide   doctor and also this save event if you check this  doctor dialog you see we have two parameters and   that is what we are providing um to this doctor  dialog component or not the employee page we are   providing it in here okay so maybe we can also I  like to make it in a straight form like because   it's not actually match okay so we have this um  created as a reference that we can use to call   the method inside this component all right so  that's what we do I think problem is solved now   when you check this minimize this when you check  minimizes to the context could say it is now sort   yes so it is sorted in here and this is going to  be the doctor dialogue we have it set okay so they   saying that the type of name space in here what's  the issue um could not be found are you missing   the directive yes we have it already so what is  the issue we have it stay in here don't worry   when we close this and open it again I believe  everything is going to be all right so from employees from our client and we have this  employees in here employee Pages now check   that here I think this supposed to be yeah so it  is solved now so that's what we're doing as soon   as you pop the the menu up we have this selected  to get a current contest aside from that when you   click on ADD Health you want to set the employee  ID to this Ed ID that's the employee then we hide   it and I open this dialog contest so when you  open it and try to save pass and everything at   the date and do a whole lot that we supposed to  do when you check here you see we have just a   date we have a medical diagnose and we have the  recommendation if I fill everything here and I   click on save that submit button what am I going  to do that is the next thing to do we're going   to handle this from this employ employe page so  let me close all this we done with them contest   menu we are done with this to employee detail  you're also done here user account you're also   done already authentication done login H long  time okay employee to you don't need a model   now okay so um base we are done setting up this  and I add update to we done so we are onto this   employee page all right so we are going to work  on how to handle handle the save method from this   dialogue so before that we're going to call an  API to handle this it means let's check if we   have created the apis or not do we have any  doctor we don't have we up to the department   so it means we have to create our controller  know you have to create ourry for vacation um   whole overtime um what's the next one do you  remember okay so um s vacation overtime and   our health okay so let's quickly work on that  then we come to the UI and now um work on this too so let's create our doctor repository and we  can do that through the implementation since we   have this generic interface we all of them are  going to inherit from that so doct repository   and now inside this repo we're going to have  a class we going to inherit from this with   the appdb contest classes going to have access  to the database okay so in here we have it set   down already and now this we going to have a  look on the first one that is a delete ID if   I want to delete this what can I do we just  have going to return a general response and   also I'm going to se from the database do table  if it is found deleted if it is not then return   not found okay so this is a private method that  we created comit is so the same and our success   is also the same private method let's have these  methods displayed down here the first one is going   to return General response which is Sor not  found and also this process completed that's   well okay so and the sucess here is going to  return this a process completed which from the   general response now this also the same you know  we have to put common ones together and we have   to um create class where you can use it a whole  lot of time do not repeat yourself all the time   okay so that is for the delete let's also see if  I want to get all we can call this method to also   get all um the data in this doct table now the  next one here that we're going to do is we want   to get by ID so to get by ID we can also use just  a single line using this Lambda expression to get   it let me put it in the next line like this to  make it very simple and clear for you okay so   get by ID and I will return it the next thing  to do here is to make an insert so if you want   to add a new this what going to do you can as  a doctor instance as a payload then we add it   and I'll commit and I'll return success what for  up it also very simple we have to also get from   the database you map it then we can now assign  or assign the old on to the new value coming in   and we can move on with it very simple one as  well okay so this what we doing we save it and   I return taxes that's what they we doing for this  um doct repository if you don't mind let's finish   the rest okay so we have the next one and maybe  you're going to have um overtime repository to   to be created let's finish all the repost in here  before we go to the UI so right click on the same   thing let's go to add new class and it's going  to be the overtime repo and you know we have to   still iner from the same thing and inject this  appdb contest for a database so we do same in   here and that's what we're doing interface from  the generic type we passing the model at we need   to provide some properties this some method in  here and it's the same okay so I'll just have to   grab that and I'll paste it because you're doing  the same just like here you need to change the   table name very simple one okay maybe later on  we can just um put all these this three method   in one class that we can call it and now um use  it but for now let's maintain this you want to   you want to try as much as possible to make  the work very simple and I'm clear too so we   have to also get the same so get all we can also  get all data then um we have also so get by ID   you can also return it using first or default  to get by ID and that is this one and the last   one not the last we have um delete and insert so  the next one here it is an insert if you want to   add you do this to add it to the item from this  overtime table and now if you want to update it   then you can now go ahead get it from database map  it or just um watch it once get it then make sure   you map it to the current one that we have return  save it and I return success done okay let's work   on the next um repo we have the doctor set we  have overtime set we have vacation also waiting   for us and you're going to have our maybe um  sanctions too so let's have the vacation in here let's create the next repo there going to be a class as well and I will  see vacation repo now all this we've created the   model already if you've watched the previous  video you know what I'm what we are doing okay   we created this model already and that is the  the requirement from the company and we want   we want to work towards the requirement which has  been given to us so we have to do this and it is   the same thing okay so we want to delete it we get  from database and now we're going to delete aside   from that you want to return the whole thing to  the user so you can display it in the table and   we are doing the same thing in here for this  we want to get by ID so we're also doing the   same thing by getting using first or default to  get by ID as well now the next thing that we're   doing here is we want to insert it so insert and  also call the save to save changes database and I   return success to the user as a general response  aside from that in case I want to update it then   you can now go ahead and also update this so  get it and I'll match it and set the current   value to what we have from the previous one and  I'll save it and in case you have any issue that   you want to return you can return error that  is if is not found not actually an error and   also we can also call this to save it and I  do the same thing as well we save that and   the last one that not the last one we also going  to work on sanction repository so from sanctions   to you know employee can be sanctioned right so  you must have a table to also handle that let's add and the same thing sing  repository whereby you need   to provide the same generic repository and undo this yes so they have the same just that here you  need to change the table name to sent instead of   the other tables that we have been using get  the list from the database in here this a list   General response control period I think we have  to use this response reference and also for this   get by ID we can also um do same and I'll get by  ID as well from the next line maybe get all get   by ID this will work here we also have inserts  it is the same as you know and we have update   it so the same here we're going to match it BAS  on the property that this model has okay so we   do that and at the end of the day we are going to  save this to the database so you call this method   to save it to database and it a return not found  and and that is all if it is found to um do that   so we have the same thing and um it is set okay  so if you're not finding this it the same thing   that we doing let me put on next line like  this for you to get it clear okay now when   you check it you can see we have type types  so each has type that we supposed to specify   when you check this the client Library check um  this the entities you can see we have overtime   type we have um S Type we have vacation type so  we need to also create repository for each of   these types okay so let's quickly um do that  let's create the same um class interface for   this not the interface um this is going to be  overtime typey a class for this and now it is   the same thing that we are doing so I need not  to be explain again okay so as as you watch you   able to get the understanding in here so from  delete that's where this to handle the delete   in here we handle the delete for get all we  handle the get all from this angle also for   get by ID we can also handle this get by ID  from this two get by ID okay now the next one   is we want to insert so this method going to  make it possible for insert to be made let's see okay so we have this insert in here and  it's going to insert it maybe return okay so   we insert it we check the name and now here this  what you're going to do this going to make it as   an update so for update you're going to specify  this as an update in here now this meod we going   to check if the name is not found or if the  name is already found there then what this   is what you're going to do you want to return  something to the user so we can create all of   this down here so you can see we have check  name it takes in the name and I we checking   from the database if it is found so let me just  put this in L line if the name is equal to this   then return item is not that is true in case it  is found then you're going to return false so   that's what we're using here if it is if it is  null return not found that is it is not found   you want to update it in case it is there then  not not this one this for the the insert rather   we check the name if it is false it means it has  already been added you want to skip duplicate okay   yeah so we have this set we can close that now we  have other two repositories left we have the what   do you think with the next one we have the S type  repository or so we have to also create same and   let's also um do same from the same folder later  on we can decide to have a simple interface for   this repository tool okay because you know we  have a single interface a generic interface for   this but for the repo we have individual repo so  maybe we can plan to have um know instead of us   typing the whole thing you can decide to make a  single generic interface to handle that then so   we're going to have generic repo interface and  implementation all generics we're going to have   a controllers to generic okay then it's going to  make this very simple as well maybe later on the   next project we're going to try our hands on that  too and see if it's going to work for us if you   can have all access to generics for the whole um  three um system that we need to add so we have get   all and you know what it's going to do right so  it's going to get all we have get by ID and it's   still going to do same get by ID too it's going  to do same the next that we doing here is if I   want to add you know what it means go and add it  that's for addition if I want to update it is the   same we want to update it just that here we need  to change the table name now we need to specify   the same method that we did in the other one so  we have to do same in here for checkup and also   for return access and in case there's some error  in there we want to do that okay so you see this   is the same thing that we are doing here right  it is the same thing that we are doing in here   so control k d let's save everything we have  one whole left that we need to create and we   have this over time type we have a sension type  so we have one left that is a vacation type so   let's also um have that created and that'll be  the end for this project that we need to create   okay trust me we're not going to create any  report again to that Kingdom Come okay so from this let's right click on the implementation let's  add a class to this and you know it's a vacation   type repository and you know what it's going to  do already hope you know the drill right you're   going to make a copy of this then here you have  to just paste this then in here maybe maybe let me   try to put this in the next line okay so in here  let's implement the interfaces um according to   this the the generic one that we have this is for  delete then the next one this going to be for get all and we have the next one get by ID so get by ID this is going to return by ID we  have have um inserted if I want to insert add a   new I can do this return if in case the name  is found already then um there's going to be an   update so we can also update this no this should  be okay so let's see yeah that is it this should   be inside the generic interface it shouldn't be  outside so take notes before we do any mistake   okay so once you're done with this we must have  the the base um private model that we have created   or private method that we have created and that  is this one okay so we've done this already so   that's why I'm not explaining this anymore now  let's save this so all our interfaces all our   repositories have been created the I'm going  to do here is you're going to create a generic   controller for each okay so let's handle that too  all right so let's create the controllers in here   so we can close this implementation now when you  go to controller you're going to right click and   I add a new controller for this and we're going to  name this as dror controller okay so in that you   know we inheriting from this I generic repository  then pass in the the model as here and I passing   to the generic controller to that we have created  so this is the interface in this T value and now   the controller also needs T value so you pass  in and that is all it's going to inherit from   all the the controller method the Endo that we  have created in the generic so if I click on   this and go to p definition you know this generic  controller has it's coming from this T value and   it t all delete single ID add update and Etc okay  so we inheriting from rearing all the end points   into that let's the next one we have doctor we're  going to have overtime controller so we also need   to include this so over time controller too and  you're going to actually do the same so see make   a copy and paste then change the model that is  all we have the stanion controller and we also   going to change the model to sanction and that  will be your as well so sanction and that is it   you you see very simple one aside from that let's  go to the S the types so we have sanction types   we need to do that too so that is a sanction types  controller and you see we changing to this the the   sanction type model the same thing applies to  this and the same interface that is inheriting   from we need to have the vacation controller and  the vacation type as well so we have the vacation   and that's the vacation controller you see we  using the same model let's add vacation type as   well so controller the vacation type to we have  that now which one left that is going to be the   overtime type we have to include that controller  as well so we go to the controller to add a new   controller as overtime type so when you check  you have the doctor we have overtime controller   and the type S it's type vacation and is type  okay so we have these controllers now when you   run the API we're going to have access to all of  these let's have a look but before that before it   gets run we have to race out this in the prog CS  file it's good that you've remembered me if not   we're going to have try to have access to that  okay so let's actually have them registered you   go to solution then in the program.cs from  the server section server project that's a program.cs so this is a client this is  a server so down here we are going to   include this here so we have the interface  over time over time what time type time type   repository so each correspond with eight  repository as you can see and that's what   we doing okay so this saves now let's  going to rerun this again because when   you try to have access to this you're going  to have an error who this okay so let's see that's fine so you can see we have our all  end point in here now this authentication so   I can just close this Branch City we know  this already country Department doctor is   here we have the next one you have no we have  overtime is here overtime type is here sanction   is here sanction type is here we have vacation  and vacation type is also here so you can see   we have for all endpoint that we can make a  call to this Endo to retrieve data but for   now when you TR to get data you're going  to have an error because you have not run   migration yet to update the modification that  we made so we need to actually um do that all   right so now let's close this let's let's  close the server cuz we are done can just   right click and then close all tabs in here  and let's go back to the employee that's a client so for the client we go to the same  employee page and now in there when we click   on handle this see save the um Health we're  going to call this endpoint and I'll save it in   there but before we do that we need to register  this the um there the endpoint you route in the   constant class that you created in the helpers  folder from the server or from the server Library   okay so this has to all right so did I say  server no that's the client so you know we   have this constant class in the client and that's  what we using to hold all the URL so the rout so   we need to specify that in there so go to the  client and you can see we have from the client   Library where we have the service see we have a  head PR folder we have a file called constants   that's we adding all our constant in here okay  so we have to include all our constants that's   the doctor base overtime overtime type stion  base stion type vacation base and vacation   type okay so we have all the U end points stored  in here so now let's go ahead and start using um   this so let's go to the employee page in here  now where we have the save and this going to   happen from ad Health okay so if I click on save  this we going to save this ad Health um data to database so in here we are going to let's wait  for this command to finish we're going to save   the health Handler and now you see from Save  Health event we are the p Lo com in is an item   it's a doctor instance and in here we set the  ID of it to theed Item ID and you can see from   here we call this API endpoint here okay so do  service. insect you pass in the constant of do   Bas URL we check the response in here now  we can check if it is through if everything   is working we want to cleck The Container  clear the doctor instance and also um close   this doctor dialog that we opening okay now  this doctor service where is it coming from   let's save this we have to go to the import  and now um register this doctor dialog in there so in here maybe you can just name it as  supplementary models so maybe what we have down   here we can say this are supplementary model we  have this overtime overtime type vacation vacation   type stion type and we have doctor okay this we  have Service attached to each and that's reason   why we able to actually get a service from this  doctor type okay now we done with the doctor now   let's have a look with the next one so when you  check let's save this this is going to be the next   one in here we have this the doctor and that's a  health add health and now we have the save Health   to this let's see when you check this model you  can see we have this a overtime s and vacation we   have done the he so let's handle the two the three  left here but I think before we even go into that   we have to add the page now this page going to  allow us to display the whole list of um employees   okay so let's complete it before you move to the  next one I think so now we go to the same other   pages from the doctor pages and now let's add a  new component to this doct page and we're going   to name this as doctor Page you know the first  one is Doctor dialogue so this is a page now   this page what is it going to do we're going to  be using um this um data grade and that's a simp   data grade to handle this and in that we want to  actually enable sech Excel export PDF export and   also print you want to enable these features as  well okay so within that I want to actually have   us look let's have a look here with our decode  session first so we can actually work on the UI so from the code section this what  that we doing we're going to have this   SF grid and this SF grid it is coming  from using this do model we give it a   name as default grid let me close this  and open this again so you can see it well okay so we have this doctor as a model we  have an instance created we're going to provide   a list of doctors in here and now when the page  initializes you want to get the whole list of   getal from the API then we are going to this  is the method get health calling this doctor   service and getting all from the API if I click  on ADD button you want to clear this container   create instance new then open this dialogue what  do this open DI going to do you can see we going   to call this do dialog. opening which going to  set is visible to through and now apply State as   CH to open or to pop up the dialogue so you can  see we are creating one dialogue and this dialog   is going to be used in the hom page that's for  the employee page and the same dialog is going   to be used in the the separate or the other  supplementary Pages such as the doctor Page   or the Health page the um employee not employee  we have the doctor we have the vacation we have   the sanction and Etc okay now if I click on Save  we want to get it here so we're going to update it   okay so click on Save then we going to update this  and if I click on edit click we want to get this   content to the current item coming in here then  open dialogue so because we're going to provide   this as a parameter to that component so that's  the reason why we assign it here and defaultly   automatically it's going to fill up with the  various properties specifi in this model inside   the component that you're going to use and if I  click on delete then you know we have this item   we want to as a person are you sure you want to  do this confirm if yes then remove it from the   API as you can see provide an ID and I'll passing  Dr Bas URL and this what you're doing display the   message and now get the Whole Health since a new  one has been removed or added we want to get the   whole list again and that's what that we are  doing so this is also the two back clicks here   you can see is an Excel export PDF export from the  same Fusion okay so here if the test is equal to   ex export then you want to export it if a PDF  you want to export to PDF very simple one just   one L of code is going to handle that now let's  include our U the here because you're going to   be using a dialog to update it so the dialog can  be here and provide the reference of this doctor   dialogue we have the doctor object in here and  we have the save operation as has been specified   in here as an update okay now let's have the UI  we must first have the style um created and this   going to be a custom style you know I've been  using this star sense and that is the K Star   as pointer maybe you can put this into the CSS  class Plus or the app. CSS so you cannot be so   you want to be duplicating this all the time but  don't worry I get it so let's here let's implement   the actual UI that we need okay so we set you're  still going to use the state container to handle   the the opening and the close the height and and  the visibility of this so we say that is a health   information we use this as a card as you can see  a card header and within this we want to use a   cardboard you want to use this SF qu these are the  tools which has the search the SS Port PDF and the   print which going to displayed on top of the SF  grade or the data grade okay aside from that we   have the list in here as stated benit we have the  allow pagination or allow paging allow sorting in   our to bar and also you can see we have allow  Excel export to through set a reference to this   and allow PDF export also through Maybe maybe if  this is too long I can just move to the next line   as you can see clearly yes so we have the page  settings page size is five initially so maybe   you can decide to increase it to the number  of page size you want and here if I click on   any of this this method going to get fired so  we can now check and now execute what you want   and that's what we've done down there okay so for  print is also doing the same you know allow print   do you have allow print you see we have allow  X Sport and I we have the print so as soon as   I click on print going to print it out for us we  have the various um properties specified in here   employee ID medical uh recommendation and now the  date we have action and we have this contest as   doctor and that's where we have these two icons  so we have the trash and our pencil for EDI and   delet if I click on any this method must get  fired let's have a look on how to write this   method down here and you know if I click on edit  and I delete we have this method specified here   edit going to handle this delete this also going  to handle that okay so that's all this um page   is going to do we're going to make a duplicate  of this and at a dialogue a couple of times for   the vacation for the other ones too exensions and  also yeah vacation sension and over time yes we're   going to have a copy of this and use them use  it for other three now let's save this and let's see okay so let's see now when you go to the  employee page you can see we are done with   this add Health the next one is an add overtime  click so when it's clicked what you want to do   let's also handle that so when you go to down  here what we have this so This save Health add   Health click and now save Health the next one  here it is ADD over time clicked we want to set   so we create an instance of this over time and  now we set the ID to this so as we did for the   ad Health we doing the same thing in here just  that we set the model you change the model to   the over time model okay then you close it and  I open this over time dialogue so this means   you're going to also create the same dialogue  for this then the next one is we also going to   add vacation so maybe we have vacation to that  we can add we can also do the same in here then   we have um vacation click so that is an add  vacation click we also want to that this is a   Sans as you can see so we have to also include  the vacation so we're going to create separate   component for each of these and maybe that will  be the end for I think uh this project I'm sure   yes okay so once you have this we need to  create an instance of this so first let's   first work on the overtime now the overtime we  have to create this for the overtime we need   to provide the list of overtime type because you  know we have to select we have a relationship in   there so we can actually just put them on top  here you know we have this overtime dialogue   and we have this overtime instance that have  been created you see over time and that's why   we are providing the the employee ID to this  selected employee ID then we're going to close   the context here and I'm going to show this  overtime dialogue so this is overtime dialog   but we haven't created any overtime dialogue yet  so quickly let's go in there and now create this dialogue so let's create create a folder for  this and you know for organization I like to   create separate folder inside this other pages  so add a new folder with this and now let's stop this and let's rename this two overtime  pages okay so in that we going to create   this diog component overtime dialogue let's  also create that so add a new component and   it's going to be overtime dialogue so inside  this you know what we're going to do we also   going to specify the same code session as we  did so let me just um put them here for you   you know we have this these are parameter that  we are specifying let me close this and open it again so we have these are the parameter that  we need to specify a list of overtime types   and also we need to specify this overtime  object as item model in here we have event   call back to return this overtime instance  as soon as it has been invoked we set title   to this and then visible to force and now  when it is save invoke this and now open   dialogue and what close dialogue and now when  the value changes because you're going to have   a drop down list of a type of overtime type  we want to use the overtime type ID assign   it to the item value here then change title  we're going to change title so this is what   that we are doing here see this is very  simple right let's have a look with the UI as you have basic knowledge for this what  we've done already it's the same thing that I   am also doing here so if we check this in this  SF um dialogue and we have this title employee   over time this is an item model for this edit  for model in that when I click on submit or   save it's going to call this method then you can  see we have the ID speci specified and you know   it's a disabled timee so you cannot see you  cannot edit it we have the input date to to   select date as start date we have end date then  this going to give us the number of what days   automatically that's why say they disabled so  you not to write it it's going to subtract this   from that and then we going to have the date  in here also we have this item type this for   the update and this for adding new one just that  here we have the selected item here okay so maybe   we can actually um put something here if this is  not null you want to use this or we can use that   maybe you can try that and see okay so if this is  not now we can do that but also this also going   to work okay we've done this already in the add  employee form so we use the same um ter operator   here and this also going to work but here you  need to duplicate the the component here twice   if you want to skip it you can use the other  other approach as well okay so that's all that   we are also doing in here we need to provide  overtime types as a list of this overtime type   and we do same in here okay so that's what we are  doing now let's go in there and I'll handle this   also inside this employee page so we need to as  usual as we added the reference of this we need   to also add the same thing to it isn't it so we  can have access to the dialogue as well so why   we have this dialogue doctor dialogue we can also  include this maybe this is too long so let me put   it in this line okay so you can see that from  here we have the reference overtime dialogue   we have the model as overtime we have the the  list of this type as overtime types then if I   click on Save I want to call this event okay to  get sa now this event is returning an object of   what over time so you can see returning this  over time object okay so let's actually handle   that so we can just grab this we go to this um  overtime where we have the overtime save down here where you have this this is the add  overtime so here on top of this we have this   overtime dialogue we've done already so we can  see we are calling this and now we can actually   um use it in here as an open dialogue right so  that's what we have in here and it is actually   working now when it comes to the save what is  going to do let's handle the save event so if I   click on save you know we did for the add health  and now save health and now this is going to be   for the add over time and now save over time  okay so we can see I am grouping them so as   soon as you get a source code you can actually  um go through it a couple of times for you to   get a better understanding or even when you're  watching like this you can actually know what   we are doing okay so in here this is going to  be for Save overtime Handler now with the save   overtime Handler you see we we are accepting as  a payload then we uh assign the ID then we call   an endpoint here we save it and that is all so  here we make a save Here and Now from the list   page you're going to update it okay or we're going  to manage it there either an update or delete so   here we're going to make only savings okay this  is what we are doing you can now close this and   it's the same thing as I explained earlier on  from this save health I you not to um explain   this again I believe you guys are smart and  you understand what you're doing isn't it we   clear the container here weide this selected  employee we cleare it as soon as you are done   saving it okay so that is this one now let's  see the next one that you need to do here is   um we need to display this content so we need to  create this page a page to display this and also   we need to actually add this overtime type so  who is going to add it it maybe the manager or   the administrator can add that and we need to make  it available for that person to add the types of   the overtime that they want they did not specify  in over time for me so I have to make it generic   that they can um add it to database and anytime  that they want to change it they can going to be   possible for them to also change as well okay so  in doing so I have to come by by create the same   dialogue and on the page to handle that so we go  to the same um dialogue and I in there very simple   one you're going to create the same overtime type  dialogue so here we're going to create overtime   next component and overtime type dialog no this  a type now this type we have going to be a simple   one we have just our UI simple UI which has only  one input test as a the overtime type name okay   and the type here is going to be the overtime  type so let me close this and I'll open it again so you see an overtime type and now down  here we need to actually specify the code so   we can invoke it and I'm saving to the parent  component where we going to um use this so we   have this overtime type and it's an event call  back we have title set to this and invisible to   force and now we can now save it as can see so  we could see we are invoking it in here we going   to return the type of what over time type to this  main page okay now let's save this let's go to the   same component and in there we have to create the  overtime tab page which is going to display the   list the list of the overtime tab that the user  has now added so let's see I'm going to add a new   component and it will be overtime type. Razer now  in that here we need to only use table to handle   this okay so from the UI we're going to use table  and here we have this a container row column Ed 12   and card and here we have this button here as what  onclick as open dialogue that is when you want to   add a new dialogue open it you want to add a new  overtime type so you open dialogue then there's   a table head you can see you have an ID type and  now the action if the types is not now we're going   to look through them provide the value for each  of the header and we have the ID and now the name   if I click on any of this edit and now delete I  want to call this method and passing the object   here to edit it or to delete it that's what that  we are doing here cuz it is very simple isn't it   very simple and that is it now let's save this  and I can close this and open it again so I'll   get rid of that white color as you can see so  over time time diog we have this and that is   the page itself okay now let's have a look with  the the code itself so let me clear this normally   we have to have our CSS style as usual you know  you know this already we've been copying this all   the time so from the code session we can just uh  make it work using the following code here so you   can see if I click on take note we creating an  instance of this overtime dialogue and as soon   as you create an instance it means you have to  include this component itself so we are going   to include the component here over time type you  make a reference to this reference then when it   is save you want to hand it by saving this is what  you're going to save and now there is a model the   type that we're going to handle it this type is an  instance of this overtime type we set title to add   defaultly so we can actually update it and I'm  set to update anytime that we click on edit now   take note when the page loads we're going to call  all the type from the API and there is the type   that we are calling we're going to call all the  type that have been added from that if you click   on open dialogue we're going to open the overtime  type dialogue we do that from the button top here   open dialogue and to add a new um overtime type  I click on save you want to check if the ID is   greater than one no ID is greater than zero it  means you want to update if not they want to add   so that's what we're doing update and I'll add  okay if it's successful clear the container get   all the type because a new type has been added and  I'll change the type to what the title to add if   it is clicked we accept the incoming payload  and now um change the title assign it to the   object and I open the dialogue if it's deleted  then what you want to do confirm then if it is   false returned but in case it is true C an API end  point passing the ID of the item and pass in the   base URL and um that is it it's going to return  the success of through and display as a message   to the user okay so that's what we are doing in  here very simple one as well you know this what   we've done this already so I believe you know what  this going to do isn't it yes okay so that's all   that we're going to do for this page we can now  save that so we are done with this over type and   now the overtime type dialogue as well okay so  the next thing that we're going to do here is   we going to create this overtime page since we  have the dialogue we have the type dialogue we   need to also create the page so we can display  all the data from the employee to that component   okay so we have an overtime page and now inside  this overtime page this going to have a list of   this uh we need to include all these codes from  this overtime page because this what it's going   to do when it actually check the first one we have  this SF grid and you know we're going to use data   grade from s Fusion so we need to use um this  let me just clear this and open it again I hit   this black and white okay so we have we create an  instance of this overtime dialogue that we created   earlier on and um in order not to confuse you I  would like to bring it first so it will be here   because you have the reference this item mod that  we're going to specify and this overtime types   this is going to be the list of overtime types of  this so as soon as the user want to add the user   has to choose a list or item from this in the  form of a drop down list then this is saved so   we have when initializes get all types get over  times from the database from the API so we have   the two method implementation down here okay  then open dialogue to open the dialogue then   and save it to receive the item and I'll save  it in here to or update it to the API as you   can see from this and we have if I click on edit  I want to edit it open the dialogue and I click   on delete confirm this then after that we want to  move from the API and I return it and I display   this um default message that you have been using  this is to export it to PDF and you know already   because youve done earlier on if the test is equal  to this do that if it's equal to this then also do   that now let's have a look with the UI so with  the UI you're going to have a state you're going   to create a variable to hold a state here which  going to be a uh Boolean through or fals to show   and hide over time so for now we haven't created  that okay you're going to be a container and here   can see we have manage employee over times and you  can see this is just a tool the same thing that we   did from the SF grd the same thing and we need to  specify the various columns in here as you can see   let me pull this so when you have a look at the  first one you can just copy and paste and now we   can just move on with this okay then you have  a two bar as you know and that's going to have   access to the print the Excel export and the PDF  export and the search as well there's a field name   is an employee ID you want to have the the type  name and also you want to have the start date end   date the number of days in here actually going to  have the edit click and then the delete click as   well okay so if I click on edit it means I want to  edit if I click on delete I want to delete it and   it has implementation down here edit is going to  open a dialogue and now delete is delete is going   to give you an an option now you you or confirm  it then you want to delete it okay so here when   we are done let's save this go to the hom page and  now in here we need to add the overtime page so   overtime page and that is all so we have this set  let's save this so you've seen what you've done   you're going to do same for the Sansing pages and  we're going to do the same for the vacation Pages   as well so let's go to the employee pages and  now in here we have we're going to work on the   sanction and the vacation as well so here from  the sanction you need to make a reference of the   company that you're going to create and Al create  an instance of this and that's what we're going to   assign the employee ID to it after that from that  compony that you're going to create there's going   to be a method known as open dialogue as you know  already we close the contest menu which has been   opened for us to select this sanction okay now  once you have this you can now save this let's   go to the page and now from the import we need  to undo this we have sent we have vation these   are the two pages that we need to create now  let's copy this so sanction Pages let's go to   the solution then from the other Pages we're going  to also right click add a new folder to this that   this is going to be um sanction Pages let's also  create one for the other pages that's for vacation   pages so right click on this add a new folder  for this and this is going to be vacation pages okay now for the sanction we're going to create  a dialogue for that s so create a component and   I'm going to be um sanction dialogue so for  this dialogue this what you need to do it is   the same thing that you've done earlier on let  me just close this then open it again so you can   see it's just a SF dialogue and you're going to  have an IT model okay and you know here we have   an employee ID we have an occurring date then we  have punishment date and the punishment itself   as a in test area then we have the type select  type for this um sanction type then you know for   update and also for adding of new um type as  can see from here we can just make a new type   in here by selecting this and now if we updating  this this going to hold on the the default or the   selected one okay now when you go to the source or  the code itself we have the the three parameters   in here for the object itself and now we have a  list of types then we have an event call back to   return it to the parent to save it and see we  doing the same thing check when the ID is less   than equal to zero it means type is not selected  in case it is not then invoke it open dialogue   here show is and I'll close it is show to force  and I'll um do that now here on value clicked   that is if I click on if I want to select from  the drop down we want to assign the ID here to   the object of the value coming from this we  convert it into string and as you know this   already that's what we are doing okay so this is  the uh sanction dialogue we need to also create   the sanction type dialogue and this also going  to handle for adding of sanction types only so   we can get them displayed as a list in here so  from the Sansing Pages let's also add another   component and this is going to be the sanction  type dialogue what is going to do it just an SF   dialogue it has the Modo type of what stion type  it is bound to only an input test box only one as   a stion type name then when it come down here  you can see we have two parameters event call   back and theion type as an instant and now  in here we are invoking as soon as we click   on Save which coming from this edit form save we  are invoking this to in here and we check if it   is not now meaning user has provided the data  then we call this end point not the end point   we invoke it and now this is going to be change  the title as well so you can see this also very   simple simple as well okay now let's create the  various pages to display the the list that we   have for the sanction and also the the sanction  type so for the sanction type page we can just   add it to the same folder for the sanction and  now in here sanction type page so it is just a   table that we are displaying and now we going  to set State you show sanction type if this   is set to true meaning you want to display this  open dialog is the same thing as you know you're   going to open dialog to add a new one we have ID  type and our action so we can update and delete   and that's exactly what we are doing in here  let me save this let me close this and open it again okay and now here we have an edit and  I'll delete okay so we looking through this   types as you know and now when you come down  here we having this S Type dialogue in here   and make a reference to this we have the save in  here you have the S type that we need to provide   that is for the dialogue now down here we have  the dialogue instance created so we can have   access to the method in this component okay so  when the page initializes get all types and now   this is the type that is getting from an API sing  types so you can display it in the drop down list   not the drop down list you can display it inside  this table okay because this is the type that you   have created now if I click on save you want  to actually save this you check if the ID is   greater than zero it means update and now here add  it to the new database add it to the new table and   if this is Success then CLE the container get all  types again and I'll set the title to add if edit   is Click then change the title and also display  the dialogue if delete is Click confirm and as   you know it is your same then delete it return  call this method to display the response using   the dialog service from SIM fusion and now that is  it now let's have a look the next one that's going   to be the sanction page itself which is going to  have access to the the data grid and going to also   support print and also um EXC Sport and PDF as  well so here we're going to add this here so add   a new component to this and that's going to be a  sanction page here so we're going to have stion page to this folder so this is going to be S page  and now we are using this SF grid as you can see   from this let me close this and open this again so  using this SF grid which have the same tool that   we specified earlier on I hope you know what we  doing here just all you need to do here is provide   exension as a data source and then you need to  specify the properties for each of these okay   and that is it that's all thing that we doing for  this we make you can edit and it is the same okay   so we call this sing dialogue so as soon as we  click on edit this s dialog can pop up we create   a reference then you provide the sanction types  in here so for for us to get the sanction types   you know we have to call an API endpoint and that  exactly what we are doing here so call the stion   type in here from an API end point then return it  get sessions also from the same API in point and   also return it as well okay we create an instance  of this sing dialogue then you you can have access   to um submitted in this like open dialogue because  you want to open dialogue from this Sans dialog so   we can open the dialog in here then if I click  on save you know the payload that is coming out   from the the dialogue we call an API as an update  because the page is going to actually help us to   only update we add it from the employee page then  we update it from the same or from its own page   okay then we do that and now when I if I click on  edit we do same delay to we also go going to um   do same in here and I believe you know what you're  doing with this isn't it because we've been doing   it a whole couple of times so we know what exactly  what it's going to do we have the same thing xort   and our PDF export we have it set in here as well  okay now once you done with this we go to the   homepage and now once you have this doctor Page  overtime page we have to add this sanction page two and now here we have to add a s typ page okay so let's save this now let's go  to the employee page so when you go to this   employee page where is it employee employee  employee let's let's have a look so that's   the employee page now here we have the S  dialogue that we need to make a reference   here so where can we make the reference we can  put it down here where we have this code this   side we have to put the reference have to make  that reference in there so let's see how to add that so for that we need to specify the Sans  dialogue in there maybe it is too long let me   minimize it so we have this Sans dialogue and  you creating a reference of this we have this   item mod assension and now the type that is the  list that we need you know also providing the   list in here then when it is saved is clicked  you want to handle the save in here to this   employee list and let me actually leave a space  between and that's exactly what we've done here   so you can see if I click on sanction dialogue  what is it this is the overtime save over time   and that the sanction dialogue so you can  see we have it set in here then there's an   add stion click from the context menu we open  it and as soon as I click on Save what should   happen you want to happen you want to handle the  save option in here right so let's have it done here so here we can just insert into database  you know we are calling this database from this   s Service endpoint then we have to call  the respon to display the message to the   user and that is all you because see this  is a payload that is coming from the invoke   method in here from this dialogue okay so  we have it set in here and that is all we   close your dialog when we are done all right  so that is for Save the next one here is in   the vacation so we have to create vacation  vacation page then vacation um dialogue you   need to create vacation type dialogue and the  vacation type page then we call it a day all   right so let's also handle that as well but I  wonder why this has the same Red Line maybe we   can just close this and let's try to open  it again and see if we have the same issue so yes so that is it we have it it is gone over  type it is gone then Sans is also gone so we have   this set up here okay so that a save sanction now  let's handle the next one vacation so we have this   and now if I click on c vacation what do I want  to do let you can actually add the method in here   then we go in there to create the component so  we have the vacation so say vacation here it is   going to come in as a pad of an item of vacation  then we set the employee ID we call the vacation   service inser then we display the response here  and I we clear the container in here okay so we   need to also create the component for this maybe  we can reference the component in here before we   try to um create it okay so let's see what we  can do let's reference the component so we're   going to add that one to this component and all  these are going to be the dialog as you can see   these are all dialogues which are going to pop  up as soon as we click on the contest menu now   in this we can have access to this we have  a vacation dialogue and making a reference   to this vacation dialog in here we have the  item model specified this vacation type and   now the handle that if I click on save so we  need to create this dialog here quick we go   to the same process we go to the vacation um  folder and we going to create the dialogue in there so that is this vacation dialogue we can um  create the component in here can just save this   close this component and I'll open the component  again okay so the same thing that we are doing   there is a dialogue that we creating we need the  employ ID we need the start date the number of   days and on the end date okay we need the type so  when you check this model the vacation model these   are the models that were specified or we created  earlier on in the first or the second video so we   have that and this is the type that we need to  also specified for update and also for adding   of new entry so we have it setting here what we  did here is to change the data source you know to   Vacation type and our vacation types as well okay  so that's all that we are doing very simple one it   is just SA same as we've done already and now we  have three parameter that we need to specify for   vacation types and also for item model and for  Save event as well we do same if everything is   working we invoke it to the um parent then open  and un close dialogue get a value of and assign   it to this anytime the drop down value changes  you want to assign to this vacation type ID okay   let's save this and the next thing that you need  to do here is you're going to create the vacation   type dialog itself so we can keep adding the type  itself then that type going to make a reference   or going to be referred into the vacation page um  or vacation dialog when creating the vacation for   a specific employee okay so we do that in here  and that's the vacation type dialogue it needs   only one property as a name okay and the type  here is the vacation type now if it is clicked   we want to invoke it in here to this vacation  type to save it to the parent and that exctly   what we are doing so when you check the vacation  page you're going to do that in there all right so   you need to provide vacation type to this as  a parameter and also going to handle this as   a parameter from the parent component all right  so that's what we are doing very simple one and   as usual you know this already now the next thing  we going to do here is we have the types already   so we need to create individual Pages for each  for the vacation page and also the vacation type   page we need to also do that all right so let's  create the vacation um dialog page and that's the   vacation um type dialog page which is going to  handle the list of the vacation types okay so in   here it is the same we have a table that you  can see from this now inside a table we have   this button as on click to add a new we have the  various table header as as you can see from here   then this is the type of list we are going to look  through and now set in here we also have this uh   TD as an edit click and also delete click which is  going to be handled down here okay so that's what   we doing the same thing now when we come to the  down here we have the dialog box which going to   be used as soon as I click on add new um type and  you know um we have properties such as we have to   get the reference of it we want to handle the save  type and also want to handle the vacation type as   well so this going to be an instance of vacation  TP that we're going to pass in there to hold the   value of the model for us in here we're going  to retrieve it and as you can see we call this   get types to get all the app type service and um  vacation types we open dialog in case I click on   add new then when save we want to check if it  is greater than zero that's an ID you want to   update it else you're going to add it you call  the service then we can now call it and use it   here the response here you check if it is through  we want to clear the container get all types again   then change the title to add and if it is edit  then um change the title and also set the item   object coming here as a pillow to what you have in  here the content and I going to set to the dialog   content or dialog component aside from that that's  a delete um delete here we're going to call an API   first you confirm call an API if it is true then  pass in the URL and it's going to delete it after   that get the whole types again and you're going to  have the current or updated content all right so   just going to display the message using the dialog  set from s fusion and then that is all okay so   the last one here is going to be the vacation  page and now this vacation page going to also   handle all the vacation list of an employee and  then in that you can um export PDF EXC so print   it out let's have a look on how to work on that  as well so we add a new component we name it as   vacation page and now we see we have this state  um container we having this show vacation if is   only through we want to display the following  content in here let me close this and open it again yeah so in here you can see we have an SF  grade with the same to specify as you seeing we   have it on top and in here it is the same thing  as we seen all we did here is to change the type   vcation change the the list data source and  also specifying the column types you see we   have vcation we have start date end date number of  days and we have the the edit click and also the   delate click so in case I want to to edit in case  I want to delete it I call this method and passing   the model in here when it come to down here we  have the D component displayed here such that   you can actually update it and you know we have  the SF grade instance created we have the vacation   dialog also instant created so we can have access  to the beted inside this dialog component we also   have the instance of this vacation model which has  an item model and that's what you are passing it   through this as a a value then also we have the  list of vacation to to display it and we have a   list of vacation types so that we can supply it  to the vacation dialogue so as soon as we can   see here we can make a select from um from this  okay so we get the types we get the vacation and   the two methods are going to work on that aside  from that here we open a dialogue in case I want   to add a new one in case you want to save it from  the dialogue then we're going to call this method   we um we're going to update it from data to the  database passing the vcation base URL and now   here from the response we can now set this item  to a new content if the the operation was access   okay that is for edit clicked then um open a  dialogue and I set this model to the current   item coming in delete item confirm the person um  that's confirmation message I want to do this if   yes then you want to delete it to the endpoint  then display the message get the vacation list   again so you can have all list in there and  I just going to display the message using the   alert all right so here we're going to convert  it to PDF and also an Excel um export okay so we   have this also done let's go to the homepage  and now um let's make a reference to this so   we have the overtime we have S and you're going  to have vacation location page we have this and   also when it come to the type you have vation  type as well type page so you can see all the   dialog boxes are found as a chart component  inside the various pages so that's why we did   not include them here you're going to call them  from that parent page all right so once you have   this let's see it seems everything is all right  when you go check the homepage let's see what you   can do from the employee page and now in here we  have this vacation um dialogue we have we've made   a reference here and that is the model coming  in here so this means when it come down here   we have to specify on top of the vacation we  have to handle that on here we have the save   Heth is the add over time clicked and as the save  over time we have ADD sanction click and the save   sanction clicked there's an advocation so on top  here we need to also specify the reference of this component so on top here let's specify  the property in here so see we have the   component we have the instance and we have  the the instance of the vacation model and   here we can call check if now as well all  right so everything is is in order and I   think everything is okay so we have each has  the ad and also it has a save occas Handler   as well all right so once you have this uh we  can check let's go to the state container that   is from the All State and in there we going  to add you see here it's going to display   department is going to display the branch and  accordingly it's going to display them as you   can see from here we want to actually also add  the the supplementary tables vacation vacation   type and also all the other various um component  that we have created you want to add them here as well all right so let's see this is going to be  the doct test table that's going to be the health   one you can see we set all to um Force then here  we are going to set only the show Health through   that's for the doctor this for overtime and in  that we also going to do same so what time is   show this you set the rest force and we're going  to have this overtime type as well so we also   have to show the overtime type and as you can see  overtime type is set to through we set the rest   to for then the next one is the San table so for  the sanction we also going to do same with it we   set the same thing to through and the rest is set  to force now the S type two we're going to also um   implement the same thing in there so according to  each we going to set um to true we first set all   to forse then we set the specific the current  one to through that's what we want now when we   have the we have vacation and at the vacation  type also um left that we need to actually add   so vacation and a vacation type that's actually  we have to add both here okay now the next here   is we that is a reset we have to add all the  property that we've created we have to all them   I have to add all of them and we have to set them  to force um defaultly so they all set to force as   soon as you call this method going to set all to  force then it's going to stand up stand this up   okay yes so all going to be Li down they going to  stand stand only this up that's what we're going   to do okay so we have this mod this are container  State container created and injected and now we we   are good to go okay I think everything is set is  that so okay let's give it a try let's try to run   this application and then let's see what else  we can do but first of all I want us to build   this and let's see if oh we have not let's build  it for then perform database migration because   we have some migration to be made so we can um  make modification based on the tables that we modified okay so we have an issue here sanction  type does not contain sanction type ID so let's   it is coming from the sanction dialogue let's  have a look um okay so if item S Type ID so   let's see stion type ID now this s what does  it contain you see we have this employee ID you   have S Type okay so we need to also add it means  this an an error that we need to fix it up let's   check the sanction type now you have the list of  sanctions so we want to go to the sanctions here   for the relationship that is a Min to one you  must have S Type ID and this is going to be um sanction type ID yes what else again let's see I think um that is all  now let's try to build it again okay so five suceeded everything is working   now let's perform the migration  so I'm going to clear then add migration but we make sure that the server is  being selected as a default so let's select   that and a server Library selected  so add- migration then you say update or yeah so is done let's update  the database so update Das database okay so they is still  running now let's wait and see okay so this is done all the changes  have been made and now let's see so let's   try to check it up you have S ID what time  okay all removed yeah that's fine so let's   now run the server so we set a client to  the startup project let's run the server here then we run the the client so let's run the Cent so whilst we  running it let's see we did not specify   the drop downs that is a Content here in  the nav bar so when you check the layout   the um nav menu it doesn't have  this right so let's let's include this this nav so that we can have access to um  the the the types vacation types to add vacation   types also to add the doctor not the doctor  and not part to have vacation to add sent and   the overtime so we have to add that now let's  wait and see it first then we work on that all   right so we have an eror here let's check it up  and see so there's no registered service for the   type um service contract interface okay so let's  I think I have I've seen it okay let's go to the   program CS file from the the client okay now  let's check it up and see do we have a country   City Town employee no we don't have any of them  so we have to add this so let's add the overtime   with the type vacation type sanction type and  the doctor I think this is what we need to do   also let's quickly check the the navigation that  is the nav bar so solution there's a nav bar in here so for this nav bar we are going  to Let's commment this maybe we don't   want to include this here we can  do it somewhere else we have just   the home button displayed in  here and at this we have to include let's say this we have to include that  authorize your authorization and I think you can   have that link in here let's go to the pro not  the program let's go to the import and in here   we can include this so it is Microsoft call do  authorization so that is this one and it's going   to make this um KN is going to make this work okay  so we have the home we have the button on top and   that's going to be the home button okay on top  in there now here it is for only admin that is   for the user so Administration you know is to  manage user so that's so user can change the   roow can delete the account okay it is for only  user this means that only user can have access   to this and that's what we did in the I think  previous video what we're going to do here is   to add just an authorize View and I'll include  the row here and also that is it so with this   we have the margin top and that is exactly the  same okay just that when you come here you can   see from this down we have this also included  these are the count we done this already we   have we just make a copy of this then we change  this to overtime click sanction type and also the   vacation type okay so I added this three list  in here then I added the method here and when   you check down here we have the same method and  that's what we are invoking from this aate the   state container that we created so could see aate  vacation type click as you specified earlier on   then also we invoke any of them as well okay so we  can hide and show um them based on which one that   we click all right so that is it that we need to  also do now let's run this application and let's   check it out okay so the app is now ready now let  me open h y l let's see so that's Administration   so see we have the home button here we have  Administration and then in here we can have   access to the users and here it is for only the  admin can do that let's see so admin can add and   now change the row and also for the management you  see we have all these in here for the Department   we have for locations and so we have the types W  so check here you have over time type and Etc so   can see um we don't want to overtime section and  Etc let's remove all the types or we can shift   this to um this a little bit we can actually do  that modification in there right so in here what   we have that it's coming from which one there is  an admin and from that we have this stop margin   and um let's see which one that we are talking  about this is enough okay and if I click on this   this page gets so here it is left is let's make  it as two okay so when to save this let's this again all right so the app is ready and as  you can see from this we have everything   here now with this we have this users  and we can now manage an add us because   we an administrator let's log out here  now let's try to create an account and see so maybe this what you're going to do next  uh maybe later on this feature that we can add   you're going to have only the login so we're  going to have a default login and um maybe you   have to create an account but before you create  an account even when you create an account the   admin must authenticate you before you can have  access to the login all right so it is not like   today that I create an account here and I can  just log in no we don't do that maybe we can   modify that the near future but for now let's  stick to this so this is just a user or just a   manager and I'm going to say this is going to  be user one we have the password one 2 3 click   on register okay so user one two I think you  need five more than five so account created   now let's log in user one okay so we are loged  successfully and it's going to open this for us   now take note the first one since we was an admin  H I was able to see the user you can see from you   have only the home and the management right have  you seen so where is it where is Administration   it is off because I'm not an administrator so I  cannot have access with that what I can do here   is I can just manage this on in here I can  go for the employee that's what is showing   defaultly I can check the vacation um type and  that's vacation type for now nothing is added we   can s add the new one so vacation type let's  add maybe this going to be I don't know what   kind of type down is a f f and I'm going to  sa it's going to be added in here but you see   has added twice let's see click on delete  this completed add the next one if I type   in half what going to happen okay so it has  added as well we have half in here now when   you go to sanctions to let's say maybe do  we have premium stion I want to say premium right okay so I have this um well so maybe I can  decide to delay this one in of this premium maybe   I can decide to sanction type is um you can  just say this up solute we can just um save   that and that has been replaced there when you  go to the vacation type we have overtime okay   this is overtime type right so we have full  night and half night right so vacation type   you have this absolute and the vacation type  the S Type vacation we can have uh there is   a holiday so this is holiday day that you can  go in for for vacation or this is your off day okay so for upd two um we can actually handle that  since we press on the enter key that's the reason   why we have double of the so we have these ones  and now let's see if I decide to if I click on   this vacation I have to get the vacation we did  not bu that so we have to actually work on that   as well from this table and maybe the count of  employee that you have you can actually display   them over here as well right but here if I click  on this check if I click on this I'm going to have   this popup I can just click on view and I can view  this click on okay and I can click on this again   can click on edit and I can edit every stuff in  here as you can see I can edit this and I'll save   it again I can also close this now if I click on  the same thing again I can go to ad vacation I   have this form that can add a vacation to it you  can see start date and as soon as I pass in the   start Maybe 2024 take note you can see default  I'm going to have the number count in here right   so for this end date okay so I'm going to add the  number of days that you want to for the vacation   if I say 10 days it's going automatically be  added to this if I click on this we see have   the 10 days added so end dat has automatically  calculated for you select the type and currently   we have no type is is that so maybe we've added  a time but I need to refresh this up let's see so it has been refreshed unless with data is  loaded click on this again so add vacation   now click on this vacation type no record  but are you not have vacation type in here   management vacation type you have two types  in here right vacation types and if I click   on that drop down a call is not made meaning  that we did not call this from the page loads   we have to check it up and and make a reference  to it in case um here we could not find that   let's see advocation Type S Type okay it is not  there let's have a look at the next one click   on this add over time and I select this we do  not have okay fine it means you haven't called   them let's say add sanctions type and also it  is not available so let's have a look on that   quickly and see what we can do to complete this  project so come to the EMP page and now in here   we have to re see we have all of them instance  created as a list when to check this from the   ad Health from this um over Ty you see we have  the list created here but we did not call an API   to handle that so maybe on top here before  we have this ad add issue we can um put it here so we see that with this we are calling an  endpoint to assign the list in here okay so this   is the first one that we call for the sanctions we  have overtime and we have the vacation and then we   have to call all this method here inside the the  page load event so when the page um loads or when   the page initializes we want to call these three  methods here let's check the initialized async   method and that is this one so when the page loads  we have to call them here so we can have access   to the list of these various um um Properties or  the models that we have created let's refresh this   page and see all right so this let's Che it up so  if I click on this and if I click on ad vacation   I'm going to have the form here so this is a  2023 let's say this is 2024 this year and I want   to spend 10 days so maybe 10 days will be okay  I'm I'm going to have it set now the type here I   have you can see how this the holiday this the up  day so this is holiday click on Save and now this   is going to save to the data base all right so we  have this let's also add one to the overtime maybe   you work over time is this your ID and at the date  here is 2024 2024 and I could see so choose the   end date so um this4 and now by instead of this  day it is around um 10th okay so 270 days or maybe   this could be 01 and this could be 10th in here we  have 9 days okay so select the type this is full   time so full night click on Save and then this  has now saved now click on go to the next one and   add Health maybe have you visited the hospital  recently yes what is the date 2024 or you can   click on this to S the date as well and now what  the the medical condition maybe sick and let's   say maybe rest so that rest click on Save and now  this also saved all right so the last one here is   what ask sanction so what is the sanction date you  have the occurring date is 2024 January maybe um   punishment date actually is going to be 2024 to  and this time is going to be um going to come to   work on February then the punishment date maybe  um um less well let me say fight then the type   is going to be an absolute so click on Save and  you can see yes saved all right now but you are   not seeing anything here if I click on employee  vacation over time and doctor I must access to   this and I must even have the count of the various  um employees which have been added to um this all   right now let's see let's see how to handle this  as well so let's go to the list go to a source   code and now where you have the other Pages the  other Pages folder you can see that we have table   Banner we want to handle this in here so in here  when the page loads we want to let's have the code session okay so from the code section  we want to have a list now within the   list when the page loads we want to  subscribe to this okay so you want   to subscribe then call this default method  what is it going to do this method is going to load all this you see we get all the data in  here then we can now count them and now display   in there very simple so anytime they pay you  loads we're going to call this once and it's   going to work also the next one here is we want  to navigate between hide and show so with that   we have to implement this so if health check is  called then I want to show this and I'm just going   to set this to through as you did in the state  container okay when the page is um dying up we   have to um un subscribe to this action that we've  done with the dispose method okay so in here the   next thing we're going to do is we have to specif  y the count of these items inside this so you know   we going to use from when you check the department  this is a department so with this department   we are going to add then get a account of the  department and I'll assign it to this so maybe   let me put your next line then in here you're  going to have it as a badge then department.   count very simple one we're going to do same thing  to the sanctions too you want to cut the sanctions   if as the page loads up you want to count Ag and  our display Also let's have the health the health count so that is a health SC here okay so  inste of the doctor maybe you can change   this to health then let's add the count here  also for the overtime to let's use same this   an overtime we get the count and our display  then we can also have access to the vacation as well okay so the vacation count now the last  one here is going to be the employee if I want   to count the employee let's count it and display  it in a badge form as youve done for the address   okay now if I click let's have left Y is to The  Click so that's the vacation if this vacation is   clicked I want to let's use this um the card if  I click on this I want to call this method if I   click on overtime I want to display the overtime  um component okay and I if I click on health I   want to display the health comp component  so I can have the list of employees which   have been added to the health factor and also  the next one is the sanctions I want to also   open the sanctions table and now within this  table I can make a search I can also print it   out export to Excel and now PDF as well okay  so that is this department and for employees   we not going to do that because you have the  table Linked In already let's refresh this and see okay so when they appload this is what we  have in here you see we have employee one day   T that's what you see over here vacation over  time health and everything we have 111 right   if I click on overtime it's going to display  manage employees vacation that's vacation and   in that you see I can export to excel to PDF and  I can print it out let's I can also make an edit   so this a start and end a number of date I can  also make an edit in here and it's also support   pagination as you can see in here as as well  okay now if I click on Excel export you can   see exported to X as you can see export three if  I click on PDF it is the same to PDF as you can   see to PDF and if I click on print to let's see I  can also print this out I hope you can see that I   can also um U make this print available using this  infusion um data grid this is available and easy   to implement as well okay so it is loading the  preview maybe we can wait for this preview to   be loaded then we can print this out as well so  um this is uh this is available and as you can   see we have um this set okay so when you check  this employee we did not include the print and   now the the the Excel export and Etc right we  did not so we can do that in a in a simple way   as you've done to the others we can also do that  let's have a look on how to work on that so on   top of the employee page let's navigate to this  employee page now where we have this on top of   the SF grid maybe on top here we can specify  the the tools right so maybe let's specify   the tools here set EXL export PDF export and our  print and in that we need to specify pagination   allow sorting and also all the a whole lot right  so let's specify these properties here as well okay so maybe I'll put this in the next line  and that is it so once you have this set you   see we allowing um XL export to through  allow PDF export also through now when   you come down here we have to make a  reference to this SF grid so go down   to the code section and on here let's have  this SF grid where we passing the employee   model and in that we can specify the method  here for the print and also the Excel export   and Etc you can do that very simple way so  down there let's go and do that magic in here and maybe you can put it here okay so we have the this set and that is  all so let's save this too and now let's run   this again and now let's see that we're going  to have these features on top of our self data grid all right so you can see we have this ex uh  Excel export PDF and also print and it's the same   thing as you've seen from the vacation uh you  can also make the same print from the overtime   too you can also do same right from the health we  have also same and from the sanctions to we have   the same you can make a search from here pation  is also available and as you can see you can do   any of these as well so that's what we need  to um do for this and I think this project is   scalable meaning you can add more can add more  features and it is also um you can modify this   okay it's opened for modification so only that  you can grab the source code you can actually   go through it and also modify to see what you  want but this is what we've built so far for   this uh video and for this project all right so  that is it thank you so much for watching this   if you want to get a source Cod check the video  description going to cat you up in the next video

Channel: Netcode-Hub

Views: 195,083

Keywords: employee, management, system, building, database, models, web assembly, .net 8, blazor, web, api, .NET 8, Blazor WebAssembly, API, Database Models, Employee Management System., Employee Management System, Create, Develop, Design, jwt, JWT, authentication, role-base, authorization, custom auth, Blazor, EmployeeManagement, WebAssembly, dashboard, user, login, logout, registration, relationships, one-to-many, many-to-one, generic, interface, implementation, controller, generic controller, pdf.excel, print data

Id: buSimkHFYmw

Length: 726min 5sec (43565 seconds)

Published: Tue Jan 09 2024