.NET 8 Blazor Wasm Employee Management System - CRUD on Users, Departments, Employees etc..- Part 6

hi everyone welcome back to net code help Channel  I am Frederick and I'm happy to have you here   today in this video we are going to continue  an appro that we started already and that is   a employee management system using Blazer assembly  as a client and our net web API as a back end for   data management so in this video we going to  have a look on how to perform crowd operations   on all the various aspect today we have a lot  of work to do you see that when you check what   we did in the previous video you can see we  have the department and maybe we might change   the there the title here we might change it you  can see we have general department we have VAR   Department we have Branch also we're going to  have um country City and now um town okay all   these are going to be cascaded and um this time  around this is what you going to do we going to   be creating our service and also we're going to  implement this service in the client and we're   going to perform all the crowd creation 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 what uh  the next to do here is from the country 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 VAR 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 also make that possible but for now  let's focus on the crowd for this and also see   when I check the administration we have this user  so the administrator can able to also change the   rule of a user to an admin or to any other Ro  as far as the RO 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 you can like this video by clicking  on the thumbs up icon beneath this video you   can also buy Cofe 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 and net Technologies talking about the   bazer S web assembly um. netp 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 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 the   previous video so if you haven't watch 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 previous 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 a generic  controller it has all the crowd operations um in   here aside from that we created our inter generic  interface and we created separate uh respository   which each inherit from that generic interface  now this is going to be the Ser site 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 going 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 I we can   be using them multiple time because know we have  a lot here to do Department country um um um what   else City Brands 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   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's a client Library as you can see   from here now you 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 indication is very important and want  to handle that specifically in application so we   not using the you're not inheriting from the same  Crow or the same interface 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 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 passing   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's is for   insert we have update and then we have delete by  ID now the next question is I believe you guys you   do understand understand this right but maybe we  asking yourself why are we passing base youur 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 want 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 now 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 you passing the  URL and that's all a 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 is 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 simp mation  and we have to create our own class which going   to be generic service implementation so from the  contract implementations right click here then   let's add a class there is going to be generic  service implementation it's going to her from   this generic type so in here what are we doing we  can just specify change this to public and this   has inher from the interface that we have created  I believe you can do that so pause the video and   undo do 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 peep definition you know  we have what public where is the public this is we   have public and then we have private this is the  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 HTTP instance okay from the public to it just  returns just an HTTP 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 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 earlier 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 check this out  I have all the video links B this so please check   it up 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 are using I keep saying in all   my videos since this C version 12 was released  so if You' watching my videos you know what I'm   talking about okay this is a primary con so we  using making tense easier and more friendly to   us okay so the first thing that we going for here  it is the delayed by ID or should we start from C   so create isn't it let's have a look so that's  going to be the inser we have our so this is   going to be create okay so this our 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 St local database right so you 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 to that's the person can have  access to this so if you just BMP into the app and   I want to insert data no it's not going to allow  you 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 ATP I do make errors   here HTTP right which going to append the token  to the header of it client now I'm going to say   HTTP client I'm going to say client okay so if I  say client you know what I mean HTP 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   the assess to this rout as ADD okay so all they  have 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 we 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 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 or so with the read or  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   Contin okay so this what we're having for the read  is very 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 a 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 end point  or each interface method so can see from here we   have the same thing and I want us to cat this cat  this cat this so results equal to this then let's   return results with no issue save that so that  is it you specify you 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 for 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 as task and see we have the same bease and  this the motor as can see it's coming from this   T it's an instance of this T object okay so when  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 count 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 adjacent ASN passing the  base URL and the item and that is all you read   the response and I return in the form of a general  response okay so as from having this what else CR   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 that I wanted to add so this is the first   method I wanted but it's going to be the last  one Del my ID is a tax of async and I be passing   the ID and you're using delete async not delete  adjacent async delete async read the response so results equal to then in here let's 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 so every model 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 then  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 or 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   it needs 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 the 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 specified 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 implementation both   need model so passing the same model in there  do not say general department or and passing   bran here no you're going to confuse the app okay  so 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 but you be asking yourself well we  have country we have City we have Town pause   the video and un 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  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   our it um repository or it implementation class  in the component the razor component so in this   we have to inject or we have 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 helpess 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 can  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 is clear let's  say 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 rout 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 UT Razer file now what   we 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 see 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  confuse you no I don't want to do that I want to   make it very simple and readable to you um here  we have you know we have this authentication   State provider and that's for this you know  it already we've done this in authentication   system this a navigation manag a default one  so you know this now in authentication Service   Au 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 say   okay so using popups we have this already  installed because that's what we've been   using for the add 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 we need to use that it is coming from   control period let's see this where it is coming  from from entities s from having this we need to   include our you the next one so you can see the  same interface we using it for all the models   that we've created almost six models Department  um this a GD d a branch for B CCT right country   City town we have all them used from the same  generic interface and we need a 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 this an employee okay so we  have this set and done now let's go to our   component 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 dial component isn't it so   here we have the DI component and there is  a page the DI is what you're going to use   for ADD and for update and I 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 you can see from the   demonstration we have a table banner and  at 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 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 to maybe 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 authentication page going to   be the let's say outside here because that's  going to be the first thing to you 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 I'll specify   all the headers in the program oh the 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 UT sorry let's save  this and there won't be any issue here we have   this already as you can see a service it's in  there we have the department too and now with   this we are going to also remove this except  the the interface for this I posable 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 we're   going to work on that soon you go to the homepage  and now here too you want to remove all this okay   so we have this set and I think all done so  to check our login and register we can also   remove this cuz we have this already so we want  to remove we 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 cont content  pages that department and homepage also done now   when you check the department 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 to um check this that from the client   and you have the application State you want  to rename this and then make it not only up   state but is 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 dur Department page where we use that all state   oh 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 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 you 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 a available for the entire  scope so I can say it's a scope option here   aside from that you 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 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 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 Country and Etc so you  want to make a dynamic movement um with the pages   okay so we have this for o Department we have  to also create one for the Department itself   then from this action method since the 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 for and I   show brand set you through invoke this so any  pages and subscribe to this going to R render   retrieve the current value and now use it based on  what you want the page to be done or to be done or   to do so we have this country and I this 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 start implementing   this you're going to love it trust me you keep  loving this project till be finished okay so you   have the city show City set to through and now  we want to reset all to force then we have our town so this is also the town we have it set  here show time to through and see the same   petition 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 user 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   at the last one here it is this that is a reset  or Department we want to set all the department   to first so let's say if I click on show Town show  user is already open I want to close it so we have   to call this method which defaultly closes all  the method then when it come here show you right   the first method I show user say through then only  this will be will be shown if I click on this show   user is also through 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 Razer too so go to   this import now let's also inject the state here  so we can be using it um all over in our component   or the application so 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 rendered and I'll get the current value  and I'll use it very simple um that is what it is doing we spent the 4 minutes now take some break  and I'll come back I give you 5 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  we have the page and the dialogue the is we going   to use to add and 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 other 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 gen department so let's add   it here and it is passing returning this general  department so anytime that we 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 update   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 or the when this page is  rented again the second time whereby the ID of   the model 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 general 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 it say is   not a valid giv contest your department let me  make this as maybe small G and let's see yeah   so say 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 we open this dialog  box it's 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 one thing left that  we can do from the Department dialogue from here   once we saving we can have this open dialogue  you see we have this open dialog and aside from   that you must have a method to also change the  title so we can be using this reference method   to change the title call U method in the chart  component we passing the title and that's 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 add title you   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 from   this page you can see we have this inheriting  from the Disposable and now it is Che if show   Department um is through then it's going to show  this okay we have our button and this this going   to be the ad as you can see from ad Department s  from that we have this um there 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 body you you 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 the department itself so department   and this is going to be um general department  right so general 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 all 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 changed often so we have   to set this title in here so we can keep changing  this default is also add so add they 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 disposing we want to quickly um unscribe  or or revert the proess before it dies up so we   have this and we have to create a department for  this okay so you 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 say Department must Beal general department  okay so never confuse 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 the list so I can see a live event  is a red 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 await 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 going to render this by then get Department   might have finished getting all the department so  we can show aside from that in here we're going to   have this this the simple method that's return  get Department in here and I'll check this 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 way 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 I this also use as a post   async or get async to the API to this specific  route and I get a data and I'll give it to us   this very simple thing that t doing here isn't it  so get department and there is a method but the   question is why is there still having red line  her weight operator and this must be an asent   T I believe you know that asent so I 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 is 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 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 end point from this end point okay from this  chart component save it is come in with what let's   see general department as in the model so here as  soon as it returns this S three you're doing in   here for that 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 coming with a general response so when   you create this method you have to retrieve that  isn't it let's see so we have to pass [Music] in   this general department and I we say this general  department okay so with this general department we   have to check we have this in here then this the  boan set 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 we passing the model that is   going in as a general department then you pass in  the base URL this is a success 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 and 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 taking  a flag and now a message it's going to return   a Boolean expression so if it is true 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 false   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 through meaning everything is  working we want to set the general 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 notely going to  also clear the container in there from this ad um   general department dialog component so let's see  then we also call a wait get gener Department this   also going to get us all the list of the general  department since we've added a new one then this   get gener Department you know what it's going to  do isn't it check here it is getting from the API   passing it the the base URL and then boom that is  it aside from that you want to change the title   to add so if I click on so this 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 finished saving defaultly change to 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 our chart component that   we have um initiated or initialized in here okay  so this is now working now let's have to work on   the let's work on the edit two 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 a 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 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 in here could see the general   department it is an instance of the dependent 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 childart 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  findun 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   I click on the server then thebag and start with  debugging let's start it first then we start the client okay so it is ready now as you can see  let me minimize this and let's start the the   client that's what which the client is what  we want not the server as well because Ser   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 that 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   this 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 we go to the 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 I want to use   it globally don't be any issue anymore  so in here we can let's past this here   save that go to the homepage and you can  see is s 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 all   right so we have we are 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  who 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 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 the new one isn't it so we add  this from the insert we pass the department and   now we get it let's go to the repository but  let's first run the interface no the API now   let's see from 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 you want to add so we adding department and what you  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 this's an it again let's see I can just  copy this click on execute and PR completed 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 doar component or the general   department Repository and this happening in the  server um repositories and under 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  catch it so let's have check if now so check   if n is equal to then we can now call this  name await so check name then pass in this   item. name not this item okay that item do name  now this is 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 now it's   going to be true butless you can do this if now  return true lse then return forse okay so that's   the same way but here for us to get a better  understanding maybe you can do like this this   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 states fix forat 10   okay simplify this we can make this very simple  with 10 item is now from this general department   going to check if the name is not equal to that  and in that we cannot return so here we can just   go ahead we can just grab this put it here we 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 debugging very   easy or easier for you than putting this whole  method in here okay so I wanton 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 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 Department if null return   okay so if this is false that's the right thing  the Val is not meaning is not found but in case   it is found it's going to be false right they  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 pass an it let's say 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 been added or something like   that we 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 you see this   a table you 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 this header and now let's specify our own   custom header 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 a header I'm  going to pass in this header as an ID ID is of   this the number ID and the general department and  our action so that you can add or you can edit it   in this the T body I'm going to have something  beautifully simple as this as well so from the   T 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 for  this you know isn't it then we have delete async   or delete click and also edit clicked 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 they 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 l 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 to pop up   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 Che the next one edit this and let's say uh  customer support save this save success you see   this add see add department check this one edit  this and see as update Department right so let's   say this is cleaning or don't you have clean in  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 we have  this done correctly we're going to copy and paste   this to to create all the D so after for 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 finish this on time now see it's still there   right so see we have this these are the ID these  are the numbers and that what we can see from here   but maybe this is 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 too and change the indicators   here this must be a pointer right back this it  must be a hand by a pointer we can 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 yeah Max height this is a cat header set  this Max height as a you can create as a style   that you can apply but I like using this inline  one so you set the height to 580 pel 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 is edit right   so this is edit and now on top here I'm going  to say this is um add or update so two in one   this edit and then this is delete so Crow is done  this is 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 this  method is coming with the general department as   you can see from here then we using the dark that  confirm a SN I want to delete you passing the name   confirm delete it's a title then if it is false  return but in casee it is through want 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 we 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 principles  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 I implement it okay now let's say so we   have this method done and aside from that as soon  as you delete you want to qu called 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  you check this 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   bootstrap 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 you're going  to duplicate itself Now work on it very fast and   quick so let's see is not ready I expand 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 are you sure   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 that 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 it's working right 14 so I leave it up   to you delete the rest and now let's move on I  believe we did not delete all the it leave one   there because also Department okay so now we have  this we have to going 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 than here okay so changing ker the from normal pointer  from normal ker to pointer okay so that is it so   this completed now the next to do here is we  have to to work on this department now this   is General so for Department two let's close  all this so we going to use the same idea all   right so here I'm going to run like a rabbit as  I told you earlier on you want me to slow down   then for the video light light and so I can  slow down I'm running okay so um when it come to let me open this I no want to open this Li man  close it up so 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're  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 cascaded 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  T you know and now here that is this comes in   using the same fing drop down so we want to change  this on value change we passing General depart M   and here you want to specify the ID to this this  is going to be the string defaultly so converting   to integer using n. pass to pass it to integer  we have to create this drop down to have this CH   event act which passing a 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 parent component okay so once   you have this let's have the design very simple  one we using a dialog component is it dialog   yes that's a dialog s dialog component I have to  grab this so I can explain it up to you so let me   P 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 you  have SF drop down list this the same thing as we   copied from the first PR um general department so  I need not to explain this dialogue you know what   is going already but what I'm focusing here you  have the same title is this when you get to this   edit form we have Department as a model onsubmit  as saved and now from the Department I Department   name we have select general department there is  a there is a problem is it a problem that is a   task so we check if Department do Department it is  not now you want to display this but in case it is   now meaning that it is a 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 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 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 first man to get packages so in here we're  going to type in s Fusion blazer. dialogue   so you're going to have this this is  a dialogue now 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 in for that specific version so install this maybe we need to also install Button as well so simping Blazer buttons let's 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 soft 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 we want   to retrieve the general department name from the  department and we pass in department at the T   item the same thing for the T item in here and  I 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 all  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 SCE as so you see the the 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 onal change Val  change also handle the same thing the same meod   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  same save option the same Department here the   same general department so 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 1 2 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 so we're 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 two 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 all general 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 going to be used for for   no this is used for add or update they 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 get display if you   want to call this again then you have to call  this again all right but since you're calling   them the same type in the initialize so we can  just put the same here then maybe you can say   load default but for specific sake for to get  a better understanding what it does that is the   reason why I did this you can modify the way to  seed how you want it okay then we have this add   button click you want to change the title display  the dialogue and now this 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're going   to say this patter equal to null and I'm set  change the title if I click on edit this the   pattern that we have we have created initializing  from the SE section this section section okay   so um I sign it to the department as an incoming  payload and um open another box to delete update   and that is all to delete this same confirm  and now call the Department service passing   the department based URL and our department ID  display the response get the whole department   again and this is a 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 H page can be found in the pages you  can see that's the end here um homepage home page   that is this one right so there's an ADD we  have Department this a homepage now this is   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 going  to show on the screen but how can we hide and   show when you check the department um page we 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 explanation won't be too much here   see we using 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 a account to initialize  as a counter we get a department here 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 you made a reference in the   general department so one to minute a minute  to one so one dep general department is 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 mini 21 we did that earlier   on and that's what we're 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 definely 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 no that the department repository so in here when you go to this get  all you can 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 dot include   general department maybe asking yourself why am I  using as snow tracking if you check the community   I have posted um this 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 database 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 performance we have to   set as snow Sten 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 these 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 findun the server again so  save everything make sure the server is closed   and also the instances created is also Clos  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've   remember one thing we not going to see the display  because default is going to set you off unless you   click on the button so to to do that let's handle  this first let's go to the nav menu the nav 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 lay  out 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 move all this from  the top here we go to the importation 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 be doing let's see we did this   in the last video so you know this must be um  when this is clicked so this going to be an all state so do general department clicked  that is if I click on general department   now where from the 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 just go bind it to the department click so maybe Department click also has to work  from here and that's a 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 let's have this line as a line separator  to 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 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 say this is going to be the town okay  so Town clicked you know you know we are using   the bootstrap icons so when you check the icons  then use the one that suit 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 andless administrator  then we show everything okay so this what we   have now 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 I'm 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 check down here  let's have a look with the user so here we   have this counter you can remove this counter and  now that 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  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 all 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 Administration then here let's say   management so with this some of them will be  available to users that they admin assign to   work with it or to work with them we can  have management then in the inside the   management you have this general department  you 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 one is up let's see if the server is  already on no it is not we have to run a server again so the semi 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 the cyclic um event or detected let's  go 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 C we're going to  be using it all over copy this let's go to the   city2 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 token and sanctioned  it doesn't have this sanction type has a list   in here so we need to um include you go to town  it has a list of employees so we have to include then user rows doesn't vacation doesn't and  vacation type does so we have to include it   here so if we actually check all this  you can see that you have all this J   ignore attribute specify on the list type  so we can skip this cyclic um error where   go like a Runabout okay it Loops to get  34 so let's include system. test. Json   we have to add that let's check the address s  overtime type has it up so this overtime type   it has only ID and our name we did not then  over time so here when you check this even   there there must be you know from St 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  gener 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 you see we have the   general department in here and we have the  department we have only one department for   now and that a department and you see it has  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's an   ID of two here okay so we have it to work now  let's run this C to and see what're going to have so the app is ready now let's go to  departments and we have you see we have   all this so this is general department that  depart 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 many of them so still   going to work want 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 of five Marin left of five   isn't it and each is having I think this is a  list right so there 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 I have this   us to okay so if I click on General de 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 a 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 depart  that we created if I click on edit this let's see   I pop up and you can see we have edit the name  select department so let's say this 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 would be an it so choose   an it now I'm going to change from this click on  Save and now yes it's 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 we 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 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   app that's what we expect so let's um include  let's use the default one that is this one you   make a search 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 little click on the  management department and now in here let's   make the edit and see so let 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 a problem  and maybe you have to use a manual way of doing   it okay so let's add one more or let's delete  this to are you want to do this yes I want to   do that so click on okay and I 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 is 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 this 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 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 side 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 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 do 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 is supposed to be a  branch right so let's say this is a branch so we check Branch Branch this going to  be branch and Branch Department ID is equal to   item. 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 is 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 re   component and then this is going to be Branch  dialogue now with the branch dialogue you know   what it means you'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 and you have 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   invoca in here passing the object then title  change title and you're going to have this so   Branch id. Department ID is equal to you 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   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 L to Branch if  it is not now get a department name from this   then in here display this you know the same thing  button and now when you come down here we have it   very simple one and it's the same okay so no need  to explain again because I've expended 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 our Branch page we have 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 uh 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 going to display to the user   and it's going to display anytime the user want  to add Branch we have we have get brand gate   department and you know get brand gate Department  as you see we passing the department based URL   Branch based URL from the constant class which  is static we have our 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 C it passing the branch based URL else   you're going to add it so here is an update this  is ADD inser passing the Bas URL and now if it is   Success click the container CH 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 pass in this branch set a branch   new and you're going to automatically WR overwrite  that okay edit set a branch this one and now open   the dialog 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 I we  can p it here very simple and 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 STS you know we've  done it already and I there's a button   as you know is the same thing that you know  we have this height and over overflow scroll   and Etc you have the column header these  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 this opening  here oh do you know the reason why we 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   home page and we did not include this so go to the  homepage and check it out 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 I'm going to add Branch here and   this branch is going to be uh which branch which  branch which branch okay so Comm Branch well this   is a Comm Branch so here we have S hand link you  see we have these are the branches and this this   is Sal Branch this Sal department so this are the  department that we have right so which department   does this Branch fall is it home cleaning is it  server handling okay so this Branch say from s   handling then save this so saved but you see we  have an issue here have a look it is saying that   object reference not set to an instance from this  um brand page L 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 so this   is going to be in AAR branch and this is going  to be for this department uh 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 you select Branch so this is 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 and 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 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 s department and maybe I'm sure  when we check the other ones you must have the   same issue so Department of 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 cascaded style   so the first one 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 nameit 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 dialogue 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   event 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 SE 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 save we have country ID country name the   same and there's a button so if if I click on it  you get this method invoked fine save this let's   let's create this country page where is 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 now 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 in that country page we can have our   style and you know the style what we be doing so  the same K style maybe you can put this at the CSS   that's the app. CSS then you 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 you can reference   to this as country dialogue when it is saved and  the country um object we have the same thing in   here this is a list of country that we get as  soon as we add we get the count 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 call back and it come 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 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 fit up delete is clicked   then confirm as the person if for return if  in case it is through call the service and   I'm 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 we have  the input 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 you have country repo we  have City okay there is a country repo and   let's see from the Save delete we have um get  all we are not including anything from get by   ID to this same insert to this same in here  and now for update we don't need to do same   we don't need to do same right you're doing same  as well okay so that is this 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 not having the UI the actually put in  the UI oh there is no UI let's check it out   so from the country country Department oh the  country Department country page country dialog   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 to 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 you can we looking through this   country list and that is what we are doing you  can see the same delate and yeah that's all so I   I didn't 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   homage in here oh okay so this is a dialogue  it's supposed to be the page and know you've   done this you knew what the right thing so you've  done it I did not see the dialogues are the chart   component these are the parents all right now  this parent also become a child to this homepage   so it's a descendant style 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 dialog and the country dial 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 are the  country 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 yeah so um let's see and I love the  programs there too 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 bom have to  type United States right and let's see so these   are the countries that we have what else okay so  W wo wo I want the the the short ones Kenya is   okay for me very simple I know too is here what is  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 delete maybe too so 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 in India so save that completed   and let's see click on that I have it right but  it's not how you spell it go back save H that is   it so there it's working we can do everything  now let's go to the next one that is the city   I C on City what should happen let's have a look  before that let's go to the repo City repository   and now while we have this repo let's go to  the get all here await City do two l dot as no tracking dot include so I want to  include country so C Master two   count now let's go to this insert we have it  done update so this supposed to be um City now with this city we first check if it is  n in case it is not city. name equal 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 we have to close this   have to terminate it because you have to run it  again when we 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 CLE all these okay so solution   we go to the client Pages 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 see list of country  as countries then count 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 US 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 going to there for the edit and this for a   new adding and you see we have this item as  count country the value of ID and address is   name and aside from that when you check here  we have it as soon as I click on any of the   country I 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 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 quote session so it is the same we have this title um  we have the reference object reference   made component reference we have cities  here countries to populate and return as   a parameter initialize get you meet City  countries when is ADD you know pass in the   country based URL and now from City service  pass in 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 C 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 you want to add  passing the city from the city service passing   the city based URL then save and I return  with access get C clear the container and   now display title simple one if edit is Click  then edit this assign it to the city then open   dialog delete confirm then get from delete  from the API from there the end point that   we have then after 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 us to try this yeah   I think so let's see if there's no issue with  this so right click on this server let's run this let's run the clan two so you know we have a city page it means  we did not add let's say 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 where I know you can do that pause the   video and try and see if you can include a 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 looking 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 aquire I hope you heard of it   right this is Ghana here okay click on okay and  that is ADD you can see I can also add another   one so let's say I want to choose the same Ghana  we have another name as Massi so save this now we   have when you go to Nigeria I believe we have  Lagos is it logos or Lagos 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 say St well   qu a city okay so um that is this one Nigeria  save that I you know from n New York and this   coming from maybe United States and I go to half  Nairobi Nairobi or so is that so Nairobi maybe   this coming from Kenya H okay and maybe you  can have Pari from France so par right here   at least each has one okay so India okay so  what of India maybe I you know what of Mumbai 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 delet 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 T repo now   from T repo you go to the to list and now with  the two list. towns dot 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 town copy this copy and paste so town. name  now town. City ID is equal to item do City ID save it that's all that we need to do  so sorry Department not found this going   to be sorry St not found and I can say  that sty already added okay or you can   even include a name so maybe if you want to  include a name let me show you one then 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 is working we cannot close this although   we haven't tested it but it is working working  trust me if I say it it's working trust me it's   working I know you know that it's 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  you're going to create the town dialogue and   also the town um component okay so 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 section then you know the same thing  Town list of cities we have event call   back invoca in here open dialogue and  now um get the 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 set the city for this you know the  item is City and 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  Town 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 you have shown show town from the  up State then we have ADD button clicked   we have the same header we looping 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 we   need to provide as the parameters now  let's come down here now 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 town is over here we create an  instance our L container is here for cities the   same Les 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 based   URL and City based URL for each if button is  clicked change title open dialogue set tle to   new open dialogue open dialogue open dialogue  then open the time dialogue if it is save it is   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 I 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 for returned  in case it is then passing the Town Base   URI passing the ID because this method needs  an ID of it at the end of the day if through   then get down then there is a method to display  the message okay this is saved and I believe if   if' added it to the homepage yes now let's also  try this and see so from our server let's write again and now let's also refresh the client got is ready so let's open it management  and now town we have it in here so City and now   town so Town let's let me edit this now in Acra  we have that say in ACA it's a town save this   aside from that we also have um let me use the  ones that I know okay so these are all towns   then okay you need to provide city name okay  so this AA so we have to added two now maybe   in Kum say we have uh T okay for Kumi so Kumi  I just select this and yeah that's why I know   foros or Nigeria I don't know from this okay  uh 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 CL   and I could 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 the user want to manage   it how can it 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  an entry point or this is a management point that   you can manage it when it gets to employee you  have to add all the so we 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 no not add user okay   user must get registered R going to be assigned  automatically and the admin row here it is to   update the role so if you are just a normal  user I can turn you to be an administrator   to what I am I I can also um um de administer  you okay yes 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 now create   user page 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 I let's add a new component this is going   to be us our dialogue now this us 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 dto   to it so maybe later on I don't want to just SP  the whole issue with it okay so I just maintain   this maybe in a later project any time I want to  create itos I just have to add the name convention   all right I'll be adding to it but well you  can to do that for clarity sake and also for   readability well it's good right click on DS and  you're 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   now 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 man useres over there ready we have system  rows that's what we we created when doing the   authentication it is about part two part one part  two yes so part two part three you can check up   you're going to understand what system row is  but if I peep on the definition for this it is   just a road that start from table to the database  ID and our name that is what it needs 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 the model to the parent then we check you  need to provide user uh the provide row 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 dialogue   and you can see there is an update this is only  update user so we 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 I think this suppos yeah it's gone that's you   display SED 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 the same thing the values  and name and at the test name you at first you to   have the value name as the ID this time right  you're 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 now 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 row 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 or there the normal   user yes so if this is clicked to we want to have  this un value selected in here we get the name as   you can see here we not using n. pass we get want  to get the name straight because this a string I   want to assign it in here we have you can also  change title but title I'm not sure this this   important now because no title changing it's only  update and I even this there's no title needed   here okay so open dialog set visible 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 why 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 user page let's first half or  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 you create an instance of this we   create a container it's not container actually  it is just an instance of this is manage model   then we get all users from manage users we get  the system rules then when the page initializes   get user R get rows in here okay so within this  we have this get users and now this man 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 to 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  click the container get all users and now if it   is clicked then you can see in here manager is  equal to this right so we open a dialogue okay   so you need not to oh maybe you can just set  the title upate user but title is already set   already title is already set already it is set  ready so you need not to override 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're 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 it's on you call   the service maybe later on you can decide to  you can put some uh 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   this 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 display it up but know we   having this 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 account authentication 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 hasn't   have these interfaces check it out so go to this  account service check the account interface it has   only create sign up refresh token I get weather  forecast okay now with this you want to remove   this we don't need for again so let's clear that  so we are going to replace it with this ones so   you can see we have get a list of managers we have  this update user and passing this the payload we   have get rols is a list of system roles and we  have this delete user and ID is a payload okay   so we have to create implementation for this now  let's go to the interface implementation and you   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 Jon has a list of manager   there's an all URL and the users we're going to  create an endpoint known as users so you can see   we using this um AP add and AU 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 is a private type and now you must   have the token to the header let's have a look  there's 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 is  get Rose so for get rowes all I need to do here   is to get a system rowes and then display it so  get private ATP client then system row to the /   row 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 delete user passing delete user and 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 rowes 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 a i user account rippo  then in here let's past 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 refresh 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 this what you're 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 file okay because we don't want to be   repeating this method all the time so we create  one we can call this all the time oops object   oriented programming okay so we 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 what tax get  system rows and is app DB contest. system row.   as no tracking. two list so you want to return  and user row and also this application .2 list.   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 there is a user   there cannot be empty row because defaultly  when you create an account you're assigned to   a user role so defaultly you must have an account  attached to so if this happens it means there's a   problem somewhere else then they need to contact  me as a the developer now check here you see we   have the user is equal to new list of manager we  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 to user 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  name because that's what we need so get a 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 weet  said 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 we return the user as a  list 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 updates us what are we doing it is returning just a general response  we passing the 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 row coming in from this user row  it is found in there if it is it means the user   is found you want to grab the the user so get  the user ID is equal to this user ID from this   row user row okay so see what we are doing we are  having this user coming in with an user ID now we   have this so here whil we retrieve this user ID  in here we can have the user ID from this isn't   it now we want to get the user rows this user row  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 you can save  changes and I'll return this Ro user Ro updated   successfully so that's what we're doing so here  user is updating only the row not any information   only row 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   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 rows 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 deleted so ID application user find   it when you get it deleted save changes and our  return user successfully deleted so that's what we   are doing let's go in there and I'll add our end  point 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 and API com as   made to this weord 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 rows and the  next one one is to delete user so call this end   point to delete user now you know that the HTTP  web here some of them they have these are the   route specify this are specific rout 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 Endo is ready so let's have a  look let's run the server and I see so save all on the server then the bag and I'll start with  that the baging all right so let's see the end   point 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 44 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 endpoint from an end point   where we have from the client where we going 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 myt you see  now let's see from this user page where is it   there you go so you can see this it's now it's  working now let's find the client so the app   is ready now let me open it widely management  and now 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 this 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 users 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 same 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 you can see   we displaying them in here and now we have the  click that is an edit and I'll 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 getting them get users and  now I've explained this earlier on so this is   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 you're going to have 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 is 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 login 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 usign 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 net code this maybe code academy  then it's user one password 1 2 3 1 2 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 got it sign in 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 is Frederick now you see  here I am although I'm not an admin back   I can see this so maybe later you're going to  protect this page only admin can have access   to this Administration but with this 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 out of the delet I just 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 space it we provide the manage user  system roles over here has a list list and   now there's an 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   you have this um manage user as a payload and  we update it now let's save 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 see the name is is disabled em  disabled 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 log in again all the administrated features  the person is going to see I can also change   it back so let's see 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 ad 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 tabs 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 toher 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 inher from the same interface   and I specify the T value so we do that we pass  in 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 video so you know what  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 is 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 same but  here let's try this and see first we you 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 will work so we have  to um 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 success okay now that's all that   we need to do here for this user we save the 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're going Al 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 too   and that's all that we are doing okay so when you  run this let's test this API out and I'll see so   if I right click on the employee the server go to  debug start without debugging and unless 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  than to the EMP 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   repository we have to include that as well okay  so with this we can now save this and run this again so this is ready now from  authentication Branch City count   country Department you have employee  then Department town where Clos 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 so we can do that so let's go to   the UI and I'm 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 I in here from  the pages content Pages you're going to create   another page known as employee pages so here  you can see this is the layouts we have our   Pages content pages so is 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 or update employee maybe you can add a page to this then you can also have um employee page  this add or update employee going to be um a   chart component to this employee page we are not  going to create you're not going to use a 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 us 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 US start to type that is what we want   to do something like that so let's let's have  a look on how to work with the work around so   with this we also go to when you check this  allate you can see we have show employee down here so show employee right so um the first  do here is we this page also going inherit   from this component uh I disposable interface  and you want to say if your employee is 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 through 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 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 that container  this what you 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 're using this x large that's for  close so to close form because we have 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 row then in the next row we want to have the first line so the next row  here okay so let's have this a classroom   then in that we can close this now in the  second row we want to have this div in here and now we it's going to load here just a  bootstrap Cloud 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 is 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 format 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 have the first layer from this   employee section and let's see with 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 flu  now first layer if it is true then you want   to display this it's 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 I call LG2  and as you can see from here if I minimize this we have column LG2 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  you'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 um create this   group okay so you can have group one in  group two all right let's put that in the dto so you go to solution where you have the dto   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 sa 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's the branch   ID the town ID and now the other  okay so this 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 modu 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 columned 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 you can see  from here personal information then this going to   be the other information so yet you're going to  use the test input test S ID file number and and   then photo photo later on you're going to modify  this this is going to be um an input file that us   has to select a picture here but for now you want  to use a testt box for testing purpose later on   we're going to do that convert to this the first  string and I'll save it to database but for now   let's maintain this and we have the submit button  and I you see we have this a nest so this button   here we say Nest when I click on this I'm going  to submit it to this form that a form one this   okay I'm going to submit to that form so this  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 is the first   layer when it comes to second layer we also doing  the same form two and this is the 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 we need  the department before 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 they can 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 null 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 you're going to display   the department name in case it is not equal to n  here we do same to the next one that's Department   name so here is going to be general department  name this department name and this where the   employee name so from the not the employee from  the brand from the brand we can retrieve this from   the employee model 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  and this a branch the T item is a branch and the   T item to for this branch which has this on  Branch value change so if you 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 forms 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 at the next one here we have the   next one column al4 there a location information  and we say this 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 we have   submit type of what save we have from LG2 and LG2  in here yeah 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 4 42 as 2 442 the  same thing right and this are all edit form edit   form 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 da and as you can  see so we have this inactive da that's what   you're using in here if you check this we have  the floating number we have floating number one   floating da one floting number two and now  floting da two and now you have the same   thing in here now when to check this are CSS  T 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 you 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 this uh the container   the state container rather is going to be the  perent component okay so that I can just Tagle   between the Tagle the show and height for this  add or update employee okay so we have the first   layer second layer and default first layer set to  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 bu correctly we're   going to see the next one it's going to handle  this so how do we Tagle 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 false   and our 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 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 same Fusion data grid okay   so let's go to Let's install this  we go to the client dependencies   you are C go to man get packages and  now in here we need s Fusion data um grade okay so that is this one s. blazer.  great so data great this is what you need   to install I go for my preferred  version 23.13 6 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 look through the employee L  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 there is in allate do show employee okay  and now in here we also have show main page in   here so you're going to Tagle between this page  and now the add or out employee page so we can   show main page we can show we can add employee we  can also show main page and do a whole lot okay   so back and forth back and forth but as soon as I  click on Department then all state do 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 I add add employee is going to  hiire 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 subscribe to this event  from the page loads first then we can back here   so when the page loads you can see we subscribe  to this and I we load 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 you 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. grd 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 displaying an  icon as um B bootstrap icon plus cir 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 that you want to display  then S ID file name employee name telephone number   job name um branch and now Town ID but this  not Town name okay so later on if is click 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 to this all that we  we need to do for now 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 add 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 will  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 this set to through   defaultly and this set to forse 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 an add or update component we   need to add that so in here we're going to say  add or update employee page you need to add it   like that I 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 home page employee page  and now in here show or we have to assign a value   to this so that is 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 forse 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   do not implement this add disposable page so  add or update it has to since we 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 un subscribe as  well I believe for SED but let's   see we nameing get request app 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 we'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 go down here   you can see our form we have this close form so  this close form when we 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 we want  to hide the child and a display the component   the the parent okay showing that you'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 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 we 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 comment this for now when   you get to the update section then we can update  it from there okay so let's let me also comment this the comments are here 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 on   general department value change and I'll check  here on Department value change 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  Brands right we also do have we also have to do   same to countries cities and our town okay so 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 provide this um valys or   this mod here from the parent component we  need to also do same for the Department as well so we have our department D department  and we have Branch okay so that's all we need   to do aside from that since we have our employee  group in here we need to also add our employee   itself this what you're going to use to work  the method so maybe we can put this on top here okay now let's go to this um change event  happen if in case they do happen when you   click on any of them what do 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 to 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 we are not actually  invoking this but we are storing this   employee group in two. town ID is equal to  this this is for the town this is going to   have access 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  the department we are passing in the department   ID when it gets the appearent table we are going  to search you department and I'll retrieve all   Department which have the general ID as equal  to what is coming in then we populate that LS   to the department 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 the  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 forms down here  so let's say this is going to be the form so one and two not one and one  one one and two so the first one is a   form one and this going to be maybe an  ASN for now let's have it as void form one okay then going to have the same form two Okay so that's what we're going to do um  for now we are not implementing anything yet   we are not invoking the method 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 and now let's   wait and see okay so we can see we have this table  form and this a data 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  a 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 this is the   clue if I click on this that is this is going to  be Hand by the parent so this is from the chart   if I click on this it must send the signal to the  parent that you want to HDE 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 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 filled up right and unless I'm done  so you see if I'm done filling this up then   I click on next then I have to navigate to the  next page but for now if I navigate to the next   page this page must get this side must get loaded  and 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 we going to implement   next so for now this is what we are doing I think  we've we've we've worked on it so far we've spent   many hours to to handle this this employee is  going to be the next one we're going to add all   the data here to the local to the database and  also we can make a query and I can display all   the list here in the data grade we can also make  a search we can make a sort we're going to apply   pagination to as well and later on you're going  to add an export to your um PDF or even word then   you will see how to print it out then then we  are done so for now this is what I'm going to   learn here and let's all rest for a while thank  you so much for watching this video it has been   so many hours of coding yeah trust me um it  is something that we need to do okay so thank   you so much for watching this and I'm hope  I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 2,228

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, Building, Create, Develop, Design, Implement., 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

Id: yn8myOeZgFw

Length: 201min 11sec (12071 seconds)

Published: Thu Jan 04 2024